/* Hero only: a little shared space for the mark, the words, and three useful objects. */
#hero {
  --hero-ink: #272925;
  --hero-muted: #94988d;
  --hero-soft-line: #e4e8dd;
  --hero-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
}

#hero .hero-premium-stage {
  position: relative;
  isolation: isolate;
  padding-top: 7px;
  overflow: visible;
}

#hero .hero-premium-logo {
  position: relative;
  width: 70px;
  height: 65px;
  margin-bottom: 29px;
  z-index: 2;
}

#hero .hero-premium-logo .hero-logo-slot,
#hero .hero-premium-logo .hero-logo {
  width: 70px;
  height: 65px;
}

#hero [data-intro="title"] {
  position: relative;
  z-index: 2;
  max-width: min(960px, 100%);
  font-weight: 450;
  letter-spacing: -.055em;
  line-height: 1.105;
  text-wrap: balance;
}

#hero .hero-line {
  display: block;
  overflow: clip;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

#hero [data-intro="subhead"] {
  position: relative;
  z-index: 3;
  line-height: 1.7;
  color: #969a90;
}

#hero .hero-affordances {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 .3em;
}

#hero .hero-affordances button {
  position: relative;
  display: inline-block;
  border: 0;
  border-radius: 2px;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: #7d8473;
  line-height: inherit;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .25s ease;
}

#hero .hero-affordances button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .12em;
  height: 1px;
  background: #c9d2b9;
  opacity: .7;
  transform-origin: left center;
  transition: background .3s, transform .4s var(--hero-ease), opacity .3s;
}

#hero .hero-affordances button:hover,
#hero .hero-affordances button[aria-expanded="true"] {
  color: #39472b;
}

#hero .hero-affordances button:hover::after,
#hero .hero-affordances button[aria-expanded="true"]::after {
  height: 2px;
  background: #adbf89;
  opacity: 1;
  transform: translateY(1px);
}

#hero button:focus-visible,
#hero .hero-token:focus-visible,
#hero .hero-example-panel:focus-visible {
  outline: 2px solid #869e5c;
  outline-offset: 5px;
}

#hero .hero-token-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

#hero .hero-token {
  --token-angle: 0deg;
  --token-scale: 1;
  position: absolute;
  width: 60px;
  height: 62px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 9px;
  color: #768169;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  will-change: transform;
  transform: translate3d(var(--token-x, 0px), var(--token-y, 0px), 0)
    rotate(var(--token-angle)) scale(var(--token-scale));
}

#hero .hero-token svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(1px 5px 4px #3c482c16);
  transition: filter .35s ease;
}

#hero .hero-token:hover svg,
#hero .hero-token[aria-expanded="true"] svg {
  filter: drop-shadow(2px 9px 7px #3c482c21);
}

#hero .hero-token-price { left: calc(50% - 211px); top: 9px; --token-angle: -13deg; }
#hero .hero-token-cap { left: calc(50% + 139px); top: 17px; --token-angle: 11deg; }
#hero .hero-token-receipt { left: calc(50% + 302px); top: 27px; width: 53px; height: 57px; --token-angle: 16deg; }

#hero .hero-token-label {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  translate: -50% 0;
  padding: 4px 7px;
  border: 1px solid #e0e6d7;
  border-radius: 5px;
  background: #fafcf5ed;
  color: #889975;
  font: 9px/1.4 "Manrope", sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .2s, transform .3s var(--hero-ease);
}

#hero .hero-token:hover .hero-token-label,
#hero .hero-token:focus-visible .hero-token-label {
  opacity: 1;
  transform: translateY(0);
}

#hero .hero-token-cursor {
  fill: var(--token-cursor-color, #a4b67f);
  stroke: #ffffff;
  stroke-width: 1.25;
  stroke-linejoin: round;
}

#hero [data-intro="cta"] {
  position: relative;
  z-index: 3;
}

#hero .hero-example-dock {
  position: relative;
  z-index: 5;
  width: min(100%, 398px);
  height: 0;
  flex-shrink: 0;
  margin-top: 0;
  overflow: clip;
  opacity: 0;
  transition: height .6s var(--hero-ease), margin-top .6s var(--hero-ease), opacity .2s;
}

#hero .hero-example-dock.is-open {
  margin-top: 24px;
  opacity: 1;
}

