:root{--paper:#f8f8f1;--ink:#20231e;--muted:#70746b;--line:#e2e4d8;--lime:#d4f16b;--coral:#ffad98;--sky:#bcdcf0;--card:#fff;--shadow:0 14px 40px #33391c09}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.55}h1,h2,h3,.brand{font-family:Manrope,sans-serif;line-height:1.08;letter-spacing:-.045em}h1{font-size:clamp(44px,5.6vw,80px);font-weight:800;margin:22px 0}h2{font-size:clamp(30px,3.5vw,48px);margin:14px 0 24px}h3{font-size:23px}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,.button{border:1px solid var(--ink);background:var(--ink);color:white;border-radius:12px;padding:13px 21px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;transition:transform .2s,box-shadow .2s}button:hover,.button:hover{transform:translateY(-2px);box-shadow:0 5px 10px #20231e15}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.button.secondary,button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}.button.lime,button.lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}:focus-visible{outline:3px solid #6a8e21;outline-offset:4px}.wrap{max-width:1240px;margin:auto;padding:0 40px}.site-nav{height:100px;display:flex;align-items:center;gap:36px}.brand{font-weight:800;font-size:28px;letter-spacing:-.07em;display:flex;align-items:center;gap:9px}.brand-icon{width:28px;height:28px;border-radius:8px;background:var(--ink);position:relative}.brand-icon:before,.brand-icon:after{content:'';position:absolute;background:var(--lime);width:5px;height:9px;top:9px;border-radius:4px}.brand-icon:before{left:7px}.brand-icon:after{right:7px}.nav-links{display:flex;gap:27px;margin:auto}.nav-actions{display:flex;align-items:center;gap:22px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:8px;align-items:center}.eyebrow:before{content:'';width:7px;height:7px;background:#779336;border-radius:50%}.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:58px;padding:65px 0 100px}.hero p{font-size:18px;color:var(--muted);max-width:490px}.actions{display:flex;gap:12px;margin:30px 0 18px;flex-wrap:wrap}.fine{font-size:12px;color:var(--muted)}.hero-scene{background:#e8eddb;border-radius:36px;padding:28px;min-height:510px;position:relative;overflow:hidden}.scene-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#626a56}.mascot{width:170px;height:155px;border-radius:48% 48% 42% 42%;background:radial-gradient(circle at 30% 20%,#edffb6,var(--lime) 55%,#9fbd48);box-shadow:inset -10px -14px 20px #6d8d2320,0 24px 28px #6c783f22;display:flex;align-items:center;justify-content:center;gap:13px;position:relative;transform:rotate(-7deg);animation:breathe 5s ease-in-out infinite}.eye{width:37px;height:48px;background:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:inset 1px 2px 5px #00000015;overflow:hidden}.pupil{width:15px;height:22px;border-radius:50%;background:#22271c;transform:translate(var(--eye-x,0px),var(--eye-y,0px))}.mascot:after{content:'';width:22px;height:9px;border-bottom:3px solid #52692d;border-radius:0 0 50% 50%;position:absolute;bottom:31px}.mascot[data-state=error]{background:var(--coral)}.mascot[data-state=thinking] .pupil{height:12px}.mascot[data-state=success]{animation:celebrate .5s ease}.mascot.blink .eye{transform:scaleY(.12)}.hero-scene>.mascot{margin:35px auto 24px}.demo-card{background:#ffffffed;border:1px solid #fff;border-radius:16px;padding:18px;box-shadow:var(--shadow);margin:12px 0}.demo-card small{color:var(--muted)}.avatar{width:38px;height:38px;border-radius:13px;background:var(--lime);display:grid;place-items:center;font-weight:800;flex-shrink:0}.avatar.coral{background:var(--coral)}.avatar.sky{background:var(--sky)}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.tag{display:inline-flex;border-radius:6px;background:#edf1e4;font-size:11px;padding:4px 8px;letter-spacing:.02em}.tag.coral{background:#ffede7}.mini-line{height:5px;background:#e6e9df;border-radius:4px;margin-top:14px;width:80%}.mini-line.short{width:50%}.scene-caption{font-size:11px;text-align:center;color:#657052;margin-top:17px}.section{padding:80px 0;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.section-head p{max-width:430px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}.card p{color:var(--muted)}.card-num{font-size:12px;color:var(--muted);margin-bottom:36px}.card.lime{background:#edf5d9}.card.sky{background:#e4eff6}.card.coral{background:#ffede7}.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.flow{padding:35px;background:#e9ecdf;border-radius:24px}.flow-step{display:flex;gap:18px;margin:18px 0;padding:18px;border-radius:14px;background:white}.flow-step strong{display:block}.flow-step span{color:var(--muted);font-size:13px}.integrations{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.integration{background:white;border:1px solid var(--line);padding:13px 20px;border-radius:12px}.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;max-width:1240px;margin:30px auto;align-items:stretch}.price{font-size:42px;font-weight:800;letter-spacing:-.05em}.price small{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}.pricing ul{padding-left:20px;line-height:2.1;font-size:14px}.cta{background:var(--ink);color:var(--paper);border-radius:26px;text-align:center;padding:65px 25px}.cta h2{max-width:670px;margin:0 auto 25px}footer{padding:45px 0;display:flex;gap:26px;justify-content:space-between;font-size:13px;color:var(--muted)}footer div{display:flex;gap:22px}details{border-bottom:1px solid var(--line);padding:21px 0}summary{font-weight:600;cursor:pointer}details p{color:var(--muted);max-width:850px}.auth-layout{min-height:calc(100vh - 100px);display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:30px 0 80px}.auth-card{padding:40px;background:white;border:1px solid var(--line);border-radius:24px}.auth-card h1{font-size:34px}.field{display:flex;flex-direction:column;gap:7px;margin:17px 0;font-size:13px;font-weight:600}input,textarea,select{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:100%;font-weight:400}textarea{min-height:110px;resize:vertical}.full{width:100%}.error{color:#a23921;background:#fff0ea;padding:14px;border-radius:10px;white-space:pre-wrap}.hidden{display:none!important}.app-shell{display:grid;grid-template-columns:235px 1fr;min-height:100vh}.sidebar{background:#eeefe5;border-right:1px solid var(--line);padding:32px 20px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.sidebar .brand{margin:0 12px 36px}.sidebar nav{display:flex;flex-direction:column;gap:4px}.sidebar a.nav-item{padding:10px 13px;border-radius:9px;color:#6a6f61;font-size:13px;display:flex;gap:11px;align-items:center}.sidebar a.nav-item.active{color:var(--ink);background:#dbe5bd;font-weight:600}.nav-symbol{font-size:18px;width:22px;text-align:center}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:20px}.app-main{min-width:0}.app-top{padding:21px 42px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px}.app-content{max-width:1450px;padding:40px;margin:auto}.app-content h1{font-size:34px;margin:8px 0 12px}.app-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:15px}.app-heading p{margin:0;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:25px 0}.metric{padding:22px;background:var(--card);border:1px solid var(--line);border-radius:16px}.metric span{font-size:12px;color:var(--muted)}.metric strong{display:block;font-size:29px;margin-top:10px;letter-spacing:-.04em}.app-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}.empty{padding:36px;text-align:center;color:var(--muted);border:1px dashed #cdd3bd;border-radius:14px;margin:18px 0}.empty h3{color:var(--ink);font-size:20px}.list-item{padding:18px 0;border-bottom:1px solid var(--line)}.list-item:last-child{border:0}.list-item h3{font-size:16px;margin:0 0 6px;letter-spacing:-.02em}.list-item p{font-size:13px;margin:5px 0;color:var(--muted)}.list-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.list-actions button{font-size:12px;padding:7px 12px}.notice{background:#edf2dd;border:1px solid #dce5bf;border-radius:14px;padding:18px 22px;font-size:13px;margin-bottom:24px}.dialog{border:1px solid var(--line);border-radius:22px;padding:30px;max-width:570px;width:calc(100% - 32px);background:var(--paper);color:var(--ink)}.dialog::backdrop{background:#20231e88;backdrop-filter:blur(3px)}.dialog h2{font-size:27px}.toast{position:fixed;bottom:24px;right:24px;z-index:20;border-radius:12px;background:var(--ink);color:white;max-width:400px;padding:16px 22px;box-shadow:var(--shadow)}.skeleton{height:150px;background:linear-gradient(100deg,#e9ecdf 25%,#f5f6ef 50%,#e9ecdf 75%);background-size:200% 100%;animation:shimmer 1.5s linear infinite;border-radius:16px}.badge{font-size:11px;padding:5px 8px;background:#e9eddf;border-radius:5px;white-space:nowrap}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f0f2e9;padding:16px;border-radius:12px;font:13px/1.7 ui-monospace,monospace}.mobile-menu{display:none}.dark{--paper:#20241e;--ink:#f0f3e9;--muted:#a9b09f;--line:#3e4636;--card:#292f24}.dark .sidebar{background:#262d21}.dark .sidebar a.nav-item.active{background:#45552e}.dark .notice{background:#354127;border-color:#51633d}.dark button{background:var(--lime);color:#20231e}.dark .badge,.dark pre{background:#354127}.dark .app-top{background:#20241e}.subtle{color:var(--muted)}@keyframes breathe{50%{transform:translateY(-7px) rotate(-4deg)}}@keyframes celebrate{50%{transform:translateY(-20px) rotate(8deg)}}@keyframes shimmer{to{background-position:-200% 0}}@media(min-width:1600px){.wrap{max-width:1400px}.hero{gap:100px}.hero-scene{min-height:560px}}@media(max-width:1000px){.nav-links{display:none}.site-nav{justify-content:space-between}.hero{gap:30px}.hero-scene{padding:22px;min-height:450px}.app-shell{grid-template-columns:195px 1fr}.app-content{padding:26px}.app-top{padding:20px 26px}.metrics{grid-template-columns:repeat(2,1fr)}.app-grid{grid-template-columns:1fr}.grid{gap:12px}.card{padding:22px}.sidebar{padding:28px 12px}}@media(max-width:700px){.wrap{padding:0 22px}.site-nav{height:80px}.nav-actions{gap:15px;font-size:13px}.nav-actions .button{padding:10px 13px}.hero{grid-template-columns:1fr;padding:38px 0 55px;gap:35px}.hero p{font-size:16px}.hero-scene{min-height:465px}.hero h1{max-width:520px}.section{padding:50px 0}.grid,.split,.pricing,.auth-layout{grid-template-columns:1fr}.section-head{display:block}.split{gap:30px}.pricing{gap:16px}.auth-layout{gap:20px}.auth-aside{display:none}.auth-card{padding:25px}footer{flex-direction:column}footer div{flex-wrap:wrap;gap:17px}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-260px;width:235px;z-index:10;transition:left .2s}.sidebar.open{left:0;box-shadow:0 0 0 100vmax #0006}.mobile-menu{display:inline-flex;padding:6px 12px}.app-top{padding:16px 20px;font-size:12px}.app-content{padding:24px 20px}.app-content h1{font-size:28px}.app-heading{align-items:start;flex-wrap:wrap}.app-heading button{font-size:12px}.metric{padding:17px}.metric strong{font-size:25px}.metrics{gap:10px}.card{padding:22px}.price{font-size:36px}.cta{padding:45px 20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.pupil{transform:none!important}}


/* ══════════════════════════════════════════════════════════════════════════
   BENCHO DESIGN TOKENS & COMPONENTS (EyeTracker, Particles, SlideConfirm, Like)
   MIT Licensed — bencho.dev/licence
   Mapped to SHOUD Design System:
   --bg: var(--paper) | --card: var(--card) | --fill-on: var(--ink) | --fill-slab: var(--card)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Brand Styling: SHOUD Bots ────────────────────────── */
.brand-bots {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: inherit;
  color: #729622;
  margin-left: 0.16em;
  display: inline-block;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: inherit;
  vertical-align: baseline;
}
.dark .brand-bots,
[data-theme="dark"] .brand-bots {
  color: var(--lime);
}
.brand-pill {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: inherit;
  color: #729622;
  margin-left: 0.16em;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.brand-pill:before {
  display: none !important;
}

eye-tracker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

.eyt {
  width: var(--eyt-size, 140px);
  height: var(--eyt-size, 140px);
  display: grid;
  place-items: center;
  position: relative;
  margin: auto;
}

.eyt-ball {
  width: var(--eyt-size, 140px);
  height: var(--eyt-size, 140px);
  overflow: visible;
}

.eyt-body {
  fill: #242921;
  transition: fill 0.3s ease;
}

.eyt-eye {
  fill: #ffffff;
}

.eyt-ball[data-poke] {
  cursor: pointer;
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.24, 1.34, 0.38, 1);
  -webkit-tap-highlight-color: transparent;
}

.eyt-ball[data-poke]:hover {
  transform: scale(1.04);
}

.eyt-ball[data-poke]:active {
  transform: scale(0.96);
  transition-duration: 160ms;
}

.eyt-say {
  position: absolute;
  left: calc(50% + var(--eyt-size, 140px) * 0.34);
  top: calc(50% + var(--eyt-size, 140px) * 0.28);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 6px 14px 14px 14px;
  background: var(--tint, #242921);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transform-origin: top left;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.24, 1.34, 0.38, 1), background-color 220ms ease;
  z-index: 20;
}

.eyt-say[data-on] {
  opacity: 1;
  transform: scale(1);
}

.eyt-caret {
  width: 1.5px;
  height: 13px;
  border-radius: 1px;
  background: #ffffff;
  animation: pet-caret 1s steps(1) infinite;
}

@keyframes pet-caret {
  50% { opacity: 0; }
}

/* ── Particles ───────────────────────────────────────────── */
.ptc {
  position: relative;
  display: grid;
  place-items: center;
}

.ptc-canvas {
  display: block;
  color: var(--ink, #20231e);
  cursor: crosshair;
  touch-action: none;
}

/* ── Slide to Confirm ────────────────────────────────────── */
.sld {
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink, #20231e);
}

/* ── Bencho Like Component with Real-Time Persistence ────── */
.lk-frame {
  display: inline-grid;
  place-items: center;
}

.lk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--line, #e2e4d8);
  border-radius: 20px;
  background: var(--card, #ffffff);
  color: var(--ink, #20231e);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, background-color 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.lk:hover {
  transform: translateY(-1px);
  border-color: #ccd2bf;
}

.lk:active {
  transform: scale(0.96);
}

.lk-heart {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.lk-glyph {
  position: relative;
  z-index: 1;
  display: grid;
  color: #e5484d;
}

.lk-glyph[data-on] {
  animation: lk-pop 520ms cubic-bezier(0.3, 1.5, 0.4, 1) both;
}

.lk-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.lk-bloom {
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 17px solid #cc8ef5;
  animation: lk-bloom 560ms cubic-bezier(0.25, 0.8, 0.35, 1) both;
}

.lk-spoke {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(var(--a));
}

.lk-spoke i {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--c);
  animation: lk-dot 620ms cubic-bezier(0.2, 0.8, 0.3, 1) 200ms both;
}

.lk-spoke i:first-child { --side: -4px; --far: 0px; }
.lk-spoke i:last-child { --side: 4px; --far: -5px; width: 4px; height: 4px; margin: -2px 0 0 -2px; }

.lk-fw {
  position: absolute;
  left: 0;
  top: 0;
  animation: lk-fw-x 1000ms cubic-bezier(0.2, 0.7, 0.4, 1) var(--d) both;
}

.lk-fw i {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: lk-fw-y 1000ms linear var(--d) both;
}

.lk-count {
  display: flex;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.lk-wheel {
  position: relative;
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
}

.lk-digit {
  display: block;
  line-height: 1.25em;
}

.lk-digit.roll-in {
  animation: lk-roll-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lk-comma {
  line-height: 1.25em;
}

@keyframes lk-roll-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0%); opacity: 1; }
}

@keyframes lk-pop {
  0% { transform: scale(0.6); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes lk-heart {
  0%, 28% { transform: scale(0); }
  62% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes lk-bloom {
  0% { transform: scale(0.15); border-width: 17px; border-color: #e5484d; }
  40% { scale: 1; border-width: 17px; border-color: #cc8ef5; }
  75% { border-width: 2px; opacity: 1; }
  100% { transform: scale(1.15); border-width: 0; opacity: 0; border-color: #cc8ef5; }
}

@keyframes lk-dot {
  0% { transform: translate(12px, var(--side)) scale(1); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(calc(18px + var(--fly) * 14px + var(--far)), calc(var(--side) * 1.6)) scale(0); opacity: 1; }
}

@keyframes lk-fw-x {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--x), 0); }
}

@keyframes lk-fw-y {
  0% { transform: translate(0, 0); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  45% { transform: translate(0, var(--y)); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
  100% { transform: translate(0, calc(var(--y) + 30px)); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DEVICE OPTIMIZATIONS & MOBILE DRAWER NAVIGATION
   ══════════════════════════════════════════════════════════════════════════ */

/* Mobile Nav Toggle Button */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 40px;
  min-width: 40px;
}
.mobile-nav-toggle:hover,
.mobile-nav-toggle:active {
  background: #e9edd8;
  border-color: #c9d2b7;
}

/* Mobile Drawer Overlay */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(32, 36, 30, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
}
.mobile-drawer.open {
  display: block;
}
.mobile-drawer-content {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 86vw);
  height: 100%;
  background: var(--paper);
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.open .mobile-drawer-content {
  transform: translateX(0);
}
.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.mobile-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}
.mobile-drawer-links a {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.15s ease;
  text-decoration: none;
}
.mobile-drawer-links a:hover,
.mobile-drawer-links a:active {
  background: #e4ead6;
}
.mobile-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* Interactive Grid Responsive */
.interactive-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: center;
}

/* Table Responsive wrapper */
.table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  margin: 14px 0;
}

/* Global Device Optimizations */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main, .wrap, .section, .hero, .card {
  max-width: 100%;
  box-sizing: border-box;
}

/* Touch target refinements */
button, .button, input, select, textarea {
  touch-action: manipulation;
}

/* Fluid Typography and Padding for Screens */
@media (max-width: 1024px) {
  .wrap {
    padding: 0 28px;
  }
  .hero {
    gap: 36px;
  }
  .interactive-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mobile-nav-toggle {
    display: inline-flex;
  }
  .nav-links {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .wrap {
    padding: 0 20px;
  }
  .site-nav {
    height: 76px;
    gap: 14px;
  }
  .brand {
    font-size: 24px;
  }
  .nav-login-link {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 30px 0 45px;
    gap: 28px;
  }
  .hero-scene {
    min-height: auto;
    padding: 22px 18px;
    border-radius: 24px;
  }
  .section {
    padding: 50px 0;
  }
  .pricing {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .auth-layout {
    grid-template-columns: 1fr;
    padding: 24px 0 50px;
    gap: 24px;
  }
  .auth-aside {
    display: none;
  }
  .auth-card {
    padding: 24px 20px;
    border-radius: 20px;
  }
  footer {
    flex-direction: column;
    gap: 22px;
    padding: 35px 0;
  }
  footer div {
    flex-wrap: wrap;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 0 16px;
  }
  .site-nav {
    height: 68px;
    gap: 8px;
  }
  .brand {
    font-size: 21px;
    gap: 6px;
  }
  .brand img {
    width: 25px;
    height: 25px;
  }
  .nav-actions {
    gap: 8px;
  }
  .nav-actions .button {
    padding: 8px 12px;
    font-size: 12px;
  }
  h1 {
    font-size: 34px !important;
    margin: 14px 0 !important;
  }
  h2 {
    font-size: 25px !important;
    margin: 10px 0 18px !important;
  }
  .actions {
    flex-direction: column;
    width: 100%;
  }
  .actions .button,
  .actions a.button {
    width: 100%;
    text-align: center;
  }
  .card {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .price {
    font-size: 34px;
  }
  .eyt {
    --eyt-size: 115px !important;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .metric {
    padding: 16px;
  }
  .metric strong {
    font-size: 22px;
  }
  .dialog {
    padding: 22px 18px;
    border-radius: 18px;
  }
  .dialog h2 {
    font-size: 22px;
  }
}

@media (max-width: 360px) {
  .wrap {
    padding: 0 12px;
  }
  .brand {
    font-size: 19px;
  }
  .metrics {
    grid-template-columns: 1fr;
  }
}

/* ── Badges & Tags High-Contrast Text Fix (Prevents white-on-light washout) ── */
.badge {
  font-size: 11px;
  font-weight: 700 !important;
  padding: 4px 9px;
  background: #e9eddf;
  color: #16200d !important;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.badge.lime {
  background: var(--lime) !important;
  color: #16200d !important;
  border: 1px solid #bede4f;
}
.badge.sky {
  background: var(--sky) !important;
  color: #0b2434 !important;
  border: 1px solid #9dcbe9;
}
.badge.coral {
  background: var(--coral) !important;
  color: #49140b !important;
  border: 1px solid #f2967e;
}

.tag {
  display: inline-flex;
  border-radius: 6px;
  background: #edf1e4;
  color: #16200d !important;
  font-size: 11px;
  font-weight: 700 !important;
  padding: 4px 9px;
  letter-spacing: .02em;
  align-items: center;
}
.tag.lime {
  background: var(--lime) !important;
  color: #16200d !important;
  border: 1px solid #bede4f;
}
.tag.sky {
  background: var(--sky) !important;
  color: #0b2434 !important;
  border: 1px solid #9dcbe9;
}
.tag.coral {
  background: #ffede7 !important;
  color: #7a2210 !important;
  border: 1px solid #f2967e;
}

/* ══ Label input ═══════════════════════════════════════════
   A field whose label is its placeholder until you are in it.
   On focus the label lifts into the top edge with a small hop
   running along its letters, the outline darkens in place, and
   the top line parts under the label from its middle outward.

   ── ONE THING MOVES ─────────────────────────────────────
   It used to DRAW its outline out of the notch, both ways
   round the field — and that was the field performing, which
   is too much for a thing you focus forty times a day. Now the
   outline is always whole; focus only changes its ink and
   opens the gap. The label is the event, and the line makes
   room for it.

   The gap is two short paths across the notch, each from the
   middle to one side, retracted from the middle outward by a
   negative dash offset. */

.lbi {
  /* Bencho Design Tokens Mapped to SHOUD Project Tokens */
  --fill-on: var(--ink, #181c14);
  --fill-slab: var(--paper, #f7f7f0);
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ink: var(--ink, #181c14);
  --ink-3: var(--muted, #66705d);
  --ink-4: var(--line, #8b9681);

  position: relative;
  font-family: var(--font-ui);
  display: block;
  /* room above the field for the lifted label */
  padding-top: 12px;
  width: 100%;
  margin: 12px 0 16px;
}

/* no fill: the field is only its outline */
.lbi-box {
  position: relative;
  background: transparent;
  cursor: text;
  width: 100%;
}

/* ── the outline ────────────────────────────────────────────
   Always whole. At rest a hairline of grey; focused, the ink
   at a hair heavier; left filled, a grey a step darker than
   rest. The gap across the top is the only part that moves. */
.lbi-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lbi-ring path {
  fill: none;
  stroke: color-mix(in srgb, var(--fill-on, #17181a) 32%, var(--fill-slab, #ffffff));
  stroke-width: 1;
  stroke-linecap: butt;
  transition: stroke 220ms ease, stroke-width 220ms ease;
}

.lbi[data-focus="true"] .lbi-ring path {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.lbi[data-filled="true"]:not([data-focus="true"]) .lbi-ring path {
  stroke: color-mix(in srgb, var(--fill-on, #17181a) 38%, var(--fill-slab, #ffffff));
}

/* the gap: whole at rest, parting from its middle when the
   label lifts. The dash is longer than the path so offset 0
   is the whole line and -1 is none of it. */
.lbi-gap {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  transition: stroke 220ms ease, stroke-width 220ms ease,
    stroke-dashoffset 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lbi[data-up="true"] .lbi-gap { stroke-dashoffset: -1; }

/* ── the label ──────────────────────────────────────────────
   Its placeholder self in the middle of the field, and its
   lifted self centred on the top edge — the second is the
   first moved up by half the field and scaled from its left. */
.lbi-label {
  position: absolute;
  left: var(--lbi-x, 18px);
  top: 50%;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: pre;
  color: var(--ink-4);
  transform-origin: left center;
  transform: translateY(-50%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
  cursor: text;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.lbi[data-up="true"] .lbi-label {
  transform: translateY(-50%) translateY(-26px) scale(0.78);
  color: var(--ink-3);
}

.lbi[data-focus="true"] .lbi-label { color: var(--fill-on, var(--ink)); }

.lbi-label span { display: inline-block; }

/* the hop: each letter lifts a hair and settles, one after the
   next, so the word ripples as it rises */
.lbi[data-focus="true"] .lbi-label span {
  animation: lbi-hop 460ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i) * 24ms);
}

.lbi-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 0 0 var(--lbi-x, 18px);
  border: 0;
  border-radius: inherit;
  background: transparent;
  font: inherit;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--fill-on, var(--ink));
  outline: none;
  box-sizing: border-box;
}

/* the reveal: the text passes through a soft blur rather than
   snapping between dots and letters. Two names so a second
   press restarts it. */
.lbi-field[data-flip="1"] { animation: lbi-flip-a 260ms ease-out; }

.lbi-field[data-flip="0"] { animation: lbi-flip-b 260ms ease-out; }

.lbi-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: color 160ms ease, scale 160ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.lbi-eye:hover { color: var(--fill-on, var(--ink)); }

.lbi-eye:active { scale: 0.96; }

/* the two icons in one place, trading places */
.lbi-eye svg {
  grid-area: 1 / 1;
  transition: opacity 220ms ease, scale 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}

.lbi-eye svg:last-child { opacity: 0; scale: 0.7; filter: blur(2px); }

.lbi-eye[data-show="true"] svg:first-child { opacity: 0; scale: 0.7; filter: blur(2px); }

.lbi-eye[data-show="true"] svg:last-child { opacity: 1; scale: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .lbi-ring path,
  .lbi-gap,
  .lbi-label { transition-duration: 160ms; }
}

@media (prefers-reduced-motion: reduce) {
  .lbi[data-focus="true"] .lbi-label span,
  .lbi-field { animation: none; }
}

@keyframes lbi-hop {
  0% { transform: translateY(0); }
  38% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes lbi-flip-a { from { filter: blur(3px); opacity: 0.5; } }

@keyframes lbi-flip-b { from { filter: blur(3px); opacity: 0.5; } }

/* ══════════════════════════════════════════════════════════════════════════
   FLOATING CURVED NAVIGATION BAR
   ══════════════════════════════════════════════════════════════════════════ */
.floating-nav-wrap {
  position: sticky;
  top: 16px;
  z-index: 1000;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  pointer-events: none;
}

.floating-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 16px;
  height: 64px;
  padding: 0 16px 0 22px;
  border-radius: 9999px;
  background: rgba(247, 247, 240, 0.90);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(214, 218, 202, 0.9);
  box-shadow: 0 12px 32px -4px rgba(24, 28, 20, 0.08), 0 2px 6px rgba(24, 28, 20, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-nav:hover {
  border-color: rgba(188, 194, 172, 0.95);
  box-shadow: 0 16px 36px -4px rgba(24, 28, 20, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.floating-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.04em;
  text-decoration: none;
}

.floating-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(234, 238, 224, 0.55);
  padding: 4px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(214, 218, 202, 0.5);
}

.floating-nav .nav-links a {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 9999px;
  transition: all 0.18s ease;
  text-decoration: none;
}

.floating-nav .nav-links a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.floating-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.floating-nav .nav-actions .button {
  padding: 9px 18px;
  font-size: 13px;
  border-radius: 9999px;
}

.desktop-only-inline { display: inline; }
.mobile-only-inline { display: none; }
@media (max-width: 640px) {
  .desktop-only-inline { display: none !important; }
  .mobile-only-inline { display: inline !important; }
}

.floating-nav .nav-login-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 9999px;
  transition: background 0.18s ease;
  text-decoration: none;
}
.floating-nav .nav-login-link:hover {
  background: rgba(234, 238, 224, 0.6);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM DOCK & TOUCH OPTIMIZATIONS
   ══════════════════════════════════════════════════════════════════════════ */
.app-mobile-dock {
  display: none;
}

@media (max-width: 960px) {
  .floating-nav .nav-links {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .floating-nav-wrap {
    top: max(8px, env(safe-area-inset-top));
    padding: 0 10px;
  }
  .floating-nav {
    height: 50px;
    padding: 0 8px 0 12px;
    gap: 6px;
  }
  .floating-nav .brand {
    font-size: 16px;
    gap: 5px;
  }
  .floating-nav .brand img {
    width: 20px;
    height: 20px;
  }
  .floating-nav .brand .brand-bots {
    font-size: 16px;
  }
  .floating-nav .nav-login-link {
    display: none;
  }
  .floating-nav .nav-actions bencho-like {
    display: none !important;
  }
  .floating-nav .nav-actions {
    gap: 6px;
    flex-shrink: 0;
  }
  .floating-nav .nav-actions .button {
    padding: 6px 11px;
    font-size: 11.5px;
    white-space: nowrap;
    border-radius: 9999px;
  }
  .mobile-nav-toggle {
    display: inline-flex;
    padding: 4px 8px;
    min-height: 30px;
    min-width: 30px;
    font-size: 15px;
    border-radius: 8px;
  }

  .actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .actions .button,
  .actions a.button {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .app-mobile-dock {
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 14px;
    right: 14px;
    height: 60px;
    border-radius: 9999px;
    background: rgba(247, 247, 240, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(214, 218, 202, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    z-index: 1000;
  }

  .app-mobile-dock-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.18s ease;
  }

  .app-mobile-dock-btn .dock-icon {
    font-size: 18px;
    line-height: 1;
  }

  .app-mobile-dock-btn.active {
    color: var(--ink);
    background: #dbe5bd;
    font-weight: 700;
  }

  .app-content {
    padding-bottom: 90px !important;
  }
}

@media (max-width: 480px) {
  .floating-nav-wrap {
    top: max(8px, env(safe-area-inset-top));
    padding: 0 10px;
  }
  .floating-nav {
    height: 54px;
    padding: 0 10px 0 14px;
  }
  .floating-nav .brand {
    font-size: 19px;
    gap: 6px;
  }
  .floating-nav .brand img {
    width: 24px;
    height: 24px;
  }
  .floating-nav .nav-actions .button {
    padding: 7px 12px;
    font-size: 12px;
  }
}

/* ── 320px to 360px: Compact Phones & KaiOS / Galaxy Fold ──── */
@media (max-width: 380px) {
  .floating-nav-wrap {
    padding: 0 6px;
    top: max(6px, env(safe-area-inset-top));
  }
  .floating-nav {
    height: 50px;
    padding: 0 8px 0 10px;
    gap: 4px;
  }
  .floating-nav .brand {
    font-size: 16px;
    gap: 4px;
  }
  .floating-nav .brand img {
    width: 20px;
    height: 20px;
  }
  .floating-nav .nav-actions {
    gap: 5px;
  }
  .floating-nav .nav-actions bencho-like {
    display: none !important;
  }
  .floating-nav .nav-actions .button {
    padding: 6px 9px;
    font-size: 11px;
    border-radius: 8px;
  }
  .mobile-nav-toggle {
    padding: 4px 6px;
    font-size: 18px;
  }
  .hero h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  .hero p {
    font-size: 14px !important;
  }
  .price {
    font-size: 28px !important;
  }
  .app-mobile-dock {
    left: 8px;
    right: 8px;
    bottom: max(6px, env(safe-area-inset-bottom));
    height: 54px;
  }
  .app-mobile-dock-btn {
    padding: 4px 6px;
    font-size: 9px;
  }
  .app-mobile-dock-btn .dock-icon {
    font-size: 15px;
  }
}

/* ── Modal & Dialog Scrollability on Small Viewports ───────── */
.dialog {
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

@media (max-height: 600px) {
  .dialog {
    max-height: 84vh;
    padding: 18px 14px;
  }
}

/* ── Landscape Orientations on Mobile (480px - 820px) ──────── */
@media (max-height: 500px) and (orientation: landscape) {
  .floating-nav-wrap {
    top: 4px;
  }
  .floating-nav {
    height: 46px;
  }
  .hero {
    padding: 20px 0 30px;
    gap: 20px;
  }
  .hero-scene {
    min-height: 320px;
  }
  .app-mobile-dock {
    display: none;
  }
  .app-shell {
    grid-template-columns: 180px 1fr;
  }
  .sidebar {
    position: static;
    height: 100vh;
  }
}

/* ── 1440px to 2560px+: Large Displays & Ultrawide Monitors ── */
@media (min-width: 1920px) {
  .wrap {
    max-width: 1560px;
  }
  .hero {
    gap: 120px;
    padding: 85px 0 130px;
  }
  .hero-scene {
    min-height: 620px;
  }
  h1 {
    font-size: 88px;
  }
  .app-content {
    max-width: 1720px;
  }
}

@media (min-width: 2560px) {
  .wrap {
    max-width: 1920px;
  }
  .hero {
    gap: 160px;
    padding: 110px 0 160px;
  }
  h1 {
    font-size: 104px;
  }
  .app-content {
    max-width: 2100px;
  }
}

/* ── 3-Card Responsive Pricing & Free Trial Banner Styling ── */
.pricing-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1240px;
  margin: 32px auto;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .pricing-3-col {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}

.trial-banner {
  border-radius: 18px;
  padding: 16px 22px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 4px 20px -2px rgba(24, 28, 20, 0.08);
  transition: all 0.25s ease;
}

.trial-banner-active {
  background: #1e221b;
  color: #f8f8f1;
  border-left: 6px solid #d4f16b;
}

.trial-banner-expired {
  background: #2b1713;
  color: #fff0ed;
  border-left: 6px solid #ff7a60;
}

.trial-banner-eligible {
  background: #f4f7e8;
  border: 1px solid #dce5bf;
  border-left: 6px solid #729622;
  color: #20231e;
}

.trial-timer-digits {
  font-family: ui-monospace, monospace;
  font-size: 18px;
  font-weight: 800;
  color: #d4f16b;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM MOTION & MICROINTERACTIONS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --dur-fast: 140ms;
  --dur-normal: 240ms;
  --dur-slow: 420ms;
}

/* Refined button press physics */
button, .button {
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) ease;
}
button:active:not(:disabled), .button:active:not(:disabled) {
  transform: scale(0.975) translateY(1px);
  box-shadow: 0 2px 6px rgba(32, 35, 30, 0.12);
}

/* Card elevation physics */
article.card {
  transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-spring);
}
article.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -8px rgba(32, 35, 30, 0.08);
}

/* Subtle focus indicators */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #729622;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO CHOREOGRAPHED WORKFLOW STORY
   ══════════════════════════════════════════════════════════════════════════ */
.workflow-story {
  background: #20231e;
  color: #f8f8f1;
  border-radius: 28px;
  padding: 24px 28px;
  box-shadow: 0 20px 50px -10px rgba(18, 22, 14, 0.35);
  border: 1px solid #333a2a;
  position: relative;
  overflow: hidden;
}

.workflow-story-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #333a2a;
  padding-bottom: 14px;
}

.workflow-timeline {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.workflow-step-btn {
  background: #282f22;
  border: 1px solid #3d4633;
  color: #a7b09c;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) ease;
}

.workflow-step-btn.active {
  background: #d4f16b;
  color: #17200a;
  border-color: #d4f16b;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(212, 241, 107, 0.35);
}

.workflow-stage-card {
  background: #282e23;
  border-radius: 18px;
  border: 1px solid #3d4633;
  padding: 22px;
  transition: opacity var(--dur-normal) ease;
}

.workflow-stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.workflow-stage-body {
  font-size: 14px;
  line-height: 1.6;
  color: #d5dbcb;
}

.workflow-stage-footer {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #3d4633;
  padding-top: 14px;
  font-size: 12.5px;
  color: #a7b09c;
}

/* ══════════════════════════════════════════════════════════════════════════
   SPECIAL COMPLETED DELIVERABLE SHOWCASE CARD (Moment of Value)
   ══════════════════════════════════════════════════════════════════════════ */
.deliverable-showcase-card {
  background: #ffffff;
  border: 2px solid #a3c442;
  border-radius: 24px;
  padding: 28px;
  margin-top: 20px;
  box-shadow: 0 16px 44px -8px rgba(114, 150, 34, 0.22), 0 0 0 1px rgba(163, 196, 66, 0.2);
  position: relative;
  overflow: hidden;
  animation: deliverableSlideUp 400ms var(--ease-spring);
}

@keyframes deliverableSlideUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.deliverable-showcase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #729622, #d4f16b, #729622);
}

.deliverable-badge-verified {
  background: #edf5d9;
  color: #3b5011;
  border: 1px solid #c8de86;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.deliverable-badge-verified::before {
  content: '✓';
  font-weight: 900;
  color: #52692d;
}

.deliverable-preview-box {
  background: #f8f8f1;
  border: 1px solid #e2e4d8;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 16px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #242921;
}

.deliverable-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
}

.deliverable-actions button, .deliverable-actions a {
  padding: 10px 18px;
  font-size: 13px;
  border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CRO MOTION DESIGN SYSTEM & HERO ELEVATION TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast: 200ms;
  --dur-moderate: 350ms;
  --dur-deliberate: 650ms;
}

/* Hero Badge & Trust Microcopy */
.hero-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #edf5d9;
  border: 1px solid #c8de86;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3b5011;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(114, 150, 34, 0.08);
}
.hero-category-badge .badge-sep {
  opacity: 0.35;
}
.hero-category-badge .badge-engine {
  color: #52692d;
  font-weight: 600;
}
.hero-lead {
  font-size: 18.5px !important;
  color: var(--muted) !important;
  line-height: 1.62 !important;
  max-width: 530px !important;
  margin: 18px 0 26px !important;
}
.hero-trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #52692d;
  margin-top: 14px;
}
.hero-trust-bar .trust-sep {
  opacity: 0.35;
}

/* Staggered entrance animations */
.hero-enter {
  opacity: 0;
  transform: translateY(14px);
  animation: heroEntrance var(--dur-deliberate) var(--ease-spring) forwards;
}
.hero-enter-1 { animation-delay: 40ms; }
.hero-enter-2 { animation-delay: 120ms; }
.hero-enter-3 { animation-delay: 200ms; }
.hero-enter-4 { animation-delay: 280ms; }
.hero-enter-5 { animation-delay: 360ms; }

@keyframes heroEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-triggered reveal */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-moderate) var(--ease-smooth), transform var(--dur-moderate) var(--ease-spring);
  will-change: opacity, transform;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Magnetic / Interactive CTA Buttons */
.magnetic-btn {
  position: relative;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.magnetic-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(114, 150, 34, 0.25);
}
.magnetic-btn:active {
  transform: translateY(0) scale(0.99);
}

/* Interactive AI Employee Cards hover response */
.interactive-card {
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.interactive-card:hover {
  transform: translateY(-3px);
  border-color: #b8d660;
  box-shadow: 0 12px 30px rgba(32, 35, 30, 0.08);
}

/* Live Workflow connector pulse */
.workflow-step-active {
  border-left: 3px solid #729622;
  transition: border-color var(--dur-fast) ease;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .deliverable-showcase-card {
    animation: none !important;
  }
  .hero-enter,
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .magnetic-btn:hover,
  .interactive-card:hover {
    transform: none !important;
  }
}

/* Google SSO Button Styling */
.google-auth-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #1f1f1f !important;
  border: 1px solid #dadce0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
.google-auth-btn:hover {
  background: #f8f9fa !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.google-auth-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.google-auth-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}