/* ===================================================================
   WorkMint marketing site
   Brand: Mint Crisp #3CD0A1 / Deep Anchor #24272C · Plus Jakarta Sans

   Hand-written rather than a framework. The whole file is a few KB and
   ships no JS beyond a menu toggle and a scroll observer, which keeps
   Core Web Vitals strong — page speed is a ranking signal.
   =================================================================== */

:root {
  --brand: #3CD0A1;
  --brand-2: #54D7AE;
  --brand-dark: #2FAE85;
  --brand-text: #247C60;      /* passes contrast on white; --brand does not */
  --brand-tint: #E6F9F3;
  --brand-ring: rgba(60, 208, 161, .16);

  /* Action accent — Electric Violet, reserved for primary CTAs. The 600 step
     (#6768DB) rather than #7578DF: white text on #7578DF is 4.47:1 and misses
     WCAG AA by a hair; this reaches 4.92:1. */
  --cta: #6768DB;
  --cta-hover: #4F51C9;
  --cta-tint: #F0F1FC;
  --cta-text: #4338CA;

  --navy: #24272C;
  --navy-2: #31353C;
  --navy-3: #3C4149;

  --text: #1E293B;
  --text-2: #475569;
  --muted: #8A94A6;
  --border: #E2E8F0;
  --surface: #F8FAFC;
  --white: #FFFFFF;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .04), 0 1px 3px rgba(11, 18, 32, .06);
  --shadow: 0 4px 6px -1px rgba(11, 18, 32, .06), 0 12px 28px -6px rgba(11, 18, 32, .10);
  --shadow-lg: 0 24px 60px -12px rgba(11, 18, 32, .22);
  --shadow-brand: 0 8px 24px -6px rgba(60, 208, 161, .42);
  --shadow-cta:   0 8px 24px -6px rgba(94, 96, 228, .40);

  --maxw: 1180px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 900px; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 300; }
.skip-link:focus { left: 8px; top: 8px; }

/* ── Typography ─────────────────────────────────────────────────────── */
h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 800; line-height: 1.06; letter-spacing: -.032em; color: var(--navy); }
h2 { font-size: clamp(27px, 3.6vw, 42px); font-weight: 800; line-height: 1.14; letter-spacing: -.026em; color: var(--navy); }
h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -.012em; color: var(--navy); }
.lede { font-size: clamp(16.5px, 1.85vw, 20px); color: var(--text-2); line-height: 1.6; max-width: 60ch; }

