/* ============================================================
   CRESTLY MARKETING · v2 · "PRODUCT, NOT WEBSITE"
   ------------------------------------------------------------
   Built strictly on the ERP design system (tokens.css). Goal of
   v2 is to make the landing page feel like the product itself —
   real laptop + phone frames showing actual ERP UI, choreographed
   scroll reveals, sticky role scenes, vision orbit.
   ============================================================ */

/* ---------- base ---------- */
html { overflow-x: hidden; }
body.mkt {
  background: var(--cream-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body-l);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;          /* stronger than hidden — disallows even programmatic h-scroll */
  width: 100%;
  max-width: 100vw;
  position: relative;
}
.mkt h1, .mkt h2, .mkt h3, .mkt h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mkt :where(p) { margin: 0; }
.mkt a { text-decoration: none; }
.mkt img { max-width: 100%; display: block; }
.mkt ::selection { background: var(--orange); color: var(--cream); }

/* Crestly brand-dot — the orange "." brand signature. */
.brand-dot { color: var(--orange); font-weight: 800; }
.nav__brand .brand-dot,
.footer__brand-name .brand-dot,
.more-footer__brand-name .brand-dot {
  font-size: 1.4em;
  line-height: 0;
  letter-spacing: 0;
  margin-left: 1px;
}

/* Mono label utility */
.label-mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-weight: 500;
}

/* ---------- container ---------- */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* ============================================================
   SCROLL PROGRESS BAR — fixed top, fills as page scrolls
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 60;
  background: transparent;
  pointer-events: none;
}
.scroll-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-soft) 100%);
  box-shadow: 0 0 12px rgba(242, 92, 25, 0.35);
  transform-origin: left center;
  transition: width 80ms linear;
}

/* ============================================================
   REVEAL-ON-SCROLL SYSTEM
   Elements with .reveal start hidden; .is-visible animates them in.
   Variants control direction/effect. Children stagger via --i index.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 720ms var(--ease),
    transform 720ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal--fade {
  transform: none;
}
.reveal--scale {
  transform: scale(0.96) translateY(20px);
}
.reveal--scale.is-visible { transform: none; }
.reveal--left  { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--left.is-visible,
.reveal--right.is-visible { transform: none; }

/* Stagger helper — apply to a parent, then children take incremental --i */
.stagger > *           { transition-delay: calc(var(--i, 0) * 80ms); }

/* Word-by-word title reveal helper */
.title-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--i, 0) * 50ms);
}
.title-words.is-visible .word { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--scale, .reveal--left, .reveal--right, .title-words .word {
    opacity: 1; transform: none; transition: none;
  }
}

/* ============================================================
   TOP NAV — sticky, glassy
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 236, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav__brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 19px; letter-spacing: -0.025em;
  color: var(--ink);
}
.nav__brand-mark {
  width: 32px; height: 32px; border-radius: var(--r-3);
  display: block; flex-shrink: 0;
}
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
  color: var(--ink-60); font-size: 13px; font-weight: 500;
  transition: color var(--t-fast) var(--ease);
  position: relative;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  content: ''; position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--cream);
  padding: 9px 16px; border-radius: var(--r-3);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__cta:hover { background: var(--orange); transform: translateY(-1px); }
@media (max-width: 760px) { .nav__links { display: none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: -0.005em;
  padding: 11px 18px; border-radius: var(--r-3);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--orange); color: var(--cream);
  box-shadow: 0 6px 14px -6px rgba(242, 92, 25, 0.5);
}
.btn--primary:hover {
  background: var(--orange-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(242, 92, 25, 0.6);
}
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--ink-90); transform: translateY(-1px); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--cream-soft); border-color: var(--ink-40); }
.btn--lg { padding: 14px 22px; font-size: 15px; }

/* ============================================================
   BRAND CHIP (mono-uppercase pill with orange dot)
   ============================================================ */
.brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--tint-wheat); color: var(--tint-wheat-deep);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.brand-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.brand-chip--live {
  background: var(--success-soft); color: var(--success);
}
.brand-chip--live .brand-chip__dot {
  background: var(--success);
  box-shadow: 0 0 0 0 var(--success);
  animation: chipPulse 2.4s infinite var(--ease);
}
@keyframes chipPulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,111,74,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(31,111,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,111,74,0); }
}

/* ============================================================
   SECTION COMMON
   ============================================================ */
section { padding: 112px 0; position: relative; }
@media (max-width: 960px) { section { padding: 72px 0; } }
@media (max-width: 600px) { section { padding: 56px 0; } }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
  color: var(--ink-40);
}
.section-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 var(--orange);
  animation: dotPulse 3s infinite var(--ease);
}
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(242, 92, 25, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(242, 92, 25, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 92, 25, 0); }
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08; letter-spacing: -0.04em;
  font-weight: 800; max-width: 820px;
  margin-bottom: 20px; color: var(--ink);
}
.section-title em { color: var(--orange); font-style: normal; }
.section-sub {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--ink-60); max-width: 640px;
  line-height: 1.65;
}
.section-head { margin-bottom: 64px; }
@media (max-width: 600px) { .section-head { margin-bottom: 36px; } }

/* ============================================================
   HERO — product-first, with laptop + phone device cluster
   ============================================================ */
.hero {
  padding: 64px 0 120px;
  position: relative;
  background:
    radial-gradient(1100px 600px at 85% -10%, var(--orange-tint) 0%, transparent 55%),
    radial-gradient(900px 500px at -10% 30%, var(--tint-wheat) 0%, transparent 50%),
    var(--cream-soft);
  overflow: hidden;
}
.hero::before {
  /* Subtle diagonal grain overlay */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, transparent 49.5%, rgba(16,13,10,0.018) 49.5%, rgba(16,13,10,0.018) 50.5%, transparent 50.5%);
  background-size: 6px 6px;
  pointer-events: none;
  z-index: 0;
}
.hero__grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 56px; align-items: center;
  position: relative; z-index: 1;
}
.hero__eyebrow { margin-bottom: 22px; }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.0; font-weight: 800;
  letter-spacing: -0.048em;
  margin-bottom: 24px;
  color: var(--ink);
}
.hero__title em { font-style: normal; color: var(--orange); }
.hero__title-strike {
  position: relative; display: inline-block;
  color: var(--ink-40);
}
.hero__title-strike::after {
  content: ''; position: absolute; left: -4px; right: -4px;
  top: 55%; height: 4px; background: var(--orange);
  transform: scaleX(0) rotate(-2deg);
  transform-origin: left center;
  border-radius: 2px;
  transition: transform 800ms var(--ease) 600ms;
}
.title-words.is-visible .hero__title-strike::after { transform: scaleX(1) rotate(-2deg); }
.hero__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-60); max-width: 540px;
  line-height: 1.65;
  margin-bottom: 36px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 36px; }
