/* ============ earned-style design layer ============
   Loaded after the bundle CSS. Olive-black ground, pastel lime, bone text,
   tight grotesk display + serif accent, mono labels, hairline rules. */

:root {
  --e-ground: #000000;
  --e-surface: #161314;
  --e-lime: #cce804;
  --e-text: #f2f1f1;
  --e-muted: #8f8d8d;
  --e-rule: rgba(255, 255, 255, .12);
  --e-rule-strong: rgba(255, 255, 255, .22);
  --e-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --e-serif: "Instrument Serif", "Times New Roman", serif;
  --e-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

html, body, main.xero-root { background: var(--e-ground) !important; color: var(--e-text); }
body, .xero-root, .sk, .skf { font-family: var(--e-sans) !important; }
::selection { background: var(--e-lime); color: var(--e-ground); }

/* no ambient glows / grids — earned is flat and quiet */
.xero-ambient, .xero-hero-grid, .xero-hero-arc { display: none !important; }

/* ---------- nav: no capsule, wordmark + mono ---------- */
.xero-nav, .xero-nav::before, .xero-nav::after,
nav:has(> .xero-nav), header:has(.xero-nav) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.xero-nav { max-width: none !important; padding: 28px 48px !important; }
nav.xero-nav { background: rgba(0, 0, 0, .78) !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; }
.xero-logo-img { filter: none !important; height: 26px !important; border-radius: 7px; }
.xero-logo::after {
  content: "StockyZk";
  font-family: var(--e-sans);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -.06em;
  color: var(--e-text);
  margin-left: 2px;
}
.xero-nav-link {
  font-family: var(--e-mono) !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--e-muted) !important;
}
.xero-nav-link:hover { color: var(--e-text) !important; }
.xero-nav-social {
  background: var(--e-surface) !important;
  border: 1px solid var(--e-rule) !important;
  border-radius: 10px !important;
}
.xero-btn-solid, .xero-btn-solid:hover {
  background: var(--e-lime) !important;
  color: var(--e-ground) !important;
  font-family: var(--e-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 18px !important;
  box-shadow: none !important;
}
.xero-hamburger span { background: var(--e-text) !important; }
.xero-mobile-menu { background: rgba(0, 0, 0, .97) !important; }
.xero-mobile-link { font-family: var(--e-sans) !important; letter-spacing: -.04em; font-size: 28px !important; }

/* ---------- hero ---------- */
.xero-hero { background: var(--e-ground) !important; }
.xero-hero-video-bg { background: var(--e-ground) !important; }
.xero-hero-video-bg video {
  display: block !important;
  filter: none !important;
  mix-blend-mode: lighten;
  opacity: .85;
}
.xero-hero-video-bg .xero-hero-video-tint { display: none !important; }
.xero-hero-video-bg .xero-hero-video-veil {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, var(--e-ground) 100%) !important;
}

