:root{
  --ink:#0D110C;
  --ink-2:#171B14;
  --paper:#F6F5EF;
  --paper-dim:#EDEBE0;
  --bark:#1C1D18;
  --mist:#6E6E64;
  --mist-on-ink:#9A9C8E;
  --sprout:#D8FF4D;
  --sprout-deep:#8FB300;
  --line:#E4E2D6;
  --line-on-ink:rgba(255,255,255,0.10);

  /* theme-aware chrome tokens — light defaults, overridden below for dark */
  --bg:#F6F5EF;
  --surface:#FFFFFF;
  --glass:rgba(246,245,239,0.72);
  --glass-solid:rgba(246,245,239,0.98);
  color-scheme:light;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* motion system — reusable tokens, no hardcoded easing/durations below */
  --ease-out-expo:var(--ease);              /* weighty deceleration — arrivals */
  --ease-in-out-quart:cubic-bezier(.76,0,.24,1); /* symmetric — cross-fades */
  --ease-spring:cubic-bezier(.32,1.4,.44,1);  /* slight overshoot — rail/markers settling into place */
  --motion-instant:120ms;
  --motion-fast:260ms;
  --motion-base:460ms;
  --motion-slow:720ms;
  --motion-stagger:70ms;
}

/* ---------- night mode ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0D09;
    --paper-dim:#14170F;
    --bark:#EDEDE2;
    --mist:#9A9C8E;
    --line:rgba(255,255,255,0.10);
    --surface:#14170F;
    --glass:rgba(11,13,9,0.72);
    --glass-solid:rgba(11,13,9,0.96);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0D09;
  --paper-dim:#14170F;
  --bark:#EDEDE2;
  --mist:#9A9C8E;
  --line:rgba(255,255,255,0.10);
  --surface:#14170F;
  --glass:rgba(11,13,9,0.72);
  --glass-solid:rgba(11,13,9,0.96);
  color-scheme:dark;
}

/* armed for ~1 tick around a theme switch only — see js theme toggle */
.theme-transition,
.theme-transition *{
  transition:
    background-color var(--motion-slow) var(--ease-in-out-quart),
    border-color var(--motion-slow) var(--ease-in-out-quart),
    color var(--motion-slow) var(--ease-in-out-quart),
    fill var(--motion-slow) var(--ease-in-out-quart),
    box-shadow var(--motion-slow) var(--ease-in-out-quart) !important;
}
@media (prefers-reduced-motion:reduce){
  .theme-transition,.theme-transition *{transition:none !important;}
}

/* ---------- transition into the dashboard app (js/main.js) ---------- */
.app-transition{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);
  opacity:0;pointer-events:none;
  transition:opacity var(--motion-slow) var(--ease-in-out-quart);
}
.app-transition.is-active{opacity:1;pointer-events:all;}
.app-transition-mark{
  width:56px;height:56px;
  transform:scale(.7);opacity:0;
  transition:
    transform var(--motion-slow) var(--ease-spring),
    opacity var(--motion-base) var(--ease-out-expo);
}
.app-transition.is-active .app-transition-mark{
  transform:scale(1);opacity:1;
  animation:app-mark-pulse 1.1s var(--ease-out-expo) .15s infinite;
}
.app-transition-mark svg{width:100%;height:100%;fill:var(--sprout);filter:drop-shadow(0 0 20px rgba(216,255,77,.5));}
@keyframes app-mark-pulse{
  0%,100%{filter:drop-shadow(0 0 16px rgba(216,255,77,.4));}
  50%{filter:drop-shadow(0 0 32px rgba(216,255,77,.75));}
}
@media (prefers-reduced-motion:reduce){
  .app-transition,.app-transition-mark{transition:none !important;animation:none !important;}
}

::view-transition-old(root),
::view-transition-new(root){animation:none;mix-blend-mode:normal;}
::view-transition-old(root){z-index:1;}
::view-transition-new(root){z-index:2;}

*{box-sizing:border-box;margin:0;padding:0;}

/* scroll-behavior stays 'auto' — Lenis (js/main.js) owns smooth scrolling
   now, and native CSS smoothing would otherwise fight its own rAF-driven
   scrollTo on every frame. Anchor clicks are intercepted in JS; Lenis
   isn't available (blocked, offline CDN) falls back to scrollIntoView. */
html{scroll-behavior:auto;}

body{
  background:var(--bg);
  color:var(--bark);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* safety net for absolutely-positioned decorative glows/auras across sections */
}

img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{list-style:none;}

.display{font-family:'Instrument Sans','Inter',sans-serif;font-weight:600;letter-spacing:-0.02em;}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}

@media (max-width:640px){
  .wrap{padding:0 20px;}
}

/* ---------- reveal-on-scroll ---------- */
/* Same motion tokens as everything else on the page (:root, top of file) —
   one system, not a bespoke duration for this one effect. Only opacity/
   transform animate (IntersectionObserver-driven, js/main.js), reduced
   motion is handled below, and this is applied per-section rather than
   per-element — see the data-reveal count in index.html: it marks maybe
   18 blocks total, not every card/row, on purpose. */
[data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--motion-slow) var(--ease-out-expo), transform var(--motion-slow) var(--ease-out-expo);
}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}

/* ---------- nav ---------- */
/* liquid-glass header — strong blur/saturation for the refractive glass
   read, a top inner highlight standing in for a light catching the
   glass edge, and a very soft two-tone sheen behind the content for a
   hint of color refraction. isolation:isolate + the explicit z-index on
   .nav-inner keeps that sheen strictly behind the actual nav content
   regardless of paint order. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid transparent;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.22);
  transition:
    border-color var(--motion-base) var(--ease-in-out-quart),
    background var(--motion-base) var(--ease-in-out-quart),
    box-shadow var(--motion-base) var(--ease-in-out-quart);
  isolation:isolate;
}
.nav::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(140% 220% at 12% -70%, rgba(255,255,255,.28), transparent 55%),
    radial-gradient(140% 220% at 88% -80%, rgba(216,255,77,.10), transparent 60%);
}
.nav.scrolled{
  border-bottom-color:var(--line);
  background:var(--glass-solid);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.14), 0 14px 30px -18px rgba(13,17,12,.28);
}
/* backdrop-filter unsupported (old Firefox etc.) — fall back to the
   already-more-opaque "scrolled" tint so text stays readable without blur */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:var(--glass-solid);}
}
@media (max-width:860px){
  /* backdrop-filter is one of the pricier compositor effects on mobile
     GPUs — trims blur/saturation and drops the decorative sheen layer
     rather than paying full desktop cost on every scroll frame */
  .nav{backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);}
  .nav::before{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .nav{transition-duration:var(--motion-instant);}
}
.nav-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.nav-brand{
  display:flex;align-items:center;gap:8px;font-size:19px;
  transition:color var(--motion-base) var(--ease-in-out-quart);
}
.nav-brand svg{
  width:22px;height:22px;fill:var(--bark);
  transition:
    fill var(--motion-base) var(--ease-in-out-quart),
    transform var(--motion-base) var(--ease-spring),
    filter var(--motion-base) var(--ease-in-out-quart);
}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{
  font-size:14px;color:var(--mist);
  transition:color var(--motion-base) var(--ease-in-out-quart), text-shadow var(--motion-base) var(--ease-in-out-quart);
}
.nav-links a[aria-current="page"]{color:var(--bark);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.nav-cta{
  display:flex;align-items:center;gap:6px;
  background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;
  transition:
    transform .25s var(--ease),
    background var(--motion-base) var(--ease-in-out-quart),
    color var(--motion-base) var(--ease-in-out-quart),
    box-shadow var(--motion-base) var(--ease-in-out-quart);
}
.nav-toggle{display:none;}

/* Touch tactile feedback — transform/opacity only, so tapping never
   shifts layout. No :hover counterpart needed here: these apply on
   every pointer type, which is fine since neither moves anything. */
.nav-cta:active{transform:scale(.97);}
.nav-cta.is-wallet{font-family:ui-monospace,'SF Mono',monospace;letter-spacing:.01em;}
.nav-cta-avatar{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--sprout),var(--sprout-deep));
}
.nav-toggle:active{transform:scale(.9);}

/* Every :hover below is gated to devices that actually have a mouse.
   Without this, touch browsers "stick" the hover state on tap (fake
   hover simulation) — combined with a transform like translateY, that
   reads exactly as the "buttons jump on mobile" bug: the hover engages
   on touchstart and doesn't let go until the next tap elsewhere. */
@media (hover:hover) and (pointer:fine){
  .nav-brand:hover svg{transform:scale(1.08) rotate(-4deg);}
  .nav-links a:hover{color:var(--bark);}
  .nav-cta:hover{background:var(--ink-2);transform:translateY(-1px);}

  /* dark mode — accent-yellow hover, Robinhood-style. Scoped to the two
     selectors so it works both for an explicit toggle and OS-level dark. */
  :root[data-theme="dark"] .nav-brand:hover{color:var(--sprout);}
  :root[data-theme="dark"] .nav-brand:hover svg{fill:var(--sprout);filter:drop-shadow(0 0 10px rgba(216,255,77,.5));}
  :root[data-theme="dark"] .nav-links a:hover{color:var(--sprout);text-shadow:0 0 16px rgba(216,255,77,.35);}
  :root[data-theme="dark"] .nav-cta:hover{
    color:var(--sprout);
    box-shadow:0 0 0 1px rgba(216,255,77,.35), 0 10px 28px -10px rgba(216,255,77,.4);
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav-brand:hover{color:var(--sprout);}
  :root:not([data-theme="light"]) .nav-brand:hover svg{fill:var(--sprout);filter:drop-shadow(0 0 10px rgba(216,255,77,.5));}
  :root:not([data-theme="light"]) .nav-links a:hover{color:var(--sprout);text-shadow:0 0 16px rgba(216,255,77,.35);}
  :root:not([data-theme="light"]) .nav-cta:hover{
    color:var(--sprout);
    box-shadow:0 0 0 1px rgba(216,255,77,.35), 0 10px 28px -10px rgba(216,255,77,.4);
  }
}

/* ---------- theme toggle ---------- */
.theme-toggle{
  position:relative;
  display:grid;place-items:center;
  width:40px;height:40px;flex-shrink:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  color:var(--bark);
  transition:
    background var(--motion-fast) var(--ease-out-expo),
    border-color var(--motion-fast) var(--ease-out-expo),
    transform var(--motion-fast) var(--ease-spring);
}
@media (hover:hover) and (pointer:fine){
  .theme-toggle:hover{transform:translateY(-1px);border-color:var(--bark);}
}
.theme-toggle:active{transform:translateY(0) scale(.92);}
.theme-icon{
  position:absolute;width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:
    opacity var(--motion-base) var(--ease-out-expo),
    transform var(--motion-base) var(--ease-spring);
  will-change:opacity,transform;
}
.theme-icon-moon{fill:currentColor;stroke:none;}
.theme-icon-sun{opacity:1;transform:rotate(0deg) scale(1);}
.theme-icon-moon{opacity:0;transform:rotate(-70deg) scale(.4);}
:root[data-theme="dark"] .theme-icon-sun{opacity:0;transform:rotate(70deg) scale(.4);}
:root[data-theme="dark"] .theme-icon-moon{opacity:1;transform:rotate(0deg) scale(1);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-icon-sun{opacity:0;transform:rotate(70deg) scale(.4);}
  :root:not([data-theme="light"]) .theme-icon-moon{opacity:1;transform:rotate(0deg) scale(1);}
}

@media (max-width:860px){
  /* visibility/opacity, not display:none — a hard display toggle can't be
     transitioned, so closing the menu used to snap shut instantly at the
     exact moment a tapped link also kicked off the smooth-scroll, and the
     mismatched "one instant, one eased" motion read as a glitch. */
  .nav-links{
    /* position:absolute unconditionally (not just while open) so this
       never participates in the nav-inner flex row's layout — a plain
       display:flex box here would still take up horizontal space next
       to the logo/actions even while invisible. */
    position:absolute;top:64px;right:0;left:0;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:8px;border:1px solid var(--line);border-radius:16px;
    background:var(--glass-solid);box-shadow:0 18px 40px rgba(13,17,12,.12);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-8px) scale(.98);
    transition:
      opacity var(--motion-fast) var(--ease-out-expo),
      transform var(--motion-fast) var(--ease-out-expo),
      visibility 0s linear var(--motion-fast);
  }
  .nav-toggle{display:block;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px;border-radius:999px;font-size:15px;font-weight:500;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn-primary{background:var(--sprout);color:var(--ink);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(216,255,77,0.55);}
.btn-ghost{background:transparent;color:var(--bark);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--bark);}
.btn-ghost.on-ink{color:var(--paper);border-color:var(--line-on-ink);}
.btn-ghost.on-ink:hover{border-color:var(--mist-on-ink);}
.btn:active{transform:scale(.97);}
.btn-lg{padding:17px 32px;font-size:16px;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:168px 0 96px;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.hero-glow{
  position:absolute;top:-20%;right:-10%;width:60%;aspect-ratio:1;
  background:radial-gradient(circle, rgba(216,255,77,0.18) 0%, rgba(216,255,77,0) 65%);
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 65% at 18% 8%, black 22%, transparent 78%);
  opacity:.55;
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--mist-on-ink);
  border:1px solid var(--line-on-ink);border-radius:999px;
  padding:6px 14px 6px 8px;margin-bottom:28px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--sprout);box-shadow:0 0 0 3px rgba(216,255,77,0.18);}
.hero h1{
  font-size:clamp(38px,6vw,72px);
  line-height:1.04;
  max-width:16ch;
}
.hero h1 em{
  font-style:normal;color:var(--sprout);
}
.hero-sub{
  margin-top:24px;font-size:18px;line-height:1.6;color:var(--mist-on-ink);
  max-width:46ch;
}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:36px;}
.hero-note{font-size:13px;color:var(--mist-on-ink);margin-top:16px;}

.hero-panel{
  position:relative;
  margin-top:64px;
  background:var(--ink-2);
  border:1px solid var(--line-on-ink);
  border-radius:var(--radius-lg);
  padding:28px;
  display:grid;grid-template-columns:1.1fr 1fr;gap:28px;
  align-items:center;
  overflow:hidden;
}
/* bento-style ambient texture so the panel doesn't read flat/empty —
   a faint dot-grid + two soft glows, both purely decorative (pointer-events:none) */
.hero-panel::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(216,255,77,.09), transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(216,255,77,.06), transparent 50%);
  pointer-events:none;
}
.hero-panel::after{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, black 25%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, black 25%, transparent 100%);
  pointer-events:none;
}
.hero-panel>*{position:relative;z-index:1;}
@media (max-width:820px){
  .hero-panel{grid-template-columns:1fr;}
}

.grow-ticker{display:flex;flex-direction:column;gap:18px;}
.grow-ticker .row{display:flex;justify-content:space-between;align-items:baseline;}
.grow-label{font-size:12.5px;color:var(--mist-on-ink);text-transform:uppercase;letter-spacing:0.06em;}
.grow-amount{
  font-family:'Instrument Sans',sans-serif;font-weight:600;
  font-size:40px;color:var(--sprout);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
}
.grow-sub{font-size:13.5px;color:var(--mist-on-ink);}
.grow-ticker-line{height:1px;background:var(--line-on-ink);}
/* Fixed-height "vertical marquee" — exactly 3 row-slots, always. Rows are
   position:absolute and placed by JS via translateY(index * ROW_STEP);
   overflow:hidden clips a 4th/departing row instead of growing the box,
   which is what caused the whole panel (and the card next to it) to
   reflow by a few pixels whenever a 4th transaction briefly existed. */
.grow-feed{
  position:relative;
  height:104px; /* 3 * 28px rows + 2 * 10px gaps between them */
  font-size:13px;
  overflow:hidden;
  transition:opacity var(--motion-base) var(--ease-in-out-quart);
}
.grow-feed.is-resetting{opacity:0;}
.grow-feed .item{
  position:absolute;top:0;left:0;right:0;height:28px;
  display:flex;align-items:center;justify-content:space-between;
  color:var(--mist-on-ink);opacity:1;
  transition:
    transform var(--motion-base) var(--ease-out-expo),
    opacity var(--motion-base) var(--ease-out-expo);
}
.grow-feed .item.is-entering,
.grow-feed .item.is-leaving{opacity:0;}
.grow-feed .item b{color:var(--paper);font-weight:500;}
.grow-feed .item .plus{color:var(--sprout);text-shadow:0 0 12px rgba(216,255,77,.55);}
.hero-demo-status{
  display:flex;align-items:center;gap:9px;width:100%;margin-top:5px;padding:11px 0;
  border-top:1px solid var(--line-on-ink);color:var(--mist-on-ink);font-size:12px;
}
.hero-demo-pulse{width:7px;height:7px;border-radius:50%;background:var(--sprout);box-shadow:0 0 0 0 rgba(216,255,77,.5);animation:demo-pulse 2s infinite;}
@keyframes demo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(216,255,77,.45);}50%{box-shadow:0 0 0 6px rgba(216,255,77,0);}}
.grow-amount.is-updated{animation:amount-pop .42s var(--ease);}
@keyframes amount-pop{0%{transform:translateY(5px);opacity:.3;}100%{transform:translateY(0);opacity:1;}}

/* idle levitation — the resting state, always running */
.mini-card{animation:card-float 4.6s ease-in-out infinite;}
/* on each purchase tick: a 3D pop with a green accent flash, riding the
   same spring token used elsewhere so it feels consistent, not bespoke */
.mini-card.is-tapped{animation:card-tap .62s var(--ease-spring);}
@keyframes card-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes card-tap{
  0%{transform:perspective(700px) translateY(0) rotateX(0) rotateY(0) scale(1);box-shadow:0 0 0 0 rgba(216,255,77,0);border-color:var(--line-on-ink);}
  30%{transform:perspective(700px) translateY(-10px) rotateX(6deg) rotateY(-4deg) scale(1.025);box-shadow:0 20px 42px -10px rgba(216,255,77,.5);border-color:rgba(216,255,77,.55);}
  100%{transform:perspective(700px) translateY(0) rotateX(0) rotateY(0) scale(1);box-shadow:0 0 0 0 rgba(216,255,77,0);border-color:var(--line-on-ink);}
}
/* reduced-motion still gets a reaction on every purchase — just the glow,
   no translate/rotate/scale, since that parallax-y motion is exactly what
   prefers-reduced-motion exists to suppress */
@keyframes card-tap-reduced{
  0%,100%{box-shadow:0 0 0 0 rgba(216,255,77,0);border-color:var(--line-on-ink);}
  40%{box-shadow:0 0 34px -6px rgba(216,255,77,.55);border-color:rgba(216,255,77,.55);}
}

.mini-card{
  position:relative;
  aspect-ratio:1.586/1;
  border-radius:16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01) 55%),
    linear-gradient(135deg,#20241C 0%,#0D110C 75%);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--line-on-ink);
  padding:20px 22px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:border-color var(--motion-base) var(--ease-in-out-quart);
}
@media (prefers-reduced-motion:reduce){
  .mini-card{animation:none;} /* idle float is pure ambient motion — safe to drop entirely */
  .mini-card.is-tapped{animation:card-tap-reduced .5s ease-in-out;}
  .hero-demo-pulse,.grow-amount.is-updated{animation:none;}
  .grow-feed .item{transition:opacity var(--motion-instant) linear;}
}
.mini-card .top{display:flex;justify-content:space-between;align-items:flex-start;}
.mini-card .lockup{display:flex;align-items:center;gap:6px;}
.mini-card .lockup svg{width:14px;height:14px;fill:var(--sprout);}
.mini-card .lockup span{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:13px;color:var(--paper);}
.mini-card .chain{font-size:9.5px;color:var(--mist-on-ink);border:1px solid var(--line-on-ink);border-radius:20px;padding:3px 8px;}
.mini-card .num{color:#E4E4D8;font-size:14px;letter-spacing:2px;font-family:monospace;}
.mini-card .bottom{display:flex;justify-content:space-between;font-size:9.5px;color:var(--mist-on-ink);letter-spacing:0.5px;}

/* ---------- marquee ---------- */
.marquee-section{background:var(--bg);border-bottom:1px solid var(--line);padding:28px 0;overflow:hidden;}
.marquee-label{text-align:center;font-size:12.5px;color:var(--mist);margin-bottom:20px;letter-spacing:0.02em;}
.marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);}
/* ambient aura — a blurred conic gradient that spins slowly behind the
   strip via transform (compositor-only) while its own two-tone sweep
   (sprout / sprout-deep) reads as a shifting light rather than a flat glow.
   The mask on .marquee already fades it out at the same edges as the pills. */