.hero__meta {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-60); font-weight: 500;
}
.hero__meta-item { display: flex; align-items: center; gap: 8px; }
.hero__meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* Hero visual — laptop + phone cluster */
.hero__cluster {
  position: relative;
  min-height: 520px;
  display: flex; justify-content: center; align-items: center;
}
.hero__laptop {
  position: relative; z-index: 1;
  transform-origin: center bottom;
  animation: heroFloat 8s var(--ease) infinite;
}
.hero__phone {
  position: absolute;
  right: -10px; bottom: 0;
  z-index: 3;
  width: 200px;
  animation: heroFloatPhone 7s var(--ease) infinite reverse;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-0.3deg); }
  50%      { transform: translateY(-10px) rotate(0.3deg); }
}
@keyframes heroFloatPhone {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50%      { transform: translateY(-14px) rotate(-1deg); }
}

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 56px; text-align: left; }
  .hero__cluster { min-height: 420px; max-width: 640px; margin: 0 auto; }
  .hero__phone { right: 0; width: 180px; }
}
@media (max-width: 600px) {
  .hero { padding: 32px 0 64px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__cluster { min-height: 380px; }
  /* Pull the phone back inside the viewport — was right: -8px which caused overflow */
  .hero__phone { width: 150px; right: 0; }
}

/* ============================================================
   DEVICE FRAMES — laptop + phone chrome
   ============================================================ */

/* LAPTOP */
.app-frame--laptop {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 14px 14px 4px 4px;
  padding: 10px 10px 0;
  box-shadow:
    0 40px 80px -30px rgba(16,13,10,0.45),
    0 12px 30px -15px rgba(16,13,10,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
}
.app-frame--laptop::before {
  /* Webcam dot */
  content: ''; position: absolute;
  top: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-60);
}
.app-frame--laptop::after {
  /* Stand / bottom bezel */
  content: ''; position: absolute;
  bottom: -8px; left: -4%; right: -4%;
  height: 8px;
  background: linear-gradient(180deg, var(--ink-80) 0%, var(--ink) 100%);
  border-radius: 0 0 12px 12px;
}
.app-frame--laptop__screen {
  background: var(--cream-soft);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
}
.app-frame--laptop__topbar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--rule-soft);
}
.app-frame--laptop__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); }
.app-frame--laptop__dot:nth-child(1) { background: #F25C19; opacity: 0.55; }
.app-frame--laptop__dot:nth-child(2) { background: #C97A0A; opacity: 0.55; }
.app-frame--laptop__dot:nth-child(3) { background: #1F6F4A; opacity: 0.55; }
.app-frame--laptop__urlbar {
  flex: 1; margin-left: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-40); letter-spacing: 0.04em;
  background: var(--cream-soft);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  text-align: center;
}
.app-frame--laptop__body {
  background: var(--cream-soft);
  height: calc(100% - 36px);
  overflow: hidden;
  position: relative;
}

/* PHONE */
.app-frame--phone {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 36px;
  padding: 8px;
  box-shadow:
    0 30px 60px -20px rgba(16,13,10,0.4),
    0 10px 24px -12px rgba(16,13,10,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}
.app-frame--phone::before {
  /* Side button accents */
  content: '';
  position: absolute;
  left: -2px; top: 110px;
  width: 2px; height: 60px;
  background: var(--ink-80);
  border-radius: 2px 0 0 2px;
}
.app-frame--phone__screen {
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  position: relative;
}
.app-frame--phone__notch {
  position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 22px;
  background: var(--ink);
  border-radius: 0 0 12px 12px;
  z-index: 5;
}
.app-frame--phone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 6px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--ink); font-weight: 600; letter-spacing: 0.04em;
  position: relative; z-index: 1;
}
.app-frame--phone__status-right {
  display: flex; align-items: center; gap: 3px;
}
.app-frame--phone__status-right svg { width: 10px; height: 10px; }
.app-frame--phone__body {
  height: calc(100% - 30px);
  overflow: hidden;
  position: relative;
}

/* ============================================================
   ERP MOCK UI — used inside device frames
   These mimic the real ERP screen styles in compressed form.
   ============================================================ */

/* ----- shared shell ----- */
.erp-mock {
  font-size: 11px;
  color: var(--ink);
  background: var(--cream-soft);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.erp-mock__head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--white);
}
.erp-mock__crumb {
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange); font-weight: 600;
  margin-bottom: 4px;
}
.erp-mock__crumb span { color: var(--ink-40); margin: 0 4px; }
.erp-mock__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.1;
}
.erp-mock__body {
  flex: 1; min-height: 0;
  padding: 10px 14px;
  overflow: hidden;
}

/* ----- dashboard stat grid (3-col) ----- */
.erp-mock__stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-bottom: 8px;
}
.erp-mock__tile {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 8px 9px;
  display: flex; flex-direction: column; gap: 2px;
}
.erp-mock__tile-icon {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.erp-mock__tile-icon svg { width: 12px; height: 12px; }
.erp-mock__tile-label {
  font-family: var(--font-mono); font-size: 7.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-40); font-weight: 600;
}
.erp-mock__tile-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1;
}
.erp-mock__tile-delta {
  font-family: var(--font-mono); font-size: 7.5px;
  color: var(--success); font-weight: 600;
  letter-spacing: 0.06em;
}
.erp-mock__tile-delta--neutral { color: var(--ink-40); }

/* ----- mini row list ----- */
.erp-mock__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 10px;
}
.erp-mock__row-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.erp-mock__avatar {
  width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; flex-shrink: 0;
  background: var(--tint-wheat); color: var(--tint-wheat-deep);
}
.erp-mock__avatar--mint { background: var(--tint-mint); color: var(--tint-mint-deep); }
.erp-mock__avatar--rose { background: var(--tint-rose); color: var(--tint-rose-deep); }
.erp-mock__avatar--sky  { background: var(--tint-sky);  color: var(--tint-sky-deep); }
.erp-mock__row-name { font-family: var(--font-display); font-weight: 600; font-size: 10px; line-height: 1.1; }
.erp-mock__row-meta {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--ink-40); letter-spacing: 0.04em; margin-top: 1px;
}

