:root {
  color-scheme:light;
  --accent:#75a7ff;
  --accent-ink:#75a7ff;
  --bg:#14171c;
  --surface:#1d222a;
  --text:#202936;
  --muted:#aeb8c7;
  --line:#313945;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-synthesis:none}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:25px}
body {
  margin:0}
a {
  color:inherit;
  text-underline-offset:5px}
button {
  font:inherit}
button,a,summary {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px}
::selection {
  background:var(--accent);
  color:#fff}
img {
  max-width:100%;
  display:block}
.wrap {
  width:min(1180px,calc(100% - 64px));
  margin-inline:auto}
.skip {
  position:absolute;
  top:0;
  left:20px;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  background:var(--accent);
  color:#fff;
  z-index:10}
.skip:focus {
  position:fixed;
  top:14px;
  width:auto;
  height:auto;
  padding:14px;
  overflow:visible;
  clip-path:none}
.site-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:25px 0;
  border-bottom:1px solid var(--line)}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  font-size:14px;
  font-weight:850;
  letter-spacing:.07em;
  line-height:1.15}
.brand img {
  width:44px;
  height:44px}
.brand span {
  max-width:95px}
.nav-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:26px}
.nav-links a {
  font-size:13px;
  color:var(--muted);
  text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current=page] {
  color:var(--accent-ink)}
.eyebrow {
  font-size:11px;
  font-weight:750;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-ink)}
h1,h2,h3,p {
  margin:0}
h1 {
  font-size:clamp(54px,7.6vw,100px);
  line-height:.98;
  font-weight:850;
  letter-spacing:-.065em}
h1 em,h2 em {
  font-style:normal;
  color:var(--accent-ink)}
h2 {
  font-size:clamp(34px,4.5vw,56px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:780}
h3 {
  font-size:21px;
  letter-spacing:-.025em;
  line-height:1.25}
p,li {
  font-size:16px;
  line-height:1.7;
  color:var(--muted)}
.lead {
  font-size:18px;
  line-height:1.65;
  max-width:510px}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:26px;
  padding:17px 23px;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:750;
  border:1px solid transparent;
  cursor:pointer;
  min-height:52px}
