/* AERIS RGB page. emergence-design-style tokens merged with the E:mergence web profile.
   The page is quiet and near-black; the only loud colour is the light the visitor makes. */
@font-face{font-family:Inter;src:url('/assets/fonts/InterVariable.woff2') format('woff2');font-display:swap;font-weight:100 900}
:root{
  --bg:#070908;--text:#f3f1ec;--text-2:#b9bdb8;--text-3:#7d837f;
  --rule:rgba(243,241,236,.10);--rule-strong:rgba(243,241,236,.20);--hover:rgba(243,241,236,.06);--press:rgba(243,241,236,.10);
  --accent:#74f0b3;--accent-ink:#04140d;--accent-text:#74f0b3;--accent-soft:rgba(116,240,179,.13);
  --warn:#e6bd76;--danger:#ff8f80;--info:#78ece4;
  --surface:rgba(10,12,11,.86);--surface-raised:rgba(10,12,11,.95);
  --glow:116,240,179;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;font-family:Inter,system-ui,sans-serif;font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
main{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video,canvas{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
p{color:var(--text-2);line-height:1.65;margin:0 0 16px}
h1,h2,h3{font-weight:400;margin:0;letter-spacing:-.02em;line-height:1.06}
h1{font-size:clamp(44px,6.2vw,92px);letter-spacing:-.035em}
h2{font-size:clamp(34px,4.4vw,64px);letter-spacing:-.03em}
h3{font-size:20px;line-height:1.3}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip{position:fixed;z-index:100;left:16px;top:-80px;padding:12px 16px;background:var(--accent);color:var(--accent-ink);border-radius:6px}
.skip:focus{top:12px}
.eyebrow{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);margin:0 0 20px}
.mono{font-family:var(--mono)}
.tabular{font-variant-numeric:tabular-nums}

/* header */
.site-header{position:fixed;z-index:30;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 4.5vw;transition:background .18s var(--ease),border-color .18s var(--ease);border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(7,9,8,.92);border-color:var(--rule)}
.brand{font-size:22px;letter-spacing:-.04em;white-space:nowrap}
.site-header nav{display:flex;align-items:center;gap:28px;font-size:13px;color:var(--text-2)}
.site-header nav a{padding:8px 0;transition:color .12s}
.site-header nav a:hover{color:var(--text)}
.site-header nav [aria-current=page]{color:var(--text);box-shadow:inset 0 -1px var(--accent)}

/* buttons: one family */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 18px;border-radius:6px;border:1px solid var(--rule-strong);background:transparent;font-size:14px;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn:active{background:var(--press)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:#8af5c1}
.btn.ghost{border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{color:var(--text)}
.btn.small{height:32px;padding:0 12px;font-size:13px}
.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn svg{width:16px;height:16px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;border:1px solid var(--rule-strong);font-size:12px;color:var(--text-2)}
.dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--accent);margin-right:8px;vertical-align:middle}

.shell{max-width:1320px;margin:0 auto;padding:0 4.5vw}
section{position:relative}
.divider{border-top:1px solid var(--rule)}
.pad{padding:128px 0}

/* ----------------------------------------------------------- hero */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:2vw;padding:120px 4.5vw 64px;max-width:1600px;margin:0 auto;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-10% -20% 0;z-index:-1;pointer-events:none;background:radial-gradient(48% 46% at 66% 52%,rgba(var(--glow),.20),transparent 70%),radial-gradient(30% 24% at 64% 92%,rgba(var(--glow),.12),transparent 70%);transition:background .3s linear}
.hero h1 .soft{color:var(--text-3)}
.hero .lede{font-size:clamp(17px,1.35vw,20px);max-width:520px;margin:28px 0 0;color:var(--text-2)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero .price-line{margin-top:20px;font-size:13px;color:var(--text-3)}
.hero .price-line strong{color:var(--text);font-weight:500}
.stage{position:relative;aspect-ratio:10/8;width:100%;perspective:1400px}
.stage canvas{width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s var(--ease);cursor:crosshair}
.stage[data-view=angled] canvas{transform:rotateY(var(--ry,-14deg)) rotateX(var(--rx,6deg))}
.stage-meta{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--text-3)}
.seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:6px;padding:2px;gap:2px}
.seg button{height:28px;padding:0 10px;border:0;border-radius:4px;background:transparent;font-size:12px;color:var(--text-2);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--press);color:var(--text)}

/* prompt console */
.console{margin-top:40px;max-width:560px;border:1px solid var(--rule-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.console label{display:block;padding:12px 14px 0;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3)}
.console .row{display:flex;gap:8px;padding:8px 8px 8px 14px;align-items:center}
.console input{flex:1;min-width:0;height:40px;border:0;background:transparent;font-size:16px;outline:none}
.console input::placeholder{color:var(--text-3)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 14px}
.chips button{height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--rule);background:transparent;font-size:12px;color:var(--text-2);cursor:pointer;transition:background .12s,color .12s}
.chips button:hover{background:var(--hover);color:var(--text)}
.governor{margin:0;padding:10px 14px;border-top:1px solid var(--rule);font-size:13px;color:var(--warn)}

