/* DocHaqq website — mobile-first. Breakpoints: 640 / 1024 (product's 768 tablet band is not needed here). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: var(--primary); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--primary); border-radius: var(--r-xs); }
.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--primary); color: #fff; padding: 12px 20px; border-radius: var(--r-pill); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.center { text-align: center; }

/* ---------- Type ---------- */
.t-display-xl { font-size: var(--fs-display-xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.6px; text-wrap: balance; }
.t-display-lg { font-size: clamp(26px, 1.9vw + 18px, 48px); font-weight: 600; line-height: 1.25; letter-spacing: -0.4px; text-wrap: balance; }
.t-heading-lg { font-size: 22px; font-weight: 600; line-height: 1.3; }
.t-heading-md { font-size: 18px; font-weight: 600; line-height: 1.35; }
.t-body-lg { font-size: 16px; line-height: 1.5; }
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Icons (Lucide, stroke 1.5) ---------- */
.icon { width: 20px; height: 20px; flex: none; stroke-width: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-instant) var(--ease), border-color var(--dur-instant) var(--ease), color var(--dur-instant) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn--sm { min-height: 44px; padding: 10px 20px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-deep); }
.btn--primary:active { background: var(--primary-press); }
.btn--secondary { background: var(--canvas); color: var(--primary); border-color: var(--primary); }
.btn--secondary:hover { background: var(--primary-tint); }
.btn--secondary:active { background: var(--primary-tint); color: var(--primary-press); border-color: var(--primary-press); }
/* On the gradient / night: white pill + outlined pill. Never gradient-filled. */
.btn--on-dark-primary { background: #fff; color: var(--primary); }
.btn--on-dark-primary:hover { background: var(--primary-tint); }
.btn--on-dark-primary:active { background: #D6D2F7; }
.btn--on-dark-secondary { background: transparent; color: #fff; border-color: #fff; }
.btn--on-dark-secondary:hover { background: rgba(255, 255, 255, 0.14); }
.btn--on-dark-secondary:active { background: rgba(255, 255, 255, 0.22); }
.btn--on-dark-primary:focus-visible, .btn--on-dark-secondary:focus-visible,
.cta :focus-visible, .site-footer :focus-visible { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--ink-inverse); }
.cta :focus-visible { box-shadow: 0 0 0 2px #4338CA, 0 0 0 4px #fff; }

.btn-row { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
@media (min-width: 640px) { .btn-row { flex-direction: row; justify-content: center; align-items: center; gap: 16px; } }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; font-size: 15px; color: var(--primary); text-decoration: none;
}
.link-arrow .icon { transition: transform var(--dur-base) var(--ease); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.site-header__logo { display: inline-flex; align-items: center; min-height: 44px; margin-inline-end: auto; }
.site-header__logo img { height: 28px; width: auto; }
@media (min-width: 640px) { .site-header__logo img { height: 32px; } }
.site-header__actions { display: flex; align-items: center; gap: 8px; }

.menu-toggle {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-pill); color: var(--ink);
}
.menu-toggle:hover { background: var(--canvas-soft); }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

/* Mobile nav panel */
.nav {
  /* absolute (not fixed): the header's backdrop-filter would make it the containing block anyway */
  position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--header-h)); z-index: 40;
  background: var(--canvas); padding: 8px var(--gutter) 32px; overflow-y: auto;
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav__list { display: flex; flex-direction: column; }
.nav__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px;
  padding: 0; font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: none; border: 0; border-bottom: 1px solid var(--hairline); text-align: start;
}
.nav__trigger { cursor: default; }
.nav__chevron { display: none; }
.nav__menu { padding: 4px 0 12px; border-bottom: 1px solid var(--hairline); }
.nav__menu a { display: block; padding: 10px 0 10px 16px; min-height: 44px; text-decoration: none; color: var(--ink); border-inline-start: 2px solid var(--hairline); }
.nav__menu a:hover { border-inline-start-color: var(--primary); }
/* current page: sapphire text only */
.nav__link[aria-current="page"], .nav__link.is-current, .nav__menu a[aria-current="page"] .nav__menu-title { color: var(--primary); font-weight: 600; }
.nav__menu a[aria-current="page"] { border-inline-start-color: var(--primary); }
.nav__menu-title { display: block; font-size: 15px; font-weight: 600; }
.nav__menu-desc { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }
body.nav-open { overflow: hidden; }

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .nav {
    position: static; height: auto; visibility: visible; opacity: 1; transform: none; padding: 0; overflow: visible; background: none; transition: none;
    order: 0;
  }
  .site-header__logo { margin-inline-end: 0; }
  .site-header__inner { gap: 32px; }
  .nav { margin-inline-end: auto; margin-inline-start: 16px; }
  .nav__list { flex-direction: row; align-items: center; gap: 4px; }
  .nav__item { position: relative; }
  .nav__link {
    width: auto; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 500; gap: 6px; justify-content: center; cursor: pointer;
  }
  .nav__link:hover, .nav__trigger[aria-expanded="true"] { background: var(--canvas-soft); }
  .nav__chevron { display: block; width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); }
  .nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
  .nav__menu {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 300px; padding: 8px;
    background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
    box-shadow: var(--shadow-card-hover);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__menu a { padding: 10px 14px; border: 0; border-radius: var(--r-md); }
  .nav__menu a:hover { background: var(--canvas-soft); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-pad); overflow-x: clip; }
.section--soft { background: var(--canvas-soft); }
.section--white { background: var(--canvas); }
.section-title { text-align: center; margin-bottom: var(--sp-lg); }
@media (min-width: 1024px) { .section-title { margin-bottom: var(--sp-xl); } }

/* ---------- Fact card (reference pattern) ---------- */
.fact-card {
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-sm);
  display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
@media (hover: hover) {
  .fact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
}
@media (min-width: 640px) { .fact-card { padding: 24px; } }
.fact-visual { margin-bottom: 4px; }
.fact-text { font-size: 16px; line-height: 1.5; color: var(--ink); }
.fact-source { font-size: 13px; line-height: 1.4; color: var(--muted); }
.fact-source a { color: var(--muted); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.fact-source a:hover { color: var(--ink); }
.stat-number { font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -1.5px; align-self: flex-start; margin-top: 4px; }
@media (min-width: 1024px) { .stat-number { font-size: 72px; } }
.card-icon {
  width: 48px; height: 48px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-tint); color: var(--primary);
}
.card-icon .icon { width: 24px; height: 24px; }

/* ---------- 1. Hero ----------
   The copy sits in the first screen with height-aware spacing, so the product window always peeks above
   the bottom edge of whatever screen it is opened on, then grows to full size as you scroll. */
.hero {
  padding-top: 0; overflow-x: clip; position: relative; isolation: isolate;
  /* canvas-soft at the top, white at the bottom: no seam with Section 2 */
  background: linear-gradient(180deg, var(--canvas-soft) 0%, var(--canvas-soft) 45%, var(--canvas) 92%);
}
/* Soft colour wash: slow-drifting blooms across the whole hero. The mask fades it out gradually over the
   lower part of the hero, so the colour dissolves into Section 2's white instead of stopping half way. */
.aurora {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.55) 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.55) 68%, transparent 100%);
}
.aurora span { position: absolute; width: max(120vw, 520px); aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.aurora span:nth-child(1) { left: -60%; top: -8%; background: radial-gradient(circle, rgba(67, 56, 202, 0.26), rgba(67, 56, 202, 0) 66%); animation: drift-a 26s ease-in-out infinite alternate; }
.aurora span:nth-child(2) { left: -10%; top: 0%; background: radial-gradient(circle, rgba(109, 40, 217, 0.22), rgba(109, 40, 217, 0) 64%); animation: drift-b 31s ease-in-out infinite alternate; }
.aurora span:nth-child(3) { right: -65%; top: -4%; background: radial-gradient(circle, rgba(147, 51, 234, 0.18), rgba(147, 51, 234, 0) 66%); animation: drift-c 36s ease-in-out infinite alternate; }
/* Lower, fainter blooms keep the colour going down the sides of the product window */
.aurora span:nth-child(4) { left: -70%; top: 34%; background: radial-gradient(circle, rgba(67, 56, 202, 0.13), rgba(67, 56, 202, 0) 66%); animation: drift-c 40s ease-in-out infinite alternate; }
.aurora span:nth-child(5) { right: -70%; top: 44%; background: radial-gradient(circle, rgba(147, 51, 234, 0.11), rgba(147, 51, 234, 0) 66%); animation: drift-a 44s ease-in-out infinite alternate; }
@media (min-width: 1024px) {
  .aurora span { width: min(64vw, 980px); }
  .aurora span:nth-child(1) { left: -8%; top: -22%; }
  .aurora span:nth-child(2) { left: 22%; top: -16%; }
  .aurora span:nth-child(3) { right: -6%; top: -18%; }
  .aurora span:nth-child(4) { left: -18%; top: 30%; }
  .aurora span:nth-child(5) { right: -18%; top: 42%; }
}
@keyframes drift-a { to { transform: translate(9%, 8%) scale(1.08); } }
@keyframes drift-b { to { transform: translate(-7%, 10%) scale(0.94); } }
@keyframes drift-c { to { transform: translate(-10%, -4%) scale(1.1); } }
.hero.is-offscreen .aurora span, .hero.is-offscreen .mark-live__mid { animation-play-state: paused; }

/* Brand pattern (replaces the dot field): a faint grid of logo marks around the headline.
   Now and then one mark's middle bar slips out of line, lights up, and settles back. */
.marks-wrap {
  position: absolute; inset: 0 0 auto 0; height: clamp(480px, 70vh, 760px); z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(62% 62% at 50% 44%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
  mask-image: radial-gradient(62% 62% at 50% 44%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
}
.marks { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: none; }
#mk rect, .mark-live rect { fill: var(--primary); } /* not the mask's rects: they must stay black/white */
.marks__grid { opacity: 0.10; }
.mark__mid { fill-opacity: 0.45; } /* lighter middle bar, as in the logo */
.mark-live rect { opacity: 0.10; }
.mark-live__mid { animation: mark-slip 20s var(--ease) infinite; animation-delay: var(--d, 0s); }
/* now and then a mark's middle bar slides further out of line and lights up, then settles back */
@keyframes mark-slip {
  0%, 74%, 100% { transform: translateX(0); opacity: 0.10; fill-opacity: 0.45; fill: #4338CA; }
  78%, 90% { transform: translateX(5px); opacity: 0.85; fill-opacity: 1; fill: #6D28D9; }
}

/* Spacing scales with screen HEIGHT: room above the copy and the gap to the window grow on tall screens
   (so big monitors show more of the product on the first screen) and tighten on short laptops and phones
   (so the window still peeks above the fold). */
.hero__screen { display: flex; justify-content: center; padding-top: clamp(40px, 12vh, 160px); padding-bottom: clamp(40px, 7vh, 88px); }
@supports (height: 100svh) { .hero__screen { padding-top: clamp(40px, 12svh, 160px); padding-bottom: clamp(40px, 7svh, 88px); } }
.hero__copy { text-align: center; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.hero__copy .btn-row { margin-top: 12px; }
.hero__sub { color: var(--ink-secondary); max-width: 46ch; margin-inline: auto; font-weight: 450; }
@media (min-width: 640px) { .hero__copy { gap: 20px; } }
/* Type scales with screen WIDTH: 28px on a 375px phone → 48px at 1024 → 60px at 1400+ (headline);
   16px → 20px (subhead). Heavier subhead on large screens, where 400 reads thin. */
.hero .t-display-xl { font-size: clamp(28px, 3.08vw + 16.5px, 60px); letter-spacing: -0.02em; }
.hero__sub { font-size: clamp(16px, 0.4vw + 14.5px, 20px); }
@media (min-width: 1280px) { .hero__sub { font-weight: 500; } }
@media (min-width: 1440px) { .hero .btn { min-height: 52px; padding: 14px 28px; font-size: 16px; } }

/* Compare card: a product window — document (drag to check) + findings. Side by side ≥1024, stacked below. */
.compare-card { position: relative; max-width: 1080px; margin: 0 auto; isolation: isolate; }
/* Fades up on load (not on scroll): only a small peek is on screen at first, so a scroll reveal would never fire. */
.js .compare-card { animation: hero-rise 900ms var(--ease) 360ms both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Soft brand bloom behind the window (section-background use of the website gradient; the window is opaque) */
.compare-card::before {
  content: ""; position: absolute; z-index: -1; inset: 8% 6% -6%; border-radius: 40%;
  background: radial-gradient(60% 60% at 30% 40%, rgba(67, 56, 202, 0.22), transparent 70%), radial-gradient(55% 55% at 75% 60%, rgba(147, 51, 234, 0.16), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.window {
  background: var(--canvas); border-radius: var(--r-xl); border: 1px solid rgba(24, 23, 31, 0.07);
  box-shadow: 0 1px 2px rgba(24, 23, 31, 0.04), 0 12px 32px -8px rgba(24, 23, 31, 0.12), 0 40px 80px -24px rgba(67, 56, 202, 0.20);
  transform-origin: 50% 0%; /* no permanent will-change: it rasterises the window and softens its text */
}
.window__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--hairline); font-family: "Geist", system-ui, sans-serif;
}
.window__file { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink-secondary); }
.window__file .icon { width: 16px; height: 16px; color: var(--muted); }
.window__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window__tag { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); padding: 2px 8px; border: 1px solid var(--hairline); border-radius: var(--r-pill); }
.compare { position: relative; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; --pos: 97%; }
.compare__layers { display: grid; height: 100%; overflow: hidden; }
/* Document stage: a quiet dotted grid, so the payslip reads as a document under inspection */
.compare__layer {
  grid-area: 1 / 1; background-color: #F7F7FA;
  background-image: radial-gradient(rgba(24, 23, 31, 0.10) 1px, transparent 1.2px); background-size: 16px 16px; background-position: 8px 8px;
}
.compare__layer--check { clip-path: inset(0 0 0 var(--pos, 97%)); }
/* Desktop: room in the margins for the finding notes */
@media (min-width: 1024px) {
  .compare { --cw: 208px; }
  .compare .paper { max-width: min(640px, calc(100% - 2 * (var(--cw) + 44px))); }
}

.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 97%); width: 44px; margin-left: -22px;
  display: flex; align-items: center; justify-content: center; touch-action: none; cursor: ew-resize; z-index: 3;
}
.compare__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--ink); opacity: 0.85; }
/* Glass grip with a gradient core (the gradient grip is an approved placement) */
.compare__grip {
  position: relative; width: 44px; height: 44px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(24, 23, 31, 0.08), 0 6px 18px rgba(24, 23, 31, 0.18);
  transition: transform var(--dur-base) var(--ease);
}
.compare__grip > .icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--gradient); color: #fff; stroke-width: 2; }
.compare__grip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.compare:not(.is-touched) .compare__grip::after { animation: grip-ring 2.4s var(--ease) 1.2s infinite; }
@keyframes grip-ring { 0% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.35); } 70%, 100% { box-shadow: 0 0 0 12px rgba(109, 40, 217, 0); } }
.compare__handle:hover .compare__grip, .compare.is-dragging .compare__grip { transform: scale(1.06); }
.compare__handle:focus-visible { box-shadow: none; }
.compare__handle:focus-visible .compare__grip { box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--ink); }
.compare__hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(24, 23, 31, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink-inverse); font-family: "Geist", system-ui, sans-serif; font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: 0 4px 14px rgba(24, 23, 31, 0.18);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.compare__hint .icon { width: 14px; height: 14px; }
.compare.is-touched .compare__hint { opacity: 0; transform: translate(-50%, 4px); }