#hero .hero-example-panel {
  position: relative;
  width: 100%;
  padding: 21px 23px 19px;
  border: 1px solid #e0e5d7;
  border-radius: 14px;
  background: #fbfcf9;
  box-shadow: 0 4px 8px #28371a03, 0 13px 28px #28371a05;
  color: #677758;
  text-align: left;
  font: 12px/1.6 "Manrope", sans-serif;
  transform: translateY(-10px) scale(.975);
  transform-origin: top center;
  transition: transform .6s var(--hero-ease);
}

#hero .hero-example-dock.is-open .hero-example-panel { transform: translateY(0) scale(1); }
#hero .hero-example-panel[hidden] { display: none; }

#hero .hero-example-head { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
#hero .hero-example-head svg { width: 19px; height: 19px; fill: none; stroke: #8da274; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#hero .hero-example-head h2 { margin: 0; font: 600 13px/1.4 "Manrope", sans-serif; letter-spacing: -.2px; color: #5c7347; }
#hero .hero-example-badge { font-size: 8px; letter-spacing: .6px; padding: 2px 5px; border-radius: 3px; border: 1px solid #dfe8d3; color: #9eb58c; margin-left: auto; }
#hero .hero-example-close { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent; padding: 4px; color: #a3b895; cursor: pointer; }
#hero .hero-example-close:hover { background: #eef4e5; }
#hero .hero-example-close svg { width: 14px; height: 14px; stroke: currentColor; }
#hero .hero-example-panel p { margin: 0; }
#hero .hero-example-caption { font-size: 11px; color: #829574; line-height: 1.6; }
#hero .hero-example-value { font: 500 31px/1.1 "Manrope",sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -1px; color: #556d3e; margin: 10px 0 6px; }
#hero .hero-example-value small { color: #9ab187; font: 9px/1.4 "Manrope",sans-serif; letter-spacing: .4px; margin-left: 4px; }
#hero .hero-example-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 10px; color: #879b76; margin: 9px 0; }
#hero .hero-example-row strong { font-weight: 500; color: #82996b; font-variant-numeric: tabular-nums; }
#hero .hero-example-rule { height: 1px; background: #e8eedf; margin: 13px 0; }
#hero .hero-example-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; }
#hero .hero-example-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 11px; min-height: 34px; border: 1px solid #dce7cd; border-radius: 6px; background: #edf4e0; color: #7f9867; font: 500 10px/1.5 "Manrope",sans-serif; cursor: pointer; transition: background .2s, transform .2s; }
#hero .hero-example-button:hover { background: #e4efd0; transform: translateY(-1px); }
#hero .hero-example-button:active { transform: translateY(0); }
#hero .hero-example-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#hero .hero-example-footnote { font-size: 10px; color: #94a484; margin-top: 12px !important; line-height: 1.5; }
#hero .hero-example-timer { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: #96ae80; }
#hero .hero-example-timer::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #b4cc91; }
#hero .hero-example-timer.is-expired { color: #aeaa94; }
#hero .hero-example-timer.is-expired::before { background: #c5c1ac; }
#hero .hero-example-slider-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #96ac82; margin: 13px 0 7px; }
#hero .hero-example-slider-label output { font-variant-numeric: tabular-nums; color: #748f59; font-weight: 500; }
#hero .hero-example-slider { display: block; width: 100%; height: 24px; padding: 0; margin: 0; appearance: none; background: transparent; cursor: pointer; accent-color: #b6cc92; }
#hero .hero-example-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right,#bfd3a0 var(--range-fill,44.44%),#e5eed9 var(--range-fill,44.44%)); }
#hero .hero-example-slider::-webkit-slider-thumb { appearance: none; margin-top: -5px; width: 14px; height: 14px; border-radius: 50%; background: #fafcf7; border: 2px solid #afc98d; box-shadow: 0 2px 5px #6b8b4420; }
#hero .hero-example-slider::-moz-range-track { height: 4px; border-radius: 4px; background: #e5eed9; }
#hero .hero-example-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fafcf7; border: 2px solid #afc98d; }
#hero .hero-example-receipt { border: 1px solid #e6eedc; border-radius: 7px; background: #f6faf0; padding: 12px 13px; margin: 13px 0; font: 10px/1.8 ui-monospace,monospace; color: #95aa81; }
#hero .hero-example-receipt>div { display: flex; justify-content: space-between; gap: 15px; }
#hero .hero-example-receipt b { font-weight: 400; color: #799561; }
#hero .hero-example-status { font-size: 9px; color: #9aaf87; line-height: 1.5; }
#hero .hero-premium-announcer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* The page's reference-motion.js owns logo/title/copy/CTA choreography. */
#hero.hero-premium-ready .hero-token-layer { animation: premium-hardware-enter .65s 2s cubic-bezier(.33,1,.68,1) both; }
@keyframes premium-hardware-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 900px) {
  #hero .hero-affordances button { min-height: 30px; }
  #hero .hero-example-dock { width: 382px; }
}

