/* ==========================================================================
   KATHY PRINDLE BOOKKEEPING — animated site v2
   Built on the ANIMATED-SITE-FORGE model-proof standard.
   Light/bright palette per COLOR LAW (bookkeeping = trust, clarity, money).
   Vanilla CSS. No framework. No build step.
   ========================================================================== */

:root {
  /* ---- palette: ledger green + warm brass on warm paper ---- */
  --paper:      #FBFCFA;   /* base warm white */
  --paper-2:    #F2F6F2;   /* section tint */
  --paper-3:    #FFFFFF;   /* raised card */
  --slate:      #E4EBE6;   /* soft edge fill */
  --emerald:    #0F7B5A;   /* primary — ledger green */
  --emerald-2:  #16A97A;   /* lighter emerald */
  --emerald-3:  #0A5C43;   /* deep emerald */
  --brass:      #B5872C;   /* secondary — brass/gold */
  --brass-2:    #D9A93F;   /* light brass */
  --green:      #16A34A;
  --red:        #DC2626;
  --white:      #FFFFFF;
  --ink:        #16241D;   /* deep forest text */
  --ink-dim:    #5B6E65;   /* secondary text */
  --line:       rgba(15,123,90,0.16);
  --line-2:     rgba(22,36,29,0.09);
  --ink-faint:  #9AAAA2;   /* placeholder text */
  --glass:      rgba(255,255,255,0.72);
  --glass-2:    rgba(255,255,255,0.92);

  --font-head: 'Sora','Montserrat',sans-serif;
  --font-body: 'Inter','Lato',sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(22,36,29,0.09);
  --shadow-lg: 0 20px 60px rgba(22,36,29,0.14);
  --shadow-emerald: 0 0 40px rgba(15,123,90,0.18);
  --shadow-brass: 0 0 40px rgba(181,135,44,0.20);
  --t: 0.35s cubic-bezier(0.4,0,0.2,1);
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: var(--nav-h);
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* soft ambient wash + faint ledger grid (the "graph paper" of a bookkeeper) */
body.kp-bg {
  position: relative;
  background:
    radial-gradient(1200px 700px at 10% -14%, rgba(15,123,90,0.10), transparent 62%),
    radial-gradient(1000px 640px at 94% 0%, rgba(181,135,44,0.09), transparent 58%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
body.kp-bg::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(15,123,90,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,123,90,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 76%);
  pointer-events: none; z-index: 0;
}

/* drifting motes — the light-theme answer to a starfield */
.starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.starfield span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(15,123,90,0.30);
  box-shadow: 0 0 8px rgba(22,169,122,0.45);
  animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.10;transform:scale(.5);} 50%{opacity:.65;transform:scale(1);} }