/* --- Product-style document (Geist, flat, 13–14px) --- */
.doc { font-family: "Geist", system-ui, sans-serif; font-size: 14px; line-height: 1.45; padding: 12px 12px 60px; }
@media (min-width: 640px) { .doc { padding: 20px 32px 64px; } }
.doc__bar { display: flex; margin-bottom: 12px; min-height: 24px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--canvas); box-shadow: 0 0 0 1px rgba(24, 23, 31, 0.08), 0 1px 2px rgba(24, 23, 31, 0.06);
  font-size: 12px; font-weight: 500; color: var(--ink);
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--control-border); }
.chip--check { background: var(--ink); color: var(--ink-inverse); box-shadow: 0 1px 2px rgba(24, 23, 31, 0.2); }
.chip--check .icon { width: 14px; height: 14px; stroke-width: 2; }
.chip--end { margin-inline-start: auto; }
.paper { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 16px 16px 20px; max-width: 640px; margin-inline: auto; box-shadow: 0 1px 2px rgba(24, 23, 31, 0.04), 0 8px 24px -6px rgba(24, 23, 31, 0.08); }
@media (min-width: 640px) { .paper { padding: 24px 28px 28px; } }
.paper__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.paper__org { font-size: 16px; font-weight: 600; letter-spacing: -0.15px; }
.paper__sub { font-size: 13px; color: var(--muted); }
.paper__ref { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--muted); padding-top: 3px; }
.paper__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px 12px; padding: 12px 0; font-size: 13px; }
.paper__meta dt { font-size: 12px; color: var(--muted); }
.paper__meta dd { font-weight: 500; }
.paper__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.paper__table th { text-align: start; font-weight: 400; padding: 9px 0; border-top: 1px solid var(--hairline); }
.paper__table td { text-align: end; padding: 9px 0; border-top: 1px solid var(--hairline); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paper__table .is-total th, .paper__table .is-total td { font-weight: 600; }
.paper__table .is-net th, .paper__table .is-net td { font-weight: 600; font-size: 15px; border-top: 1.5px solid var(--ink); }
/* ---------- Hero document tabs: plain text tabs in the window bar; a line under the active one slides between them ---------- */
.window__bar:has(.wtabs) { padding-left: 6px; gap: 8px; }
.wtabs { position: relative; display: flex; align-items: stretch; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wtabs::-webkit-scrollbar { display: none; }
.wtab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; background: none; color: #8A8996;
  font: 500 13.5px/1 "Geist", system-ui, sans-serif; cursor: pointer; transition: color 250ms var(--ease); -webkit-font-smoothing: antialiased; }
.wtab { color: var(--muted); } /* inactive: brand muted grey */
.wtab .icon { width: 14px; height: 14px; }
.wtab[aria-selected="true"] { color: var(--primary); font-weight: 600; } /* active: sapphire */
@media (hover: hover) { .wtab:not([aria-selected="true"]):hover { color: var(--ink); } }
.wtab:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; border-radius: 6px; }
.wtabs__ind { position: absolute; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary); left: var(--x, 0); width: var(--w, 0);
  transition: left 450ms cubic-bezier(0.22, 1, 0.36, 1), width 450ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
/* Phones: the window's own title bar is the switcher (‹ document name · dots · n of 4 ›), so the control stays
   attached to the document it changes, nothing is hidden off-screen, and the count says there are more. */
.wnav { display: none; }
@media (max-width: 639px) {
  .window__bar:has(.wtabs) { height: auto; padding: 6px; }
  .wtabs, .window__tag { display: none; }
  .wnav { display: flex; align-items: center; gap: 4px; width: 100%; }
  .wnav__btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--primary-tint); color: var(--primary); cursor: pointer; }
  .wnav__btn .icon { width: 20px; height: 20px; stroke-width: 2.2; }
  .wnav__btn:active { scale: 0.94; }
  .wnav__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .wnav__name { font: 600 15px/1.2 "Geist", system-ui, sans-serif; color: var(--ink); }
  .wnav__dots { display: inline-flex; align-items: center; gap: 5px; }
  .wnav__dots i { width: 6px; height: 6px; border-radius: 50%; background: #D6D3EE; transition: background-color 200ms var(--ease), width 200ms var(--ease); }
  .wnav__dots i.is-on { width: 16px; border-radius: 3px; background: var(--primary); }
  .wnav__dots b { margin-left: 6px; font: 500 11px/1 "Geist", system-ui, sans-serif; color: var(--muted); }
}
.compare .compare__layers { transition: opacity 180ms var(--ease); }
.note__card { position: relative; top: var(--dy, 0px); }
.compare.is-swapping .compare__layers, .compare.is-swapping .notes { opacity: 0; }