/* ----- pill ----- */
.erp-mock__pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.erp-mock__pill--success { background: var(--success-soft); color: var(--success); }
.erp-mock__pill--warn    { background: var(--warn-soft);    color: var(--warn); }
.erp-mock__pill--error   { background: var(--error-soft);   color: var(--error); }
.erp-mock__pill--mint    { background: var(--tint-mint);    color: var(--tint-mint-deep); }
.erp-mock__pill--rose    { background: var(--tint-rose);    color: var(--tint-rose-deep); }
.erp-mock__pill--wheat   { background: var(--tint-wheat);   color: var(--tint-wheat-deep); }
.erp-mock__pill--sky     { background: var(--tint-sky);     color: var(--tint-sky-deep); }
.erp-mock__pill-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* ----- attendance grid (phone) ----- */
.erp-mock__att-summary {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.erp-mock__att-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-bottom: 3px;
  font-size: 9px;
}
.erp-mock__att-actions { display: flex; gap: 3px; }
.erp-mock__att-btn {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px;
  background: var(--cream-soft);
  color: var(--ink-40);
  border: 1px solid var(--rule-soft);
  transition: all var(--t-fast) var(--ease);
}
.erp-mock__att-btn--p-on { background: var(--tint-mint);    color: var(--tint-mint-deep);    border-color: var(--tint-mint-deep); }
.erp-mock__att-btn--a-on { background: var(--tint-rose);    color: var(--tint-rose-deep);    border-color: var(--tint-rose-deep); }
.erp-mock__att-btn--l-on { background: var(--tint-wheat);   color: var(--tint-wheat-deep);   border-color: var(--tint-wheat-deep); }
.erp-mock__att-btn--e-on { background: var(--tint-sky);     color: var(--tint-sky-deep);     border-color: var(--tint-sky-deep); }

/* ----- punch screen (phone) ----- */
.erp-mock__punch {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding-top: 12px;
}
.erp-mock__selfie {
  width: 110px; height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, var(--tint-peach) 0%, var(--tint-rose) 60%, var(--tint-rose-deep) 100%);
  border: 3px solid var(--white);
  box-shadow: 0 8px 22px -10px rgba(16,13,10,0.4);
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.erp-mock__selfie::before {
  /* Stylised face circle */
  content: '';
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  position: absolute; top: 28px;
}
.erp-mock__selfie-shutter {
  position: absolute;
  bottom: -1px; left: -1px; right: -1px;
  height: 18px;
  background: var(--ink-80);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 7px;
  color: var(--cream);
  letter-spacing: 0.14em;
}
.erp-mock__punch-meta {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--ink-60); letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.erp-mock__punch-meta b { color: var(--success); font-weight: 700; }
.erp-mock__punch-btn {
  width: 100%; max-width: 200px;
  padding: 13px 16px;
  background: var(--success); color: var(--cream);
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.02em;
  border-radius: 10px;
  text-align: center;
  border: 0;
  box-shadow: 0 8px 18px -8px rgba(31,111,74,0.4);
}
.erp-mock__punch-btn--out { background: var(--error); box-shadow: 0 8px 18px -8px rgba(184,53,32,0.4); }

/* ----- fee receipt (laptop) ----- */
.erp-mock__receipt {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}
.erp-mock__receipt-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px dashed var(--rule);
  margin-bottom: 8px;
}
.erp-mock__receipt-no {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.14em; color: var(--ink-40);
}
.erp-mock__receipt-amt {
  font-family: var(--font-display); font-weight: 800;
  font-size: 20px; letter-spacing: -0.03em;
  color: var(--orange);
}
.erp-mock__receipt-lines {
  display: grid; gap: 4px; font-size: 10px; color: var(--ink-60);
}
.erp-mock__receipt-lines b { color: var(--ink); font-weight: 600; }
.erp-mock__wa-flow {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(90deg, var(--tint-mint) 0%, transparent 100%);
  border-radius: 6px;
  margin-top: 8px;
  font-size: 10px;
}
.erp-mock__wa-flow-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--tint-mint-deep); color: var(--cream);
  display: grid; place-items: center; flex-shrink: 0;
}
.erp-mock__wa-flow-icon svg { width: 12px; height: 12px; }
.erp-mock__wa-flow-text { flex: 1; color: var(--tint-mint-deep); font-weight: 600; }
.erp-mock__wa-flow-meta {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--ink-40); letter-spacing: 0.04em;
}

/* ----- voucher row (laptop) ----- */
.erp-mock__voucher {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 8px 10px;
  margin-bottom: 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 10px;
}
.erp-mock__voucher-title { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
.erp-mock__voucher-meta {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--ink-40); letter-spacing: 0.04em; margin-top: 2px;
}
.erp-mock__voucher-amt {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink);
  text-align: right;
}
.erp-mock__voucher-status {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}

/* ----- WhatsApp message (phone) ----- */
.erp-mock__wa {
  background: linear-gradient(180deg, #E5DDD5 0%, #D9CFC7 100%);
  height: 100%;
  display: flex; flex-direction: column;
}
.erp-mock__wa-head {
  background: #075E54;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  color: var(--white);
}
.erp-mock__wa-head-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; color: var(--cream);
}
.erp-mock__wa-head-name { font-weight: 600; font-size: 12px; line-height: 1.1; }
.erp-mock__wa-head-sub {
  font-family: var(--font-mono); font-size: 8.5px;
  color: rgba(255,255,255,0.7); letter-spacing: 0.04em;
  margin-top: 1px;
}
.erp-mock__wa-thread {
  flex: 1; padding: 12px 10px;
  display: flex; flex-direction: column;
  gap: 6px; overflow: hidden;
}
.erp-mock__wa-bubble {
  background: var(--white);
  border-radius: 8px 8px 8px 2px;
  padding: 8px 10px;
  font-size: 10px; line-height: 1.45;
  max-width: 85%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  position: relative;
  color: var(--ink);
}
.erp-mock__wa-bubble b { color: var(--ink); font-weight: 600; }
.erp-mock__wa-bubble--receipt {
  background: #DCF8C6;
  align-self: flex-end;
  border-radius: 8px 8px 2px 8px;
}
.erp-mock__wa-time {
  font-size: 7.5px; color: var(--ink-40);
  font-family: var(--font-mono); letter-spacing: 0.04em;
  margin-top: 4px; text-align: right;
}
.erp-mock__wa-time--out {
  color: rgba(16,13,10,0.45);
}
.erp-mock__wa-time-tick {
  color: var(--info); margin-left: 2px;
}