/* ----------------------------------------------------------- film */
.film{padding:128px 0 96px}
.film-frame{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--rule);background:#000;aspect-ratio:16/9}
.film-frame video{width:100%;height:100%;object-fit:cover}
.film-frame .play{position:absolute;left:24px;bottom:24px}
.film-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:40px;flex-wrap:wrap}
.film-head p{max-width:420px;margin:0}
.caption{font-size:12px;color:var(--text-3);margin-top:12px}

/* ----------------------------------------------------------- chapters (sticky story) */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6vw}
.story-copy .chapter{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:48px 0;opacity:.28;transition:opacity .18s var(--ease)}
.story-copy .chapter.active{opacity:1}
.chapter .num{font-size:12px;color:var(--accent-text);font-variant-numeric:tabular-nums;margin-bottom:20px}
.chapter h2{margin-bottom:24px}
.chapter p{max-width:460px;font-size:17px}
.story-visual{position:sticky;top:12vh;height:76vh;display:flex;align-items:center}
.story-visual .panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(24px);transition:opacity .18s var(--ease),transform .18s var(--ease);pointer-events:none}
.story-visual .panel.active{opacity:1;transform:none;pointer-events:auto}

.shot{margin:0;width:100%;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#0b0e0c}
.shot img{width:100%;height:auto}
.shot figcaption{padding:10px 14px;font-size:12px;color:var(--text-3);border-top:1px solid var(--rule)}

/* phone pairing visual */
.pair{display:flex;align-items:center;gap:40px;width:100%;justify-content:center}
.phone{width:min(240px,42%);aspect-ratio:9/19.5;border:1px solid var(--rule-strong);border-radius:32px;padding:10px;background:#050605;box-shadow:0 24px 64px rgba(0,0,0,.45)}
.phone .screen{position:relative;height:100%;border-radius:24px;background:#0b0e0c;overflow:hidden;display:flex;flex-direction:column}
.phone .bar{display:flex;justify-content:space-between;padding:14px 16px 8px;font-size:10px;color:var(--text-3)}
.phone .viewfinder{position:relative;margin:6px 12px;flex:1;border-radius:10px;background:linear-gradient(160deg,#121713,#090b0a);overflow:hidden}
.phone .viewfinder canvas{position:absolute;inset:8% 4%;width:92%;height:84%}
.phone .corner{position:absolute;width:22px;height:22px;border-color:var(--accent);border-style:solid;opacity:.9}
.phone .c1{left:10px;top:10px;border-width:2px 0 0 2px}.phone .c2{right:10px;top:10px;border-width:2px 2px 0 0}.phone .c3{left:10px;bottom:10px;border-width:0 0 2px 2px}.phone .c4{right:10px;bottom:10px;border-width:0 2px 2px 0}
.phone .scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);top:10%;animation:scan 2.6s var(--ease) infinite alternate}
@keyframes scan{to{top:88%}}
.phone .sheet{margin:10px 12px 14px;padding:12px;border-radius:10px;border:1px solid var(--rule);font-size:11px;color:var(--text-2);line-height:1.5}
.phone .sheet strong{display:block;color:var(--text);font-weight:500;font-size:12px;margin-bottom:4px}
.link-line{flex:0 0 80px;height:1px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);opacity:.7;animation:dash 1.2s linear infinite;background-size:12px 1px}
@keyframes dash{to{background-position:12px 0}}
.desk{width:min(360px,52%);border:1px solid var(--rule-strong);border-radius:10px;background:#0b0e0c;overflow:hidden}
.desk .titlebar{height:28px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:6px;padding:0 10px}
.desk .titlebar i{width:8px;height:8px;border-radius:999px;background:var(--rule-strong)}
.qr{display:grid;grid-template-columns:repeat(21,1fr);gap:1px;width:140px;margin:22px auto 10px;padding:8px;background:#f3f1ec;border-radius:6px}
.qr span{aspect-ratio:1;background:#070908}
.qr span.o{background:transparent}
.desk p{text-align:center;font-size:12px;color:var(--text-3);margin:0 0 18px}

/* agents terminal */
.term{width:100%;border:1px solid var(--rule-strong);border-radius:10px;background:var(--surface-raised);overflow:hidden;font-family:var(--mono);font-size:13px}
.term .tabs{display:flex;border-bottom:1px solid var(--rule);overflow-x:auto}
.term .tabs button{height:40px;padding:0 16px;border:0;background:transparent;font-family:Inter,sans-serif;font-size:13px;color:var(--text-3);cursor:pointer;border-bottom:1px solid transparent;white-space:nowrap}
.term .tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}
.term pre{margin:0;padding:20px;line-height:1.8;white-space:pre-wrap;color:var(--text-2);min-height:280px}
.term .p{color:var(--accent-text)}
.term .ok{color:var(--info)}
.term .dim{color:var(--text-3)}

/* identify */
.identify{width:100%}
.channels{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:20px}
.channels button{aspect-ratio:1;border-radius:6px;border:1px solid var(--rule);background:#0b0e0c;cursor:pointer;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;transition:box-shadow .12s,background .12s}
.channels button.lit{background:var(--c);color:#000;box-shadow:0 0 24px var(--c)}

/* effects data */
.scene-json{margin:0;padding:20px;border:1px solid var(--rule);border-radius:10px;background:var(--surface-raised);font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--text-2);white-space:pre-wrap;width:100%;max-height:70vh;overflow:auto}
.layers{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 0}

/* safety */
.governor-demo{width:100%;display:grid;gap:16px}
.meter{display:flex;align-items:end;gap:6px;height:120px;padding:16px;border:1px solid var(--rule);border-radius:10px}
.meter i{flex:1;background:var(--rule-strong);border-radius:2px;transition:height .12s,background .12s;height:8%}
.meter i.hit{background:var(--warn)}
.governor-demo .readout{display:flex;justify-content:space-between;font-size:13px;color:var(--text-2)}

/* editorial rows */
.rows{margin-top:56px}
.row-item{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:28px 0;border-top:1px solid var(--rule);align-items:baseline}
.row-item .num{font-size:12px;color:var(--accent-text);font-variant-numeric:tabular-nums}
.row-item p{margin:0}

/* parts marquee */
.parts{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}
.parts span{height:32px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--rule);border-radius:6px;font-size:13px;color:var(--text-2)}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:min(560px,82vw);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;margin-top:48px;scrollbar-width:thin}
.gallery .shot{scroll-snap-align:start}

/* pricing */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:56px;border-top:1px solid var(--rule)}
.plan{padding:40px 40px 40px 0}
.plan+.plan{padding:40px 0 40px 40px;border-left:1px solid var(--rule)}
.plan .amount{font-size:clamp(56px,6vw,88px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.plan .amount small{font-size:16px;letter-spacing:0;color:var(--text-3);margin-left:8px}
.plan ul{list-style:none;padding:0;margin:28px 0 32px}
.plan li{padding:12px 0;border-top:1px solid var(--rule);color:var(--text-2);font-size:15px}
.plan li b{font-weight:500;color:var(--text)}

/* downloads */
.downloads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:6vw;align-items:start}
.dl-panel{border:1px solid var(--rule-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.dl-panel .seg{margin:16px}
.dl-group{padding:20px;border-top:1px solid var(--rule)}
.dl-group h3{font-size:16px;font-weight:500;margin-bottom:4px}
.dl-group .meta{font-size:12px;color:var(--text-3);margin:0 0 16px;font-variant-numeric:tabular-nums;word-break:break-all}
.dl-group .btns{display:flex;flex-wrap:wrap;gap:8px}

/* faq */
.faq details{border-top:1px solid var(--rule);padding:22px 0}
.faq summary{cursor:pointer;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--text-3)}
.faq details[open] summary::after{content:"–"}
.faq details p{max-width:720px;margin-top:14px}

.site-footer{border-top:1px solid var(--rule);padding:40px 4.5vw;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.site-footer p{font-size:12px;max-width:360px;color:var(--text-3)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:24px;font-size:13px;color:var(--text-2)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:104px;gap:24px}
  .hero .stage{order:-1;margin:0 -2vw}
  .story{grid-template-columns:1fr}
  .story-visual{position:relative;top:auto;height:auto;min-height:0;display:block}
  .story-visual{display:none}
  .chapter .panel{position:relative;opacity:1;transform:none;display:flex;padding:32px 0 0;pointer-events:auto}
  .story-copy .chapter{min-height:0;opacity:1;padding:56px 0 8px}
  .pricing,.downloads{grid-template-columns:1fr}
  .plan,.plan+.plan{padding:40px 0;border-left:0}
  .plan+.plan{border-top:1px solid var(--rule)}
  .row-item{grid-template-columns:48px 1fr}
  .row-item p{grid-column:2}
  .pad{padding:96px 0}
}
@media(max-width:640px){
  .site-header nav .desktop-only{display:none}
  .site-header nav{gap:16px}
  .console .row{flex-wrap:wrap}
  .console .row .btn{width:100%}
  .pair{gap:16px}.link-line{flex-basis:24px}
  .channels{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}
/* gallery: one row of real screenshots at a shared height, desktop and phone side by side */
.gallery{grid-auto-columns:max-content}
.gallery .shot{width:max-content;max-width:86vw}
.gallery .shot img{height:min(440px,58vh);width:auto;max-width:86vw;object-fit:contain}
.gallery .shot figcaption{width:0;min-width:100%}