@media (max-width: 899px) {
  #hero .hero-token-price { left: calc(50% - 170px); top: 10px; width: 51px; height: 54px; }
  #hero .hero-token-cap { left: calc(50% + 117px); top: 22px; width: 51px; height: 54px; }
  #hero .hero-token-receipt { left: calc(50% + 219px); top: 35px; width: 42px; height: 47px; }
}

@media (max-width: 639px) {
  #hero .hero-premium-stage { padding-top: 2px; }
  #hero .hero-premium-logo { width: 58px; height: 54px; margin-bottom: 27px; }
  #hero .hero-premium-logo .hero-logo-slot,#hero .hero-premium-logo .hero-logo { width: 58px; height: 54px; }
  #hero [data-intro="title"] { font-size: clamp(37px,10.4vw,49px); letter-spacing: -.052em; line-height: 1.115; max-width: 100%; }
  #hero [data-intro="subhead"] { font-size: 15px; line-height: 1.75; max-width: 34ch; margin-top: 3px; }
  #hero .hero-affordances { gap: 0 .32em; margin-top: 6px; }
  #hero .hero-affordances button { min-height: 32px; }
  #hero .hero-token-price { left: calc(50% - 121px); top: 9px; width: 44px; height: 46px; }
  #hero .hero-token-cap { left: calc(50% + 80px); top: 14px; width: 44px; height: 46px; }
  #hero .hero-token-receipt { left: calc(50% + 137px); top: 27px; width: 44px; height: 46px; }
  #hero .hero-token-label { display: none; }
  #hero .hero-example-dock { max-width: 355px; }
  #hero .hero-example-dock.is-open { margin-top: 21px; }
  #hero .hero-example-panel { padding: 20px; }
  #hero .hero-example-close { width: 34px; height: 34px; }
  #hero .hero-example-button { min-height: 39px; font-size: 11px; }
  #hero .hero-example-slider { height: 34px; }
  #hero .hero-example-footnote { font-size: 10px; }
  #hero .hero-example-actions { gap: 9px; }
}

@media (max-width: 360px) {
  #hero .hero-token-receipt { left: calc(50% + 116px); }
  #hero .hero-token-price { left: calc(50% - 112px); }
  #hero .hero-token-cap { left: calc(50% + 69px); }
  #hero [data-intro="title"] { font-size: 35px; }
  #hero [data-intro="subhead"] { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-line,
  #hero [data-intro="subhead"],
  #hero [data-intro="cta"],
  #hero .hero-token-layer,
  #hero .hero-premium-logo .animated-mark,
  #hero .hero-premium-logo .mark-blink,
  #hero .hero-premium-logo .mark-scan { animation: none !important; }
  #hero .hero-token { will-change: auto; }
  #hero .hero-example-dock,#hero .hero-example-panel,#hero .hero-affordances button,#hero .hero-affordances button::after { transition: none; }
}