/* ============================================================
   TRUST STRIP — short proof bar under hero
   ============================================================ */
.trust {
  padding: 32px 0;
  background: var(--white);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.trust__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
}
.trust__line {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-40); font-weight: 500;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.trust__line b {
  color: var(--ink); font-weight: 700;
  letter-spacing: 0.04em;
}
.trust__sep { color: var(--ink-20); }
.trust__cca {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--cream); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; color: var(--ink-80);
  font-weight: 600; text-transform: uppercase;
}
.trust__cca-mark {
  width: 28px; height: auto;
  display: block;
  flex-shrink: 0;
}
.trust__stats {
  display: flex; gap: 28px; flex-wrap: wrap;
}
.trust__stat-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 24px; letter-spacing: -0.03em;
  color: var(--ink); line-height: 1;
}
.trust__stat-lbl {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-40); margin-top: 4px;
}
@media (max-width: 760px) {
  .trust__inner { flex-direction: column; align-items: flex-start; }
  .trust__stats { gap: 20px; }
  .trust__stat-num { font-size: 20px; }
}
@media (max-width: 560px) {
  /* The CCA pill is the longest string on the page in uppercase +
     letter-spacing; shrink it so it fits on phone screens. */
  .trust__cca {
    font-size: 9px;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    max-width: 100%;
    line-height: 1.3;
  }
  .trust__cca-mark { width: 22px; }
  .trust__line { font-size: 9.5px; letter-spacing: 0.06em; gap: 10px; }
  .trust__stats { gap: 18px 22px; }
  .trust__stat-num { font-size: 18px; }
  .trust__stat-lbl { font-size: 9px; letter-spacing: 0.08em; }
}

/* ============================================================
   VISION — ecosystem orbit
   ============================================================ */
.vision { background: var(--cream-soft); }
.vision__grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 80px; align-items: center;
}
.vision__copy { max-width: 480px; }
.vision__pillars {
  margin-top: 36px;
  display: grid; gap: 16px;
}
.vision__pillar {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 14px; align-items: start;
}
.vision__pillar-num {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px;
}
.vision__pillar-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.015em;
  color: var(--ink); margin-bottom: 4px;
}
.vision__pillar-body {
  font-size: 13.5px; color: var(--ink-60);
  line-height: 1.55;
}

/* Orbit visual — always-on render, individual chips animate in via .reveal */
.orbit {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 500px;
  min-height: 360px;       /* fallback if aspect-ratio gets ignored anywhere */
  margin: 0 auto;
}
.orbit__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(16,13,10,0.22);
  animation: orbitSpin 60s linear infinite;
  pointer-events: none;
}
.orbit__ring--inner {
  inset: 22%;
  border-color: rgba(16,13,10,0.14);
  animation-duration: 40s;
  animation-direction: reverse;
}
@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}
.orbit__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  border-radius: 26px;
  background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  text-align: center;
  box-shadow:
    0 0 0 10px rgba(250, 246, 236, 0.7),
    0 24px 60px -20px rgba(16,13,10,0.45);
  z-index: 5;
}
.orbit__core-mark { width: 40px; height: 40px; margin: 0; display: block; }
.orbit__core-text { line-height: 1.05; }
.orbit__core-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: -0.02em;
  line-height: 1;
}
.orbit__core-sub {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-40); margin-top: 2px;
  line-height: 1;
}

/* Soft orange pulse from the core — same "live" feel as login page. */
.orbit__pulse {
  position: absolute; top: 50%; left: 50%;
  width: 120px; height: 120px;
  border-radius: 26px;
  border: 1.5px solid rgba(242,92,25,0.5);
  transform: translate(-50%, -50%);
  animation: orbitCorePulse 2.8s ease-out infinite;
  pointer-events: none;
  z-index: 4;
}
@keyframes orbitCorePulse {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 0;   transform: translate(-50%, -50%) scale(1.9); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.9); }
}

/* Rotor wraps the chips + connector SVG so they orbit together,
   opposite direction to the outer dashed ring. */
.orbit__rotor {
  position: absolute; inset: 0;
  pointer-events: none;
  animation: orbitChipsSpin 70s linear infinite reverse;
  transform-origin: 50% 50%;
  z-index: 2;
}
@keyframes orbitChipsSpin { to { transform: rotate(360deg); } }

/* Position wrapper: gets carried around by the rotor; centers on its top/left. */
.orbit__role {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 4;
}
/* Counter-rotating wrapper: cancels rotor rotation so the pill stays horizontal. */
.orbit__role-counter {
  display: inline-block;
  animation: orbitChipsCounter 70s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes orbitChipsCounter { to { transform: rotate(360deg); } }

/* The visible pill — always horizontal, text fixed inside. */
.orbit__role-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
  box-shadow: 0 8px 22px -10px rgba(16,13,10,0.25), 0 2px 6px -2px rgba(16,13,10,0.08);
  white-space: nowrap;
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.orbit__role-pill:hover {
  border-color: var(--orange);
  transform: scale(1.06);
  box-shadow: 0 12px 28px -10px rgba(242,92,25,0.35), 0 2px 6px -2px rgba(16,13,10,0.08);
}
.orbit__role-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(242,92,25,0.18);
}

/* Animated entry: pill scales up from 0.6, staggered.
   Only applied when .orbit gets the .orbit-anim class (JS, on enter). */
