/* ============================================================
   Amity Solutions — HR Agentic AI Sales Deck
   Palette: Mint #04BE8C + white + #0A0A0A + charcoal #2C2C2A
   Style:   Enterprise AI SaaS · awwwards-grade parallax
   ============================================================ */
:root{
  --mint:#04BE8C;
  --mint-600:#03a87b;
  --mint-700:#028866;
  --mint-tint:#E1F5EE;
  --mint-tint-2:#F2FBF8;

  --ink:#0A0A0A;
  --ink-2:#171717;
  --ink-3:#222222;
  --text:#2C2C2A;
  --text-dim:#6B6B6B;
  --text-faint:#9A9A9A;

  --line:#E5E5E5;
  --line-2:#EFEFEF;
  --bg-light:#F7F8F7;

  --white:#FFFFFF;

  --shadow-card:0 1px 2px rgba(10,10,10,.04), 0 8px 24px -12px rgba(10,10,10,.08);
  --shadow-lg:0 24px 80px -24px rgba(4,190,140,.18), 0 8px 24px -10px rgba(10,10,10,.10);
  --shadow-glow:0 16px 48px -12px rgba(4,190,140,.45);

  --radius:14px;
  --radius-lg:22px;
  --radius-xl:28px;

  --font:'Inter','SF Pro Display',-apple-system,system-ui,sans-serif;
  --font-display:'Manrope','Inter',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* =====================================================
     🎚 FLUID TYPE SCALE · clamp(min, preferred, max)
     scales smoothly from 320px → 1440px+ viewports
     ===================================================== */
  --fs-eyebrow: clamp(10px, 0.3vw + 9px, 12px);
  --fs-mono:    clamp(10px, 0.3vw + 9px, 12px);
  --fs-xs:      clamp(11px, 0.3vw + 10px, 13px);
  --fs-sm:      clamp(12px, 0.4vw + 11px, 14px);
  --fs-base:    clamp(14px, 0.5vw + 12px, 16px);
  --fs-md:      clamp(15px, 0.5vw + 13px, 17px);
  --fs-lg:      clamp(16px, 0.8vw + 14px, 19px);
  --fs-xl:      clamp(18px, 1vw + 15px, 22px);
  --fs-2xl:     clamp(22px, 1.5vw + 16px, 30px);
  --fs-3xl:     clamp(26px, 2vw + 18px, 38px);
  --fs-4xl:     clamp(28px, 3vw + 18px, 52px);
  --fs-5xl:     clamp(32px, 4vw + 20px, 64px);
  --fs-display: clamp(36px, 5vw + 20px, 80px);
  --fs-hero:    clamp(40px, 7vw + 20px, 108px);
  --fs-bignum:  clamp(40px, 4.5vw + 16px, 80px);

  /* =====================================================
     📐 FLUID SPACING SCALE
     ===================================================== */
  --sp-2xs: clamp(4px,  0.3vw + 2px,  6px);
  --sp-xs:  clamp(8px,  0.4vw + 6px,  12px);
  --sp-sm:  clamp(12px, 0.6vw + 9px,  18px);
  --sp-md:  clamp(16px, 1vw + 12px,   28px);
  --sp-lg:  clamp(24px, 2vw + 14px,   44px);
  --sp-xl:  clamp(32px, 3.5vw + 16px, 72px);
  --sp-2xl: clamp(48px, 5vw + 24px,   110px);
  --sp-3xl: clamp(60px, 7vw + 30px,   140px);

  /* =====================================================
     📦 CONTAINER · fluid padding + max width
     ===================================================== */
  --container-pad: clamp(16px, 3.5vw, 32px);
  --container-max: 1200px;

  /* line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-base:  1.55;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
  /* IMPORTANT: do NOT use overflow-x:hidden here — it breaks position:sticky
     on descendant sections (the HR lifecycle horizontal pin).
     Use overflow-x:clip on html instead. */
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  letter-spacing:-.025em;
  color:var(--ink);
  font-weight:700;
  line-height:var(--lh-tight);
  margin:0 0 .5em;
}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-4xl)}
h3{font-size:var(--fs-3xl)}
h4{font-size:var(--fs-lg)}
h5{font-size:var(--fs-sm)}
.mint{color:var(--mint)}
.section-title{font-size:var(--fs-5xl);font-weight:800;letter-spacing:-.03em;line-height:var(--lh-tight)}
.section-title.light{color:#fff}
/* Only DIRECT span children become block-level lines.
   Descendant spans (.kt, .kt-word from kinetic typography)
   must keep their natural inline-block flow. */
.section-title > span{display:block}
p{margin:0 0 1em}

/* ============================================================ NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.92)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-mark svg,
.brand-mark img{width:30px;height:30px;display:block}
.brand-word{
  font-family:var(--font-display);
  font-size:18px;color:var(--ink);
  letter-spacing:-.02em;font-weight:800;
}
.brand-sub{color:var(--text-dim);font-weight:500;margin-left:4px}
.nav-links{display:flex;gap:28px}
.nav-links a{
  font-size:14px;color:var(--text);font-weight:500;
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--mint)}
.nav-right{display:flex;align-items:center;gap:14px}
.lang-toggle{
  appearance:none;background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;
  font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:border-color .2s, color .2s;
}
.lang-toggle:hover{border-color:var(--mint);color:var(--mint)}
.lang-toggle .active{color:var(--mint)}
.lang-toggle .lang-sep{color:var(--text-faint)}
html[lang="th"] .lang-toggle .lang-en{color:var(--text-faint)}
html[lang="th"] .lang-toggle .lang-th{color:var(--mint)}
.cta-mini{
  background:var(--ink); color:#fff; font-weight:600; font-size:13px;
  padding:10px 16px; border-radius:999px;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.cta-mini:hover{background:var(--mint);transform:translateY(-1px)}
.cta-mini.deck-launch{
  background:var(--mint);
  box-shadow:0 8px 24px -8px rgba(4,190,140,.5);
}
.cta-mini.deck-launch:hover{background:var(--mint-600);box-shadow:0 14px 32px -10px rgba(4,190,140,.7)}
.cta-mini.analytics-launch{
  background:#fff;color:var(--ink);
  border:1px dashed var(--mint);
}
.cta-mini.analytics-launch:hover{background:var(--mint-tint);color:var(--mint-700);border-color:var(--mint)}
.cta-mini.admin-launch{
  background:var(--mint-tint-2);color:var(--mint-700);
  border:1px solid var(--mint);
}
.cta-mini.admin-launch:hover{background:var(--mint);color:#fff}
@media (max-width:900px){
  .nav-links{display:none}
  .nav{padding:12px 16px}
}

/* ============================================================ BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-xs);
  padding:var(--sp-sm) var(--sp-md);border-radius:999px;
  font-family:var(--font);font-weight:600;font-size:var(--fs-sm);
  cursor:pointer;border:1px solid transparent;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.btn.big{padding:var(--sp-md) var(--sp-lg);font-size:var(--fs-base)}
.btn-primary{background:var(--mint);color:#fff;box-shadow:var(--shadow-glow)}
.btn-primary:hover{background:var(--mint-600);transform:translateY(-2px);box-shadow:0 24px 70px -14px rgba(4,190,140,.6)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--mint);color:var(--mint)}

/* ============================================================ LAYOUT */
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.section{padding:var(--sp-3xl) 0;position:relative;overflow:hidden}
.section-white{background:#fff}
.section-light{background:var(--bg-light)}
.section-dark{background:var(--ink);color:#fff}
.section-head{max-width:780px;margin:0 auto var(--sp-xl);text-align:center}
.kicker{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;font-size:var(--fs-eyebrow);letter-spacing:.22em;
  color:var(--mint);text-transform:uppercase;
  margin-bottom:var(--sp-sm);
  padding:var(--sp-2xs) var(--sp-sm);
  border:1px solid var(--mint);
  border-radius:999px;background:var(--mint-tint);
}
.kicker.mint{background:rgba(4,190,140,.12);border-color:rgba(4,190,140,.5)}
.section-sub{color:var(--text-dim);font-size:var(--fs-lg);max-width:660px;margin:var(--sp-sm) auto 0;line-height:var(--lh-base)}
.section-sub.dim{color:rgba(255,255,255,.65)}

/* ============================================================ HERO */
.hero{
  position:relative;
  min-height:100vh;
  padding:clamp(96px,12vh,160px) 0 var(--sp-xl);
  background:linear-gradient(180deg,#fff 0%,var(--mint-tint-2) 100%);
  overflow:hidden;
  display:flex;align-items:center;
}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-grid{
  position:absolute;inset:-10%;
  background:
    linear-gradient(rgba(4,190,140,.08) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(4,190,140,.08) 1px,transparent 1px) 0 0/56px 56px;
  transform:perspective(1000px) rotateX(60deg) translateY(20%) scale(1.6);
  transform-origin:center 30%;
  mask-image:radial-gradient(ellipse at center 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center 30%,#000 30%,transparent 75%);
  will-change:transform;
}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.7}
.blob-a{width:520px;height:520px;background:radial-gradient(circle,rgba(4,190,140,.6),transparent 70%);top:-10%;right:-10%}
.blob-b{width:420px;height:420px;background:radial-gradient(circle,rgba(4,190,140,.4),transparent 70%);bottom:-15%;left:-10%}
.orbit{position:absolute;inset:0;display:grid;place-items:center}
.orbit .ring{
  position:absolute;border:1px solid rgba(4,190,140,.18);border-radius:50%;
  animation:spin 60s linear infinite;
}
.orbit .r1{width:520px;height:520px}
.orbit .r2{width:760px;height:760px;animation-duration:90s;animation-direction:reverse}
.orbit .r3{width:1040px;height:1040px;animation-duration:120s;border-color:rgba(4,190,140,.10)}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-inner{
  position:relative;z-index:1;
  max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);
  width:100%;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-xs);
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:var(--sp-2xs) var(--sp-sm);border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);
  color:var(--text);
}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(4,190,140,.18)}
.hero-title{
  font-family:var(--font-display);
  font-size:var(--fs-hero);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:.98;
  color:var(--ink);
  margin:var(--sp-md) 0;
}
.hero-title em{font-style:normal;color:var(--mint)}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line > *,
.hero-title .line{will-change:transform}
.hero-lede{
  font-size:var(--fs-lg);
  max-width:620px;color:var(--text-dim);line-height:var(--lh-base);margin-bottom:var(--sp-lg);
}
.hero-cta{display:flex;gap:var(--sp-sm);flex-wrap:wrap;margin-bottom:var(--sp-xl)}
.hero-marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:var(--sp-sm) 0;margin-top:var(--sp-md);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.hero-marquee .track{
  display:flex;gap:var(--sp-md);white-space:nowrap;
  animation:marquee 40s linear infinite;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);
  color:var(--text);letter-spacing:.02em;
}
.hero-marquee .track span{color:var(--text-dim)}
.hero-marquee .track span:not([class]){
  display:inline-flex;align-items:center;gap:8px;
}
@keyframes marquee{to{transform:translateX(-50%)}}
.scroll-hint{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;
  color:var(--text-dim);display:flex;align-items:center;gap:10px;z-index:2;
}
.scroll-hint .arrow{animation:bounce 1.6s ease-in-out infinite;font-size:14px}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ============================================================ PROBLEM */
.problem-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--sp-md);
}
.problem-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--sp-lg) var(--sp-md);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position:relative;overflow:hidden;
}
.problem-card:hover{
  transform:translateY(-4px);
  border-color:var(--mint);
  box-shadow:var(--shadow-lg);
}
.problem-card::before{
  content:'';position:absolute;inset:auto -40% -50% auto;width:200px;height:200px;
  background:radial-gradient(circle,rgba(4,190,140,.12),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.problem-card:hover::before{opacity:1}
.big-num{
  font-family:var(--font-display);
  font-size:var(--fs-bignum);
  font-weight:800;color:var(--ink);
  letter-spacing:-.04em;line-height:.9;margin-bottom:var(--sp-sm);
}
.big-num span{color:var(--mint);font-size:.55em;margin-left:2px}
.problem-card p{color:var(--text-dim);font-size:var(--fs-base);margin:0;line-height:var(--lh-base)}

/* ============================================================ HR LIFECYCLE — horizontal pinned parallax */
.lifecycle-pin{
  height:560vh;
  position:relative;
  background:var(--white);
}
.lifecycle-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#fff,var(--mint-tint-2));
  overflow:hidden;
}
.lifecycle-head{
  padding:var(--sp-lg) var(--container-pad) var(--sp-sm);
  flex-shrink:0;text-align:center;
}
.lifecycle-head .section-title{font-size:var(--fs-4xl)}
.lifecycle-head .section-sub{margin-top:var(--sp-sm);font-size:var(--fs-base)}
.lifecycle-track-wrap{
  flex:1;
  display:flex;align-items:center;
  overflow:hidden;
  position:relative;
}
.lifecycle-track{
  display:flex;
  gap:28px;
  padding:0 8vw;
  will-change:transform;
}
.pillar{
  flex:0 0 clamp(280px, 28vw, 380px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:var(--sp-lg) var(--sp-md);
  box-shadow:var(--shadow-card);
  position:relative;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .3s;
}
.pillar:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--mint);
}
.pillar-no{
  display:inline-block;
  font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;
  color:var(--text-dim);letter-spacing:.2em;margin-bottom:var(--sp-sm);
}
.pillar h3{font-size:var(--fs-2xl);margin-bottom:6px;letter-spacing:-.03em}
.pillar-sub{
  display:block;font-family:var(--font-mono);font-size:var(--fs-mono);
  color:var(--mint);letter-spacing:.05em;margin-bottom:var(--sp-md);
  padding-bottom:var(--sp-sm);border-bottom:1px solid var(--line);
}
.pillar ul{list-style:none;padding:0;margin:0 0 var(--sp-md);display:flex;flex-direction:column;gap:var(--sp-xs)}
.pillar ul li{
  position:relative;padding-left:22px;color:var(--text);font-size:var(--fs-sm);font-weight:500;
}
.pillar ul li::before{
  content:'';position:absolute;left:0;top:7px;width:14px;height:1.5px;background:var(--mint);
}
.pillar-foot{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  color:var(--text-dim);padding-top:var(--sp-sm);border-top:1px dashed var(--line);
}
.pillar-foot b{color:var(--ink);font-size:var(--fs-md)}
.pillar-end{
  background:linear-gradient(135deg,var(--ink) 0%,#1a1a1a 100%);
  color:#fff;
}
.pillar-end h3{color:#fff;font-size:var(--fs-3xl)}
.pillar-end .mint{color:var(--mint)}
.pillar-end p{color:rgba(255,255,255,.7);margin-bottom:var(--sp-md);font-size:var(--fs-base)}
.pillar-end .btn{background:var(--mint);color:#fff}
.pillar-end:hover{border-color:var(--mint)}

.lifecycle-progress{
  flex-shrink:0;padding:24px 32px 32px;
  border-top:1px solid var(--line);background:#fff;
}
.lifecycle-progress-bar{
  height:3px;background:var(--line);border-radius:99px;overflow:hidden;position:relative;
}
.lifecycle-progress-bar::after{
  content:'';position:absolute;left:0;top:0;height:100%;width:var(--p,0%);
  background:var(--mint);border-radius:99px;transition:width .1s linear;
}
.lifecycle-progress-labels{
  display:flex;justify-content:space-between;margin-top:12px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);
}

@media (max-width:760px){
  .lifecycle-pin{height:auto}
  .lifecycle-sticky{position:relative;height:auto;padding-bottom:40px}
  .lifecycle-track-wrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    /* edge fade so user sees there's more content off-screen */
    mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
    position:relative;
  }
  .lifecycle-track{padding:0 20px;scroll-snap-type:x mandatory}
  .pillar{flex-basis:280px;scroll-snap-align:start}
  .lifecycle-progress{display:none}
  /* swipe hint */
  .lifecycle-sticky::after{
    content:'← swipe →';
    display:block;text-align:center;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
    color:var(--mint);font-weight:700;
    padding:14px 0 0;
    animation:swipeNudge 1.6s ease-in-out infinite;
  }
  @keyframes swipeNudge{
    0%,100%{transform:translateX(0);opacity:.6}
    50%   {transform:translateX(6px);opacity:1}
  }
}

/* ============================================================ PLATFORM */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:var(--sp-xl);align-items:center;
}
.platform-copy p{font-size:var(--fs-md);color:var(--text-dim);max-width:540px}
.platform-list{
  list-style:none;padding:0;margin:var(--sp-md) 0 0;
  display:flex;flex-direction:column;gap:var(--sp-sm);
}
.platform-list li{
  display:grid;
  grid-template-columns:14px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px;
  row-gap:4px;
  padding:var(--sp-sm) 0;border-top:1px solid var(--line);
  position:relative;
}
.platform-list li::before{
  content:'';width:10px;height:10px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 0 4px var(--mint-tint);
  margin-top:8px;
  grid-column:1;grid-row:1 / span 2;align-self:start;
}
.platform-list li > b{
  grid-column:2;grid-row:1;
  color:var(--ink);font-size:var(--fs-base);line-height:1.3;
}
.platform-list li > span{
  grid-column:2;grid-row:2;
  color:var(--text-dim);font-size:var(--fs-sm);line-height:var(--lh-base);
}