.marquee::before{
  content:'';
  position:absolute;z-index:0;top:50%;left:50%;
  width:440px;height:440px;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,
    transparent 0%,
    rgba(216,255,77,.55) 10%,
    transparent 24%,
    rgba(143,179,0,.45) 50%,
    transparent 64%,
    rgba(216,255,77,.4) 84%,
    transparent 100%);
  filter:blur(48px);
  opacity:0;
  pointer-events:none;
  animation:marquee-aura-spin 22s linear infinite;
  transition:opacity var(--motion-slow) var(--ease-in-out-quart);
}
.marquee-track{position:relative;z-index:1;display:flex;gap:14px;width:max-content;animation:marquee-scroll 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee-aura-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.pill{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:14px;white-space:nowrap;color:var(--bark);
  transition:
    border-color var(--motion-base) var(--ease-in-out-quart),
    box-shadow var(--motion-base) var(--ease-in-out-quart),
    transform var(--motion-fast) var(--ease-spring);
}
.pill svg{width:14px;height:14px;fill:var(--mist);transition:fill var(--motion-base) var(--ease-in-out-quart);}
/* seamless loop: track is two copies of the same list, translated exactly
   -50% (one copy's width) with linear timing — no easing, no visible seam */
@keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

:root[data-theme="dark"] .marquee::before{opacity:.75;}
:root[data-theme="dark"] .pill{
  border-color:rgba(216,255,77,.16);
  box-shadow:0 0 0 1px rgba(216,255,77,.05) inset,0 0 16px -6px rgba(216,255,77,.4);
  animation:pill-glow-pulse 3.8s var(--ease-in-out-quart) infinite;
}
:root[data-theme="dark"] .pill svg{fill:var(--sprout-deep);}
:root[data-theme="dark"] .pill:hover{
  border-color:rgba(216,255,77,.4);
  box-shadow:0 0 0 1px rgba(216,255,77,.1) inset,0 0 22px -4px rgba(216,255,77,.55);
  transform:translateY(-1px);
  animation:none;
}
/* stagger the breathing pulse across the strip so it reads as a slow
   wave travelling through the pills rather than one flat synced blink */
:root[data-theme="dark"] .pill:nth-child(2n){animation-delay:-.6s;}
:root[data-theme="dark"] .pill:nth-child(3n){animation-delay:-1.2s;}
:root[data-theme="dark"] .pill:nth-child(4n){animation-delay:-1.8s;}
:root[data-theme="dark"] .pill:nth-child(5n){animation-delay:-2.4s;}
:root[data-theme="dark"] .pill:nth-child(7n){animation-delay:-3.1s;}
@keyframes pill-glow-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(216,255,77,.05) inset,0 0 14px -6px rgba(216,255,77,.35);border-color:rgba(216,255,77,.16);}
  50%{box-shadow:0 0 0 1px rgba(143,179,0,.1) inset,0 0 20px -4px rgba(143,179,0,.55);border-color:rgba(143,179,0,.4);}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marquee::before{opacity:.75;}
  :root:not([data-theme="light"]) .pill{
    border-color:rgba(216,255,77,.16);
    box-shadow:0 0 0 1px rgba(216,255,77,.05) inset,0 0 16px -6px rgba(216,255,77,.4);
    animation:pill-glow-pulse 3.8s var(--ease-in-out-quart) infinite;
  }
  :root:not([data-theme="light"]) .pill svg{fill:var(--sprout-deep);}
  :root:not([data-theme="light"]) .pill:hover{
    border-color:rgba(216,255,77,.4);
    box-shadow:0 0 0 1px rgba(216,255,77,.1) inset,0 0 22px -4px rgba(216,255,77,.55);
    transform:translateY(-1px);
    animation:none;
  }
  :root:not([data-theme="light"]) .pill:nth-child(2n){animation-delay:-.6s;}
  :root:not([data-theme="light"]) .pill:nth-child(3n){animation-delay:-1.2s;}
  :root:not([data-theme="light"]) .pill:nth-child(4n){animation-delay:-1.8s;}
  :root:not([data-theme="light"]) .pill:nth-child(5n){animation-delay:-2.4s;}
  :root:not([data-theme="light"]) .pill:nth-child(7n){animation-delay:-3.1s;}
}
@media (prefers-reduced-motion:reduce){
  .marquee::before{animation:none;}
  .pill{animation:none !important;}
}