.orbit.orbit-anim .orbit__role-pill {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 540ms var(--ease),
    transform 640ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.orbit.orbit-anim.is-visible .orbit__role-pill {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .orbit__ring,
  .orbit__pulse,
  .orbit__rotor,
  .orbit__role-counter { animation: none; }
  .orbit.orbit-anim .orbit__role-pill { transition: none; opacity: 1; transform: scale(1); }
  .orbit.orbit-anim .orbit__svg path { transition: none; stroke-dashoffset: 0; }
}

/* Chip positions around the orbit — 10 roles, 36° apart, ~45% radius.
   Clockwise from top: Principal → Teacher → Accountant → HR → Driver →
   Reception → Parent → Sales → Marketing → Branding. */
.orbit__role--principal    { top: 5%;    left: 50%;   }   /* 0°   */
.orbit__role--teacher      { top: 14%;   left: 76.4%; }   /* 36°  */
.orbit__role--accountant   { top: 36%;   left: 93%;   }   /* 72°  */
.orbit__role--hr           { top: 64%;   left: 93%;   }   /* 108° */
.orbit__role--driver       { top: 86%;   left: 76.4%; }   /* 144° */
.orbit__role--receptionist { top: 95%;   left: 50%;   }   /* 180° */
.orbit__role--parent       { top: 86%;   left: 23.6%; }   /* 216° */
.orbit__role--sales        { top: 64%;   left: 7%;    }   /* 252° */
.orbit__role--marketing    { top: 36%;   left: 7%;    }   /* 288° */
.orbit__role--branding     { top: 14%;   left: 23.6%; }   /* 324° */

/* Connector lines (SVG layered, ALWAYS visible — drawn in from center) */
.orbit__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.orbit__svg path {
  fill: none;
  stroke: rgba(16,13,10,0.16);
  stroke-width: 1.25;
  stroke-dasharray: 5 7;
}
/* When orbit animates in, draw the lines too (via stroke-dashoffset trick) */
.orbit.orbit-anim .orbit__svg path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.4s var(--ease) 200ms;
}
.orbit.orbit-anim.is-visible .orbit__svg path {
  stroke-dashoffset: 0;
}

@media (max-width: 960px) {
  .vision__grid { grid-template-columns: 1fr; gap: 56px; }
  .orbit { max-width: 460px; min-height: 320px; }
}
@media (max-width: 560px) {
  .orbit__role-pill { font-size: 9px; padding: 6px 10px; }
  .orbit__core { width: 96px; height: 96px; border-radius: 22px; }
  .orbit__pulse { width: 96px; height: 96px; border-radius: 22px; }
  .orbit__core-name { font-size: 12px; }
  .orbit { min-height: 280px; }
}

/* ============================================================
   ROLE SCENES — sticky-pinned device with copy alongside
   ============================================================ */
.roles { background: var(--paper); }
.roles__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 72px;
}
.roles__intro .section-eyebrow { justify-content: center; }
.roles__intro .section-title { margin-left: auto; margin-right: auto; }

.scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 64px 0;
  align-items: start;
  border-top: 1px solid var(--rule);
}
.scene:first-of-type { border-top: 0; }

.scene__copy {
  position: relative;
  padding-top: 12px;
}
.scene__role {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-80); font-weight: 600;
  margin-bottom: 22px;
}
.scene__role-num {
  font-family: var(--font-mono);
  color: var(--orange); font-weight: 700;
}
.scene__pain {
  font-family: var(--font-display); font-weight: 500;
  font-size: 15px; color: var(--ink-60);
  line-height: 1.55; margin-bottom: 14px;
  font-style: italic;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}
.scene__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.035em;
  line-height: 1.12; color: var(--ink);
  margin-bottom: 18px;
}
.scene__title em { color: var(--orange); font-style: normal; }
.scene__body {
  font-size: 15px; color: var(--ink-60);
  line-height: 1.65; margin-bottom: 24px;
  max-width: 460px;
}
.scene__bullets { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.scene__bullets li {
  display: flex; align-items: start; gap: 10px;
  font-size: 13.5px; color: var(--ink-80);
  line-height: 1.55;
}
.scene__bullets li::before {
  content: ''; width: 14px; height: 14px; border-radius: 4px;
  background: var(--tint-mint); color: var(--tint-mint-deep);
  flex-shrink: 0; margin-top: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E7A50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: center;
}
.scene__report {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--cream);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-60); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 500;
}
.scene__report b { color: var(--ink); }
.scene__report-icon {
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--orange); color: var(--cream);
  display: grid; place-items: center;
}
.scene__report-icon svg { width: 11px; height: 11px; }

.scene__visual {
  position: sticky; top: 100px;
  padding-top: 12px;
}
.scene__visual--align-center { display: flex; justify-content: center; }

@media (max-width: 960px) {
  .scene { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .scene__visual { position: relative; top: auto; }
}

/* ============================================================
   DAY TIMELINE — refined alternating cards
   ============================================================ */
.day { background: var(--cream); }
.day__timeline {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; max-width: 980px; margin: 0 auto;
}
.day__card {
  position: relative;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--r-4);
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.day__card:hover { transform: translateY(-3px); border-color: var(--ink-20); box-shadow: var(--shadow-2); }
.day__head {
  display: flex; align-items: center; gap: 12px;
  padding-right: 82px;
}
.day__icon {
  width: 44px; height: 44px; border-radius: var(--r-3);
  display: grid; place-items: center; flex-shrink: 0;
}
.day__icon svg { width: 22px; height: 22px; }
.day__what {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.015em;
  color: var(--ink); line-height: 1.3;
  margin: 0; flex: 1; min-width: 0;
}
.day__system { font-size: 13.5px; color: var(--ink-60); line-height: 1.55; margin: 0; }
.day__system b { color: var(--orange); font-weight: 600; }
.day__time {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange); font-weight: 700;
  background: var(--orange-tint);
  padding: 3px 9px; border-radius: var(--r-pill);
}
@media (max-width: 960px) {
  .day__timeline { grid-template-columns: 1fr; gap: 12px; }
  .day__card { padding: 18px; }
  .day__head { gap: 12px; padding-right: 76px; }
  .day__icon { width: 40px; height: 40px; }
  .day__icon svg { width: 20px; height: 20px; }
  .day__what { font-size: 15px; }
}

/* ============================================================
   MODULES — 12-card grid
   ============================================================ */
.modules { background: var(--cream-soft); }
.modules__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.module {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.module:hover {
  background: var(--white);
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -16px rgba(16,13,10,0.18);
}
.module__head { display: flex; align-items: center; gap: 12px; }
.module__icon {
  width: 44px; height: 44px; border-radius: var(--r-3);
  display: grid; place-items: center; flex-shrink: 0;
}
.module__icon svg { width: 22px; height: 22px; }
.module__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.015em;
  color: var(--ink);
}
.module__body { font-size: 13.5px; color: var(--ink-60); line-height: 1.6; }
.module__tag {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--success); font-weight: 600;
  background: var(--success-soft);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.icon-tint-mint    { background: var(--tint-mint);    color: var(--tint-mint-deep); }