/* ---------- typography ---------- */
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.10; letter-spacing: -0.015em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--emerald);
}
.eyebrow::before { content: "▚"; font-size: .78rem; opacity: .85; }
.grad-text {
  background: linear-gradient(100deg, var(--emerald) 0%, var(--brass) 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.section { padding: clamp(3.4rem, 8vw, 6.5rem) 0; position: relative; z-index: 1; }
.center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto clamp(2rem,5vw,3.2rem); text-align: center; }
.section-head h2 { font-size: clamp(1.9rem,4.4vw,3rem); margin-top: .7rem; }
.section-head p { color: var(--ink-dim); margin-top: 1rem; font-size: 1.08rem; }
.section-tint { background: linear-gradient(180deg, rgba(242,246,242,0) 0%, rgba(242,246,242,0.85) 18%, rgba(242,246,242,0.85) 82%, rgba(242,246,242,0) 100%); }

/* ==========================================================================
   STICKY NAV (shrinks on scroll)
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.6rem; height: var(--nav-h);
  background: rgba(251,252,250,0.72); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: height var(--t), background var(--t), border-color var(--t), padding var(--t), box-shadow var(--t);
}
.nav.shrink {
  height: 60px; padding: .5rem 1.6rem;
  background: rgba(251,252,250,0.94); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(22,36,29,0.08);
}
/* wordmark — built in CSS so there is no white box around a raster logo */
.nav-logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.nav-mark {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.12rem;
  color: var(--white);
  background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-3) 100%);
  box-shadow: 0 6px 18px rgba(15,123,90,0.30);
  transition: width var(--t), height var(--t), font-size var(--t);
}
.nav.shrink .nav-mark { width: 34px; height: 34px; font-size: 1rem; }
/* the real logo mark — an SVG, so no gradient tile or letters are drawn behind it */
.brand-mark { background: none; box-shadow: 0 6px 18px rgba(15,123,90,0.26); }
.nav-name { font-family: var(--font-head); font-weight: 800; font-size: .96rem; color: var(--ink); line-height: 1.15; letter-spacing: -.01em; display: block; }
.nav-sub { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--emerald); }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a { text-decoration: none; color: var(--ink-dim); font-family: var(--font-head); font-weight: 600; font-size: .92rem; transition: color var(--t); position: relative; }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--emerald), var(--brass)); transition: width var(--t);
}
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; }
.nav-toggle svg { width: 28px; height: 28px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  padding: .9rem 1.65rem; border-radius: 50px; border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
}
.btn-primary { background: linear-gradient(100deg, var(--emerald), var(--emerald-2)); color: var(--white); box-shadow: 0 8px 26px rgba(15,123,90,0.30); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(15,123,90,0.42); }
.btn-brass { background: linear-gradient(100deg, var(--brass), var(--brass-2)); color: var(--white); box-shadow: 0 8px 26px rgba(181,135,44,0.32); }
.btn-brass:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(181,135,44,0.45); }
.btn-ghost { background: var(--glass); color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--glass-2); border-color: var(--emerald); transform: translateY(-3px); }
.btn-sm { padding: .6rem 1.25rem; font-size: .85rem; }
.btn .arr { transition: transform var(--t); }
.btn:hover .arr { transform: translateX(4px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 2.4rem; align-items: center; width: 100%; }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); letter-spacing: -.028em; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: inline-block; transform: translateY(115%);
  animation: heroRise .9s cubic-bezier(.19,1,.22,1) forwards;
}
.hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .24s; }
@keyframes heroRise { to { transform: translateY(0); } }
.hero .sub {
  color: var(--ink-dim); font-size: clamp(1.05rem,1.6vw,1.24rem); max-width: 540px; margin: 1.5rem 0 2rem;
  opacity: 0; animation: fadeUp .8s ease .5s forwards;
}
.hero .sub strong { color: var(--ink); font-weight: 700; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp .8s ease .68s forwards; }
.hero-trust { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 2rem; color: var(--ink-dim); font-size: .88rem; opacity: 0; animation: fadeUp .8s ease .86s forwards; }
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust b { color: var(--emerald); font-weight: 800; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* hero visual: a living "books are clean" dashboard, built in the design system */
.hero-visual { position: relative; z-index: 2; display: grid; place-items: center; min-height: 460px; }
.hero-glow {
  position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(15,123,90,0.22), transparent 66%);
  filter: blur(34px); animation: pulseGlow 6s ease-in-out infinite;
}
.hero-ring {
  position: absolute; inset: -4% 0 0 0; z-index: 1; margin: auto;
  width: min(520px, 94%); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed rgba(15,123,90,0.22);
  animation: sweep 30s linear infinite;
}
.hero-ring::after {
  content: "$"; position: absolute; top: -15px; left: 50%;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 900; font-size: .95rem;
  color: var(--white); background: var(--brass);
  box-shadow: 0 0 16px rgba(181,135,44,0.55);
  transform: translateX(-50%);
}
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes pulseGlow { 0%,100%{opacity:.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.06);} }

/* the floating ledger card — wrapper carries parallax, card carries the float */
.ledger-wrap { position: relative; z-index: 2; width: min(400px, 100%); }
.ledger {
  position: relative; z-index: 2; width: min(400px, 100%);
  background: var(--paper-3);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(22,36,29,0.16), 0 0 0 1px rgba(255,255,255,0.6) inset;
  padding: 1.4rem 1.5rem 1.5rem;
  animation: fadeUp 1s ease .3s both, floaty 7s ease-in-out 1.2s infinite;
}
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
.ledger-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line-2); }
.ledger-title { font-family: var(--font-head); font-weight: 800; font-size: .95rem; }
.ledger-title small { display: block; font-weight: 500; font-size: .72rem; color: var(--ink-dim); letter-spacing: .02em; }
.ledger-badge {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .68rem; font-weight: 800; font-family: var(--font-head);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .34rem .7rem; border-radius: 50px;
  background: rgba(22,163,74,0.10); color: var(--green); border: 1px solid rgba(22,163,74,0.28);
}
.ledger-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.ledger-rows { display: flex; flex-direction: column; gap: .1rem; margin: .9rem 0 1.1rem; }
.ledger-row { display: flex; align-items: center; justify-content: space-between; padding: .58rem 0; border-bottom: 1px dashed var(--line-2); font-size: .87rem; }
.ledger-row:last-child { border-bottom: none; }
.ledger-row .lbl { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-dim); }
.ledger-row .tick { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,123,90,0.12); color: var(--emerald); font-size: .6rem; font-weight: 900; flex-shrink: 0; }
.ledger-row .val { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger-row .val.pos { color: var(--emerald); }
/* mini bar chart */
.ledger-chart { display: flex; align-items: flex-end; gap: 7px; height: 62px; padding-top: .3rem; }
.ledger-chart i {
  flex: 1; border-radius: 5px 5px 2px 2px; display: block;
  background: linear-gradient(180deg, var(--emerald-2), var(--emerald));
  transform-origin: bottom; transform: scaleY(0);
  animation: growBar .8s cubic-bezier(.19,1,.22,1) forwards;
}
.ledger-chart i:nth-child(5) { background: linear-gradient(180deg, var(--brass-2), var(--brass)); }
@keyframes growBar { to { transform: scaleY(1); } }
.ledger-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-2); }
.ledger-foot .k { font-size: .72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.ledger-foot .v { font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; color: var(--emerald); font-variant-numeric: tabular-nums; }

/* floating payroll chip — depth layer */
.chip-payroll {
  position: absolute; z-index: 3; right: -6px; bottom: 44px;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 50px; padding: .6rem 1rem;
  box-shadow: 0 14px 34px rgba(22,36,29,0.14);
  font-family: var(--font-head); font-weight: 800; font-size: .8rem; color: var(--ink);
  animation: fadeUp .9s ease .95s both, floaty 8s ease-in-out 2s infinite reverse;
}
.chip-payroll .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--white); font-size: .68rem; }