/* ---------- product showcase ---------- */
.showcase-section{background:var(--paper);overflow:hidden;}
.showcase-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:54px;}
.showcase-intro h2{font-size:clamp(28px,3.6vw,42px);line-height:1.12;letter-spacing:-0.02em;}
.showcase-intro p{max-width:34ch;color:var(--mist);font-size:16.5px;line-height:1.6;}
.showcase{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;min-height:550px;}
.showcase-copy{padding-left:clamp(0px,4vw,56px);}
.showcase-kicker{font-size:12px;color:var(--sprout-deep);font-weight:600;letter-spacing:.1em;}
.showcase-copy h3{margin-top:18px;max-width:12ch;font-size:clamp(30px,4vw,52px);line-height:1.04;letter-spacing:-.04em;}
.showcase-copy p{margin-top:20px;max-width:31ch;color:var(--mist);font-size:15px;line-height:1.65;}
.showcase-controls{display:flex;align-items:center;gap:14px;margin-top:38px;}
.showcase-arrow{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--surface);transition:transform .25s var(--ease),background .25s,border-color .25s;}
.showcase-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--sprout);transform:translateY(-2px);}
.showcase-arrow:focus-visible,.showcase-dot:focus-visible{outline:3px solid rgba(143,179,0,.45);outline-offset:3px;}
.showcase-arrow span{font-size:20px;line-height:1;}
.showcase-dots{display:flex;align-items:center;gap:7px;margin:0 5px;}
.showcase-dot{width:7px;height:7px;padding:0;border-radius:50%;background:#C7C6B9;transition:width .3s var(--ease),background .3s;}
.showcase-dot.active{width:24px;border-radius:99px;background:var(--ink);}
.showcase-stage{position:relative;min-height:550px;display:grid;place-items:center;}
.showcase-stage::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(216,255,77,.28),rgba(216,255,77,0) 68%);filter:blur(8px);}
.showcase-orbit{position:absolute;border:1px solid rgba(13,17,12,.1);border-radius:50%;transform:rotate(-18deg);}
.orbit-one{width:470px;height:205px;}
.orbit-two{width:390px;height:170px;transform:rotate(34deg);}
.showcase-phone{position:relative;width:286px;height:548px;padding:9px;border:1px solid #505448;border-radius:39px;background:#121610;box-shadow:0 38px 80px rgba(13,17,12,.24),0 8px 18px rgba(13,17,12,.14);transform:rotate(5deg);transition:transform .7s var(--ease),box-shadow .7s var(--ease);}
.showcase-phone:hover{transform:rotate(1deg) translateY(-8px);box-shadow:0 46px 90px rgba(13,17,12,.27),0 10px 22px rgba(13,17,12,.16);}
.showcase-phone.is-changing{transform:rotate(0deg) scale(.97);}
.showcase-phone.is-changing.direction-next .app-screen.active{animation:showcase-in-next .45s var(--ease) both;}
.showcase-phone.is-changing.direction-prev .app-screen.active{animation:showcase-in-prev .45s var(--ease) both;}
@keyframes showcase-in-next{from{opacity:0;transform:translateX(34px);}to{opacity:1;transform:translateX(0);}}
@keyframes showcase-in-prev{from{opacity:0;transform:translateX(-34px);}to{opacity:1;transform:translateX(0);}}
.phone-notch{position:absolute;z-index:2;top:17px;left:50%;width:88px;height:24px;border-radius:20px;background:#121610;transform:translateX(-50%);}
.phone-screen{position:relative;height:100%;overflow:hidden;border-radius:31px;background:#F6F5EF;color:var(--bark);}
.phone-status{display:flex;justify-content:space-between;padding:15px 20px 0;font-size:9px;font-weight:600;letter-spacing:.02em;}
.app-screen{position:absolute;inset:48px 9px 9px;padding:19px 17px 22px;opacity:0;transform:translateX(20px);pointer-events:none;transition:opacity .38s var(--ease),transform .55s var(--ease);background:var(--paper);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}
.app-screen::-webkit-scrollbar{display:none;}
.app-screen.active{position:absolute;opacity:1;transform:translateX(0);pointer-events:auto;}
.app-topline{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;}
.app-avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--sprout);font-size:11px;}
.app-balance-label,.grow-total-label{margin-top:30px;color:var(--mist);font-size:9px;text-transform:uppercase;letter-spacing:.08em;}
.app-balance,.grow-total{margin-top:5px;font-family:'Instrument Sans',sans-serif;font-size:35px;font-weight:600;letter-spacing:-.04em;}
.app-balance-meta,.grow-progress-meta{display:flex;justify-content:space-between;margin-top:6px;color:var(--sprout-deep);font-size:9px;}
.app-card-mini,.detail-card{position:relative;margin-top:23px;height:151px;padding:17px;border-radius:14px;background:linear-gradient(135deg,#252C21,#0D110C 80%);color:var(--paper);box-shadow:0 15px 24px rgba(13,17,12,.18);}
.app-card-head,.app-card-foot{display:flex;justify-content:space-between;align-items:center;}
.app-card-head strong{font-family:'Instrument Sans',sans-serif;font-size:16px;letter-spacing:-.03em;}
.app-card-head span,.app-card-foot{font-size:7px;color:var(--mist-on-ink);letter-spacing:.07em;}
.app-card-number{margin-top:54px;color:#E4E4D8;font:11px monospace;letter-spacing:1.7px;}
.app-card-foot{position:absolute;right:17px;bottom:15px;left:17px;}
.app-section-label,.activity-label{display:flex;justify-content:space-between;margin-top:25px;color:var(--mist);font-size:9px;text-transform:uppercase;letter-spacing:.07em;}
.app-link{color:var(--sprout-deep);font-size:9px;}
.ticker-row,.activity-row{display:flex;align-items:center;gap:9px;margin-top:12px;padding:9px 0;border-bottom:1px solid var(--line);}
.ticker-icon,.activity-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--ink);color:var(--sprout);font-size:11px;font-weight:600;}
.ticker-row span:nth-child(2),.activity-row span:nth-child(2){display:flex;flex:1;flex-direction:column;font-size:10px;}
.ticker-row small,.activity-row small{margin-top:2px;color:var(--mist);font-size:8px;}
.ticker-row>strong,.activity-row>strong{color:var(--sprout-deep);font-size:10px;}
.back-mark,.help-mark{font-size:16px;font-weight:400;}
.detail-card{height:174px;margin-top:25px;padding:18px;transform:rotate(-5deg);box-shadow:0 16px 25px rgba(13,17,12,.2);}
.detail-chip{width:28px;height:20px;margin-top:28px;border:1px solid rgba(216,255,77,.6);border-radius:5px;background:linear-gradient(135deg,rgba(216,255,77,.6),transparent);}
.detail-number{margin-top:19px;font:11px monospace;letter-spacing:1px;}
.detail-actions{display:flex;gap:8px;margin-top:25px;}
.detail-actions button{flex:1;padding:9px 4px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:8px;}
.detail-list{margin-top:17px;padding:3px 0;border-top:1px solid var(--line);}
.detail-list>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:9px;}
.detail-list span{color:var(--mist);}
.detail-list .green{color:var(--sprout-deep);}
.secure-note{display:flex;gap:7px;align-items:center;margin-top:18px;padding:10px;border-radius:8px;background:#EBF6C7;color:var(--sprout-deep);font-size:8px;}
.secure-note span{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--sprout);color:var(--ink);font-weight:700;}
.grow-total{font-size:38px;color:var(--sprout-deep);}
.grow-total span{font-size:18px;vertical-align:top;}
.grow-progress{height:7px;margin-top:20px;overflow:hidden;border-radius:99px;background:#E5E6D8;}
.grow-progress span{display:block;width:72%;height:100%;border-radius:inherit;background:var(--sprout-deep);}
.plant-visual{position:relative;height:136px;margin:23px -17px 0;background:linear-gradient(180deg,#EBF6C7 0%,#F6F5EF 85%);overflow:hidden;}
.plant-stem{position:absolute;bottom:17px;left:50%;width:4px;height:78px;border-radius:4px;background:var(--sprout-deep);transform:translateX(-50%) rotate(7deg);transform-origin:bottom;}
.plant-leaf{position:absolute;width:53px;height:27px;border-radius:100% 0 100% 0;background:var(--sprout);transform-origin:bottom right;}
.leaf-left{bottom:63px;left:calc(50% - 48px);transform:rotate(21deg);}
.leaf-right{right:calc(50% - 48px);bottom:89px;transform:scaleX(-1) rotate(21deg);}
.plant-ground{position:absolute;bottom:15px;left:15%;width:70%;height:2px;background:var(--sprout-deep);}
.showcase-caption{position:absolute;bottom:-2px;display:flex;align-items:center;gap:7px;color:var(--mist);font-size:10px;letter-spacing:.04em;}
.caption-dot{width:6px;height:6px;border-radius:50%;background:var(--sprout-deep);box-shadow:0 0 0 4px rgba(143,179,0,.14);}
.showcase-toast{position:absolute;right:24px;bottom:27px;padding:9px 12px;border:1px solid rgba(216,255,77,.35);border-radius:999px;background:var(--ink);color:var(--sprout);font-size:10px;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.showcase-toast.visible{opacity:1;transform:translateY(0);}
@media (max-width:860px){
  .showcase-intro{display:block;}
  .showcase-intro p{margin-top:16px;}
  .showcase{grid-template-columns:1fr;gap:20px;}
  .showcase-copy{padding-left:0;text-align:center;}
  .showcase-copy h3{margin-right:auto;margin-left:auto;}
  .showcase-copy p{margin-right:auto;margin-left:auto;}
  .showcase-controls{justify-content:center;margin-top:25px;}
  .showcase-stage{min-height:570px;}
}
@media (max-width:560px){
  .showcase-section{padding-top:88px;padding-bottom:88px;}
  .showcase-phone{width:260px;height:500px;}
  .showcase-stage{min-height:525px;}
  .showcase-orbit{width:370px;height:170px;}
  .showcase-copy h3{font-size:36px;}
  .app-screen{inset:48px 9px 9px;padding:17px 15px 20px;}
  .app-card-mini,.detail-card{height:137px;}
  .app-card-number{margin-top:44px;}
  .plant-visual{height:120px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  /* Still fades in on reveal — a shorter/smaller version, not zero.
     transition:none used to make the whole page pop in instantly, which
     read as "the site is broken/static" rather than a deliberate
     accessibility choice. Short of the full effect, but long/visible
     enough (300ms, a little travel) to actually register as motion. */
  [data-reveal]{transform:translateY(6px);transition:opacity 300ms linear, transform 300ms linear;}
  [data-reveal].is-visible{transform:translateY(0);}
  .marquee-track{animation:none;}
  .showcase-phone,.app-screen,.showcase-arrow,.showcase-dot,.showcase-toast{transition:none;animation:none;}
  .showcase-phone.is-changing{transform:rotate(5deg);}
}

/* ---------- showcase refinement ---------- */
.showcase-intro{align-items:flex-start;}
.showcase-intro .section-tag{margin-bottom:17px;}
.showcase-stage{min-height:590px;border:1px solid #DFE1D6;border-radius:32px;background:#E9EBE3;box-shadow:inset 0 1px rgba(255,255,255,.8);isolation:isolate;}
.showcase-stage::before{width:410px;height:410px;background:radial-gradient(circle,rgba(216,255,77,.3),rgba(216,255,77,0) 69%);filter:none;}
.showcase-stage::after{content:'SPROUT / MOBILE PREVIEW';position:absolute;top:25px;right:28px;color:#969A8D;font-size:9px;font-weight:600;letter-spacing:.13em;}
.showcase-orbit{display:none;}
.showcase-phone{width:318px;height:592px;padding:8px;border-color:#383D34;border-radius:42px;transform:rotate(-4deg) translateY(10px);box-shadow:0 32px 65px rgba(13,17,12,.18),0 8px 18px rgba(13,17,12,.12);}
.showcase-phone:hover{transform:rotate(-1deg) translateY(1px);box-shadow:0 38px 74px rgba(13,17,12,.22),0 10px 22px rgba(13,17,12,.14);}
.showcase-phone.is-changing{transform:rotate(-1deg) scale(.985);}
.showcase-phone.is-changing.direction-next .app-screen.active{animation:showcase-in-next .38s var(--ease) both;}
.showcase-phone.is-changing.direction-prev .app-screen.active{animation:showcase-in-prev .38s var(--ease) both;}
.phone-screen{border-radius:34px;}
.phone-status{padding:17px 21px 0;color:#858A7B;}
.app-screen{inset:50px 8px 8px;padding:20px 18px 24px;}
.app-card-mini,.detail-card{border-radius:17px;background:linear-gradient(145deg,#30382B 0%,#11150F 82%);box-shadow:0 18px 30px rgba(13,17,12,.2);}
.app-card-mini{height:162px;}
.app-card-number{margin-top:61px;}
.detail-card{height:184px;}
.showcase-caption{bottom:22px;left:28px;}
.showcase-toast{right:28px;bottom:20px;}
@media (max-width:860px){
  .showcase-stage{min-height:600px;}
  .showcase-phone{transform:rotate(-3deg) translateY(8px);}
  .showcase-phone:hover{transform:rotate(-1deg) translateY(0);}
}
@media (max-width:560px){
  .showcase-stage{min-height:550px;border-radius:24px;}
  .showcase-stage::after{top:19px;right:20px;font-size:8px;}
  .showcase-phone{width:274px;height:512px;transform:rotate(-3deg) translateY(7px);}
  .showcase-phone:hover{transform:rotate(-1deg) translateY(0);}
  .showcase-stage::before{width:340px;height:340px;}
  .showcase-caption{bottom:17px;left:20px;}
  .showcase-toast{right:20px;bottom:15px;}
  .app-screen{inset:48px 8px 8px;padding:17px 15px 20px;}
  .app-card-mini{height:139px;}
  .app-card-number{margin-top:45px;}
  .detail-card{height:155px;}
  .detail-chip{margin-top:22px;}
}
@media (prefers-reduced-motion:reduce){
  .showcase-phone.is-changing{transform:rotate(-4deg) translateY(10px);}
}

/* ---------- card slider ---------- */
.showcase-card-deck{position:relative;width:min(100%,610px);height:470px;perspective:1200px;}
.showcase-card-deck::before,.showcase-card-deck::after{content:'';position:absolute;top:26px;right:22px;bottom:16px;left:22px;border:1px solid #D6D9CE;border-radius:24px;background:#F5F6F0;transform:rotate(5deg) translate(16px,2px);box-shadow:0 20px 35px rgba(13,17,12,.07);pointer-events:none;}
.showcase-card-deck::after{top:17px;right:11px;bottom:25px;left:11px;background:#EFF1E9;transform:rotate(2deg) translate(8px,0);}
.showcase-card-slide{position:absolute;z-index:1;inset:0;padding:28px 31px 25px;border:1px solid rgba(13,17,12,.1);border-radius:24px;background:#F9FAF5;box-shadow:0 25px 48px rgba(13,17,12,.13);opacity:0;transform:translateX(34px) rotate(1.5deg) scale(.96);pointer-events:none;transition:opacity .35s var(--ease),transform .55s var(--ease),box-shadow .4s var(--ease);}
.showcase-card-slide.active{opacity:1;transform:translateX(0) rotate(0) scale(1);pointer-events:auto;}
.showcase-card-deck.is-changing.direction-next .showcase-card-slide.active{animation:card-slide-in-next .42s var(--ease) both;}
.showcase-card-deck.is-changing.direction-prev .showcase-card-slide.active{animation:card-slide-in-prev .42s var(--ease) both;}
@keyframes card-slide-in-next{from{opacity:0;transform:translateX(42px) rotate(2deg) scale(.96);}to{opacity:1;transform:translateX(0) rotate(0) scale(1);}}
@keyframes card-slide-in-prev{from{opacity:0;transform:translateX(-42px) rotate(-2deg) scale(.96);}to{opacity:1;transform:translateX(0) rotate(0) scale(1);}}
.card-slide-header,.card-slide-foot{display:flex;justify-content:space-between;align-items:center;color:#8B9083;font-size:9px;font-weight:600;letter-spacing:.1em;}
.card-slide-status{display:flex;align-items:center;gap:6px;color:var(--sprout-deep);}
.card-slide-status i{width:6px;height:6px;border-radius:50%;background:var(--sprout-deep);box-shadow:0 0 0 4px rgba(143,179,0,.12);}
.product-card{position:relative;margin:34px auto 0;width:min(100%,470px);aspect-ratio:1.586/1;border-radius:19px;color:var(--paper);overflow:hidden;box-shadow:0 20px 28px rgba(13,17,12,.18);}
.product-card::after{content:'';position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,255,255,.09),transparent 38%,rgba(255,255,255,.025));pointer-events:none;}
.product-card-hero,.product-card-detail{background:linear-gradient(135deg,#30382B,#0D110C 78%);}
.product-card-grow{background:linear-gradient(135deg,#CBEA49,#718D10);color:var(--ink);}
.product-card-top,.product-card-bottom{position:absolute;right:23px;left:23px;display:flex;justify-content:space-between;align-items:center;}
.product-card-top{top:21px;}
.product-card-top strong{font-family:'Instrument Sans',sans-serif;font-size:20px;letter-spacing:-.04em;}
.product-card-top span,.product-card-bottom{font-size:8px;letter-spacing:.08em;}
.product-card-bottom{right:23px;bottom:20px;left:23px;color:rgba(246,245,239,.65);}
.product-card-grow .product-card-bottom{color:rgba(13,17,12,.68);}
.product-card-middle{position:absolute;top:50%;right:23px;left:23px;display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%);}
.product-chip{width:38px;height:27px;border:1px solid rgba(216,255,77,.6);border-radius:7px;background:linear-gradient(135deg,rgba(216,255,77,.65),rgba(216,255,77,.08));}
.product-contactless{font-size:18px;letter-spacing:-6px;opacity:.72;transform:rotate(-90deg);}
.product-card-number{position:absolute;right:23px;bottom:54px;left:23px;color:#E4E4D8;font:14px monospace;letter-spacing:2px;}
.card-slide-info{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:29px auto 0;width:min(100%,470px);}
.card-slide-info small{display:block;color:var(--mist);font-size:9px;text-transform:uppercase;letter-spacing:.08em;}
.card-slide-info b{display:block;margin-top:5px;font-family:'Instrument Sans',sans-serif;font-size:22px;letter-spacing:-.03em;}
.card-slide-info .green{color:var(--sprout-deep);font-size:15px;}
.card-slide-foot{position:absolute;right:31px;bottom:24px;left:31px;letter-spacing:.03em;font-weight:500;}
.card-slide-foot span:last-child{font-family:'Instrument Sans',sans-serif;font-size:20px;color:var(--bark);}
.product-card-detail{transform:rotate(-3deg);}
.card-detail-list{width:min(100%,470px);margin:32px auto 0;border-top:1px solid var(--line);}
.card-detail-list>div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:11px;}
.card-detail-list span{color:var(--mist);}
.card-detail-list .green{color:var(--sprout-deep);}
.grow-card-copy{position:absolute;top:53%;right:23px;left:23px;display:flex;flex-direction:column;transform:translateY(-50%);}
.grow-card-copy small{font-size:9px;letter-spacing:.1em;opacity:.68;}
.grow-card-copy b{margin-top:3px;font-family:'Instrument Sans',sans-serif;font-size:58px;letter-spacing:-.06em;}
.grow-card-copy span{margin-top:3px;font-size:10px;opacity:.72;}
.grow-card-line{position:absolute;right:23px;bottom:48px;left:23px;height:3px;border-radius:99px;background:rgba(13,17,12,.18);}
.grow-card-line i{display:block;width:72%;height:100%;border-radius:inherit;background:var(--ink);}
.card-activity-list{width:min(100%,470px);margin:31px auto 0;border-top:1px solid var(--line);}
.card-activity-list>div{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);}
.card-activity-list>div>span{display:flex;align-items:center;gap:9px;}
.card-activity-list i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--sprout);font-style:normal;font-size:11px;font-weight:600;}
.card-activity-list b{display:flex;flex-direction:column;font-size:11px;}
.card-activity-list small{margin-top:2px;color:var(--mist);font-size:9px;font-weight:400;}
.card-activity-list strong{color:var(--sprout-deep);font-size:11px;}
@media (max-width:860px){
  .showcase-card-deck{margin:0 auto;}
}
@media (max-width:560px){
  .showcase-card-deck{height:430px;}
  .showcase-card-deck::before,.showcase-card-deck::after{top:20px;right:10px;bottom:13px;left:10px;border-radius:18px;}
  .showcase-card-slide{padding:21px 19px 20px;border-radius:19px;}
  .product-card{margin-top:25px;border-radius:15px;}
  .product-card-top,.product-card-bottom,.product-card-middle{right:17px;left:17px;}
  .product-card-top{top:16px;}
  .product-card-top strong{font-size:16px;}
  .product-card-bottom{bottom:16px;}
  .product-card-number{right:17px;bottom:43px;left:17px;font-size:10px;letter-spacing:1px;}
  .product-chip{width:30px;height:22px;}
  .card-slide-info{margin-top:22px;gap:12px;}
  .card-slide-info b{font-size:18px;}
  .card-slide-info .green{font-size:13px;}
  .card-slide-foot{right:19px;bottom:18px;left:19px;font-size:8px;}
  .card-slide-foot span:last-child{font-size:16px;}
  .card-detail-list,.card-activity-list{margin-top:24px;}
  .card-detail-list>div,.card-activity-list>div{padding:9px 0;}
  .grow-card-copy b{font-size:45px;}
}
@media (prefers-reduced-motion:reduce){
  .showcase-card-slide,.showcase-card-deck.is-changing .showcase-card-slide.active{animation:none;transition:none;}
  .showcase-card-deck.is-changing .showcase-card-slide.active{transform:none;}
}

/* ---------- full-screen card selection ---------- */
.showcase-section{padding-top:118px;padding-bottom:118px;}
.showcase-intro{align-items:flex-end;}
.showcase-intro .section-tag{color:var(--sprout-deep);}
.showcase{display:flex;flex-direction:column;gap:30px;min-height:0;}
.showcase-copy{padding:0;text-align:center;}
.showcase-copy h3{max-width:none;font-size:clamp(31px,4.7vw,58px);color:var(--bark);}
.showcase-copy p{margin:14px auto 0;max-width:45ch;color:var(--mist);}
.showcase-controls{justify-content:center;margin-top:25px;}
.showcase-arrow{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--paper);}
.showcase-arrow:hover{background:var(--sprout);border-color:var(--sprout);color:var(--ink);}
.showcase-dot{background:#566052;}
.showcase-dot.active{background:var(--sprout);}
.showcase-stage{width:100%;min-height:min(730px,calc(100vh - 100px));border-color:rgba(255,255,255,.12);border-radius:34px;background:radial-gradient(circle at 50% 45%,#273020 0%,#171D14 34%,#0D110C 72%);box-shadow:inset 0 1px rgba(255,255,255,.08);overflow:hidden;}
.showcase-stage::before{width:650px;height:650px;background:radial-gradient(circle,rgba(216,255,77,.13),rgba(216,255,77,0) 66%);filter:none;}
.showcase-stage::after{top:27px;right:31px;color:rgba(216,255,77,.58);content:'SPROUT / CARD SELECTION';}
.showcase-card-deck{width:min(100%,930px);height:650px;}
.showcase-card-deck::before,.showcase-card-deck::after{top:115px;right:7%;bottom:164px;left:7%;border:1px solid rgba(255,255,255,.12);border-radius:29px;background:rgba(255,255,255,.035);transform:rotate(5deg) translate(34px,0);box-shadow:none;}
.showcase-card-deck::after{top:101px;right:5%;bottom:178px;left:5%;background:rgba(255,255,255,.055);transform:rotate(-4deg) translate(-24px,0);}
.showcase-card-slide{inset:32px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:0;transform:translateX(35%) scale(.72) rotate(8deg);transition:opacity .5s var(--ease),transform .7s var(--ease);}
.showcase-card-slide.active{transform:translateX(0) scale(1) rotate(0);opacity:1;}
.showcase-card-slide.is-prev,.showcase-card-slide.is-next{z-index:0;opacity:.4;pointer-events:none;}
.showcase-card-slide.is-prev{transform:translateX(-69%) scale(.69) rotate(-9deg);}
.showcase-card-slide.is-next{transform:translateX(69%) scale(.69) rotate(9deg);}
.showcase-card-slide:not(.active):not(.is-prev):not(.is-next){visibility:hidden;}
.showcase-card-deck.is-changing.direction-next .showcase-card-slide.active{animation:selector-in-next .65s var(--ease) both;}
.showcase-card-deck.is-changing.direction-prev .showcase-card-slide.active{animation:selector-in-prev .65s var(--ease) both;}
@keyframes selector-in-next{from{opacity:.2;transform:translateX(24%) scale(.76) rotate(5deg);}to{opacity:1;transform:translateX(0) scale(1) rotate(0);}}
@keyframes selector-in-prev{from{opacity:.2;transform:translateX(-24%) scale(.76) rotate(-5deg);}to{opacity:1;transform:translateX(0) scale(1) rotate(0);}}
.card-slide-header{padding:1px 0 0;color:rgba(246,245,239,.6);}
.card-slide-status{color:var(--sprout);}
.product-card-image{width:min(100%,610px);margin:52px auto 0;aspect-ratio:1.78/1;border-radius:24px;background:#080B08;box-shadow:0 35px 70px rgba(0,0,0,.4);}
.product-card-image img{transition:transform .8s var(--ease),filter .8s var(--ease);}
.showcase-card-slide.active .product-card-image img{transform:scale(1.015);filter:drop-shadow(0 0 22px rgba(216,255,77,.13));}
.image-card-badge{right:20px;bottom:18px;background:rgba(13,17,12,.72);}
.card-slide-info{width:min(100%,610px);margin:29px auto 0;text-align:left;}
.card-slide-info small{color:rgba(246,245,239,.5);}
.card-slide-info b{color:var(--paper);font-size:24px;}
.card-slide-info .green{color:var(--sprout);}
.card-slide-foot{right:0;bottom:27px;left:0;color:rgba(246,245,239,.58);}
.card-slide-foot span:last-child{color:var(--sprout);}
.card-detail-list,.card-activity-list{width:min(100%,610px);margin:29px auto 0;border-color:rgba(255,255,255,.14);text-align:left;}
.card-detail-list>div,.card-activity-list>div{border-color:rgba(255,255,255,.14);}
.card-detail-list span,.card-activity-list small{color:rgba(246,245,239,.52);}
.card-detail-list b{color:var(--paper);}
.card-detail-list .green,.card-activity-list strong{color:var(--sprout);}
.product-card-detail{background:#080B08;}
.product-card-grow{background:#080B08;}
.image-card-stat{right:23px;bottom:21px;}
.image-card-stat b{font-size:29px;}
.image-card-stat span{font-size:9px;}
.card-activity-list b{color:var(--paper);}
.card-activity-list i{background:var(--sprout);color:var(--ink);}
.showcase-caption{bottom:28px;left:31px;color:rgba(246,245,239,.48);}
.showcase-toast{right:31px;bottom:25px;}
@media (max-width:860px){
  .showcase-section{padding-top:96px;padding-bottom:96px;}
  .showcase-stage{min-height:620px;}
  .showcase-card-deck{height:560px;}
  .showcase-card-deck::before,.showcase-card-deck::after{top:94px;bottom:137px;}
  .product-card-image{width:min(100%,520px);margin-top:42px;}
}
@media (max-width:560px){
  .showcase-section{padding-top:82px;padding-bottom:82px;}
  .showcase-intro h2{font-size:34px;}
  .showcase-stage{min-height:530px;border-radius:25px;}
  .showcase-stage::after{top:21px;right:20px;font-size:7px;}
  .showcase-card-deck{height:475px;}
  .showcase-card-slide{inset:27px 0 0;}
  .showcase-card-deck::before,.showcase-card-deck::after{top:69px;bottom:117px;right:-4%;left:-4%;border-radius:19px;}
  .product-card-image{width:min(100%,370px);margin-top:28px;border-radius:16px;}
  .card-slide-header{font-size:7px;}
  .card-slide-info{margin-top:19px;}
  .card-slide-info b{font-size:18px;}
  .card-slide-foot{right:0;bottom:18px;left:0;font-size:7px;}
  .card-slide-foot span:last-child{font-size:16px;}
  .showcase-caption{bottom:18px;left:20px;font-size:8px;}
  .showcase-toast{right:20px;bottom:16px;}
  .showcase-card-slide.is-prev{transform:translateX(-78%) scale(.58) rotate(-10deg);}
  .showcase-card-slide.is-next{transform:translateX(78%) scale(.58) rotate(10deg);}
}
@media (prefers-reduced-motion:reduce){
  .showcase-card-slide,.showcase-card-deck.is-changing .showcase-card-slide.active,.product-card-image img{animation:none;transition:none;}
  .showcase-card-deck.is-changing .showcase-card-slide.active{transform:none;}
}

/* ---------- scroll story ---------- */
.journey-section{background:var(--paper-dim);}
.journey-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:72px;}
.journey-head h2{font-size:clamp(34px,5vw,62px);line-height:1;letter-spacing:-.045em;}
.journey-head h2 em{font-style:normal;color:var(--sprout-deep);}
.journey-head p{max-width:30ch;color:var(--mist);font-size:16px;line-height:1.6;}
.journey-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:90px;align-items:start;}
.journey-visual{position:sticky;top:96px;height:680px;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:var(--ink);color:var(--paper);box-shadow:0 24px 60px rgba(13,17,12,.14);isolation:isolate;}
.journey-canvas-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 82%);}
.journey-canvas-label{position:absolute;z-index:5;top:25px;left:28px;color:var(--mist-on-ink);font-size:9px;font-weight:600;letter-spacing:.12em;}
.journey-live-dot{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--sprout);box-shadow:0 0 0 4px rgba(216,255,77,.12);}
.journey-wallet{position:absolute;z-index:3;top:116px;left:58px;width:190px;padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:rgba(255,255,255,.06);backdrop-filter:blur(10px);transition:transform .8s var(--ease),opacity .6s var(--ease);}
.wallet-mark{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--sprout);border-radius:50%;color:var(--sprout);font-size:18px;}
.wallet-name{display:block;margin-top:29px;color:var(--mist-on-ink);font-size:9px;letter-spacing:.1em;}
.journey-wallet strong{display:block;margin-top:4px;font-family:'Instrument Sans',sans-serif;font-size:25px;letter-spacing:-.04em;}
.journey-wallet small{display:block;margin-top:8px;color:var(--sprout);font-size:8px;letter-spacing:.08em;}
.journey-assets{position:absolute;z-index:4;top:94px;left:275px;display:flex;flex-direction:column;gap:10px;transition:transform .85s var(--ease),opacity .6s var(--ease);}
.journey-asset{display:grid;place-items:center;width:57px;height:31px;border:1px solid rgba(216,255,77,.38);border-radius:99px;background:rgba(216,255,77,.1);color:var(--sprout);font-size:9px;font-weight:600;letter-spacing:.05em;box-shadow:0 0 18px rgba(216,255,77,.08);}
.asset-usdg{margin-left:20px;color:var(--paper);border-color:rgba(246,245,239,.25);background:rgba(246,245,239,.08);}
.asset-stock{margin-left:-10px;}
.journey-card-art{position:absolute;z-index:2;top:205px;left:50%;width:520px;height:292px;transform:translateX(-35%) rotate(4deg) scale(.8);transition:transform .9s var(--ease),opacity .7s var(--ease);}
.journey-card{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:22px;transition:transform .8s var(--ease),opacity .65s var(--ease),filter .8s var(--ease);}
.card-black{z-index:2;box-shadow:0 30px 45px rgba(0,0,0,.5);}
.card-white,.card-metal{z-index:1;opacity:0;mix-blend-mode:screen;}
.card-white{transform:translate(22px,-12px) rotate(4deg);}
.card-metal{transform:translate(-18px,16px) rotate(-5deg);}
.journey-split{position:absolute;z-index:5;top:520px;left:50%;display:flex;gap:10px;width:390px;transform:translateX(-50%);opacity:0;transition:opacity .5s var(--ease),transform .8s var(--ease);}
.journey-split>span{flex:1;padding:12px 15px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.06);font-family:'Instrument Sans',sans-serif;font-size:17px;}
.journey-split small{display:block;margin-top:4px;color:var(--mist-on-ink);font:8px Inter,sans-serif;letter-spacing:.1em;}
.journey-split .split-grow{color:var(--sprout);border-color:rgba(216,255,77,.35);background:rgba(216,255,77,.08);}
.journey-chart{position:absolute;z-index:5;right:27px;bottom:86px;left:27px;padding:17px 18px 12px;border:1px solid rgba(216,255,77,.23);border-radius:15px;background:rgba(13,17,12,.9);opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .8s var(--ease);}
.chart-title,.chart-axis{display:flex;justify-content:space-between;align-items:center;color:var(--mist-on-ink);font-size:8px;letter-spacing:.1em;}
.chart-title b{color:var(--sprout);font-family:'Instrument Sans',sans-serif;font-size:18px;letter-spacing:-.03em;}
.journey-chart svg{display:block;width:100%;height:100px;margin-top:10px;overflow:visible;}
.chart-area{fill:rgba(216,255,77,.1);}
.chart-line{fill:none;stroke:var(--sprout);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) .15s;}
.chart-axis{font-size:7px;opacity:.7;}
.journey-plant{position:absolute;z-index:4;right:80px;bottom:82px;width:210px;height:270px;opacity:0;transform:translateY(32px) scale(.82);transition:opacity .6s var(--ease),transform 1s var(--ease);}
.plant-glow{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,rgba(216,255,77,.23),transparent 66%);filter:blur(8px);}
.journey-stem{position:absolute;bottom:29px;left:50%;width:5px;height:188px;border-radius:6px;background:var(--sprout);transform:translateX(-50%) rotate(3deg);transform-origin:bottom;}
.journey-leaf{position:absolute;width:90px;height:48px;border:1px solid rgba(216,255,77,.72);border-radius:100% 0 100% 0;background:linear-gradient(135deg,rgba(216,255,77,.75),rgba(216,255,77,.08));box-shadow:0 0 18px rgba(216,255,77,.2);transform-origin:bottom right;}
.leaf-a{bottom:120px;left:25px;transform:rotate(18deg) scale(0);}
.leaf-b{right:25px;bottom:169px;transform:scaleX(-1) rotate(23deg) scale(0);}
.leaf-c{bottom:214px;left:78px;width:66px;height:38px;transform:rotate(6deg) scale(0);}
.journey-soil{position:absolute;right:10px;bottom:27px;left:10px;height:3px;border-radius:50%;background:rgba(216,255,77,.6);box-shadow:0 0 16px rgba(216,255,77,.25);}
.journey-canvas-footer{position:absolute;z-index:6;right:28px;bottom:25px;left:28px;display:flex;justify-content:space-between;color:var(--mist-on-ink);font-size:9px;letter-spacing:.1em;}
.journey-canvas-footer span:last-child{color:var(--sprout);}
.journey-steps{padding:110px 0 120px;}
.journey-step{display:grid;grid-template-columns:42px 1fr;gap:19px;min-height:250px;padding:0 0 58px;opacity:.3;transition:opacity .5s var(--ease);}
.journey-step:last-child{min-height:0;}
.journey-step.active{opacity:1;}
.journey-step-num{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--mist);font:600 11px 'Instrument Sans',sans-serif;transition:background .4s,border-color .4s,color .4s;}
.journey-step.active .journey-step-num{border-color:var(--ink);background:var(--ink);color:var(--sprout);}
.journey-step h3{max-width:11ch;font-size:clamp(25px,3vw,37px);line-height:1.04;letter-spacing:-.035em;}
.journey-step p{max-width:30ch;margin-top:15px;color:var(--mist);font-size:15px;line-height:1.65;}
.journey-visual[data-stage="1"] .journey-wallet,.journey-visual[data-stage="2"] .journey-wallet,.journey-visual[data-stage="3"] .journey-wallet{transform:translate(-68px,-118px) scale(.72);opacity:.18;}
.journey-visual[data-stage="1"] .journey-assets,.journey-visual[data-stage="2"] .journey-assets,.journey-visual[data-stage="3"] .journey-assets{transform:translate(78px,148px) scale(.55);opacity:0;}
.journey-visual[data-stage="1"] .journey-card-art,.journey-visual[data-stage="2"] .journey-card-art,.journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) rotate(-3deg) scale(1);}
.journey-visual[data-stage="2"] .card-white{opacity:.86;transform:translate(28px,-18px) rotate(5deg);}
.journey-visual[data-stage="3"] .card-white{opacity:.28;transform:translate(36px,-23px) rotate(7deg);}
.journey-visual[data-stage="3"] .card-metal{opacity:.9;transform:translate(-22px,20px) rotate(-7deg);}
.journey-visual[data-stage="1"] .journey-split,.journey-visual[data-stage="2"] .journey-split,.journey-visual[data-stage="3"] .journey-split{opacity:1;transform:translateX(-50%) translateY(0);}
.journey-visual[data-stage="2"] .journey-chart,.journey-visual[data-stage="3"] .journey-chart{opacity:1;transform:translateY(0);}
.journey-visual[data-stage="2"] .chart-line,.journey-visual[data-stage="3"] .chart-line{stroke-dashoffset:0;}
.journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(-58px) rotate(-7deg) scale(.78);opacity:.35;}
.journey-visual[data-stage="3"] .journey-split{opacity:.35;}
.journey-visual[data-stage="3"] .journey-chart{opacity:.2;transform:translateY(25px);}
.journey-visual[data-stage="3"] .journey-plant{opacity:1;transform:translateY(0) scale(1);}
.journey-visual[data-stage="3"] .leaf-a{animation:leaf-grow .65s var(--ease) .15s both;}
.journey-visual[data-stage="3"] .leaf-b{animation:leaf-grow .65s var(--ease) .34s both;}
.journey-visual[data-stage="3"] .leaf-c{animation:leaf-grow .65s var(--ease) .5s both;}
@keyframes leaf-grow{from{transform:rotate(18deg) scale(0);}to{transform:rotate(18deg) scale(1);}}
@media (max-width:960px){
  .journey-grid{gap:48px;}
  .journey-visual{height:620px;}
  .journey-steps{padding-top:60px;}
  .journey-step{min-height:220px;}
}
@media (max-width:760px){
  .journey-head{display:block;margin-bottom:44px;}
  .journey-head p{margin-top:18px;}
  .journey-grid{display:flex;flex-direction:column;gap:35px;}
  .journey-visual{position:relative;top:auto;width:100%;height:530px;border-radius:24px;}
  .journey-steps{width:100%;padding:20px 0 0;}
  .journey-step{min-height:210px;padding-bottom:55px;}
  .journey-wallet{top:88px;left:25px;width:155px;}
  .journey-assets{top:75px;left:auto;right:35px;}
  .journey-card-art{top:185px;left:50%;width:440px;height:248px;}
  .journey-split{top:390px;width:calc(100% - 38px);}
  .journey-chart{right:19px;bottom:60px;left:19px;}
  .journey-plant{right:50%;bottom:58px;transform:translate(50%,32px) scale(.82);}
  .journey-canvas-footer{right:20px;bottom:19px;left:20px;}
  .journey-canvas-label{top:20px;left:20px;}
  .journey-visual[data-stage="3"] .journey-plant{transform:translate(50%,0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .journey-wallet,.journey-assets,.journey-card-art,.journey-card,.journey-split,.journey-chart,.journey-plant,.journey-step,.chart-line{transition:none;}
  .journey-visual[data-stage="3"] .leaf-a,.journey-visual[data-stage="3"] .leaf-b,.journey-visual[data-stage="3"] .leaf-c{animation:none;transform:rotate(18deg) scale(1);}
}

/* ---------- card slider polish ---------- */
.showcase-stage{min-height:540px;}
.showcase-card-deck{height:450px;}
.showcase-card-deck::before,.showcase-card-deck::after{top:23px;bottom:13px;}
.showcase-card-slide{padding:25px 29px 23px;}
.product-card-image{position:relative;width:min(100%,430px);margin:24px auto 0;aspect-ratio:1.78/1;background:var(--ink);box-shadow:0 22px 36px rgba(13,17,12,.2);}
.product-card-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.product-card-detail img,.product-card-grow img{mix-blend-mode:screen;}
.image-card-badge{position:absolute;right:17px;bottom:15px;padding:5px 8px;border:1px solid rgba(216,255,77,.35);border-radius:99px;background:rgba(13,17,12,.6);color:var(--sprout);font-size:7px;font-weight:600;letter-spacing:.12em;}
.image-card-stat{position:absolute;right:19px;bottom:17px;display:flex;flex-direction:column;align-items:flex-end;color:var(--paper);text-align:right;}
.image-card-stat small{font-size:7px;letter-spacing:.12em;opacity:.7;}
.image-card-stat b{font-family:'Instrument Sans',sans-serif;font-size:25px;letter-spacing:-.04em;}
.image-card-stat span{font-size:8px;opacity:.72;}
.card-slide-info{width:min(100%,430px);margin:20px auto 0;}
.card-slide-info b{font-size:19px;}
.card-slide-foot{right:29px;bottom:20px;left:29px;}
@media (max-width:860px){
  .showcase-stage{min-height:540px;}
}
@media (max-width:560px){
  .showcase-stage{min-height:475px;}
  .showcase-card-deck{height:385px;}
  .showcase-card-slide{padding:20px 18px 19px;}
  .product-card-image{width:min(100%,350px);margin-top:20px;}
  .card-slide-info{margin-top:16px;}
  .card-slide-info small{font-size:7px;}
  .card-slide-info b{font-size:16px;}
  .card-slide-foot{right:18px;bottom:17px;left:18px;}
}

/* ---------- selector final composition ---------- */
.showcase-stage{min-height:min(730px,calc(100vh - 100px));}
.showcase-card-deck{height:650px;}
.showcase-card-deck::before,.showcase-card-deck::after{display:none;}
.showcase-card-slide.is-prev .card-slide-header,.showcase-card-slide.is-prev .card-slide-info,.showcase-card-slide.is-prev .card-detail-list,.showcase-card-slide.is-prev .card-activity-list,.showcase-card-slide.is-prev .card-slide-foot,.showcase-card-slide.is-next .card-slide-header,.showcase-card-slide.is-next .card-slide-info,.showcase-card-slide.is-next .card-detail-list,.showcase-card-slide.is-next .card-activity-list,.showcase-card-slide.is-next .card-slide-foot{opacity:0;}
.showcase-card-slide.is-prev .product-card-image,.showcase-card-slide.is-next .product-card-image{margin-top:165px;}
.showcase-card-slide.is-prev .product-card-image{transform:scale(.94);}
.showcase-card-slide.is-next .product-card-image{transform:scale(.94);}
.showcase-arrow{width:30px;height:30px;padding:0;border:0;background:transparent;color:rgba(246,245,239,.75);font-size:24px;}
.showcase-arrow:hover{background:transparent;border:0;color:var(--sprout);transform:translateY(-1px);}
.showcase-arrow span{font-size:24px;font-weight:300;}
@media (max-width:860px){
  .showcase-stage{min-height:620px;}
  .showcase-card-deck{height:560px;}
}
@media (max-width:560px){
  .showcase-stage{min-height:530px;}
  .showcase-card-deck{height:475px;}
  .showcase-card-slide.is-prev .product-card-image,.showcase-card-slide.is-next .product-card-image{margin-top:110px;}
}

/* ---------- section shell ---------- */
section{padding:112px 0;}
/* Matches the JS offset in smoothScrollTo (js/main.js) — this is the
   belt to that suspenders: covers the native scrollIntoView fallback
   and a direct #hash page load, which our click handler never sees. */
section[id]{scroll-margin-top:88px;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-tag{
  font-size:12.5px;color:var(--sprout-deep);font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;
}
.section-head h2{font-size:clamp(28px,3.6vw,42px);line-height:1.12;letter-spacing:-0.02em;}
.section-head p{margin-top:16px;font-size:16.5px;color:var(--mist);line-height:1.6;max-width:52ch;}

/* ---------- how it works ---------- */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
@media (max-width:960px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

.step-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:26px 24px 28px;
  display:flex;flex-direction:column;gap:18px;
  transition:transform .3s var(--ease), border-color .3s;
  position:relative;
}
.step-card:hover{transform:translateY(-4px);border-color:#D3D0C0;}
.step-card.grow{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.step-num{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:13px;
  color:var(--mist);
}
.step-card.grow .step-num{color:var(--sprout);}
.step-icon{
  width:40px;height:40px;border-radius:10px;background:var(--paper-dim);
  display:flex;align-items:center;justify-content:center;
}
.step-card.grow .step-icon{background:rgba(216,255,77,0.12);}
.step-icon svg{width:20px;height:20px;stroke:var(--bark);fill:none;stroke-width:1.6;}
.step-card.grow .step-icon svg{stroke:var(--sprout);}
.step-card h3{font-size:17.5px;font-weight:600;letter-spacing:-0.01em;}
.step-card p{font-size:14px;color:var(--mist);line-height:1.55;}
.step-card.grow p{color:var(--mist-on-ink);}
.step-badge{
  align-self:flex-start;font-size:11px;font-weight:600;color:var(--ink);
  background:var(--sprout);padding:4px 10px;border-radius:999px;
  letter-spacing:0.02em;
}

/* ---------- calculator ---------- */
.calc-section{background:var(--ink);color:var(--paper);}
.calc-section .section-head p{color:var(--mist-on-ink);}
.calc-section .section-tag{color:var(--sprout);}
.calc-panel{
  background:var(--ink-2);border:1px solid var(--line-on-ink);border-radius:var(--radius-lg);
  padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
@media (max-width:860px){.calc-panel{grid-template-columns:1fr;padding:28px;gap:36px;}}

.calc-control label{font-size:13px;color:var(--mist-on-ink);display:flex;justify-content:space-between;margin-bottom:14px;}
.calc-control label b{color:var(--paper);font-weight:600;font-variant-numeric:tabular-nums;}
input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:var(--line-on-ink);border-radius:99px;outline:none;margin-bottom:32px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--sprout);cursor:pointer;box-shadow:0 0 0 5px rgba(216,255,77,0.15);
  transition:box-shadow .2s;
}
input[type="range"]::-webkit-slider-thumb:hover{box-shadow:0 0 0 7px rgba(216,255,77,0.2);}
input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:none;
  background:var(--sprout);cursor:pointer;
}
.calc-ticker-choice{display:flex;gap:8px;flex-wrap:wrap;}
.tick-btn{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line-on-ink);
  font-size:13px;color:var(--mist-on-ink);transition:all .2s;
}
.tick-btn.active{background:var(--sprout);color:var(--ink);border-color:var(--sprout);font-weight:600;}

.calc-result{text-align:left;}
.calc-result .r-label{font-size:12.5px;color:var(--mist-on-ink);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;}
.calc-result .r-amount{
  font-family:'Instrument Sans',sans-serif;font-weight:600;
  font-size:clamp(40px,5vw,56px);color:var(--sprout);letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.calc-result .r-sub{margin-top:14px;font-size:14px;color:var(--mist-on-ink);line-height:1.6;max-width:38ch;}
.calc-disclaimer{margin-top:20px;font-size:11.5px;color:var(--mist-on-ink);opacity:0.7;line-height:1.5;}

/* ---------- features ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
/* Six cards revealing as one flat block read heavier than they should —
   staggering them (same reveal tokens, --motion-stagger delays) is the
   same technique already used on the fees rows and how-layout's steps,
   not a one-off effect. Container's own [data-reveal] motion is
   neutralized so only the cards animate. */
.feature-grid[data-reveal]{opacity:1;transform:none;transition:none;}
.feature-card{opacity:0;transform:translateY(14px);}
.feature-grid.is-visible .feature-card{opacity:1;transform:translateY(0);}
.feature-grid .feature-card:nth-child(1){transition-delay:0ms;}
.feature-grid .feature-card:nth-child(2){transition-delay:calc(var(--motion-stagger) * 1);}
.feature-grid .feature-card:nth-child(3){transition-delay:calc(var(--motion-stagger) * 2);}
.feature-grid .feature-card:nth-child(4){transition-delay:calc(var(--motion-stagger) * 3);}
.feature-grid .feature-card:nth-child(5){transition-delay:calc(var(--motion-stagger) * 4);}
.feature-grid .feature-card:nth-child(6){transition-delay:calc(var(--motion-stagger) * 5);}
@media (prefers-reduced-motion:reduce){
  .feature-card{transition-delay:0s !important;transform:none !important;}
}
@media (max-width:860px){.feature-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.feature-grid{grid-template-columns:1fr;}}
.feature-card{
  position:relative;background:var(--surface);padding:32px 28px;
  display:flex;flex-direction:column;gap:16px;
  /* one shared transform timing covers both the scroll-reveal slide-up
     and the hover lift — deliberately not two different easings on the
     same property, and not a springy overshoot on the reveal (the site's
     reveal system elsewhere is expo-out, not bouncy) */
  transition:
    opacity var(--motion-slow) var(--ease-out-expo),
    transform var(--motion-base) var(--ease-out-expo),
    background var(--motion-slow) var(--ease-in-out-quart),
    box-shadow var(--motion-slow) var(--ease-in-out-quart);
}
.feature-card.highlight{background:var(--ink);color:var(--paper);}
.feature-card.highlight .feature-icon{background:rgba(216,255,77,0.14);}
.feature-card.highlight .feature-icon svg{stroke:var(--sprout);}
.feature-card.highlight p{color:var(--mist-on-ink);}
.feature-icon{
  width:38px;height:38px;border-radius:10px;background:var(--paper-dim);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--motion-slow) var(--ease-in-out-quart);
}
.feature-icon svg{
  width:19px;height:19px;stroke:var(--bark);fill:none;stroke-width:1.6;
  transition:stroke var(--motion-slow) var(--ease-in-out-quart);
}
.feature-card h3{font-size:16px;font-weight:600;letter-spacing:-0.01em;}
.feature-card p{font-size:14px;color:var(--mist);line-height:1.55;transition:color var(--motion-slow) var(--ease-in-out-quart);}
.feature-tag{
  font-size:11px;font-weight:600;color:var(--sprout-deep);text-transform:uppercase;letter-spacing:0.04em;
  transition:color var(--motion-slow) var(--ease-in-out-quart);
}
.feature-card.highlight .feature-tag{color:var(--sprout);}

/* Tap feedback on every pointer type — a brief press toward the dark
   fill, releasing back. This is the touch fallback: cards aren't links
   (nothing to navigate to), so a momentary press response reads more
   honestly than faking a hover state that has to be un-stuck later.
   The permanently-dark .highlight card also already shows every touch
   visitor what the "filled" look is, without needing a gesture. */
.feature-card:not(.highlight):active{background:var(--ink);transform:scale(.99);}
.feature-card:not(.highlight):active h3{color:var(--paper);}
.feature-card:not(.highlight):active p{color:var(--mist-on-ink);}
.feature-card:not(.highlight):active .feature-icon{background:rgba(216,255,77,.14);}
.feature-card:not(.highlight):active .feature-icon svg{stroke:var(--sprout);}
.feature-card:not(.highlight):active .feature-tag{color:var(--sprout);}

@media (hover:hover) and (pointer:fine){
  .feature-card:hover{box-shadow:0 22px 44px -22px rgba(13,17,12,.4);transform:translateY(-3px);z-index:2;}
  .feature-card:not(.highlight):hover{background:var(--ink);}
  .feature-card:not(.highlight):hover h3{color:var(--paper);}
  .feature-card:not(.highlight):hover p{color:var(--mist-on-ink);}
  .feature-card:not(.highlight):hover .feature-icon{background:rgba(216,255,77,.14);}
  .feature-card:not(.highlight):hover .feature-icon svg{stroke:var(--sprout);}
  .feature-card:not(.highlight):hover .feature-tag{color:var(--sprout);}
}

/* ---------- fees ---------- */
.fees-table{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.fees-row{display:grid;grid-template-columns:1.4fr 1fr;padding:22px 28px;border-bottom:1px solid var(--line);align-items:center;gap:12px;}
.fees-row:last-child{border-bottom:none;}
.fees-row.head{background:var(--paper-dim);}
.fees-row.head span{font-size:12px;color:var(--mist);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;}
.fees-row .name{font-size:15px;font-weight:500;}
.fees-row .desc{font-size:13px;color:var(--mist);margin-top:3px;}
.fees-row .value{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:16px;text-align:right;}
.fees-row .value.free{color:var(--sprout-deep);}
@media (max-width:560px){.fees-row{grid-template-columns:1fr;text-align:left;}.fees-row .value{text-align:left;}}

/* summary strip — the one-line takeaway, so nobody has to read the whole
   table to get the point. Same accent-panel language as docs.html's note. */
.fees-summary{
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;padding:14px 18px;border-radius:14px;
  background:rgba(216,255,77,.08);border:1px solid rgba(143,179,0,.22);
}
.fees-summary-icon{
  display:grid;place-items:center;flex-shrink:0;
  width:26px;height:26px;border-radius:50%;
  background:var(--sprout);color:var(--ink);
}
.fees-summary-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;}
.fees-summary p{font-size:14.5px;color:var(--bark);}
.fees-summary b{color:var(--sprout-deep);font-weight:700;}

/* the "detailed" row: icon column, badge-style free values, a heavier
   spend-fee row (the one line users actually decide on), and a hover/tap
   micro-interaction — all layered on top of the base .fees-row so
   docs.html's plain reuse of the same classes is untouched. */
.fees-table-detailed .fees-row{
  grid-template-columns:36px 1fr auto;gap:16px;padding:18px 28px;
  transition:background var(--motion-fast) var(--ease-in-out-quart), transform var(--motion-fast) var(--ease-spring);
}
.fees-table-detailed .fees-row.head{grid-template-columns:1fr auto;padding:14px 28px;}
.fees-icon{
  width:36px;height:36px;border-radius:10px;background:var(--paper-dim);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background var(--motion-base) var(--ease-in-out-quart);
}
.fees-icon svg{width:18px;height:18px;fill:none;stroke:var(--bark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--motion-base) var(--ease-in-out-quart);}
.fees-table-detailed .value.free{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:rgba(216,255,77,.14);color:var(--sprout-deep);font-size:13px;
}
.fees-table-detailed .fees-row.emphasis{
  padding-top:24px;padding-bottom:24px;
  background:rgba(216,255,77,.05);
  box-shadow:inset 3px 0 0 var(--sprout);
}
.fees-table-detailed .fees-row.emphasis .name{font-size:16.5px;font-weight:600;}
.fees-table-detailed .fees-row.emphasis .value{font-size:19px;}
.fees-table-detailed .fees-row.emphasis .fees-icon{background:rgba(216,255,77,.16);}
.fees-table-detailed .fees-row.emphasis .fees-icon svg{stroke:var(--sprout-deep);}

/* touch feedback — press response, not a stuck hover (same reasoning as
   the feature cards: nothing here is a link, so a momentary press reads
   more honest than faking a hover state on tap) */
.fees-table-detailed .fees-row:not(.head):active{background:var(--bg);transform:translateX(2px);}
@media (hover:hover) and (pointer:fine){
  .fees-table-detailed .fees-row:not(.head):hover{background:var(--bg);transform:translateX(4px);}
  .fees-table-detailed .fees-row:not(.head):hover .fees-icon{background:rgba(216,255,77,.16);}
  .fees-table-detailed .fees-row:not(.head):hover .fees-icon svg{stroke:var(--sprout-deep);}
}

/* staggered reveal — the container's own [data-reveal] motion is
   neutralized (rows do the animating, not the box around them), each
   row fades/lifts in on the same tokens as the rest of the site with a
   top-to-bottom delay off --motion-stagger. */
.fees-table-detailed[data-reveal]{opacity:1;transform:none;transition:none;}
.fees-table-detailed .fees-row{
  opacity:0;transform:translateY(14px);
  transition:
    opacity var(--motion-slow) var(--ease-out-expo),
    transform var(--motion-slow) var(--ease-out-expo),
    background var(--motion-fast) var(--ease-in-out-quart),
    box-shadow var(--motion-fast) var(--ease-in-out-quart);
}
.fees-table-detailed.is-visible .fees-row{opacity:1;transform:translateY(0);}
.fees-table-detailed .fees-row:nth-child(1){transition-delay:0ms;}
.fees-table-detailed .fees-row:nth-child(2){transition-delay:calc(var(--motion-stagger) * 1);}
.fees-table-detailed .fees-row:nth-child(3){transition-delay:calc(var(--motion-stagger) * 2);}
.fees-table-detailed .fees-row:nth-child(4){transition-delay:calc(var(--motion-stagger) * 3);}
.fees-table-detailed .fees-row:nth-child(5){transition-delay:calc(var(--motion-stagger) * 4);}
.fees-table-detailed .fees-row:nth-child(6){transition-delay:calc(var(--motion-stagger) * 5);}
.fees-table-detailed .fees-row:nth-child(7){transition-delay:calc(var(--motion-stagger) * 6);}
@media (prefers-reduced-motion:reduce){
  .fees-table-detailed .fees-row{transition-delay:0s !important;transition-duration:var(--motion-instant) !important;transform:none !important;}
}

@media (max-width:640px){
  .fees-table-detailed .fees-row{grid-template-columns:32px 1fr;grid-template-areas:"icon name" "icon value";row-gap:2px;}
  .fees-table-detailed .fees-row.head{grid-template-columns:1fr auto;grid-template-areas:none;}
  .fees-table-detailed .fees-icon{grid-area:icon;width:32px;height:32px;align-self:start;}
  .fees-table-detailed .fees-row>div:nth-child(2){grid-area:name;}
  .fees-table-detailed .fees-row .value{grid-area:value;text-align:left;margin-top:2px;}
}

/* quiet footer strip on the fee table — not another fee line, just a
   low-key nudge once someone's read the whole table. Same rounded
   container (border-radius comes from .fees-table's overflow:hidden),
   paper-dim background bookends the head row at the top. */
.fees-order{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px 16px;padding:18px 24px 18px 28px;
  border-top:1px solid var(--line);background:var(--paper-dim);
  transition:background var(--motion-fast) var(--ease-in-out-quart);
}
.fees-order-lead{font-size:13.5px;color:var(--mist);}
.fees-order-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;color:var(--bark);
}
.fees-order-arrow{
  display:grid;place-items:center;flex-shrink:0;
  width:30px;height:30px;border-radius:50%;
  background:var(--sprout);color:var(--ink);
  transition:transform var(--motion-fast) var(--ease-spring);
}
.fees-order-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;}
.fees-order:active{transform:scale(.99);}
@media (hover:hover) and (pointer:fine){
  .fees-order:hover{background:var(--bg);}
  .fees-order:hover .fees-order-arrow{transform:translateX(4px);}
}
@media (max-width:560px){
  .fees-order{padding:14px 16px;}
}

/* ---------- faq ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 0;font-size:16.5px;font-weight:500;text-align:left;
}
.faq-q .plus{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;position:relative;transition:transform .3s var(--ease), background .3s, border-color .3s;
}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background:var(--bark);transition:transform .3s var(--ease);}
.faq-q .plus::before{width:10px;height:1.4px;}
.faq-q .plus::after{width:1.4px;height:10px;}
.faq-item.open .faq-q .plus{background:var(--ink);border-color:var(--ink);transform:rotate(180deg);}
.faq-item.open .faq-q .plus::before,.faq-item.open .faq-q .plus::after{background:var(--sprout);}
.faq-item.open .faq-q .plus::after{transform:scaleY(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.faq-a p{font-size:14.5px;color:var(--mist);line-height:1.65;padding-bottom:24px;max-width:64ch;}

/* ---------- final cta ---------- */
.final-cta{
  background:var(--ink);color:var(--paper);text-align:center;
  border-radius:var(--radius-lg);margin:0 24px;padding:80px 32px;
  position:relative;overflow:hidden;
}
.final-cta-glow{
  position:absolute;bottom:-30%;left:50%;transform:translateX(-50%);width:70%;aspect-ratio:1;
  background:radial-gradient(circle, rgba(216,255,77,0.16) 0%, rgba(216,255,77,0) 70%);
  pointer-events:none;
}
.final-cta h2{position:relative;font-size:clamp(30px,4.4vw,48px);letter-spacing:-0.02em;max-width:18ch;margin:0 auto;}
.final-cta p{position:relative;margin-top:18px;color:var(--mist-on-ink);font-size:16px;}
.final-cta .hero-actions{position:relative;justify-content:center;margin-top:34px;}

/* ---------- footer ---------- */
footer{padding:56px 0 40px;}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;}
.footer-brand{
  display:flex;align-items:center;gap:8px;font-size:17px;
  transition:color var(--motion-base) var(--ease-in-out-quart);
}
.footer-brand svg{
  width:18px;height:18px;fill:var(--bark);
  transition:
    fill var(--motion-base) var(--ease-in-out-quart),
    transform var(--motion-base) var(--ease-spring),
    filter var(--motion-base) var(--ease-in-out-quart);
}
.footer-brand:hover svg{transform:scale(1.08) rotate(-4deg);}
.footer-links{display:flex;gap:28px;flex-wrap:wrap;}
.footer-links a{
  font-size:13.5px;color:var(--mist);
  transition:color var(--motion-base) var(--ease-in-out-quart), text-shadow var(--motion-base) var(--ease-in-out-quart);
}
.footer-links a:hover{color:var(--bark);}
.footer-legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--mist);line-height:1.7;}

:root[data-theme="dark"] .footer-brand:hover{color:var(--sprout);}
:root[data-theme="dark"] .footer-brand:hover svg{fill:var(--sprout);filter:drop-shadow(0 0 10px rgba(216,255,77,.5));}
:root[data-theme="dark"] .footer-links a:hover{color:var(--sprout);text-shadow:0 0 16px rgba(216,255,77,.35);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .footer-brand:hover{color:var(--sprout);}
  :root:not([data-theme="light"]) .footer-brand:hover svg{fill:var(--sprout);filter:drop-shadow(0 0 10px rgba(216,255,77,.5));}
  :root:not([data-theme="light"]) .footer-links a:hover{color:var(--sprout);text-shadow:0 0 16px rgba(216,255,77,.35);}
}

/* ---------- misc ---------- */
.section-alt{background:var(--paper-dim);}

/* ---------- calculator card reveal ---------- */
.calc-result{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:390px;text-align:left;perspective:1000px;}
.calc-result-card{position:relative;z-index:1;min-height:205px;padding:25px 27px;border:1px solid rgba(216,255,77,.3);border-radius:20px;background:linear-gradient(140deg,#30382B,#0D110C 74%);box-shadow:0 24px 45px rgba(0,0,0,.22);transform-origin:center bottom;transform-style:preserve-3d;transition:transform .55s var(--ease),opacity .35s var(--ease);}
.calc-result-card::before{content:'';position:absolute;right:24px;bottom:51px;left:24px;height:1px;background:rgba(216,255,77,.18);transform:translateZ(1px);}
.calc-result-card.is-folding{animation:calc-card-fold .62s var(--ease) both;}
@keyframes calc-card-fold{0%{transform:perspective(900px) rotateX(0) translateY(0) scale(1);opacity:1;}35%{transform:perspective(900px) rotateX(-14deg) translateY(-3px) scale(.995);opacity:.92;}68%{transform:perspective(900px) rotateX(5deg) translateY(3px) scale(.98);opacity:.76;}100%{transform:perspective(900px) rotateX(0) translateY(5px) scale(.96);opacity:.68;}}
.calc-card-top,.calc-card-bottom{display:flex;justify-content:space-between;align-items:center;color:var(--mist-on-ink);font-size:9px;letter-spacing:.1em;}
.calc-card-live{display:flex;align-items:center;gap:6px;color:var(--sprout);}
.calc-card-live i{width:6px;height:6px;border-radius:50%;background:var(--sprout);box-shadow:0 0 0 4px rgba(216,255,77,.12);}
.calc-card-amount{margin-top:55px;font-family:'Instrument Sans',sans-serif;font-size:48px;font-weight:600;letter-spacing:-.05em;color:var(--paper);font-variant-numeric:tabular-nums;}
.calc-card-label{margin-top:2px;color:var(--mist-on-ink);font-size:9px;letter-spacing:.1em;}
.calc-card-line{height:1px;margin:19px 0 13px;background:var(--line-on-ink);}
.calc-card-bottom b{color:var(--sprout);font-weight:600;}
.calc-card-bottom span:last-child{color:var(--paper);font-family:'Instrument Sans',sans-serif;font-size:15px;letter-spacing:0;}
/* frosted glass, not var(--surface) — this sheet sits on .calc-section's
   permanently-dark ink background in both themes, so it needs its own
   fixed light-on-glass treatment rather than a theme-relative surface
   (which collapsed into the ink bg in dark mode — nearly the same tone). */
.calc-result-sheet{
  position:relative;z-index:2;margin:-18px 17px 0;padding:24px 25px 22px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.10);
  border-top-color:rgba(255,255,255,.16);
  color:var(--paper);
  box-shadow:0 20px 35px rgba(0,0,0,.28);
  transform-origin:top center;
}
.calc-result-sheet.is-revealing{animation:calc-sheet-reveal .65s var(--ease) both;}
@keyframes calc-sheet-reveal{0%{transform:translateY(16px) scaleY(.97);opacity:.35;}55%{transform:translateY(2px) scaleY(.995);opacity:.88;}100%{transform:translateY(0) scaleY(1);opacity:1;}}
.calc-result-sheet .r-label{margin-bottom:8px;color:var(--mist-on-ink);font-size:10px;}
.calc-result-sheet .r-amount{color:var(--sprout);font-size:clamp(42px,5vw,58px);}
.calc-result-sheet .r-sub{margin-top:12px;color:var(--mist-on-ink);font-size:13px;line-height:1.55;}
.calc-result-sheet .r-sub span{color:var(--paper);font-weight:600;}
.calc-result-sheet .calc-disclaimer{margin-top:17px;color:var(--mist-on-ink);font-size:10px;opacity:.8;}
@media (max-width:860px){
  .calc-result{min-height:0;}
}
@media (max-width:560px){
  .calc-result-card{min-height:180px;padding:21px 21px;}
  .calc-card-amount{margin-top:43px;font-size:40px;}
  .calc-result-sheet{margin:-15px 11px 0;padding:20px 20px 18px;}
}
@media (prefers-reduced-motion:reduce){
  .calc-result-card.is-folding,.calc-result-sheet.is-revealing{animation:none;}
}

/* ---------- calm live calculator update ---------- */
.calc-result-card{overflow:hidden;transform:none;transition:box-shadow .5s var(--ease),border-color .5s var(--ease);}
.calc-result-card::after{content:'';position:absolute;z-index:0;inset:-20%;background:linear-gradient(105deg,transparent 38%,rgba(216,255,77,.2) 49%,rgba(255,255,255,.08) 53%,transparent 64%);transform:translateX(-75%) rotate(3deg);pointer-events:none;}
.calc-result-card>*{position:relative;z-index:1;}
.calc-result-card.is-folding{animation:calc-card-shimmer .75s var(--ease) both;}
.calc-result-card.is-folding::after{animation:calc-shine .78s var(--ease) both;}
@keyframes calc-card-shimmer{0%,100%{box-shadow:0 24px 45px rgba(0,0,0,.22);border-color:rgba(216,255,77,.3);}45%{box-shadow:0 24px 52px rgba(216,255,77,.15),0 0 24px rgba(216,255,77,.08);border-color:rgba(216,255,77,.6);}}
@keyframes calc-shine{0%{transform:translateX(-75%) rotate(3deg);}100%{transform:translateX(75%) rotate(3deg);}}
.calc-card-amount.is-updating{animation:calc-number-update .55s var(--ease) both;}
@keyframes calc-number-update{0%,100%{color:var(--paper);text-shadow:none;}45%{color:var(--sprout);text-shadow:0 0 18px rgba(216,255,77,.45);}}
.calc-result-sheet.is-revealing{animation:calc-sheet-update .55s var(--ease) both;}
@keyframes calc-sheet-update{0%,100%{opacity:1;transform:none;}45%{opacity:.82;transform:none;box-shadow:0 20px 42px rgba(216,255,77,.1);}}
@media (prefers-reduced-motion:reduce){
  .calc-result-card.is-folding,.calc-result-card.is-folding::after,.calc-result-sheet.is-revealing,.calc-card-amount.is-updating{animation:none;}
}

/* ---------- showcase return to brand canvas ---------- */
.showcase-section{background:var(--bg);color:var(--bark);}
.showcase-intro h2{color:var(--bark);}
.showcase-intro p{color:var(--mist);}
.showcase-intro .section-tag{color:var(--sprout-deep);}
.showcase-copy h3{color:var(--bark);}
.showcase-copy p{color:var(--mist);}
.showcase-kicker{color:var(--sprout-deep);}
.showcase-stage{min-height:min(690px,calc(100vh - 120px));border:0;border-radius:0;background:var(--paper);box-shadow:none;}
.showcase-stage::before{width:540px;height:540px;background:radial-gradient(circle,rgba(216,255,77,.18),rgba(216,255,77,0) 68%);}
.showcase-stage::after{color:var(--sprout-deep);}
.showcase-card-deck{height:610px;}
.showcase-card-slide{inset:22px 0 0;}
.showcase-card-slide{will-change:transform,opacity;}
.showcase-card-deck.is-changing .showcase-card-slide.active{animation:none;}
.showcase-card-deck::before,.showcase-card-deck::after{display:none;}
.showcase-card-slide.is-prev,.showcase-card-slide.is-next{opacity:.42;}
.showcase-card-slide.is-prev .product-card-image,.showcase-card-slide.is-next .product-card-image{margin-top:142px;}
.showcase-arrow{color:var(--bark);opacity:.72;}
.showcase-arrow:hover{color:var(--sprout-deep);}
.showcase-dot{background:#C5C7BC;}
.showcase-dot.active{background:var(--ink);}
.card-slide-header{color:var(--mist);}
.card-slide-status{color:var(--sprout-deep);}
.card-slide-info small,.card-slide-foot{color:var(--mist);}
.card-slide-info b{color:var(--bark);}
.card-slide-info .green,.card-slide-foot span:last-child{color:var(--sprout-deep);}
.showcase-caption{color:var(--mist);}
.showcase-card-slide.is-prev .card-slide-header,.showcase-card-slide.is-prev .card-slide-info,.showcase-card-slide.is-prev .card-detail-list,.showcase-card-slide.is-prev .card-activity-list,.showcase-card-slide.is-prev .card-slide-foot,.showcase-card-slide.is-next .card-slide-header,.showcase-card-slide.is-next .card-slide-info,.showcase-card-slide.is-next .card-detail-list,.showcase-card-slide.is-next .card-activity-list,.showcase-card-slide.is-next .card-slide-foot{opacity:0;}
.showcase-arrow:disabled{opacity:.25;cursor:default;transform:none;}
@media (max-width:860px){
  .showcase-stage{min-height:620px;}
  .showcase-card-deck{height:560px;}
}
@media (max-width:560px){
  .showcase-stage{min-height:530px;}
  .showcase-card-deck{height:475px;}
  .showcase-card-slide{inset:17px 0 0;}
  .showcase-card-slide.is-prev .product-card-image,.showcase-card-slide.is-next .product-card-image{margin-top:100px;}
}

/* ---------- scroll story clean pass ---------- */
.journey-visual{height:650px;overflow:hidden;}
.journey-wallet{top:145px;left:50%;transform:translateX(-50%);text-align:left;}
.journey-assets{top:116px;left:auto;right:22%;flex-direction:row;gap:8px;}
.journey-assets .asset-usdg{margin:20px 0 0 -22px;}
.journey-assets .asset-stock{margin:40px 0 0 -22px;}
.journey-card-art{top:215px;left:50%;width:min(100%,450px);height:auto;aspect-ratio:1.82/1;transform:translateX(-50%) translateY(34px) scale(.76);opacity:0;transition:transform .82s var(--ease),opacity .55s var(--ease);}
.journey-card{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:0;filter:none;}
.journey-split{top:auto;bottom:82px;transform:translateX(-50%) translateY(20px);gap:8px;}
.journey-chart{right:24px;bottom:82px;left:24px;transform:translateY(24px);}
.journey-plant{right:50%;bottom:108px;width:180px;height:205px;transform:translate(50%,35px) scale(.8);}
.journey-stem{bottom:27px;height:112px;width:4px;}
.journey-leaf{width:72px;height:35px;}
.journey-plant .leaf-a{bottom:79px;left:17px;}
.journey-plant .leaf-b{right:17px;bottom:112px;}
.journey-plant .leaf-c{display:none;}
.journey-soil{right:0;bottom:25px;left:0;}
.journey-visual[data-stage="0"] .journey-card-art{opacity:0;transform:translateX(-50%) translateY(34px) scale(.76);}
.journey-visual[data-stage="0"] .journey-split,.journey-visual[data-stage="0"] .journey-chart,.journey-visual[data-stage="0"] .journey-plant{opacity:0;}
.journey-visual[data-stage="1"] .journey-wallet{transform:translate(-50%,-34px) scale(.78);opacity:0;}
.journey-visual[data-stage="1"] .journey-assets{transform:translate(40px,100px) scale(.55);opacity:0;}
.journey-visual[data-stage="1"] .journey-card-art{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
.journey-visual[data-stage="1"] .journey-split{opacity:1;transform:translateX(-50%) translateY(0);}
.journey-visual[data-stage="2"] .journey-wallet,.journey-visual[data-stage="2"] .journey-assets{opacity:0;transform:translateY(-30px) scale(.75);}
.journey-visual[data-stage="2"] .journey-card-art{opacity:.55;transform:translateX(-50%) translateY(-88px) scale(.78);}
.journey-visual[data-stage="2"] .journey-split{opacity:.3;transform:translateX(-50%) translateY(16px);}
.journey-visual[data-stage="2"] .journey-chart{opacity:1;transform:translateY(0);}
.journey-visual[data-stage="3"] .journey-wallet,.journey-visual[data-stage="3"] .journey-assets{opacity:0;}
.journey-visual[data-stage="3"] .journey-card-art{opacity:0;transform:translateX(-50%) translateY(-165px) scale(.62);}
.journey-visual[data-stage="3"] .journey-split,.journey-visual[data-stage="3"] .journey-chart{opacity:0;transform:translateY(24px);}
.journey-visual[data-stage="3"] .journey-plant{opacity:1;transform:translate(50%,0) scale(1);}
.journey-visual[data-stage="3"] .leaf-a{animation:journey-leaf-left .7s var(--ease) .15s both;}
.journey-visual[data-stage="3"] .leaf-b{animation:journey-leaf-right .7s var(--ease) .3s both;}
@keyframes journey-leaf-left{from{transform:rotate(22deg) scale(0);}to{transform:rotate(22deg) scale(1);}}
@keyframes journey-leaf-right{from{transform:scaleX(-1) rotate(22deg) scale(0);}to{transform:scaleX(-1) rotate(22deg) scale(1);}}
@media (max-width:760px){
  .journey-visual{height:540px;}
  .journey-assets{right:10%;}
  .journey-card-art{top:190px;width:min(100%,390px);}
  .journey-split{bottom:67px;width:calc(100% - 38px);}
  .journey-chart{right:19px;bottom:60px;left:19px;}
  .journey-plant{bottom:82px;}
}
@media (prefers-reduced-motion:reduce){
  .journey-wallet,.journey-assets,.journey-card-art,.journey-split,.journey-chart,.journey-plant{transition:none;}
  .journey-visual[data-stage="3"] .leaf-a{animation:none;transform:rotate(22deg) scale(1);}
  .journey-visual[data-stage="3"] .leaf-b{animation:none;transform:scaleX(-1) rotate(22deg) scale(1);}
}

/* ---------- one card through every story step ---------- */
.journey-plant{display:none!important;}
.journey-card-art{opacity:1;transform:translateX(-50%) translateY(55px) scale(.78);transition:transform .8s var(--ease),opacity .5s var(--ease);}
.journey-card-art .journey-card{transition:opacity .65s var(--ease),transform .8s var(--ease);}
.journey-visual[data-stage="0"] .journey-card-art{opacity:.76;transform:translateX(-50%) translateY(55px) scale(.78);}
.journey-visual[data-stage="0"] .card-white,.journey-visual[data-stage="0"] .card-metal{opacity:0;}
.journey-visual[data-stage="1"] .journey-card-art{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
.journey-visual[data-stage="1"] .card-black{opacity:1;transform:none;}
.journey-visual[data-stage="1"] .card-white,.journey-visual[data-stage="1"] .card-metal{opacity:0;}
.journey-visual[data-stage="2"] .journey-card-art{opacity:1;transform:translateX(-50%) translateY(-74px) scale(.78);}
.journey-visual[data-stage="2"] .card-black{opacity:0;transform:translateX(-18px) scale(.96);}
.journey-visual[data-stage="2"] .card-white{opacity:1;transform:none;}
.journey-visual[data-stage="2"] .card-metal{opacity:0;}
.journey-visual[data-stage="3"] .journey-card-art{opacity:1;transform:translateX(-50%) translateY(-2px) scale(.9);}
.journey-visual[data-stage="3"] .card-black,.journey-visual[data-stage="3"] .card-white{opacity:0;}
.journey-visual[data-stage="3"] .card-metal{opacity:1;transform:none;}
@media (max-width:760px){
  .journey-card-art{top:190px;transform:translateX(-50%) translateY(45px) scale(.72);}
  .journey-visual[data-stage="0"] .journey-card-art{transform:translateX(-50%) translateY(45px) scale(.72);}
  .journey-visual[data-stage="1"] .journey-card-art{transform:translateX(-50%) translateY(0) scale(.9);}
  .journey-visual[data-stage="2"] .journey-card-art{transform:translateX(-50%) translateY(-61px) scale(.7);}
  .journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(0) scale(.8);}
}

/* ---------- stable transparent card motion ---------- */
.product-card-image{background:transparent;box-shadow:none;}
.product-card-image img{object-fit:contain;filter:drop-shadow(0 24px 28px rgba(13,17,12,.2));}
.product-card-hero img{transform:scale(1.18);}
.showcase-card-slide.active .product-card-hero img{transform:scale(1.18);}
.showcase-card-slide.is-prev .product-card-image,.showcase-card-slide.is-next .product-card-image{margin-top:24px;}
@media (max-width:560px){
  .showcase-card-slide.is-prev .product-card-image,.showcase-card-slide.is-next .product-card-image{margin-top:20px;}
}

/* ---------- side navigation and card details ---------- */
.showcase-controls{display:none;}
.showcase-zone{position:absolute;z-index:8;top:0;bottom:0;width:19%;display:flex;align-items:center;gap:9px;padding:0 22px;border:0;background:transparent;color:var(--mist);font-size:52px;font-weight:300;line-height:1;opacity:.48;transition:opacity .3s var(--ease),color .3s var(--ease),background .3s var(--ease);}
.showcase-zone:hover{color:var(--sprout-deep);opacity:1;background:linear-gradient(90deg,rgba(216,255,77,.1),transparent);}
.showcase-zone:focus-visible{outline:2px solid var(--sprout-deep);outline-offset:-5px;}
.showcase-zone small{font-size:8px;font-weight:600;letter-spacing:.12em;opacity:0;transition:opacity .3s var(--ease);}
.showcase-zone:hover small{opacity:1;}
.showcase-zone-prev{left:0;justify-content:flex-start;}
.showcase-zone-next{right:0;justify-content:flex-end;background:linear-gradient(270deg,rgba(216,255,77,0),transparent);}
.showcase-zone-next:hover{background:linear-gradient(270deg,rgba(216,255,77,.1),transparent);}
.card-grow-summary{display:grid;grid-template-columns:1fr 1fr;width:min(100%,610px);margin:24px auto 0;text-align:left;}
.card-grow-summary small{display:block;color:var(--mist);font-size:8px;letter-spacing:.1em;}
.card-grow-summary b{display:block;margin-top:3px;color:var(--bark);font:600 24px 'Instrument Sans',sans-serif;letter-spacing:-.04em;}
.card-grow-summary>div:last-child{padding-left:24px;border-left:1px solid var(--line);}
.card-grow-chart{width:min(100%,610px);margin:20px auto 0;text-align:left;}
.card-grow-chart>div{display:flex;justify-content:space-between;color:var(--mist);font-size:8px;letter-spacing:.1em;}
.card-grow-chart>div b{color:var(--sprout-deep);}
.card-grow-chart svg{display:block;width:100%;height:45px;margin-top:4px;overflow:visible;}
.card-grow-chart path{fill:none;stroke:var(--sprout-deep);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease);}
.showcase-card-slide.active .card-grow-chart path{stroke-dashoffset:0;}
.showcase-card-slide.is-prev .card-grow-summary,.showcase-card-slide.is-prev .card-grow-chart,.showcase-card-slide.is-next .card-grow-summary,.showcase-card-slide.is-next .card-grow-chart{opacity:0;}
@media (max-width:560px){
  .showcase-zone{width:16%;padding:0 9px;font-size:36px;}
  .showcase-zone small{display:none;}
  .card-grow-summary{margin-top:17px;}
  .card-grow-summary b{font-size:18px;}
  .card-grow-chart{margin-top:14px;}
  .card-grow-chart svg{height:33px;}
}

/* ---------- final journey state map ---------- */
.journey-card-art{
  top:195px!important;
  left:50%!important;
  width:min(100%,520px)!important;
  height:auto!important;
  aspect-ratio:1.82/1!important;
  opacity:1!important;
  transform:translateX(-50%) translateY(25px) scale(.82)!important;
  transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .7s ease!important;
}
.journey-card-art .journey-card{
  transition:opacity .75s ease,transform .95s cubic-bezier(.16,1,.3,1)!important;
}
.journey-card-art .card-black{z-index:3!important;opacity:1!important;transform:translate(0,0) rotate(0)!important;}
.journey-card-art .card-white{z-index:2!important;opacity:.3!important;transform:translate(17px,-9px) rotate(3deg)!important;}
.journey-card-art .card-metal{z-index:1!important;opacity:.2!important;transform:translate(-17px,11px) rotate(-4deg)!important;}
.journey-visual[data-stage="0"] .journey-card-art{transform:translateX(-50%) translateY(25px) scale(.82)!important;}
.journey-visual[data-stage="0"] .journey-wallet{top:90px!important;left:25px!important;transform:none!important;opacity:1!important;}
.journey-visual[data-stage="0"] .journey-assets{top:82px!important;right:25px!important;opacity:1!important;transform:none!important;}
.journey-visual[data-stage="1"] .journey-wallet,.journey-visual[data-stage="1"] .journey-assets,
.journey-visual[data-stage="2"] .journey-wallet,.journey-visual[data-stage="2"] .journey-assets,
.journey-visual[data-stage="3"] .journey-wallet,.journey-visual[data-stage="3"] .journey-assets{opacity:0!important;transform:translateY(-18px)!important;}
.journey-visual[data-stage="1"] .journey-card-art{transform:translateX(-50%) translateY(0) scale(1)!important;}
.journey-visual[data-stage="1"] .card-black{z-index:1!important;opacity:.28!important;transform:translate(-23px,13px) rotate(-5deg)!important;}
.journey-visual[data-stage="1"] .card-white{z-index:2!important;opacity:.2!important;transform:translate(22px,-10px) rotate(4deg)!important;}
.journey-visual[data-stage="1"] .card-metal{z-index:4!important;opacity:1!important;transform:none!important;}
.journey-visual[data-stage="1"] .journey-split{opacity:1!important;transform:translateX(-50%) translateY(0)!important;}
.journey-visual[data-stage="2"] .journey-card-art{transform:translateX(-50%) translateY(-54px) scale(.78)!important;}
.journey-visual[data-stage="2"] .card-black{z-index:1!important;opacity:.2!important;transform:translate(-18px,10px) rotate(-4deg)!important;}
.journey-visual[data-stage="2"] .card-metal{z-index:2!important;opacity:.24!important;transform:translate(18px,9px) rotate(4deg)!important;}
.journey-visual[data-stage="2"] .card-white{z-index:4!important;opacity:1!important;transform:none!important;}
.journey-visual[data-stage="2"] .journey-chart{opacity:1!important;transform:translateY(0)!important;}
.journey-visual[data-stage="2"] .journey-split{opacity:.3!important;transform:translateX(-50%) translateY(15px)!important;}
.journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(-4px) scale(.86)!important;}
.journey-visual[data-stage="3"] .card-black{z-index:1!important;opacity:.82!important;transform:translate(-25px,15px) rotate(-6deg)!important;}
.journey-visual[data-stage="3"] .card-white{z-index:2!important;opacity:.92!important;transform:translate(18px,-10px) rotate(4deg)!important;}
.journey-visual[data-stage="3"] .card-metal{z-index:4!important;opacity:1!important;transform:none!important;}
.journey-visual[data-stage="3"] .journey-chart{opacity:0!important;transform:translateY(18px)!important;}
.journey-visual[data-stage="3"] .journey-split{opacity:1!important;transform:translateX(-50%) translateY(0)!important;}
.journey-plant{display:none!important;}
@media (max-width:760px){
  .journey-card-art{top:175px!important;width:min(100%,410px)!important;}
  .journey-visual[data-stage="0"] .journey-card-art{transform:translateX(-50%) translateY(25px) scale(.76)!important;}
  .journey-visual[data-stage="1"] .journey-card-art{transform:translateX(-50%) translateY(0) scale(.88)!important;}
  .journey-visual[data-stage="2"] .journey-card-art{transform:translateX(-50%) translateY(-40px) scale(.7)!important;}
  .journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(-3px) scale(.76)!important;}
}

/* ---------- definitive journey card states ---------- */
.journey-card-art .journey-card{filter:none!important;}
.journey-visual[data-stage="0"] .card-black{z-index:4!important;opacity:1!important;transform:none!important;}
.journey-visual[data-stage="0"] .card-white,.journey-visual[data-stage="0"] .card-metal{opacity:0!important;transform:none!important;}
.journey-visual[data-stage="1"] .card-black,.journey-visual[data-stage="1"] .card-white{opacity:0!important;transform:none!important;}
.journey-visual[data-stage="1"] .card-metal{z-index:4!important;opacity:1!important;transform:none!important;}
.journey-visual[data-stage="2"] .card-black,.journey-visual[data-stage="2"] .card-metal{opacity:0!important;transform:none!important;}
.journey-visual[data-stage="2"] .card-white{z-index:4!important;opacity:1!important;transform:none!important;}
.journey-visual[data-stage="3"] .card-black{z-index:1!important;opacity:.9!important;transform:translate(-27px,16px) rotate(-6deg)!important;}
.journey-visual[data-stage="3"] .card-white{z-index:2!important;opacity:1!important;transform:translate(19px,-11px) rotate(4deg)!important;}
.journey-visual[data-stage="3"] .card-metal{z-index:4!important;opacity:1!important;transform:none!important;}
.journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(-8px) scale(.86)!important;}
.journey-visual[data-stage="0"] .journey-card-art{transform:translateX(-50%) translateY(72px) scale(.72)!important;}
.journey-visual[data-stage="1"] .journey-card-art{transform:translateX(-50%) translateY(0) scale(1)!important;}
.journey-visual[data-stage="2"] .journey-card-art{transform:translateX(-50%) translateY(-54px) scale(.78)!important;}
.journey-visual[data-stage="0"] .journey-split,.journey-visual[data-stage="0"] .journey-chart{opacity:0!important;}
.journey-visual[data-stage="1"] .journey-split{opacity:1!important;transform:translateX(-50%) translateY(0)!important;}
.journey-visual[data-stage="2"] .journey-chart{opacity:1!important;transform:translateY(0)!important;}
.journey-visual[data-stage="3"] .journey-split{opacity:1!important;transform:translateX(-50%) translateY(0)!important;}
@media (max-width:760px){
  .journey-visual[data-stage="0"] .journey-card-art{transform:translateX(-50%) translateY(48px) scale(.67)!important;}
  .journey-visual[data-stage="1"] .journey-card-art{transform:translateX(-50%) translateY(0) scale(.88)!important;}
  .journey-visual[data-stage="2"] .journey-card-art{transform:translateX(-50%) translateY(-40px) scale(.7)!important;}
  .journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(-4px) scale(.76)!important;}
}

/* ---------- journey stable stack ---------- */
.journey-card-art{top:195px;width:min(100%,520px);height:auto;aspect-ratio:1.82/1;transform:translateX(-50%) translateY(20px) scale(.84);opacity:1;}
.journey-wallet{top:90px;left:25px;transform:none;}
.journey-assets{top:82px;right:25px;}
.journey-card-art .card-black{z-index:3;opacity:1;transform:translate(0,0) rotate(0);}
.journey-card-art .card-white{z-index:2;opacity:.34;transform:translate(16px,-9px) rotate(3deg);}
.journey-card-art .card-metal{z-index:1;opacity:.22;transform:translate(-16px,11px) rotate(-4deg);}
.journey-visual[data-stage="0"] .journey-card-art{transform:translateX(-50%) translateY(20px) scale(.84);}
.journey-visual[data-stage="0"] .journey-wallet,.journey-visual[data-stage="0"] .journey-assets{opacity:1;}
.journey-visual[data-stage="1"] .journey-card-art{transform:translateX(-50%) translateY(0) scale(1);}
.journey-visual[data-stage="1"] .card-black{z-index:1;opacity:.34;transform:translate(-24px,13px) rotate(-5deg);}
.journey-visual[data-stage="1"] .card-white{z-index:2;opacity:.2;transform:translate(22px,-10px) rotate(4deg);}
.journey-visual[data-stage="1"] .card-metal{z-index:4;opacity:1;transform:none;}
.journey-visual[data-stage="2"] .journey-card-art{transform:translateX(-50%) translateY(-58px) scale(.78);}
.journey-visual[data-stage="2"] .card-black{z-index:1;opacity:.2;transform:translate(-19px,10px) rotate(-4deg);}
.journey-visual[data-stage="2"] .card-metal{z-index:2;opacity:.24;transform:translate(19px,9px) rotate(4deg);}
.journey-visual[data-stage="2"] .card-white{z-index:4;opacity:1;transform:none;}
.journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(-6px) scale(.86);}
.journey-visual[data-stage="3"] .card-black{z-index:1;opacity:.82;transform:translate(-26px,15px) rotate(-6deg);}
.journey-visual[data-stage="3"] .card-white{z-index:2;opacity:.92;transform:translate(18px,-10px) rotate(4deg);}
.journey-visual[data-stage="3"] .card-metal{z-index:4;opacity:1;transform:none;}
.journey-visual[data-stage="3"] .journey-split{opacity:1;transform:translateX(-50%) translateY(0);}
.journey-visual[data-stage="3"] .journey-chart{opacity:0;transform:translateY(20px);}
@media (max-width:760px){
  .journey-visual{height:555px;}
  .journey-card-art{top:175px;width:min(100%,410px);}
  .journey-visual[data-stage="0"] .journey-card-art{transform:translateX(-50%) translateY(20px) scale(.76);}
  .journey-visual[data-stage="1"] .journey-card-art{transform:translateX(-50%) translateY(0) scale(.88);}
  .journey-visual[data-stage="2"] .journey-card-art{transform:translateX(-50%) translateY(-42px) scale(.7);}
  .journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(-4px) scale(.76);}
}