/* ---------- Hero documents: shared bits ---------- */
.ar { font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", system-ui, sans-serif; font-size: 0.95em; color: var(--muted); }
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
/* Salary certificate (letter on letterhead) */
.lh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #2E2B8C; }
.lh__name { font-size: 16px; font-weight: 700; letter-spacing: -0.1px; color: #2E2B8C; }
.lh__addr { font-size: 11px; color: var(--muted); margin-top: 2px; }
.lh .ar { font-weight: 700; color: #2E2B8C; font-size: 14px; }
.ltr__meta { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 12px; font-size: 12px; color: var(--muted); }
.ltr__title { text-align: center; font-weight: 700; letter-spacing: 0.08em; font-size: 14px; margin-bottom: 10px; }
.ltr__title .ar { display: block; letter-spacing: 0; font-weight: 600; }
.ltr__to { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.ltr__body { font-size: 13px; line-height: 1.55; color: var(--ink-secondary); margin-bottom: 6px; }
.paper__table--tight th, .paper__table--tight td { padding: 6px 0; }
.ltr__note { font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.ltr__sign { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; }
.ltr__sig { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 18px; color: #2E2B8C; }
.ltr__role { font-size: 11px; color: var(--muted); }
.stamp { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1.5px dashed rgba(67, 56, 202, 0.4); color: rgba(67, 56, 202, 0.5); font-size: 9px; text-align: center; line-height: 1.2; rotate: -12deg; }
/* Bank statement and invoice */
.bk { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.bk__name { font-size: 15px; font-weight: 700; color: #1E1B4B; }
.bk__sub { font-size: 12px; color: var(--muted); }
.paper__meta--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
.stmt { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.stmt th { text-align: start; font-weight: 600; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 4px; background: #F4F3FB; }
.stmt td { padding: 6px 4px; border-top: 1px solid var(--hairline); white-space: nowrap; }
.stmt td:nth-child(n + 3), .stmt th:nth-child(n + 3) { text-align: end; }
.stmt td:nth-child(2) { white-space: normal; }
.stmt--inv td:nth-child(n + 2), .stmt--inv th:nth-child(n + 2) { text-align: end; }
.inv__title { text-align: end; } .inv__title p { font-weight: 700; letter-spacing: 0.06em; font-size: 13px; }
.inv__tot { margin-top: 6px; margin-left: auto; max-width: 260px; }
@media (min-width: 640px) { .stmt { font-size: 12.5px; } .stmt th { font-size: 10.5px; padding: 7px 6px; } .stmt td { padding: 7px 6px; } }
/* Bank statement: the layout and neutral grey palette of a typical Omani bank statement */
.paper--statement { font-family: Arial, "Helvetica Neue", system-ui, sans-serif; color: #1a1a1a; }
.bm { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bm__brand { display: flex; flex-direction: column; line-height: 1.1; }
.bm__ar .ar { color: #333; font-size: 12px; font-weight: 700; }
.bm__wm { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; color: #333; }
.bm__addr { font-size: 9px; line-height: 1.45; color: #444; text-align: start; max-width: 46%; }
.bm__band { margin: 8px 0; padding: 4px; text-align: center; font-weight: 700; font-size: 11.5px; background: #D9D9D9; border: 1px solid #BFBFBF; }
.bm__top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 10px; line-height: 1.45; margin-bottom: 8px; }
.bm__cust b { font-size: 10.5px; }
.bm__right p { display: flex; justify-content: flex-end; gap: 14px; text-align: end; }
.bm__branch { margin-top: 5px; border: 1px solid #BFBFBF; display: flex; flex-direction: column; }
.bm__branch b { background: #D9D9D9; padding: 2px 6px; font-size: 10px; }
.bm__branch span { padding: 0 6px; } .bm__branch span:last-child { padding-bottom: 3px; }
.bm__info, .bm__tx { width: 100%; border-collapse: collapse; font-size: 10px; font-variant-numeric: tabular-nums; }
.bm__info { margin-bottom: 8px; }
.bm__info th, .bm__tx th { background: #D9D9D9; font-weight: 700; text-align: start; padding: 4px 5px; border: 1px solid #BFBFBF; }
.bm__info td { background: #F2F2F2; padding: 4px 5px; border: 1px solid #BFBFBF; }
.bm__tx td { padding: 4px 5px; border-left: 1px solid #D9D9D9; border-right: 1px solid #D9D9D9; }
.bm__tx tbody tr:nth-child(even) td { background: #F2F2F2; } /* alternating rows, as on the statement */
.bm__tx tbody tr:last-child td { border-bottom: 1px solid #BFBFBF; }
.bm__tx td:nth-child(n + 4), .bm__tx th:nth-child(n + 4) { text-align: end; white-space: nowrap; }
@media (min-width: 640px) { .bm__info, .bm__tx { font-size: 11px; } .bm__top { font-size: 10.5px; } }
@media (max-width: 639px) {
  .bm__tx .vd, .bm__hide { display: none; }
  .bm__addr { display: none; }
  .bm__top { grid-template-columns: 1fr; gap: 6px; } .bm__right p { justify-content: flex-start; }
  .bm__tx { font-size: 9px; table-layout: fixed; } .bm__tx th { font-size: 8.5px; padding: 4px 3px; } .bm__tx td { padding: 4px 3px; word-break: break-word; }
  .bm__tx th:nth-child(1), .bm__tx td:nth-child(1) { width: 21%; white-space: nowrap; letter-spacing: -0.02em; }
  .bm__tx th:nth-child(3), .bm__tx td:nth-child(3) { width: 31%; }
}
/* CR certificate: shared bits (status, activities band, activity line) */
.crt__ok { color: var(--risk-low); font-weight: 600; }
.crt__sec { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 5px 6px; background: #EEEDF8; font-weight: 700; font-size: 11px; }
.crt__sec .ar { font-size: 11px; font-weight: 600; }
.crt__act { padding: 7px 6px; font-size: 11.5px; border-bottom: 1px solid var(--hairline); }

/* CR certificate v3: mirrored bilingual form (English left, Arabic right), as on the official certificate */
.crm__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #DCD9F2; }
.crm__logo { font-size: 8px; line-height: 1.2; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; border-left: 3px solid #6D28D9; padding-left: 5px; }
.crm__emb { width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed rgba(109, 40, 217, 0.35); }
.crm__title { text-align: end; } .crm__title .ar { font-weight: 700; color: #1E1B4B; font-size: 13px; } .crm__title p { font-size: 10.5px; font-weight: 600; color: #1E1B4B; line-height: 1.25; }
.crm { font-size: 10.5px; }
.crm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 2px; border-bottom: 1px dotted #E4E2F2; }
.crm__en { display: flex; gap: 8px; align-items: baseline; } .crm__en b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.crm__ar { display: flex; gap: 8px; align-items: baseline; justify-content: flex-end; text-align: end; } .crm__ar b .ar { font-weight: 600; color: var(--ink); font-size: 10.5px; }
.crm__row--name { padding: 2px 2px 6px; font-weight: 700; font-size: 11px; } .crm__row--name > span:last-child { text-align: end; }
.crm__foot { margin-top: 8px; }
.crm__warn { color: var(--risk-high); font-size: 9.5px; line-height: 1.45; } .crm__warn span { display: block; text-align: end; }
.crm__sign { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6px; font-size: 9.5px; color: var(--muted); }
.crm__sign .qr { width: 40px; height: 40px; }
@media (max-width: 479px) { .crm__ar { display: none; } .crm__row { grid-template-columns: 1fr; } .crm__row--name > span:last-child { text-align: start; } }

/* Commercial registration certificate */
.paper--cr { border-top: 4px solid #2E2B8C; }
.crh { text-align: center; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.crh__country { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.crh__title { font-size: 15px; font-weight: 700; color: #1E1B4B; margin-top: 4px; }
.crf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; font-size: 12.5px; }
.crf > div { padding: 8px 4px; border-bottom: 1px solid var(--hairline); }
.crf__wide { grid-column: 1 / -1; }
.crf dt { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.crf dd { font-weight: 500; margin: 2px 0 0; }
.crf .ar { margin-inline-start: 6px; }
.crq { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.qr { flex: none; width: 52px; height: 52px; border-radius: 4px; background:
  conic-gradient(from 90deg at 30% 30%, #1E1B4B 25%, transparent 0) 0 0 / 10px 10px,
  linear-gradient(#fff, #fff); border: 3px solid #1E1B4B; opacity: 0.8; }

.num-alt { font-family: "Montserrat", system-ui, sans-serif; font-weight: 500; letter-spacing: -0.2px; }

/* Large screens (1280+, e.g. 1920×1080 monitors): the hero window grows and the document reads at a larger size.
   Wider container for the hero only; the rest of the page keeps its 1200px measure. */
@media (min-width: 1280px) {
  .hero .container { max-width: 1360px; }
  .compare-card { max-width: 1240px; }
  .compare { --cw: 232px; }
  .window__bar { height: 48px; padding-inline: 20px; }
  .window__file { font-size: 13px; }
  .doc { font-size: 15px; padding: 24px 40px 72px; }
  .doc__bar { margin-bottom: 16px; }
  .paper { padding: 28px 32px 32px; }
  .compare .paper { max-width: min(720px, calc(100% - 2 * (var(--cw) + 48px))); }
  .paper__org { font-size: 18px; }
  .paper__sub, .paper__meta { font-size: 14px; }
  .paper__meta dt, .paper__ref { font-size: 13px; }
  .paper__table { font-size: 15px; }
  .paper__table th, .paper__table td { padding: 11px 0; }
  .paper__table .is-net th, .paper__table .is-net td { font-size: 16px; }
  .note__title { font-size: 14px; }
  .results__summary { padding-inline: 20px; }
}
@media (min-width: 1600px) {
  .hero .container { max-width: 1440px; }
  .compare-card { max-width: 1320px; }
}
@media (min-width: 2200px) {
  .hero .container { max-width: 1640px; }
  .compare-card { max-width: 1480px; }
}

/* Annotation (check layer only). Shapes + numbers + outline style carry meaning, never colour alone. */
.flag { position: relative; display: inline-block; }
.flag::after { content: ""; position: absolute; inset: -3px -6px; border-radius: var(--r-xs); pointer-events: none; }
.flag--high::after { border: 1.5px solid var(--risk-high); background: rgba(194, 59, 59, 0.10); }
.flag--review::after { border: 1.5px dashed var(--risk-review); background: rgba(199, 127, 26, 0.12); }
.pin {
  position: absolute; top: -17px; left: -13px; width: 22px; height: 22px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Geist", system-ui, sans-serif; font-size: 12px; font-weight: 600; line-height: 1;
}
.pin--high { background: var(--risk-high); color: #fff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pin--review { background: var(--canvas); color: var(--ink); border: 2px solid var(--risk-review); border-radius: var(--r-pill); width: 20px; height: 20px; }
.pin--static { position: static; flex: none; }
.pin--review.pin--static { width: 20px; height: 20px; }
.shape { display: inline-block; width: 10px; height: 10px; flex: none; }
.shape--diamond { background: var(--risk-high); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.shape--ring { border: 2px solid var(--risk-review); border-radius: 50%; width: 10px; height: 10px; }

/* Notes (desktop ≥1024): each finding slides out beside its box, joined by a leader line.
   Positioned by JS from the box's place on the payslip; shown while the box is uncovered. */
.notes { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: none; font-family: "Geist", system-ui, sans-serif; }
@media (min-width: 1024px) { .notes { display: block; } }
.note { position: absolute; display: flex; align-items: center; transform: translateY(-50%); }
.note--high { color: var(--risk-high); }
.note--review { color: var(--risk-review); }
.note.is-left { flex-direction: row-reverse; }
.note__line {
  position: relative; flex: none; width: var(--len, 48px); height: 1.5px; background: currentColor; opacity: 0.7;
  transform: scaleX(0); transform-origin: left center; transition: transform 160ms var(--ease-exit);
}
.note.is-left .note__line { transform-origin: right center; }
.note__line::before { content: ""; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.note.is-left .note__line::before { left: auto; right: -3px; }
.note.is-dashed .note__line { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
.note__card {
  flex: none; width: var(--cw, 208px); padding: 12px 14px; border-radius: 12px; background: var(--canvas); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(24, 23, 31, 0.07), 0 12px 28px -10px rgba(24, 23, 31, 0.22);
  opacity: 0; transform: translateX(-8px); pointer-events: auto;
  transition: opacity 160ms var(--ease-exit), transform 160ms var(--ease-exit), box-shadow var(--dur-base) var(--ease);
}
.note.is-left .note__card { transform: translateX(8px); }
.note.is-on .note__line { transform: none; transition: transform 240ms var(--ease); }
.note.is-on .note__card { opacity: 1; transform: none; transition: opacity 280ms var(--ease) 140ms, transform 280ms var(--ease) 140ms, box-shadow var(--dur-base) var(--ease); }
.note.is-emph .note__card { box-shadow: 0 0 0 1.5px currentColor, 0 14px 32px -10px rgba(24, 23, 31, 0.26); }
.note__head { display: flex; align-items: flex-start; gap: 10px; }
.note__head .pin { position: static; flex: none; }
.note__title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.note__detail { font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
.note__detail .mono { font-size: 11px; }
.note__card .tag { margin-top: 8px; }

/* Results bar: summary on every screen; below 1024 it also shows the findings one at a time. */
.results { border-top: 1px solid var(--hairline); border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--canvas); font-family: "Geist", system-ui, sans-serif; }
.results__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; min-height: 56px; }
.results__segs { display: inline-flex; gap: 4px; }
.results__segs i { width: 18px; height: 6px; border-radius: 3px; background: #E6E5EC; transition: background-color 240ms var(--ease); }
.results__segs i.is-on.seg--high { background: var(--risk-high); }
.results__segs i.is-on.seg--review { background: var(--risk-review); }
.results__status { display: grid; }
.results__status > .badge { grid-area: 1 / 1; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.results__status .badge--high { opacity: 0; transform: translateY(4px); }
.results.has-verdict .badge--pending { opacity: 0; }
.results.has-verdict .badge--high { opacity: 1; transform: none; }
.results__count { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.results__tagline { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--ink); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.badge--high { background: rgba(194, 59, 59, 0.10); }
.badge--pending { border: 1px solid var(--hairline); color: var(--muted); }

.results__current { position: relative; display: grid; padding: 0 16px 16px; min-height: 104px; }
.results__current > *, .results__current > [data-rnotes] > * { grid-area: 1 / 1; }
.results__current > [data-rnotes] { display: contents; } /* the wrapper (swapped per document) must not break the stack */
.results__empty { align-self: center; font-size: 14px; color: var(--muted); transition: opacity var(--dur-base) var(--ease); }
.results.has-found .results__empty { opacity: 0; }
.rnote {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 60px 12px 12px; border-radius: 12px; background: #F7F7FA;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 160ms var(--ease-exit), transform 160ms var(--ease-exit), visibility 0s linear 160ms;
}
.rnote.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s; }
.rnote__title { font-size: 14px; font-weight: 500; line-height: 1.4; }
.rnote__detail { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.results__next {
  position: absolute; right: 22px; top: 50%; margin-top: -30px; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--canvas); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(24, 23, 31, 0.08), 0 2px 6px rgba(24, 23, 31, 0.08);
}
.results__next .icon { width: 18px; height: 18px; }
@media (max-width: 639px) { .results__tagline { flex-basis: 100%; margin: 0; order: 9; } }
@media (min-width: 1024px) {
  .results__current { display: none; }
  .results__summary { min-height: 60px; padding-inline: 20px; }
}

.tag { margin-top: 8px; }
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--hairline); border-radius: var(--r-xs);
  font-size: 12px; font-weight: 500; color: var(--ink-secondary); white-space: nowrap;
}
.mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink-secondary); }

/* Flags on the document: pop once when found; emphasised while the matching finding is hovered */
.flag.is-found .pin { animation: pin-pop 320ms var(--ease) both; }
@keyframes pin-pop { 0% { transform: scale(0.5); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.flag::after { transition: box-shadow var(--dur-base) var(--ease); }
.flag--high.is-emph::after { box-shadow: 0 0 0 4px rgba(194, 59, 59, 0.16); }
.flag--review.is-emph::after { box-shadow: 0 0 0 4px rgba(199, 127, 26, 0.18); }

/* ---------- Shared section intro (centred, like the other section titles) ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.section-intro { text-align: center; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.eyebrow {
  align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--primary-tint); color: var(--primary); font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
}
.t-soft { color: var(--muted); }
/* Thread: a line draws down from the hero window as you scroll (--p), then lands as a small logo mark
   whose middle bar slips out of line. */
.problem { padding-top: 0; }
.thread {
  --p: 1; --q: clamp(0, (var(--p) - 0.55) / 0.45, 1);
  position: relative; width: 48px; height: clamp(84px, 12vh, 124px); margin: 0 auto clamp(32px, 4vh, 48px);
}
.thread__line {
  position: absolute; left: 50%; top: 0; bottom: 30px; width: 2px; margin-left: -1px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(67, 56, 202, 0), var(--primary));
  transform: scaleY(min(1, calc(var(--p) / 0.55))); transform-origin: top;
}
.thread__mark {
  position: absolute; left: 50%; bottom: 0; width: 30px; margin-left: -15px; display: flex; flex-direction: column; gap: 4px;
  opacity: var(--q); transform: translateY(calc((1 - var(--q)) * -10px));
}
.thread__mark i { display: block; height: 5px; border-radius: 3px; background: var(--primary); }
.thread__mark i:nth-child(2) { background: var(--gradient); transform: translateX(calc(var(--q) * 8px)); }
.section-intro .t-body-lg { color: var(--ink-secondary); max-width: 58ch; margin-inline: auto; }
@media (min-width: 1024px) { .section-intro .t-body-lg { font-size: clamp(18px, 0.3vw + 14.5px, 20px); } }
.how__head .t-body-lg { font-size: clamp(16px, 0.3vw + 14.5px, 20px); }

/* ---------- 2. Problem: intro → stats → fact items ---------- */
/* Stats: no rules — whitespace and alignment carry the row. One column on mobile. */
.stats { display: grid; gap: 28px; margin-top: 40px; text-align: center; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat__num { font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.stat__caption { font-size: clamp(16px, 0.25vw + 14px, 18px); line-height: 1.45; color: var(--ink); max-width: 26ch; margin-top: 8px; text-wrap: balance; }
.stat .fact-source { margin-top: 2px; }
@media (min-width: 1024px) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 72px; }
  .stat__num { font-size: 56px; }
}

.problem__items { display: grid; gap: 56px; margin-top: 64px; }
@media (min-width: 1024px) { .problem__items { grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 96px; } }
.problem-item { display: flex; flex-direction: column; gap: 10px; }
.problem-item .t-heading-lg { margin-top: 14px; text-wrap: balance; font-size: clamp(22px, 0.8vw + 15px, 28px); }
.problem-item .fact-text { font-size: clamp(16px, 0.25vw + 14px, 18px); }
.problem-item .fact-text { color: var(--ink-secondary); }
.problem-item .fact-source { margin-top: auto; min-height: 44px; display: flex; align-items: center; gap: 0.3em; }

.glow { position: relative; isolation: isolate; }
.glow::before, .glow::after { display: none; content: ""; position: absolute; z-index: -1; width: 50%; aspect-ratio: 1; border-radius: 50%; filter: blur(64px); pointer-events: none; }
.glow::before { top: 4%; right: -6%; background: #4338CA; opacity: 0.12; } /* below the stats, never behind gradient text */
.glow::after { bottom: 10%; left: -6%; background: #6D28D9; opacity: 0.10; }

/* Section 2 visuals: one simple data card on a soft lavender panel. Real numbers only; no grey "progress"
   tracks (they read as dashboard clutter). Scrubbed by scroll via --p (0→1, main.js), reversible. */
.viz {
  --p: 1; position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 300px; padding: 32px 16px; border-radius: var(--r-xl);
  background:
    radial-gradient(70% 60% at calc(80% - var(--p) * 20%) 0%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(60% 55% at calc(10% + var(--p) * 15%) 100%, rgba(147, 51, 234, 0.14), transparent 70%),
    linear-gradient(160deg, #F6F5FD 0%, #EEEBFB 55%, #F1E9FC 100%);
}
@media (min-width: 640px) { .viz { padding: 48px 40px; } }
@media (min-width: 1024px) { .viz { min-height: 340px; } }
.ui-card {
  width: 100%; max-width: 400px; padding: 20px; border-radius: 16px; background: var(--canvas); color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(67, 56, 202, 0.06), 0 16px 40px -16px rgba(67, 56, 202, 0.24);
  transform: translateY(calc((1 - var(--p)) * 24px));
}
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.ui-sub { font-size: 13px; font-weight: 500; color: var(--muted); }
.ui-pill {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--primary-tint); color: var(--primary); font-size: 12px; font-weight: 600;
  opacity: 0; transform: translateY(4px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.ui-pill .icon { width: 13px; height: 13px; stroke-width: 2; }
.ui-pill.is-on { opacity: 1; transform: none; }
.ui-big { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 14px; font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.ui-of { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }

/* 120 ticks, one per application; JS marks how many are "reviewed" for the current scroll position */
.ticks { display: flex; align-items: flex-end; gap: 1px; height: 56px; }
.ticks i { flex: 1; height: 24px; border-radius: 1px; background: #E6E5EC; transition: background-color 120ms linear; }
.ticks i.is-on { background: #C7C2F3; }
.ticks i.is-flag { position: relative; min-width: 3px; transition: height var(--dur-slow) var(--ease), background-color 120ms linear; }
.ticks i.is-flag.is-on { height: 40px; background: var(--primary); border-radius: 2px; }
.ticks i.is-flag::before {
  content: ""; position: absolute; left: 50%; top: -12px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); opacity: 0; transform: scale(0.4);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease);
}
.ticks i.is-flag.is-on::before { opacity: 1; transform: none; }

/* 2,000 people: two bars on one scale, no background tracks */
.res { margin-top: 16px; }
.res__head { display: flex; align-items: baseline; gap: 10px; }
.res__num { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
.res__num--accent { color: var(--primary); }
.res__label { font-size: 14px; color: var(--ink-secondary); }
.res__bar { display: block; height: 8px; margin-top: 10px; border-radius: 4px; }
.res__bar--long { background: var(--gradient); transform: scaleX(calc(0.999 * var(--p))); transform-origin: left center; }
/* 2 of 2,000 is 0.1%: drawn as a minimal visible stub so it can be seen at all */
.res__bar--short { width: 6px; background: var(--primary); opacity: var(--p); }

/* ---------- 3. How it works: a scroll journey ----------
   The stage pins under the header while the hero's case (A. Al Balushi) moves through four poses:
   upload → check → compare → result. main.js writes each document's transform and a few progress
   variables (--sy scan, --br bridge, --res finding, --dec decision, --jp overall) from scroll position, so
   the motion is continuous and reversible. The section runs white → soft → white so S2 → S3 → S4 have no edges. */
.how__title { font-size: clamp(30px, 2.6vw + 16px, 60px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.how__more { margin-top: 32px; text-align: center; }
/* the gradient thread carries on from the rail into Section 4 */
.journey-sec .how__more::after { content: ""; display: block; width: 2px; height: clamp(56px, 9vh, 104px); margin: 24px auto 0; border-radius: 2px; background: linear-gradient(180deg, #9333EA, rgba(147, 51, 234, 0)); }
.defs { position: absolute; width: 0; height: 0; }

.journey-sec {
  /* the pinned stage fills the screen, so the section itself needs little padding */
  padding-top: clamp(16px, 3vh, 40px); padding-bottom: clamp(32px, 5vh, 64px);
  /* a clear but soft step from S2's white into the soft grey: short fades (fixed px, not %, so the change
     is felt within one scroll), then grey through the whole journey, back to white before S4 */
  --s3-bg: #EEEDF5; /* deeper than canvas-soft: #F5F5F8 is invisible on large monitors */
  background: transparent; /* the page colour itself shifts to --s3-bg while S3 is on screen (main.js) */
}
.journey { --k: 0.54; --dw: calc(200px * var(--k)); --dh: calc(272px * var(--k)); position: relative; }
@media (min-width: 640px) { .journey { --k: 0.8; } }
@media (min-width: 1024px) { .journey { --k: 1; } }
@media (min-width: 1600px) { .journey { --k: 1.15; } }
@media (min-width: 1600px) and (min-height: 960px) { .journey { --k: 1.3; } }

.journey__pin { position: relative; }
.journey__inner { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 40px); padding-block: 24px; }
.journey__head { display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); text-align: center; }
.journey__sub { font-size: clamp(16px, 0.35vw + 14.5px, 21px); line-height: 1.45; color: var(--ink-secondary); }
.journey.is-live { height: 250vh; } /* phones: shorter scroll, same story */
@media (min-width: 1024px) { .journey.is-live { height: 330vh; } }
.journey.is-live .journey__pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; }
.journey.is-live .journey__inner { flex: 1; min-height: 0; justify-content: center; padding-block: clamp(16px, 3vh, 40px); }
@media (min-width: 1280px) { .journey__inner { max-width: 1360px; } }

/* Stage */
.jstage { position: relative; isolation: isolate; height: clamp(360px, 54svh, 600px); flex: 0 1 auto; }
.journey.is-live .jstage { flex: 1 1 auto; height: auto; min-height: 300px; max-height: 520px; }
@media (min-width: 640px) { .journey.is-live .jstage { max-height: none; } }
.jwash { display: none; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; will-change: transform; }
.jwash--a { left: -6%; top: -30%; background: radial-gradient(circle, rgba(67, 56, 202, 0.16), rgba(67, 56, 202, 0) 64%); animation: drift-a 28s ease-in-out infinite alternate; }
.jwash--b { right: -8%; top: -12%; background: radial-gradient(circle, rgba(147, 51, 234, 0.13), rgba(147, 51, 234, 0) 64%); animation: drift-b 34s ease-in-out infinite alternate; }

/* Light from beneath: one soft sapphire glow under the documents, a faint floor line. Colour is in the story, not the page. */
/* Light platform: the logo's three bars laid flat as a floor in perspective, one lane under each document.
   The middle lane is lighter and carries the gradient; when the comparison fails it slips back out of line,
   as in the logo. Driven by --br / --res from main.js. */
.jstage::before, .jstage::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: calc(50% + var(--dh) * 0.28); height: calc(var(--dh) * 0.95);
  transform-origin: 50% 0; pointer-events: none; border-radius: calc(16px * var(--k));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}
.jstage::before { /* outer lanes */
  width: calc(var(--dw) * 3.7);
  transform: translateX(-50%) perspective(900px) rotateX(62deg);
  background:
    linear-gradient(180deg, rgba(67, 56, 202, 0.09), rgba(67, 56, 202, 0)) left / 30% 100% no-repeat,
    linear-gradient(180deg, rgba(67, 56, 202, 0.09), rgba(67, 56, 202, 0)) right / 30% 100% no-repeat;
}
.jstage::after { /* middle lane */
  --slip: max(var(--br, 0), var(--res, 0));
  width: calc(var(--dw) * 3.7 * 0.3);
  transform: translateX(-50%) perspective(900px) rotateX(62deg) translateY(calc(var(--slip) * var(--dh) * 0.22));
  background: linear-gradient(180deg, rgba(109, 40, 217, calc(0.14 + 0.16 * var(--slip))), rgba(147, 51, 234, 0.03));
}
.journey-sec, .journey__pin { overflow-x: clip; }
.jdoc { box-shadow: 0 1px 2px rgba(24, 23, 31, 0.08), 0 24px 48px -16px rgba(30, 24, 90, 0.45) !important; }

/* Documents */
.jdoc {
  position: absolute; left: 50%; top: 50%; width: var(--dw); height: var(--dh);
  display: flex; flex-direction: column; gap: 0.55em; padding: 1.15em;
  font-family: "Geist", system-ui, sans-serif; font-size: calc(12px * var(--k)); color: var(--ink);
  background: #fff; border: 1px solid var(--hairline); border-radius: calc(14px * var(--k));
  box-shadow: 0 1px 2px rgba(24, 23, 31, 0.05), 0 18px 40px -12px rgba(43, 36, 120, 0.22);
  transform: translate(-50%, -50%); will-change: transform, opacity;
}
.jd-a { z-index: 1; transform: translate(-150%, -50%); }
.jd-b { z-index: 2; }
.jd-c { z-index: 3; transform: translate(50%, -50%); }
.jdoc__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35em; }
.jdoc__sym { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.7em; background: var(--primary-tint); color: var(--primary); font-weight: 700; font-size: 0.9em; letter-spacing: 0.02em; }
.jdoc__badge { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--risk-low); color: #fff; opacity: var(--ok, 0); scale: calc(0.6 + 0.4 * var(--ok, 0)); }
.jdoc__badge svg { width: 62%; height: 62%; stroke-width: 3; }
.jdoc__name { font-size: 1.32em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.jdoc__sub { margin-top: -0.35em; color: var(--muted); font-size: 0.92em; }
.jdoc__row { display: flex; justify-content: space-between; gap: 0.5em; padding-bottom: 0.45em; border-bottom: 1px dashed var(--hairline); font-size: 0.92em; color: var(--muted); white-space: nowrap; }
.jdoc__row b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.jdoc__amt { position: relative; display: flex; flex-direction: column; gap: 0.15em; margin-top: auto; padding: 0.65em 0.75em; border-radius: 0.7em; background: #F4F3FB; }
.jdoc__amt small { font-size: 0.85em; color: var(--muted); }
.jdoc__amt strong { font-size: 1.38em; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* outline drawn by the scan, turns red when the comparison fails */
.jdoc__amt::after { content: ""; position: absolute; inset: -4px; pointer-events: none; opacity: var(--hl, 0); --c: #6D28D9; --l: 0.9em;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px var(--l);
  background-repeat: no-repeat; transition: --c 300ms; }
.jstage.is-miss :is(.jd-a, .jd-c) .jdoc__amt::after { --c: var(--risk-high); }
.jstage.is-miss .jd-c .jdoc__amt strong { color: var(--risk-high); }
.jdoc__foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.85em; color: var(--muted); }
.jdoc__mark { display: inline-flex; flex-direction: column; gap: 0.18em; }
.jdoc__mark i { display: block; width: 2em; height: 0.34em; border-radius: 2px; background: var(--primary); opacity: 0.6; transition: background-color 300ms var(--ease); }
/* middle bar: out of line until the scan checks the document, then it settles; on the failed comparison
   the bank statement's slips back out and turns red */
.jdoc__mark i:nth-child(2) { background: var(--gradient); opacity: 0.55; translate: calc((1 - var(--ok, 0)) * 0.6em) 0; transition: translate 500ms cubic-bezier(0.34, 1.6, 0.64, 1), background 300ms var(--ease); }
.jstage.is-miss .jd-c .jdoc__mark i:nth-child(2) { translate: 0.7em 0; background: var(--risk-high); opacity: 1; }

/* Scan: a soft gradient band with a bright leading edge, sweeping down all three documents */
.jscan {
  position: absolute; z-index: 5; left: 50%; top: calc(50% - var(--dh) / 2); width: calc(var(--dw) * 3.5); margin-left: calc(var(--dw) * -1.75);
  height: 2px; border-radius: 2px; background: var(--gradient); box-shadow: 0 0 18px rgba(109, 40, 217, 0.55);
  transform: translateY(calc(var(--sy, 0) * var(--dh))); opacity: var(--so, 0); pointer-events: none;
}
.jscan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--dh) * 0.4); background: linear-gradient(180deg, rgba(109, 40, 217, 0), rgba(109, 40, 217, 0.12)); }

/* Links between the compared documents, drawn as dotted lines with a travelling pulse (data moving between
   the fields). Employee and employer agree (green tick); the amount does not (red ≠). */
.jlink, .jbridge { position: absolute; z-index: 6; left: calc(50% - var(--dw) * 0.4); width: calc(var(--dw) * 0.8); height: 4px; margin-top: -2px; pointer-events: none; }
.jlink { top: var(--ly1, 40%); opacity: var(--lk, 0); }
.jlink--2 { top: var(--ly2, 45%); }
.jlink::before, .jbridge::before {
  content: ""; position: absolute; inset: 1px 0; border-radius: 2px; transform-origin: left center; transform: scaleX(var(--lk, 0));
  background: #6D28D9;
}
.jbridge { top: var(--by, 50%); opacity: min(1, calc(var(--br, 0) * 4)); }
/* the amount tie breaks: it runs from each side and stops short of the middle */
.jbridge::before { transform: scaleX(var(--br, 0)); background: linear-gradient(90deg, #6D28D9 0 38%, transparent 38% 62%, var(--risk-high) 62%); }
/* travelling pulse */
.jlink::after, .jbridge::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #9333EA; box-shadow: 0 0 8px 2px rgba(147, 51, 234, 0.45); opacity: 0;
}
.jbridge::after { background: var(--risk-high); box-shadow: 0 0 8px 2px rgba(194, 59, 59, 0.45); }
.jstage.is-linked .jlink::after { animation: jpulse 1.8s var(--ease) infinite; }
.jstage.is-linked .jlink--2::after { animation-delay: 0.5s; }
.jstage.is-miss .jbridge::after { animation: jpulse 1.4s var(--ease) infinite; }
@keyframes jpulse { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.jlink em, .jbridge em {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  font-style: normal; font-weight: 700; line-height: 1; color: #fff; transform: translate(-50%, -50%) scale(0);
  transition: transform 420ms cubic-bezier(0.34, 1.6, 0.64, 1);
}
.jlink em { width: calc(18px * max(var(--k), 0.75)); background: var(--risk-low); box-shadow: 0 0 0 4px rgba(45, 138, 86, 0.12); }
.jlink em svg { width: 64%; height: 64%; stroke-width: 3.2; }
.jstage.is-linked .jlink em { transform: translate(-50%, -50%) scale(1); }
.jbridge em {
  width: calc(34px * max(var(--k), 0.75)); font-size: calc(18px * max(var(--k), 0.75)); background: var(--risk-high);
  box-shadow: 0 0 0 6px rgba(194, 59, 59, 0.14), 0 6px 18px rgba(194, 59, 59, 0.35);
}
.jstage.is-miss .jbridge em { transform: translate(-50%, -50%) scale(1); }

/* Reference letters (audit style): tie a figure on a document to its line in the finding */
.ref { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: 0.4em; border-radius: 50%; border: 1px solid #9333EA; color: #9333EA;
  font-family: "Geist Mono", ui-monospace, monospace; font-style: normal; font-size: 0.82em; font-weight: 600; line-height: 1; vertical-align: 0.05em; }
.jdoc__ref { position: absolute; top: 0.55em; right: 0.6em; margin: 0; background: #fff; opacity: var(--res, 0); }

/* Finding */
.jfind {
  position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; margin-inline: auto; max-width: 400px;
  display: flex; flex-direction: column; gap: 12px; padding: 18px; font-family: "Geist", system-ui, sans-serif; font-size: 13px;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 1px 2px rgba(24, 23, 31, 0.05), 0 28px 60px -18px rgba(43, 36, 120, 0.32);
  opacity: var(--res, 0); transform: translateY(calc((1 - var(--res, 0)) * 28px)) scale(calc(0.96 + 0.04 * var(--res, 0)));
  pointer-events: none;
}
.jfind::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 16px 16px 0 0; background: var(--gradient); }
.jfind__top { display: flex; justify-content: space-between; align-items: center; }
.jfind__verdict { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); background: rgba(194, 59, 59, 0.09); color: var(--risk-high); font-weight: 600; font-size: 12px; }
.jfind__ref { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--muted); }
.jfind__title { font-size: 1.22em; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.jfind__data { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jfind__data > span { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 10px; background: #F4F3FB; font-weight: 600; font-variant-numeric: tabular-nums; }
.jfind__data > span:last-child { background: rgba(194, 59, 59, 0.07); color: var(--risk-high); }
.jfind__data small { font-weight: 400; font-size: 11px; color: var(--muted); }
.jfind__ev { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.jfind__ev span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--primary); opacity: 0.5; vertical-align: 1px; }
.jfind__decide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--hairline); opacity: var(--dec, 0); transform: translateY(calc((1 - var(--dec, 0)) * 10px)); }
.jfind__who { flex-basis: 100%; margin-bottom: 4px; font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: 13px; }
.jbtn { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--hairline); background: #fff; font-weight: 500; font-size: 12px; }
.jbtn--primary { border-color: transparent; background: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(67, 56, 202, 0.35); }
@media (min-width: 640px) {
  .jfind { left: calc(50% - 110px * var(--k)); right: auto; top: 50%; bottom: auto; width: calc(430px * var(--k)); max-width: none; margin: 0; padding: 22px; font-size: 14px;
    transform: translate(calc((1 - var(--res, 0)) * 40px), -50%) scale(calc(0.96 + 0.04 * var(--res, 0))); }
  .jfind__who { flex-basis: auto; margin: 0 auto 0 0; white-space: nowrap; }
  .jfind__decide { flex-wrap: nowrap; } .jbtn { white-space: nowrap; }
}
@media (min-width: 1024px) { .jfind { left: calc(50% - 90px * var(--k)); } }

/* Rail: four steps, a progress line through the numbers; click to jump */
.jrail-wrap { position: relative; padding-bottom: 46px; }
.jrail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jrail__line { position: absolute; left: 12.5%; right: 12.5%; top: 14px; height: 2px; border-radius: 2px; background: var(--hairline); }
/* hover preview: the line ahead of you lights up faintly, up to the step under the pointer */
.jrail__line::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gradient); transform-origin: left center;
  transform: scaleX(var(--hv, 0)); opacity: 0; box-shadow: 0 0 10px rgba(109, 40, 217, 0.45); transition: transform 500ms var(--ease), opacity 300ms var(--ease); }
.jrail-wrap.is-hover .jrail__line::after { opacity: 0.35; }
.jrail__line i { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: var(--gradient); transform-origin: left center; transform: scaleX(var(--jp, 0));
  box-shadow: 0 0 12px 1px rgba(109, 40, 217, 0.5), 0 0 3px rgba(67, 56, 202, 0.6); }
.jstep { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; text-align: center; }
.jstep__num {
  position: relative; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600;
  background: var(--s3-bg, var(--canvas-soft)); border: 1.5px solid var(--hairline); color: var(--muted);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), scale 400ms cubic-bezier(0.34, 1.6, 0.64, 1);
}
.jstep__title { font-weight: 600; font-size: 15px; transition: color 300ms var(--ease); }
.jstep__text { position: absolute; left: 0; right: 0; bottom: 0; font-size: 14px; line-height: 1.45; color: var(--ink-secondary); opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); pointer-events: none; }
.jstep.is-done .jstep__num { border-color: transparent; color: #6D28D9; background: linear-gradient(#fff, #fff) padding-box, var(--gradient) border-box; }
.jstep.is-active .jstep__num { border-color: transparent; background: var(--gradient); color: #fff; scale: 1.12; box-shadow: 0 0 0 5px rgba(109, 40, 217, 0.12), 0 0 18px rgba(109, 40, 217, 0.55); }
.jstep.is-active .jstep__title { color: var(--ink); }
.jstep.is-active .jstep__text { opacity: 1; transform: none; }
.jstep:focus-visible { outline: none; }
.jstep:focus-visible .jstep__num { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (hover: hover) { .jstep:hover .jstep__title { color: var(--ink); } .jstep:not(.is-active):hover .jstep__num { border-color: transparent; color: #6D28D9; background: linear-gradient(#fff, #fff) padding-box, var(--gradient) border-box; box-shadow: 0 0 14px rgba(109, 40, 217, 0.35); } }
@media (min-width: 1024px) {
  .jrail-wrap { padding-bottom: 0; max-width: 1040px; margin-inline: auto; width: 100%; }
  .jrail { gap: 24px; }
  .jstep__title { font-size: 17px; }
  .jstep__text { position: static; max-width: 24ch; opacity: 0.55; transform: none; font-size: 14px; }
  .jstep.is-active .jstep__text, .jstep.is-done .jstep__text { opacity: 1; }
}
@media (min-width: 1600px) { .jstep__title { font-size: 18px; } .jstep__text { font-size: 15px; } }

/* S2 → S3 → S4 share one surface whose colour main.js shifts with scroll, so the change is felt as a wash, not an edge */
.problem.section--white, .industries.section--white { background: transparent; }
body { transition: background-color 120ms linear; }

/* ---------- 4. Industries: the list forms the logo ----------
   Centred two-tone headline (same family as S2/S3). The industries sit in soft bars stacked like the logo mark,
   each with a gradient cap. They slide in one after another; the last, open-ended bar settles out of line,
   like the logo's slipped middle bar. */
.ind { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(36px, 6vh, 72px); }
/* S4: headline left, then the line of industries */
.ind--line { align-items: stretch; gap: clamp(48px, 8vh, 96px); }
.industries { padding-block: 72px; }
@media (min-width: 1024px) { .industries { padding-block: clamp(96px, 16vh, 200px); } }
.ind__head { display: flex; flex-direction: column; gap: 16px; }
.ind__title.ind__title--left { text-align: left; margin: 0; max-width: none; text-wrap: wrap; }
.ind__sub { font-size: clamp(17px, 0.4vw + 15px, 21px); line-height: 1.5; color: var(--ink-secondary); }
@media (min-width: 768px) { .ind__sub { white-space: nowrap; } }
@media (min-width: 1280px) { .industries .ind { max-width: 1280px; } }

/* the line: one hairline through every industry, filled with the gradient by scroll (--p);
   it fades out past the last (open) column */
.iline { --q: 0; position: relative; display: grid; gap: 40px; margin: 0; padding: 0 0 0 32px; list-style: none; }
/* the line: a 2px gradient thread (sapphire to violet), fading in and out at both ends */
.iline::before { content: ""; position: absolute; left: 5px; top: -24px; bottom: -24px; width: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, #4338CA, #6D28D9);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 80%, transparent); }
/* only the text dims before a column lights; the dot stays solid so the line never shows through it */
.iline__col { --on: 0; position: relative; }
.iline__col > :not(.iline__dot) { opacity: calc(0.45 + 0.55 * var(--on)); }
.iline__dot { position: absolute; left: -32px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 1.5px solid var(--primary); z-index: 1; box-sizing: border-box; }
.iline__dot::after { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--primary); opacity: var(--on); }
.iline__col .iline__dot { box-shadow: 0 0 0 calc(var(--on) * 5px) rgba(67, 56, 202, 0.10); }
.iline__col--open .iline__dot { border-style: dashed; }
.iline__col--open .iline__dot::after { display: none; }
.iline__name { font-size: clamp(17px, 0.4vw + 15px, 20px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25; margin-top: -4px; }
/* documents as outlined chips: naturally stepped in, and stepping further in the further you scroll (--q) */
.iline__docs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.iline__docs li {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; white-space: nowrap;
  border: 1px solid #E2E0F0; border-radius: 10px; background: #fff; font-size: 14px; line-height: 1.3; color: var(--ink-secondary);
  margin-left: calc(var(--j) * 8px); transform: translateX(calc(var(--j) * 14px * var(--q))); will-change: transform;
}
/* a muted tick, like the card controls; it deepens to sapphire once the column is lit */
.itick { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #EEECFB; color: color-mix(in srgb, var(--primary) calc(45% + 55% * var(--on)), #fff); }
.itick .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.iline__col--open .iline__name { color: var(--ink-secondary); }
.iline__open { margin-top: 12px; max-width: 26ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
@media (min-width: 1024px) {
  .iline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 0; }
  .iline::before { left: -48px; right: -48px; top: 5px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, #4338CA, #6D28D9);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 80%, transparent); }
  .iline__dot { position: relative; left: 0; display: block; margin-bottom: 28px; }
  .iline__name { margin-top: 0; min-height: 2.5em; }
}
@media (min-width: 1440px) { .iline__docs li { font-size: 15px; } }
.ind__title { max-width: 18ch; text-align: center; font-size: clamp(32px, 3vw + 16px, 72px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.ind__more { font-size: clamp(16px, 0.4vw + 14px, 20px); color: var(--muted); text-align: center; }
.ind { gap: clamp(28px, 4.5vh, 56px); }

/* ---------- 4. Why (moved to its own page) ---------- */
.why__grid { display: grid; gap: 32px; align-items: start; }
.why__head { display: flex; flex-direction: column; gap: 8px; }
.why__cards { display: grid; gap: 16px; }
.mini { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.mini__doc { width: 40px; height: 52px; border: 1px solid var(--control-border); border-radius: var(--r-xs); padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; background: var(--canvas); }
.mini__doc i { display: block; height: 3px; border-radius: 2px; background: var(--hairline); }
.mini__doc i:first-child { background: var(--control-border); width: 60%; }
.mini__link { color: var(--primary); width: 24px; height: 24px; }
.mini--evidence { flex-direction: column; align-items: stretch; gap: 8px; max-width: 280px; }
.mini__row { display: flex; align-items: center; gap: 10px; height: 24px; }
.mini__bar { flex: 1; height: 8px; border-radius: 4px; background: var(--hairline); }
.mini__bar--short { flex: 0 0 55%; }
.mini__mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--ink); margin-inline-start: auto; }
@media (min-width: 1024px) {
  .why__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .why__head { gap: 16px; }
}

/* ---------- 5. Deployment (interim diagram) ---------- */
/* Two cards, same family as S4 (white here, on the soft section) */
.dep { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4.5vh, 56px); }
@media (min-width: 1280px) { .deploy .dep { max-width: 1200px; } }
.dcards { display: grid; gap: 16px; width: 100%; }
@media (min-width: 900px) { .dcards { grid-template-columns: 1fr 1fr; gap: 20px; } }
.dcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: clamp(24px, 2.2vw, 34px); background: #fff; border: 1px solid #E7E5FA; border-radius: var(--r-lg); }
/* a large outline watermark, cropped by the card's right edge: barely there, found by those who look */
.dmark { position: absolute; z-index: -1; right: -16%; top: 50%; width: 60%; height: auto; translate: 0 -50%; rotate: -16deg; color: #fff; opacity: 0.42; overflow: visible; pointer-events: none;
  transition: opacity 500ms var(--ease), translate 700ms var(--ease); }
.dmark--bars { right: -18%; width: 62%; }
/* soft wash per card (the reference's technique): the white watermark reads as pressed into it */
.dcard--api { background: linear-gradient(160deg, #E6EAFE 0%, #ECE9FC 55%, #F1ECFD 100%); border-color: transparent; }
.dcard--app { background: linear-gradient(160deg, #EEEAFD 0%, #EFE6FC 55%, #F5EDFD 100%); border-color: transparent; }
.dcard > :not(.dmark) { position: relative; }
@media (hover: hover) { .dcard:hover .dmark { opacity: 0.65; translate: -6px -50%; } }
.dcard .ifeat__icon { margin-bottom: 20px; }
/* the path in three steps; they arrive one after another as the card scrolls in (--s, main.js) */
.dflow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(67, 56, 202, 0.12); list-style: none; font-size: 14px; color: var(--ink-secondary); }
.dflow li { --t: clamp(0, calc(var(--s, 1) * 3.2 - var(--k)), 1); position: relative; padding: 6px 12px; border-radius: var(--r-pill); background: #fff;
  opacity: var(--t); transform: translateX(calc((1 - var(--t)) * -12px)); }
.dflow li + li::before { content: "→"; position: absolute; left: -19px; top: 50%; translate: 0 -52%; color: var(--muted); }
/* DocHaqq's step: tinted, not filled, so it reads as a label rather than a button */
.dflow .dflow__brand { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
@media (max-width: 559px) {
  .dflow { flex-direction: column; align-items: flex-start; gap: 22px; }
  .dflow li + li::before { content: "↓"; left: 14px; top: -20px; translate: 0 0; }
}
/* the card itself rises in slowly with scroll (--c) */
.dcard { opacity: var(--c, 1); transform: translateY(calc((1 - var(--c, 1)) * 48px)); }
.deploy .center { margin: 0; }

/* ---------- 6. Region / Security ---------- */
/* ---------- 6. Region: text left (no cards), dotted GCC map right ---------- */
.reg { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1280px) { .region .reg { max-width: 1280px; } }
.reg__text { display: flex; flex-direction: column; gap: clamp(28px, 4vh, 44px); position: relative; z-index: 1; }
.reg__head { display: flex; flex-direction: column; gap: 16px; }
.reg__text { container-type: inline-size; }
/* exactly two lines: size follows the column width so "Secured on your terms." always fits on one line */
.reg__head .reg__title { font-size: clamp(24px, 7.4cqi, 56px); white-space: nowrap; }
.reg__rows { border-top: 1px solid var(--hairline); }
.reg__row { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--hairline); }
.reg__row .ifeat__icon .icon { width: 26px; height: 26px; }
.reg__row .ibox__text { margin-top: 6px; max-width: 48ch; }
.reg__map { position: relative; margin-inline: -16px; -webkit-mask-image: radial-gradient(75% 75% at 55% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(75% 75% at 55% 50%, #000 60%, transparent 100%); }
.gcc-canvas { display: block; width: 100%; aspect-ratio: 1.4; position: relative; }
/* a soft colour haze behind the dots, as in the reference */
.reg__map::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; pointer-events: none; filter: blur(40px);
  background: radial-gradient(50% 60% at 30% 50%, rgba(109, 40, 217, 0.10), transparent 70%), radial-gradient(45% 55% at 75% 60%, rgba(192, 38, 211, 0.10), transparent 70%); }
@media (min-width: 1024px) {
  .reg { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 3vw, 56px); }
  .reg__map { margin: -6% -8% -6% 0; }
}
@media (max-width: 1023px) { .reg__map { order: -1; max-width: 560px; margin-inline: auto; width: 100%; } }

/* ---------- 7. Final CTA ---------- */
.cta { background: var(--gradient); color: #fff; }
.cta__copy { text-align: center; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 28px; align-items: stretch; }
.cta .t-display-lg { font-size: var(--fs-display-xl); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--ink-inverse); padding-block: 48px 32px; font-size: 15px; }
.site-footer a { color: var(--ink-inverse); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__grid { display: grid; gap: 32px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 360px; }
.site-footer__brand p { color: var(--muted-on-night); font-size: 15px; }
.site-footer__brand a:not(.btn) { min-height: 44px; }
.site-footer__brand .btn { color: var(--primary); }
.site-footer__brand .btn:hover { text-decoration: none; }
.site-footer__title { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted-on-night); margin-bottom: 4px; }
.site-footer__direct { gap: 12px; }
.site-footer__direct .icon { width: 18px; height: 18px; color: #A5B4FC; flex: none; }
.site-footer__direct span { display: flex; flex-direction: column; font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.site-footer__direct small { font-size: 11px; font-weight: 500; color: var(--muted-on-night); text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer__built { display: flex; align-items: center; gap: 10px; }
.mts-mark { width: 22px; height: 22px; flex: none; color: #fff; }
.mts-mark path { fill: currentColor; }
.site-footer__legal a { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 243, 238, 0.35); }
.site-footer__legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid #2E2D36; display: flex; flex-direction: column; gap: 4px; color: var(--muted-on-night); font-size: 13px; }
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1.2fr 1fr 1fr; }
  .site-footer__legal { flex-direction: row; justify-content: space-between; }
}

/* ---------- Dialog (Talk to us) ---------- */
.sheet {
  padding: 0; border: 0; border-radius: var(--r-xl); background: var(--canvas); color: var(--ink);
  width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
}
.sheet::backdrop { background: rgba(24, 23, 31, 0.40); }
.sheet[open] { animation: sheet-in var(--dur-slow) var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0 24px; }
.sheet__title { font-size: 22px; font-weight: 600; line-height: 1.3; }
.sheet__body { padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.sheet__lead { color: var(--ink-secondary); }
.sheet__divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.sheet__divider::before, .sheet__divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); }
.icon-btn:hover { background: var(--canvas-soft); }

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; }
.field__opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 16px; font-size: 16px; /* 16px: stops iOS focus-zoom */
  background: var(--canvas); color: var(--ink); border: 1px solid var(--control-border); border-radius: var(--r-sm);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.field.has-error input { border: 2px solid var(--risk-high); padding: 9px 15px; }
.field__error { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--ink); }
.field__error .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--risk-high); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { font-size: 14px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: var(--r-md); }
body.dialog-open { overflow: hidden; }

/* ---------- Stub pages ---------- */
.stub { min-height: 60vh; background: var(--canvas); padding-block: clamp(32px, 6vh, 72px) var(--section-pad); }
.stub .container { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.stub__art { display: block; width: min(100%, 560px); height: auto; margin-bottom: 4px; }
.stub .btn-row { justify-content: center; margin-top: 12px; }
.stub__text { max-width: 46ch; color: var(--ink-secondary); }

/* Apple-style scroll-linked reveal for section headings and sub-lines (--r from main.js, 0 → 1) */
.sr { --r: 0; opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 40px)); filter: blur(calc((1 - var(--r)) * 8px)); will-change: opacity, transform, filter; }

/* ---------- Scroll reveal: fade + 12px rise, staggered by --i. Only hides content when JS is running. ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal].is-in:not(.reveal-done) { transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .jwash { animation: none !important; }
  .window { transform: none !important; }
  .thread { --p: 1 !important; }
  .ui-card--a, .ui-card--b { transform: none; }
}

.reg .ind__sub { white-space: normal; max-width: 34ch; }

/* =================== How it works page =================== */
.hiw-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--canvas-soft); padding-block: clamp(72px, 13vh, 160px) clamp(72px, 12vh, 140px);
  border-bottom: 1px solid #E4E2F2; } /* its own band: the brand wash, then a clean edge into the white steps */
.hiw-hero .aurora { -webkit-mask-image: none; mask-image: none; }
.hiw-hero__inner { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.hiw-hero__title { font-size: clamp(38px, 4.4vw + 16px, 80px); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; }
.hiw-hero__sub { font-size: clamp(20px, 1vw + 16px, 30px); font-weight: 500; line-height: 1.3; color: var(--ink); max-width: 30ch; }
.hiw-hero__body { font-size: clamp(16px, 0.35vw + 15px, 20px); line-height: 1.6; color: var(--ink-secondary); max-width: 56ch; }
.hiw-hero__who { font-size: 15px; font-weight: 600; color: var(--primary); }
.hiw-h2 { margin-bottom: clamp(32px, 5vh, 56px); }
@media (min-width: 1280px) { .hiw-steps .container, .hiw-layers .container, .hiw-results .container { max-width: 1200px; } }

/* steps: text only, big sapphire numbers */
.hiw-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.hiw-step { display: grid; grid-template-columns: auto 1fr; gap: 16px 20px; padding: clamp(24px, 4vh, 40px) 0; border-bottom: 1px solid var(--hairline); }
.hiw-step__num { font-family: "Geist Mono", ui-monospace, monospace; font-size: clamp(22px, 1.4vw + 14px, 34px); font-weight: 600; color: var(--primary); line-height: 1.1; min-width: 2.4ch; }
.hiw-step__title { font-size: clamp(20px, 0.8vw + 16px, 28px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 10px; }
.hiw-step p { font-size: clamp(16px, 0.25vw + 15px, 18px); line-height: 1.65; color: var(--ink-secondary); max-width: 62ch; }
.hiw-step p + p { margin-top: 10px; }
.hiw-step__sign { margin-top: 18px !important; font-size: clamp(18px, 0.6vw + 15px, 22px) !important; font-weight: 600; color: var(--ink) !important; }
@media (min-width: 900px) { .hiw-step { grid-template-columns: 120px 1fr; } }
.hiw-example { margin: 20px 0 0; max-width: 620px; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.hiw-example figcaption { padding: 8px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--canvas-soft); border-bottom: 1px solid var(--hairline); }
.hiw-example table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hiw-example th, .hiw-example td { text-align: start; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.hiw-example th { font-size: 13px; color: var(--muted); font-weight: 600; }
.hiw-example td b { font-variant-numeric: tabular-nums; }
.hiw-example tr:last-child td b { color: var(--risk-high); }
.hiw-example > p { padding: 12px 14px; font-size: 15px !important; margin: 0 !important; }

/* layers: isometric stack (left) + explanation (right) */
.hiw-layers { background: var(--canvas-soft); }
.hiw-layers__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(32px, 5vh, 56px); }
.hiw-layers__head .hiw-h2 { margin-bottom: 0; }
.layers { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .layers { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); } }
.layers__stack { position: relative; height: clamp(300px, 46vw, 440px); perspective: 1600px; }
.layer { --lift: 0px; position: absolute; left: 50%; top: calc(54% - var(--n) * clamp(-2px, 0px, 0px)); width: min(78%, 360px); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-50%, -50%) translateY(calc((1 - var(--n)) * clamp(64px, 9vw, 92px) - var(--lift))) rotateX(58deg) rotateZ(-45deg);
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1); z-index: calc(var(--n) + 1); }
.layer__plate { position: absolute; inset: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.9); border: 1.5px solid #CFCAF5;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, -14px 14px 0 -2px rgba(67, 56, 202, 0.10), -22px 22px 40px rgba(43, 36, 120, 0.14);
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.layer__ui { position: absolute; inset: 18%; display: flex; flex-direction: column; justify-content: center; gap: 12%; }
.layer__ui i { display: block; height: 11%; border-radius: 6px; background: #E5E2FB; transition: background-color 400ms var(--ease); }
.layer__ui i:nth-child(2) { width: 80%; translate: 12% 0; }
.layer__ui i:nth-child(3) { width: 60%; }
.layer__name { position: absolute; left: 100%; top: 0; transform: rotateZ(45deg) rotateX(-58deg) translate(18px, 30px); transform-origin: 0 0; white-space: nowrap; font: 600 13px/1.2 "Montserrat", system-ui, sans-serif; color: var(--muted); transition: color 300ms var(--ease); }
/* active layer: lifts, fills sapphire; the others settle and dim */
.layer[aria-selected="true"] { --lift: clamp(28px, 4vw, 44px); }
.layer[aria-selected="true"] .layer__plate { background: linear-gradient(135deg, #4338CA, #6D28D9); border-color: transparent; box-shadow: -22px 22px 50px rgba(67, 56, 202, 0.35); }
.layer[aria-selected="true"] .layer__ui i { background: rgba(255, 255, 255, 0.55); }
.layers__stack:has(.layer[aria-selected="true"]) .layer:not([aria-selected="true"]) .layer__plate { background: rgba(255, 255, 255, 0.7); }
.layer:focus-visible { outline: none; } .layer:focus-visible .layer__plate { outline: 2px solid var(--primary); outline-offset: 4px; }
.layers__panel { min-height: 220px; }
.layer-copy { animation: layer-in 420ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes layer-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.layer-copy__n { font: 600 12px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.06em; color: var(--primary); margin-bottom: 10px; }
.layer-copy__title { font-size: clamp(22px, 1vw + 17px, 32px); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 12px; }
.layer-copy p:not(.layer-copy__n) { font-size: clamp(16px, 0.3vw + 15px, 19px); line-height: 1.65; color: var(--ink-secondary); max-width: 46ch; }
@media (max-width: 899px) { .layers__stack { height: 290px; } .layer { width: min(58%, 250px); } .layers__legend li { min-height: 40px; cursor: pointer; } }
/* legend: names of the three layers; the active one in sapphire, each one tappable via its plate */
.layers__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.layers__legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--muted); transition: color 250ms var(--ease); }
.layers__legend b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #CFCAF5; font: 600 12px/1 "Geist Mono", ui-monospace, monospace; }
.layers__legend li.is-on { color: var(--primary); } .layers__legend li.is-on b { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (min-width: 900px) {
  .layers { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .layers__stack { grid-row: 1 / 3; }
  .layers__legend { align-self: end; }
  .layers__panel { align-self: start; min-height: 200px; }
}

/* results: product verdict shapes */
.verdicts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .verdicts { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.verdict { padding: 24px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fff; }
.verdict h3 { font-size: 20px; font-weight: 600; margin: 14px 0 8px; }
.verdict p { font-size: 15.5px; line-height: 1.6; color: var(--ink-secondary); }
.verdict__shape { display: block; width: 16px; height: 16px; }
.verdict--low .verdict__shape { border-radius: 50%; background: var(--risk-low); }
.verdict--low h3 { color: var(--risk-low); }
.verdict--review .verdict__shape { border-radius: 50%; border: 3px solid var(--risk-review); }
.verdict--review h3 { color: var(--risk-review); }
.verdict--high .verdict__shape { background: var(--risk-high); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.verdict--high h3 { color: var(--risk-high); }
.verdicts__note { margin-top: 28px; font-size: clamp(17px, 0.4vw + 15px, 21px); font-weight: 600; color: var(--ink); }

/* FAQ */
.hiw-faq { background: var(--canvas-soft); }
.hiw-faq__inner { max-width: 880px; }
.hiw-faq__title { margin-bottom: clamp(36px, 6vh, 64px) !important; }
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 16px 0; cursor: pointer; list-style: none; font-size: clamp(16px, 0.3vw + 15px, 19px); font-weight: 600; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); rotate: 45deg; translate: 0 -3px; transition: rotate 250ms var(--ease), translate 250ms var(--ease); }
.faq__item[open] summary::after { rotate: -135deg; translate: 0 3px; }
.faq__item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.faq__item p { padding: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--ink-secondary); max-width: 68ch; }
@media (prefers-reduced-motion: reduce) { .layer { transition: none; } .layer-copy { animation: none; } }

/* ---- How it works: value / fit / sees / layer visuals / systems ---- */
.hiw-value__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(32px, 5vh, 56px); }
.hiw-value__head .hiw-h2 { margin-bottom: 0; }
.hiw-value__head .ind__sub { white-space: normal; max-width: 58ch; }
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.value { padding: 26px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fff; }
.value__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-tint); color: var(--primary); margin-bottom: 18px; }
.value__icon .icon { width: 22px; height: 22px; }
.value h3 { font-size: clamp(18px, 0.4vw + 16px, 21px); font-weight: 600; margin-bottom: 8px; }
.value p { font-size: 15.5px; line-height: 1.6; color: var(--ink-secondary); }
.hiw-fit { background: var(--canvas-soft); }
.fit { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: f; }
@media (min-width: 900px) { .fit { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.fit__step { position: relative; padding: 22px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); }
@media (min-width: 900px) {
  .fit__step { border-radius: 0; border-left-width: 0; } .fit__step:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); border-left-width: 1px; } .fit__step:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
  .fit__step:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; rotate: 45deg; background: inherit; border-top: 1px solid var(--hairline); border-right: 1px solid var(--hairline); z-index: 1; }
}
.fit__step--us { background: var(--primary); border-color: var(--primary); color: #fff; }
.fit__step--us p { color: rgba(255, 255, 255, 0.85) !important; } .fit__step--us .fit__n { background: rgba(255, 255, 255, 0.2); color: #fff; }
.fit__step--us::after { border-color: var(--primary) !important; }
.fit__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font: 600 13px/1 "Geist Mono", ui-monospace, monospace; margin-bottom: 14px; }
.fit__step h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.fit__step p { font-size: 14.5px; line-height: 1.55; color: var(--ink-secondary); }
.sees { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .sees { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 88px); } }
.sees__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.sees__list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }
.sees__list b, .fcard__pin { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font: 600 12px/1 "Geist Mono", ui-monospace, monospace; }
.sees__list strong { color: var(--ink); }
.sees__card { margin: 0; } .sees__card figcaption { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: end; }
.fcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--hairline); box-shadow: 0 28px 60px -24px rgba(43, 36, 120, 0.3); font-family: "Geist", system-ui, sans-serif; font-size: 14px; }
.fcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 18px 18px 0 0; background: var(--gradient); }
.fcard > * { position: relative; }
.fcard__pin { position: absolute; left: -37px; top: var(--y, 0); box-shadow: 0 0 0 4px #fff; } /* sits on the card's left edge, beside the part it names */
.fcard__top { display: flex; justify-content: space-between; align-items: center; }
.fcard__verdict { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); background: rgba(194, 59, 59, 0.09); color: var(--risk-high); font-weight: 600; font-size: 12px; }
.fcard__ref { font: 11px "Geist Mono", ui-monospace, monospace; color: var(--muted); }
.fcard__title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.fcard__data { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fcard__data > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #F4F3FB; font-weight: 600; font-variant-numeric: tabular-nums; }
.fcard__data > span:last-of-type { background: rgba(194, 59, 59, 0.07); color: var(--risk-high); }
.fcard__data small { font-weight: 400; font-size: 11px; color: var(--muted); }
.fcard__ev { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.fcard__decide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.fcard__who { margin-right: auto; font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: 13px; }
/* layer visuals (above each layer's explanation) */
.lvis { margin-bottom: 20px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #E4E2F2; font-family: "Geist", system-ui, sans-serif; font-size: 13px; max-width: 420px; }
.lvis em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.lvis .is-bad { color: var(--risk-high); }
.lvis--font, .lvis--sum { display: flex; flex-direction: column; gap: 0; }
.lvis--font span, .lvis--sum span { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.lvis--font i, .lvis--sum i { font-style: normal; color: var(--ink-secondary); }
.lvis__alt { font-family: "Montserrat", system-ui, sans-serif !important; letter-spacing: -0.2px; padding: 2px 6px; margin: -2px -6px; border: 1.5px solid var(--risk-high); border-radius: 5px; background: rgba(194, 59, 59, 0.08); }
.lvis__tot { border-bottom: 0 !important; border-top: 1.5px solid var(--ink); margin-top: 2px; }
.lvis__tot b { font-size: 11px; font-weight: 600; color: var(--risk-high); background: rgba(194, 59, 59, 0.08); padding: 2px 6px; border-radius: 4px; }
.lvis--cmp { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.lvis__doc { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--hairline); border-radius: 8px; }
.lvis__doc i { display: block; height: 5px; border-radius: 3px; background: #ECEBF3; } .lvis__doc i + i { width: 70%; }
.lvis__doc em { padding: 4px 6px; border-radius: 5px; background: #F4F3FB; font-size: 12px; }
.lvis__tie { position: relative; height: 2px; background: linear-gradient(90deg, #6D28D9, var(--risk-high)); }
.lvis__tie b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--risk-high); color: #fff; font-size: 13px; }
/* systems */
.sys { display: grid; gap: 16px; }
@media (min-width: 900px) { .sys { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.sys__group { padding: 24px; border-radius: var(--r-lg); background: var(--canvas-soft); }
.sys__group h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.sys__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sys__group li { font-size: 16px; font-weight: 600; color: var(--ink); }
.sys__note { margin-top: 24px; font-size: 16px; color: var(--ink-secondary); }

@media (max-width: 899px) { .sees__card { padding-left: 16px; } .fcard { padding: 20px 18px; } .fcard__pin { left: -31px; } }

/* ---- How it works v4 ---- */
/* headings always get room before their content (the left-aligned title rule zeroed the margin) */
.ind__title.ind__title--left.hiw-h2 { margin-bottom: clamp(36px, 6vh, 64px); }
.hiw-value__head .ind__title.ind__title--left.hiw-h2, .hiw-layers__head .ind__title.ind__title--left.hiw-h2 { margin-bottom: 0; }
.hiw-value__head, .hiw-layers__head { margin-bottom: clamp(40px, 6vh, 64px); }
.sees__text .hiw-h2 { white-space: nowrap; font-size: clamp(30px, 2.6vw + 14px, 56px); }
.sees__sign { margin-top: 28px; font-size: clamp(18px, 0.6vw + 15px, 22px); font-weight: 600; }

/* fit: a track above the four stages; a document marker travels along it as you scroll, lighting each stage */
.fitwrap { --p: 0; position: relative; }
.fit__track { position: relative; height: 40px; margin-bottom: 14px; }
.fit__track::before, .fit__track i { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 50%; height: 2px; border-radius: 2px; background: #DCD9F2; }
.fit__track i { right: auto; width: calc(75% * var(--p)); background: var(--gradient); box-shadow: 0 0 10px rgba(109, 40, 217, 0.4); }
.fit__doc { position: absolute; top: 50%; left: calc(12.5% + 75% * var(--p)); translate: -50% -50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--primary); box-shadow: 0 8px 20px -6px rgba(67, 56, 202, 0.45), 0 0 0 1px rgba(67, 56, 202, 0.15); }
.fit__doc .icon { width: 20px; height: 20px; }
.fit__step { opacity: 0.45; translate: 0 10px; transition: opacity 500ms var(--ease), translate 500ms var(--ease), box-shadow 500ms var(--ease); }
.fit__step.is-lit { opacity: 1; translate: 0 0; }
.fit__step.is-now { box-shadow: 0 18px 40px -18px rgba(67, 56, 202, 0.45); z-index: 2; }
@media (max-width: 899px) { .fit__track { display: none; } .fit__step { opacity: 1; translate: none; } }

/* layers: fixed-size visual and panel so nothing jumps between layers */
.lvis { height: 150px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.lvis--cmp { display: grid; }
.layers__panel { min-height: 0; }
.layer-copy { min-height: 380px; }
@media (max-width: 899px) { .layer-copy { min-height: 400px; } }
/* entrance: the plates land one after another, top to bottom */
.js .layers__stack .layer { opacity: 0; translate: 0 -70px; }
.js .layers__stack.is-landed .layer { opacity: 1; translate: 0 0; transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms var(--ease) calc((2 - var(--n)) * 220ms), translate 900ms cubic-bezier(0.22, 1, 0.36, 1) calc((2 - var(--n)) * 220ms); }

/* systems: tiles with a mark and a name, easy to scan */
.sys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.sys__tile { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: #fff; transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease); }
@media (hover: hover) { .sys__tile:hover { border-color: #CFCAF5; box-shadow: 0 12px 28px -18px rgba(43, 36, 120, 0.35); } }
.sys__mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--gradient); color: #fff; font: 700 18px/1 "Montserrat", system-ui, sans-serif; }
.sys__tile--type .sys__mark { background: var(--primary-tint); color: var(--primary); }
.sys__mark .icon { width: 22px; height: 22px; }
.sys__tile b { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.sys__tile small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---- How it works v5 ---- */
.fit__track { display: none; }
/* what your team sees: each list item and its part of the card light up together */
.sees__list li { cursor: default; border-radius: 10px; padding: 8px 10px; margin: -8px -10px; transition: background-color 300ms var(--ease), opacity 300ms var(--ease); outline: none; }
.sees__list li b { transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms var(--ease); }
[data-sees-wrap].has-active .sees__list li { opacity: 0.5; }
[data-sees-wrap].has-active .sees__list li.is-on { opacity: 1; background: var(--primary-tint); }
.sees__list li.is-on b { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.15); }
.fcard [data-part] { position: relative; border-radius: 10px; transition: opacity 300ms var(--ease), transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.fcard [data-part]::after { content: ""; position: absolute; inset: -6px -8px; border-radius: 12px; border: 1.5px solid var(--primary); box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.10); opacity: 0; transition: opacity 300ms var(--ease); pointer-events: none; }
[data-sees-wrap].has-active .fcard [data-part] { opacity: 0.4; }
[data-sees-wrap].has-active .fcard [data-part].is-on { opacity: 1; transform: translateX(4px); }
.fcard [data-part].is-on::after { opacity: 1; }
.fcard [data-part].is-on .fcard__pin { transform: scale(1.15); }
.fcard__pin { transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
/* layers: no legend; bigger visual, text below */
.layers__legend { display: none; }
.lvis { height: 210px; max-width: 520px; padding: 22px; font-size: 15px; }
.lvis--cmp .lvis__doc em { font-size: 15px; }
.layer-copy { min-height: 440px; }
@media (min-width: 900px) { .layers { grid-template-rows: auto; } .layers__stack { grid-row: auto; } .layers__panel { align-self: center; } }
@media (max-width: 899px) { .lvis { height: 180px; font-size: 13.5px; } .layer-copy { min-height: 420px; } }
/* systems: one treatment for every tile */
.sys__mark { background: #fff; border: 1px solid var(--hairline); color: var(--primary); }

/* "What your team sees": the card's top line is a scan line. It travels down with scroll (--sy, px), lighting each
   part as it passes, then fades at the bottom; scrolling back runs it up again. */
.fcard { --sy: 0px; --so: 1; }
.fcard::before { top: 0; left: -1px; right: -1px; height: 3px; transform: translateY(var(--sy)); opacity: var(--so); z-index: 3;
  box-shadow: 0 0 14px 2px rgba(109, 40, 217, 0.45); transition: opacity 250ms var(--ease); }
.fcard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; transform: translateY(calc(var(--sy) - 60px)); opacity: var(--so); pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(109, 40, 217, 0), rgba(109, 40, 217, 0.08)); border-radius: 18px 18px 0 0; }

/* scan v2: unchecked → checked, part by part */
.fcard::before { transition: none; }
.fcard [data-part] .fcard__pin { scale: 0; opacity: 0; transition: scale 450ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms var(--ease); }
.fcard [data-part].is-scanned .fcard__pin { scale: 1; opacity: 1; }
/* the problem only shows once scanned */
.fcard__verdict { transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.fcard [data-part="1"]:not(.is-scanned) .fcard__verdict { background: #F1F0F6; color: var(--muted); }
.fcard [data-part="1"]:not(.is-scanned) .shape { background: #C9C7D6; }
.fcard__data > span { transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.fcard [data-part="3"]:not(.is-scanned) > span:last-of-type { background: #F4F3FB; color: var(--ink); }
.fcard [data-part="2"]:not(.is-scanned) { opacity: 0.45; }
.fcard [data-part="4"]:not(.is-scanned) .jbtn--primary { background: #CFCAF5; box-shadow: none; }
.sees__list li b { scale: 0.6; opacity: 0.25; transition: scale 450ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms var(--ease), transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms var(--ease); }
.sees__list li.is-scanned b { scale: 1; opacity: 1; }

/* ---- layer visuals v2: real document scenes, same height ---- */
.lvis { display: none; }
.lv { position: relative; height: 250px; margin-bottom: 22px; max-width: 520px; border-radius: 16px; background: linear-gradient(160deg, #F7F6FD, #EFEDFA); border: 1px solid #E4E2F2; overflow: hidden; font-family: "Geist", system-ui, sans-serif; }
.lv__paper { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #fff; border-radius: 10px; border: 1px solid #E4E2F2; font-size: 12.5px;
  box-shadow: 0 1px 2px rgba(24, 23, 31, 0.05), 0 18px 34px -18px rgba(43, 36, 120, 0.35); }
.lv__head { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--hairline); font-size: 12px; color: var(--muted); }
.lv__head b { color: var(--ink); font-weight: 600; }
.lv__row { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-secondary); }
.lv__row em { font-style: normal; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.lv__row--tot { padding-top: 6px; border-top: 1.5px solid var(--ink); }
.lv__bad { color: var(--risk-high) !important; }
.lv__tag { position: absolute; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); box-shadow: 0 6px 16px -8px rgba(24, 23, 31, 0.3); }
.lv__tag--bad { background: #fff; color: var(--risk-high); border: 1px solid rgba(194, 59, 59, 0.35); }
/* 1: examination: a magnifier over the edited figure shows its typeface differs */
.lv--exam .lv__paper--main { left: 24px; top: 26px; width: 58%; transform: rotate(-2deg); }
.lv__alt { font-family: "Montserrat", system-ui, sans-serif !important; letter-spacing: -0.3px; outline: 1.5px solid var(--risk-high); outline-offset: 2px; border-radius: 3px; background: rgba(194, 59, 59, 0.08); }
.lv__loupe { position: absolute; right: 26px; top: 34px; width: 132px; height: 132px; border-radius: 50%; background: #fff; border: 5px solid #fff; box-shadow: 0 0 0 1.5px #CFCAF5, 0 18px 40px -14px rgba(43, 36, 120, 0.45); display: grid; place-items: center; }
.lv__loupe::after { content: ""; position: absolute; right: -22px; bottom: -16px; width: 36px; height: 9px; border-radius: 5px; background: #4338CA; rotate: 45deg; }
.lv__loupe-in { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lv__loupe-in em { font-style: normal; font-size: 26px; font-weight: 700; font-family: "Montserrat", system-ui, sans-serif; color: var(--risk-high); letter-spacing: -0.5px; }
.lv__loupe-in .lv__ref { font-family: "Geist", system-ui, sans-serif; font-weight: 600; font-size: 22px; color: var(--muted); letter-spacing: 0; }
.lv--exam .lv__tag { right: 34px; bottom: 26px; }
/* 2: validation: the figures are re-added; the stated total does not agree */
.lv--sum .lv__paper--main { left: 24px; top: 24px; width: 56%; }
.lv__calc { position: absolute; right: 22px; top: 70px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px dashed #CFCAF5; font-size: 12.5px; color: var(--ink-secondary); box-shadow: 0 14px 30px -18px rgba(43, 36, 120, 0.4); }
.lv__calc b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.lv__calc i { font-style: normal; font-weight: 600; color: var(--risk-high); }
.lv--sum .lv__tag { right: 26px; bottom: 26px; }
/* 3: comparison: two documents, the employer agrees, the amount does not */
.lv--cmp .lv__paper { width: 40%; top: 50%; translate: 0 -50%; }
.lv--cmp .lv__paper--a { left: 22px; transform: rotate(-2.5deg); }
.lv--cmp .lv__paper--b { right: 22px; transform: rotate(2deg); }
.lv__tie { position: absolute; left: calc(22px + 40%); right: calc(22px + 40%); height: 2px; }
.lv__tie--ok { top: calc(50% + 3px); background: #6D28D9; }
.lv__tie--bad { top: calc(50% + 32px); background: linear-gradient(90deg, #6D28D9, var(--risk-high)); }
.lv__tie b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 13px; }
.lv__tie--ok b { background: var(--risk-low); } .lv__tie--ok b svg { width: 14px; height: 14px; stroke-width: 3; }
.lv__tie--bad b { background: var(--risk-high); box-shadow: 0 0 0 4px rgba(194, 59, 59, 0.15); }
@media (max-width: 599px) {
  .lv { height: 230px; }
  .lv__paper { font-size: 11px; padding: 10px 12px; }
  .lv--exam .lv__paper--main, .lv--sum .lv__paper--main { width: 62%; left: 14px; }
  .lv__loupe { width: 104px; height: 104px; right: 14px; } .lv__loupe-in em { font-size: 20px; } .lv__loupe-in .lv__ref { font-size: 17px; }
  .lv__calc { right: 12px; padding: 10px 12px; font-size: 11px; } .lv__calc b { font-size: 14px; }
  .lv--cmp .lv__paper { width: 42%; } .lv--cmp .lv__paper--a { left: 10px; } .lv--cmp .lv__paper--b { right: 10px; }
  .lv__tie { left: calc(10px + 42%); right: calc(10px + 42%); }
}
.layer-copy { min-height: 470px; }
/* systems: two labelled groups */
.sys__label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.sys + .sys__label { margin-top: 32px; }
.sys__tile--type .sys__mark { background: var(--primary-tint); border-color: transparent; color: var(--primary); }

/* layer visuals: fit and alignment */
.lv { height: 280px; }
.lv__paper { gap: 5px; padding: 12px 14px; }
.lv__row, .lv__head { white-space: nowrap; }
.lv--sum .lv__paper--main, .lv--exam .lv__paper--main { top: 22px; width: 54%; }
.lv--cmp .lv__paper { width: 41%; transform: none !important; }
.lv--cmp .lv__paper--a { left: 18px; } .lv--cmp .lv__paper--b { right: 18px; }
.lv__tie { left: calc(18px + 41%); right: calc(18px + 41%); top: var(--ty, 50%); }
.layer-copy { min-height: 500px; }
@media (max-width: 599px) { .lv { height: 250px; } .lv__paper { font-size: 10.5px; } .lv--cmp .lv__paper { width: 43%; } .lv--cmp .lv__paper--a { left: 8px; } .lv--cmp .lv__paper--b { right: 8px; } .lv__tie { left: calc(8px + 43%); right: calc(8px + 43%); } }
/* scene rows are <p>: keep them off the panel's paragraph sizing */
.layer-copy .lv p { font-size: inherit; line-height: 1.35; margin: 0; max-width: none; }

/* ---------- Layer scenes: step-by-step micro animation (JS adds s1, s2… cumulatively) ---------- */
.lv__row em { border-radius: 4px; transition: background-color .25s, color .25s, box-shadow .25s, outline-color .3s; }
.lv__hl, .lv .lv__row em.is-hl { background: var(--primary-tint); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
/* examination: each figure is checked in turn, then the odd one is outlined, linked to the loupe, and named */
.lv--exam .lv__paper--main { transform: none; }
.lv--exam.s1:not(.s2) .lv__row:nth-child(2) em, .lv--exam.s2:not(.s3) .lv__row:nth-child(3) em,
.lv--exam.s3:not(.s4) .lv__row:nth-child(4) em, .lv--exam.s4:not(.s5) .lv__row:nth-child(5) em { background: var(--primary-tint); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.lv--exam .lv__alt { outline-color: transparent; background: transparent; }
.lv--exam.s5 .lv__alt { outline-color: var(--risk-high); background: rgba(194, 59, 59, 0.08); color: var(--risk-high); }
.lv__lead { position: absolute; left: var(--lx, 0); top: var(--ly, 0); width: var(--lw, 0); height: 2px; translate: 0 -1px;
  background: repeating-linear-gradient(90deg, var(--risk-high) 0 4px, transparent 4px 8px) no-repeat; background-size: 0 100%; transition: background-size .5s ease-out; }
.lv--exam.s5 .lv__lead { background-size: 100% 100%; }
.lv--exam .lv__loupe { opacity: 0; scale: .6; transition: opacity .3s, scale .5s cubic-bezier(.3, 1.4, .5, 1); }
.lv--exam.s6 .lv__loupe { opacity: 1; scale: 1; }
.lv--exam .lv__loupe-in em { opacity: 0; translate: 0 6px; transition: opacity .3s .25s, translate .3s .25s; }
.lv--exam .lv__loupe-in .lv__ref { transition-delay: .45s; }
.lv--exam.s6 .lv__loupe-in em { opacity: 1; translate: 0 0; }
/* validation: each part is added into the sum, the result is compared with the gross, then named */
.lv--sum.s1:not(.s2) .lv__row:nth-child(2) em, .lv--sum.s2:not(.s3) .lv__row:nth-child(3) em,
.lv--sum.s3:not(.s4) .lv__row:nth-child(4) em { background: var(--primary-tint); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.lv--sum.s5 .lv__row--tot em { background: rgba(194, 59, 59, 0.08); color: var(--risk-high); box-shadow: 0 0 0 3px rgba(194, 59, 59, 0.08); }
.lv__c, .lv__calc b, .lv__calc i { opacity: 0; translate: -6px 0; transition: opacity .3s, translate .3s; display: inline-block; }
.lv--sum.s1 .lv__c:nth-child(1), .lv--sum.s2 .lv__c:nth-child(2), .lv--sum.s3 .lv__c:nth-child(3),
.lv--sum.s4 .lv__calc b, .lv--sum.s5 .lv__calc i { opacity: 1; translate: 0 0; }
.lv--sum.s4:not(.s5) .lv__calc b { color: var(--primary); }
.lv--sum .lv__calc { min-width: 118px; }
/* comparison: employer matched, then the net pay travels to the statement and does not match */
.lv--cmp.s1:not(.s3) .lv__row--emp em { background: var(--primary-tint); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.lv--cmp.s3:not(.s6) .lv__paper--a .lv__row--amt em { background: var(--primary-tint); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.lv--cmp.s5 .lv__paper--b .lv__row--amt em { color: var(--risk-high); }
.lv--cmp.s5:not(.s6) .lv__paper--b .lv__row--amt em { background: rgba(194, 59, 59, 0.08); box-shadow: 0 0 0 3px rgba(194, 59, 59, 0.08); }
.lv--cmp .lv__tie { background-repeat: no-repeat; background-size: 0 100%; transition: background-size .5s ease-out; }
.lv--cmp .lv__tie--ok { background-image: repeating-linear-gradient(90deg, #6D28D9 0 4px, transparent 4px 8px); }
.lv--cmp .lv__tie--bad { background-image: repeating-linear-gradient(90deg, var(--risk-high) 0 4px, transparent 4px 8px); }
.lv--cmp.s1 .lv__tie--ok, .lv--cmp.s5 .lv__tie--bad { background-size: 100% 100%; }
.lv--cmp .lv__tie b { scale: 0; transition: scale .4s cubic-bezier(.3, 1.6, .5, 1); }
.lv--cmp.s2 .lv__tie--ok b, .lv--cmp.s5 .lv__tie--bad b { scale: 1; }
.lv__chip { position: absolute; left: 0; top: 0; z-index: 3; translate: var(--x0, 0) var(--y0, 0); padding: 3px 7px; border-radius: 6px; background: #fff;
  border: 1.5px solid var(--primary); color: var(--primary); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 10px 22px -10px rgba(43, 36, 120, 0.55); opacity: 0; transition: translate .8s cubic-bezier(.6, 0, .2, 1), opacity .3s, border-color .25s, color .25s; }
.lv--cmp.s3 .lv__chip { opacity: 1; }
.lv--cmp.s4 .lv__chip { translate: var(--x1, 0) var(--y1, 0); }
.lv--cmp.s5 .lv__chip { border-color: var(--risk-high); color: var(--risk-high); animation: lv-shake .4s; }
.lv--cmp.s6 .lv__chip { opacity: 0; }
@keyframes lv-shake { 25% { margin-left: -4px; } 50% { margin-left: 4px; } 75% { margin-left: -2px; } }
.lv--cmp .lv__tag { left: 50%; bottom: 22px; translate: -50% 0; }
/* the result tag is the last beat in every scene */
.lv .lv__tag { opacity: 0; scale: .8; transition: opacity .3s, scale .4s cubic-bezier(.3, 1.6, .5, 1); }
.lv--exam.s7 .lv__tag, .lv--sum.s6 .lv__tag, .lv--cmp.s6 .lv__tag { opacity: 1; scale: 1; }
@media (max-width: 599px) { .lv__chip { font-size: 10.5px; padding: 2px 5px; } .lv--cmp .lv__tag { bottom: 16px; } }

/* ---------- How it works: documents we check (sideways cards, Stripe-style overflow to the right) ---------- */
.hiw-docs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dnav { display: none; gap: 8px; }
@media (min-width: 900px) { .dnav { display: flex; } }
.dnav__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #DCD9F1; background: #fff; color: var(--primary); cursor: pointer; transition: background-color .2s, opacity .2s; }
.dnav__btn:hover:not(:disabled) { background: var(--primary-tint); }
.dnav__btn:disabled { opacity: .4; cursor: default; }
.dnav__btn .icon { width: 18px; height: 18px; }
.doccards { list-style: none; margin: 40px 0 0; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px var(--gutter) 28px max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
  scroll-padding-inline-start: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); }
.doccards::-webkit-scrollbar { display: none; }
.doccard { flex: none; width: min(84vw, 380px); scroll-snap-align: start; background: #fff; border: 1px solid #E8E6F3; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(43, 36, 120, 0.35); }
.doccard__vis { position: relative; height: 210px; overflow: hidden; background: linear-gradient(160deg, #F7F6FD, #ECEAF9); }
.doccard__body { padding: 24px 24px 28px; }
.doccard__body h3 { margin: 0 0 16px; font-size: 21px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.doccard__body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.doccard__body li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink-secondary); }
.doccard__body .itick { margin-top: 1px; }
/* mini documents: a white sheet that runs off the bottom of the panel */
.dk { position: absolute; left: 28px; right: -24px; top: 30px; bottom: -30px; display: flex; flex-direction: column; gap: 7px; padding: 16px 18px;
  background: #fff; border: 1px solid #E4E2F2; border-radius: 10px; box-shadow: 0 16px 36px -20px rgba(43, 36, 120, 0.4);
  font-family: "Geist", system-ui, sans-serif; font-size: 12px; transition: translate .5s var(--ease); }
.doccard:hover .dk { translate: 0 -6px; }
.dk p { margin: 0; font-size: inherit; line-height: 1.3; max-width: none; }
.dk__head { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--hairline); color: var(--muted); white-space: nowrap; }
.dk__head b { color: var(--ink); font-weight: 600; }
.dk__row { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-secondary); white-space: nowrap; }
.dk__row em { font-style: normal; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dk__row--tot { padding-top: 6px; border-top: 1.5px solid var(--ink); }
.dk__ln { display: block; height: 6px; width: 78%; border-radius: 3px; background: #ECEBF3; } .dk__ln--s { width: 52%; }
.dk__meta { color: var(--muted); font-size: 11px; letter-spacing: .2px; }
.dk__stamp { position: absolute; right: 44px; top: 18px; width: 46px; height: 46px; border-radius: 50%; border: 2px dashed rgba(67, 56, 202, 0.35); }
.dk--letter .dk__head { border-bottom: 0; }
/* statement: grey bar and alternating rows, like the hero statement */
.dk--stmt { gap: 0; padding: 0; overflow: hidden; }
.dk__bar { padding: 10px 14px; background: #5B5F6B; color: #fff; } .dk__bar b { font-weight: 600; }
.dk--stmt .dk__row { padding: 7px 14px; } .dk__row--z { background: #F1F2F4; }
.dk--stmt .dk__row--tot { border-top: 1.5px solid #5B5F6B; }
/* resident card: an ID card, not a sheet */
.dk--card { left: 28px; right: 28px; top: 34px; bottom: auto; height: 150px; gap: 12px; padding: 0; overflow: hidden; border-radius: 12px; }
.dk__band { display: flex; justify-content: space-between; padding: 10px 14px; background: linear-gradient(90deg, #4338CA, #6D28D9); color: #fff; }
.dk__band b { font-weight: 600; } .dk__band span { opacity: .8; }
.dk__id { display: flex; gap: 14px; padding: 0 14px; } .dk__id > div { flex: 1; display: grid; gap: 7px; align-content: start; }
.dk__photo { width: 62px; height: 76px; border-radius: 8px; background: linear-gradient(180deg, #E5E2FB, #D6D1F6); }
/* CR: bilingual heading and two columns */
.dk--cr .dk__head span { font-family: system-ui, sans-serif; }
.dk__cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; } .dk__cols > div { display: grid; gap: 8px; align-content: start; }
.hiw-docs .doccard { padding: 0; }
.hiw-docs__head { margin-bottom: 0; } .hiw-docs .doccards { margin-top: 32px; }
@media (max-width: 599px) { .doccard__vis { height: 190px; } .doccard__body { padding: 20px 20px 24px; } .doccard__body h3 { font-size: 19px; } }
/* the sheet bleeds off the bottom only, so no figure is cut */
.dk { right: 28px; }
.doccard__vis { height: 230px; }
.dk__stamp { top: auto; bottom: 56px; right: 22px; }
@media (max-width: 599px) { .dk { left: 20px; right: 20px; } .dk--card { left: 20px; right: 20px; } .doccard__vis { height: 210px; } }
/* arrows: the one you can press is filled lavender; the spent one is a plain outline */
.dnav__btn { border-color: transparent; background: var(--primary-tint); color: var(--primary); }
.dnav__btn:hover:not(:disabled) { background: #D8D3F8; }
.dnav__btn:disabled { opacity: 1; background: #fff; border-color: #E2E0EE; color: var(--muted); }

/* ---------- Header: same on every page; a soft shadow once the page scrolls ---------- */
html { scrollbar-gutter: stable; } /* the nav no longer shifts between short and long pages */
.site-header { transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.site-header.is-scrolled { border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(24, 23, 31, 0.04), 0 8px 24px -12px rgba(43, 36, 120, 0.18); }
/* the current page is marked by colour only; a heavier weight widened it and pushed the other items */
.nav__link[aria-current="page"], .nav__link.is-current { font-weight: 500; }

/* ---------- How it works: documents section on deep indigo (the one dark band mid-page) ---------- */
/* Base is a sapphire-derived ink, not black, so it reads as DocHaqq; a soft brand glow sits behind the cards.
   Text on #120F2E: white 100% headings, 72% body (≈ 9:1), 55% soft line (≈ 5.6:1) — all pass AA. */
.hiw-docs { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(60% 70% at 85% 10%, rgba(109, 40, 217, 0.32), transparent 70%),
              radial-gradient(50% 60% at 10% 100%, rgba(67, 56, 202, 0.28), transparent 70%), #120F2E; }
.hiw-docs .ind__title { color: #fff; }
.hiw-docs .t-soft { color: rgba(255, 255, 255, 0.55); }
.hiw-docs .doccard { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.7); }
.hiw-docs .doccard__vis { background: linear-gradient(160deg, #241F5C, #18143F); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.hiw-docs .dk { border-color: transparent; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.6); }
.hiw-docs .doccard__body h3 { color: #fff; }
.hiw-docs .doccard__body li { color: rgba(255, 255, 255, 0.72); }
.hiw-docs .itick { background: rgba(167, 139, 250, 0.16); color: #C4B5FD; }
.hiw-docs .dnav__btn { background: rgba(196, 181, 253, 0.18); color: #E4DCFF; }
.hiw-docs .dnav__btn:hover:not(:disabled) { background: rgba(196, 181, 253, 0.28); }
.hiw-docs .dnav__btn:disabled { background: transparent; border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.35); }
.hiw-docs .sys__note { color: rgba(255, 255, 255, 0.72); }
.hiw-docs .sys__note a { color: #C4B5FD; }
.hiw-docs :focus-visible { box-shadow: 0 0 0 2px #120F2E, 0 0 0 4px #C4B5FD; outline: none; }

/* ---------- "Built to find what is real": lifted cards, lighter border ---------- */
.value { border-color: #EEEDF4; box-shadow: 0 1px 2px rgba(24, 23, 31, 0.04), 0 14px 32px -18px rgba(43, 36, 120, 0.22); }
/* hero shares the page's left edge: the container stays full width, only the text is capped */
.hiw-hero__inner { max-width: 1200px; }
.hiw-hero__inner > * { max-width: 900px; }
/* FAQ shares the page's left edge too; only the questions are capped for reading width */
.hiw-faq__inner { max-width: 1200px; }
.hiw-faq__inner .faq { max-width: 880px; }
/* cards sit flat; the shadow arrives on hover (pointer devices only) */
.value, .hiw-docs .doccard { box-shadow: none; transition: box-shadow .3s var(--ease), translate .3s var(--ease), border-color .3s var(--ease); }
@media (hover: hover) {
  .value:hover { translate: 0 -3px; border-color: #E4E2F2; box-shadow: 0 1px 2px rgba(24, 23, 31, 0.04), 0 18px 36px -18px rgba(43, 36, 120, 0.28); }
  .hiw-docs .doccard:hover { translate: 0 -3px; border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 28px 56px -28px rgba(0, 0, 0, 0.8); }
}

/* documents section v2: background from brand tokens (primary-press base, primary-soft / primary glows); white cards */
.hiw-docs { background: radial-gradient(60% 70% at 85% 0%, rgba(109, 40, 217, 0.55), transparent 70%),
                        radial-gradient(55% 60% at 5% 100%, rgba(67, 56, 202, 0.6), transparent 70%), var(--primary-press); }
.hiw-docs .t-soft { color: rgba(255, 255, 255, 0.62); }
.hiw-docs .doccard { background: #fff; border-color: transparent; }
.hiw-docs .doccard__vis { background: linear-gradient(160deg, #F7F6FD, #ECEAF9); border-bottom: 1px solid #EEEDF4; }
.hiw-docs .dk { border-color: #E4E2F2; box-shadow: 0 16px 36px -20px rgba(43, 36, 120, 0.4); }
.hiw-docs .doccard__body h3 { color: var(--ink); }
.hiw-docs .doccard__body li { color: var(--ink-secondary); }
.hiw-docs .itick { background: #EEECFB; color: var(--primary); }
.hiw-docs .sys__note { color: rgba(255, 255, 255, 0.8); }
.hiw-docs .sys__note a { color: #fff; }
@media (hover: hover) { .hiw-docs .doccard:hover { border-color: transparent; box-shadow: 0 30px 60px -28px rgba(10, 8, 40, 0.65); } }
/* document panel: our soft grey, and the sheet sits closer to the card edges */
.hiw-docs .doccard__vis { background: var(--canvas-soft); border-bottom-color: var(--hairline); }
.hiw-docs .dk { left: 14px; right: 14px; }
.hiw-docs .dk--card { left: 14px; right: 14px; }

/* ---------- Desktop nav, Stripe logic: while the pointer is on the menu, the item under it is near-black and the rest dim to grey ---------- */
@media (min-width: 1024px) {
  .nav__link, .nav__link[aria-current="page"], .nav__link.is-current { font-weight: 600; }
  .nav__link { color: var(--ink-secondary); transition: color var(--dur-base) var(--ease); }
  .nav__link:hover, .nav__trigger[aria-expanded="true"] { background: none; }
  .nav__list:hover .nav__link, .nav__list:has(.nav__trigger[aria-expanded="true"]) .nav__link { color: var(--muted); }
  .nav__list .nav__link:hover, .nav__list .nav__trigger[aria-expanded="true"] { color: var(--ink); }
}

/* ---------- One section-heading size across pages (the How it works scale: 32px phone → ~59px at 1440) ---------- */
#problem-title, .how__title, .sees__text .hiw-h2, .reg__head .reg__title { font-size: clamp(32px, 3vw + 16px, 72px); line-height: 1.08; letter-spacing: -0.025em; }
.reg__head .reg__title { white-space: normal; }

/* ---------- Phone menu: same type and colours as desktop; no grey rounded hover ---------- */
.menu-toggle:hover { background: none; }
.nav__link { font-weight: 600; color: var(--ink-secondary); }
.nav__menu a:hover { background: none; }
@media (hover: hover) and (max-width: 1023px) {
  .nav__list:hover .nav__link { color: var(--muted); }
  .nav__list .nav__link:hover { color: var(--ink); }
}
/* region heading stays on its two lines: same scale, capped by its narrower column */
.reg__head .reg__title { font-size: min(clamp(32px, 3vw + 16px, 72px), 7.4cqi); white-space: nowrap; }

/* ---------- Product flyout (desktop) ---------- */
@media (min-width: 1024px) {
  .nav__chevron { stroke-width: 2.6; }
  /* items rest in grey; the hovered one takes a grey fill, a sapphire title (it is clickable) and a dark description */
  .nav__menu a { transition: background-color var(--dur-base) var(--ease); }
  .nav__menu a .nav__menu-title { color: var(--ink-secondary); transition: color var(--dur-base) var(--ease); }
  .nav__menu a .nav__menu-desc { color: var(--muted); transition: color var(--dur-base) var(--ease); }
  .nav__menu a:hover, .nav__menu a:focus-visible { background: var(--canvas-soft); }
  .nav__menu a:hover .nav__menu-title, .nav__menu a:focus-visible .nav__menu-title { color: var(--primary); }
  .nav__menu a:hover .nav__menu-desc, .nav__menu a:focus-visible .nav__menu-desc { color: var(--ink); }
  /* the page you're on stays sapphire */
  .nav__menu a[aria-current="page"] .nav__menu-title { color: var(--primary); }
}
/* the open / hovered item stays near-black even while the pointer is inside its flyout (outranks the :has() dimming rule) */
@media (min-width: 1024px) {
  .nav__list .nav__item .nav__link:hover, .nav__list:has(.nav__trigger) .nav__item .nav__trigger[aria-expanded="true"] { color: var(--ink); }
}

/* ---------- Phone + tablet menu panel: the desktop flyout pattern, sized for touch ---------- */
@media (max-width: 1023px) {
  .nav { padding-top: 12px; }
  .nav__link { min-height: 60px; font-size: 19px; font-weight: 600; color: var(--ink-secondary); }
  .nav__trigger { min-height: 52px; border-bottom: 0; }
  .nav__link[aria-current="page"], .nav__link.is-current { color: var(--primary); }
  .nav__menu { display: grid; gap: 4px; padding: 0 0 14px; }
  .nav__menu a { padding: 12px 14px; min-height: 60px; border: 0; border-radius: 12px; transition: background-color var(--dur-base) var(--ease); }
  .nav__menu-title { font-size: 16px; color: var(--ink-secondary); }
  .nav__menu-desc { margin-top: 2px; font-size: 14px; color: var(--muted); }
  /* tap / hover / current: grey fill, sapphire title, dark description (same as desktop) */
  .nav__menu a:hover, .nav__menu a:active, .nav__menu a:focus-visible, .nav__menu a[aria-current="page"] { background: var(--canvas-soft); }
  .nav__menu a:hover .nav__menu-title, .nav__menu a:active .nav__menu-title, .nav__menu a[aria-current="page"] .nav__menu-title { color: var(--primary); }
  .nav__menu a:hover .nav__menu-desc, .nav__menu a:active .nav__menu-desc, .nav__menu a[aria-current="page"] .nav__menu-desc { color: var(--ink); }
}
/* tablet: items line up with the logo; rows capped so they don't stretch across the screen */
@media (min-width: 640px) and (max-width: 1023px) { .nav__list { max-width: 560px; } }

/* ---------- Phone + tablet: Product is an accordion ---------- */
@media (max-width: 1023px) {
  .nav__trigger { cursor: pointer; border-bottom: 1px solid var(--hairline); }
  .nav__trigger[aria-expanded="true"] { border-bottom-color: transparent; }
  .nav__chevron { display: block; width: 22px; height: 22px; stroke-width: 2.4; color: var(--muted); transition: transform var(--dur-base) var(--ease); }
  .nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
  .nav__menu { display: none; }
  .nav__menu.is-open { display: grid; animation: nav-acc var(--dur-base) var(--ease); }
}
@keyframes nav-acc { from { opacity: 0; translate: 0 -6px; } }

/* ---------- Hero divider: lighter line; the grip always sits above the finding cards; scan-line look while moving left ---------- */
/* the handle no longer forms its own layer, so the line can sit under the cards and the grip above them */
.compare__handle { z-index: auto; }
.compare__line { z-index: 3; width: 1.5px; margin-left: -0.75px; opacity: 1; background: #C9C5EA; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.compare__grip { z-index: 6; }
.compare__line::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 56px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(109, 40, 217, 0.16), rgba(109, 40, 217, 0)); transition: opacity .3s var(--ease); }
.compare.is-scanning .compare__line { background: linear-gradient(180deg, rgba(67, 56, 202, 0), #4338CA 12%, #6D28D9 88%, rgba(109, 40, 217, 0));
  box-shadow: 0 0 10px rgba(109, 40, 217, 0.55), 0 0 2px rgba(67, 56, 202, 0.8); }
.compare.is-scanning .compare__line::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .compare__line, .compare__line::after { transition: none; } }
.compare__line { width: 2px; margin-left: -1px; } /* original thickness */

/* ---------- Hero finding cards: hover shows the brand gradient as the border (not black) and lifts the card slightly ---------- */
.note__card { border: 1.5px solid transparent; padding: 10.5px 12.5px; }
.note.is-on .note__card { transition: opacity 280ms var(--ease) 140ms, transform 280ms var(--ease) 140ms, box-shadow var(--dur-base) var(--ease), translate var(--dur-base) var(--ease); }
.note.is-emph .note__card {
  background: linear-gradient(var(--canvas), var(--canvas)) padding-box, var(--gradient) border-box;
  box-shadow: 0 16px 34px -12px rgba(67, 56, 202, 0.32); translate: 0 -2px;
}
@media (prefers-reduced-motion: reduce) { .note.is-emph .note__card { translate: none; } }

/* line and grip both sit above the finding cards (one layer, so they never split) */
.compare__handle { z-index: 5; }
.compare__line, .compare__grip { z-index: auto; }

/* ---------- Phone fixes (How it works) ---------- */
@media (max-width: 899px) {
  /* What your team sees: heading → card → list, so the scan plays where the eye already is */
  .sees__text { display: contents; }
  .sees__text .hiw-h2 { order: 1; margin-bottom: 0; }
  .sees__card { order: 2; }
  .sees__list { order: 3; }
  .sees__sign { order: 4; margin-top: 0; }
  /* Layers: clear space between the stack and its scene */
  .layers { gap: 40px; }
  .layers__stack { height: 270px; }
}
/* Documents: arrows on every width, so it's clear when the row ends */
.dnav { display: flex; }
@media (max-width: 899px) {
  .hiw-docs__head { align-items: flex-end; }
  .dnav__btn { width: 44px; height: 44px; }
}
@media (max-width: 899px) {
  .hiw-docs__head { flex-direction: column; align-items: stretch; gap: 20px; }
  .hiw-docs__head .dnav { align-self: flex-end; }
  .hiw-docs .doccards { margin-top: 16px; }
}

/* ---------- Performance ---------- */
/* looping animations stop while their section is off screen (JS toggles .is-offscreen) */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
/* phones: headings reveal with opacity + movement only; animating a blur on large text is costly on low-end devices */
@media (max-width: 899px) { .sr { filter: none; will-change: opacity, transform; } }
.hiw-docs__head .ind__title.ind__title--left.hiw-h2 { margin-bottom: 0; } @media (max-width: 899px) { .hiw-docs__head { gap: 12px; } }