/* growth path — the "draw the line" SVG */
.growth-path { position: absolute; left: -8%; top: 66%; width: 118%; z-index: 1; pointer-events: none; opacity: .55; }
.growth-path path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dash 4s ease 1s forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }

/* scroll cue */
.scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; color: var(--ink-dim); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; opacity: 0; animation: fadeUp 1s ease 1.4s forwards; }
.scroll-cue .mouse { width: 22px; height: 34px; border: 2px solid var(--line); border-radius: 12px; margin: 0 auto .5rem; position: relative; }
.scroll-cue .mouse::after { content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:2px; background: var(--emerald); transform: translateX(-50%); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%{opacity:0;top:6px;} 40%{opacity:1;} 100%{opacity:0;top:16px;} }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; } .reveal.d6 { transition-delay: .48s; }

/* ---------- glass panels / cards ---------- */
.panel { background: var(--glass-2); border: 1px solid var(--line-2); border-radius: var(--radius); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.grid { display: grid; gap: 1.4rem; }
.g2 { grid-template-columns: repeat(2,1fr); }
.g3 { grid-template-columns: repeat(3,1fr); }
.g4 { grid-template-columns: repeat(4,1fr); }

.pill { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .75rem; border-radius:50px; }
.pill-em { background: rgba(15,123,90,0.10); color: var(--emerald); border:1px solid rgba(15,123,90,0.26); }
.pill-brass { background: rgba(181,135,44,0.12); color: var(--brass); border:1px solid rgba(181,135,44,0.30); }

/* business-type chip row */
.pill-row { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; max-width: 860px; margin: 0 auto clamp(2rem,5vw,3rem); }
.pill-row .pill {
  background: var(--paper-3); color: var(--ink); border:1px solid var(--line);
  font-family: var(--font-head); font-size:.78rem; letter-spacing:.02em; text-transform:none;
  padding:.5rem 1rem; box-shadow: 0 3px 12px rgba(22,36,29,0.05);
  transition: border-color var(--t), transform var(--t), color var(--t);
}
.pill-row .pill::before { content:"✓"; color: var(--emerald); font-weight:900; font-size:.72rem; }
.pill-row .pill:hover { border-color: rgba(15,123,90,0.45); color: var(--emerald); transform: translateY(-2px); }

/* ==========================================================================
   SERVICE / VALUE CARDS — cursor spotlight
   ========================================================================== */
.card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.svc {
  position: relative; padding: 1.9rem 1.7rem; border-radius: var(--radius);
  background: var(--paper-3);
  border: 1px solid var(--line-2); overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.svc::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t); pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(15,123,90,0.10), transparent 62%);
}
.svc:hover { transform: translateY(-8px); border-color: rgba(15,123,90,0.42); box-shadow: var(--shadow-lg); }
.svc:hover::before { opacity: 1; }
.svc-icon {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.6rem; margin-bottom: 1.1rem;
  background: linear-gradient(135deg, rgba(15,123,90,.13), rgba(181,135,44,.13));
  border: 1px solid var(--line);
}
.svc h3 { font-size: 1.2rem; margin-bottom: .15rem; }
.svc .role { color: var(--brass); font-family: var(--font-head); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.svc p { color: var(--ink-dim); font-size: .95rem; margin-top: .8rem; }
.svc .inc { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; font-size:.76rem; color: var(--emerald); font-family: var(--font-head); font-weight:700; }
.svc .inc .dot { width:7px; height:7px; border-radius:50%; background: var(--emerald); box-shadow:0 0 9px var(--emerald-2); animation: blink 1.8s ease-in-out infinite; }

/* ==========================================================================
   HOW IT WORKS — 3 steps with connecting path
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; position: relative; }
.steps::before {
  content:""; position:absolute; top:46px; left:12%; right:12%; height:2px;
  background: linear-gradient(90deg, transparent, var(--emerald), var(--brass), transparent);
  opacity:.45; z-index:0;
}
.step { position: relative; z-index:1; text-align:center; padding: 1.4rem; }
.step .num {
  width: 62px; height: 62px; margin: 0 auto 1.2rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; font-size: 1.4rem;
  color: var(--white); background: linear-gradient(135deg, var(--emerald), var(--emerald-3));
  box-shadow: 0 10px 26px rgba(15,123,90,0.32);
}
.step h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.step p { color: var(--ink-dim); font-size: .97rem; }

/* ==========================================================================
   COST CALCULATOR (the interactive element)
   ========================================================================== */
.calc { display:grid; grid-template-columns: 1.08fr .92fr; gap: 2.2rem; align-items:center; }
.calc-panel { padding: clamp(1.6rem,4vw,2.8rem); }
.calc-figure { font-family: var(--font-head); font-weight: 900; font-size: clamp(2.5rem,7vw,4.2rem); color: var(--red); line-height:1; letter-spacing:-.03em; font-variant-numeric: tabular-nums; }
.calc-sub { color: var(--ink-dim); margin-top:.45rem; font-size:.95rem; }
.calc-vs {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed var(--line);
}
.calc-vs .k { font-size:.72rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.16em; font-weight:700; }
.calc-vs .v { font-family: var(--font-head); font-weight:900; font-size: clamp(1.7rem,4vw,2.4rem); color: var(--emerald); line-height:1.05; margin-top:.3rem; font-variant-numeric: tabular-nums; }
.calc-vs .n { font-size:.84rem; color:var(--ink-dim); margin-top:.35rem; }
.calc-slider { margin-top: 1.7rem; }
.calc-slider label { display:flex; justify-content:space-between; align-items:baseline; font-size:.92rem; color:var(--ink-dim); font-weight:500; }
.calc-slider label strong { font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:1.02rem; font-variant-numeric: tabular-nums; }
.calc-slider input[type=range] { width:100%; accent-color: var(--emerald); margin-top:.55rem; }
.calc-note { font-size:.78rem; color:var(--ink-dim); margin-top:1.1rem; line-height:1.55; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.price-wrap { max-width: 560px; margin: 0 auto; }
.price {
  position: relative; display:flex; flex-direction:column; padding: clamp(2rem,4vw,2.9rem) clamp(1.6rem,4vw,2.6rem);
  border-radius: 24px; text-align: center;
  background: var(--paper-3); border:1.5px solid rgba(15,123,90,0.30);
  box-shadow: var(--shadow-lg);
  transition: transform var(--t), box-shadow var(--t);
}
.price:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(22,36,29,0.18); }
.price::before {
  content:"Everything Included"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: linear-gradient(100deg,var(--emerald),var(--brass)); color:var(--white);
  font-family:var(--font-head); font-weight:800; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.36rem 1rem; border-radius:50px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15,123,90,0.28);
}
.price .tier { font-family:var(--font-head); font-weight:800; font-size:1.05rem; color: var(--ink-dim); letter-spacing:.04em; margin-top:.5rem; }
.price .amt { font-family:var(--font-head); font-weight:900; font-size: clamp(3.4rem,10vw,4.6rem); color: var(--ink); line-height:1; margin:.5rem 0 .1rem; letter-spacing:-.035em; }
.price .amt sup { font-size: .42em; vertical-align: super; color: var(--ink-dim); font-weight: 800; }
.price .amt small { font-size:.24em; color:var(--ink-dim); font-weight:700; letter-spacing:0; }
.price .flat { color:var(--brass); font-size:.88rem; font-weight:700; font-family:var(--font-head); }
.price ul { list-style:none; margin:1.8rem 0; display:flex; flex-direction:column; gap:0; text-align:left; }
.price li { position:relative; padding: .72rem 0 .72rem 2rem; font-size:.96rem; color:var(--ink); border-bottom: 1px solid var(--line-2); }
.price li:last-child { border-bottom: none; }
.price li strong { color: var(--emerald); font-weight: 800; }
.price li::before {
  content:"✓"; position:absolute; left:0; top:.78rem;
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  background: var(--emerald); color:var(--white); font-size:.62rem; font-weight:900;
}
.price .btn { width:100%; justify-content:center; padding: 1.05rem 2rem; font-size: 1.02rem; }
.price .fine { margin-top: 1rem; font-size:.84rem; color:var(--ink-dim); }
.price .fine a { color: var(--emerald); font-weight: 700; text-decoration: none; }
.price .fine a:hover { text-decoration: underline; }