.autonomy-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:var(--sp-lg);
  box-shadow:var(--shadow-card);
}
.ac-head{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--sp-sm)}
.ac-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--ink)}
.ac-sub{font-size:var(--fs-xs);color:var(--text-faint);font-family:var(--font-mono)}
.autonomy-track{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--bg-light);border:1px solid var(--line);
  border-radius:14px;padding:4px;gap:4px;
}
.auto-btn{
  appearance:none;background:transparent;border:0;
  font-family:var(--font);font-weight:600;font-size:var(--fs-xs);
  color:var(--text-dim);padding:var(--sp-xs) 6px;border-radius:10px;cursor:pointer;
  transition:background .25s, color .25s;
}
.auto-btn.active{background:#fff;color:var(--mint);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.autonomy-explain{
  margin-top:var(--sp-sm);padding:var(--sp-sm);background:var(--mint-tint-2);
  border:1px solid var(--mint-tint);border-radius:12px;
  font-size:var(--fs-xs);color:var(--text);line-height:var(--lh-base);min-height:64px;
}
.ac-divider{height:1px;background:var(--line);margin:24px 0 20px}
.ac-stack{display:flex;flex-direction:column;gap:10px}
.ac-row{
  display:grid;grid-template-columns:12px 1fr auto;gap:12px;
  align-items:center;font-size:14px;
  padding:8px 0;
}
.ac-row b{font-family:var(--font-mono);font-size:11px;color:var(--mint);font-weight:600}
.ac-row .dot{width:8px;height:8px;border-radius:50%}
.dot-mint{background:var(--mint);box-shadow:0 0 0 3px rgba(4,190,140,.15)}
.dot-amber{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.15)}

/* ============================================================ FEATURE LAB */
.lab .section-head{margin-bottom:var(--sp-lg)}
.lab-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:6px;background:#fff;border:1px solid var(--line);
  border-radius:18px;margin-bottom:var(--sp-md);
  position:sticky;top:74px;z-index:30;
  box-shadow:var(--shadow-card);
}
.lab-tab{
  appearance:none;border:0;background:transparent;
  display:flex;align-items:center;gap:8px;
  padding:var(--sp-xs) var(--sp-sm);border-radius:12px;cursor:pointer;
  font-family:var(--font);font-weight:600;font-size:var(--fs-xs);color:var(--text-dim);
  transition:background .2s, color .2s;
  flex:1 1 120px;min-width:0;justify-content:flex-start;
}
.lab-tab:hover{background:var(--mint-tint-2);color:var(--ink)}
.lab-tab.active{background:var(--ink);color:#fff}
.lab-tab.active .lt-no{color:var(--mint)}
.lt-no{font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--text-faint);letter-spacing:.1em}
.lt-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Featured demos — gold star badge */
.lt-star{margin-left:auto;color:#F5B301;font-size:12px;line-height:1;flex:0 0 auto;
  text-shadow:0 1px 2px rgba(245,179,1,.35);transition:transform .2s}
.lab-tab.is-featured:hover .lt-star{transform:scale(1.25) rotate(8deg)}
.lab-tab.is-featured.active .lt-star{color:#FFD24A}
@media (max-width:760px){
  .lab-tabs{position:relative;top:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lab-tab{flex:0 0 auto}
}

.lab-panel{
  display:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--sp-lg);
  grid-template-columns:1fr 1.1fr;gap:var(--sp-lg);align-items:center;
  box-shadow:var(--shadow-card);
}
.lab-panel.active{display:grid}
@media (max-width:980px){.lab-panel{grid-template-columns:1fr}}
.lab-tag{
  display:inline-block;font-family:var(--font-mono);font-size:var(--fs-mono);
  color:var(--mint);letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;background:var(--mint-tint);border-radius:6px;margin-bottom:var(--sp-sm);
}
.lab-meta h3{font-size:var(--fs-3xl);margin-bottom:var(--sp-sm)}
.lab-meta > p{color:var(--text-dim);font-size:var(--fs-base);max-width:480px;line-height:var(--lh-base)}
.lab-meta > p b{color:var(--ink)}
.lab-features{
  list-style:none;padding:0;margin:var(--sp-md) 0;
  display:flex;flex-direction:column;gap:var(--sp-xs);
}
.lab-features li{
  display:flex;gap:10px;align-items:center;
  padding:var(--sp-xs) var(--sp-sm);background:var(--mint-tint-2);
  border-radius:10px;font-size:var(--fs-sm);
}
.lab-features li::before{
  content:'✓';color:var(--mint);font-weight:800;
}
.lab-bench{
  display:flex;gap:var(--sp-sm);margin-top:var(--sp-sm);margin-bottom:var(--sp-md);
}
.lab-bench > div{
  flex:1;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:var(--sp-sm);text-align:center;
}
.lab-bench b{
  display:block;font-family:var(--font-display);font-size:var(--fs-xl);
  color:var(--mint);font-weight:800;letter-spacing:-.02em;
}
.lab-bench span{font-size:var(--fs-eyebrow);color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}

/* visual frame */
.lab-visual{perspective:1400px}
.lab-visual > *{
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg,#fafdfb 0%,#fff 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:rotateY(-3deg) rotateX(2deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.lab-visual > *:hover{transform:rotateY(-1deg) rotateX(1deg) translateY(-4px)}

/* ===== MORNING BRIEF ===== */
.brief{padding:0}
.brief-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 24px;border-bottom:1px solid var(--line);
}
.brief-greet{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink);display:block}
.brief-date{font-size:13px;color:var(--text-dim);font-family:var(--font-mono)}
.brief-tag{
  font-size:11px;font-weight:700;padding:6px 10px;border-radius:6px;
  background:var(--mint-tint);color:var(--mint);letter-spacing:.08em;
}
.brief-summary{
  padding:18px 24px;font-size:15px;color:var(--text);line-height:1.55;
  background:var(--mint-tint-2);border-bottom:1px solid var(--line);
}
.brief-cards{padding:18px 24px;display:flex;flex-direction:column;gap:10px}
.brief-card{
  display:flex;align-items:center;gap:14px;
  padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1) backwards, border-color .2s;
}
.brief-cards .brief-card:nth-child(1){animation:slideIn .5s .05s backwards}
.brief-cards .brief-card:nth-child(2){animation:slideIn .5s .15s backwards}
.brief-cards .brief-card:nth-child(3){animation:slideIn .5s .25s backwards}
.brief-cards .brief-card:nth-child(4){animation:slideIn .5s .35s backwards}
@keyframes slideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.brief-card:hover{border-color:var(--mint)}
.bc-icon{font-size:22px;width:40px;height:40px;display:grid;place-items:center;background:var(--mint-tint);border-radius:10px}
.brief-card > div{flex:1}
.brief-card b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.brief-card span{font-size:12px;color:var(--text-dim)}
.bc-action{
  appearance:none;background:var(--ink);color:#fff;border:0;
  font-family:var(--font);font-size:12px;font-weight:600;
  padding:8px 14px;border-radius:8px;cursor:pointer;
}
.bc-action:hover{background:var(--mint)}
.brief-actions{
  padding:18px 24px;background:var(--bg-light);border-top:1px solid var(--line);
}
.brief-actions b{display:block;color:var(--ink);font-size:13px;margin-bottom:10px;font-family:var(--font-display)}
.brief-actions ol{margin:0;padding:0 0 0 20px;color:var(--text);font-size:13px}
.brief-actions ol li{padding:4px 0}
.brief-actions ol li i{font-style:normal;color:var(--mint);font-weight:600;margin-left:4px}