/* ---------- readable three-card stack ---------- */
.journey-card-art .journey-card{filter:none!important;mix-blend-mode:normal!important;}
.journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(-10px) scale(.82)!important;}
.journey-visual[data-stage="3"] .journey-card-art .card-black{z-index:1!important;opacity:1!important;transform:translate(-42px,22px) rotate(-7deg)!important;}
.journey-visual[data-stage="3"] .journey-card-art .card-white{z-index:2!important;opacity:1!important;transform:translate(40px,-18px) rotate(6deg)!important;}
.journey-visual[data-stage="3"] .journey-card-art .card-metal{z-index:4!important;opacity:1!important;transform:translate(0,0) rotate(-1deg)!important;}
@media (max-width:760px){
  .journey-visual[data-stage="3"] .journey-card-art{transform:translateX(-50%) translateY(-4px) scale(.73)!important;}
  .journey-visual[data-stage="3"] .journey-card-art .card-black{transform:translate(-31px,17px) rotate(-7deg)!important;}
  .journey-visual[data-stage="3"] .journey-card-art .card-white{transform:translate(30px,-13px) rotate(6deg)!important;}
}

/* ---------- direct step selection and solid cards ---------- */
.journey-step{cursor:pointer;}
.journey-step:focus-visible{outline:2px solid var(--sprout-deep);outline-offset:8px;border-radius:8px;}
.journey-card-art .card-black,.journey-card-art .card-white,.journey-card-art .card-metal{mix-blend-mode:normal!important;}
.journey-visual[data-stage="0"] .card-black{opacity:1!important;}
.journey-visual[data-stage="0"] .card-white,.journey-visual[data-stage="0"] .card-metal{opacity:0!important;}
.journey-visual[data-stage="1"] .card-black,.journey-visual[data-stage="1"] .card-white{opacity:0!important;}
.journey-visual[data-stage="1"] .card-metal{opacity:1!important;}
.journey-visual[data-stage="2"] .card-black,.journey-visual[data-stage="2"] .card-metal{opacity:0!important;}
.journey-visual[data-stage="2"] .card-white{opacity:1!important;}
.journey-visual[data-stage="3"] .card-black,.journey-visual[data-stage="3"] .card-white,.journey-visual[data-stage="3"] .card-metal{opacity:1!important;}
.showcase-card-slide.active.is-entering-next{opacity:.42;transform:translateX(69%) scale(.69) rotate(9deg);}
.showcase-card-slide.active.is-entering-prev{opacity:.42;transform:translateX(-69%) scale(.69) rotate(-9deg);}
@media (prefers-reduced-motion:reduce){
  .showcase-card-slide.active.is-entering-next,.showcase-card-slide.active.is-entering-prev{transform:none;opacity:1;}
}