/* ==========================================================================
   STATS / COUNTERS
   ========================================================================== */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; }
.stat { text-align:center; padding:2rem 1rem; border-radius: var(--radius); background: var(--paper-3); border:1px solid var(--line-2); box-shadow: var(--shadow); }
.stat .num { font-family:var(--font-head); font-weight:900; font-size: clamp(2.1rem,5vw,3rem); color: var(--emerald); line-height:1; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--ink-dim); font-size:.89rem; margin-top:.55rem; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display:grid; grid-template-columns: .92fr 1.08fr; gap: 2.4rem; align-items: start; }
.contact-list { display:flex; flex-direction:column; gap:1.15rem; }
.ci { display:flex; align-items:flex-start; gap:1rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-sm); background: var(--paper-3); border:1px solid var(--line-2); transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.ci:hover { border-color: rgba(15,123,90,0.38); transform: translateX(3px); box-shadow: var(--shadow); }
.ci-ic { width:44px; height:44px; border-radius:11px; display:grid; place-items:center; font-size:1.15rem; flex-shrink:0; background: linear-gradient(135deg, rgba(15,123,90,.13), rgba(181,135,44,.13)); border:1px solid var(--line); }
.ci-k { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.ci-v { font-family:var(--font-head); font-weight:800; font-size:1.02rem; color:var(--ink); text-decoration:none; display:block; margin-top:.15rem; }
a.ci-v:hover { color: var(--emerald); }
.hrs { margin-top:.5rem; display:flex; flex-direction:column; gap:.28rem; }
.hrs-row { display:flex; justify-content:space-between; font-size:.88rem; gap:1rem; }
.hrs-row .d { color:var(--ink); font-weight:600; }
.hrs-row .t { color:var(--ink-dim); font-variant-numeric: tabular-nums; }
.hrs-row .t.closed { color:var(--red); }

.form-card { padding: clamp(1.6rem,4vw,2.2rem); border-radius: var(--radius); background: var(--paper-3); border:1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.form-card h3 { font-size:1.32rem; margin-bottom:.4rem; }
.form-card > p { color:var(--ink-dim); font-size:.93rem; margin-bottom:1.5rem; }
.fg { margin-bottom: 1.05rem; }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
label { display:block; font-size:.8rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; font-family: var(--font-head); }
input, textarea, select {
  width:100%; padding:.82rem .95rem;
  border:1.5px solid var(--slate); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size:.95rem; color:var(--ink);
  background: var(--paper); transition: border-color var(--t), box-shadow var(--t), background var(--t);
  outline:none; min-height: 46px;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus { border-color: var(--emerald); background: var(--white); box-shadow: 0 0 0 4px rgba(15,123,90,0.10); }
textarea { resize: vertical; min-height:112px; }
.form-card .btn { width:100%; justify-content:center; margin-top:.4rem; }
.form-fine { margin-top:.9rem; font-size:.79rem; color:var(--ink-dim); text-align:center; line-height:1.55; }

/* ==========================================================================
   FINAL CTA + FOOTER
   ========================================================================== */
.cta-final { text-align:center; padding: clamp(2.8rem,6vw,4.4rem); border-radius: 26px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--emerald-3) 0%, var(--emerald) 100%);
  border: none; box-shadow: 0 24px 60px rgba(15,123,90,0.28); }
.cta-final::after { content:""; position:absolute; inset:0; background: radial-gradient(620px circle at 50% 0%, rgba(255,255,255,0.16), transparent 62%); pointer-events:none; }
.cta-final .eyebrow { color: var(--brass-2); position: relative; z-index: 1; }
.cta-final h2 { font-size: clamp(2rem,5vw,3.2rem); color: var(--white); position: relative; z-index: 1; }
.cta-final p { color: rgba(255,255,255,0.86); max-width: 560px; margin: 1rem auto 2rem; position: relative; z-index: 1; }
.cta-final .btn { position: relative; z-index: 1; }
.cta-final .btn-light { background: var(--white); color: var(--emerald-3); box-shadow: 0 10px 30px rgba(0,0,0,0.20); }
.cta-final .btn-light:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(0,0,0,0.28); }