.icon-tint-peach   { background: var(--tint-peach);   color: var(--tint-peach-deep); }
.icon-tint-rose    { background: var(--tint-rose);    color: var(--tint-rose-deep); }
.icon-tint-mustard { background: var(--tint-mustard); color: var(--tint-mustard-deep); }
.icon-tint-wheat   { background: var(--tint-wheat);   color: var(--tint-wheat-deep); }
.icon-tint-sky     { background: var(--tint-sky);     color: var(--tint-sky-deep); }
@media (max-width: 960px) { .modules__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .modules__grid { grid-template-columns: 1fr; } }

/* ============================================================
   INDIA — 4-col features grid
   ============================================================ */
.india__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.india__card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--r-4); padding: 22px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.india__card:hover { background: var(--cream-soft); border-color: var(--ink-20); }
.india__icon {
  width: 40px; height: 40px; border-radius: var(--r-3);
  background: var(--cream-soft); display: grid; place-items: center;
  margin-bottom: 14px;
  color: var(--orange);
}
.india__icon svg { width: 20px; height: 20px; }
.india__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: -0.01em;
  margin-bottom: 6px; color: var(--ink);
}
.india__body { font-size: 13px; color: var(--ink-60); line-height: 1.55; }
@media (max-width: 960px) { .india__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   PROOF — CCA partner strip (with consent per memory)
   ============================================================ */
.proof { background: var(--ink); color: var(--cream); padding: 80px 0; }
.proof__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.proof__mark {
  width: 148px;
  background: var(--cream);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.35);
  display: flex;
  align-items: center; justify-content: center;
}
.proof__mark img {
  width: 100%; height: auto;
  display: block;
}
.proof__label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-soft); font-weight: 600;
  margin-bottom: 10px;
}
.proof__school {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--cream);
  line-height: 1.3;
}
.proof__location {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--ink-20);
  margin-top: 6px;
}
.proof__quote {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45; letter-spacing: -0.02em;
  color: var(--cream); margin-bottom: 24px;
}
.proof__quote em { color: var(--orange-soft); font-style: normal; }
.proof__attr {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-20);
}
.proof__attr b { color: var(--cream); font-weight: 600; }