/* ---------- low-cost circular motion ---------- */
.showcase-card-slide{backface-visibility:hidden;transform-style:flat;will-change:transform,opacity;}
.showcase-card-slide .product-card-image img,
.showcase-card-slide.active .product-card-image img{transform:none!important;filter:none!important;backface-visibility:hidden;}
.showcase-card-slide .product-card-image img{transition:none!important;}
.showcase-card-slide .product-card-image{border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;}
.showcase-card-slide .product-card-image::after{display:none!important;}
.showcase-card-slide .product-card-image img{border-radius:0!important;}
.showcase-card-slide.active .card-slide-info,
.showcase-card-slide.active .card-detail-list,
.showcase-card-slide.active .card-grow-summary,
.showcase-card-slide.active .card-grow-chart,
.showcase-card-slide.active .card-activity-list{visibility:visible;opacity:1;transform:none;}
.showcase-card-slide.is-prev .card-detail-list,
.showcase-card-slide.is-next .card-detail-list{visibility:hidden;}
.showcase-section .card-detail-list,
.showcase-section .card-activity-list{border-color:var(--line);}
.showcase-section .card-detail-list>div,
.showcase-section .card-activity-list>div{border-color:var(--line);}
.showcase-section .card-detail-list span,
.showcase-section .card-activity-list small{color:var(--mist)!important;}
.showcase-section .card-detail-list b,
.showcase-section .card-activity-list b{color:var(--bark)!important;}
.showcase-section .card-detail-list .green,
.showcase-section .card-activity-list strong{color:var(--sprout-deep)!important;}
.showcase-card-slide .product-card-grow ~ .card-slide-foot{display:none;}
.showcase-section .showcase-caption{display:none;}
.showcase-section .card-slide-foot{
  position:relative;
  right:auto;
  left:auto;
  bottom:auto;
  margin:18px auto 0;
  width:min(72vw,680px);
  padding:0 4px;
}
.showcase-section .showcase-card-slide.active .card-activity-list{margin-bottom:8px;}
.showcase-palette{
  position:absolute;
  z-index:20;
  top:18px;
  left:50%;
  display:flex;
  gap:12px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transform:translateX(-50%);
  pointer-events:auto;
}
.showcase-color{
  width:26px;
  height:26px;
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--swatch);
  box-shadow:0 0 0 1px rgba(13,17,12,.18);
  cursor:pointer;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.showcase-color:hover{border-color:#fff;}
.showcase-color.is-active{
  border-color:#fff;
  box-shadow:0 0 0 2px var(--ink),0 0 0 3px #fff;
}
.showcase-card-slide .product-card-grow ~ .card-activity-list{margin-bottom:38px;}

/* ---------- full-screen click-through showcase ---------- */
.showcase-section>.wrap{max-width:none;padding:0;}
.showcase-section .showcase-intro{max-width:1160px;margin-right:auto;margin-left:auto;padding-right:24px;padding-left:24px;}
.showcase-section .showcase-stage{width:100vw;min-height:760px;margin-left:calc(50% - 50vw);overflow:hidden;}
.showcase-section .showcase-stage::after{display:none;}
.showcase-section .showcase-card-deck{width:min(100%,980px);min-height:720px;height:auto;margin:0 auto;padding-bottom:20px;}
.showcase-section .showcase-card-slide{inset:0;}
.showcase-section .showcase-card-deck::before,
.showcase-section .showcase-card-deck::after{display:none;}
.showcase-section .showcase-card-slide{
  transition:opacity .5s var(--ease),transform .65s var(--ease);
  transform:translateX(35%) scale(.72) rotate(8deg);
  will-change:transform,opacity;
}
.showcase-section .showcase-card-slide.is-prev,
.showcase-section .showcase-card-slide.is-next{
  visibility:visible;
  opacity:.38!important;
  pointer-events:none;
}
.showcase-section .showcase-card-slide.is-prev{transform:translateX(-69%) scale(.69) rotate(-9deg)!important;}
.showcase-section .showcase-card-slide.is-next{transform:translateX(69%) scale(.69) rotate(9deg)!important;}
.showcase-section .showcase-card-slide.active{
  visibility:visible;
  opacity:1!important;
  transform:translateX(0) scale(1) rotate(0)!important;
  pointer-events:auto;
}
.showcase-section .showcase-card-slide:not(.active):not(.is-prev):not(.is-next){
  visibility:hidden;
  opacity:0!important;
  pointer-events:none;
}
.showcase-section .showcase-card-slide.is-prev .card-slide-header,
.showcase-section .showcase-card-slide.is-prev .card-slide-info,
.showcase-section .showcase-card-slide.is-prev .card-detail-list,
.showcase-section .showcase-card-slide.is-prev .card-grow-summary,
.showcase-section .showcase-card-slide.is-prev .card-grow-chart,
.showcase-section .showcase-card-slide.is-prev .card-activity-list,
.showcase-section .showcase-card-slide.is-prev .card-slide-foot,
.showcase-section .showcase-card-slide.is-next .card-slide-header,
.showcase-section .showcase-card-slide.is-next .card-slide-info,
.showcase-section .showcase-card-slide.is-next .card-detail-list,
.showcase-section .showcase-card-slide.is-next .card-grow-summary,
.showcase-section .showcase-card-slide.is-next .card-grow-chart,
.showcase-section .showcase-card-slide.is-next .card-activity-list,
.showcase-section .showcase-card-slide.is-next .card-slide-foot{opacity:0;}
.showcase-section .showcase-card-deck.is-changing.direction-next .showcase-card-slide.active{animation:selector-in-next .65s var(--ease) both;}
.showcase-section .showcase-card-deck.is-changing.direction-prev .showcase-card-slide.active{animation:selector-in-prev .65s var(--ease) both;}
@media (max-width:860px){
  .showcase-section .showcase-card-slide.is-prev,
  .showcase-section .showcase-card-slide.is-next{opacity:0!important;visibility:hidden;}
  .showcase-section .showcase-card-slide{transform:none!important;transition:opacity .28s ease!important;}
  .showcase-section .showcase-card-slide.active{transform:none!important;}
}
.showcase-section .showcase-card-slide.active .product-card-image{width:min(72vw,680px);margin-top:68px;}
.showcase-section .showcase-card-slide.active .card-slide-info,
.showcase-section .showcase-card-slide.active .card-detail-list,
.showcase-section .showcase-card-slide.active .card-grow-summary,
.showcase-section .showcase-card-slide.active .card-grow-chart,
.showcase-section .showcase-card-slide.active .card-activity-list{width:min(72vw,680px);}
.showcase-section .showcase-zone{z-index:9;width:50%;padding:0;opacity:0;background:transparent!important;color:transparent;pointer-events:auto;}
.showcase-section .showcase-zone-prev{left:0;top:72px;}
.showcase-section .showcase-zone-next{right:0;top:72px;}
.showcase-section .showcase-zone:focus-visible{outline:2px solid var(--sprout-deep);outline-offset:-8px;}
.showcase-section .showcase-stage{background:var(--paper);}
.showcase-section .card-slide-header{color:var(--mist);}
.showcase-section .card-slide-status{color:var(--sprout-deep);}
.showcase-section .card-slide-info small,
.showcase-section .card-slide-foot{color:var(--mist);}
.showcase-section .card-slide-info b{color:var(--bark);}
.showcase-section .card-slide-info .green,
.showcase-section .card-slide-foot span:last-child{color:var(--sprout-deep);}
@media (max-width:860px){
  .showcase-section .showcase-intro{padding-right:20px;padding-left:20px;}
  .showcase-section .showcase-stage{
    width:100%;
    margin-left:0;
    min-height:520px;
    height:auto;
    overflow:hidden;
  }
  .showcase-section .showcase-card-deck{min-height:520px;height:auto;padding-bottom:16px;}
  .showcase-section .showcase-card-slide.active .product-card-image{width:min(78vw,400px);margin-top:48px;}
  .showcase-section .showcase-card-slide.active .card-slide-info,
  .showcase-section .showcase-card-slide.active .card-detail-list,
  .showcase-section .showcase-card-slide.active .card-grow-summary,
  .showcase-section .showcase-card-slide.active .card-grow-chart,
  .showcase-section .showcase-card-slide.active .card-activity-list{width:min(78vw,400px);}
  .showcase-card-slide{transition:opacity .28s ease!important;transform:none!important;will-change:auto;}
}
@media (max-width:560px){
  .showcase-section .showcase-stage{min-height:460px;}
  .showcase-section .showcase-card-deck{min-height:460px;height:auto;padding-bottom:12px;}
  .showcase-section .showcase-card-slide.active .product-card-image{width:min(86vw,340px);margin-top:40px;}
  .showcase-section .showcase-card-slide.active .card-slide-info,
  .showcase-section .showcase-card-slide.active .card-detail-list,
  .showcase-section .showcase-card-slide.active .card-grow-summary,
  .showcase-section .showcase-card-slide.active .card-grow-chart,
  .showcase-section .showcase-card-slide.active .card-activity-list{width:min(86vw,340px);}
}
.showcase-section .showcase-card-slide.active:has(.product-card-grow) .product-card-image{
  width:min(64vw,500px);
  margin-top:40px;
}
.showcase-section .showcase-card-slide.active:has(.product-card-grow) .card-grow-summary{margin-top:14px;}
.showcase-section .showcase-card-slide.active:has(.product-card-grow) .card-grow-summary b{font-size:20px;}
.showcase-section .showcase-card-slide.active:has(.product-card-grow) .card-grow-chart{margin-top:10px;}
.showcase-section .showcase-card-slide.active:has(.product-card-grow) .card-grow-chart svg{height:32px;}
.showcase-section .showcase-card-slide.active:has(.product-card-grow) .card-activity-list{
  margin-top:10px;
  margin-bottom:16px;
}
.showcase-section .showcase-card-slide.active:has(.product-card-grow) .card-activity-list>div{padding:8px 0;}
.showcase-card-slide.active.is-entering-next{transform:translateX(69%) scale(.69) rotate(9deg);}
.showcase-card-slide.active.is-entering-prev{transform:translateX(-69%) scale(.69) rotate(-9deg);}

/* ---------- final responsive details ---------- */
.marquee-note{margin:16px auto 0;max-width:70ch;color:var(--mist);font-size:11px;text-align:center;}
.calc-result-card{cursor:default;}
@media (max-width:1080px) and (min-width:861px){
  .nav-links{gap:16px;}
  .nav-links a{font-size:12px;}
  .nav-cta{padding-right:14px;padding-left:14px;font-size:12px;}
}
@media (max-width:860px){
  .nav-inner{position:relative;}
  .nav-toggle{display:grid;place-items:center;gap:5px;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--bark);}
  .nav-toggle span{display:block;width:13px;height:1px;background:currentColor;transition:transform .2s var(--ease);}
  .nav.menu-open .nav-toggle span:first-child{transform:translateY(3px) rotate(45deg);}
  .nav.menu-open .nav-toggle span:last-child{transform:translateY(-3px) rotate(-45deg);}
  .nav.menu-open .nav-links{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(0) scale(1);
    transition:opacity var(--motion-fast) var(--ease-out-expo), transform var(--motion-fast) var(--ease-out-expo);
  }
  .nav.menu-open .nav-links a{
    padding:12px 14px;border-radius:10px;
    transition:background var(--motion-fast) var(--ease-in-out-quart), transform var(--motion-fast) var(--ease-spring);
  }
  .nav.menu-open .nav-links a:active{background:var(--bg);transform:scale(.98);}
  .nav-cta{padding:9px 13px;font-size:12px;}
}
@media (hover:hover) and (pointer:fine){
  .nav.menu-open .nav-links a:hover{background:var(--bg);}
}
@media (max-width:560px){
  .nav-cta{display:none;}
  .marquee-note{padding:0 20px;font-size:10px;line-height:1.5;}
}