.foot { border-top:1px solid var(--line-2); margin-top: 3rem; padding: 3rem 1.5rem 2rem; position: relative; z-index:1; background: var(--paper-2); }
.foot-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:2.2rem; }
.foot-brand { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; }
.foot p { color: var(--ink-dim); font-size:.9rem; max-width: 340px; }
.foot h4 { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--emerald); margin-bottom:1rem; }
.foot ul { list-style:none; display:flex; flex-direction:column; gap:.62rem; }
.foot a { color: var(--ink-dim); text-decoration:none; font-size:.92rem; transition: color var(--t); }
.foot a:hover { color: var(--emerald); }
.foot-base { max-width:1180px; margin: 2.2rem auto 0; padding-top:1.5rem; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:var(--ink-dim); font-size:.8rem; }

/* ==========================================================================
   STICKY THUMB-REACHABLE MOBILE CTA (phone-first)
   ========================================================================== */
.mcta {
  display: none;
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  align-items: center; justify-content: center; gap: .5rem;
  min-height: 54px; padding: .95rem 1.2rem; border-radius: 50px;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  text-decoration: none; text-align: center;
  color: var(--white); background: linear-gradient(100deg, var(--emerald), var(--emerald-2));
  box-shadow: 0 10px 34px rgba(22,36,29,0.28), 0 0 26px rgba(15,123,90,0.34);
}
.mcta .arr { transition: transform var(--t); }
.mcta:active .arr { transform: translateX(4px); }

/* ==========================================================================
   RESPONSIVE — PHONE-FIRST
   940 (stack) · 768 (hamburger + thumb CTA) · 480 (large phone) · 360 (small)
   ========================================================================== */

/* ---- <=940px ---- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-visual { min-height: 400px; order: -1; }
  .calc { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .card-grid, .g3, .g4, .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .g2 { grid-template-columns: 1fr; }
  .steps::before { display:none; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot p { max-width: none; }
}

/* ---- 769-1040px : the full company name is long, so tighten the bar ---- */
@media (min-width: 769px) and (max-width: 1040px) {
  .nav { padding: 1rem 1.1rem; }
  .nav-links { gap: 1.05rem; }
  .nav-name { font-size: .88rem; }
  .nav-sub { font-size: .6rem; letter-spacing: .12em; }
}

