/* ============================================================
   LEMON MAN — Candidate Lemon Platform
   Design system v2 — playful citrus B2B. Warm paper, deep ink,
   a LEMON SCORE that runs sour-high / peach-low.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap');

/* ---- Tokens --------------------------------------------------- */
:root {
  --ink:        #211d12;
  --ink-2:      #3d3826;
  --ink-3:      #6f6750;
  --paper:      #f6efda;   /* warm cream */
  --paper-2:    #efe4c4;   /* deeper cream band */
  --card:       #fffdf2;
  --lemon:      #e3a400;   /* the lemon — primary, also = "bad" signal */
  --lemon-br:   #ffd23c;   /* bright zest highlight */
  --sour:       #a86a00;   /* deep sour — high scores, intensity */
  --peach:      #e6855c;   /* the peach — clean / good */
  --peach-br:   #f4a983;
  --peach-soft: #f7e1d2;
  --flag:       #b8372a;   /* severe */
  --flag-soft:  #f0d8d2;
  --line:       #d8caa0;
  --line-soft:  #e6dab6;

  --shadow-sm: 0 1px 0 rgba(33,29,18,.04), 0 2px 8px rgba(33,29,18,.05);
  --shadow-md: 0 2px 1px rgba(33,29,18,.05), 0 16px 40px -18px rgba(33,29,18,.32);
  --shadow-pop: 0 8px 0 var(--ink);

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'Spline Sans Mono', ui-monospace, Menlo, monospace;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --radius: 4px;
}