/* ---------- concise brief points ---------- */
.steps{gap:0;position:relative;}
.step-card{
  min-height:190px;
  padding:38px 24px 24px;
  gap:12px;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.step-card:hover{transform:none;border-color:var(--line);}
.step-card::before{
  content:'';
  position:absolute;
  top:-5px;
  left:24px;
  width:9px;
  height:9px;
  border:2px solid var(--paper);
  border-radius:50%;
  background:var(--sprout-deep);
  box-shadow:0 0 0 1px var(--sprout-deep);
}
.step-card.grow{border-color:var(--line);background:transparent;color:var(--bark);}
.step-card.grow .step-num{color:var(--sprout-deep);}
.step-card.grow .step-icon{background:transparent;}
.step-card.grow .step-icon svg{stroke:var(--sprout-deep);}
.step-num{font-size:11px;color:var(--sprout-deep);}
.step-icon,.step-badge{display:none;}
.step-card h3{max-width:15ch;font-size:20px;line-height:1.08;}
.step-card p{max-width:24ch;font-size:13px;line-height:1.55;}
@media (max-width:960px){
  .step-card{min-height:170px;}
}
@media (max-width:560px){
  .step-card{min-height:0;padding:30px 0 28px 24px;}
  .step-card::before{left:0;}
  .step-card h3{max-width:none;}
  .step-card p{max-width:34ch;}
}

/* ---------- how-it-works card sequence ---------- */
.how-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:72px;align-items:start;}
.how-visual{position:sticky;top:96px;height:540px;overflow:hidden;border-radius:28px;background:var(--ink);color:var(--paper);isolation:isolate;}
.how-visual::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#20291a,#0D110C 65%);}
.how-visual-glow{
  position:absolute;z-index:0;top:50%;left:50%;width:120%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(216,255,77,.20) 0%,rgba(216,255,77,0) 58%);
  transform:translate(-50%,-50%) translate(0,-4%) scale(1);
  transition:transform var(--motion-slow) var(--ease-spring);
  will-change:transform;
  pointer-events:none;
}
.how-visual[data-stage="1"] .how-visual-glow{transform:translate(-50%,-50%) translate(-8%,2%) scale(1.06);}
.how-visual[data-stage="2"] .how-visual-glow{transform:translate(-50%,-50%) translate(6%,6%) scale(1.1);}
.how-visual[data-stage="3"] .how-visual-glow{transform:translate(-50%,-50%) translate(0,10%) scale(1.16);}
.how-visual-top,.how-visual-bottom{position:absolute;z-index:5;right:26px;left:26px;display:flex;justify-content:space-between;align-items:center;color:var(--mist-on-ink);font-size:8px;font-weight:600;letter-spacing:.12em;}
.how-visual-top{top:24px;}
.how-visual-top span{display:flex;align-items:center;gap:8px;}
.how-visual-top i{width:6px;height:6px;border-radius:50%;background:var(--sprout);box-shadow:0 0 0 4px rgba(216,255,77,.12);}
.how-visual-top b{
  color:var(--sprout);font-size:8px;display:inline-block;
  transition:opacity var(--motion-fast) var(--ease-out-expo),transform var(--motion-fast) var(--ease-out-expo);
}
.how-card-stack{position:absolute;z-index:2;top:118px;left:50%;width:min(88%,480px);aspect-ratio:1.78/1;transform:translateX(-50%);}
.how-card{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;
  will-change:transform,opacity,filter;
  transition:
    transform var(--motion-slow) var(--ease-out-expo),
    opacity var(--motion-base) var(--ease-in-out-quart),
    filter var(--motion-base) var(--ease-in-out-quart);
}
.how-card-black{z-index:3;opacity:1;filter:blur(0);transform:translate(0,0) rotate(0);}
.how-card-white{z-index:2;opacity:0;filter:blur(3px);transform:translate(20px,14px) rotate(4deg) scale(.93);}
.how-card-metal{z-index:1;opacity:0;filter:blur(3px);transform:translate(-20px,15px) rotate(-4deg) scale(.93);}
.how-visual[data-stage="1"] .how-card-black{z-index:1;opacity:.22;filter:blur(2px);transform:translate(-26px,18px) rotate(-6deg) scale(.94);}
.how-visual[data-stage="1"] .how-card-white{z-index:2;opacity:.2;filter:blur(2px);transform:translate(25px,-12px) rotate(4deg) scale(.94);}
.how-visual[data-stage="1"] .how-card-metal{z-index:4;opacity:1;filter:blur(0);transform:none;}
.how-visual[data-stage="2"] .how-card-black{z-index:1;opacity:.18;filter:blur(2px);transform:translate(-22px,15px) rotate(-5deg) scale(.92);}
.how-visual[data-stage="2"] .how-card-white{z-index:4;opacity:1;filter:blur(0);transform:none;}
.how-visual[data-stage="2"] .how-card-metal{z-index:2;opacity:.2;filter:blur(2px);transform:translate(23px,12px) rotate(5deg) scale(.92);}
.how-visual[data-stage="3"] .how-card-black{z-index:1;opacity:1;filter:blur(0);transform:translate(-28px,18px) rotate(-7deg) scale(.9);}
.how-visual[data-stage="3"] .how-card-white{z-index:2;opacity:1;filter:blur(0);transform:translate(21px,-12px) rotate(5deg) scale(.94);}
.how-visual[data-stage="3"] .how-card-metal{z-index:4;opacity:1;filter:blur(0);transform:none;}
.how-flow{
  position:absolute;z-index:5;right:26px;bottom:73px;left:26px;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity var(--motion-base) var(--ease-out-expo),transform var(--motion-base) var(--ease-spring);
}
.how-flow span{
  padding:12px 14px;border:1px solid rgba(255,255,255,.13);border-radius:12px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  font:17px 'Instrument Sans',sans-serif;
}
.how-flow span:last-child{border-color:rgba(216,255,77,.35);background:rgba(216,255,77,.09);color:var(--sprout);}
.how-flow small{display:block;margin-top:4px;color:var(--mist-on-ink);font:8px Inter,sans-serif;letter-spacing:.1em;}
.how-visual[data-stage="1"] .how-flow,.how-visual[data-stage="2"] .how-flow,.how-visual[data-stage="3"] .how-flow{opacity:1;transform:none;}
.how-visual-bottom{bottom:23px;}