/* ---- <=768px : mobile nav + thumb CTA ---- */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(251,252,250,0.99); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem;
    transform: translateY(-170%); transition: transform var(--t);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    box-shadow: 0 16px 40px rgba(22,36,29,0.12);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: .95rem .2rem; min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--line-2); }
  .nav-links a.btn { border: none; margin-top: .8rem; justify-content: center; min-height: 50px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .mcta { display: flex; }
  .foot { padding-bottom: 6.5rem; }
  .btn { min-height: 46px; }
  .calc-slider input[type=range] { height: 30px; }
  .fr { grid-template-columns: 1fr; gap: 0; }
  .fr .fg { margin-bottom: 1.05rem; }
}

/* ---- <=480px : large phones ---- */
@media (max-width: 480px) {
  .wrap { padding: 0 1.1rem; }
  .section { padding: 3rem 0; }
  .nav-name { font-size: .84rem; }
  .nav-sub { font-size: .6rem; letter-spacing: .14em; }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 1.8rem); padding-bottom: 3rem; }
  .hero h1 { font-size: clamp(2.05rem, 10vw, 2.8rem); }
  .hero .sub { font-size: 1rem; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-visual { min-height: 330px; }
  .ledger-wrap { width: min(330px, 100%); }
  .ledger { padding: 1.15rem 1.2rem 1.25rem; }
  .ledger-chart { height: 52px; }
  .chip-payroll { right: -2px; bottom: 24px; font-size: .74rem; padding: .5rem .85rem; }
  .hero-trust { gap: .7rem 1.2rem; font-size: .83rem; }
  .scroll-cue { display: none; }
  .section-head p { font-size: 1rem; }
  .calc-figure { font-size: clamp(2.3rem, 12vw, 3.2rem); }
  .calc-panel { padding: 1.5rem 1.3rem; }
  .stat { padding: 1.5rem .6rem; }
  .cta-final .btn { width: 100%; justify-content: center; }
  .price li { font-size: .92rem; }
}

/* ---- <=360px : small phones ---- */
@media (max-width: 360px) {
  .wrap { padding: 0 .9rem; }
  .nav { padding: .8rem 1rem; }
  .nav-name { font-size: .78rem; }
  .nav-mark { width: 34px; height: 34px; }
  .hero h1 { font-size: clamp(1.85rem, 11vw, 2.35rem); }
  .hero-trust { flex-direction: column; gap: .5rem; }
  .stats { grid-template-columns: 1fr; }
  .ledger-wrap { width: 100%; }
  .chip-payroll { position: static; margin: 1rem auto 0; animation: fadeUp .9s ease .95s both; }
  .mcta { font-size: .92rem; }
  .price { padding: 1.7rem 1.2rem; }
}

/* ==========================================================================
   BLOG — listing + article. Same tokens, reading-optimized.
   ========================================================================== */
.page-head { padding: calc(var(--nav-h) + clamp(2.4rem,6vw,4.2rem)) 0 clamp(1.6rem,4vw,2.6rem); position: relative; z-index:1; }
.page-head h1 { font-size: clamp(2.2rem,5.4vw,3.6rem); margin-top:.7rem; }
.page-head p { color: var(--ink-dim); margin-top:1rem; font-size:1.08rem; max-width: 640px; }

.crumbs { font-size:.82rem; color: var(--ink-dim); display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.crumbs a { color: var(--emerald); text-decoration:none; font-weight:600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { opacity:.5; }

/* --- post cards --- */
.post-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1.6rem; }
.post-card {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background: var(--paper-3); border:1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow); text-decoration:none; color:inherit;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.post-card:hover { transform: translateY(-8px); border-color: rgba(15,123,90,0.42); box-shadow: var(--shadow-lg); }
.post-thumb {
  height: 168px; display:grid; place-items:center; font-size:3.2rem; position:relative; overflow:hidden;
  background: linear-gradient(135deg, rgba(15,123,90,.12), rgba(181,135,44,.14));
  border-bottom: 1px solid var(--line-2);
}
.post-thumb::after {
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(15,123,90,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15,123,90,0.07) 1px, transparent 1px);
  background-size: 26px 26px;
}
.post-thumb > * { position: relative; z-index: 1; }
.post-body { padding: 1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.post-meta { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; font-size:.76rem; color: var(--ink-dim); margin-bottom:.8rem; }
.post-card h2 { font-size:1.28rem; line-height:1.25; }
.post-card p { color: var(--ink-dim); font-size:.95rem; margin-top:.7rem; flex:1; }
.post-more { margin-top:1.2rem; font-family: var(--font-head); font-weight:800; font-size:.88rem; color: var(--emerald); display:inline-flex; align-items:center; gap:.4rem; }
.post-card:hover .post-more .arr { transform: translateX(4px); }
.post-more .arr { transition: transform var(--t); }

/* --- article body --- */
.article { max-width: 760px; margin: 0 auto; position:relative; z-index:1; }
.article-hero { text-align:left; }
.article-hero h1 { font-size: clamp(2rem,5vw,3.1rem); margin-top:.8rem; letter-spacing:-.02em; }
.article-meta { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:1.2rem; color: var(--ink-dim); font-size:.86rem; }
.article-meta .sep { opacity:.45; }
.article-lede { font-size: clamp(1.08rem,2vw,1.22rem); color: var(--ink-dim); margin-top:1.4rem; line-height:1.65; border-left:3px solid var(--emerald); padding-left:1.1rem; }

.prose { margin-top: clamp(2rem,5vw,3rem); font-size:1.04rem; line-height:1.78; color: var(--ink); }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: clamp(1.5rem,3.4vw,2rem); margin-top: 2.8rem; letter-spacing:-.015em; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.prose h3 { font-size: clamp(1.15rem,2.4vw,1.35rem); margin-top: 2rem; }
.prose p { color: var(--ink); }
.prose strong { font-weight: 700; }
.prose a { color: var(--emerald); font-weight:600; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--emerald-3); }
.prose ul, .prose ol { padding-left: 1.3rem; display:flex; flex-direction:column; gap:.65rem; }
.prose li { color: var(--ink); }
.prose li::marker { color: var(--emerald); font-weight:700; }
.prose hr { border:0; border-top:1px solid var(--line-2); margin: 2.6rem 0; }