/* ---- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink-2);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--lemon-br); color: var(--ink); }

body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---- Layout --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
.section { padding-block: clamp(2.8rem, 5.6vw, 5.2rem); position: relative; }
.section--tight { padding-block: clamp(1.8rem, 3.6vw, 3.2rem); }
.band { background: var(--paper-2); }
.band-ink { background: var(--ink); color: #e8e1c9; }
.band-ink h2, .band-ink h3, .band-ink h4, .band-ink .lede { color: var(--paper); }
.band-lemon { background: var(--lemon); color: var(--ink); }
.band-lemon h2, .band-lemon h3, .band-lemon .lede { color: var(--ink); }

/* ---- Typography ----------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; }
.display {
  font-size: clamp(3rem, 7.6vw, 6rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.04em;
}
.display em { font-style: italic; font-weight: 500; color: var(--lemon); }
.display .peachy { font-style: normal; color: var(--peach); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.3rem, 2vw, 1.62rem); }
.lede { font-size: clamp(1.13rem, 1.6vw, 1.36rem); line-height: 1.5; color: var(--ink-2); }
strong { font-weight: 700; color: var(--ink); }

.kicker {
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--sour);
  display: inline-flex; align-items: center; gap: .6rem;
}
.kicker::before { content: "🍋"; font-size: .9rem; }
.kicker--plain::before { display: none; }
.band-ink .kicker { color: var(--lemon-br); }

/* ---- Buttons -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-weight: 700; font-size: .96rem;
  padding: .9rem 1.6rem; border-radius: var(--radius);
  border: 2px solid var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--lemon); }
.btn--lemon { background: var(--lemon); color: var(--ink); }
.btn--lemon:hover { background: var(--lemon-br); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn--peach { background: var(--peach); color: var(--ink); }
.btn--peach:hover { background: var(--peach-br); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--card); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(0,0); box-shadow: none; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- Nav ------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .8rem var(--gutter);
  background: rgba(246,239,218,.88);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease;
}
.nav.is-stuck { border-color: var(--ink); }
.nav__brand { display: flex; align-items: center; gap: .55rem; font-family: var(--serif); font-weight: 700; font-size: 1.36rem; letter-spacing: -.03em; color: var(--ink); }
.nav__mark { width: 32px; height: 32px; flex: none; }
.nav__links { display: flex; gap: 1.8rem; }
.nav__links a { font-size: .95rem; font-weight: 600; color: var(--ink-2); position: relative; padding-block: .3rem; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--lemon); transition: width .2s ease; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }
.nav__right { display: flex; align-items: center; gap: .7rem; }
.nav__admin { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); padding: .45rem .7rem .42rem; border: 1.5px solid var(--ink-3); border-radius: 999px; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.nav__admin:hover { color: var(--ink); border-color: var(--ink); background: rgba(33,29,18,.04); }
.nav__admin svg { width: 11px; height: 11px; stroke-width: 2.4; }
@media (max-width: 720px) { .nav__admin { display: none; } }
.nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after { display: block; width: 22px; height: 2.5px; background: var(--ink); transition: .2s; }
.nav__burger span { position: relative; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; }
.nav__burger span::before { top: -7px; } .nav__burger span::after { top: 7px; }
.nav.menu-open .nav__burger span { background: transparent; }
.nav.menu-open .nav__burger span::before { top: 0; transform: rotate(45deg); }
.nav.menu-open .nav__burger span::after { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 199;
  background: var(--paper); padding: 6rem var(--gutter) 3rem;
  display: flex; flex-direction: column; gap: .3rem;
  transform: translateY(-100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { font-family: var(--serif); font-size: 1.95rem; font-weight: 600; color: var(--ink); padding: .55rem 0; border-bottom: 2px solid var(--line-soft); }
.mobile-menu .btn { margin-top: 1.5rem; justify-content: center; }

/* ---- Hero ----------------------------------------------------- */
.hero { padding-top: clamp(1.8rem, 4.5vw, 3.8rem); padding-bottom: clamp(2.2rem, 4.8vw, 4.2rem); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.32fr .92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero h1 { margin-bottom: 1.5rem; }
.hero__lede { max-width: 31rem; margin-bottom: 2rem; }
.hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero__note { margin-top: 1.4rem; font-size: .84rem; color: var(--ink-3); font-family: var(--mono); }

.citrus-ghost { position: absolute; right: -15vw; top: 46%; transform: translateY(-50%); width: 54vw; max-width: 680px; aspect-ratio: 1; opacity: .12; pointer-events: none; z-index: 0; }

/* ---- Lemon Score gauge --------------------------------------- */
.gauge { width: 100%; max-width: 360px; margin-inline: auto; }
.gauge__card {
  background: var(--card); border: 2.5px solid var(--ink);
  border-radius: var(--radius); padding: 2rem 1.6rem 1.5rem;
  box-shadow: var(--shadow-pop); position: relative;
}
.gauge__card::before {
  content: attr(data-stamp); position: absolute; top: -1px; left: 1.6rem;
  transform: translateY(-50%); background: var(--lemon); color: var(--ink);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; font-weight: 700;
  padding: .3rem .7rem; border: 2px solid var(--ink);
}
.gauge__num { font-family: var(--serif); font-size: 4.6rem; line-height: 1; font-weight: 700; color: var(--ink); }
.gauge__num small { font-size: 1.3rem; color: var(--ink-3); font-weight: 500; }
.gauge__verdict { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-top: .2rem; }
.gauge__verdict.is-peach { color: var(--peach-deep, #c45f3a); }
.gauge__verdict.is-zest  { color: var(--sour); }
.gauge__verdict.is-sour  { color: var(--flag); }
.gauge__svg { width: 100%; height: auto; margin: .3rem 0 .6rem; }
.gauge__rows { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; border-top: 2px dashed var(--line); padding-top: .9rem; }
.gauge__row { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; }
.gauge__row span:first-child { color: var(--ink-3); font-family: var(--mono); font-size: .74rem; }

.tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; padding: .22rem .55rem; font-weight: 600; border: 1.5px solid var(--ink); }
.tag--lemon { background: var(--lemon); color: var(--ink); }
.tag--peach { background: var(--peach-soft); color: var(--peach-deep, #c45f3a); }
.tag--neutral { background: var(--paper-2); color: var(--ink-3); }
.tag--flag { background: var(--flag); color: #fff; }

/* ---- Stamp (rubber-stamp playful label) ---------------------- */
.stamp {
  display: inline-block; font-family: var(--mono); font-weight: 700;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem .9rem; border: 3px double currentColor; border-radius: 5px;
  transform: rotate(-7deg); color: var(--flag);
}
.stamp--peach { color: var(--peach-deep, #c45f3a); }
.stamp--lemon { color: var(--sour); }

/* ---- Score band meter ---------------------------------------- */
.meter { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-pop); }
.meter__track { position: relative; height: 26px; border: 2px solid var(--ink); border-radius: 13px; overflow: hidden; display: flex; }
.meter__track i { display: block; height: 100%; }
.meter__track i:nth-child(1) { background: var(--peach); flex: 1; }
.meter__track i:nth-child(2) { background: var(--lemon-br); flex: 2.5; }
.meter__track i:nth-child(3) { background: var(--lemon); flex: 3; }
.meter__track i:nth-child(4) { background: var(--sour); flex: 3.5; }
.meter__pin { position: absolute; top: -8px; width: 3px; height: 42px; background: var(--ink); }
.meter__pin::after { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; background: var(--ink); border-radius: 50%; }
.meter__labels { display: flex; justify-content: space-between; margin-top: 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }

/* ---- Lemon Score calculator ---------------------------------- */
.calc { display: grid; grid-template-columns: 1.35fr .85fr; gap: 1.5rem; align-items: start; }
.calc__panel { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 1.4rem 1.6rem 1.6rem; }
.calc__legend { display: grid; grid-template-columns: 1fr 7.4rem 4rem; gap: 1rem; font-family: var(--mono); font-size: .67rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding-bottom: .6rem; border-bottom: 2.5px solid var(--ink); }
.calc__legend span:nth-child(2) { text-align: center; }
.calc__legend span:nth-child(3) { text-align: right; }
.cinc { display: grid; grid-template-columns: 1fr 7.4rem 4rem; gap: 1rem; align-items: center; padding: .6rem 0; border-bottom: 2px dashed var(--line); }
.cinc:last-child { border-bottom: 0; }
.cinc__name { font-weight: 600; font-size: .93rem; color: var(--ink-2); }
.cinc.on .cinc__name { color: var(--ink); }
.cinc__base { font-family: var(--mono); font-size: .69rem; color: var(--ink-3); }
.cinc__ctl { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.cstep { width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 4px; font-weight: 800; font-size: 1rem; background: var(--card); display: grid; place-items: center; line-height: 1; transition: background .12s ease; }
.cstep:hover:not(:disabled) { background: var(--lemon); }
.cstep:disabled { opacity: .28; cursor: not-allowed; }
.cinc__n { font-family: var(--mono); font-weight: 700; min-width: 1rem; text-align: center; font-size: .95rem; }
.cinc__out { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; text-align: right; color: var(--line); }
.cinc.on .cinc__out { color: var(--flag); }
.cinc--ripen.on .cinc__out { color: var(--peach-deep, #c45f3a); }
.calc__ripen { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 2.5px solid var(--ink); }
.calc__ripen h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--peach-deep, #c45f3a); margin-bottom: .3rem; }

.calc__result { background: var(--ink); color: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 1.8rem 1.7rem; position: sticky; top: 84px; }
.calc__stamp { font-family: var(--mono); font-size: .64rem; letter-spacing: .15em; font-weight: 700; color: var(--lemon-br); }
.calc__score { font-family: var(--serif); font-size: 4.8rem; font-weight: 700; line-height: 1; color: var(--paper); margin-top: .2rem; }
.calc__score small { font-size: 1.2rem; color: #8c856f; }
.calc__verdict { font-family: var(--mono); font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin: .35rem 0 1.2rem; }
.calc__verdict.is-peach       { color: var(--peach-br); }
.calc__verdict.is-zest        { color: var(--lemon-br); }
.calc__verdict.is-sour        { color: #ec6a5c; }
.calc__verdict.is-topeach     { color: #ffd5be; text-shadow: 0 0 14px rgba(255,180,145,.55); }
.calc__verdict.is-pucker-max  { color: #ff7a3a; text-shadow: 0 0 12px rgba(255,99,40,.55); }

/* Top-peach mode — flashy congratulations when score goes negative */
.calc__result { transition: background .35s ease, box-shadow .35s ease; overflow: hidden; }
.calc__result.is-topeach {
  background: linear-gradient(135deg, #2b220f 0%, #4a2f1b 55%, #5a3826 100%);
  box-shadow: 0 0 0 2.5px var(--peach-br), 0 12px 0 var(--ink), 0 0 48px rgba(244,169,131,.35);
}
.calc__result.is-overload {
  background: linear-gradient(135deg, #1a160c 0%, #3a1c0a 60%, #582408 100%);
  box-shadow: 0 0 0 2.5px #ff7a3a, 0 12px 0 var(--ink), 0 0 36px rgba(255,99,40,.35);
}
.calc__hooray {
  display: block;
  margin-top: 1rem;
  padding: .9rem 1rem;
  color: var(--ink);
  border: 2px solid var(--paper);
  border-radius: var(--radius);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
  box-shadow: 0 4px 0 var(--ink);
  transition: background .3s ease, box-shadow .3s ease, color .3s ease;
}
.calc__hooray strong { display: block; margin-top: .15rem; font-weight: 700; font-size: 1.08rem; }
.calc__hooray-stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: #fffdf2;
  border: 1.5px solid var(--ink);
  padding: .15rem .5rem;
  margin-bottom: .25rem;
}

/* Per-band callout colour treatments */
.calc__hooray.is-topeach {
  background: linear-gradient(95deg, var(--peach) 0%, var(--peach-br) 60%, #ffd5be 100%);
  box-shadow: 0 4px 0 #6b3a22;
  animation: hooray-flash 1.1s ease-in-out infinite alternate;
}
.calc__hooray.is-peach {
  background: linear-gradient(95deg, #f7e1d2 0%, #fbe9d8 60%, #fff3e2 100%);
  box-shadow: 0 4px 0 #8a4e30;
}
.calc__hooray.is-zest {
  background: linear-gradient(95deg, var(--lemon-br) 0%, #ffe488 60%, #fff3b5 100%);
  box-shadow: 0 4px 0 #7c5a00;
}
.calc__hooray.is-sour {
  background: linear-gradient(95deg, var(--lemon) 0%, #f0b341 60%, var(--peach-br) 100%);
  box-shadow: 0 4px 0 #5e3f00;
  color: var(--ink);
}
.calc__hooray.is-pucker {
  background: linear-gradient(95deg, var(--sour) 0%, #c0481f 60%, var(--flag) 100%);
  box-shadow: 0 4px 0 #3a1408;
  color: #fffdf2;
}
.calc__hooray.is-pucker .calc__hooray-stamp { color: var(--ink); }
.calc__hooray.is-pucker-max {
  background: linear-gradient(95deg, var(--flag) 0%, #8a2618 55%, #3a1408 100%);
  box-shadow: 0 4px 0 #1a0904;
  color: #fffdf2;
  animation: hooray-danger 1.3s ease-in-out infinite alternate;
}
.calc__hooray.is-pucker-max .calc__hooray-stamp { color: var(--ink); background: #ffd5c8; }

@keyframes hooray-flash {
  0%   { transform: translateY(0) scale(1);     box-shadow: 0 4px 0 #6b3a22; }
  100% { transform: translateY(-2px) scale(1.015); box-shadow: 0 6px 0 #6b3a22, 0 0 22px rgba(255,213,190,.55); }
}
@keyframes hooray-danger {
  0%   { transform: translateY(0) scale(1);     box-shadow: 0 4px 0 #1a0904; }
  100% { transform: translateY(-2px) scale(1.015); box-shadow: 0 6px 0 #1a0904, 0 0 22px rgba(184,55,42,.65); }
}
.calc__result.is-topeach .calc__score { color: #ffd5be; text-shadow: 0 0 12px rgba(255,213,190,.45); }
.calc__result.is-topeach .calc__score small { color: #c6bea5; opacity: .55; }
.calc__result.is-overload .calc__score { color: #ff7a3a; text-shadow: 0 0 12px rgba(255,122,58,.45); }
@media (prefers-reduced-motion: reduce) {
  .calc__hooray.is-topeach,
  .calc__hooray.is-pucker-max { animation: none; }
}
.calc__meter { height: 20px; border: 2px solid var(--paper); border-radius: 10px; overflow: hidden; display: flex; position: relative; }
.calc__meter i { height: 100%; }
.calc__meter i:nth-child(1){ background: var(--peach); flex: 25; }
.calc__meter i:nth-child(2){ background: var(--lemon-br); flex: 30; }
.calc__meter i:nth-child(3){ background: var(--lemon); flex: 21; }
.calc__meter i:nth-child(4){ background: var(--sour); flex: 24; }
.calc__pin { position: absolute; top: -6px; width: 4px; height: 32px; background: var(--paper); border: 1px solid var(--ink); transition: left .45s cubic-bezier(.2,.7,.2,1); }
.calc__break { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid #3a3527; font-family: var(--mono); font-size: .8rem; color: #c6bea5; display: flex; flex-direction: column; gap: .45rem; }
.calc__break span { display: flex; justify-content: space-between; }
.calc__break .tot { color: var(--lemon-br); font-weight: 700; }
.calc__reset { margin-top: 1.2rem; width: 100%; justify-content: center; }
@media (max-width: 880px) {
  .calc { grid-template-columns: 1fr; }
  .calc__result { position: static; }
}

/* ---- Illustrations ------------------------------------------- */
.illo { display: block; height: auto; max-width: 100%; }
.illo--pop { filter: drop-shadow(6px 6px 0 rgba(33,29,18,.16)); }

/* hero mascot — peeks out from behind the score card */
.hero__visual { position: relative; }
.hero__visual .gauge { position: relative; z-index: 2; }
.hero-mascot { position: absolute; width: 46%; max-width: 224px; left: -13%; bottom: -12%; z-index: 1; }

/* full-bleed illustration strip */
.illo-strip { width: 100%; margin-inline: auto; }
.illo-strip--rogues { max-width: 940px; }
.illo-strip--ripen { max-width: 760px; }
.illo-cap { text-align: center; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--ink-3); margin-top: .8rem; }

/* trophy in the scoreboard heading */
.illo-trophy { width: 150px; margin-bottom: 1.2rem; }

/* footer sign-off wave */
.foot-wave { width: 118px; margin-top: 1.4rem; }

/* mascot beside the calculator heading */
.calc-mascot { width: 108px; flex: none; }
.head--mascot { display: flex; align-items: flex-start; gap: 1.4rem; }
.head--mascot > div { flex: 1; }

/* a character peeking at a hero card */
.char-peek { position: absolute; width: 34%; max-width: 158px; z-index: 4; }
.char-peek--lemon { right: -7%; bottom: -8%; }
.char-peek--peach { left: -9%; bottom: -7%; }

@media (max-width: 720px) {
  .hero-mascot { display: none; }
  .illo-trophy { width: 116px; }
  .head--mascot { gap: 1rem; }
  .calc-mascot { width: 64px; }
  .char-peek { display: none; }
}

/* ---- Illustrations v2 ---------------------------------------- */
.illo-wide  { width: 100%; max-width: 680px; margin-inline: auto; }
.illo-scene { width: 100%; max-width: 430px; margin-inline: auto; }

/* for-workers hero — soft grove backdrop, cream wash keeps text legible */
.hero--grove {
  background:
    linear-gradient(rgba(246,239,218,.58), rgba(246,239,218,.58)),
    url(../img/grove-bg.webp) center bottom / cover no-repeat var(--paper);
}

/* decorative grove band above the footer */
.grove-band { height: clamp(64px, 8vw, 108px); background: #f3ecd6 url(../img/band-bg.webp) center bottom / auto 100% repeat-x; border-top: 2.5px solid var(--ink); }

/* faint confetti section — cream wash drops the pattern behind the text */
.bg-confetti {
  background-image: linear-gradient(rgba(246,239,218,.78), rgba(246,239,218,.78)), url(../img/confetti.webp);
  background-size: auto, 430px;
  background-repeat: repeat, repeat;
}

/* celebrate character peeking on a CTA */
.section.cta-band { position: relative; overflow: hidden; }
.cta-cheer { position: absolute; width: 140px; bottom: 0; right: clamp(6px, 5vw, 72px); z-index: 3; }

/* handshake floating in the pricing hero */
.pricing-hero-img { position: absolute; right: clamp(-10px, 2vw, 36px); bottom: -8px; width: clamp(190px, 26vw, 312px); z-index: 1; }

@media (max-width: 720px) {
  .cta-cheer { width: 88px; right: 2px; }
  .pricing-hero-img { display: none; }
}

/* ---- Cards & grids ------------------------------------------- */
.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--card); border: 2.5px solid var(--ink);
  border-radius: var(--radius); padding: 1.7rem 1.6rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--lemon); }
.card--peach:hover { box-shadow: 6px 6px 0 var(--peach); }
.card__ix { font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--sour); letter-spacing: .08em; text-transform: uppercase; }
.card h3 { margin: .7rem 0 .5rem; }
.card p { font-size: .96rem; }

.head { max-width: 44rem; margin-bottom: 1.9rem; }
.head .kicker { margin-bottom: .7rem; }
.head h2 { margin-bottom: .65rem; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .kicker { justify-content: center; }

/* ---- Stat strip ----------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 2.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--card); padding: 1.7rem 1.4rem; border-right: 2px solid var(--ink); }
.stat:last-child { border-right: 0; }
.stat__n { font-family: var(--serif); font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 700; color: var(--ink); line-height: 1; }
.stat__n em { color: var(--lemon); font-style: normal; }
.stat__l { font-size: .85rem; color: var(--ink-3); margin-top: .5rem; }

/* ---- Incident table (demerit list) -------------------------- */
.dtable { width: 100%; border-collapse: collapse; font-size: .93rem; }
.dtable th, .dtable td { text-align: left; padding: .85rem 1rem; border-bottom: 1.5px solid var(--line); }
.dtable thead th { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dtable tbody tr:hover { background: var(--paper-2); }
.dtable td.pts { font-family: var(--mono); font-weight: 700; text-align: right; white-space: nowrap; }
.dtable td.pts.up { color: var(--flag); }
.dtable td.pts.down { color: var(--peach-deep, #c45f3a); }

/* ---- Record artifact ----------------------------------------- */
.record { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-pop); font-family: var(--mono); }
.record__bar { background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; display: flex; justify-content: space-between; align-items: center; font-size: .72rem; letter-spacing: .1em; font-weight: 600; }
.record__bar .dotrow { display: flex; gap: .35rem; }
.record__bar .dotrow i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.record__body { padding: 1.2rem 1.3rem; }
.record__field { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1.5px dashed var(--line); font-size: .82rem; }
.record__field:last-child { border-bottom: 0; }
.record__field .k { color: var(--ink-3); }
.record__field .v { color: var(--ink); font-weight: 600; }
.record__field .v.up { color: var(--flag); }
.record__field .v.down { color: var(--peach-deep, #c45f3a); }

/* ---- Steps ---------------------------------------------------- */
.steps { counter-reset: step; display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; padding: 2rem 0; border-bottom: 2px solid var(--line); align-items: start; }
.step:last-child { border-bottom: 0; }
.step__n { counter-increment: step; font-family: var(--serif); font-size: 2.6rem; font-weight: 700; color: var(--lemon); line-height: 1; width: 3.4rem; }
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: .5rem; }
.step p { font-size: .98rem; max-width: 44rem; }

/* ---- Scoreboard ----------------------------------------------- */
.scoreboard { background: var(--ink); border-radius: var(--radius); overflow: hidden; border: 2.5px solid var(--ink); }
.scoreboard__head { padding: 1rem 1.4rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #3a3527; }
.scoreboard__head h3 { color: var(--lemon-br); font-family: var(--mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.sb-row { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 1rem; align-items: center; padding: .85rem 1.4rem; border-bottom: 1px solid #322e22; }
.sb-row:last-child { border-bottom: 0; }
.sb-row__rank { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--lemon); }
.sb-row__name { color: var(--paper); font-weight: 600; font-size: .95rem; }
.sb-row__name small { display: block; color: #8c856f; font-weight: 400; font-size: .78rem; }
.sb-row__score { font-family: var(--mono); font-weight: 700; color: var(--lemon-br); font-size: 1.05rem; }

/* ---- Pricing -------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.tier { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 1.9rem 1.6rem; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.tier:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--lemon); }
.tier--feature { background: var(--ink); }
.tier--feature, .tier--feature .tier__price, .tier--feature h3 { color: var(--paper); }
.tier--feature:hover { box-shadow: 6px 6px 0 var(--lemon-br); }
.tier--feature .tier__name { color: var(--lemon-br); }
.tier--feature .tier__desc, .tier--feature li { color: #cbc3aa; }
.tier--feature li::before { border-color: var(--lemon-br); }
.tier__name { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sour); font-weight: 700; }
.tier__price { font-family: var(--serif); font-size: 2.7rem; font-weight: 700; color: var(--ink); line-height: 1; margin: .7rem 0 .2rem; }
.tier__price small { font-size: .88rem; font-weight: 500; color: var(--ink-3); font-family: var(--sans); }
.tier__desc { font-size: .88rem; color: var(--ink-3); min-height: 3rem; }
.tier ul { display: flex; flex-direction: column; gap: .55rem; margin: 1.2rem 0; flex: 1; }
.tier li { font-size: .89rem; padding-left: 1.5rem; position: relative; }
.tier li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; background: var(--lemon); border: 1.5px solid var(--ink); border-radius: 50%; }

/* ---- Pledge / item grid -------------------------------------- */
.pledge { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.pledge__item { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; }
.pledge__mark { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; }
.pledge__mark--lemon { background: var(--lemon); color: var(--ink); }
.pledge__mark--peach { background: var(--peach); color: var(--ink); }
.pledge__item h4 { font-family: var(--sans); font-weight: 800; font-size: 1rem; color: var(--ink); margin-bottom: .25rem; }
.pledge__item p { font-size: .88rem; }

/* ---- Pull quote ----------------------------------------------- */
.pull { font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.26; font-weight: 500; color: var(--ink); letter-spacing: -.025em; }
.pull em { color: var(--lemon); font-style: italic; }
.pull .peachy { color: var(--peach); font-style: normal; }
.pull__src { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--ink-3); margin-top: 1.4rem; text-transform: uppercase; }

/* ---- Note ----------------------------------------------------- */
.note { font-family: var(--mono); font-size: .8rem; line-height: 1.6; color: var(--ink-3); border-left: 3px solid var(--lemon); padding: .3rem 0 .3rem 1rem; }
.note--flag { border-color: var(--flag); }

/* ---- CTA / form ----------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 1rem; }
.cta-band .lede { max-width: 35rem; margin: 0 auto 1.3rem; }
.access-form { display: flex; gap: .6rem; max-width: 31rem; margin: 0 auto; }
.access-form input { flex: 1; font: inherit; font-size: .95rem; padding: .9rem 1rem; border: 2.5px solid var(--ink); border-radius: var(--radius); background: var(--card); color: var(--ink); }
.access-form input:focus { outline: none; box-shadow: 3px 3px 0 var(--lemon); }
.form-msg { margin-top: 1rem; font-family: var(--mono); font-size: .82rem; min-height: 1.2rem; }

/* ---- Footer --------------------------------------------------- */
.foot { background: var(--ink); color: #b4ac94; padding-block: clamp(2.2rem, 4vw, 3.4rem) 1.4rem; }
.foot__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 2px solid #3a3527; }
.foot__brand { display: flex; align-items: center; gap: .55rem; font-family: var(--serif); font-size: 1.45rem; font-weight: 700; color: var(--paper); margin-bottom: 1rem; }
.foot__brand .nav__mark { width: 30px; height: 30px; }
.foot__tag { font-size: .92rem; max-width: 23rem; }
.foot__col h5 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lemon-br); margin-bottom: 1rem; }
.foot__col a { display: block; font-size: .9rem; padding: .3rem 0; color: #c6bea5; }
.foot__col a:hover { color: var(--lemon-br); }
.foot__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.8rem; font-size: .8rem; color: #8c856f; }
.foot__bottom .mono { font-family: var(--mono); }

/* ---- Reveal --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.2,.6,.2,1), transform .65s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Responsive ----------------------------------------------- */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 380px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav__links, .nav__right .btn { display: none; }
  .nav__burger { display: flex; }
  .grid-2, .grid-3, .grid-4, .pledge { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 2px solid var(--ink); }
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .record__field { grid-template-columns: 1fr; gap: .2rem; }
  .access-form { flex-direction: column; }
  .foot__top { grid-template-columns: 1fr; }
  .citrus-ghost { opacity: .07; }
}
@media (max-width: 440px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0 !important; border-bottom: 2px solid var(--ink); }
}

/* ============================================================
   Cute layer — motion, reactive mascot, hand-drawn icons
   ============================================================ */

/* ---- Idle motion -------------------------------------------- */
@keyframes lm-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes lm-squish { 0% { transform: scale(1); } 28% { transform: scale(1.05,.93); } 55% { transform: scale(.97,1.04); } 80% { transform: scale(1.01,.99); } 100% { transform: scale(1); } }
@keyframes lm-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

.hero-mascot      { animation: lm-bob 4.2s ease-in-out infinite; }
.cta-cheer        { animation: lm-bob 3.6s ease-in-out infinite; }
.pricing-hero-img { animation: lm-bob 4.7s ease-in-out infinite; }
.char-peek        { animation: lm-bob 4s   ease-in-out infinite; }
.calc-mascot      { animation: lm-bob 3.9s ease-in-out infinite; transition: transform .2s ease; }
.head--mascot:hover .calc-mascot { animation: lm-wiggle .5s ease-in-out; }

/* ---- Juicy press -------------------------------------------- */
.btn  { transition: transform .22s cubic-bezier(.34,1.55,.5,1), box-shadow .18s ease, background .16s ease; }
.btn:active { transform: translate(0,1px) scale(.96); box-shadow: none; }
.card { transition: transform .22s cubic-bezier(.34,1.5,.55,1), box-shadow .22s ease; }
.tier { transition: transform .22s cubic-bezier(.34,1.5,.55,1), box-shadow .22s ease; }

/* gauge / calculator panel lands with a squish */
.gauge__card.is-popped { animation: lm-squish .55s ease; }

/* ---- Reactive calculator mascot ----------------------------- */
.calc-face { width: 78px; height: 78px; display: block; margin: -.3rem auto .5rem; }
.calc-face .cf-body { transition: fill .35s ease; }
.calc-face .cf-mouth, .calc-face .cf-brow { transition: d .3s ease, transform .3s ease; }

/* ---- Hand-drawn icons --------------------------------------- */
svg.ic { width: 1.5em; height: 1.5em; flex: none; vertical-align: -.34em; }
svg.ic--sm { width: 1.2em; height: 1.2em; }
.pledge__mark svg.ic { width: 1.25rem; height: 1.25rem; vertical-align: 0; }

/* ---- Simulator category headers ----------------------------- */
.cat-head {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sour); font-weight: 700;
  padding: 1.4rem 0 .55rem; border-bottom: 2.5px solid var(--ink);
  margin-top: .4rem;
}
.cat-head:first-child { margin-top: 0; padding-top: .2rem; }

/* ---- Boss Confessions --------------------------------------- */
.confess-carousel { position: relative; max-width: 780px; margin: 0 auto; }
.confess-stage { position: relative; padding: 0 56px; }
.confess-card--solo { min-height: 230px; padding: 2rem 2.2rem 1.7rem; }
.confess-card--solo .confess-q { font-size: clamp(1.18rem, 1.9vw, 1.62rem); }
.cf-nav {
  position: absolute; top: 50%; margin-top: -22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); border: 2.5px solid var(--ink); box-shadow: var(--shadow-pop);
  display: grid; place-items: center; cursor: pointer; z-index: 2;
  transition: transform .2s cubic-bezier(.34,1.55,.5,1), box-shadow .18s ease, background .16s ease;
}
.cf-nav:hover  { background: var(--lemon); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.cf-nav:active { transform: translate(0,1px) scale(.96); box-shadow: 2px 2px 0 var(--ink); }
.cf-nav--prev { left: 0; }
.cf-nav--next { right: 0; }
.cf-nav svg { width: 18px; height: 18px; }
.cf-dots { display: flex; justify-content: center; gap: .55rem; margin-top: 1.4rem; }
.cf-dot {
  width: 11px; height: 11px; border: 2px solid var(--ink); background: var(--card);
  border-radius: 50%; padding: 0; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.cf-dot.is-on  { background: var(--lemon); }
.cf-dot:hover  { transform: scale(1.18); }

/* ---- v3 placements ----------------------------------------- */
.hero--kampong {
  background:
    linear-gradient(rgba(246,239,218,.6), rgba(246,239,218,.6)),
    url(../img/kampong-bg.webp) center bottom / cover no-repeat var(--paper);
}
.illo-balance { width: 100%; max-width: 480px; margin: 1.4rem auto 0; display: block; }
.lemonified-img { width: clamp(108px, 14vw, 142px); float: right; margin: -.4rem -.4rem .5rem 1rem; }
@media (max-width: 720px) {
  .lemonified-img { float: none; width: 110px; display: block; margin: 0 auto .8rem; }
}
.confess-card {
  background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.4rem; box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  transition: opacity .4s ease, transform .4s ease;
}
.confess-card.is-swap { opacity: 0; transform: translateY(-6px); }
.confess-q {
  font-family: var(--serif); font-size: clamp(1.06rem, 1.5vw, 1.32rem); line-height: 1.34;
  color: var(--ink); font-style: normal; font-weight: 500;
  margin: 0 0 1rem; flex: 1;
}
.confess-q::before { content: "\201C"; font-size: 2.2rem; line-height: 0; color: var(--lemon); margin-right: .12rem; vertical-align: -.42em; }
.confess-q::after  { content: "\201D"; font-size: 2.2rem; line-height: 0; color: var(--lemon); margin-left: .1rem; vertical-align: -.42em; }
.confess-meta { border-top: 2px dashed var(--line); padding-top: .85rem; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.confess-c   { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; color: var(--ink-3); font-style: normal; }
.confess-t   {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--sour); background: var(--lemon-br);
  border: 1.5px solid var(--ink); border-radius: 2px; padding: .22rem .55rem;
}
@media (max-width: 720px) { .confess-stage { padding: 0; } .cf-nav { display: none; } .confess-card { box-shadow: 4px 4px 0 var(--ink); } }