.button:hover {
  background:#3474ef}
.button.secondary {
  background:transparent;
  border-color:#313945;
  color:var(--text)}
.button.secondary:hover {
  border-color:var(--accent-ink)}
.button.dark {
  background:#202936;
  color:#fff}
.button.dark:hover {
  background:#253a5c}
.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center}
.text-link {
  font-size:14px;
  font-weight:600}
.small {
  font-size:12px;
  line-height:1.65}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:35px;
  align-items:center;
  padding:64px 0 60px}
.hero-copy .eyebrow {
  margin-bottom:25px}
.hero-copy .lead {
  margin:28px 0 30px}
.hero-copy .small {
  margin-top:18px}
.stage {
  position:relative;
  min-height:530px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  overflow:hidden;
  border:1px solid #e7dce4;
  border-radius:24px;
  background:#fff}
.stage:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at 50% 40%,#f8d6e94d,transparent 65%)}
.stage-status {
  position:absolute;
  top:24px;
  left:26px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:700;
  color:#aeb8c7}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor}
.stage.is-active .stage-status {
  color:var(--accent-ink)}
.demo-label {
  position:absolute;
  top:25px;
  right:26px;
  color:#aeb8c7;
  font-size:9px;
  font-weight:600;
  letter-spacing:.12em}
.can-button {
  position:relative;
  border:0;
  background:none;
  cursor:pointer;
  padding:0;
  width:280px;
  height:420px;
  margin-top:34px;
  display:grid;
  place-items:center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  z-index:1;
  border-radius:14px}
.can-button img {
  width:280px;
  height:420px;
  object-fit:contain;
  filter:drop-shadow(0 18px 15px #3b15252b);
  transform:rotate(-5deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  pointer-events:none}
.can-button:hover img {
  transform:rotate(-3deg) translateY(-4px)}
.stage.is-active .can-button img {
  transform:rotate(0) translateY(-7px)}
.demo-copy {
  text-align:center;
  padding:6px 20px 27px}
.demo-copy strong {
  display:block;
  font-size:18px;
  letter-spacing:-.03em;
  margin-bottom:8px}
.demo-copy span {
  font-size:9px;
  font-weight:600;
  letter-spacing:.17em;
  color:#aeb8c7}
.energy-glow {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 45%,#75a7ff24,transparent 66%);
  opacity:0;
  z-index:-1}
.energy-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  z-index:-1;
  overflow:visible;
  color:var(--accent-ink)}
.energy-lines path {
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  opacity:.16}
.stage.is-active .energy-glow {
  opacity:1;
  animation:glow-drift 9s ease-in-out infinite alternate}
.stage.is-active .energy-lines {
  opacity:1;
  animation:field-drift 8s ease-in-out infinite alternate}
.ripple {
  position:absolute;
  width:100px;
  height:100px;
  border:1px solid var(--accent);
  border-radius:50%;
  left:calc(50% - 50px);
  top:calc(44% - 50px);
  opacity:0;
  pointer-events:none}
.ripple.play {
  animation:ripple .85s ease-out}
.trust-row {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  gap:35px;
  flex-wrap:wrap;
  padding:23px 0;
  color:#aeb8c7;
  font-size:10px;
  font-weight:650;
  letter-spacing:.12em}
.trust-row span:before {
  content:"+";
  color:var(--accent-ink);
  margin-right:10px}
.section {
  padding:95px 0}
.section-head {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:45px}
.section-head .eyebrow {
  margin-bottom:18px}
.section-head p {
  max-width:440px}
.steps-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px}
.step {
  border-top:1px solid var(--line);
  padding-top:22px}
.step-number {
  color:var(--accent-ink);
  font-size:12px;
  letter-spacing:.1em;
  font-weight:700;
  margin-bottom:34px}
.step h3 {
  margin-bottom:14px}
.step p {
  font-size:14px;
  max-width:330px}
.state-explainer {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  margin-top:43px;
  padding:25px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.state-explainer strong {
  font-size:10px;
  letter-spacing:.15em;
  display:block;
  margin-bottom:9px}
.state-explainer .active strong {
  color:var(--accent-ink)}
.state-explainer p {
  font-size:14px}
.companion {
  background:var(--accent);
  color:#ffffff;
  padding:65px 0}
.companion .wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center}
.companion .eyebrow {
  color:#fff0f8;
  margin-bottom:20px}
.companion p {
  color:#fff0f8;
  margin:22px 0}
.companion .small {
  margin-bottom:0;
  max-width:510px}
.companion a:focus-visible {
  outline-color:#fff}
.companion .text-link {
  color:#fff}
.notice {
  border-left:2px solid var(--accent);
  padding:2px 0 2px 20px;
  font-size:14px;
  line-height:1.7;
  color:#aeb8c7}
.faq-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px}
.faq-grid .eyebrow {
  margin-bottom:18px}
.faq-grid h2 {
  max-width:320px}
.faq-list {
  border-top:1px solid var(--line)}
details {
  border-bottom:1px solid var(--line)}
summary {
  cursor:pointer;
  font-size:16px;
  font-weight:650;
  list-style:none;
  padding:22px 32px 22px 0;
  position:relative;
  line-height:1.45}
summary::-webkit-details-marker {
  display:none}
summary:after {
  content:"+";
  position:absolute;
  right:0;
  color:var(--accent-ink);
  font-size:21px;
  top:17px;
  font-weight:400}
details[open] summary:after {
  content:"−"}
details p {
  padding:0 22px 23px 0;
  font-size:14px}
.site-footer {
  border-top:1px solid var(--line);
  padding:33px 0 38px;
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:center}
.footer-links {
  display:flex;
  gap:24px;
  flex-wrap:wrap}
.site-footer a,.site-footer p {
  font-size:12px;
  color:#aeb8c7}
.page-header {
  padding:75px 0 52px;
  max-width:880px}
.page-header .eyebrow {
  margin-bottom:22px}
.page-header h1 {
  font-size:clamp(48px,6.8vw,78px)}
.page-header .lead {
  margin-top:26px;
  max-width:680px}
.page-header .small {
  margin-top:20px}
.guide-layout {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:65px;
  padding-bottom:90px;
  align-items:start}
.contents {
  position:sticky;
  top:25px;
  border-top:1px solid var(--line);
  padding-top:20px}
.contents p {
  font-size:10px;
  letter-spacing:.13em;
  margin-bottom:15px;
  color:var(--accent-ink);
  font-weight:700}
.contents a {
  display:block;
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  padding:7px 0}
.contents a:hover {
  color:var(--accent-ink)}
.prose {
  max-width:770px}
.prose section {
  padding:29px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:25px}
.prose h2 {
  font-size:25px;
  line-height:1.2;
  margin-bottom:16px;
  letter-spacing:-.03em}
.prose p+p {
  margin-top:15px}
.prose p,.prose li {
  font-size:15px}
.prose a {
  color:var(--text)}
.prose a.button {
  color:#fff}
.prose a.button.dark {
  color:#fff}
.prose a.button.secondary {
  color:var(--text)}
.guide-step {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:22px;
  padding:32px 0;
  border-top:1px solid var(--line)}
.guide-step>.step-number {
  margin:6px 0 0}
.guide-step h2 {
  font-size:26px;
  letter-spacing:-.035em;
  margin-bottom:17px}
.guide-step p {
  font-size:15px}
.guide-step p+p {
  margin-top:14px}
.guide-step .actions {
  margin-top:20px}
.path {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
  overflow-wrap:anywhere;
  background:#202936;
  color:#d8e1ee;
  border:1px solid #313945;
  padding:14px 16px;
  border-radius:5px;
  margin:20px 0}
.guide-note {
  margin-bottom:32px}
.guide-faq {
  padding-top:40px}
.guide-faq h2 {
  font-size:29px;
  margin-bottom:22px}
.is-paused .energy-lines,.is-paused .energy-glow {
  animation-play-state:paused!important}

@keyframes glow-drift {
  from {
  transform:translate(-9%,-3%) scale(.95)}
to {
  transform:translate(10%,4%) scale(1.15)}
}
@keyframes field-drift {
  from {
  transform:translate(-3%,5%) rotate(-6deg)}
to {
  transform:translate(3%,-5%) rotate(5deg)}
}
@keyframes ripple {
  0% {
  opacity:.45;
  transform:scale(.6)}
100% {
  opacity:0;
  transform:scale(6)}
}

@media(min-width:1450px) {
  .hero {
  gap:80px}
}
@media(max-width:900px) {
  .wrap {
  width:calc(100% - 44px)}
.hero {
  gap:20px}
.stage {
  min-height:490px}
.can-button,.can-button img {
  width:245px;
  height:368px}
.section-head {
  gap:35px}
.companion .wrap {
  gap:40px}
.faq-grid {
  gap:45px}
.guide-layout {
  grid-template-columns:170px 1fr;
  gap:35px}
.nav-links {
  gap:18px}
h1 {
  font-size:clamp(54px,8.3vw,80px)}
}
@media(max-width:680px) {
  .wrap {
  width:calc(100% - 40px)}
.site-nav {
  padding:19px 0;
  gap:15px}
.brand {
  font-size:11px;
  gap:7px}
.brand img {
  width:36px;
  height:36px}
.nav-links {
  gap:13px}
.nav-links a {
  font-size:11px}
.nav-links .optional-link {
  display:none}
.hero {
  grid-template-columns:1fr;
  padding:48px 0 35px;
  gap:35px}
.hero-copy .eyebrow {
  margin-bottom:20px}
h1 {
  font-size:clamp(53px,12.7vw,80px)}
.hero-copy .lead {
  font-size:17px;
  margin:23px 0}
.stage {
  min-height:460px}
.can-button,.can-button img {
  width:235px;
  height:352px}
.can-button {
  margin-top:28px}
.stage-status {
  left:22px;
  top:22px}
.demo-label {
  right:22px;
  top:23px;
  font-size:8px}
.demo-copy {
  padding-bottom:22px}
.trust-row {
  gap:14px 25px;
  font-size:9px;
  padding:20px 0}
.section {
  padding:62px 0}
.section-head,.companion .wrap,.faq-grid {
  grid-template-columns:1fr;
  gap:24px}
.section-head {
  margin-bottom:32px}
.steps-row {
  grid-template-columns:1fr;
  gap:25px}
.step {
  display:grid;
  grid-template-columns:32px 1fr;
  gap:9px 16px}
.step .step-number {
  grid-row:span 2;
  margin:5px 0}
.step h3 {
  margin:0}
.step p {
  grid-column:2;
  max-width:none}
.state-explainer {
  gap:20px}
.state-explainer p {
  font-size:13px}
.companion {
  padding:48px 0}
.companion .wrap {
  gap:6px}
.companion p {
  margin:19px 0}
.faq-grid {
  gap:30px}
.faq-grid h2 {
  max-width:none}
.site-footer {
  align-items:flex-start;
  flex-direction:column;
  gap:20px}
.page-header {
  padding:48px 0 35px}
.page-header h1 {
  font-size:clamp(45px,11vw,65px)}
.guide-layout {
  grid-template-columns:1fr;
  gap:26px;
  padding-bottom:55px}
.contents {
  position:static;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding-bottom:15px;
  border-bottom:1px solid var(--line)}
.contents p {
  width:100%;
  margin:0}
.contents a {
  padding:3px 0;
  font-size:12px}
.guide-step {
  grid-template-columns:30px 1fr;
  gap:15px}
.guide-step h2 {
  font-size:23px}
.prose h2 {
  font-size:23px}
.actions .button {
  padding:15px 18px;
  font-size:13px}
.lead {
  font-size:17px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
.ripple {
  display:none}
.stage.is-active .energy-lines,.stage.is-active .energy-glow {
  transform:none}
}


/* Pulse: liquid animation lives inside the can, behind its silver mark. */
.can-art {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  transform:rotate(-2deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  pointer-events:none}

.can-art img,.carbonation {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain}

.can-button img,.can-button:hover img,.stage.is-active .can-button img {
  transform:none}

.can-button:hover .can-art {
  transform:rotate(0) translateY(-3px)}

.stage.is-active .can-art {
  transform:rotate(0) translateY(-7px)}

.carbonation circle {
  fill:#ffffff09;
  stroke:#ffffffa6;
  stroke-width:1.8;
  animation:bubble-rise var(--duration) linear var(--delay) infinite;
  animation-play-state:paused}

.stage.is-active:not(.is-paused) .carbonation circle {
  animation-play-state:running}

.stage-status {
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:30px;
  background:#f6f3f6}

.stage.is-active .stage-status {
  background:#fff0f8;
  border-color:#edb5d2;
  color:var(--accent)}

.demo-label {
  top:34px}
.stage:before {
  background:radial-gradient(ellipse at 50% 43%,#fce5f1,transparent 65%)}

.stage.is-active .energy-lines {
  animation:none}
.energy-lines path {
  opacity:.16}

.button {
  border-radius:10px}
.companion {
  color:#fff}
.companion .button {
  background:#202936}

.brand img {
  width:48px;
  height:48px}
.notice {
  color:var(--muted)}

@keyframes bubble-rise {
  0% {
  transform:translateY(0);
  opacity:0}
12% {
  opacity:.8}
85% {
  opacity:.8}
100% {
  transform:translateY(calc(-1 * var(--rise)));
  opacity:0}
}

@media(prefers-reduced-motion:reduce) {
  .can-art,.can-button:hover .can-art,.stage.is-active .can-art {
  transform:none}
.carbonation circle {
  animation:none!important;
  opacity:.7}
.carbonation circle:nth-child(3n) {
  transform:translateY(-260px)}
.carbonation circle:nth-child(3n + 1) {
  transform:translateY(-140px)}
}

@media(max-width:680px) {
  #demo-disclaimer {
  margin:0 0 30px!important;
  text-align:left!important}
}