/* juicemeter · Klein night */
:root {
  --klein: #002FA7;
  --deep: #00237D;
  --track: #001A5E;
  --line: #2A4FBF;
  --text: #F6F7FE;
  --dim: #BAC6EF;
  --juice: #FF7A1A;
  --drink: #E2DB60;
  --dry: #FF5C4D;
  --ink: #0A0B10;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* One wave, tiled: the top edge of every juice surface. */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q25 0 50 6 T100 6 V10 H0 Z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--klein);
  color: var(--text);
  font: 18px/1.5 "Bricolage Grotesque", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: var(--text); }
a:hover { color: var(--juice); }
code { font-family: var(--mono); font-size: 0.85em; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- The juice box: --w size, --lvl level, --c juice colour ---------- */
.jb {
  --c: var(--juice);
  --stroke: var(--text);
  --b: calc(var(--w) * 0.1);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--w);
  height: calc(var(--w) * 1.12);
  margin-top: calc(var(--w) * 0.38);
  border: var(--b) solid var(--stroke);
  border-radius: calc(var(--w) * 0.18);
}
/* Straw, then its bend. */
.jb::before, .jb::after {
  content: "";
  position: absolute;
  background: var(--stroke);
  border-radius: 999px;
}
.jb::before {
  width: var(--b);
  height: calc(var(--w) * 0.42);
  left: calc(var(--w) * 0.52);
  bottom: 100%;
  transform-origin: 50% 100%;
  transform: rotate(20deg);
}
.jb::after {
  height: var(--b);
  width: calc(var(--w) * 0.3);
  left: calc(var(--w) * 0.62);
  bottom: calc(100% + var(--w) * 0.34);
}
.jb i {
  position: absolute;
  inset: calc(var(--w) * 0.07);
  border-radius: calc(var(--w) * 0.07);
  overflow: hidden;
}
/* Juice body and its wavy top. */
.jb i::after, .jb i::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--c);
  transition: height 0.5s ease, bottom 0.5s ease, background 0.3s;
}
.jb i::after { bottom: 0; height: var(--lvl); }
.jb i::before {
  bottom: calc(var(--lvl) - 1px);
  height: calc(var(--w) * 0.1);
  -webkit-mask: var(--wave) repeat-x;
  mask: var(--wave) repeat-x;
  -webkit-mask-size: calc(var(--w) * 0.86) 100%;
  mask-size: calc(var(--w) * 0.86) 100%;
  animation: slosh 3.2s linear infinite;
}
@keyframes slosh {
  to { -webkit-mask-position: calc(var(--w) * 0.86) 0; mask-position: calc(var(--w) * 0.86) 0; }
}
/* Bubbles. */
.jb b {
  position: absolute;
  z-index: 1;
  bottom: 4%;
  width: calc(var(--w) * 0.05);
  height: calc(var(--w) * 0.05);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: rise 4s ease-in infinite;
  opacity: 0;
}
.jb b:nth-child(1) { left: 22%; animation-delay: 0s; }
.jb b:nth-child(2) { left: 48%; animation-delay: 1.3s; width: calc(var(--w) * 0.035); height: calc(var(--w) * 0.035); }
.jb b:nth-child(3) { left: 70%; animation-delay: 2.1s; }
.jb b:nth-child(4) { left: 35%; animation-delay: 2.9s; width: calc(var(--w) * 0.03); height: calc(var(--w) * 0.03); }
.jb b:nth-child(5) { left: 60%; animation-delay: 3.5s; }
@keyframes rise {
  0% { bottom: 4%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { bottom: calc(var(--lvl) - 6%); opacity: 0; }
}

/* ---------- Header ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; gap: 16px; }
.brand { display: flex; align-items: flex-end; gap: 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; line-height: 1; }
.brand .jb { margin-top: 8px; }
nav { display: flex; gap: 22px; font: 14px/1 var(--mono); padding-bottom: 3px; }
nav a { text-decoration: none; color: var(--dim); }
nav a:hover { color: var(--text); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 56px; }
h1 { font-size: clamp(52px, 8vw, 104px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.92; }
.lede { font-size: 20px; color: var(--dim); margin: 26px 0 32px; max-width: 31em; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; background: var(--juice); color: var(--ink); font-weight: 700; text-decoration: none; padding: 13px 24px; border-radius: 999px; transition: transform 0.15s; }
.btn:hover { color: var(--ink); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--text); color: var(--text); }
.hero-box { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.jb.big { filter: drop-shadow(0 30px 40px rgba(0, 8, 50, 0.45)); }
.readout { font: 600 14px var(--mono); color: var(--juice); letter-spacing: 0.02em; }

/* A band of juice between the hero and the rest: two sloshing layers and rising bubbles. */
.band { position: relative; height: 150px; margin-bottom: 80px; overflow: hidden; }
.band .wave {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--juice);
  -webkit-mask: var(--wave) repeat-x, linear-gradient(#000, #000) no-repeat;
  mask: var(--wave) repeat-x, linear-gradient(#000, #000) no-repeat;
  -webkit-mask-size: 220px 26px, 100% calc(100% - 25px);
  mask-size: 220px 26px, 100% calc(100% - 25px);
  -webkit-mask-position: 0 0, 0 100%;
  mask-position: 0 0, 0 100%;
  animation: slosh-band 7s linear infinite;
}
.band .back { top: 40px; background: #C9560C; animation-duration: 11s; animation-direction: reverse; }
.band .front { top: 58px; }
@keyframes slosh-band {
  to { -webkit-mask-position: 220px 0, 0 100%; mask-position: 220px 0, 0 100%; }
}
.band i {
  position: absolute; bottom: -10px; z-index: 1;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: band-rise 5s ease-in infinite;
  opacity: 0;
}
.band i:nth-child(3)  { left: 6%;  animation-delay: 0s; }
.band i:nth-child(4)  { left: 15%; animation-delay: 2.2s; width: 5px; height: 5px; }
.band i:nth-child(5)  { left: 24%; animation-delay: 1.1s; }
.band i:nth-child(6)  { left: 33%; animation-delay: 3.4s; width: 6px; height: 6px; }
.band i:nth-child(7)  { left: 42%; animation-delay: 0.6s; width: 4px; height: 4px; }
.band i:nth-child(8)  { left: 51%; animation-delay: 2.8s; }
.band i:nth-child(9)  { left: 60%; animation-delay: 1.7s; width: 5px; height: 5px; }
.band i:nth-child(10) { left: 69%; animation-delay: 4.1s; }
.band i:nth-child(11) { left: 78%; animation-delay: 0.3s; width: 6px; height: 6px; }
.band i:nth-child(12) { left: 86%; animation-delay: 3.0s; width: 4px; height: 4px; }
.band i:nth-child(13) { left: 93%; animation-delay: 1.4s; }
.band i:nth-child(14) { left: 98%; animation-delay: 4.6s; width: 5px; height: 5px; }
@keyframes band-rise {
  0% { bottom: -10px; opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { bottom: 70px; opacity: 0; }
}

/* The juice box, riding the waves like a jet ski. The straw is the handlebar. */
.rider {
  position: absolute; z-index: 2; top: -10px; left: -120px;
  width: 104px; height: 107px;
  animation: ride 26s linear infinite;
}
.band-foot .rider { animation-duration: 32s; animation-delay: -13s; }
.ski { display: block; width: 100%; height: 100%; animation: bob 1.6s ease-in-out infinite alternate; }
.ski svg { width: 100%; height: 100%; display: block; }
/* Spray off the back. */
.ski b {
  position: absolute; left: 6px; bottom: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(246, 247, 254, 0.85);
  animation: spray 0.9s ease-out infinite;
}
.ski b:nth-of-type(2) { animation-delay: 0.3s; width: 5px; height: 5px; }
.ski b:nth-of-type(3) { animation-delay: 0.6s; width: 4px; height: 4px; }
@keyframes ride {
  0% { left: -120px; transform: scaleX(1); }
  49.99% { left: calc(100% + 20px); transform: scaleX(1); }
  50% { left: calc(100% + 20px); transform: scaleX(-1); }
  100% { left: -120px; transform: scaleX(-1); }
}
@keyframes bob {
  from { transform: translateY(0) rotate(-7deg); }
  to { transform: translateY(5px) rotate(4deg); }
}
@keyframes spray {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(-16px, -10px); opacity: 0; }
}

/* ---------- Features ---------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 104px; }
.features article { background: var(--deep); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.2s; }
.features article:hover { transform: translateY(-4px); }
.features h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.features article:nth-child(1) h2 { color: var(--dry); }
.features article:nth-child(2) h2 { color: var(--drink); }
.features p { font-size: 16px; color: var(--dim); }
.resets { display: flex; align-items: center; gap: 10px; height: 68px; }
.resets b { font: 800 44px/1 "Bricolage Grotesque", sans-serif; color: var(--drink); letter-spacing: -0.04em; }
.resets span { font: 600 12px/1.35 var(--mono); color: var(--drink); }
.plug { display: flex; align-items: center; height: 68px; font: 600 38px var(--mono); color: var(--juice); }
.trio { display: flex; gap: 8px; align-items: flex-end; height: calc(44px * 1.5 + 2px); }
.trio .jb { --stroke: var(--text); }

/* ---------- Menu bar section ---------- */
.section-title { font-size: clamp(38px, 5.5vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin-bottom: 24px; }
.body { font-size: 18px; color: var(--dim); max-width: 28em; }
.menubar-section { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-bottom: 104px; }
.demo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.menubar {
  width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 22px;
  background: rgba(10, 11, 16, 0.55); border-radius: 10px; padding: 7px 14px;
  font: 13px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #F5F5F7;
}
.menubar .item { display: flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.14); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.tray-icon { width: 11px; height: 14px; flex: none; }
.clock { opacity: 0.7; white-space: nowrap; }
.panel { width: min(380px, 100%); background: var(--klein); border: 1px solid var(--line); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 60px rgba(0, 10, 50, 0.45); }
.card { background: var(--deep); border-radius: 14px; padding: 12px 14px; }
.head { display: flex; align-items: center; gap: 8px; }
.head b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.plan { font-size: 12px; color: var(--dim); }
.badge { font: 600 10px/1 var(--mono); letter-spacing: 0.06em; padding: 4px 8px; border-radius: 999px; color: var(--ink); }
.badge.drink { background: var(--drink); }
.badge.dry { background: var(--juice); }
.bar-row { display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--dim); }
.pct { font: 600 13px var(--mono); color: var(--text); text-align: right; }
.bar { position: relative; height: 10px; border-radius: 999px; background: var(--track); }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--juice); }
.bar i.red { background: var(--dry); }
.bar i.yellow { background: var(--drink); }
.bar s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); border-radius: 1px; }
.status { font: 11px var(--mono); margin: 4px 0 0 66px; }
.drink-text { color: var(--drink); }
.dry-text { color: var(--juice); }
.money { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--dim); }
.money b { font: 600 15px var(--mono); color: var(--text); }