@media (max-width: 760px) {
  .proof__inner { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .proof__mark { width: 80px; height: 80px; font-size: 26px; }
}

/* ============================================================
   DEMO CTA
   ============================================================ */
.demo {
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(255, 123, 61, 0.45) 0%, transparent 60%),
    var(--orange);
  color: var(--cream);
}
.demo__inner {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 56px; align-items: center;
}
.demo__label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); font-weight: 600;
  margin-bottom: 14px;
}
.demo__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 46px);
  line-height: 1.1; letter-spacing: -0.035em;
  font-weight: 800; color: var(--cream); margin-bottom: 18px;
}
.demo__sub { font-size: 16px; color: rgba(255,255,255,0.88); margin-bottom: 28px; max-width: 460px; line-height: 1.6; }
.demo__bullets {
  font-size: 14px; line-height: 1.9;
  color: rgba(255,255,255,0.9);
}
.demo__bullets span {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.65);
  margin-right: 8px;
}
.demo__form {
  background: var(--white); color: var(--ink);
  border-radius: var(--r-5); padding: 32px;
  box-shadow: 0 30px 60px -20px rgba(16,13,10,0.4);
}
.demo__form-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; letter-spacing: -0.015em;
  margin-bottom: 4px; color: var(--ink);
}
.demo__form-sub { font-size: 13px; color: var(--ink-60); margin-bottom: 22px; }
.demo__field { margin-bottom: 14px; }
.demo__label-fld {
  display: block; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-40); margin-bottom: 6px;
}
.demo__input {
  width: 100%; padding: 11px 14px;
  background: var(--white); border: 1px solid var(--rule-strong);
  border-radius: var(--r-3); font-size: 14px; color: var(--ink);
  font-family: var(--font-body);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.demo__input:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16,13,10,0.06);
}
.demo__phone {
  display: grid; grid-template-columns: 56px 1fr; gap: 8px;
}
.demo__phone-prefix {
  background: var(--cream-soft); border: 1px solid var(--rule-strong);
  border-radius: var(--r-3); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px;
  font-weight: 600; color: var(--ink-60);
}
.demo__submit { width: 100%; margin-top: 8px; }
.demo__note {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--ink-40);
  text-align: center; margin-top: 14px;
}
.demo__success {
  display: none; padding: 24px;
  background: var(--success-soft); color: var(--success);
  border-radius: var(--r-4); text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.demo__success.show { display: block; }
@media (max-width: 960px) { .demo__inner { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq__list {
  max-width: 820px; margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.faq__item {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}
.faq__q {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; letter-spacing: -0.01em;
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+'; font-family: var(--font-display);
  font-size: 22px; font-weight: 400;
  color: var(--ink-40); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.faq__item[open] .faq__q::after { content: '−'; color: var(--orange); }
.faq__a {
  font-size: 14.5px; color: var(--ink-60); line-height: 1.65;
  margin-top: 14px; max-width: 720px;
}

/* ============================================================
   FOOTER (desktop)
   ============================================================ */
.footer { background: var(--ink); color: var(--ink-20); padding: 64px 0 32px; }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer__brand { color: var(--cream); }
.footer__brand-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer__brand-mark { width: 44px; height: 44px; border-radius: var(--r-3); display: block; }
.footer__brand-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: -0.025em; line-height: 1;
}
.footer__brand-sub {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-40); margin-top: 4px;
}
.footer__tag { font-size: 13.5px; max-width: 280px; line-height: 1.65; color: var(--ink-20); }
.footer__col-title {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-soft); margin-bottom: 18px; font-weight: 600;
}
.footer__col a {
  display: block; padding: 6px 0; font-size: 13.5px;
  color: var(--ink-20); transition: color var(--t-fast) var(--ease);
}
.footer__col a:hover { color: var(--cream); }
.footer__bottom {
  border-top: 1px solid var(--rule-onink);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--ink-40);
  flex-wrap: wrap; gap: 12px;
}
.footer__powered { color: var(--ink-20); }
.footer__powered b { color: var(--cream); font-weight: 600; letter-spacing: 0.04em; }
.footer__venture {
  margin-top: 14px; max-width: 30ch;
  font-size: 12.5px; line-height: 1.55;
  color: var(--ink-40);
}
.footer__venture b { color: var(--orange-soft); font-weight: 600; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social-link {
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-3);
  background: rgba(245, 239, 227, 0.08);
  color: var(--ink-20);
  border: 1px solid var(--rule-onink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer__social-link svg { width: 18px; height: 18px; display: block; }
.footer__social-link:hover {
  background: var(--orange); color: var(--cream);
  border-color: var(--orange); transform: translateY(-2px);
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   MORE-FOOTER (mobile · part of MORE screen) + m-bottom-nav
   ============================================================ */
.more-footer { display: none; }
.m-bottom-nav { display: none; }

@media (max-width: 960px) {
  /* Hide desktop footer on mobile */
  .footer { display: none !important; }

  /* MORE-FOOTER */
  .more-footer {
    background: var(--ink); color: var(--ink-20);
    padding: 40px 0 32px;
  }
  .more-footer__brand-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
  .more-footer__brand-lockup svg { width: 44px; height: 44px; border-radius: var(--r-3); display: block; }
  .more-footer__brand-name {
    font-family: var(--font-display); font-weight: 800;
    font-size: 20px; letter-spacing: -0.025em;
    color: var(--cream); line-height: 1;
  }
  .more-footer__brand-sub {
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-40); margin-top: 4px;
  }
  .more-footer__cols {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 16px; margin-bottom: 28px;
  }
  .more-footer__col-title {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--orange-soft); font-weight: 600;
    margin-bottom: 12px;
  }
  .more-footer__col a {
    display: block; padding: 5px 0; font-size: 12.5px;
    color: var(--ink-20); line-height: 1.4;
    word-break: break-word;
  }
  .more-footer__col a:active { color: var(--cream); }
  .more-footer__social { display: flex; gap: 10px; margin-bottom: 24px; }
  .more-footer__social-link {
    width: 40px; height: 40px;
    display: inline-grid; place-items: center;
    border-radius: var(--r-3);
    background: rgba(245, 239, 227, 0.08);
    color: var(--ink-20);
    border: 1px solid var(--rule-onink);
  }
  .more-footer__social-link svg { width: 19px; height: 19px; display: block; }
  .more-footer__social-link:active { background: var(--orange); color: var(--cream); border-color: var(--orange); }
  .more-footer__copy {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-40); letter-spacing: 0.06em;
    padding-top: 20px; border-top: 1px solid var(--rule-onink);
    display: flex; flex-direction: column; gap: 8px;
  }
  .more-footer__powered b { color: var(--cream); font-weight: 600; }

  /* m-bottom-nav */
  .m-bottom-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 35;
    background: var(--white);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px -8px rgba(16,13,10,0.08);
  }
  .m-bottom-nav__tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    min-height: 56px;
    color: var(--ink-40);
    text-decoration: none;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.06em;
    transition: color var(--t-fast) var(--ease);
  }
  .m-bottom-nav__tab svg { width: 22px; height: 22px; }
  .m-bottom-nav__tab.is-active { color: var(--orange); }
  .m-bottom-nav__tab.is-active .m-bottom-nav__lbl { font-weight: 700; }
  .m-bottom-nav__lbl { letter-spacing: 0.04em; }
  .m-bottom-nav__tab:active { background: var(--cream-soft); }
  .m-bottom-nav__tab--wa { color: var(--tint-mint-deep); }
  .m-bottom-nav__tab--wa:active { background: var(--tint-mint); }

  body.mkt { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* Mobile nav becomes opaque app top-bar */
  .nav {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__inner { height: 56px; }
  .nav__brand { font-size: 17px; }
  .nav__cta { font-size: 12px; padding: 8px 14px; }

  html { scroll-padding-top: 64px; }

  /* Mobile FAQ → iOS-style grouped list (inside MORE) */
  body.mkt[data-screen="more"] section#faq {
    padding: 28px 0 8px;
    background: var(--cream-soft);
  }
  body.mkt[data-screen="more"] section#faq .section-head {
    margin-bottom: 12px;
    text-align: left !important;
    padding: 0 4px;
  }
  body.mkt[data-screen="more"] section#faq .section-eyebrow {
    margin-bottom: 0; font-size: 10px; color: var(--ink-40);
  }
  body.mkt[data-screen="more"] section#faq .section-title,
  body.mkt[data-screen="more"] section#faq .section-sub { display: none; }
  body.mkt[data-screen="more"] .faq__list {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--r-4);
    overflow: hidden;
  }
  body.mkt[data-screen="more"] .faq__item {
    border-bottom: 1px solid var(--rule-soft);
    padding: 0;
  }
  body.mkt[data-screen="more"] .faq__item:last-child { border-bottom: 0; }
  body.mkt[data-screen="more"] .faq__q {
    padding: 15px 16px;
    font-family: var(--font-display); font-weight: 500;
    font-size: 14.5px; letter-spacing: -0.005em;
    color: var(--ink); line-height: 1.35;
    gap: 12px;
    transition: background var(--t-fast) var(--ease);
  }
  body.mkt[data-screen="more"] .faq__q:active { background: var(--cream-soft); }
  body.mkt[data-screen="more"] .faq__q::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 1.6px solid var(--ink-40);
    border-bottom: 1.6px solid var(--ink-40);
    transform: rotate(-45deg);
    margin-right: 2px;
    transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
    flex-shrink: 0;
  }
  body.mkt[data-screen="more"] .faq__item[open] .faq__q::after {
    content: '';
    transform: rotate(45deg);
    border-color: var(--orange);
  }
  body.mkt[data-screen="more"] .faq__a {
    padding: 0 16px 16px;
    margin-top: -4px;
    font-size: 13.5px; color: var(--ink-60);
    line-height: 1.55;
  }

  /* Mobile screen routing */
  body.mkt[data-screen] section[data-screen] { display: none; }
  body.mkt[data-screen="home"]    section[data-screen="home"],
  body.mkt[data-screen="roles"]   section[data-screen="roles"],
  body.mkt[data-screen="day"]     section[data-screen="day"],
  body.mkt[data-screen="more"]    section[data-screen="more"] {
    display: block;
    animation: mktScreenIn 0.22s var(--ease);
  }
  @keyframes mktScreenIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 360px) {
  .more-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (display-mode: standalone) {
  .nav { padding-top: env(safe-area-inset-top); }
}

/* ============================================================
   SCROLL ORB · bottom-left circular scroll-progress indicator
   Mirror of the WhatsApp FAB at bottom-right. Shows % scrolled
   as an orange ring around a dark circle with the number inside.
   Click → smooth scroll back to top. Desktop only — mobile has
   the top progress bar and would clash with the bottom-nav.
   ============================================================ */
.scroll-orb { display: none; }

@media (min-width: 961px) {
  .scroll-orb {
    position: fixed;
    bottom: 24px; left: 24px;
    z-index: 60;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--cream);
    border: 0; cursor: pointer;
    display: grid; place-items: center;
    box-shadow:
      0 14px 32px -10px rgba(16, 13, 10, 0.45),
      0 4px 12px -4px rgba(16, 13, 10, 0.18);
    opacity: 0;
    transform: translateY(22px) scale(0.85);
    transition:
      opacity var(--t-med) var(--ease),
      transform var(--t-med) var(--ease),
      background var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease);
    pointer-events: none;
    font-family: var(--font-mono);
  }
  .scroll-orb.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .scroll-orb:hover {
    background: var(--orange);
    transform: translateY(-3px) scale(1.05);
    box-shadow:
      0 18px 38px -10px rgba(242, 92, 25, 0.5),
      0 6px 14px -4px rgba(16, 13, 10, 0.22);
  }
  .scroll-orb:active { transform: translateY(0) scale(0.98); }
  .scroll-orb:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
  }

  /* Ring SVG — rotated -90° so the bar starts from 12 o'clock */
  .scroll-orb__ring {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
  }
  .scroll-orb__track {
    fill: none;
    stroke: rgba(245, 239, 227, 0.14);
    stroke-width: 3;
  }
  .scroll-orb__bar {
    fill: none;
    stroke: var(--orange);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 163.36;   /* 2π × r (r=26) */
    stroke-dashoffset: 163.36;  /* full empty at 0% */
    transition: stroke-dashoffset 120ms linear;
  }
  .scroll-orb:hover .scroll-orb__bar {
    stroke: var(--cream);
  }

  /* Number + percent sign inside */
  .scroll-orb__pct {
    position: relative; z-index: 2;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: var(--cream);
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
  }
  .scroll-orb__pct i {
    font-style: normal;
    font-size: 9px;
    color: var(--orange);
    font-weight: 600;
    transition: color var(--t-fast) var(--ease);
  }
  .scroll-orb:hover .scroll-orb__pct i { color: var(--ink); }

  /* Tiny up-arrow that appears on hover, hinting "back to top" */
  .scroll-orb__hint {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%; transform: translateX(-50%) translateY(4px);
    padding: 5px 10px;
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    border-radius: var(--r-pill);
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .scroll-orb:hover .scroll-orb__hint {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================================
   WhatsApp FAB + Picker
   ============================================================ */
.wa-fab { display: none; }
@media (min-width: 961px) {
  .wa-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 60;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--tint-mint-deep);
    color: var(--cream);
    border: 0; cursor: pointer;
    display: grid; place-items: center;
    box-shadow: 0 14px 32px -10px rgba(62, 122, 80, 0.5), 0 4px 12px -4px rgba(16,13,10,0.18);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .wa-fab:hover {
    background: #2F5F3E;
    transform: translateY(-3px) scale(1.04);
  }
  .wa-fab:active { transform: translateY(0) scale(0.98); }
  .wa-fab svg { width: 28px; height: 28px; position: relative; z-index: 2; }
  .wa-fab__pulse {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--tint-mint-deep);
    opacity: 0.55;
    animation: waFabPulse 2.4s var(--ease) infinite;
    pointer-events: none;
  }
  @keyframes waFabPulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(1.6); opacity: 0;    }
    100% { transform: scale(1.6); opacity: 0;    }
  }
}