/* ===== WORKFORCE DEVICE ===== */
.device{display:block}
.device-top{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);
}
.dt-dot{width:10px;height:10px;border-radius:50%}
.dt-dot.r{background:#ff5f57}.dt-dot.y{background:#febc2e}.dt-dot.g{background:#28c840}
.dt-url{margin-left:14px;font-size:11px;color:var(--text-dim);font-family:var(--font-mono);background:var(--bg-light);padding:4px 10px;border-radius:6px;flex:1;text-align:center}
.device-screen.wf{display:flex;min-height:420px;background:#fff}
.wf-side{
  width:170px;background:var(--bg-light);
  padding:18px 14px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;
}
.wf-side b{font-family:var(--font-display);font-size:13px;color:var(--ink);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.wf-nav{padding:8px 10px;border-radius:8px;font-size:12px;color:var(--text-dim);font-weight:500}
.wf-nav.active{background:var(--mint-tint);color:var(--mint);font-weight:600}
.wf-main{flex:1;padding:18px;display:flex;flex-direction:column;gap:14px}
.wf-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wf-kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}
.wf-kpi span{display:block;font-size:10px;text-transform:uppercase;color:var(--text-dim);letter-spacing:.1em}
.wf-kpi b{display:block;font-family:var(--font-display);font-size:20px;color:var(--ink);margin-top:2px}
.wf-kpi i{font-style:normal;font-size:11px;font-weight:600}
.wf-kpi i.up{color:var(--mint)}.wf-kpi i.down{color:var(--mint)}.wf-kpi i.alert{color:#dc2626}
.wf-chart{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;flex:1;display:flex;flex-direction:column;gap:8px}
.wf-bars{display:flex;align-items:flex-end;gap:6px;height:80px}
.wf-bars span{flex:1;background:linear-gradient(180deg,var(--mint),var(--mint-700));border-radius:4px 4px 0 0;height:var(--h);animation:barGrow 1s cubic-bezier(.2,.7,.2,1) backwards}
.wf-bars span:nth-child(1){animation-delay:.05s}
.wf-bars span:nth-child(2){animation-delay:.10s}
.wf-bars span:nth-child(3){animation-delay:.15s}
.wf-bars span:nth-child(4){animation-delay:.20s}
.wf-bars span:nth-child(5){animation-delay:.25s}
.wf-bars span:nth-child(6){animation-delay:.30s}
.wf-bars span:nth-child(7){animation-delay:.35s}
.wf-bars span:nth-child(8){animation-delay:.40s}
.wf-bars span:nth-child(9){animation-delay:.45s}
.wf-bars span:nth-child(10){animation-delay:.50s}
.wf-bars span:nth-child(11){animation-delay:.55s}
.wf-bars span:nth-child(12){animation-delay:.60s}
@keyframes barGrow{from{height:0}to{height:var(--h)}}
.wf-label{font-size:11px;color:var(--text-dim);text-align:center}
.wf-cta{text-align:center;font-size:12px;font-weight:600;padding:10px;background:var(--mint-tint);border-radius:8px;color:var(--mint)}

/* Workforce + Wellbeing · mobile fits */
@media (max-width:560px){
  .device-screen.wf{flex-direction:column}
  .wf-side{
    width:100%;flex-direction:row;flex-wrap:wrap;gap:4px;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .wf-side b{flex-basis:100%}
  .wf-nav{padding:6px 10px;font-size:11px}
  .wf-kpis{grid-template-columns:repeat(2,1fr)}
  .wm-grid{grid-template-columns:repeat(3,1fr) !important}
  .wm-grid .wt{font-size:10px}
  .wm-grid .wt b{font-size:14px}
}

/* ===== CV MATCHER ===== */
.cv-card{padding:24px}
.cv-jd{
  background:var(--bg-light);border:1px solid var(--line);
  border-radius:10px;padding:14px;font-size:13px;color:var(--text);
  display:flex;gap:10px;align-items:center;margin-bottom:18px;
}
.cv-jd b{font-family:var(--font-mono);background:var(--ink);color:#fff;padding:3px 8px;border-radius:6px;font-size:11px}
.cv-list{display:flex;flex-direction:column;gap:8px}
.cv-row{
  display:grid;grid-template-columns:130px 1fr 40px 70px;gap:12px;align-items:center;
  padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;
  animation:slideIn .5s backwards;
}
.cv-row:nth-child(1){animation-delay:.05s}
.cv-row:nth-child(2){animation-delay:.10s}
.cv-row:nth-child(3){animation-delay:.15s}
.cv-row:nth-child(4){animation-delay:.20s}
.cv-row:nth-child(5){animation-delay:.25s}
.cv-row:nth-child(6){animation-delay:.30s}
.cv-name{font-weight:600;font-size:13px;color:var(--ink)}
.cv-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.cv-bar i{display:block;height:100%;width:calc(var(--score)*1%);background:linear-gradient(90deg,var(--mint),var(--mint-700));border-radius:3px;animation:barFill 1s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes barFill{from{width:0}}
.cv-score{font-family:var(--font-display);font-size:18px;color:var(--ink);font-weight:800;text-align:right}
.cv-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:4px;background:var(--mint-tint);color:var(--mint);font-weight:600;text-align:center}
.cv-tag.low{background:#fef2f2;color:#dc2626}
.cv-evidence{
  margin-top:18px;padding:14px;background:var(--mint-tint-2);
  border:1px solid var(--mint-tint);border-radius:10px;
}
.cv-evidence b{display:block;font-family:var(--font-mono);font-size:11px;color:var(--mint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.cv-evidence p{margin:0;font-size:13px;color:var(--text);font-style:italic;line-height:1.5}
.cv-evidence em{background:var(--mint-tint);padding:1px 4px;border-radius:3px;font-style:normal;font-weight:600;color:var(--mint-700)}

/* ===== ONBOARDING ===== */
.onb-toggle{display:flex;gap:6px;background:var(--bg-light);border:1px solid var(--line);border-radius:12px;padding:4px;margin-top:12px;max-width:300px}
.onb-toggle button{
  flex:1;appearance:none;background:transparent;border:0;
  font-family:var(--font);font-weight:600;font-size:13px;color:var(--text-dim);
  padding:8px;border-radius:8px;cursor:pointer;
}
.onb-toggle button.active{background:#fff;color:var(--mint);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.onb-card{padding:0}
.onb-head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}
.avatar{
  width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:700;font-family:var(--font-display);font-size:16px;
}
.avatar.mint{background:var(--mint)}
.avatar.sm{width:28px;height:28px;font-size:11px}
.onb-head b{display:block;color:var(--ink);font-size:15px}
.onb-head span{font-size:12px;color:var(--text-dim)}
.onb-stage{
  margin-left:auto;font-family:var(--font-mono);font-size:11px;
  background:var(--mint-tint);color:var(--mint);padding:6px 10px;border-radius:6px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.onb-list{padding:18px 24px;display:flex;flex-direction:column;gap:10px;min-height:340px}
.onb-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;
  animation:slideIn .4s backwards;
}
.onb-item .check{
  width:22px;height:22px;border-radius:50%;background:var(--mint-tint);
  color:var(--mint);display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0;
}
.onb-item b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.onb-item span{font-size:12px;color:var(--text-dim)}
.onb-item .auto{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;
  background:var(--ink);color:#fff;padding:3px 6px;border-radius:4px;
}

/* ===== IDP ===== */
.idp-switch{display:flex;gap:6px;background:var(--bg-light);border:1px solid var(--line);border-radius:12px;padding:4px;margin-top:12px;max-width:360px}
.idp-switch button{
  flex:1;appearance:none;background:transparent;border:0;
  font-family:var(--font);font-weight:600;font-size:13px;color:var(--text-dim);
  padding:8px;border-radius:8px;cursor:pointer;
}
.idp-switch button.active{background:#fff;color:var(--mint);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.idp-card{padding:0;min-height:400px;display:flex;flex-direction:column}
.idp-h{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}
.idp-h b{display:block;color:var(--ink);font-size:15px}
.idp-h span{font-size:12px;color:var(--text-dim)}
.idp-h .ai{margin-left:auto;font-family:var(--font-mono);font-size:11px;background:var(--mint-tint);color:var(--mint);padding:6px 10px;border-radius:6px;letter-spacing:.1em;font-weight:700}
.idp-body{padding:18px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.idp-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-dim);padding:8px 0;border-bottom:1px dashed var(--line)}
.idp-row b{color:var(--ink);font-weight:600;max-width:60%;text-align:right}
.idp-plan{
  margin-top:8px;padding:14px;background:var(--mint-tint-2);
  border:1px solid var(--mint-tint);border-radius:10px;
}
.idp-plan b{display:block;font-family:var(--font-mono);font-size:11px;color:var(--mint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.idp-step{padding:6px 0;color:var(--text);font-size:13px;display:flex;align-items:flex-start;gap:8px}
.idp-step::before{content:'▸';color:var(--mint);font-weight:700}

/* ===== COE PHONE ===== */
.phone{
  max-width:340px;margin:0 auto;
  background:#fff;
  border-radius:36px;
  border:8px solid var(--ink);
  padding:18px 0 12px;
  position:relative;
  transform:rotateY(-3deg) rotateX(2deg);
}
.phone-notch{width:80px;height:5px;background:var(--ink-2);border-radius:3px;margin:0 auto 14px}
.phone-screen{padding:0 14px;min-height:380px;display:flex;flex-direction:column;gap:10px}
.bubble{padding:10px 14px;border-radius:16px;max-width:88%;font-size:13.5px;line-height:1.45;animation:slideIn .35s backwards}
.bubble.in{align-self:flex-start;background:var(--bg-light);color:var(--ink);border-bottom-left-radius:4px}
.bubble.out{align-self:flex-end;background:var(--mint);color:#fff;border-bottom-right-radius:4px}
.bubble.out b{color:#fff}
.cite{display:block;font-size:10px;opacity:.85;margin-top:6px;padding:4px 8px;background:rgba(0,0,0,.2);border-radius:6px;color:#fff}
.bubble.in .cite{background:rgba(4,190,140,.1);color:var(--mint-700)}
.phone-input{
  display:flex;align-items:center;justify-content:space-between;
  margin:8px 14px 0;padding:10px 14px;
  background:var(--bg-light);border-radius:18px;
  font-size:13px;color:var(--text-faint);
}
.phone-input b{background:var(--mint);color:#fff;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.coe-chips{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.coe-chips button{
  appearance:none;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;cursor:pointer;
  font-family:var(--font);font-size:13px;color:var(--text);
  transition:border-color .2s, background .2s;
}
.coe-chips button:hover{border-color:var(--mint);background:var(--mint-tint-2)}

/* ===== PERFORMANCE ===== */
.perf-card{padding:0}
.perf-head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}
.perf-head b{display:block;color:var(--ink);font-size:15px}
.perf-head span{font-size:12px;color:var(--text-dim)}
.perf-tag{margin-left:auto;font-family:var(--font-mono);font-size:11px;background:var(--mint-tint);color:var(--mint);padding:6px 10px;border-radius:6px;letter-spacing:.1em;font-weight:700}
.perf-rating{padding:18px 24px;border-bottom:1px solid var(--line)}
.perf-rating > span{display:block;font-size:11px;text-transform:uppercase;color:var(--text-dim);letter-spacing:.1em;margin-bottom:8px}
.rating-bar{height:8px;background:var(--line);border-radius:4px;position:relative;overflow:visible}
.rb-fill{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--mint-700));border-radius:4px;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.rating-bar i{
  position:absolute;right:0;top:-20px;font-style:normal;
  font-family:var(--font-mono);font-size:11px;color:var(--mint);font-weight:600;
  white-space:nowrap;
}
/* room for the AI-suggestion label that sits just above the bar */
.perf-rating{position:relative}
.perf-rating > span{padding-right:180px}
.perf-slider{margin-top:14px !important}
.perf-text{
  padding:18px 24px;color:var(--text);font-size:14px;line-height:1.6;min-height:160px;
  font-family:var(--font);white-space:pre-wrap;
}
.perf-text.empty{color:var(--text-faint);font-style:italic;display:flex;align-items:center;justify-content:center;text-align:center}
.perf-foot{
  display:flex;gap:14px;padding:14px 24px;border-top:1px solid var(--line);
  background:var(--bg-light);font-size:12px;color:var(--text-dim);
}
.perf-foot span{font-weight:500}

/* ===== OFFBOARDING ===== */
.off-card{padding:0}
.off-head{padding:20px 24px;border-bottom:1px solid var(--line)}
.off-head span{display:block;font-size:11px;text-transform:uppercase;color:var(--text-dim);letter-spacing:.1em;margin-bottom:6px}
.off-head b{font-family:var(--font-display);font-size:22px;color:var(--ink)}
.off-list{padding:18px 24px;display:flex;flex-direction:column;gap:10px}
.off-row{
  display:grid;grid-template-columns:28px 1fr 1fr 40px;gap:12px;align-items:center;
  padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;
  animation:slideIn .4s backwards;
}
.off-row:nth-child(1){animation-delay:.05s}
.off-row:nth-child(2){animation-delay:.10s}
.off-row:nth-child(3){animation-delay:.15s}
.off-row:nth-child(4){animation-delay:.20s}
.off-name{font-weight:600;font-size:13px;color:var(--ink)}
.risk-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.risk-bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#f59e0b,#dc2626);border-radius:3px;animation:barFill 1s cubic-bezier(.2,.7,.2,1) backwards}
.off-row b{font-family:var(--font-display);font-size:14px;color:var(--ink);text-align:right}
.off-row.sel{border-color:var(--mint);background:var(--mint-tint-2)}
.off-row{transition:background .2s, border-color .2s}
.off-actions{padding:18px 24px;background:var(--mint-tint-2);border-top:1px solid var(--line)}
.off-actions b{display:block;font-family:var(--font-display);font-size:14px;color:var(--ink);margin-bottom:10px}
.off-actions ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.off-actions ul li{font-size:13px;color:var(--text)}

/* ============================================================ PAY EQUITY */
.pay-switch,.coach-switch,.well-switch,.pdpa-switch,.off-switch{
  display:flex;gap:6px;background:var(--bg-light);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin-top:12px;max-width:380px;
}
.pay-switch button,.coach-switch button,.well-switch button,.pdpa-switch button,.off-switch button{
  flex:1;appearance:none;background:transparent;border:0;
  font-family:var(--font);font-weight:600;font-size:12.5px;color:var(--text-dim);
  padding:8px 6px;border-radius:8px;cursor:pointer;white-space:nowrap;
  transition:background .25s, color .25s;
}
.pay-switch button.active,.coach-switch button.active,
.well-switch button.active,.pdpa-switch button.active,.off-switch button.active{
  background:#fff;color:var(--mint);box-shadow:0 1px 3px rgba(0,0,0,.06);
}

.pay-card{padding:0;min-height:420px;display:flex;flex-direction:column}
.pay-h{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.pay-h b{display:block;color:var(--ink);font-size:16px}
.pay-h span{font-size:12px;color:var(--text-dim)}
.pay-flag{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;
  background:#fef2f2;color:#dc2626;padding:6px 10px;border-radius:6px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;
}
.pay-flag.ok{background:var(--mint-tint);color:var(--mint)}
.pay-band-wrap{padding:24px;flex:1;display:flex;flex-direction:column;gap:18px}
.pay-band-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-dim)}
.pay-band-labels b{color:var(--ink);font-family:var(--font-display);font-size:13px}
.pay-band{
  height:14px;
  background:linear-gradient(90deg,#fee2e2 0% 10%, var(--mint-tint) 10% 30%, var(--mint) 30% 70%, var(--mint-tint) 70% 90%, #fef3c7 90% 100%);
  border-radius:7px;position:relative;
}
.pay-dot{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--ink);border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  animation:popIn .5s cubic-bezier(.2,.7,.2,1) backwards;
}
.pay-dot.warn{background:#dc2626}
.pay-dot.ok{background:var(--mint)}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-50%) scale(0)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.pay-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.pay-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
.pay-stat b{display:block;font-family:var(--font-display);font-size:20px;color:var(--ink)}
.pay-stat span{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
.pay-stat.warn b{color:#dc2626}
.pay-rationale{
  margin:0 24px 24px;padding:14px;
  background:var(--mint-tint-2);border:1px solid var(--mint-tint);border-radius:10px;
  font-size:13px;color:var(--text);line-height:1.5;
}
.pay-rationale b{display:block;font-family:var(--font-mono);font-size:11px;color:var(--mint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}

/* ============================================================ MANAGER COACH */
.coach-card{padding:0;min-height:420px}
.coach-h{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}
.coach-h b{display:block;color:var(--ink);font-size:15px}
.coach-h span{font-size:12px;color:var(--text-dim)}
.coach-h .meet{
  margin-left:auto;font-family:var(--font-mono);font-size:11px;
  background:var(--mint-tint);color:var(--mint);padding:6px 10px;border-radius:6px;
}
.coach-body{padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.coach-block{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;
  animation:slideIn .4s backwards;
}
.coach-block:nth-child(1){animation-delay:.05s}
.coach-block:nth-child(2){animation-delay:.12s}
.coach-block:nth-child(3){animation-delay:.20s}
.coach-block:nth-child(4){animation-delay:.28s}
.coach-block > b{
  display:block;font-family:var(--font-mono);font-size:11px;
  color:var(--mint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;
}
.coach-block ul{margin:0;padding:0 0 0 18px;color:var(--text);font-size:13px;line-height:1.55}
.coach-block ul li{margin-bottom:4px}
.coach-signal{display:flex;gap:14px;flex-wrap:wrap}
.coach-signal > span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text);font-weight:500;
  padding:6px 10px;background:var(--bg-light);border-radius:6px;
}
.coach-signal .up{color:var(--mint)}
.coach-signal .down{color:#dc2626}
.coach-feedback{font-style:italic;color:var(--text);font-size:13px;line-height:1.6}
.coach-feedback::before{content:'"';color:var(--mint);font-size:24px;line-height:0;vertical-align:-6px;margin-right:4px}
.coach-risk{
  background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:12px;
  font-size:13px;color:#9a3412;
}
.coach-risk b{color:#9a3412}

/* ============================================================ WELLBEING SENTINEL */
.well-card{padding:0;min-height:420px}
.well-h{padding:20px 24px;border-bottom:1px solid var(--line)}
.well-h span{display:block;font-size:11px;text-transform:uppercase;color:var(--text-dim);letter-spacing:.1em;margin-bottom:4px}
.well-h b{font-family:var(--font-display);font-size:18px;color:var(--ink)}
.well-grid{padding:20px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.well-tile{
  aspect-ratio:1;border-radius:10px;padding:10px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--mint-tint);color:var(--mint-700);
  font-family:var(--font-display);font-weight:700;
  cursor:pointer;transition:transform .2s;
  animation:popIn .4s cubic-bezier(.2,.7,.2,1) backwards;
}
.well-tile:hover{transform:translateY(-2px)}
.well-tile span{font-size:11px;font-family:var(--font);opacity:.85;font-weight:500}
.well-tile b{font-size:18px}
.well-tile.warn{background:#fef3c7;color:#92400e}
.well-tile.danger{background:#fee2e2;color:#991b1b}
.well-tile.ok{background:var(--mint-tint);color:var(--mint-700)}
.well-legend{display:flex;gap:14px;padding:10px 24px 18px;font-size:11px;color:var(--text-dim);border-top:1px dashed var(--line);margin-top:6px}
.well-legend span{display:inline-flex;align-items:center;gap:6px}
.well-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.well-legend i.ok{background:var(--mint)}
.well-legend i.warn{background:#f59e0b}
.well-legend i.danger{background:#dc2626}

.well-detail{padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.well-detail-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.well-detail-head b{display:block;color:var(--ink);font-size:15px}
.well-detail-head span{font-size:12px;color:var(--text-dim)}
.well-score{
  margin-left:auto;width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:22px;
}
.well-score.danger{background:#dc2626}
.well-score.warn{background:#f59e0b}
.well-sig{display:flex;flex-direction:column;gap:10px}
.well-sig-row{
  display:grid;grid-template-columns:170px 1fr 64px;gap:14px;align-items:center;
  padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;
}
.well-sig-row > span:first-child{font-size:13px;color:var(--text);font-weight:500}
.well-sig-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.well-sig-bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--mint),var(--mint-700));border-radius:3px;animation:barFill .8s cubic-bezier(.2,.7,.2,1) backwards}
.well-sig-bar.warn i{background:linear-gradient(90deg,#f59e0b,#dc2626)}
.well-sig-row > b{font-family:var(--font-mono);font-size:12px;color:var(--ink);text-align:right;font-weight:600}
.well-action{
  padding:14px;background:var(--mint-tint-2);border:1px solid var(--mint-tint);
  border-radius:10px;font-size:13px;color:var(--text);line-height:1.5;
}
.well-action b{display:block;font-family:var(--font-mono);font-size:11px;color:var(--mint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}

/* ============================================================ PDPA GUARDIAN */
.pdpa-card{padding:0;min-height:420px}
.pdpa-h{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.pdpa-h b{display:block;color:var(--ink);font-size:15px}
.pdpa-h span{font-size:12px;color:var(--text-dim)}
.pdpa-h .seal{
  margin-left:auto;font-family:var(--font-mono);font-size:11px;
  background:var(--mint-tint);color:var(--mint);padding:6px 10px;border-radius:6px;
  letter-spacing:.08em;font-weight:700;
}

/* CV redaction view */
.pdpa-cv{padding:20px 24px;font-family:var(--font);font-size:13px;color:var(--text);line-height:1.7}
.pdpa-cv h4{font-family:var(--font-display);font-size:15px;color:var(--ink);margin:0 0 4px}
.pdpa-cv .sub{color:var(--text-dim);font-size:12px;margin-bottom:14px;display:block}
.pdpa-cv .row{margin:6px 0}
.pdpa-cv .row b{color:var(--ink);width:120px;display:inline-block;font-weight:500}
.redact{
  background:var(--ink);color:transparent;padding:0 6px;border-radius:3px;
  user-select:none;letter-spacing:.2em;font-family:var(--font-mono);
  position:relative;
}
.redact::after{
  content:attr(data-tag);position:absolute;top:-18px;right:0;
  font-size:9px;color:var(--mint);font-family:var(--font-mono);
  background:var(--mint-tint);padding:2px 6px;border-radius:4px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600;
}
.pdpa-summary{
  margin:14px 24px 20px;padding:12px;background:var(--mint-tint-2);
  border:1px solid var(--mint-tint);border-radius:10px;
  font-size:12.5px;color:var(--text);
}
.pdpa-summary b{color:var(--mint);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:6px}

/* Consent log */
.pdpa-log{padding:18px 24px;display:flex;flex-direction:column;gap:8px}
.pdpa-log-row{
  display:grid;grid-template-columns:90px 1fr auto;gap:12px;align-items:center;
  padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;
  font-size:12.5px;animation:slideIn .35s backwards;
}
.pdpa-log-row:nth-child(1){animation-delay:.05s}
.pdpa-log-row:nth-child(2){animation-delay:.10s}
.pdpa-log-row:nth-child(3){animation-delay:.15s}
.pdpa-log-row:nth-child(4){animation-delay:.20s}
.pdpa-log-row:nth-child(5){animation-delay:.25s}
.pdpa-log-row > span:first-child{font-family:var(--font-mono);color:var(--text-dim);font-size:11px}
.pdpa-log-row .act{color:var(--ink);font-weight:500}
.pdpa-log-row .act i{font-style:normal;color:var(--text-dim);font-weight:400}
.pdpa-tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  padding:4px 8px;border-radius:5px;font-weight:700;text-transform:uppercase;
}
.pdpa-tag.ok{background:var(--mint-tint);color:var(--mint)}
.pdpa-tag.warn{background:#fef3c7;color:#92400e}

/* Deadlines */
.pdpa-deadlines{padding:18px 24px;display:flex;flex-direction:column;gap:10px}
.deadline-row{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:14px;background:#fff;border:1px solid var(--line);border-radius:10px;
  animation:slideIn .4s backwards;
}
.deadline-row:nth-child(1){animation-delay:.05s}
.deadline-row:nth-child(2){animation-delay:.12s}
.deadline-row:nth-child(3){animation-delay:.20s}
.deadline-row:nth-child(4){animation-delay:.28s}
.deadline-row > div b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.deadline-row > div span{color:var(--text-dim);font-size:12px}
.deadline-countdown{
  font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--mint);
}
.deadline-countdown.warn{color:#f59e0b}
.deadline-countdown.danger{color:#dc2626}
.deadline-pill{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  padding:4px 8px;border-radius:5px;font-weight:700;text-transform:uppercase;
  background:var(--bg-light);color:var(--text-dim);
}

/* ============================================================ DATA FABRIC */
.fabric{padding:160px 0}
.fabric .section-head{margin-bottom:60px}
.fabric .kicker{background:rgba(4,190,140,.12);border-color:rgba(4,190,140,.4);color:var(--mint)}
.fabric-stage{
  position:relative;
  height:560px;
  display:grid;place-items:center;
}
.fabric-orbit,.fabric-orbit.r2{
  position:absolute;
  width:440px;height:440px;border:1px dashed rgba(255,255,255,.15);
  border-radius:50%;
  animation:spin 50s linear infinite;
}
.fabric-orbit.r2{width:680px;height:680px;animation-duration:80s;animation-direction:reverse}
.fabric-core{
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--mint),var(--mint-700));
  display:grid;place-items:center;text-align:center;color:#fff;
  box-shadow:0 0 80px rgba(4,190,140,.5),inset 0 0 60px rgba(255,255,255,.15);
  z-index:2;
}
.fabric-core b{font-family:var(--font-display);font-size:18px;display:block;letter-spacing:-.02em}
.fabric-core span{font-size:12px;opacity:.85;font-family:var(--font-mono);letter-spacing:.05em}
.chip{
  position:absolute;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);
  padding:10px 16px;border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:13px;color:#fff;
  white-space:nowrap;
  animation:floatY 6s ease-in-out infinite;
}
.chip:nth-child(odd){animation-direction:reverse}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ch1{top:5%;left:18%;animation-delay:0s}
.ch2{top:8%;right:20%;animation-delay:-.8s}
.ch3{top:42%;left:5%;animation-delay:-1.6s}
.ch4{top:42%;right:5%;animation-delay:-2.4s}
.ch5{bottom:8%;left:24%;animation-delay:-3.2s}
.ch6{bottom:10%;right:22%;animation-delay:-4s}
.ch7{top:22%;left:8%;animation-delay:-1.2s}
.ch8{bottom:22%;right:8%;animation-delay:-2.8s}

/* ============================================================ ROI */
.roi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--sp-md);
}
.roi-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--sp-lg) var(--sp-md);position:relative;overflow:hidden;
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.roi-card:hover{transform:translateY(-4px);border-color:var(--mint);box-shadow:var(--shadow-lg)}
.roi-card.highlight{background:var(--ink);color:#fff;border-color:var(--ink)}
.roi-card.highlight .roi-label{color:rgba(255,255,255,.7)}
.roi-card.highlight .roi-big{color:#fff}
.roi-card.highlight .roi-unit{color:var(--mint)}
.roi-card.highlight .roi-foot{color:rgba(255,255,255,.6)}
.roi-label{display:block;font-size:var(--fs-mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--sp-sm);font-family:var(--font-mono)}
.roi-big{font-family:var(--font-display);font-weight:800;font-size:var(--fs-bignum);line-height:.9;color:var(--ink);letter-spacing:-.04em;display:inline-block}
.roi-unit{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--mint);margin-left:6px;vertical-align:top;line-height:1.6}
.roi-foot{display:block;margin-top:var(--sp-sm);font-size:var(--fs-xs);color:var(--text-dim)}

/* ============================================================ TRUST */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:var(--sp-xl);align-items:center;
}
.trust h3.section-title{font-size:var(--fs-3xl)}
.trust p{color:var(--text-dim);font-size:var(--fs-md);line-height:var(--lh-base)}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badges .badge{
  font-size:var(--fs-sm);font-weight:600;padding:var(--sp-xs) var(--sp-sm);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  color:var(--ink);
}

/* ============================================================ CTA */
.cta-card{
  background:linear-gradient(135deg,var(--ink) 0%,#1a1a1a 100%);
  border-radius:var(--radius-xl);padding:var(--sp-2xl) var(--sp-lg);text-align:center;
  position:relative;overflow:hidden;color:#fff;
}
.cta-card::before{
  content:'';position:absolute;inset:auto -30% -50% auto;width:520px;height:520px;
  background:radial-gradient(circle,rgba(4,190,140,.4),transparent 70%);
}
.cta-card .kicker{background:rgba(4,190,140,.15);border-color:rgba(4,190,140,.4);color:var(--mint);position:relative}
.cta-card h2{color:#fff;position:relative}
.cta-card h2 .mint{color:var(--mint)}
.cta-card p{color:rgba(255,255,255,.7);max-width:520px;margin:var(--sp-sm) auto var(--sp-md);font-size:var(--fs-md);position:relative;line-height:var(--lh-base)}
.cta-row{display:flex;gap:var(--sp-sm);justify-content:center;flex-wrap:wrap;position:relative}
.cta-card .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.cta-card .btn-ghost:hover{border-color:var(--mint);color:var(--mint)}

/* ============================================================ FOOTER */
.foot{padding:var(--sp-xl) 0 var(--sp-md);border-top:1px solid var(--line);background:#fff}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:var(--sp-lg);
}
.foot-grid > div:first-child{grid-column:span 2}
@media (max-width:520px){.foot-grid > div:first-child{grid-column:span 1}}
.foot h5{color:var(--ink);font-size:var(--fs-eyebrow);margin:0 0 var(--sp-sm);text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-display)}
.foot a{display:block;color:var(--text-dim);font-size:var(--fs-sm);margin-bottom:6px;transition:color .2s}
.foot a:hover{color:var(--mint)}
.foot-blurb{color:var(--text-dim);font-size:var(--fs-sm);max-width:300px;line-height:var(--lh-base)}
.brand.small{margin-bottom:var(--sp-sm)}
.foot-bottom{text-align:center;color:var(--text-dim);font-size:12px;padding-top:30px;margin-top:30px;border-top:1px solid var(--line)}

/* ============================================================ REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============================================================
   🎬 CINEMATIC LAYER · site-wide hooks
   ============================================================ */

/* ===== Scroll progress bar (sticks above nav) ===== */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:101;
  background:transparent;pointer-events:none;
}
.scroll-progress::before{
  content:'';display:block;height:100%;width:var(--p,0%);
  background:linear-gradient(90deg,var(--mint),#9eedd2,var(--mint));
  background-size:200% 100%;
  animation:progressShimmer 3s linear infinite;
  transition:width .15s linear;
}
@keyframes progressShimmer{to{background-position:200% 0}}

/* ===== Kinetic typography (hero + section titles) ===== */
.kt{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.0;padding:.04em 0}
.kt-word{
  display:inline-block;
  transform:translateY(110%) rotate(4deg);
  will-change:transform;
}
.kt-active .kt-word{
  animation:kineticIn 1s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay:calc(var(--i,0) * 65ms + 200ms);
}
@keyframes kineticIn{
  0%  {transform:translateY(110%) rotate(4deg)}
  60% {transform:translateY(-5%) rotate(-1deg)}
  100%{transform:translateY(0) rotate(0)}
}
.hero-title.kt-active .kt-word{
  animation-duration:1.2s;
  animation-delay:calc(var(--i,0) * 85ms + 300ms);
}
.kt-word em{font-style:normal;color:var(--mint)}

/* ===== Mint sweep (Lab tab change) ===== */
.sweep-overlay{
  position:fixed;inset:0;z-index:99;pointer-events:none;
  background:linear-gradient(110deg,
    transparent 0%,
    transparent 35%,
    rgba(4,190,140,.18) 48%,
    var(--mint) 50%,
    rgba(4,190,140,.18) 52%,
    transparent 65%,
    transparent 100%);
  background-size:300% 100%;
  background-position:200% 0;
  animation:sweepOverlay .9s cubic-bezier(.65,0,.35,1) forwards;
  opacity:.55;
}
@keyframes sweepOverlay{
  0%{background-position:200% 0;opacity:.55}
  100%{background-position:-200% 0;opacity:0}
}

/* ===== Cursor dot ===== */
.cursor-dot{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--mint);pointer-events:none;z-index:1000;
  transform:translate(-50%,-50%);opacity:0;
  transition:opacity .3s ease, width .25s, height .25s, background .25s, border-color .25s;
  mix-blend-mode:difference;will-change:transform;
}
@media (hover:hover){
  body.cursor-on .cursor-dot{opacity:.7}
}
.cursor-dot.hover{width:54px;height:54px;background:transparent;border:2px solid var(--mint);opacity:1;mix-blend-mode:normal}

/* ===== Magnetic CTAs ===== */
.btn,.cta-mini,.lab-tab{
  will-change:transform;
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
}

/* ===== Glow-pulse ===== */
.glow-pulse{
  animation:glowPulse 2.6s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 16px 48px -12px rgba(4,190,140,.45),0 0 0 0 rgba(4,190,140,0)}
  50%    {box-shadow:0 20px 60px -8px rgba(4,190,140,.7),0 0 0 14px rgba(4,190,140,0)}
}

/* ===== Eyebrow dot pulse ===== */
.eyebrow-dot{animation:dotPulse 1.6s ease-in-out infinite}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(4,190,140,.18)}
  50%   {box-shadow:0 0 0 8px rgba(4,190,140,0)}
}

/* ===== Elastic landing for stat numbers ===== */
.elastic-land{
  animation:elasticLand 1.2s cubic-bezier(.2,.9,.3,1) backwards;
}
@keyframes elasticLand{
  0%  {opacity:0;transform:translateY(28px) scale(.85)}
  55% {opacity:1;transform:translateY(-6px) scale(1.06)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* ===== Lab tab flash ===== */
.lab-tab.flash{
  animation:tabFlash .8s ease-out;
}
@keyframes tabFlash{
  0%  {background:var(--mint);color:#fff;transform:scale(1.04)}
  100%{background:var(--ink);color:#fff;transform:scale(1)}
}

/* ===== Lab panel entry ===== */
.lab-panel.active > *{
  animation:panelIn .65s cubic-bezier(.2,.9,.3,1) backwards;
}
.lab-panel.active > .lab-meta{animation-delay:.10s}
.lab-panel.active > .lab-visual{animation-delay:.22s}
@keyframes panelIn{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:translateY(0)}
}

/* ===== Hero shapes prepped for cursor parallax (set inline transform via JS) ===== */
.hero-bg .blob,.hero-bg .orbit{will-change:transform}

/* ===== Cards subtle 3D ===== */
.problem-card,.roi-card,.pillar,.step-card{transform-style:preserve-3d}

/* ===== Hero primary CTA pulse + final CTA ===== */
.hero-cta .btn-primary{animation:glowPulse 2.8s ease-in-out infinite}
.cta-card .btn-primary.big{animation:glowPulse 2.6s ease-in-out infinite}

/* ===== Section title kinetic prepped lines ===== */
.section-title.kt-active .kt-word{
  animation-duration:.9s;
  animation-delay:calc(var(--i,0) * 60ms + 100ms);
}

/* ===== Marquee strip below hero (added by JS) ===== */
.hero-marquee{
  margin-top:32px;padding:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.hero-marquee .track{
  display:flex;gap:36px;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  color:var(--text-dim);letter-spacing:.02em;
  animation:marqueeFlow 35s linear infinite;
}
.hero-marquee .track span.dot{color:var(--mint)}
@keyframes marqueeFlow{to{transform:translateX(-50%)}}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .kt-word{transform:none !important;animation:none !important}
  .glow-pulse,.eyebrow-dot,.hero-marquee .track{animation:none !important}
}

/* ============================================================
   🛠 SHARED INTERACTIVE PRIMITIVES (Feature Lab)
   used across all demos to feel like a real product
   ============================================================ */

/* ----- Toast ----- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  z-index:200;opacity:0;
  background:var(--ink);color:#fff;
  border:1px solid rgba(4,190,140,.4);
  border-radius:12px;padding:12px 18px;
  font-family:var(--font);font-size:var(--fs-sm);font-weight:600;
  box-shadow:0 24px 60px -16px rgba(4,190,140,.4), 0 8px 24px -8px rgba(0,0,0,.4);
  display:flex;gap:10px;align-items:center;pointer-events:none;
  transition:opacity .3s, transform .3s cubic-bezier(.2,.9,.3,1);
  max-width:90vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .toast-icon{
  width:22px;height:22px;border-radius:50%;
  background:var(--mint);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0;
}

/* ----- Progress bar (in-card) ----- */
.lab-progress{
  display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-sm);
}
.lab-progress-track{
  flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden;
}
.lab-progress-fill{
  height:100%;width:var(--p,0%);
  background:linear-gradient(90deg,var(--mint),var(--mint-700));
  border-radius:3px;transition:width .5s cubic-bezier(.2,.9,.3,1);
}
.lab-progress-text{
  font-family:var(--font-mono);font-size:var(--fs-xs);
  color:var(--text-dim);font-weight:600;min-width:42px;text-align:right;
}

/* ----- Clickable checklist item ----- */
.todo{
  display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:flex-start;
  padding:var(--sp-sm) var(--sp-sm);background:#fff;
  border:1px solid var(--line);border-radius:10px;
  cursor:pointer;transition:background .2s, border-color .2s, opacity .25s;
  user-select:none;
}
.todo:hover{border-color:var(--mint);background:var(--mint-tint-2)}
.todo-check{
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line);background:#fff;
  display:grid;place-items:center;color:transparent;font-weight:800;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
  flex-shrink:0;
}
.todo:hover .todo-check{border-color:var(--mint)}
.todo.done .todo-check{
  background:var(--mint);border-color:var(--mint);color:#fff;
  animation:checkPop .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes checkPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.todo-body b{display:block;color:var(--ink);font-size:var(--fs-sm);margin-bottom:2px;transition:color .25s, text-decoration .25s}
.todo-body span{font-size:var(--fs-xs);color:var(--text-dim);line-height:1.4}
.todo.done .todo-body b{color:var(--text-faint);text-decoration:line-through}
.todo.done .todo-body span{color:var(--text-faint)}
.todo.done{opacity:.7}
.todo .auto-tag{
  font-family:var(--font-mono);font-size:9px;
  background:var(--ink);color:#fff;padding:3px 6px;border-radius:4px;
  letter-spacing:.05em;font-weight:700;align-self:center;
}
.todo.done .auto-tag{opacity:.5}

/* ----- Action buttons ----- */
.actbtn{
  appearance:none;border:0;cursor:pointer;
  font-family:var(--font);font-weight:600;font-size:var(--fs-xs);
  padding:6px 12px;border-radius:8px;
  background:var(--bg-light);color:var(--text);
  transition:background .2s, color .2s, transform .15s;
  display:inline-flex;align-items:center;gap:6px;
}
.actbtn:hover{background:var(--mint-tint);color:var(--mint-700);transform:translateY(-1px)}
.actbtn.primary{background:var(--mint);color:#fff}
.actbtn.primary:hover{background:var(--mint-600);color:#fff}
.actbtn.ghost{background:transparent;border:1px solid var(--line)}
.actbtn.ghost:hover{border-color:var(--mint);background:var(--mint-tint-2)}
.actbtn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ----- Edit-in-place input ----- */
.edit-input{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:var(--sp-xs) var(--sp-sm);
  font-family:var(--font);font-size:var(--fs-sm);color:var(--ink);
  background:#fff;resize:vertical;min-height:34px;
  transition:border-color .2s, box-shadow .2s;
}
.edit-input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(4,190,140,.15)}
.edit-input.tall{min-height:120px;line-height:1.5}

/* ----- Slide-in detail drawer (used by CV/Pay/Well) ----- */
.drawer{
  position:absolute;inset:0;background:#fff;z-index:5;
  border-radius:inherit;
  display:flex;flex-direction:column;
  transform:translateX(100%);opacity:0;
  transition:transform .35s cubic-bezier(.2,.9,.3,1), opacity .25s;
  overflow:auto;
}
.drawer.open{transform:translateX(0);opacity:1}
.drawer-head{
  display:flex;align-items:center;gap:10px;
  padding:var(--sp-sm) var(--sp-md);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,var(--bg-light));
}
.drawer-back{
  appearance:none;border:1px solid var(--line);background:#fff;
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  font-size:16px;color:var(--ink);
  display:grid;place-items:center;
  transition:border-color .2s, background .2s;
}
.drawer-back:hover{border-color:var(--mint);background:var(--mint-tint-2)}
.drawer-title{font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.drawer-body{padding:var(--sp-md);flex:1}

/* ----- Composer (chat input for CoE) ----- */
.composer{
  display:flex;align-items:center;gap:8px;
  padding:var(--sp-xs);
  background:var(--bg-light);
  border:1px solid var(--line);border-radius:999px;
  transition:border-color .2s, box-shadow .2s;
}
.composer:focus-within{border-color:var(--mint);box-shadow:0 0 0 3px rgba(4,190,140,.12)}
.composer input{
  flex:1;background:transparent;border:0;outline:none;
  padding:8px 14px;font-family:var(--font);font-size:var(--fs-sm);color:var(--ink);
}
.composer input::placeholder{color:var(--text-faint)}
.composer-send{
  appearance:none;border:0;cursor:pointer;
  width:34px;height:34px;border-radius:50%;
  background:var(--mint);color:#fff;font-weight:800;font-size:16px;
  display:grid;place-items:center;
  transition:background .2s, transform .15s;
}
.composer-send:hover{background:var(--mint-600);transform:scale(1.06)}
.composer-send:disabled{opacity:.4;cursor:not-allowed}

/* ----- Pill chip for filters/options ----- */
.pchip{
  appearance:none;border:1px solid var(--line);background:#fff;
  padding:6px 12px;border-radius:999px;cursor:pointer;
  font-family:var(--font);font-size:var(--fs-xs);font-weight:600;
  color:var(--text);transition:all .2s;
}
.pchip:hover{border-color:var(--mint);color:var(--mint)}
.pchip.on{background:var(--mint);border-color:var(--mint);color:#fff}

/* ----- Inline pulse on user actions ----- */
@keyframes inlinePulse{
  0%  {box-shadow:0 0 0 0 rgba(4,190,140,.5)}
  100%{box-shadow:0 0 0 14px rgba(4,190,140,0)}
}
.pulse-once{animation:inlinePulse .8s ease-out}

/* ----- Skeleton typing dots ----- */
.typing-dots{display:inline-flex;gap:4px;align-items:center;padding:6px 12px}
.typing-dots span{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-faint);
  animation:typingBounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2){animation-delay:.16s}
.typing-dots span:nth-child(3){animation-delay:.32s}
@keyframes typingBounce{
  0%,80%,100%{transform:translateY(0);opacity:.4}
  40%{transform:translateY(-6px);opacity:1}
}

/* ----- Sparkline / mini bar ----- */
.spark{display:flex;align-items:flex-end;gap:3px;height:34px}
.spark span{flex:1;background:var(--mint);border-radius:2px 2px 0 0;opacity:.6;transition:opacity .2s}
.spark span:last-child{opacity:1}

/* ----- Help tag floater (PDPA reveal) ----- */
.reveal-tag{
  position:fixed;z-index:300;pointer-events:none;
  background:var(--ink);color:#fff;
  padding:6px 10px;border-radius:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  box-shadow:0 8px 20px -4px rgba(0,0,0,.3);
  opacity:0;transform:translateY(4px);
  transition:opacity .2s, transform .2s;
}
.reveal-tag.show{opacity:1;transform:translateY(0)}

/* Container positioning for drawer overlays */
.lab-visual > *{position:relative}

/* ===== Morning Brief · deep features ===== */
.brief-compare{
  display:flex;gap:14px;align-items:center;
  padding:10px 14px;background:var(--bg-light);
  border-radius:8px;margin:0 14px;font-size:12px;
  color:var(--text-dim);font-family:var(--font-mono);
}
.brief-compare b{color:var(--ink);font-family:var(--font-display);font-weight:700}
.brief-compare .diff{font-weight:700;font-size:11px;padding:2px 8px;border-radius:99px}
.brief-compare .diff.down{background:var(--mint-tint);color:var(--mint-700)}
.brief-compare .diff.up{background:#fef3c7;color:#92400e}
.brief-compare .streak{margin-left:auto;color:#f97316;font-weight:600}
.brief-card{cursor:pointer}
.brief-card:hover{border-color:var(--mint);background:var(--mint-tint-2)}
.brief-detail-box{
  background:var(--bg-light);border:1px solid var(--line);
  border-radius:10px;padding:14px;font-size:13px;line-height:1.6;color:var(--text);
}
.brief-detail-box b{color:var(--ink)}
.slack-quote{
  background:#fff;border-left:3px solid #6366f1;
  padding:10px 12px;border-radius:0 8px 8px 0;
  font-size:12px;
}
.slack-quote .sq-who{font-weight:700;color:var(--ink)}
.slack-quote .sq-when{margin-left:8px;color:var(--text-faint);font-family:var(--font-mono);font-size:10px}
.slack-quote p{margin:4px 0 0;color:var(--text)}

/* ===== CV Matcher · deep ===== */
.cv-jd-block{
  background:var(--bg-light);border:1px solid var(--line);
  border-radius:10px;padding:10px;margin-bottom:10px;
}
.cv-jd-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cv-jd-tabs .pchip{font-size:11px;padding:4px 9px}
.cv-jd-text{font-size:12px;line-height:1.5;min-height:54px;background:#fff}
.cv-filters{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:8px 10px;background:#fff;border:1px solid var(--line);
  border-radius:10px;margin-bottom:10px;
}
.cv-filt-lbl{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
.cv-filt-sep{display:inline-block;width:1px;height:14px;background:var(--line);margin:0 4px}
.cv-filters .pchip{font-size:11px;padding:3px 8px}
.cv-row{position:relative}
.cv-row{grid-template-columns:24px minmax(80px,130px) minmax(40px,1fr) 36px 58px !important}
@media (max-width:560px){
  .cv-row{
    grid-template-columns:18px 1fr 36px !important;
    grid-template-rows:auto auto;
    column-gap:8px !important;
    row-gap:6px;
  }
  .cv-row .cv-bar{grid-column:1 / -1;grid-row:2}
  .cv-row .cv-tag{display:none}
}
.cv-check{display:inline-flex;align-items:center;cursor:pointer}
.cv-check input{accent-color:var(--mint);cursor:pointer;width:14px;height:14px}
.cv-lvl{
  display:inline-block;font-family:var(--font-mono);font-size:9px;
  background:var(--bg-light);color:var(--text-dim);
  padding:2px 5px;border-radius:3px;margin-left:6px;
  letter-spacing:.04em;font-weight:700;
}
.cv-compare-bar{
  display:flex;gap:8px;align-items:center;
  padding:12px 14px;background:var(--ink);color:#fff;
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  margin:0 -1px -1px;
}
.cv-compare-bar span{font-size:12px;flex:1}
.cv-compare-bar b{color:var(--mint);font-weight:700}
.cv-compare-bar .actbtn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.15)}
.cv-compare-bar .actbtn.ghost:hover{background:rgba(255,255,255,.16)}
.cv-compare-grid{display:grid;gap:14px}
.cv-cmp-col{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:8px;
}
.cv-cmp-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cv-cmp-head b{display:block;color:var(--ink);font-size:14px}
.cv-cmp-head span{font-size:11px;color:var(--text-dim)}
.cv-cmp-score{
  margin-left:auto;background:var(--mint);color:#fff;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-family:var(--font-display);
}
.cv-cmp-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;gap:8px}
.cv-cmp-row span{color:var(--text-dim);min-width:60px}
.cv-cmp-row b{color:var(--ink);font-weight:600;text-align:right;font-size:12px}
.cv-cmp-rec{
  margin-top:14px;padding:12px;background:var(--mint-tint-2);border:1px solid var(--mint-tint);
  border-radius:10px;font-size:13px;line-height:1.5;color:var(--text);
}
.cv-cmp-rec b{color:var(--ink)}
.cv-slots{display:flex;flex-direction:column;gap:8px}
.cv-slot{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:#fff;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;transition:border-color .2s;
}
.cv-slot:hover{border-color:var(--mint)}
.cv-slot input{accent-color:var(--mint)}
.cv-slot b{display:block;font-size:13px;color:var(--ink)}
.cv-slot span{font-size:11px;color:var(--text-dim)}

/* ===== Onboarding · deep ===== */
.onb-meta-row{display:flex;gap:8px;align-items:center;margin:4px 4px 12px;flex-wrap:wrap}
.onb-meta-row .lab-progress{flex:1 1 160px;min-width:140px}
.onb-meta-row .actbtn{flex:0 0 auto;white-space:nowrap}
.onb-meta-row .actbtn{font-size:11px;padding:5px 10px}
.onb-owner{font-style:normal;color:var(--text-faint);font-size:10px;font-family:var(--font-mono)}
.onb-email{
  background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.onb-email-h{padding:14px;background:var(--bg-light);border-bottom:1px solid var(--line);font-size:12px}
.onb-email-h > div{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:3px 0}
.onb-email-h .oe-lbl{color:var(--text-dim);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.onb-email-h b{color:var(--ink);font-weight:600;font-size:12px}
.onb-email-body{padding:16px;font-size:13px;line-height:1.6;color:var(--text)}
.onb-email-body p{margin:0 0 10px}
.onb-email-body b{color:var(--ink);font-weight:600}
.onb-email-attach{
  padding:10px 14px;background:var(--mint-tint-2);border-top:1px solid var(--mint-tint);
  display:flex;gap:8px;align-items:center;font-size:11px;color:var(--text);font-family:var(--font-mono);
}
.buddy-grid{display:flex;flex-direction:column;gap:10px}
.buddy-card{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;
}
.buddy-card.top{border-color:var(--mint);background:var(--mint-tint-2)}
.buddy-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.buddy-head b{display:block;color:var(--ink);font-size:14px}
.buddy-head span{font-size:11px;color:var(--text-dim)}
.buddy-card.top .buddy-head span{color:var(--mint-700);font-weight:600}
.buddy-score{
  margin-left:auto;font-family:var(--font-display);font-weight:800;font-size:18px;
  color:var(--mint-700);background:#fff;padding:4px 10px;border-radius:8px;border:1px solid var(--mint-tint);
}
.buddy-why{font-size:12px;color:var(--text);line-height:1.5}

/* ===== IDP · deep ===== */
.idp-extra{padding:16px 20px 20px;border-top:1px solid var(--line);background:var(--bg-light);display:flex;flex-direction:column;gap:18px}
.idp-section{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.idp-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.idp-section-head b{font-family:var(--font-mono);font-size:11px;color:var(--mint);letter-spacing:.08em;text-transform:uppercase}
.idp-target{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.idp-target b{color:var(--ink);font-family:var(--font-display)}
.idp-radar-wrap{display:flex;align-items:center;gap:14px}
.idp-radar{width:220px;height:220px;flex-shrink:0}
.idp-legend{display:flex;flex-direction:column;gap:8px;font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.idp-legend i{display:inline-block;width:14px;height:6px;border-radius:2px;margin-right:6px;vertical-align:middle}
.idp-legend i.cur{background:var(--ink)}
.idp-legend i.tgt{background:var(--mint)}
.idp-timeline{display:flex;flex-direction:column;gap:6px}
.idp-q{display:grid;grid-template-columns:40px 1fr 24px;gap:10px;align-items:center;padding:8px 10px;background:var(--bg-light);border:1px solid var(--line);border-radius:8px;font-size:12px}
.idp-q.done{background:var(--mint-tint-2);border-color:var(--mint-tint)}
.idp-q-tag{font-family:var(--font-mono);font-weight:700;color:var(--mint-700);font-size:11px}
.idp-q-text{color:var(--text)}
.idp-q.done .idp-q-text{color:var(--mint-700);font-weight:600}
.idp-q-tick{color:var(--mint);font-weight:800;text-align:center}
.idp-lib{display:flex;flex-direction:column;gap:8px}
.idp-lib-row{display:grid;grid-template-columns:80px 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.idp-lib-meta b{display:block;color:var(--ink);font-size:13px}
.idp-lib-meta span{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.idp-lib-type{
  display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;
  padding:3px 7px;border-radius:5px;letter-spacing:.04em;text-align:center;
  background:var(--bg-light);color:var(--text);
}
.idp-lib-type.type-lms{background:#dbeafe;color:#1d4ed8}
.idp-lib-type.type-stretch{background:var(--mint-tint);color:var(--mint-700)}
.idp-lib-type.type-mentor{background:#fef3c7;color:#92400e}
.idp-lib-type.type-workshop,.idp-lib-type.type-external{background:#fae8ff;color:#86198f}
.idp-lib-type.type-group{background:#fce7f3;color:#9d174d}

@media (max-width:560px){
  .idp-radar-wrap{flex-direction:column}
  .idp-lib-row{grid-template-columns:60px 1fr;gap:8px}
  .idp-lib-row .actbtn{grid-column:1 / -1;justify-self:start}
}

/* ===== CoE · deep ===== */
.coe-channels{
  display:flex;gap:6px;align-items:center;
  padding:8px 12px;background:var(--bg-light);border:1px solid var(--line);
  border-radius:99px;margin:0 auto 12px;width:fit-content;max-width:100%;flex-wrap:wrap;
}
.coe-channels-lbl{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;margin-right:4px}
.coe-ch{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:4px 10px;border-radius:99px;
  font-family:var(--font);font-size:11px;font-weight:600;color:var(--text-dim);
  transition:background .2s, color .2s;
}
.coe-ch:hover{color:var(--ink)}
.coe-ch.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Channel-specific phone styling */
.phone[data-channel="slack"]{border-color:#4a154b}
.phone[data-channel="slack"] .bubble.out{background:#4a154b}
.phone[data-channel="teams"]{border-color:#4b53bc}
.phone[data-channel="teams"] .bubble.out{background:#4b53bc}
.phone[data-channel="line"]{border-color:#06c755}
.phone[data-channel="line"] .bubble.out{background:#06c755}

/* Bubble meta: confidence + source + thumbs */
.bubble-meta{
  display:flex;gap:8px;align-items:center;margin-top:8px;
  padding-top:8px;border-top:1px solid rgba(255,255,255,.15);
  font-size:11px;
}
.bubble.in .bubble-meta{border-top-color:var(--line)}
.bubble-meta .conf{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);opacity:.85;
}
.bubble-meta .conf i{
  display:inline-block;width:24px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;
  position:relative;overflow:hidden;
}
.bubble.in .bubble-meta .conf i{background:var(--line)}
.bubble-meta .conf i::after{
  content:'';position:absolute;left:0;top:0;height:100%;width:var(--w,0%);
  background:var(--mint);
}
.bubble-act{
  appearance:none;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:11px;padding:3px 8px;border-radius:5px;
  font-family:var(--font);font-weight:600;
  transition:background .2s;
}
.bubble.in .bubble-act{background:rgba(0,0,0,.05);color:var(--ink)}
.bubble-act:hover{background:rgba(255,255,255,.22)}
.bubble.in .bubble-act:hover{background:rgba(0,0,0,.1)}
.bubble-act.on{background:var(--mint);color:#fff}

/* Source document drawer */
.coe-source-doc{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:18px;font-size:13px;line-height:1.65;color:var(--text);
  font-family:'Georgia',serif;
}
.coe-src-meta{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
}
.coe-src-section{font-weight:700;color:var(--ink)}
.coe-src-doc p{margin:0 0 10px}
.coe-src-highlight{
  background:#fef9c3;padding:12px 14px;border-radius:6px;
  border-left:3px solid #facc15;font-weight:500;
  color:var(--ink);
}
.coe-src-version{
  margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:10px;color:var(--text-faint);
}

/* Trending questions */
.coe-trending{
  background:var(--bg-light);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;
}
.coe-trending-lbl{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:.08em;width:100%;margin-bottom:4px}
.coe-trending .pchip{font-size:11px;padding:4px 9px}
.coe-trending .pchip i{font-style:normal;font-weight:700;color:var(--mint-700);background:var(--mint-tint);padding:1px 5px;border-radius:3px;margin-left:4px;font-family:var(--font-mono);font-size:9px}

/* ===== KM Browse drawer ===== */
.coe-browse-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin-top:8px;
  background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important;
  font-weight:700;
}
.coe-browse-btn:hover{background:var(--mint) !important;border-color:var(--mint) !important}
.coe-browse-btn i{
  font-style:normal;font-family:var(--font-mono);font-size:10px;
  background:rgba(255,255,255,.15);padding:2px 6px;border-radius:4px;
}

.km-search{margin-bottom:14px}
.km-search input{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;font-family:var(--font);font-size:13px;color:var(--ink);
  background:var(--bg-light);outline:none;
}
.km-search input:focus{border-color:var(--mint);background:#fff;box-shadow:0 0 0 3px rgba(4,190,140,.12)}

.km-cat{margin-bottom:18px}
.km-cat-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 4px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.km-cat-icon{font-size:18px}
.km-cat-head b{
  font-family:var(--font-display);font-size:14px;color:var(--ink);
  font-weight:700;flex:1;
}
.km-cat-count{
  font-family:var(--font-mono);font-size:10px;
  background:var(--bg-light);color:var(--text-dim);
  padding:2px 7px;border-radius:99px;font-weight:700;
}

.km-cat-list{display:flex;flex-direction:column;gap:6px}
.km-topic{
  appearance:none;border:1px solid var(--line);background:#fff;
  cursor:pointer;text-align:left;
  display:grid;grid-template-columns:24px 1fr 16px;gap:10px;align-items:center;
  padding:10px 12px;border-radius:8px;
  transition:border-color .15s, background .15s, transform .15s;
}
.km-topic:hover{
  border-color:var(--mint);background:var(--mint-tint-2);
  transform:translateX(2px);
}
.km-topic-icon{font-size:16px;text-align:center}
.km-topic-meta b{
  display:block;font-family:var(--font);font-size:13px;
  color:var(--ink);font-weight:600;line-height:1.3;
}
.km-topic-meta span{
  display:block;font-size:10.5px;color:var(--text-dim);
  font-family:var(--font-mono);margin-top:1px;
}
.km-topic-arrow{
  color:var(--text-faint);font-weight:700;transition:color .15s, transform .15s;
}
.km-topic:hover .km-topic-arrow{color:var(--mint);transform:translateX(3px)}

/* ===== Rich answer styling in chat bubbles ===== */
.bubble.out table,.bubble.in table{
  border-collapse:collapse;margin:6px 0;width:100%;
}
.bubble.out table td,.bubble.in table td{
  padding:3px 6px;border-bottom:1px solid rgba(255,255,255,.15);
  font-size:11px;
}
.bubble.in table td{border-bottom-color:var(--line)}
.bubble.out table td:first-child{opacity:.85}
.bubble.in table td:first-child{color:var(--text-dim)}
.bubble.out code,.bubble.in code{
  font-family:var(--font-mono);font-size:10.5px;
  background:rgba(255,255,255,.2);padding:1px 5px;border-radius:4px;
}
.bubble.in code{background:var(--bg-light);color:var(--ink)}
.bubble.out em,.bubble.in em{font-style:italic}
.bubble.out em{color:rgba(255,255,255,.85)}
.bubble.in em{color:var(--text-dim)}
.bubble.out b,.bubble.in b{font-weight:700}
.bubble.out b{color:#fff}

/* Related topics in CoE source drawer */
.coe-src-related{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.coe-src-related > b{
  display:block;font-family:var(--font-mono);font-size:10px;
  color:var(--mint);letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;margin-bottom:8px;
}
.coe-src-related-list{display:flex;flex-direction:column;gap:6px}

/* ===== Performance · deep ===== */
.perf-rep-rail{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.perf-nav{padding:4px 10px;font-size:11px}
.perf-rep-current{font-size:11px;padding:4px 9px}
.perf-sources{
  background:var(--bg-light);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:12px;
}
.perf-src-lbl{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:6px}
.perf-src-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.perf-src-grid > div{
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:6px 4px;text-align:center;
}
.perf-src-grid b{display:block;font-family:var(--font-display);font-size:16px;color:var(--ink);line-height:1.1}
.perf-src-grid span{font-size:9px;color:var(--text-dim);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
.perf-calib-grid{display:flex;flex-direction:column;gap:8px}
.perf-calib-row{
  display:grid;grid-template-columns:120px 1fr 50px;gap:10px;align-items:center;
}
.perf-calib-label{font-size:12px;color:var(--text);font-weight:600}
.perf-calib-bars{display:flex;flex-direction:column;gap:3px}
.perf-calib-bar{
  height:14px;border-radius:3px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:6px;color:#fff;font-size:10px;font-weight:700;font-family:var(--font-mono);
  min-width:18px;
}
.perf-calib-bar.team{background:var(--mint)}
.perf-calib-bar.target{background:var(--text-faint)}
.perf-calib-delta{
  font-family:var(--font-mono);font-size:11px;text-align:center;font-weight:700;
  color:var(--text-dim);
}
.perf-calib-delta.over{color:#f97316}
.perf-calib-delta.under{color:#3b82f6}
.perf-calib-legend{
  display:flex;gap:14px;margin-top:12px;font-size:11px;color:var(--text-dim);
  font-family:var(--font-mono);
}
.perf-calib-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:middle}
.perf-calib-legend i.team{background:var(--mint)}
.perf-calib-legend i.target{background:var(--text-faint)}
.perf-calib-rec{
  margin-top:14px;padding:12px;background:var(--mint-tint-2);
  border:1px solid var(--mint-tint);border-radius:10px;
  font-size:13px;line-height:1.5;color:var(--text);
}
.perf-calib-rec b{color:var(--ink)}
@media (max-width:560px){
  .perf-src-grid{grid-template-columns:repeat(3,1fr)}
}

/* ===== Offboarding · deep ===== */
.off-deep-actions{
  display:flex;gap:8px;padding:14px 24px 18px;border-top:1px solid var(--line);background:var(--bg-light);
  flex-wrap:wrap;
}
.off-deep-actions .actbtn{font-size:11px;padding:6px 12px}
.off-sev-grid{display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.off-sev-row{
  display:flex;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:12.5px;
}
.off-sev-row:last-child{border-bottom:0}
.off-sev-row span{color:var(--text-dim)}
.off-sev-row b{color:var(--ink);font-family:var(--font-display);font-weight:600}
.off-sev-row.total{background:var(--mint-tint-2);border-top:1px solid var(--mint-tint)}
.off-sev-row.total span{color:var(--mint-700);font-weight:600}
.off-sev-row.total b{color:var(--mint-700);font-size:18px;font-weight:800}
.off-sev-note{
  margin-top:12px;padding:12px;background:#fef9c3;border:1px solid #facc15;border-radius:10px;
  font-size:12px;line-height:1.5;color:var(--ink);
}
.off-sev-note b{color:#854d0e}
.off-access-table{
  width:100%;border-collapse:collapse;font-size:12px;
  background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.off-access-table th{
  background:var(--bg-light);padding:8px 10px;text-align:left;font-family:var(--font-mono);font-size:10px;
  color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line);
}
.off-access-table td{padding:8px 10px;border-bottom:1px solid var(--line-2)}
.off-access-table tr:last-child td{border-bottom:0}
.off-access-table b{color:var(--ink);font-weight:600}
.risk-pill{
  display:inline-block;font-family:var(--font-mono);font-size:9px;font-weight:700;
  padding:2px 6px;border-radius:3px;letter-spacing:.04em;text-transform:uppercase;
}
.risk-pill.low{background:#dcfce7;color:#15803d}
.risk-pill.medium{background:#fef3c7;color:#92400e}
.risk-pill.high{background:#fee2e2;color:#991b1b}
.risk-pill.critical{background:var(--ink);color:#fff}
.off-kc-list{display:flex;flex-direction:column;gap:10px}
.off-kc-row{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:flex-start;padding:10px;background:#fff;border:1px solid var(--line);border-radius:10px}
.off-kc-num{
  width:24px;height:24px;border-radius:50%;background:var(--mint);color:#fff;
  display:grid;place-items:center;font-weight:800;font-family:var(--font-display);font-size:12px;flex-shrink:0;
}
.off-kc-q b{display:block;color:var(--ink);font-size:13px;margin-bottom:6px;font-weight:600}
.off-kc-q .edit-input{font-size:12px}

/* ============================================================
   🎬 ANIMATION POLISH · HOOK LAYER
   ============================================================ */

/* Lab tab change → crossfade panel content */
.lab-panel.active{
  animation:panelFadeIn .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes panelFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Cards rising into view (scroll-driven) */
@keyframes cardRise{
  from{opacity:0;transform:translateY(28px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Stagger animations for various panels */
.brief-card,.cv-row,.idp-q,.idp-lib-row,.off-row,.followup-row,
.well-tile,.pillar,.problem-card,.roi-card,.lab-features li{
  animation:cardRise .55s cubic-bezier(.2,.9,.3,1) backwards;
}
.brief-card:nth-child(1),.cv-row:nth-child(1),.idp-q:nth-child(1){animation-delay:.05s}
.brief-card:nth-child(2),.cv-row:nth-child(2),.idp-q:nth-child(2){animation-delay:.10s}
.brief-card:nth-child(3),.cv-row:nth-child(3),.idp-q:nth-child(3){animation-delay:.15s}
.brief-card:nth-child(4),.cv-row:nth-child(4),.idp-q:nth-child(4){animation-delay:.20s}
.cv-row:nth-child(n+5){animation-delay:.25s}

/* Pulse on first-click targets (coach marks) */
@keyframes firstClickPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(4,190,140,0)}
  50%{transform:scale(1.04);box-shadow:0 0 0 8px rgba(4,190,140,.15)}
}
.lab-panel.active .actbtn.primary:not(:hover){
  animation:firstClickPulse 2.4s ease-in-out infinite;
  animation-delay:1.5s;
}

/* Number counter shimmer on KPI stats */
@keyframes statShimmer{
  0%,100%{background-position:-200% 0}
  50%{background-position:200% 0}
}
.big-num{
  background-image:linear-gradient(90deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--mint) 50%, var(--ink) 60%, var(--ink) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:statShimmer 6s ease-in-out infinite;
}

/* Radar chart draw-in animation */
.idp-radar polygon{
  animation:radarDraw 1.2s cubic-bezier(.2,.9,.3,1) backwards;
}
.idp-radar polygon:nth-child(5){animation-delay:.4s} /* target ring */
.idp-radar polygon:nth-child(6){animation-delay:.6s} /* current ring */
@keyframes radarDraw{
  from{opacity:0;transform:scale(0.85);transform-origin:center}
  to{opacity:1;transform:scale(1)}
}

/* Lab visual mocks: subtle hover lift */
.lab-visual .device,
.lab-visual .brief,
.lab-visual .cv-card,
.lab-visual .onb-card,
.lab-visual #idpCard,
.lab-visual .phone,
.lab-visual .perf-card,
.lab-visual #offCard,
.lab-visual .pay-card,
.lab-visual .coach-card,
.lab-visual #wellCard,
.lab-visual .pdpa-card{
  transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s;
}
.lab-visual:hover .device,
.lab-visual:hover .brief,
.lab-visual:hover .cv-card,
.lab-visual:hover .onb-card,
.lab-visual:hover #idpCard,
.lab-visual:hover .phone,
.lab-visual:hover .perf-card,
.lab-visual:hover #offCard,
.lab-visual:hover .pay-card,
.lab-visual:hover .coach-card,
.lab-visual:hover #wellCard,
.lab-visual:hover .pdpa-card{
  transform:translateY(-4px);
  box-shadow:0 28px 60px -20px rgba(4,190,140,.18), 0 12px 28px -10px rgba(10,10,10,.12);
}

/* CTA button magnetic hover (enhances existing magnetic JS) */
.actbtn.primary{position:relative;overflow:hidden}
.actbtn.primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform .6s;
}
.actbtn.primary:hover::before{transform:translateX(100%)}

/* Pillar hover lift on lifecycle scroll */
.lifecycle-track .pillar{
  transition:transform .4s cubic-bezier(.2,.9,.3,1), border-color .3s, box-shadow .3s;
}
.lifecycle-track .pillar:hover{
  transform:translateY(-6px);
  border-color:var(--mint);
  box-shadow:0 24px 48px -16px rgba(4,190,140,.25);
}

/* Hero pill eyebrow dot — extra pulse */
.eyebrow-dot{
  position:relative;
}
.eyebrow-dot::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--mint);opacity:0;
  animation:eyebrowRing 2.2s ease-out infinite;
}
@keyframes eyebrowRing{
  0%{transform:scale(.5);opacity:.8}
  100%{transform:scale(1.6);opacity:0}
}

/* CV bar fill with shimmer */
.cv-bar i{
  position:relative;overflow:hidden;
}
.cv-bar i::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:barShimmer 2.5s ease-in-out infinite;
}
@keyframes barShimmer{
  0%,100%{left:-100%}
  50%{left:100%}
}

/* Smooth scroll behavior site-wide */
html{scroll-behavior:smooth}

/* Modal entry zoom */
.share-backdrop .share-card{
  animation:modalZoom .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes modalZoom{
  from{opacity:0;transform:scale(.92) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* Reduced motion respect */
@media (prefers-reduced-motion:reduce){
  .brief-card,.cv-row,.idp-q,.well-tile,.pillar,.problem-card,.roi-card,.lab-features li,.lab-panel.active{
    animation:none !important;
  }
  .big-num{animation:none !important; -webkit-text-fill-color:initial; color:var(--ink)}
  .actbtn.primary{animation:none !important}
  .eyebrow-dot::after{display:none}
  .cv-bar i::after{display:none}
}

/* ============================================================
   📖 DEMO STORY SHELL · gives every demo a persona + scenario + outcome
   ============================================================ */

/* ----- Story header (sits at top of .lab-meta) ----- */
.demo-story{
  background:linear-gradient(180deg,var(--mint-tint-2) 0%, rgba(241, 251, 247, 0) 100%);
  border:1px solid var(--mint-tint);
  border-radius:14px;padding:14px 16px;margin-bottom:14px;
  display:flex;flex-direction:column;gap:8px;
  position:relative;overflow:hidden;
}
.demo-story::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--mint),transparent);
}
.persona-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;color:var(--text-dim);font-family:var(--font-mono);
  letter-spacing:.04em;
}
.persona-pill .pavatar{
  width:22px;height:22px;border-radius:50%;
  background:var(--mint);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:11px;font-family:var(--font-display);
  flex-shrink:0;
}
.persona-pill b{color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:13px}
.scenario-text{
  color:var(--text);font-size:13.5px;line-height:1.45;
  margin:0;
}
.scenario-text em{color:var(--mint-700);font-style:normal;font-weight:600;background:rgba(4,190,140,.08);padding:1px 5px;border-radius:4px}
.pain-stat{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:#dc2626;font-weight:600;
  background:#fef2f2;border:1px solid #fee2e2;border-radius:6px;
  padding:3px 8px;align-self:flex-start;font-family:var(--font-mono);
}

/* ----- Coach mark · pulsing finger pointing to first action ----- */
.coach-mark{
  position:absolute;z-index:6;pointer-events:none;
  display:flex;align-items:center;gap:6px;
  background:var(--ink);color:#fff;
  padding:6px 10px;border-radius:8px;
  font-family:var(--font);font-size:12px;font-weight:600;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.3);
  animation:coachBob 1.5s ease-in-out infinite;
  white-space:nowrap;
}
.coach-mark::before{content:'👉';font-size:14px}
.coach-mark::after{
  content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  border-style:solid;border-width:6px 6px 6px 0;border-color:transparent var(--ink) transparent transparent;
}
@keyframes coachBob{
  0%,100%{transform:translateX(0)}
  50%   {transform:translateX(4px)}
}

/* ----- Outcome banner · appears after user completes a flow ----- */
.demo-outcome{
  position:relative;
  background:linear-gradient(135deg, var(--ink) 0%, #1a2a26 100%);
  color:#fff;
  border-radius:14px;padding:16px 18px;margin-top:14px;
  display:flex;align-items:center;gap:14px;
  overflow:hidden;
  animation:outcomeIn .55s cubic-bezier(.2,.9,.3,1);
}
.demo-outcome::before{
  content:'';position:absolute;inset:auto -20% -50% auto;width:280px;height:280px;
  background:radial-gradient(circle,rgba(4,190,140,.35),transparent 70%);
  pointer-events:none;
}
.demo-outcome .outcome-icon{
  width:36px;height:36px;border-radius:50%;
  background:var(--mint);color:#fff;
  display:grid;place-items:center;font-size:18px;font-weight:800;
  flex-shrink:0;box-shadow:0 0 0 6px rgba(4,190,140,.18);
  animation:outcomeRing 2s ease-in-out infinite;
}
@keyframes outcomeRing{
  0%,100%{box-shadow:0 0 0 6px rgba(4,190,140,.18)}
  50%   {box-shadow:0 0 0 12px rgba(4,190,140,.0)}
}
.demo-outcome .outcome-body{flex:1;position:relative}
.demo-outcome b{display:block;font-family:var(--font-display);font-size:15px;color:#fff;margin-bottom:2px}
.demo-outcome span{display:block;font-size:12.5px;color:rgba(255,255,255,.7);line-height:1.4}
.demo-outcome .outcome-reset{
  appearance:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:#fff;cursor:pointer;padding:6px 12px;border-radius:8px;
  font-family:var(--font);font-size:11px;font-weight:600;
  transition:background .2s, border-color .2s;
  flex-shrink:0;position:relative;
}
.demo-outcome .outcome-reset:hover{background:rgba(4,190,140,.2);border-color:var(--mint)}
@keyframes outcomeIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}

/* ----- Action counter chip · shows how many things user did ----- */
.action-counter{
  position:absolute;top:-10px;right:14px;z-index:4;
  background:var(--ink);color:#fff;font-family:var(--font-mono);
  font-size:10px;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:99px;
  box-shadow:0 4px 12px -2px rgba(0,0,0,.25);
  transform:scale(0);transition:transform .25s cubic-bezier(.2,.9,.3,1);
}
.action-counter.show{transform:scale(1)}

/* ----- "Try this" suggestion chips (intro for free-input demos) ----- */
.suggest-rail{
  display:flex;flex-direction:column;gap:8px;
  padding:14px;background:var(--mint-tint-2);
  border:1px dashed var(--mint-tint);border-radius:12px;
  margin-bottom:10px;
}
.suggest-rail-title{
  font-family:var(--font-mono);font-size:10px;
  color:var(--mint-700);letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;
}
.suggest-rail-chips{display:flex;flex-wrap:wrap;gap:6px}
.suggest-rail-chips .pchip{font-size:11px;padding:5px 10px}

/* ----- Pulse dot on "first action" element ----- */
.first-pulse{
  position:relative;
}
.first-pulse::before{
  content:'';position:absolute;inset:-3px;border:2px solid var(--mint);
  border-radius:inherit;animation:firstPulse 1.6s ease-out infinite;
  pointer-events:none;
}
@keyframes firstPulse{
  0%  {transform:scale(.95);opacity:.8}
  100%{transform:scale(1.1);opacity:0}
}

/* ----- Scenario picker (Morning Brief variants) ----- */
.scenario-rail{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;
}
.scenario-rail .pchip{font-size:10px;letter-spacing:.04em;padding:4px 9px}

/* ----- "Reading sources" data spinner (used in Performance + Pay audit) ----- */
.sources-spinner{
  background:rgba(0,0,0,.04);
  border:1px solid var(--line);border-radius:10px;
  padding:12px;font-size:12px;color:var(--text);
  font-family:var(--font-mono);
  display:flex;flex-direction:column;gap:4px;
}
.sources-spinner .src-row{
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(6px);
  animation:srcIn .35s ease-out forwards;
}
.sources-spinner .src-row .src-tick{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--mint);border-top-color:transparent;
  animation:spin 0.8s linear infinite;
}
.sources-spinner .src-row.done .src-tick{
  border-color:var(--mint);background:var(--mint);
  animation:none;color:#fff;font-size:9px;font-weight:800;
  text-align:center;line-height:10px;
}
.sources-spinner .src-row.done .src-tick::after{content:'✓';color:#fff;font-size:8px;line-height:10px}
@keyframes srcIn{to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   🛰 TRACKING UI · journey banner + share modal + share button
   ============================================================ */

/* Journey banner — shows current viewer + activity above lab tabs */
.journey-banner{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg, var(--ink) 0%, #161616 100%);
  color:#fff;
  border-radius:16px;padding:14px 18px;margin-bottom:20px;
  border:1px solid rgba(4,190,140,.25);
  position:relative;overflow:hidden;
  box-shadow:0 14px 36px -10px rgba(0,0,0,.25);
}
.journey-banner::before{
  content:'';position:absolute;inset:auto auto -60% -10%;width:380px;height:380px;
  background:radial-gradient(circle, rgba(4,190,140,.18), transparent 70%);
  pointer-events:none;
}
.journey-eye{
  width:38px;height:38px;border-radius:50%;
  background:rgba(4,190,140,.18);color:var(--mint);
  display:grid;place-items:center;font-size:18px;
  box-shadow:0 0 0 4px rgba(4,190,140,.08);
  flex-shrink:0;animation:eyeBlink 3s ease-in-out infinite;
}
@keyframes eyeBlink{0%,90%,100%{opacity:1}95%{opacity:.35}}
.journey-body{flex:1;position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.journey-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:13px;color:rgba(255,255,255,.65)}
.journey-row b{color:#fff;font-family:var(--font-display);font-size:15px}
.journey-row .journey-time{
  margin-left:auto;font-family:var(--font-mono);font-size:11px;
  background:rgba(255,255,255,.06);padding:3px 8px;border-radius:6px;
  color:rgba(255,255,255,.55);
}
.journey-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.55);font-family:var(--font-mono)}
.journey-meta b{color:var(--mint);font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1;margin-right:4px}
.journey-saved{color:var(--mint) !important;font-weight:600}
.journey-demos{font-size:11.5px;color:rgba(255,255,255,.5);font-family:var(--font-mono);letter-spacing:.02em}
.journey-link{
  font-family:var(--font);font-size:12px;font-weight:600;
  color:var(--mint);text-decoration:none;
  padding:8px 12px;border:1px solid rgba(4,190,140,.4);border-radius:8px;
  white-space:nowrap;flex-shrink:0;position:relative;
  transition:background .2s, border-color .2s;
}
.journey-link:hover{background:rgba(4,190,140,.12);border-color:var(--mint)}
@media (max-width:760px){
  .journey-banner{flex-direction:column;align-items:flex-start;gap:10px}
  .journey-link{align-self:stretch;text-align:center}
}

/* Share button in feature lab head */
.share-btn{
  appearance:none;border:1px dashed var(--mint);
  background:var(--mint-tint-2);color:var(--mint-700);
  font-family:var(--font);font-weight:700;font-size:12.5px;
  padding:8px 14px;border-radius:999px;
  margin-top:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .2s, border-color .2s, transform .15s;
}
.share-btn:hover{background:var(--mint);color:#fff;border-color:var(--mint);transform:translateY(-1px)}

/* Share modal */
.share-backdrop{
  position:fixed;inset:0;z-index:500;
  background:rgba(10,10,10,.55);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.share-backdrop.show{opacity:1;pointer-events:auto}
.share-card{
  width:min(460px, 100%);
  background:#fff;border-radius:18px;
  padding:22px 24px 24px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
  transform:translateY(12px) scale(.97);
  transition:transform .3s cubic-bezier(.2,.9,.3,1);
  position:relative;
}
.share-backdrop.show .share-card{transform:translateY(0) scale(1)}
.share-close{
  position:absolute;top:12px;right:12px;
  appearance:none;background:transparent;border:0;
  width:32px;height:32px;border-radius:50%;
  font-size:22px;line-height:1;color:var(--text-dim);
  cursor:pointer;transition:background .2s, color .2s;
}
.share-close:hover{background:var(--bg-light);color:var(--ink)}
.share-head{margin-bottom:16px}
.share-head b{display:block;font-family:var(--font-display);font-size:20px;color:var(--ink);font-weight:800;margin-bottom:4px}
.share-head span{display:block;color:var(--text-dim);font-size:13px;line-height:1.4}
.share-form label, .share-result label{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-dim);font-family:var(--font-mono);
  margin:10px 0 6px;
}
.share-token-card{
  background:var(--mint-tint-2);border:1px solid var(--mint-tint);
  border-radius:12px;padding:14px;
}
.share-ok{
  font-family:var(--font-mono);font-size:11px;
  color:var(--mint-700);letter-spacing:.08em;
  font-weight:700;margin-bottom:10px;
}
.share-link-row{display:flex;gap:8px;align-items:stretch}
.share-link-row input{
  flex:1;font-family:var(--font-mono);font-size:12px;
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;
  color:var(--ink);background:#fff;outline:none;
}
.share-link-row input:focus{border-color:var(--mint)}
.share-preview{
  margin-top:12px;padding-top:10px;
  border-top:1px dashed var(--mint-tint);
  font-size:12px;color:var(--text);font-family:var(--font-mono);
}
.share-preview b{color:var(--mint-700);background:#fff;padding:1px 6px;border-radius:4px}

/* ----- Share v2: tabs + bulk + campaign ----- */
.share-card.share-card-wide{width:min(620px, 100%)}
.share-tabs{
  display:flex;gap:4px;background:var(--bg-light);
  border-radius:10px;padding:4px;margin-bottom:16px;
}
.share-tab{
  flex:1;appearance:none;background:transparent;border:0;cursor:pointer;
  padding:8px 12px;border-radius:8px;
  font-family:var(--font);font-size:13px;font-weight:600;color:var(--text-dim);
  transition:background .2s, color .2s;
}
.share-tab:hover{color:var(--ink)}
.share-tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06)}

.share-pane{display:none}
.share-pane.active{display:block}
.share-sub-hint{
  font-size:12px;color:var(--mint-700);
  background:var(--mint-tint-2);border:1px solid var(--mint-tint);
  border-radius:8px;padding:8px 12px;margin:0 0 14px;
}
.share-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}

.share-bulk-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;
}
.share-bulk-list{
  max-height:280px;overflow:auto;
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);border-radius:10px;padding:10px;
  background:var(--bg-light);
}
.bulk-row{
  display:grid;grid-template-columns:160px 1fr auto;gap:8px;align-items:center;
  padding:8px;background:#fff;border:1px solid var(--line);border-radius:8px;
}
.bulk-row-meta{min-width:0;display:flex;flex-direction:column}
.bulk-row-meta b{display:block;color:var(--ink);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bulk-row-meta span{font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bulk-link{
  flex:1;min-width:0;font-family:var(--font-mono);font-size:11px;
  border:1px solid var(--line);border-radius:6px;padding:6px 8px;
  color:var(--ink);background:var(--bg-light);outline:none;
}
.bulk-link:focus{border-color:var(--mint)}

@media (max-width:560px){
  .bulk-row{grid-template-columns:1fr;gap:6px}
  .share-card.share-card-wide{width:100%}
}

/* ----- "Compare with manual" before/after chips ----- */
.compare-strip{
  display:flex;gap:6px;align-items:center;
  font-size:11px;color:var(--text-dim);
  margin-top:4px;
}
.compare-strip s{color:var(--text-faint);text-decoration:line-through}
.compare-strip b{color:var(--mint);font-weight:700}

/* ═══════════════════════════════════════════════════════════════════
   EMBED MODE · index.html rendered inside demo.html's iframe (?embed=1)
   Hide everything except the Feature Lab so the big-demo shell frames it.
   ═══════════════════════════════════════════════════════════════════ */
html.embed, html.embed body{ background:#fff; }
html.embed body > *:not(#lab){ display:none !important; }
html.embed #lab{ padding:14px 0 40px; min-height:100vh; border:0; background:#fff; }
html.embed #lab .section-head{ display:none; }     /* shell already shows a header */
html.embed #lab .lab-open-full{ display:none; }      /* no self-link inside the demo */
html.embed #lab .container{ max-width:none; padding-left:clamp(16px,3vw,32px); padding-right:clamp(16px,3vw,32px); }

/* floating "← All demos" pill — only inside an embedded single demo */
.embed-back{ display:none; }
html.embed .embed-back{
  display:inline-flex; align-items:center; gap:6px;
  position:fixed; top:14px; left:16px; z-index:60;
  font-size:13px; font-weight:600; color:#0E1410;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(8px);
  border:1px solid #E6EBE8; border-radius:999px; padding:8px 14px;
  box-shadow:0 4px 14px rgba(0,0,0,.08); transition:transform .15s ease, box-shadow .15s ease;
}
html.embed .embed-back:hover{ transform:translateX(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }

/* Lab → big-demo CTA on the homepage — a visual "workspace" box */
.lab-open-full{ margin-top:18px; display:inline-flex; }
.lab-cta{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  margin:24px auto 0; max-width:880px; text-align:left;
  border:1px solid #E6EBE8; border-radius:24px; overflow:hidden; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.04), 0 18px 50px rgba(0,0,0,.08);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s;
}
.lab-cta:hover{ transform:translateY(-3px); box-shadow:0 1px 3px rgba(0,0,0,.04), 0 30px 72px rgba(4,168,123,.20); }
.lab-cta:focus-visible{ outline:2px solid #04BE8C; outline-offset:3px; }
.lab-cta__body{ padding:30px 32px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.lab-cta__kicker{
  font:600 11px/1 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase;
  color:#036b4d; background:#e8f9f3; padding:6px 11px; border-radius:999px;
}
.lab-cta__title{
  font-family:'Manrope','Inter',sans-serif; font-weight:800; line-height:1.08; letter-spacing:-.02em;
  font-size:clamp(22px,1.3rem+1vw,30px); color:#14201b; margin-top:4px;
}
.lab-cta__title b{ color:#03a87b; font-weight:800; }
.lab-cta__sub{ font-size:14.5px; line-height:1.55; color:#5a635f; max-width:44ch; }
.lab-cta__btn{
  margin-top:10px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px;
  color:#fff; background:#04BE8C; padding:13px 22px; border-radius:999px;
  box-shadow:0 8px 20px rgba(4,190,140,.28); transition:background .15s, transform .15s;
}
.lab-cta:hover .lab-cta__btn{ background:#03A77B; transform:translateX(2px); }
.lab-cta__visual{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:24px;
  background:linear-gradient(135deg,#0fbe8c 0%,#04a87b 58%,#037a59 100%); align-content:center;
}
.lab-cta__visual::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 52%);
}
.lab-cta__tile{
  position:relative; aspect-ratio:1; display:grid; place-items:center; font-size:22px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); border-radius:13px;
  animation:lab-cta-float 5s ease-in-out infinite;
}
.lab-cta__tile:nth-child(even){ animation-delay:-1.6s; }
.lab-cta__tile:nth-child(3n){ animation-delay:-3.1s; }
@keyframes lab-cta-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (max-width:760px){
  .lab-cta{ grid-template-columns:1fr; }
  .lab-cta__visual{ grid-template-columns:repeat(6,1fr); padding:18px; }
  .lab-cta__body{ padding:24px 22px; }
}
@media (prefers-reduced-motion:reduce){ .lab-cta__tile{ animation:none; } }