/* Graphite hardware: the same neutral shell, dark glass and CCFF00 light as the CRT. */
#hero .hero-token {
  --token-angle: 0deg;
  --shadow-x: 2px;
  --shadow-y: 9px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: none;
}
#hero .hero-token svg,
#hero .hero-token:hover svg,
#hero .hero-token[aria-expanded="true"] svg {
  filter: drop-shadow(var(--shadow-x) var(--shadow-y) 5px #17210c24) drop-shadow(0 2px 1px #12190b18);
  transition: filter .12s linear;
  pointer-events: none;
}
#hero .hero-token::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 5% 5% 12%;
  border-radius: 9px;
  background: radial-gradient(ellipse at var(--highlight-x,30%) var(--highlight-y,15%),#ffffff45,transparent 66%);
  opacity: .35;
  mix-blend-mode: screen;
}
#hero .hero-token .hardware-specular { opacity: var(--glass-light,.23); }
#hero .hero-token.is-grabbed { cursor: grabbing; z-index: 10; }
#hero .hero-token-price,#hero .hero-token-cap,#hero .hero-token-receipt { --token-angle: 0deg; }
#hero .hero-token-label { color: #6c7364; background: #f7f8f3f5; border-color: #dce1d5; }
#hero .hero-token-label::after { content: " · drag me"; color: #929b88; }
#hero .hero-token.is-grabbed .hero-token-label { opacity: 0; }
#hero .hero-premium-logo .hero-logo-slot {
  transform-style: preserve-3d;
  transform: perspective(440px) translate3d(var(--head-x,0px),var(--head-y,0px),0) rotateY(var(--head-yaw,0deg)) rotateX(var(--head-pitch,0deg));
  will-change: transform;
}
#hero .hero-premium-logo .animated-mark { animation: none; transform: none; }
#hero .hero-premium-logo .mark-blink { display: none; }
#hero .hero-robot-gaze { pointer-events: none; }
#hero .hero-robot-eyes { transform: translate(var(--eye-x,0px),var(--eye-y,0px)); }
#hero .hero-robot-eye-light { transform-origin: 274px 398px; animation: hardware-blink 7.3s 3.4s infinite; }
@keyframes hardware-blink { 0%,44%,48%,100% { transform: scaleY(1); } 45.5%,46.5% { transform: scaleY(.13); } }
#hero .hero-example-panel { background: linear-gradient(130deg,#fff,#f5f6f1); border-color: #d9ded2; box-shadow: inset 0 1px #fff,0 1px 1px #222b1610,0 8px 20px #222b1608; color: #6a7261; }
#hero .hero-example-head>svg { width: 25px; height: 25px; padding: 4px; border-radius: 6px; background: linear-gradient(#50534d,#2b3025); color: #ccff00; stroke: #ccff00; border: 1px solid #747c67; box-shadow: inset 0 1px #a0a793,0 2px 0 #1a2210; }
#hero .hero-example-head h2 { color: #46503d; }
#hero .hero-example-badge { color: #949d86; border-color: #dbe2d1; }
#hero .hero-example-caption,#hero .hero-example-row,#hero .hero-example-slider-label { color: #7c876f; }
#hero .hero-example-value { color: #3d4931; }
#hero .hero-example-value small { color: #8c997d; }
#hero .hero-example-row strong,#hero .hero-example-slider-label output { color: #647853; }
#hero .hero-example-button { border-color: #404b33; background: linear-gradient(#49563b,#303c24); color: #d4f799; box-shadow: inset 0 1px #75865f,0 2px 0 #1f2c13; }
#hero .hero-example-button:hover { background: linear-gradient(#546443,#384b29); }
#hero .hero-example-button:active { transform: translateY(1px); box-shadow: inset 0 1px #75865f,0 1px 0 #1f2c13; }
#hero .hero-example-slider::-webkit-slider-runnable-track { background: linear-gradient(to right,#b9d482 var(--range-fill,44.44%),#dde5d3 var(--range-fill,44.44%)); }
#hero .hero-example-slider::-webkit-slider-thumb { background: linear-gradient(#657057,#2d3922); border: 2px solid #c7e699; box-shadow: 0 2px 3px #26351430; }
#hero .hero-example-slider::-moz-range-thumb { background: #39482a; border-color: #c7e699; }
#hero .hero-example-receipt { background: linear-gradient(140deg,#2c3424,#222c19); border-color: #4c5e3b; box-shadow: inset 0 1px 4px #00000035,0 1px #ffffff; color: #b1c59a; }
#hero .hero-example-receipt b { color: #ccff00; }
#hero .hero-example-timer::before { background: #bada89; box-shadow: 0 0 5px #bada8940; }
@media (prefers-reduced-motion:reduce) {
  #hero .hero-robot-eye-light { animation: none; }
  #hero .hero-premium-logo .hero-logo-slot { transform: none; will-change: auto; }
  #hero .hero-token { cursor: pointer; transform: none; }
}

/* The headline and one solid CRT own the hero; there are no orbiting objects. */
#hero .hero-token-layer{display:none!important}
#hero .hero-premium-stage .hero-premium-logo{width:64px;height:60px;margin-bottom:25px;z-index:4}
#hero .hero-premium-stage .hero-premium-logo .hero-logo-slot{width:64px;height:60px;transform:none;will-change:auto}
#hero .hero-premium-stage .hero-line{overflow:visible}
/* The approved mark stays steady; all motion is confined to the existing eyes. */
#hero .hero-premium-stage .hero-premium-logo .hero-eye-mark{position:relative;display:block;width:64px;height:auto;aspect-ratio:759/704;transform:none!important;animation:none!important;opacity:1!important;pointer-events:none;cursor:default;will-change:auto}
#hero .hero-eye-mark img{display:block;width:100%;height:100%;transform:none!important;animation:none!important;opacity:1!important}
#hero .hero-eye-mark .hero-eye-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;fill:#24251e;color:#24251e}
#hero .hero-eye-expression{opacity:0;transition:opacity 95ms linear}
#hero .hero-eye-expression.is-current{opacity:.96}
#hero .hero-eye-blink{opacity:0}
#hero .hero-eye-pupil{will-change:transform}
#hero .hero-eye-expression[data-eye-expression="processing"] rect{transform-box:fill-box;transform-origin:center;transform:scaleY(calc(.68 + var(--eye-process,0)*.16));transition:transform .15s ease}