.how-layout .steps{display:flex;flex-direction:column;position:relative;padding:38px 0 28px;}
.how-rail{
  position:absolute;top:38px;bottom:28px;left:15px;width:2px;
  background:var(--line);border-radius:2px;overflow:hidden;
}
.how-rail-fill{
  display:block;width:100%;height:100%;border-radius:2px;background:var(--sprout-deep);
  transform-origin:top;transform:scaleY(var(--how-progress,0));
  transition:transform var(--motion-slow) var(--ease-spring);
  will-change:transform;
}
.how-layout .step-card{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:19px;
  min-height:156px;
  padding:0 0 42px;
  border:0;
  border-radius:0;
  background:transparent;
  opacity:.32;
  transform:translateY(4px) scale(.99);
  transition:
    opacity var(--motion-slow) var(--ease-out-expo),
    transform var(--motion-slow) var(--ease-out-expo);
}
.how-layout .step-card::before{display:none;}
.how-layout .step-card.is-active{background:transparent;border:0;border-radius:0;opacity:1;transform:translateY(0) scale(1);}
.how-layout .step-num{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--mist);
  background:var(--paper);
  position:relative;z-index:1;
  transform:translateY(2px);
  transition:
    border-color var(--motion-fast) var(--ease-out-expo),
    background var(--motion-fast) var(--ease-out-expo),
    color var(--motion-fast) var(--ease-out-expo),
    transform var(--motion-base) var(--ease-spring);
}
.how-layout .step-card.is-active .step-num{border-color:var(--ink);background:var(--ink);color:var(--sprout);transform:translateY(0) scale(1.06);}
.how-layout .step-card h3{
  max-width:16ch;font-size:clamp(22px,2.5vw,32px);line-height:1.04;
  transform:translateY(3px);
  transition:transform var(--motion-base) var(--ease-out-expo) var(--motion-stagger);
}
.how-layout .step-card h3,.how-layout .step-card p{grid-column:2;}
.how-layout .step-card p{
  max-width:30ch;margin-top:10px;
  transform:translateY(3px);
  transition:transform var(--motion-base) var(--ease-out-expo) calc(var(--motion-stagger) * 2);
}
.how-layout .step-card.is-active h3,
.how-layout .step-card.is-active p{transform:translateY(0);}
.how-layout .step-card.grow{color:var(--bark);}
.how-layout .step-card.grow .step-num{color:var(--mist);}
.how-layout .step-card.grow.is-active .step-num{color:var(--sprout);}
/* Mobile-first note: below 861px the split layout (sticky visual +
   scrollytelling list) collapses to a single column, and the step list
   stays single-column at every size in that range — it used to flip to a
   2-col grid here, which is the exact "shrink instead of reflow" bug:
   a layout meant to be read top-to-bottom got crammed sideways on any
   tablet or landscape phone between 560–860px. */