.callout {
  background: var(--paper-3); border:1px solid var(--line); border-left:4px solid var(--emerald);
  border-radius: var(--radius-sm); padding: 1.25rem 1.4rem; box-shadow: var(--shadow);
}
.callout .k { display:block; font-family:var(--font-head); font-weight:800; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color: var(--emerald); margin-bottom:.5rem; }
.callout p { margin:0; font-size:.99rem; }
.callout.warn { border-left-color: var(--brass); }
.callout.warn .k { color: var(--brass); }

.prose table { width:100%; border-collapse: collapse; font-size:.94rem; background: var(--paper-3); border:1px solid var(--line-2); border-radius: var(--radius-sm); overflow:hidden; }
.prose th, .prose td { padding:.8rem .95rem; text-align:left; border-bottom:1px solid var(--line-2); }
.prose th { background: var(--paper-2); font-family:var(--font-head); font-weight:800; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-dim); }
.prose tr:last-child td { border-bottom:none; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* --- article furniture --- */
.toc { background: var(--paper-2); border:1px solid var(--line-2); border-radius: var(--radius-sm); padding:1.3rem 1.5rem; }
.toc .k { font-family:var(--font-head); font-weight:800; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.toc ol { margin-top:.7rem; padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem; }
.toc a { color: var(--emerald); text-decoration:none; font-weight:600; font-size:.95rem; }
.toc a:hover { text-decoration: underline; }

.author-box { display:flex; gap:1.1rem; align-items:flex-start; margin-top:3rem; padding:1.5rem; background: var(--paper-3); border:1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.author-box .nav-mark { width:52px; height:52px; font-size:1.2rem; }
.author-box .an { font-family:var(--font-head); font-weight:800; font-size:1.05rem; }
.author-box .ar { font-size:.78rem; color:var(--emerald); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.author-box p { color: var(--ink-dim); font-size:.93rem; margin-top:.55rem; }

.post-cta { margin-top:2.6rem; padding: clamp(1.8rem,4vw,2.6rem); border-radius: var(--radius); text-align:center;
  background: linear-gradient(135deg, var(--emerald-3) 0%, var(--emerald) 100%); box-shadow: 0 20px 50px rgba(15,123,90,0.26); }
.post-cta h3 { color: var(--white); font-size: clamp(1.4rem,3.4vw,2rem); }
.post-cta p { color: rgba(255,255,255,0.88); margin:.8rem auto 1.6rem; max-width:480px; font-size:.99rem; }
.post-cta .btn-light { background: var(--white); color: var(--emerald-3); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.post-cta .btn-light:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.26); }

.next-read { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line-2); }
.next-read .k { font-family:var(--font-head); font-weight:800; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:1rem; display:block; }

.faq-q { background: var(--paper-3); border:1px solid var(--line-2); border-radius: var(--radius-sm); padding:1.1rem 1.3rem; }
.faq-q > summary { cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq-q > summary::-webkit-details-marker { display:none; }
.faq-q > summary::after { content:"+"; color:var(--emerald); font-weight:900; font-size:1.3rem; line-height:1; flex-shrink:0; }
.faq-q[open] > summary::after { content:"\2212"; }
.faq-q p { margin-top:.8rem; color:var(--ink-dim); font-size:.96rem; }

@media (max-width: 940px) { .post-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .page-head { padding-top: calc(var(--nav-h) + 1.8rem); }
  .prose { font-size:1rem; }
  .author-box { flex-direction:column; }
  .post-thumb { height:140px; font-size:2.6rem; }
}

/* ==========================================================================
   CHAT ASSISTANT — always-on bookkeeping answers
   ========================================================================== */
.kchat-btn {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 400; display: inline-flex; align-items: center; gap: .55rem;
  min-height: 56px; padding: 0 1.25rem 0 1.05rem; border: 0; border-radius: 50px;
  cursor: pointer; font-family: var(--font-head); font-weight: 800; font-size: .98rem;
  color: var(--white); background: linear-gradient(100deg, var(--emerald), var(--emerald-2));
  box-shadow: 0 12px 36px rgba(22,36,29,0.26), var(--shadow-emerald);
  transition: transform var(--t), box-shadow var(--t);
}
.kchat-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(22,36,29,0.3), var(--shadow-emerald); }
.kchat-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.kchat-btn .kchat-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.32); animation: blink 2.4s ease-in-out infinite;
}
.kchat-btn[aria-expanded="true"] { opacity: 0; pointer-events: none; }