#hero .hero-live-word{--word-energy:0;position:relative;display:inline-block;white-space:nowrap;isolation:isolate;perspective:700px;cursor:default;letter-spacing:inherit}
#hero .hero-live-letter{position:relative;display:inline-block;transform-style:preserve-3d;transform-origin:50% 54%;will-change:transform;isolation:isolate}
#hero .hero-live-glyph{position:relative;display:inline-block;color:#252923;background:linear-gradient(170deg,#898e81 0%,#353b2f 22%,#20251b 54%,#646d56 56%,#242e18 68%,#39432c 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.2px #354529;text-shadow:0 1px .3px #6d805138,0 2px 0 #151e0b12;backface-visibility:visible}
#hero .hero-live-letter::before{content:attr(data-glyph);position:absolute;inset:0;color:#687063;text-shadow:0 1px 0 #899181,0 2px 0 #697360,0 3px 0 #4c5940,0 4px 2px #202f1026;transform:translate3d(0,1px,-2px);opacity:.53;pointer-events:none}
#hero .hero-live-letter::after{content:attr(data-glyph);position:absolute;inset:0;transform:translateZ(1px);background:linear-gradient(180deg,transparent 0 29%,#ccff004a 34%,#ccff00 39%,#dfff79 40%,#ccff00 41%,#ccff007a 44%,transparent 51% 100%);background-size:100% 340%;background-position:0 -70%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.15px #ccff0033;opacity:calc(.55 + var(--glyph-glow,.15));filter:drop-shadow(0 0 calc(2px + var(--word-energy)*4px) #ccff0060);animation:hero-type-scan 3.7s linear infinite;animation-delay:calc(var(--glyph-index)*-.11s);pointer-events:none}
#hero .hero-live-word::after{content:"";position:absolute;left:3%;right:3%;bottom:-.025em;height:1px;opacity:calc(.22 + var(--word-energy)*.40);background:linear-gradient(90deg,transparent 0%,#697452 18%,#ccff00 43%,transparent 53%);background-size:220% 100%;animation:hero-type-circuit 2.8s linear infinite;pointer-events:none}
#hero .hero-live-word:hover .hero-live-glyph{filter:drop-shadow(0 2px 3px #5366261a)}
#hero .hero-live-word[data-live-word="Off-peak"] .hero-live-letter::after{animation-delay:calc(1.6s + var(--glyph-index)*-.09s)}
#hero[data-hero-motion="paused"] .hero-live-letter::after,#hero[data-hero-motion="paused"] .hero-live-word::after{animation-play-state:paused}
@keyframes hero-type-scan{0%{background-position:0 140%}100%{background-position:0 -80%}}
@keyframes hero-type-circuit{from{background-position:180% 0}to{background-position:-100% 0}}
@media(max-width:639px){#hero .hero-premium-stage .hero-premium-logo,#hero .hero-premium-stage .hero-premium-logo .hero-logo-slot{width:56px;height:52px}#hero .hero-premium-stage .hero-premium-logo .hero-eye-mark{width:56px}#hero .hero-premium-stage .hero-premium-logo{margin-bottom:24px}#hero .hero-live-letter::before{text-shadow:0 1px 0 #899181,0 2px 0 #4c5940}}
@media(prefers-reduced-motion:reduce){#hero .hero-live-letter::after,#hero .hero-live-word::after{animation:none!important}#hero .hero-live-letter{transform:none!important;will-change:auto}#hero .hero-live-letter::after{background-position:0 42%;opacity:.25}#hero .hero-eye-expression{transition:none}#hero .hero-eye-pupil{will-change:auto}}

/* Keep the three-line headline balanced on narrow phones. */
@media(max-width:360px){#hero .hero-premium-stage [data-intro="title"]{font-size:32px;line-height:1.08;letter-spacing:-.05em}}