@media (max-width:860px){
  .how-layout{grid-template-columns:1fr;gap:20px;}
  .how-visual{
    position:relative;
    top:auto;
    z-index:1;
    width:100%;
    max-width:520px;
    height:auto;
    aspect-ratio:1.05/1;
    max-height:min(52vw,300px);
    margin:0 auto;
    isolation:auto;
    overflow:clip;
    border-radius:20px;
  }
  .how-card-stack{top:50%;transform:translate(-50%,-50%);width:86%;}
  .how-card,.how-visual[data-stage] .how-card{
    filter:none!important;
    will-change:auto;
    transition:transform .4s ease,opacity .35s ease;
  }
  .how-visual-glow{will-change:auto;transition:none;}
  .how-flow span{backdrop-filter:none;-webkit-backdrop-filter:none;}
  .how-rail{display:block;left:15px;top:0;bottom:0;}
  .how-layout .steps{display:flex;flex-direction:column;padding:4px 0 0;max-width:520px;margin:0 auto;width:100%;}
  .how-layout .step-card{
    display:grid;
    grid-template-columns:38px 1fr;
    grid-template-rows:auto auto;
    gap:6px 16px;
    align-items:start;
    min-height:0;
    padding:0 0 24px;
    margin:0;
    opacity:.42;
    transform:none;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    transition:opacity .28s ease;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .how-layout .step-card.is-active{opacity:1;background:transparent;transform:none;}
  .how-layout .step-num{
    grid-column:1;
    grid-row:1 / span 2;
    align-self:start;
    width:32px;
    height:32px;
    margin:0;
    transform:none;
  }
  .how-layout .step-card.is-active .step-num{transform:none;}
  .how-layout .step-card h3{
    grid-column:2;
    grid-row:1;
    font-size:clamp(18px,4.2vw,24px);
    line-height:1.12;
    max-width:none;
    transform:none;
    transition:none;
  }
  .how-layout .step-card p{
    grid-column:2;
    grid-row:2;
    max-width:none;
    margin-top:0;
    font-size:13px;
    line-height:1.5;
    transform:none;
    transition:none;
  }
  .how-layout .step-card.is-active h3,
  .how-layout .step-card.is-active p{transform:none;}
}
@media (min-width:641px) and (max-width:900px){
  .how-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;
    align-items:start;
  }
  .how-visual{
    position:sticky;
    top:80px;
    max-height:360px;
    aspect-ratio:auto;
    height:360px;
  }
  .how-layout .steps{max-width:none;margin:0;}
}
@media (max-width:560px){
  .how-visual{
    position:relative;
    top:auto;
    height:auto;
    max-height:min(52vw,260px);
    aspect-ratio:1.05/1;
    border-radius:18px;
  }
  .how-visual-top,.how-visual-bottom{right:16px;left:16px;}
  .how-card-stack{width:92%;}
  .how-flow{right:16px;bottom:48px;left:16px;}
  .how-flow span{padding:8px 10px;font-size:13px;}
  .how-layout .step-card{padding:0 0 22px;gap:12px 14px;}
  .how-layout .step-num{width:28px;height:28px;font-size:10px;}
  .how-layout .step-card h3{font-size:17px;}
  .how-layout .step-card p{font-size:12.5px;margin-top:6px;}
}
/* short viewports (phones in landscape) — the fixed-height demo panel
   shouldn't eat the whole screen before the user reaches any text */
@media (max-height:480px) and (orientation:landscape){
  .how-visual{height:min(70vh,260px);}
}
@media (prefers-reduced-motion:reduce){
  .how-card,.how-flow,.how-visual-glow,.how-rail-fill,
  .how-layout .step-card,.how-layout .step-num,.how-layout .step-card h3,.how-layout .step-card p{
    transition-duration:var(--motion-instant) !important;
    transition-delay:0s !important;
    transition-timing-function:ease !important;
  }
}

/* ---------- quick-nav dock (Apple-dock style) ---------- */
.dock{
  position:fixed;left:50%;bottom:22px;z-index:90;
  display:flex;align-items:flex-end;gap:4px;
  max-width:calc(100vw - 24px);overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:10px 12px;border-radius:20px;
  background:rgba(13,17,12,.5);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 50px -14px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;
  transform:translate(-50%,14px);
  transition:opacity var(--motion-base) var(--ease-out-expo), transform var(--motion-base) var(--ease-out-expo);
}
.dock.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.dock-item{
  position:relative;
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:14px;
  color:var(--mist-on-ink);
  transform-origin:bottom center;
  transition:
    color var(--motion-base) var(--ease-in-out-quart),
    background var(--motion-base) var(--ease-in-out-quart),
    filter var(--motion-base) var(--ease-in-out-quart),
    transform var(--motion-fast) var(--ease-spring);
}
.dock-item:focus-visible,.dock-item.is-active{
  color:var(--sprout);
  background:rgba(216,255,77,.09);
  filter:drop-shadow(0 0 10px rgba(216,255,77,.55));
}
.dock-item:focus-visible{outline:2px solid var(--sprout);outline-offset:2px;}
.dock-item:active{transform:scale(.9);}
@media (hover:hover) and (pointer:fine){
  .dock-item:hover{
    color:var(--sprout);
    background:rgba(216,255,77,.09);
    filter:drop-shadow(0 0 10px rgba(216,255,77,.55));
  }
}
.dock-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.dock-tooltip{
  position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translate(-50%,4px);
  padding:5px 10px;border-radius:8px;
  background:rgba(13,17,12,.92);border:1px solid rgba(255,255,255,.1);
  color:var(--paper);font-size:11px;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity var(--motion-fast) var(--ease-out-expo), transform var(--motion-fast) var(--ease-out-expo);
}
.dock-item:hover .dock-tooltip,.dock-item:focus-visible .dock-tooltip{opacity:1;transform:translate(-50%,0);}
@media (max-width:480px){
  .dock{gap:2px;padding:8px;bottom:calc(14px + env(safe-area-inset-bottom, 0px));}
  .dock-icon{width:18px;height:18px;} /* dock-item itself stays 44x44 — touch target floor */
  .dock-tooltip{display:none;} /* no hover on touch — just noise */
}
@media (prefers-reduced-motion:reduce){
  .dock,.dock-item,.dock-tooltip{transition-duration:var(--motion-instant) !important;}
}

/* ---------- docs page ---------- */
.docs-hero{padding:168px 0 56px;background:var(--ink);color:var(--paper);}
.docs-hero .eyebrow{margin-bottom:22px;}
.docs-hero h1{font-size:clamp(34px,5vw,52px);letter-spacing:-0.02em;}
.docs-hero-sub{margin-top:18px;font-size:17px;line-height:1.6;color:var(--mist-on-ink);max-width:56ch;}

.docs-body{padding:72px 0 120px;}
.docs-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:start;}
@media (max-width:900px){.docs-layout{grid-template-columns:1fr;}}

.docs-toc{
  position:sticky;top:96px;
  display:flex;flex-direction:column;gap:2px;
}
.docs-toc-label{font-size:11px;color:var(--mist);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;}
.docs-toc a{
  padding:7px 10px;margin:0 -10px;border-radius:8px;
  font-size:13.5px;color:var(--mist);
  transition:color var(--motion-fast) var(--ease-in-out-quart), background var(--motion-fast) var(--ease-in-out-quart);
}
.docs-toc a:hover{color:var(--bark);background:var(--bg);}
.docs-toc a[aria-current="page"]{color:var(--bark);font-weight:500;}
@media (max-width:900px){
  .docs-toc{position:relative;top:auto;flex-direction:row;flex-wrap:wrap;gap:8px;}
  .docs-toc-label{display:none;}
  .docs-toc a{margin:0;border:1px solid var(--line);}
}

.docs-content section{padding-bottom:52px;margin-bottom:52px;border-bottom:1px solid var(--line);scroll-margin-top:96px;}
.docs-content section:last-of-type{border-bottom:0;}
.docs-tag{
  display:inline-block;font-size:11px;font-weight:600;color:var(--sprout-deep);
  letter-spacing:0.08em;margin-bottom:10px;
}
.docs-content h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-0.01em;margin-bottom:16px;}
.docs-content p{font-size:15.5px;line-height:1.7;color:var(--mist);max-width:68ch;}
.docs-content p+p{margin-top:14px;}
.docs-content a{color:var(--sprout-deep);text-decoration:underline;text-underline-offset:2px;}
.docs-content a:hover{color:var(--bark);}
.docs-list{margin-top:14px;padding-left:20px;max-width:68ch;}
.docs-list li{font-size:15px;line-height:1.7;color:var(--mist);list-style:disc;margin-bottom:8px;}
.docs-list b{color:var(--bark);font-weight:600;}

.docs-formula{
  margin-top:18px;padding:20px 22px;border-radius:14px;
  background:var(--bg);border:1px solid var(--line);
}
.docs-formula span{display:block;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:15px;}
.docs-formula-example{margin-top:10px;font-family:'Inter',sans-serif;font-weight:400;font-size:13.5px;color:var(--mist);}
.docs-formula-example b{color:var(--sprout-deep);font-weight:600;}

.docs-note{
  margin-top:16px;padding:14px 16px;border-radius:10px;
  background:rgba(216,255,77,.07);border:1px solid rgba(143,179,0,.25);
  font-size:13.5px;color:var(--mist);max-width:68ch;
}

.docs-fees-table{margin-top:16px;max-width:68ch;}

.docs-glossary{margin-top:16px;display:flex;flex-direction:column;gap:16px;max-width:68ch;}
.docs-glossary dt{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:14.5px;color:var(--bark);}
.docs-glossary dd{margin-top:3px;font-size:14px;line-height:1.6;color:var(--mist);}

.docs-footer-cta{
  text-align:center;padding:44px 32px;border-radius:var(--radius-lg);
  background:var(--ink);color:var(--paper);
}
.docs-footer-cta p{color:var(--mist-on-ink);font-size:16px;margin-bottom:22px;}
.docs-footer-cta .hero-actions{justify-content:center;}

/* ---------- hero sprout — WebGL 3D model ---------- */
.hero-sprout{
  position:absolute;
  z-index:3;
  top:200px;
  right:calc((100vw - 1160px) / 2 + 40px);
  width:320px;
  height:310px;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint;
}
.hero-sprout::after{
  content:'';
  position:absolute;
  bottom:8%;
  left:50%;
  width:64%;
  height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(216,255,77,.14),rgba(216,255,77,0) 74%);
  filter:blur(16px);
  transform:translateX(-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--ease);
}
.hero-sprout.is-hovering::after{
  background:radial-gradient(ellipse,rgba(216,255,77,.2),rgba(216,255,77,0) 74%);
}
.hero-sprout.is-dragging::after{
  background:radial-gradient(ellipse,rgba(216,255,77,.24),rgba(216,255,77,0) 76%);
}
.hero-sprout.is-ready::after{opacity:1;}
.hero-sprout-canvas{
  display:block;
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:none;
  pointer-events:auto;
  opacity:0;
  transition:opacity .5s var(--ease);
  overflow:visible;
}
.hero-sprout.is-ready .hero-sprout-canvas{opacity:1;}
.hero-sprout-canvas.is-grabbed{cursor:grabbing;}
/* Skeleton, not a spinner — a soft breathing glow roughly where the model
   will resolve, so the eye has something coherent to rest on rather than
   a generic loading ring. Cross-fades with the canvas's own fade-in
   (both .5s) instead of popping out the instant the model is ready. */
.hero-sprout-loader{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:1;
  transition:opacity .5s var(--ease-in-out-quart);
}
.hero-sprout-loader.is-done{opacity:0;}
.hero-sprout-loader::before{
  content:'';
  width:58%;
  height:58%;
  border-radius:44% 56% 52% 48% / 56% 48% 52% 44%;
  background:radial-gradient(circle, rgba(216,255,77,.22), rgba(216,255,77,0) 72%);
  filter:blur(6px);
  animation:sprout-skeleton-breathe 2.2s var(--ease-in-out-quart) infinite;
}
@keyframes sprout-skeleton-breathe{
  0%,100%{transform:scale(.94);opacity:.55;}
  50%{transform:scale(1.04);opacity:.9;}
}
@media (prefers-reduced-motion:reduce){
  .hero-sprout-loader::before{animation:none;opacity:.7;}
}
@media (max-width:1280px){
  .hero-sprout{right:48px;width:280px;height:270px;}
}
@media (max-width:1024px){
  .hero-sprout{right:28px;width:240px;height:230px;top:190px;}
}
@media (max-width:860px){
  .hero-sprout{right:16px;width:200px;height:195px;top:180px;}
}
@media (max-width:640px){
  .hero{overflow:hidden;}
  .hero-sprout::after{filter:blur(10px);opacity:.55;}
  .hero-sprout{
    position:relative;
    right:auto;
    top:auto;
    width:min(220px,52vw);
    height:min(210px,50vw);
    margin:12px auto 0;
  }
  .hero-sprout-canvas{overflow:hidden;}
  .hero-inner{display:flex;flex-direction:column;}
  .hero-inner>[data-reveal]{order:1;}
  .hero-sprout{order:2;}
  .hero-panel{order:3;margin-top:28px;}

  .showcase-palette{top:12px;gap:10px;}
  .showcase-color{width:22px;height:22px;}
  .hero{padding:120px 0 56px;}
  .hero h1{font-size:32px;}
  .hero-sub{font-size:15px;margin-top:16px;}
  .hero-actions{margin-top:24px;gap:10px;}
  .btn-lg{padding:14px 24px;font-size:14px;}
  .hero-note{font-size:11px;margin-top:10px;}
  .hero-panel{margin-top:36px;padding:20px;gap:20px;}
  .grow-amount{font-size:30px;}
  .grow-label{font-size:11px;}
  .grow-sub{font-size:12px;}
  .mini-card{border-radius:13px;padding:18px 20px 16px;}
  .mini-card .lockup span{font-size:11px;}
  .mini-card .chain{font-size:8px;padding:2px 6px;}
  .mini-card .num{font-size:12px;}
  .mini-card .bottom{font-size:8px;}
  .mini-card .contactless{width:16px;}

  section{padding:64px 0;}
  .section-head{margin-bottom:36px;}
  .section-head h2{font-size:26px;}
  .section-head p{font-size:14px;margin-top:10px;}

  .marquee-section{padding:20px 0;}
  .marquee-label{font-size:11px;margin-bottom:14px;}
  .marquee-note{font-size:10px;}

  #how .section-head{margin-bottom:28px;}

  .showcase-palette{top:14px;gap:8px;}
  .showcase-color{width:24px;height:24px;}
  .showcase-section .card-slide-foot{
    width:100%;
    max-width:340px;
    margin-top:14px;
    font-size:8px;
  }
  .showcase-section .showcase-card-slide.active .product-card-image{margin-top:52px;}

  .calc-section .section-head h2{font-size:24px;}
  .calc-panel{padding:20px !important;gap:24px !important;}
  .calc-control label{font-size:12px;margin-bottom:10px;}
  input[type="range"]{margin-bottom:22px;}
  .tick-btn{font-size:12px;padding:7px 12px;}

  .feature-card{padding:24px 20px;gap:12px;}
  .feature-card h3{font-size:14.5px;}
  .feature-card p{font-size:13px;}
  .feature-icon{width:32px;height:32px;border-radius:8px;}
  .feature-icon svg{width:16px;height:16px;}

  .fees-table{font-size:13px;}
  .fees-row{padding:14px 16px;}
  .fees-row .name{font-size:14px;}
  .fees-row .desc{font-size:11px;}

  .faq-q{padding:18px 0;font-size:14.5px;gap:14px;}
  .faq-a p{font-size:13.5px;}

  .final-cta{padding:48px 24px !important;}
  .final-cta h2{font-size:28px !important;}
  .final-cta p{font-size:14px;}

  footer{padding:40px 0 28px;}
  .footer-inner{gap:20px;}
  .footer-links{gap:12px;font-size:12.5px;}
  .footer-legal{font-size:10px;margin-top:20px;}
}

/* ---------- dark mode polish ---------- */
:root[data-theme="dark"] .hero-sprout::after{background:radial-gradient(ellipse,rgba(216,255,77,.14),rgba(216,255,77,0) 72%);}
:root[data-theme="dark"] .showcase-section{background:var(--bg);color:var(--bark);}
:root[data-theme="dark"] .showcase-intro h2{color:var(--paper);}
:root[data-theme="dark"] .showcase-intro p{color:var(--mist-on-ink);}
:root[data-theme="dark"] .showcase-intro .section-tag{color:var(--sprout);}
:root[data-theme="dark"] .showcase-copy h3{color:var(--paper);}
:root[data-theme="dark"] .showcase-copy p{color:var(--mist-on-ink);}
:root[data-theme="dark"] .showcase-kicker{color:var(--sprout);}
:root[data-theme="dark"] .showcase-section .showcase-stage{background:var(--ink);border-top:1px solid var(--line);}
:root[data-theme="dark"] .showcase-section .card-slide-header{color:var(--mist-on-ink);}
:root[data-theme="dark"] .showcase-section .card-slide-status{color:var(--sprout);}
:root[data-theme="dark"] .showcase-section .card-slide-info small,
:root[data-theme="dark"] .showcase-section .card-slide-foot{color:var(--mist-on-ink);}
:root[data-theme="dark"] .showcase-section .card-slide-info b{color:var(--paper);}
:root[data-theme="dark"] .showcase-section .card-slide-info .green,
:root[data-theme="dark"] .showcase-section .card-slide-foot span:last-child{color:var(--sprout);}
:root[data-theme="dark"] .showcase-color.is-active{box-shadow:0 0 0 2px var(--sprout),0 0 0 3px #fff;}
:root[data-theme="dark"] .showcase-section .showcase-stage::before{background:radial-gradient(circle,rgba(216,255,77,.12),rgba(216,255,77,0) 68%);}
:root[data-theme="dark"] .showcase-dot{background:rgba(255,255,255,.2);}
:root[data-theme="dark"] .showcase-dot.active{background:var(--sprout);}
:root[data-theme="dark"] .showcase-arrow{border-color:var(--line);background:var(--surface);}
:root[data-theme="dark"] .showcase-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--sprout);}
:root[data-theme="dark"] .how-layout .step-card .step-num{background:var(--surface);}
:root[data-theme="dark"] .how-layout .step-card.is-active .step-num{border-color:var(--sprout);background:var(--ink);color:var(--sprout);}
:root[data-theme="dark"] .theme-toggle{border-color:var(--line);background:var(--surface);}
:root[data-theme="dark"] .theme-toggle:hover{border-color:var(--sprout);color:var(--sprout);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-sprout::after{background:radial-gradient(ellipse,rgba(216,255,77,.14),rgba(216,255,77,0) 72%);}
  :root:not([data-theme="light"]) .showcase-section{background:var(--bg);color:var(--bark);}
  :root:not([data-theme="light"]) .showcase-intro h2{color:var(--paper);}
  :root:not([data-theme="light"]) .showcase-intro p{color:var(--mist-on-ink);}
  :root:not([data-theme="light"]) .showcase-intro .section-tag{color:var(--sprout);}
  :root:not([data-theme="light"]) .showcase-copy h3{color:var(--paper);}
  :root:not([data-theme="light"]) .showcase-copy p{color:var(--mist-on-ink);}
  :root:not([data-theme="light"]) .showcase-kicker{color:var(--sprout);}
  :root:not([data-theme="light"]) .showcase-section .showcase-stage{background:var(--ink);border-top:1px solid var(--line);}
  :root:not([data-theme="light"]) .showcase-section .card-slide-header{color:var(--mist-on-ink);}
  :root:not([data-theme="light"]) .showcase-section .card-slide-status{color:var(--sprout);}
  :root:not([data-theme="light"]) .showcase-section .card-slide-info small,
  :root:not([data-theme="light"]) .showcase-section .card-slide-foot{color:var(--mist-on-ink);}
  :root:not([data-theme="light"]) .showcase-section .card-slide-info b{color:var(--paper);}
  :root:not([data-theme="light"]) .showcase-section .card-slide-info .green,
  :root:not([data-theme="light"]) .showcase-section .card-slide-foot span:last-child{color:var(--sprout);}
  :root:not([data-theme="light"]) .showcase-stage::before{background:radial-gradient(circle,rgba(216,255,77,.12),rgba(216,255,77,0) 68%);}
  :root:not([data-theme="light"]) .showcase-dot{background:rgba(255,255,255,.2);}
  :root:not([data-theme="light"]) .showcase-dot.active{background:var(--sprout);}
  :root:not([data-theme="light"]) .showcase-arrow{border-color:var(--line);background:var(--surface);}
  :root:not([data-theme="light"]) .showcase-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--sprout);}
  :root:not([data-theme="light"]) .how-layout .step-card .step-num{background:var(--surface);}
  :root:not([data-theme="light"]) .how-layout .step-card.is-active .step-num{border-color:var(--sprout);background:var(--ink);color:var(--sprout);}
  :root:not([data-theme="light"]) .theme-toggle{border-color:var(--line);background:var(--surface);}
  :root:not([data-theme="light"]) .theme-toggle:hover{border-color:var(--sprout);color:var(--sprout);}
}