.wa-picker { position: fixed; inset: 0; z-index: 90; }
.wa-picker[hidden] { display: none; }
.wa-picker__scrim {
  position: absolute; inset: 0;
  background: rgba(16,13,10,0.55);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.wa-picker.is-open .wa-picker__scrim { opacity: 1; }
.wa-picker__sheet {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%; max-width: 480px;
  background: var(--white);
  border-top-left-radius: var(--r-5);
  border-top-right-radius: var(--r-5);
  padding: 16px 20px 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  transition: transform var(--t-med) var(--ease);
  box-shadow: 0 -20px 60px -20px rgba(16,13,10,0.3);
}
.wa-picker.is-open .wa-picker__sheet { transform: translate(-50%, 0); }
@media (min-width: 600px) {
  .wa-picker__sheet {
    bottom: auto; top: 50%;
    transform: translate(-50%, calc(-50% + 30px));
    border-radius: var(--r-5);
    padding-bottom: 28px;
  }
  .wa-picker.is-open .wa-picker__sheet { transform: translate(-50%, -50%); }
}
.wa-picker__close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: var(--cream-soft); color: var(--ink-60);
  border: 0; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.wa-picker__sheet::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--rule-strong);
  margin: 0 auto 14px;
  opacity: 0.5;
}
@media (min-width: 600px) { .wa-picker__sheet::before { display: none; } }
.wa-picker__head { padding: 4px 4px 16px; }
.wa-picker__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.015em;
  color: var(--ink);
}
.wa-picker__sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-40);
  margin-top: 2px;
}
.wa-picker__option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px;
  border-radius: var(--r-3);
  text-decoration: none; color: var(--ink);
  transition: background var(--t-fast) var(--ease);
}
.wa-picker__option + .wa-picker__option { margin-top: 6px; }
.wa-picker__option:active,
.wa-picker__option:hover { background: var(--cream-soft); }
.wa-picker__icon {
  width: 44px; height: 44px; border-radius: var(--r-3);
  display: grid; place-items: center; flex-shrink: 0;
}
.wa-picker__icon--personal { background: var(--tint-mint); color: var(--tint-mint-deep); }
.wa-picker__icon--business { background: var(--tint-sky);  color: var(--tint-sky-deep); }
.wa-picker__icon svg { width: 22px; height: 22px; }
.wa-picker__body { flex: 1; min-width: 0; }
.wa-picker__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; letter-spacing: -0.01em;
  color: var(--ink);
}
.wa-picker__desc {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ink-60);
  margin-top: 2px;
}
.wa-picker__arrow { font-size: 22px; color: var(--ink-40); font-weight: 400; flex-shrink: 0; }

/* ============================================================
   UTILITY
   ============================================================ */
.text-center { text-align: center; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.hidden { display: none !important; }