/* ---------- How it works ---------- */
.how { padding-bottom: 104px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { border-top: 3px solid var(--juice); padding-top: 18px; }
.n { font: 600 14px var(--mono); color: var(--juice); }
.steps h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 8px; }
.steps p, .note { font-size: 16px; color: var(--dim); }
.note { margin-top: 28px; }

/* ---------- House rules ---------- */
.principles { padding-bottom: 104px; }
.principles ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.principles li { font-size: 17px; color: var(--dim); padding-left: 26px; position: relative; }
.principles li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; border-radius: 3px; background: var(--juice); }
.principles b { color: var(--text); }
@media (max-width: 700px) { .principles ul { grid-template-columns: 1fr; } }

/* ---------- Install + terminal ---------- */
.install { padding-bottom: 104px; }
.install p { color: var(--dim); margin: 20px 0 10px; }
pre { background: var(--ink); border-radius: 14px; padding: 18px 20px; overflow-x: auto; font: 14px/1.6 var(--mono); color: var(--text); }
pre code { font-size: inherit; }
.term { border-radius: 14px; overflow: hidden; background: var(--ink); box-shadow: 0 24px 50px rgba(0, 8, 50, 0.4); }
.term-bar { display: flex; gap: 7px; padding: 12px 14px 0; }
.term-bar span { width: 11px; height: 11px; border-radius: 50%; background: #2B2F3D; }
.term-bar span:first-child { background: var(--juice); }
.term-body { border-radius: 0; white-space: pre; }
.term-body b { color: var(--text); }
.term-body .dim { color: #6B7290; }
.term-body .dry { color: var(--dry); font-weight: 600; }
.term-body .drink { color: var(--drink); font-weight: 600; }

/* ---------- Providers ---------- */
.providers { padding-bottom: 120px; }
.providers ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.providers li { background: var(--deep); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.providers b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.providers span { font-size: 15px; color: var(--dim); }
.providers .soon { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.providers .soon b { color: var(--dim); }

/* ---------- Footer: the bottom of the glass ---------- */
footer { color: var(--ink); }
.band.band-foot { margin-bottom: 0; height: 160px; }
/* No gap between the band and the juice below it. */
.band-foot .front { bottom: -1px; }
.foot-juice { background: var(--juice); padding: 6px 0 112px; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 600 13px var(--mono); }
footer a { color: var(--ink); }
footer a:hover { color: var(--klein); }

/* ---------- The page is a meter ---------- */
.page-meter {
  position: fixed; right: 18px; bottom: 18px; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(0, 26, 94, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 10px 12px 9px; border-radius: 16px; border: 1px solid var(--line);
}
.page-readout { font: 600 11px var(--mono); color: var(--text); white-space: nowrap; min-width: 9ch; text-align: center; }
.page-meter.dry .page-readout { color: var(--juice); }

@media (max-width: 900px) {
  .hero, .menubar-section { grid-template-columns: 1fr; }
  .hero { padding-top: 16px; }
  .demo { align-items: stretch; }
  .panel { width: 100%; }
  .features, .providers ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  nav a:not(:last-child) { display: none; }
  .features, .providers ul { grid-template-columns: 1fr; }
  .menubar .clock { display: none; }
  .menubar .item { font-size: 11px; }
  .page-meter { right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}