.kchat-panel {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 401; width: min(392px, calc(100vw - 32px)); height: min(620px, calc(100vh - 110px));
  display: none; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-3); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity var(--t), transform var(--t);
}
.kchat-panel.open { display: flex; }
.kchat-panel.in { opacity: 1; transform: none; }

.kchat-head {
  display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem;
  background: linear-gradient(115deg, var(--emerald-3), var(--emerald));
  color: var(--white);
}
.kchat-av {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: .92rem; letter-spacing: .02em;
  color: var(--white); background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.kchat-head .kh-t { font-family: var(--font-head); font-weight: 800; font-size: 1rem; line-height: 1.2; }
.kchat-head .kh-s { font-size: .78rem; opacity: .85; display: flex; align-items: center; gap: .38rem; margin-top: .18rem; }
.kchat-head .kh-s i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; animation: blink 2.4s ease-in-out infinite; }
.kchat-close {
  margin-left: auto; width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; color: var(--white);
  background: rgba(255,255,255,0.16); font-size: 1.3rem; line-height: 1;
  transition: background var(--t);
}
.kchat-close:hover { background: rgba(255,255,255,0.28); }

.kchat-log { flex: 1; overflow-y: auto; padding: 1.1rem; background: var(--paper-2); }
.kchat-msg { max-width: 86%; margin-bottom: .75rem; padding: .78rem .95rem; font-size: .94rem; line-height: 1.55; border-radius: 16px; white-space: pre-wrap; }
.kchat-msg.bot { background: var(--paper-3); color: var(--ink); border: 1px solid var(--line-2); border-bottom-left-radius: 5px; box-shadow: var(--shadow); }
.kchat-msg.me { margin-left: auto; background: var(--emerald); color: var(--white); border-bottom-right-radius: 5px; }
.kchat-msg.err { background: var(--paper-3); color: var(--ink-dim); border: 1px dashed var(--line); }

.kchat-typing { display: inline-flex; gap: 5px; padding: .95rem 1rem; }
.kchat-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); animation: blink 1.2s ease-in-out infinite; }
.kchat-typing i:nth-child(2) { animation-delay: .18s; }
.kchat-typing i:nth-child(3) { animation-delay: .36s; }

.kchat-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1.1rem .9rem; background: var(--paper-2); }
.kchat-chips button {
  cursor: pointer; font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  padding: .48rem .8rem; border-radius: 50px;
  color: var(--emerald-3); background: var(--paper-3); border: 1px solid var(--line);
  transition: background var(--t), transform var(--t);
}
.kchat-chips button:hover { background: var(--slate); transform: translateY(-2px); }

.kchat-form { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--line-2); background: var(--paper-3); }
.kchat-form input {
  flex: 1; min-height: 46px; padding: .7rem .9rem; font-family: var(--font-body); font-size: .95rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.kchat-form input:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(15,123,90,0.12); }
.kchat-form button {
  width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--radius-sm); color: var(--white);
  background: linear-gradient(100deg, var(--emerald), var(--emerald-2));
  transition: transform var(--t);
}
.kchat-form button:hover { transform: translateY(-2px); }
.kchat-form button svg { width: 20px; height: 20px; }
.kchat-form button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.kchat-foot { padding: 0 .9rem .75rem; font-size: .72rem; color: var(--ink-faint); text-align: center; background: var(--paper-3); }
.kchat-foot a { color: var(--emerald); text-decoration: none; font-weight: 600; }

@media (max-width: 768px) {
  /* clear the sticky thumb-zone call button */
  .kchat-btn { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); padding: 0 1.05rem; min-height: 52px; }
  .kchat-panel { right: 10px; left: 10px; width: auto; height: calc(100vh - 96px); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  .kchat-btn .kchat-label { display: none; }
  .kchat-btn { padding: 0 1.05rem; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
  .hero .sub, .hero-cta, .hero-trust, .scroll-cue, .ledger, .chip-payroll { opacity: 1; animation: none; }
  .ledger-chart i { transform: scaleY(1); }
  .growth-path path { stroke-dashoffset: 0; }
  .kchat-panel { opacity: 1; transform: none; }
}