.xero-h1 {
  font-family: var(--e-sans) !important;
  font-size: clamp(3.2rem, 9.4vw, 8.6rem) !important;
  line-height: .9 !important;
  letter-spacing: -.07em !important;
  font-weight: 500 !important;
  margin-bottom: 36px !important;
}
.xero-h1-thin { font-weight: 500 !important; color: var(--e-text) !important; }
.xero-h1-grad {
  font-family: var(--e-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
  font-size: 1.1em;
  line-height: .9;
  background: none !important;
  -webkit-text-fill-color: var(--e-text) !important;
  color: var(--e-text) !important;
}
.xero-sub {
  color: var(--e-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  max-width: 540px !important;
  letter-spacing: -.01em;
}
.xero-sub br { display: none; }

.xero-cta, .xero-cta-ghost, .sk-btn {
  font-family: var(--e-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  border-radius: 999px !important;
  padding: 15px 26px !important;
  box-shadow: none !important;
  transition: transform .2s, background .2s, color .2s !important;
}
.xero-cta { background: var(--e-lime) !important; color: var(--e-ground) !important; }
.xero-cta:hover { transform: translateY(-1px); background: #d8f25e !important; }
.xero-cta-ghost {
  background: var(--e-surface) !important;
  color: var(--e-text) !important;
  border: 1px solid var(--e-rule-strong) !important;
  min-width: 0 !important;
}
.xero-cta-ghost::before { content: "↓  "; }
.xero-cta-ghost:hover { background: #1e1c1d !important; }

/* ---------- sections: left-aligned editorial grid ---------- */
.sk { --tx: var(--e-text); --mut: var(--e-muted); --lime: var(--e-lime); --dark: var(--e-ground);
  text-align: left !important; background: var(--e-ground) !important; }
.sk-wrap { max-width: 1392px !important; padding: 0 48px !important; }
.sk-sec { padding-top: 160px !important; }

.sk-eye {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: none !important;
  color: var(--e-text) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--e-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  width: 100%;
  padding-top: 18px !important;
  border-top: 1px solid var(--e-rule);
}
.sk-eye::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--e-lime);
  box-shadow: 0 0 12px rgba(204, 232, 4, .6);
}

.sk h2 {
  font-family: var(--e-sans) !important;
  font-weight: 500 !important;
  font-size: clamp(2.6rem, 5.6vw, 5.2rem) !important;
  line-height: .95 !important;
  letter-spacing: -.06em !important;
  color: var(--e-text) !important;
  margin: 28px 0 0 !important;
  max-width: 13ch !important;
}
.sk .lead {
  margin: 28px 0 0 !important;
  color: var(--e-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  max-width: 46ch !important;
}

/* four primitives → hairline cards with serif monograms */
.sk-four { gap: 0 !important; margin-top: 88px !important; text-align: left !important;
  border-top: 1px solid var(--e-rule); border-left: 1px solid var(--e-rule); }
.sk-four > div {
  padding: 36px 32px 34px;
  border-right: 1px solid var(--e-rule);
  border-bottom: 1px solid var(--e-rule);
  position: relative;
  transition: background .25s;
}
.sk-four > div:hover { background: var(--e-surface); }
.sk-four > div::after {
  content: "↗";
  position: absolute; top: 28px; right: 28px;
  color: var(--e-muted); font-size: 18px;
}
.sk-four h3, .sk-step h3 {
  font-family: var(--e-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  color: var(--e-text) !important;
}
.sk-four p, .sk-step p {
  margin: 18px 0 0 !important;
  color: var(--e-muted) !important;
  font-size: .98rem !important;
  line-height: 1.55 !important;
  max-width: 40ch !important;
}
.sk-four .sees {
  margin-top: 28px !important;
  padding-top: 16px;
  border-top: 1px solid var(--e-rule);
  font-family: var(--e-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .08em !important;
  color: var(--e-text) !important;
  display: flex; justify-content: space-between; gap: 12px;
}
.sk-four .sees b { color: var(--e-muted) !important; font-weight: 500 !important; }

/* steps → big serif lime numerals over hairlines */
.sk-steps { margin-top: 88px !important; gap: 0 !important; }
.sk-step { border-top: 1px solid var(--e-rule); padding: 28px 32px 8px 0; }
.sk-step + .sk-step { padding-left: 32px; border-left: 1px solid var(--e-rule); }
.sk-step .n {
  font-family: var(--e-serif) !important;
  font-size: clamp(5rem, 9vw, 8.5rem) !important;
  line-height: .85 !important;
  letter-spacing: -.04em !important;
  font-weight: 400 !important;
  color: var(--e-lime) !important;
}
.sk-step h3 { margin-top: 36px !important; font-family: var(--e-sans) !important;
  font-weight: 500 !important; font-size: 1.6rem !important; letter-spacing: -.04em !important; }
.sk-step h3::before {
  content: "";
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--e-lime); margin-right: 12px; vertical-align: .12em;
}

/* the one-line statement → oversized, serif accent on the second sentence feel */
.sk-line { padding-top: 200px !important; }
.sk-line h2 {
  font-size: clamp(3rem, 7.4vw, 7rem) !important;
  max-width: 16ch !important;
}

/* closing card → flat lime slab, square corners */
.sk-cta {
  background: var(--e-lime) !important;
  border-radius: 4px !important;
  padding: 72px 56px 64px !important;
  margin-top: 180px !important;
  color: var(--e-ground) !important;
  text-align: left !important;
  position: relative;
}
.sk-cta .sk-eye { color: var(--e-ground) !important; }
.sk-cta .sk-eye::before { background: var(--e-ground); box-shadow: none; }
.sk-cta h2 {
  color: var(--e-ground) !important;
  font-size: clamp(3rem, 8vw, 7.4rem) !important;
  margin-top: 32px !important;
}
.sk-cta p { color: #2a2c10 !important; margin: 24px 0 0 !important; max-width: 48ch !important; }
.sk-btn { margin-top: 40px !important; background: var(--e-ground) !important; color: var(--e-lime) !important; }
.sk-btn.alt { background: transparent !important; color: var(--e-ground) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35) !important; }

/* ---------- footer ---------- */
.skf { background: var(--e-ground) !important; border-top: 1px solid var(--e-rule) !important; }
.skf-wrap { max-width: 1392px !important; padding: 80px 48px 40px !important; }
.skf-brand { font-family: var(--e-sans) !important; font-size: 26px !important; font-weight: 500 !important;
  letter-spacing: -.05em !important; text-transform: none; color: var(--e-text) !important; }
.skf-tag { color: var(--e-muted) !important; }
.skf-cols, .skf-bottom { border-color: var(--e-rule) !important; }
.skf-h { font-family: var(--e-mono) !important; font-weight: 500 !important; color: var(--e-muted) !important; letter-spacing: .1em !important; }
.skf-l { color: var(--e-text) !important; }
.skf-l:hover { color: var(--e-lime) !important; }
.skf-bottom { font-family: var(--e-mono); font-size: 11px !important; letter-spacing: .04em; color: var(--e-muted) !important; }

/* ---------- mobile ---------- */
@media (max-width: 840px) {
  .xero-nav { padding: 18px 20px !important; }
  .sk-wrap, .skf-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .sk-sec { padding-top: 104px !important; }
  .sk-four > div { padding: 28px 22px; }
  .sk-step, .sk-step + .sk-step { padding: 24px 0 8px; border-left: 0; }
  .sk-cta { padding: 48px 24px 44px !important; margin-top: 120px !important; }
  .sk-btn.alt { margin-left: 0 !important; }
  .xero-h1 { font-size: clamp(3rem, 15vw, 4.6rem) !important; }
}

/* mobile: the wordmark already carries the name */
.xero-nav-mobile-title { display: none !important; }

/* ============ motion (earned-style) ============ */

/* intro loader: wordmark, then six shutters collapse, staggered. Pure CSS on the
   root pseudo-elements so it never touches React-owned DOM. */
html::before {
  content: "";
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background-image: linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000);
  background-repeat: no-repeat;
  background-position: 0.000% 50%,20.000% 50%,40.000% 50%,60.000% 50%,80.000% 50%,100.000% 50%;
  background-size: 16.967% 100%,16.967% 100%,16.967% 100%,16.967% 100%,16.967% 100%,16.967% 100%;
  animation: e-shutter 1.7s linear forwards;
}
@keyframes e-shutter {
  0.0% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  2.5% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  5.0% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  7.5% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  10.0% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  12.5% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  15.0% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  17.5% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  20.0% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  22.5% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  25.0% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  27.5% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  30.0% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  32.5% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  35.0% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  37.5% { background-size: 16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  40.0% { background-size: 16.967% 99.83%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  42.5% { background-size: 16.967% 99.16%,16.967% 99.97%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  45.0% { background-size: 16.967% 97.62%,16.967% 99.67%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  47.5% { background-size: 16.967% 94.85%,16.967% 98.73%,16.967% 99.92%,16.967% 100.00%,16.967% 100.00%,16.967% 100.00%; }
  50.0% { background-size: 16.967% 90.49%,16.967% 96.80%,16.967% 99.43%,16.967% 99.99%,16.967% 100.00%,16.967% 100.00%; }
  52.5% { background-size: 16.967% 84.19%,16.967% 93.51%,16.967% 98.18%,16.967% 99.81%,16.967% 100.00%,16.967% 100.00%; }
  55.0% { background-size: 16.967% 75.58%,16.967% 88.51%,16.967% 95.81%,16.967% 99.10%,16.967% 99.97%,16.967% 100.00%; }
  57.5% { background-size: 16.967% 64.30%,16.967% 81.43%,16.967% 91.96%,16.967% 97.49%,16.967% 99.64%,16.967% 100.00%; }
  60.0% { background-size: 16.967% 50.00%,16.967% 71.92%,16.967% 86.27%,16.967% 94.64%,16.967% 98.65%,16.967% 99.90%; }
  62.5% { background-size: 16.967% 35.70%,16.967% 59.62%,16.967% 78.37%,16.967% 90.18%,16.967% 96.65%,16.967% 99.38%; }
  65.0% { background-size: 16.967% 24.42%,16.967% 44.58%,16.967% 67.92%,16.967% 83.75%,16.967% 93.27%,16.967% 98.08%; }
  67.5% { background-size: 16.967% 15.81%,16.967% 31.39%,16.967% 54.54%,16.967% 75.00%,16.967% 88.16%,16.967% 95.63%; }
  70.0% { background-size: 16.967% 9.51%,16.967% 21.09%,16.967% 39.57%,16.967% 63.55%,16.967% 80.95%,16.967% 91.68%; }
  72.5% { background-size: 16.967% 5.15%,16.967% 13.34%,16.967% 27.44%,16.967% 49.07%,16.967% 71.28%,16.967% 85.87%; }
  75.0% { background-size: 16.967% 2.38%,16.967% 7.76%,16.967% 18.09%,16.967% 34.95%,16.967% 58.80%,16.967% 77.83%; }
  77.5% { background-size: 16.967% 0.84%,16.967% 4.01%,16.967% 11.14%,16.967% 23.84%,16.967% 43.72%,16.967% 67.22%; }
  80.0% { background-size: 16.967% 0.17%,16.967% 1.72%,16.967% 6.25%,16.967% 15.38%,16.967% 30.71%,16.967% 53.66%; }
  82.5% { background-size: 16.967% 0.00%,16.967% 0.52%,16.967% 3.05%,16.967% 9.20%,16.967% 20.57%,16.967% 38.78%; }
  85.0% { background-size: 16.967% 0.00%,16.967% 0.07%,16.967% 1.19%,16.967% 4.95%,16.967% 12.95%,16.967% 26.82%; }
  87.5% { background-size: 16.967% 0.00%,16.967% 0.00%,16.967% 0.30%,16.967% 2.26%,16.967% 7.50%,16.967% 17.61%; }
  90.0% { background-size: 16.967% 0.00%,16.967% 0.00%,16.967% 0.02%,16.967% 0.78%,16.967% 3.84%,16.967% 10.80%; }
  92.5% { background-size: 16.967% 0.00%,16.967% 0.00%,16.967% 0.00%,16.967% 0.15%,16.967% 1.62%,16.967% 6.02%; }
  95.0% { background-size: 16.967% 0.00%,16.967% 0.00%,16.967% 0.00%,16.967% 0.00%,16.967% 0.48%,16.967% 2.91%; }
  97.5% { background-size: 16.967% 0.00%,16.967% 0.00%,16.967% 0.00%,16.967% 0.00%,16.967% 0.06%,16.967% 1.11%; }
  100.0% { background-size: 16.967% 0.00%,16.967% 0.00%,16.967% 0.00%,16.967% 0.00%,16.967% 0.00%,16.967% 0.27%; }
  100% { visibility: hidden; }
}
html::after {
  content: "StockyZk";
  position: fixed; left: 50%; top: 50%; z-index: 2147483001; pointer-events: none;
  transform: translate(-50%, -50%);
  font: 500 clamp(44px, 7vw, 88px)/1 var(--e-sans);
  letter-spacing: -.07em;
  color: var(--e-text);
  animation: e-emblem 1.7s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes e-emblem {
  0% { opacity: 0; filter: blur(10px); transform: translate(-50%, -40%); }
  22% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); }
  38% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); }
  52% { opacity: 0; filter: blur(8px); transform: translate(-50%, -62%); }
  100% { opacity: 0; visibility: hidden; }
}

/* hero intro — plays as the shutters open */
@keyframes e-rise { from { opacity: 0; transform: translateY(42%); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes e-fade-up { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes e-fade-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes e-video-in { from { opacity: 0; transform: scale(1.12); } to { opacity: .85; transform: scale(1); } }
.xero-h1-thin, .xero-h1-grad { display: block; animation: e-rise 1.3s cubic-bezier(.16,1,.3,1) both; }
.xero-h1-thin { animation-delay: .95s; }
.xero-h1-grad { animation-delay: 1.08s; }
.xero-sub { animation: e-fade-up 1.2s cubic-bezier(.16,1,.3,1) 1.3s both; }
.xero-cta-row { animation: e-fade-up 1.2s cubic-bezier(.16,1,.3,1) 1.42s both; }
nav.xero-nav { animation: e-fade-down 1s cubic-bezier(.16,1,.3,1) 1.25s both; }
.xero-hero-video-bg video { animation: e-video-in 2.4s cubic-bezier(.16,1,.3,1) .7s both; }

/* scroll-drawn hairline on each eyebrow (driven by --line from earned.js) */
.sk-eye { position: relative; border-top: 0 !important; }
.sk-eye::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--e-rule-strong);
  transform: scaleX(var(--line, 1)); transform-origin: left center;
}
.sk-cta .sk-eye::after { display: none; }
.e-word { display: inline-block; will-change: transform, filter, opacity; }

/* buttons: earned-style lift + arrow nudge */
.xero-cta, .xero-cta-ghost, .sk-btn, .xero-btn-solid { transition: transform .35s cubic-bezier(.16,1,.3,1), background .25s, color .25s !important; }
.xero-cta:hover, .sk-btn:hover, .xero-btn-solid:hover { transform: translateY(-2px); }
.sk-four > div::after { transition: transform .4s cubic-bezier(.16,1,.3,1), color .25s; }
.sk-four > div:hover::after { transform: translate(4px, -4px); color: var(--e-lime); }
.skf-l { transition: color .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.skf-l:hover { transform: translateX(4px); }

/* lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html::before, html::after { display: none !important; }
  .xero-h1-thin, .xero-h1-grad, .xero-sub, .xero-cta-row, nav.xero-nav, .xero-hero-video-bg video { animation: none !important; }
}

/* scrolled nav: stay full width (no capsule), tighten and hairline, keep Launch App */
nav.xero-nav { transition: padding .45s cubic-bezier(.16,1,.3,1), border-color .3s !important; border-bottom: 1px solid transparent !important; }
nav.xero-nav.is-shrunk {
  max-width: none !important;
  padding: 16px 48px !important;
  box-shadow: none !important;
  border-bottom-color: var(--e-rule) !important;
  border-radius: 0 !important;
}
.xero-nav.is-shrunk .xero-logo-img { height: 26px !important; }
.xero-nav.is-shrunk .xero-nav-right .xero-btn-solid { opacity: 1 !important; pointer-events: auto !important; max-width: none !important; padding: 10px 18px !important; }
@media (max-width: 840px) { nav.xero-nav.is-shrunk { padding: 14px 20px !important; } }
nav.xero-nav, nav.xero-nav.is-shrunk { top: 0 !important; margin: 0 0 0 calc(50% - 50vw) !important; width: 100vw !important; left: 0 !important; right: 0 !important; transform: none !important; }

/* ═══════════════════════ LIQUID GLASS ═══════════════════════
   Frosted, saturated panes with a specular top edge and a soft inner glow.
   Glass only reads with light behind it, so slow neon glows drift under
   the sections. Chromium also gets real refraction (#e-refract, injected
   by earned.js); Safari/Firefox fall back to blur + saturate. */

:root {
  --g-fill: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 100%);
  --g-fill-strong: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.045) 100%);
  --g-edge:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset -1px 0 0 rgba(255,255,255,.07),
    inset 0 0 24px rgba(255,255,255,.03);
  --g-drop: 0 18px 50px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --g-blur: blur(22px) saturate(180%) brightness(1.08);
}

/* drifting light under everything below the hero */
.sk { position: relative; background: transparent !important; isolation: isolate; }
.sk::before, .sk::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  filter: blur(90px); opacity: .5;
}
.sk::before {
  width: 62vw; height: 62vw; left: -18vw; top: 12%;
  background: radial-gradient(circle, rgba(204,232,4,.42), rgba(204,232,4,0) 65%);
  animation: e-drift-a 26s ease-in-out infinite alternate;
}
.sk::after {
  width: 54vw; height: 54vw; right: -16vw; top: 52%;
  background: radial-gradient(circle, rgba(204,232,4,.32), rgba(160,182,3,0) 65%);
  animation: e-drift-b 32s ease-in-out infinite alternate;
}
@keyframes e-drift-a { to { transform: translate(14vw, 18vh) scale(1.15); } }
@keyframes e-drift-b { to { transform: translate(-12vw, -22vh) scale(.9); } }
html, body, main.xero-root { overflow-x: clip; }

/* glass recipe */
.e-glass, nav.xero-nav, .sk-four > div, .sk-step, .xero-cta-ghost, .sk-eye:not(.sk-cta .sk-eye),
.xero-nav-social, .skf-wrap, .xero-mobile-menu {
  background: var(--g-fill) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  backdrop-filter: var(--g-blur) !important;
  box-shadow: var(--g-edge), var(--g-drop) !important;
  border: 0 !important;
}

/* nav → floating glass capsule */
nav.xero-nav, nav.xero-nav.is-shrunk {
  width: calc(100vw - 32px) !important;
  max-width: 1360px !important;
  margin: 14px auto 0 !important;
  left: auto !important; right: auto !important;
  top: 14px !important;
  border-radius: 22px !important;
  padding: 12px 14px 12px 22px !important;
  box-shadow: var(--g-edge), 0 10px 40px rgba(0,0,0,.5) !important;
}
nav.xero-nav.is-shrunk { max-width: 980px !important; background: var(--g-fill-strong) !important; }
.xero-nav-social { border-radius: 12px !important; }
@media (max-width: 840px) {
  nav.xero-nav, nav.xero-nav.is-shrunk { width: calc(100vw - 20px) !important; padding: 10px 12px 10px 16px !important; border-radius: 18px !important; top: 10px !important; margin-top: 10px !important; }
}

/* buttons: glossy lime + clear glass */
.xero-cta, .xero-btn-solid, .sk-btn:not(.alt) { position: relative; overflow: hidden; }
.xero-cta, .xero-btn-solid {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,0,0,.18), 0 8px 28px rgba(204,232,4,.28) !important;
}
.xero-cta::after, .xero-btn-solid::after, .sk-btn:not(.alt)::after {
  content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
}
.xero-cta-ghost { color: var(--e-text) !important; }
.xero-cta-ghost:hover { background: var(--g-fill-strong) !important; }

/* eyebrows → small glass pills */
.sk-eye:not(.sk-cta .sk-eye) {
  width: auto !important; padding: 8px 14px 8px 12px !important; border-radius: 999px !important;
}
.sk-eye::after { display: none !important; }

/* feature cards → separate glass tiles with a cursor-following glare */
.sk-four { gap: 16px !important; border: 0 !important; }
.sk-four > div {
  border-radius: 26px !important; overflow: hidden; isolation: isolate;
  padding: 38px 34px 32px !important;
}
.sk-four > div::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(204,232,4,.16), rgba(255,255,255,.04) 40%, transparent 70%);
  transition: opacity .35s;
}
.sk-four > div:hover::before { opacity: 1; }
.sk-four > div:hover { background: var(--g-fill-strong) !important; transform: translateY(-3px); }
.sk-four > div { transition: transform .5s cubic-bezier(.16,1,.3,1), background .3s !important; }
.sk-four .sees { border-top-color: rgba(255,255,255,.1) !important; }