/* Gradient headline accent — used on one or two words, never a whole line. */
.grad {
  background: linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 55%, #84E2C2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-text); background: var(--brand-tint);
  border: 1px solid rgba(60, 208, 161, .22);
  padding: 7px 15px; border-radius: 100px; margin-bottom: 20px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

.section-head { max-width: 64ch; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 16px; color: var(--text-2); font-size: 17px; }

section { padding: 96px 0; position: relative; }
.section-tight { padding: 60px 0; }
.section-surface { background: var(--surface); }
.section-dark { background: var(--navy); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .section-head p { color: rgba(255,255,255,.68); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 11px; font-size: 15px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  letter-spacing: -.008em; white-space: nowrap;
  transition: transform .16s cubic-bezier(.34,1.4,.64,1), box-shadow .18s, background .18s, border-color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; }

.btn-primary { background: linear-gradient(135deg, var(--cta) 0%, var(--cta-hover) 130%); color: #fff; box-shadow: var(--shadow-cta); }
.btn-primary:hover { box-shadow: 0 12px 30px -6px rgba(94, 96, 228,.48); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: #C9D1DA; box-shadow: var(--shadow); }
.btn-glass { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.24); backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.site-header.scrolled { border-bottom-color: var(--border); background: rgba(255,255,255,.9); box-shadow: 0 1px 20px rgba(11,18,32,.05); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 34px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav > a { font-size: 14.5px; font-weight: 600; color: var(--text-2); padding: 9px 14px; border-radius: 9px; transition: color .15s, background .15s; }
.site-nav > a:hover { color: var(--text); background: var(--surface); }
.site-nav > a[aria-current="page"] { color: var(--brand-text); }
.nav-login { color: var(--navy) !important; }
.nav-cta { margin-left: 8px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 9px; cursor: pointer; }
.nav-toggle span { display: block; width: 21px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .22s, opacity .22s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; padding: 96px 0 0;
  background:
    radial-gradient(1100px 520px at 76% -8%, rgba(60, 208, 161,.16), transparent 62%),
    radial-gradient(760px 460px at 8% 8%, rgba(59,91,165,.16), transparent 60%),
    linear-gradient(178deg, #FFFFFF 0%, #F8FAFC 100%);
}
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 62px 62px;
  /* Fades the grid out toward the edges so it reads as texture, not a table. */
  mask-image: radial-gradient(circle at 50% 34%, #000 8%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 34%, #000 8%, transparent 68%);
  opacity: .5; pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 800px; margin: 0 auto; }
.hero .lede { margin: 22px auto 0; }
.hero-actions { display: flex; gap: 13px; margin-top: 34px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

.hero-compact { padding: 78px 0 82px; }
.hero-compact .hero-inner { text-align: left; margin: 0; }
.hero-compact .lede { margin-left: 0; }

/* ── Product mockup ─────────────────────────────────────────────────── */
/* A CSS rendering of the real dashboard. A picture of the product is the
   single most persuasive element on a SaaS page; built in markup rather than
   shipped as a screenshot so it stays sharp on every display and costs no
   image download. */
.mockup-wrap { position: relative; z-index: 1; margin-top: 58px; padding-bottom: 96px; }
.mockup {
  max-width: 1000px; margin: 0 auto; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.mockup-bar { display: flex; align-items: center; gap: 7px; padding: 13px 18px; background: #FBFCFD; border-bottom: 1px solid var(--border); }
.mockup-dot { width: 11px; height: 11px; border-radius: 50%; }
.mockup-url { margin-left: 14px; font-size: 11.5px; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 7px; padding: 4px 12px; }
.mockup-body { display: grid; grid-template-columns: 186px 1fr; min-height: 400px; }

.mk-side { background: var(--navy); padding: 18px 13px; }
.mk-side-logo { display: flex; align-items: center; gap: 7px; padding: 0 8px 16px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; }
.mk-side-logo span { color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -.02em; }
.mk-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.mk-nav-item.on { background: rgba(60, 208, 161,.18); color: #84E2C2; font-weight: 600; }
.mk-nav-ic { width: 13px; height: 13px; border-radius: 3.5px; background: currentColor; opacity: .55; flex-shrink: 0; }

.mk-main { padding: 22px; background: var(--surface); }
.mk-h { font-size: 14.5px; font-weight: 800; color: var(--navy); margin-bottom: 15px; }
.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 16px; }
.mk-kpi { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 12px; }
.mk-kpi .v { font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.mk-kpi .l { font-size: 9.5px; color: var(--muted); margin-top: 5px; font-weight: 500; }
.mk-kpi .v.up { color: #2FAE85; }
.mk-kpi .v.br { color: var(--brand-text); }

.mk-panels { display: grid; grid-template-columns: 1.6fr 1fr; gap: 11px; }
.mk-panel { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 14px; }
.mk-panel-h { font-size: 10.5px; font-weight: 700; color: var(--navy); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; }
.mk-chart { display: flex; align-items: flex-end; gap: 7px; height: 88px; }
.mk-bar { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brand) 0%, #84E2C2 100%); animation: growBar .9s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes growBar { from { transform: scaleY(.05); transform-origin: bottom; } }
.mk-donut { width: 92px; height: 92px; border-radius: 50%; margin: 4px auto 10px;
  background: conic-gradient(#2FAE85 0 74%, #E4948C 74% 86%, #D5AE4A 86% 94%, #8FB6E5 94% 100%); position: relative; }
.mk-donut::after { content: ''; position: absolute; inset: 22%; background: #fff; border-radius: 50%; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 5px 10px; justify-content: center; }
.mk-legend span { font-size: 8.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.mk-legend i { width: 6px; height: 6px; border-radius: 50%; display: block; }

/* ── Marquee ────────────────────────────────────────────────────────── */
.marquee { overflow: hidden; padding: 26px 0; border-block: 1px solid var(--border); background: #fff; }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.marquee-item svg { width: 17px; height: 17px; color: var(--brand); }

/* ── Bento grid ─────────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento > * { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-6 { grid-column: span 6; }

.card {
  position: relative; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px;
  transition: transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .22s, border-color .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #DCE2E8; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: 14.8px; }

.card-dark { background: linear-gradient(150deg, var(--navy-2), var(--navy)); border-color: rgba(255,255,255,.08); color: #fff; }
.card-dark h3 { color: #fff; }
.card-dark p { color: rgba(255,255,255,.68); }

.feature-icon {
  width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; background: linear-gradient(140deg, var(--brand-tint), #CDF2E6);
  color: var(--brand-text); border: 1px solid rgba(60, 208, 161,.2); font-weight: 800;
}
.feature-icon svg { width: 22px; height: 22px; }
.card-dark .feature-icon { background: rgba(60, 208, 161,.16); border-color: rgba(60, 208, 161,.3); color: #84E2C2; }

/* ── Split feature rows ─────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; align-items: center; }
.split + .split { margin-top: 96px; }
.split.reverse .split-media { order: -1; }
.split h2 { font-size: clamp(24px, 2.8vw, 32px); }
.split p { color: var(--text-2); margin-top: 15px; font-size: 16.5px; }
.tick-list { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.tick-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.tick-list li::before {
  content: '✓'; flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-text); font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.split-media { background: linear-gradient(150deg, var(--surface), #EEF2F6); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px; }

/* Small in-panel UI fragments used inside .split-media */
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px; margin-bottom: 9px; box-shadow: var(--shadow-sm); }
.ui-row:last-child { margin-bottom: 0; }
.ui-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ui-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, var(--brand), var(--brand-dark)); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-name { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.ui-sub { font-size: 11.5px; color: var(--muted); }
.pill { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.pill-green { background: #E6F9F3; color: #196A51; }
.pill-amber { background: #F4EDD1; color: #82441E; }
.pill-blue { background: #E1EBF8; color: #2745A6; }
.pill-grey { background: #F1F5F9; color: #475569; }

/* ── Role tabs ──────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 38px; }
.tab {
  padding: 11px 22px; border-radius: 100px; font-size: 14.5px; font-weight: 700;
  border: 1px solid var(--border); background: #fff; color: var(--text-2); cursor: pointer; font-family: inherit;
  transition: all .18s;
}
.tab:hover { border-color: #C9D1DA; }
.tab[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.tab-panel[hidden] { display: none; }

/* ── Stats ──────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat { text-align: center; padding: 26px 16px; }
.stat .n { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(120deg, var(--brand), #84E2C2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .l { font-size: 13.5px; color: rgba(255,255,255,.62); margin-top: 10px; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { border: 1px solid var(--border); border-radius: var(--r); background: #fff; padding: 20px 24px; margin-bottom: 11px; transition: border-color .18s, box-shadow .18s; }
.faq[open] { border-color: rgba(60, 208, 161,.35); box-shadow: 0 0 0 4px var(--brand-ring); }
.faq summary { font-weight: 700; font-size: 16px; color: var(--navy); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--brand-text); font-size: 23px; line-height: 1; flex-shrink: 0; transition: transform .2s; }
.faq[open] summary::after { content: '−'; }
.faq p { margin-top: 13px; color: var(--text-2); font-size: 15.3px; max-width: 76ch; }

/* ── CTA band ───────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(760px 340px at 50% -30%, rgba(60, 208, 161,.34), transparent 66%), linear-gradient(160deg, var(--navy-2), var(--navy)); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.74); margin: 16px auto 32px; max-width: 54ch; font-size: 17px; }
.cta-actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 15px; color: var(--text); background: #fff; transition: border-color .16s, box-shadow .16s;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.field .err { color: #CF3333; font-size: 12.5px; margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Off-screen rather than display:none, which some bots detect and skip. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alert { padding: 14px 18px; border-radius: var(--r-sm); margin: 24px 0; font-size: 14.5px; }
.alert-success { background: #E6F9F3; color: #196A51; border: 1px solid #CDF2E6; }
.alert-error { background: #FCF4F4; color: #AD2828; border: 1px solid #F5D3D3; }

/* ── Blog ───────────────────────────────────────────────────────────── */
.post-card { display: flex; flex-direction: column; }
.post-card .meta { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.post-card h3 { margin-bottom: 10px; line-height: 1.35; }
.post-card h3 a:hover { color: var(--brand-text); }
.post-card p { flex: 1; }
.post-card .more { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--brand-text); }

.article { max-width: 730px; margin: 0 auto; }
.article-head { text-align: center; margin-bottom: 44px; }
.article-head .meta { color: var(--muted); font-size: 13.5px; margin-top: 16px; }
.article-body p { margin-bottom: 22px; font-size: 17.5px; color: var(--text-2); line-height: 1.75; }
.article-body h2 { font-size: 25px; margin: 42px 0 16px; }
.article-body ul { margin: 0 0 22px 22px; }
.article-body li { margin-bottom: 10px; font-size: 17px; color: var(--text-2); }

/* ── Pricing ────────────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.price-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: 34px; position: relative; transition: transform .22s, box-shadow .22s; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.featured { border: 2px solid var(--brand); box-shadow: 0 16px 44px -12px rgba(60, 208, 161,.3); }
.price-badge { position: absolute; top: -13px; left: 34px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-size: 11px; font-weight: 800; padding: 6px 14px; border-radius: 100px; letter-spacing: .05em; }
.price-name { font-size: 19px; font-weight: 800; color: var(--navy); }
.price-tag { margin: 18px 0 6px; }
.price-tag .amt { font-size: 44px; font-weight: 800; color: var(--navy); letter-spacing: -.035em; }
.price-tag .per { font-size: 14px; color: var(--muted); font-weight: 600; }
.price-list { list-style: none; margin: 24px 0 28px; display: flex; flex-direction: column; gap: 12px; }
.price-list li { font-size: 14.8px; color: var(--text-2); display: flex; gap: 10px; align-items: flex-start; }
.price-list li::before { content: '✓'; color: var(--brand-text); font-weight: 800; flex-shrink: 0; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: rgba(255,255,255,.66); padding: 66px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.4fr; gap: 40px; }
.footer-logo { height: 30px; width: auto; margin-bottom: 16px; }
.footer-blurb { font-size: 14px; max-width: 34ch; line-height: 1.65; }
.footer-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: #fff; margin-bottom: 16px; }
.site-footer a { display: block; font-size: 14px; margin-bottom: 10px; color: rgba(255,255,255,.66); transition: color .15s; }
.site-footer a:hover { color: #fff; }
.footer-base { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 24px; font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Scroll reveal ──────────────────────────────────────────────────── */
/* Visible by DEFAULT. The hiding is scoped to .js, which an inline script in
   <head> sets, so a visitor or crawler without JavaScript sees every section
   rather than a blank page. base.html also drops .js after a timeout, so a
   script that loads but then errors cannot leave content hidden either. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
/* Respect a user's reduced-motion setting: show everything immediately and
   stop the marquee, rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .mk-bar { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .bento > *, .bento .span-3 { grid-column: span 3; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .mockup-body { grid-template-columns: 1fr; }
  .mk-side { display: none; }
}
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; top: 72px; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch;
    gap: 0; padding: 10px 24px 22px; display: none; box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav > a { padding: 13px 0; border-radius: 0; border-bottom: 1px solid var(--border); }
  .nav-cta { margin: 16px 0 0; }
  .split, .price-grid, .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .split.reverse .split-media { order: 0; }
  .split + .split { margin-top: 62px; }
  .bento > *, .bento .span-3, .bento .span-6 { grid-column: span 6; }
  section { padding: 66px 0; }
  .hero { padding-top: 62px; }
  .mockup-wrap { padding-bottom: 66px; margin-top: 44px; }
  .mk-kpis { grid-template-columns: repeat(2, 1fr); }
  .mk-panels { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
}

/* ── Outcome pillars ────────────────────────────────────────────────── */
.outcome { position: relative; padding-left: 62px; }
.outcome-num {
  position: absolute; left: 0; top: 2px; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800;
  background: linear-gradient(140deg, var(--brand-tint), #CDF2E6); color: var(--brand-text);
  border: 1px solid rgba(60, 208, 161,.2);
}
.outcome h3 { font-size: 19px; margin-bottom: 8px; }
.outcome p { color: var(--text-2); font-size: 15.4px; }
.outcome .metric { display: block; font-size: 13px; font-weight: 700; color: var(--brand-text); margin-top: 10px; }

/* ── ROI calculator ─────────────────────────────────────────────────── */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.calc-inputs { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--shadow-sm); }
.calc-out {
  border-radius: var(--r-xl); padding: 34px; color: #fff; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(520px 260px at 80% -10%, rgba(60, 208, 161,.34), transparent 62%), linear-gradient(155deg, var(--navy-2), var(--navy));
}
.calc-field { margin-bottom: 22px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.calc-label span:first-child { font-size: 13.8px; font-weight: 700; color: var(--text); }
.calc-val { font-size: 14px; font-weight: 800; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.calc-hint { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.5; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--border); outline: none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand); cursor: pointer; box-shadow: 0 2px 8px rgba(11,18,32,.18);
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--brand);
  cursor: pointer; box-shadow: 0 2px 8px rgba(11,18,32,.18);
}

.calc-headline { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.calc-big { font-size: clamp(38px, 5.6vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 12px 0 6px;
  background: linear-gradient(120deg, #84E2C2, var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-sub { font-size: 14.5px; color: rgba(255,255,255,.68); }
.calc-rows { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; }
.calc-row { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; padding: 8px 0; color: rgba(255,255,255,.76); }
.calc-row strong { color: #fff; font-variant-numeric: tabular-nums; }
.calc-row.total { border-top: 1px solid rgba(255,255,255,.14); margin-top: 10px; padding-top: 14px; font-weight: 700; color: #fff; }
.calc-note { font-size: 11.8px; color: rgba(255,255,255,.45); margin-top: 20px; line-height: 1.55; }

@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } .outcome { padding-left: 0; } .outcome-num { position: static; margin-bottom: 14px; } }

@media (max-width: 520px) { .brand-logo { height: 28px; } }

/* ═══════════════════════════════════════════════════════════════════════
   FIRST IMPRESSION
   Everything below animates transform/opacity only, so it stays on the
   compositor and costs no layout work. Every animated element is styled
   VISIBLE by default and animation only moves it — so a JS failure, a
   blocked script or a crawler costs the motion, never the content.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Aurora: slow-drifting colour behind the hero ───────────────────────
   Two large blurred blobs on a long, offset loop. Blur is expensive to
   repaint, so they are promoted with will-change and never change size. */
.aurora { position: absolute; inset: -20% -10% auto; height: 780px; pointer-events: none; z-index: 0; overflow: hidden; }
.aurora span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5; will-change: transform;
}
.aurora .a1 { width: 620px; height: 620px; left: 4%;  top: 6%;  background: radial-gradient(circle, rgba(60,208,161,.60), transparent 68%); animation: drift1 26s ease-in-out infinite; }
.aurora .a2 { width: 540px; height: 540px; right: 2%; top: 0;   background: radial-gradient(circle, rgba(99,102,241,.46), transparent 68%); animation: drift2 32s ease-in-out infinite; }
.aurora .a3 { width: 440px; height: 440px; left: 42%; top: 30%; background: radial-gradient(circle, rgba(126,232,196,.44), transparent 70%); animation: drift1 38s ease-in-out infinite reverse; }
@keyframes drift1 { 50% { transform: translate3d(70px, 44px, 0) scale(1.12); } }
@keyframes drift2 { 50% { transform: translate3d(-84px, 56px, 0) scale(1.08); } }

/* ── Hero scale-up ─────────────────────────────────────────────────────── */
.hero { padding-top: 108px; }
.hero h1 { font-size: clamp(38px, 6.4vw, 78px); letter-spacing: -.042em; line-height: 1.02; }
.hero-inner { max-width: 940px; }
.hero .lede { font-size: clamp(17px, 2vw, 21.5px); max-width: 62ch; }

/* Currency chips. The product bills in 32 currencies; saying so is weaker
   than showing it, and these cost nothing to render. */
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 30px; }
.fx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  background: rgba(255,255,255,.74); border: 1px solid var(--border);
  border-radius: 100px; padding: 6px 13px; backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}
.fx-chip b { color: var(--navy); font-size: 13.5px; }

/* ── Mockup: depth ─────────────────────────────────────────────────────── */
/* A glow beneath the frame so it reads as lifted off the page rather than
   pasted onto it. Sits behind via a negative z-index on a positioned parent. */
.mockup-wrap::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; translate: -50% 0; top: 12%;
  width: min(1040px, 94%); height: 62%;
  background: radial-gradient(ellipse at 50% 50%, rgba(60,208,161,.34), transparent 66%),
              radial-gradient(ellipse at 30% 60%, rgba(99,102,241,.26), transparent 62%);
  filter: blur(64px); pointer-events: none;
}
.mockup {
  /* A slight recline, straightened on scroll by site.js. Harmless without JS:
     it simply stays gently tilted, which still reads as a screen in space. */
  transform: perspective(1900px) rotateX(7deg) scale(.985);
  transform-origin: 50% 0;
  transition: transform .7s cubic-bezier(.22,.9,.24,1);
}
.mockup-body { min-height: 0; }

/* ── Roster inside the mockup ─────────────────────────────────────────── */
.mk-roster { margin-top: 11px; }
.mk-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-panel-meta { font-size: 9px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }

.mk-row {
  display: grid; grid-template-columns: 26px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid #F1F5F9;
}
.mk-row:first-of-type { border-top: 0; }

.mk-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--av, var(--brand)); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .02em;
  display: grid; place-items: center;
}
.mk-nm { font-size: 11px; font-weight: 700; color: var(--navy); line-height: 1.25; min-width: 0; }
.mk-nm em { display: block; font-style: normal; font-size: 9px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.mk-pay { font-size: 10.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.mk-st {
  font-size: 8.5px; font-weight: 700; padding: 3px 8px; border-radius: 100px; white-space: nowrap;
}
.mk-st.in  { background: var(--brand-tint); color: var(--brand-text); }
.mk-st.wfh { background: #F2F6FC; color: #2F56C6; }
.mk-st.lv  { background: #FBF9EF; color: #995724; }
.mk-st.br  { background: #FCF4F4; color: #A53027; }

/* ── Motion, opt-out ──────────────────────────────────────────────────── */
/* Scroll-driven effects are a common migraine and motion-sickness trigger,
   so honour the setting rather than treating it as decoration. */
@media (prefers-reduced-motion: reduce) {
  .aurora span,
  .mk-bar,
  .marquee-track { animation: none !important; }
  .mockup { transform: none; transition: none; }
  .mockup-wrap::before { filter: blur(48px); opacity: .7; }
}

@media (max-width: 860px) {
  .mockup { transform: none; }
  .mk-row { grid-template-columns: 24px 1fr auto; }
  .mk-pay { display: none; }
  .aurora { height: 520px; }
}


/* ── Hero entrance ─────────────────────────────────────────────────────
   Deliberately CSS and not GSAP. CSS animations always run: there is no
   script to block, no flash of content appearing and then being hidden
   again, and an `animation` that never starts still leaves the element at
   its normal styles. Above-the-fold copy is the last thing that should
   depend on a download. */
@keyframes heroRise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
.hero-inner > * { animation: heroRise .8s cubic-bezier(.22,.9,.24,1) both; }
.hero-inner > *:nth-child(1) { animation-delay: .05s; }
.hero-inner > *:nth-child(2) { animation-delay: .14s; }
.hero-inner > *:nth-child(3) { animation-delay: .23s; }
.hero-inner > *:nth-child(4) { animation-delay: .32s; }
.hero-inner > *:nth-child(5) { animation-delay: .41s; }
.hero-inner > *:nth-child(6) { animation-delay: .50s; }
.mockup-wrap { animation: heroRise 1s cubic-bezier(.22,.9,.24,1) .34s both; }

/* Sticky header earns its shadow once the page moves. */
.site-header.is-stuck, .site-header.scrolled { box-shadow: 0 1px 0 var(--border), 0 6px 20px -12px rgba(11,18,32,.18); }

@media (prefers-reduced-motion: reduce) {
  .hero-inner > *, .mockup-wrap { animation: none; }
  .reveal, .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK HERO
   A light, centred, text-first hero is the most generic layout in SaaS. The
   product is the most persuasive thing on the page, so it gets staged: dark
   ground, lit screen, oversized type. Mint reads as luminous on navy in a
   way it cannot on white.
   ═══════════════════════════════════════════════════════════════════════ */

.hero--dark {
  background:
    radial-gradient(1200px 620px at 78% -6%, rgba(99,102,241,.34), transparent 60%),
    radial-gradient(1000px 560px at 12% 4%, rgba(60,208,161,.24), transparent 58%),
    linear-gradient(172deg, #1F2125 0%, #24272C 46%, #2E3137 100%);
  padding: 0 0 0;
  isolation: isolate;
}
.hero--dark::after {
  /* Grain. Flat gradients look like defaults; a little noise is most of the
     difference between "a gradient" and "designed". Inline SVG so it costs no
     request, and pointer-events:none so it never eats a click. */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero--dark .hero-grid-bg {
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  mask-image: radial-gradient(circle at 50% 22%, #000 4%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 4%, transparent 62%);
  opacity: 1;
}
.hero--dark .aurora span { opacity: .42; filter: blur(110px); }

.hero--dark .hero-top { position: relative; z-index: 2; padding: 92px 0 0; text-align: center; }
.hero--dark .hero-inner { max-width: 900px; }

.hero--dark h1 {
  color: #fff;
  font-size: clamp(40px, 7.2vw, 88px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 800;
  text-wrap: balance;
}
.hero--dark .grad {
  background: linear-gradient(96deg, #3CD0A1 0%, #84E2C2 42%, #B4BEED 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--dark .lede { color: rgba(226,232,240,.80); margin-inline: auto; text-wrap: pretty; }
.hero--dark .hero-note { color: rgba(148,163,184,.85); }

.hero--dark .eyebrow {
  color: #AEECD6; background: rgba(60,208,161,.10);
  border-color: rgba(60,208,161,.26);
  backdrop-filter: blur(8px);
}
.hero--dark .btn-outline {
  background: rgba(255,255,255,.07); color: #fff;
  border-color: rgba(255,255,255,.18); backdrop-filter: blur(10px); box-shadow: none;
}
.hero--dark .btn-outline:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); }

/* ── Currency rail ──────────────────────────────────────────────────────── */
.fx { position: relative; z-index: 2; margin-top: 34px; }
.hero--dark .fx-chip {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.13);
  color: rgba(226,232,240,.82); box-shadow: none; backdrop-filter: blur(8px);
}
.hero--dark .fx-chip b { color: #fff; }

.fx-more {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 100px;
  background: rgba(60,208,161,.13); color: #AEECD6;
  border: 1px solid rgba(60,208,161,.30);
  transition: background .16s, border-color .16s;
}
.fx-more:hover { background: rgba(60,208,161,.22); border-color: rgba(60,208,161,.5); }
.fx-more svg { width: 12px; height: 12px; transition: transform .22s ease; }
.fx-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Hidden from the first paint when JS is present, so the list never flashes
   open and then collapse. Without JS the `.js` prefix never matches, so all 32
   stay visible and the toggle button stays hidden -- the list is content, not
   an interaction. */
.js .fx-all { display: none; }
.js .fx-all.is-open { display: grid; }

.fx-all {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 7px; margin: 16px auto 0; max-width: 780px;
  padding: 16px; border-radius: var(--r);
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.fx-all span {
  font-size: 11.5px; font-weight: 600; color: rgba(226,232,240,.78);
  display: flex; align-items: center; gap: 6px; justify-content: center;
}
.fx-all b { color: #fff; font-size: 12.5px; min-width: 22px; text-align: right; }

/* ── The product, staged ────────────────────────────────────────────────── */
.hero--dark .mockup-wrap { margin-top: 62px; padding-bottom: 0; }
.hero--dark .mockup-wrap::before {
  top: 4%; height: 70%;
  background: radial-gradient(ellipse at 50% 40%, rgba(60,208,161,.52), transparent 62%),
              radial-gradient(ellipse at 26% 66%, rgba(99,102,241,.44), transparent 58%);
  filter: blur(78px);
}
.hero--dark .mockup {
  max-width: 1080px;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 48px 120px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05) inset;
  transform: perspective(2200px) rotateX(9deg) scale(.98);
}
/* Bleeds off the bottom edge so the page feels like it continues behind the
   fold, rather than a card sitting in a box. */
.hero--dark .mockup-clip { overflow: hidden; padding-bottom: 0; margin-bottom: -70px; }

/* Header sits on the dark hero until the page moves. */
body.dark-hero .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.dark-hero .site-header a:not(.btn) { color: rgba(226,232,240,.86); }
body.dark-hero .site-header a:not(.btn):hover { color: #fff; }
body.dark-hero .site-header .btn-outline { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
body.dark-hero .site-header.scrolled,
body.dark-hero .site-header.is-stuck { background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-bottom-color: var(--border); }
body.dark-hero .site-header.scrolled a:not(.btn),
body.dark-hero .site-header.is-stuck a:not(.btn) { color: var(--text); }
/* Logo swap.
   Every rule here used to be prefixed body.dark-hero, which meant that on any
   page WITHOUT the dark hero -- features, pricing, about, blog, contact --
   nothing hid either variant and BOTH logos rendered side by side. The default
   now stands on its own and the dark hero is the exception, so a page that
   forgets the body class still gets exactly one logo. */
.brand-logo-light { display: none; }
.brand-logo-dark  { display: block; }

/* Only while the header is genuinely sitting over the dark hero. The moment it
   sticks and turns white, the navy logo is the legible one again. */
body.dark-hero .site-header:not(.scrolled):not(.is-stuck) .brand-logo-light { display: block; }
body.dark-hero .site-header:not(.scrolled):not(.is-stuck) .brand-logo-dark  { display: none; }

@media (max-width: 860px) {
  .hero--dark h1 { letter-spacing: -.035em; }
  .hero--dark .mockup { transform: none; }
  .hero--dark .mockup-clip { margin-bottom: -30px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-more svg { transition: none; }
}

/* ── Flags in the currency rail ─────────────────────────────────────────── */
.fx-flag {
  width: 18px; height: 14px; border-radius: 2.5px; flex: none;
  object-fit: cover;
  /* A hairline keeps predominantly white flags (Japan) from dissolving into a
     light chip, and predominantly dark ones from merging with a dark chip. */
  box-shadow: 0 0 0 1px rgba(11,18,32,.12);
}
.hero--dark .fx-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.fx-chip, .fx-all span { gap: 7px; }
.fx-all span { justify-content: flex-start; }

/* ── Why an HRIS: sourced figures ──────────────────────────────────────── */
.why { background: linear-gradient(180deg, #1F2125 0%, #24272C 60%, #292C32 100%); }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px; }
.stat-card {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-lg); padding: 26px 24px 22px;
  backdrop-filter: blur(10px);
  transition: transform .2s cubic-bezier(.34,1.3,.64,1), border-color .2s, background .2s;
}
.stat-card:hover { transform: translateY(-4px); border-color: rgba(60,208,161,.34); background: rgba(60,208,161,.06); }
.stat-fig {
  font-size: clamp(38px, 4.4vw, 54px); font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(100deg, #3CD0A1, #84E2C2 55%, #B4BEED);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-fig span { font-size: .44em; font-weight: 700; margin-left: 3px; letter-spacing: -.02em; }
.stat-lbl { color: #fff; font-weight: 700; font-size: 14.5px; margin-top: 10px; letter-spacing: -.01em; }
.stat-lbl em { font-style: italic; color: #84E2C2; }
.stat-card p { color: rgba(226,232,240,.62); font-size: 13.5px; margin: 9px 0 14px; line-height: 1.55; }
.stat-src {
  font-size: 11.5px; font-weight: 700; color: #AEECD6; text-decoration: none;
  border-bottom: 1px dotted rgba(167,243,216,.5); padding-bottom: 1px;
}
.stat-src:hover { color: #fff; border-bottom-color: #fff; }
.why-note { margin: 30px auto 0; max-width: 62ch; text-align: center; font-size: 14px; color: rgba(148,163,184,.9); }
.why-note a { color: #AEECD6; font-weight: 700; }

/* ── Why Work Mint ────────────────────────────────────────────────────── */
.choose { background: var(--surface); }
.choose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.choose-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px 24px; position: relative; overflow: hidden;
  transition: transform .2s cubic-bezier(.34,1.3,.64,1), box-shadow .22s, border-color .2s;
}
.choose-card::before {
  /* A mint edge that wipes in on hover — cheaper and calmer than moving the
     whole card, and it draws the eye along the text rather than away. */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--cta));
  transform: scaleY(0); transform-origin: top; transition: transform .28s cubic-bezier(.22,.9,.24,1);
}
.choose-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #CFD8E3; }
.choose-card:hover::before { transform: scaleY(1); }
.choose-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.choose-card p { color: var(--text-2); font-size: 14px; line-height: 1.62; }

@media (prefers-reduced-motion: reduce) {
  .stat-card, .choose-card, .choose-card::before { transition: none; }
}

/* ── Language switcher ─────────────────────────────────────────────────── */
.lang-bar { padding: 24px 0 4px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 30px; }
.lang-bar-h {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(148,163,184,.7); margin-bottom: 11px;
}
.lang-list { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.lang-link {
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: rgba(203,213,225,.72); padding: 4px 10px; border-radius: 100px;
  border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s;
}
.lang-link:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.lang-link.on { color: var(--navy); background: var(--brand); border-color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════
   HEADER OVER THE DARK HERO — the fix
   The header is position:sticky, so it sits in normal flow ABOVE the hero
   rather than over it. Making it transparent therefore revealed the white
   page behind it, and the knockout logo and light nav text vanished into it.
   Pulling the hero up by the header's own height puts the dark ground behind
   the header, which is what the transparent treatment assumed all along.
   ═══════════════════════════════════════════════════════════════════════ */
body.dark-hero .hero--dark { margin-top: -72px; padding-top: 72px; }
body.dark-hero .hero--dark .hero-top { padding-top: 84px; }

/* Nav text and logo only go light while the header is genuinely over the dark
   hero. Once it sticks it turns white, so everything must go dark again. */
body.dark-hero .site-header:not(.scrolled):not(.is-stuck) .site-nav > a { color: rgba(226,232,240,.88); }
body.dark-hero .site-header:not(.scrolled):not(.is-stuck) .site-nav > a:hover { color: #fff; background: rgba(255,255,255,.10); }
body.dark-hero .site-header:not(.scrolled):not(.is-stuck) .nav-login { color: #fff !important; }
body.dark-hero .site-header:not(.scrolled):not(.is-stuck) .nav-toggle span { background: #fff; }

/* Opaque enough that the headline does not read through it while scrolling
   past. .72 alpha let the type show through and looked like a rendering bug. */
body.dark-hero .site-header.scrolled,
body.dark-hero .site-header.is-stuck {
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.site-header.scrolled { background: rgba(255,255,255,.96); }

/* ── Language picker ──────────────────────────────────────────────────── */
.lang-pick { position: relative; flex: none; }
.lang-pick summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  color: var(--text-2); list-style: none; white-space: nowrap;
  border: 1px solid var(--border); background: #fff;
  transition: border-color .15s, background .15s, color .15s;
}
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick summary:hover { border-color: #C9D1DA; }
.lang-pick summary svg { width: 11px; height: 11px; opacity: .6; transition: transform .2s; }
.lang-pick[open] summary svg { transform: rotate(180deg); }
.lang-pick-now { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }

body.dark-hero .site-header:not(.scrolled):not(.is-stuck) .lang-pick summary {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); color: #fff;
  backdrop-filter: blur(8px);
}

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 8px; max-height: 62vh; overflow-y: auto;
}
.lang-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  transition: background .13s;
}
.lang-opt:hover { background: var(--surface); }
/* The active row was mint-on-mint, which is technically AA but reads as washed
   out next to solid rows. Ink on the tint is unambiguous, and the mint moves
   to a left bar that marks the row without draining its contrast. */
.lang-opt.on { background: var(--brand-tint); color: var(--navy); font-weight: 700; }
.lang-opt.on::before {
  content: ''; width: 3px; align-self: stretch; border-radius: 2px;
  background: var(--brand); margin-right: 2px; flex: none;
}
.lang-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Every row keeps the same left-to-right flag-then-label order regardless of
   the language's own direction, so the grid stays aligned. */
.lang-opt, .lang-link { direction: ltr; text-align: left; }
/* The endonym itself still renders in its own script and direction. */
.lang-opt span, .lang-link { unicode-bidi: plaintext; }

@media (max-width: 1040px) { .lang-pick-now { display: none; } }
@media (max-width: 620px) {
  .lang-menu { grid-template-columns: 1fr; right: -60px; min-width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-pick summary, .lang-pick summary svg, .lang-opt { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SPOTLIGHT
   A soft light that follows the pointer across the dark hero. Driven by two
   CSS custom properties that JavaScript writes, so the browser composites a
   single radial gradient instead of re-running layout — and if the script
   never loads, the defaults leave it parked top-centre, which still reads as
   deliberate lighting rather than a missing effect.
   ═══════════════════════════════════════════════════════════════════════ */
.hero--dark { --spot-x: 50%; --spot-y: 12%; }
.hero--dark .spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(
    620px circle at var(--spot-x) var(--spot-y),
    rgba(126, 232, 196, .13), rgba(129, 140, 248, .09) 42%, transparent 72%);
  transition: opacity .4s;
}
/* Pointer-driven light makes no sense on touch, where there is no hover. */
@media (hover: none) { .hero--dark .spotlight { display: none; } }

/* ── The engine diagram ────────────────────────────────────────────────── */
.pipeline { background: linear-gradient(180deg, #292C32 0%, #1F2125 100%); overflow: hidden; }
.pipe-wrap { position: relative; }
.pipe { width: 100%; height: auto; overflow: visible; }

.pipe-node rect {
  fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.14); stroke-width: 1;
}
.pipe-node.is-on rect { fill: rgba(60,208,161,.13); stroke: rgba(60,208,161,.55); }
.pipe-node--ai.is-on rect { fill: rgba(129,140,248,.15); stroke: rgba(129,140,248,.6); }
.pipe-node rect, .pipe-node text { transition: fill .35s, stroke .35s; }

.pipe-t {
  fill: #fff; font-size: 17px; font-weight: 800; text-anchor: middle;
  letter-spacing: -.02em; font-family: var(--font);
}
.pipe-s {
  fill: rgba(148,163,184,.9); font-size: 11.5px; font-weight: 600;
  text-anchor: middle; font-family: var(--font);
}
.pipe-node.is-on .pipe-s { fill: rgba(167,243,216,.95); }
.pipe-node--ai.is-on .pipe-s { fill: rgba(199,210,254,.95); }

.pipe-legend {
  list-style: none; margin: 34px auto 0; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;
}
.pipe-legend li {
  font-size: 13.5px; line-height: 1.6; color: rgba(226,232,240,.66);
  padding-left: 14px; border-left: 2px solid rgba(60,208,161,.4);
}
.pipe-legend b { color: #fff; display: block; margin-bottom: 3px; font-size: 14px; }

@media (max-width: 760px) {
  /* The diagram is wider than a phone; let it scroll rather than shrink the
     labels into illegibility. */
  .pipe-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pipe { min-width: 720px; }
  .pipe-legend { padding-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--dark .spotlight { display: none; }
  .pipe-node rect, .pipe-node text { transition: none; }
  /* With no scroll animation to light them, show every node as active so the
     diagram is not a row of dead boxes. */
  .pipe-node rect { fill: rgba(60,208,161,.13); stroke: rgba(60,208,161,.55); }
  .pipe-node--ai rect { fill: rgba(129,140,248,.15); stroke: rgba(129,140,248,.6); }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODULE DECK — cards that pile up on scroll
   The stacking is position:sticky with an incremental top offset per card,
   which means it works with JavaScript switched off: the cards still pile,
   the copy is still readable, scrolling still behaves. GSAP only adds the
   scale-down of a card as the next one covers it.

   Deliberately not a pinned ScrollTrigger: pinning hijacks the scrollbar,
   breaks find-on-page, and strands anyone arriving at a deep link mid-page.
   ═══════════════════════════════════════════════════════════════════════ */
.modules { background: var(--surface); padding-bottom: 120px; }
.deck { display: flex; flex-direction: column; gap: 26px; }

.deck-card {
  position: sticky;
  /* Each card parks 14px below the one before it, so the covered cards leave
     a visible edge and the pile reads as depth rather than replacement. */
  top: calc(96px + var(--i) * 14px);
  display: grid; grid-template-columns: 76px 1fr; gap: 22px; align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 34px 38px;
  box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 18px 40px -22px rgba(11,18,32,.18);
  transform-origin: 50% 0;
  will-change: transform;
}
/* A mint hairline along the top edge, brighter on the card in focus. */
.deck-card::after {
  content: ''; position: absolute; left: 38px; right: 38px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--cta));
  opacity: .18; border-radius: 2px; transition: opacity .3s;
}
.deck-card.is-front::after { opacity: 1; }

.deck-num {
  font-size: 42px; font-weight: 800; line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(160deg, var(--brand) 10%, var(--cta) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.deck-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-text);
}
.deck-icon svg { width: 20px; height: 20px; }
.deck-body h3 { font-size: 21px; letter-spacing: -.022em; margin-bottom: 8px; }
.deck-body p { color: var(--text-2); font-size: 15px; line-height: 1.62; max-width: 62ch; }

.deck-tag {
  display: inline-block; margin-top: 14px;
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 100px;
  background: #FBF8EF; color: #994F24; border: 1px solid #EFE2BD;
}

@media (max-width: 720px) {
  .deck-card { grid-template-columns: 1fr; padding: 26px 24px; gap: 4px; top: calc(84px + var(--i) * 9px); }
  .deck-card::after { left: 24px; right: 24px; }
  .deck-num { font-size: 30px; }
  .modules { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sticky stacking is itself movement-on-scroll. Opt out into a plain list. */
  .deck-card { position: static; top: auto; transform: none !important; }
  .deck-card::after { opacity: 1; }
}

/* The neutral globe in the resting language button. Sized to match the flags
   it replaces so the button width does not jump when a language is chosen. */
.lang-globe { width: 17px; height: 17px; opacity: .75; flex: none; }
.lang-pick summary { min-width: 112px; }

/* The auto-demo's scenario label. aria-live, so a screen reader hears which
   company the figures describe rather than silent numbers changing. */
.calc-scenario {
  margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: #AEECD6; min-height: 1.2em;
}

/* The header gained a language picker, which pushed "Log in" into wrapping on
   to two lines. Nav items are single-line by definition, so say so, and give
   the row permission to tighten before anything breaks. */
.site-nav > a, .nav-login, .nav-cta { white-space: nowrap; }
.header-inner { gap: 12px; }
.site-nav { gap: 2px; }
@media (max-width: 1180px) {
  .site-nav > a { padding: 9px 10px; font-size: 14px; }
  .lang-pick summary { min-width: 0; padding: 7px 9px; }
}

/* ── Two doors, labelled ────────────────────────────────────────────────
   "Log in" and "Start a free demo" are both a way into the product, and
   which one is yours was not obvious: one of them does nothing for somebody
   who has never been here. Each now says who it is for, above what it does.
   The labels are unchanged, because they are translated twenty times over. */
.nav-login, .nav-cta {
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1.2; gap: 1px;
}
.nav-hint {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; opacity: .7;
}
.nav-word { font-size: 14.5px; font-weight: 600; }
/* min-height rather than two sets of padding: the button is the same height
   whether or not the hint above it is being shown, so the header does not
   change shape as the viewport crosses a breakpoint. */
.nav-cta { padding-top: 7px; padding-bottom: 7px; min-height: 42px; }

/* The band where the row is tight already -- the language picker pushed
   "Log in" into wrapping once before. Below it the nav is a drawer with the
   full width of the page, so the hints come back. */
@media (max-width: 1180px) { .nav-hint { display: none; } }
@media (max-width: 860px) {
  .nav-hint { display: block; }
  .nav-login { align-items: flex-start; }
}

/* The line under the hero that says this runs in a browser. Quieter than the
   lede and louder than a footnote, because it answers a question people ask
   before they will click anything: is this a thing I have to install. */
.hero-note {
  margin: 14px 0 0; font-size: 14px; color: var(--muted);
}
.section-dark .hero-note { color: rgba(255, 255, 255, .72); }

/* The founding-customer block on the pricing page. One panel rather than
   three cards, because there is one offer and three cards would be three
   tiers with the numbers taken out. */
.founding {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 38px 32px; box-shadow: var(--shadow);
}
.founding-badge {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px;
  border-radius: 999px; background: var(--cta-tint); color: var(--cta-text);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.founding h2 { font-size: 26px; margin: 0 0 14px; }
.founding p { color: var(--text-2); font-size: 15px; line-height: 1.65; margin: 0 0 14px; }
.founding-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0 18px;
}
.founding-note { font-size: 13.5px; color: var(--muted); margin: 0; }

/* The social row in the footer. Only rendered when there is an account to
   point at, so this styles something that is often absent. */
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .08); transition: background .15s, color .15s;
}
.footer-social a:hover { background: rgba(255, 255, 255, .16); }
.footer-social svg { width: 17px; height: 17px; }

/* The product video. Styled for a 16 by 9 file; aspect-ratio keeps the box the
   right shape before the video has loaded, so the page does not jump when it
   does. */
.video-frame {
  max-width: 900px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  background: var(--navy); box-shadow: var(--shadow);
}
.video-frame video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: var(--navy);
}