/* steps → glass tiles */
.sk-steps { gap: 16px !important; }
.sk-step, .sk-step + .sk-step { border: 0 !important; border-radius: 26px !important; padding: 34px 32px 30px !important; }

/* closing slab: lime glass with a sheen */
.sk-cta { border-radius: 30px !important; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -30px 60px rgba(0,0,0,.08), 0 30px 80px rgba(204,232,4,.22) !important; }
.sk-cta {
  background:
    radial-gradient(120% 90% at 20% -20%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #d6f02a 0%, #cce804 55%, #bcd604 100%) !important;
}
.sk-btn.alt { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(255,255,255,.25) !important; }

/* footer: one big glass pane */
.skf { background: transparent !important; border-top: 0 !important; padding: 0 16px 16px; }
.skf-wrap { border-radius: 30px !important; margin-bottom: 0; }

/* Chromium: real refraction on the nav and tiles */
@supports (backdrop-filter: url(#e-refract)) {
  html.e-refract nav.xero-nav,
  html.e-refract .sk-four > div,
  html.e-refract .sk-step { backdrop-filter: url(#e-refract) blur(18px) saturate(180%) brightness(1.08) !important; }
}

@media (prefers-reduced-motion: reduce) { .sk::before, .sk::after { animation: none !important; } }

/* legibility + alignment polish */
nav.xero-nav, nav.xero-nav.is-shrunk {
  background: linear-gradient(180deg, rgba(18,18,18,.62), rgba(8,8,8,.42)) !important;
}
.xero-nav-link { color: rgba(242,241,241,.72) !important; }
.sk-btn { vertical-align: middle; }
.skf-brand span { letter-spacing: -.04em !important; }

/* new StockyZk mark: a touch larger so the glass detail reads */
.xero-logo-img, .xero-nav.is-shrunk .xero-logo-img { height: 34px !important; width: 34px !important; border-radius: 9px !important; }