/* Ask Hippo site v2. Tokens follow Hippo Terminal DESIGN.md v1.8 (Dark Glass / Light Glass). Light is a token swap only. */
:root,[data-theme="dark"]{
  --bg:#0E1014;--panel:#14161C;--card:#1A1D24;--card2:#232733;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --hi:#E9EBF0;--mid:#B8BDC9;--dim:#9AA0AC;--faint:#8C92A0;
  --amber:#F2994A;--amber-text:#F2994A;--amber-wash:rgba(242,153,74,.12);--amber-line:rgba(242,153,74,.42);
  --up:#2EC48D;--down:#FF8585;--on-amber:#0E1014;
  --shadow:0 30px 80px rgba(0,0,0,.55);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#E9ECF1;--panel:#F7F8FA;--card:#FFFFFF;--card2:#F0F2F6;
  --line:rgba(14,18,26,.10);--line2:rgba(14,18,26,.18);
  --hi:rgba(14,18,26,.92);--mid:rgba(14,18,26,.68);--dim:rgba(14,18,26,.62);--faint:rgba(14,18,26,.58);
  --amber:#F2994A;--amber-text:#9C520F;--amber-wash:rgba(242,153,74,.14);--amber-line:rgba(242,153,74,.55);
  --up:#0E7F5A;--down:#B83A32;--on-amber:#0E1014;
  --shadow:0 30px 70px rgba(14,18,26,.18);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--hi);font:16px/1.6 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .2s ease-out,color .2s ease-out}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.disp{font-family:'Outfit',system-ui,sans-serif;letter-spacing:-.02em}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font:500 11px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.eyebrow.a{color:var(--amber-text)}
.amb{color:var(--amber-text)}
.d{color:var(--amber)}
h1,h2,h3{margin:0;font-family:'Outfit',system-ui,sans-serif;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(32px,4.2vw,48px);font-weight:700}
h3{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
p{margin:0}
.lead{font-size:19px;line-height:1.6;color:var(--mid);max-width:680px}
.body{color:var(--mid)}
.cap{font-size:13px;color:var(--dim);line-height:1.5}
section{padding:112px 0}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:780px;margin-bottom:48px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:12px;font:600 15px/1 'Outfit',system-ui,sans-serif;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .15s ease-out,border-color .15s ease-out,transform .15s ease-out;white-space:nowrap}
.btn-p{background:var(--amber);color:var(--on-amber)}
.btn-p:hover{background:#F0A564}
.btn-s{background:transparent;color:var(--hi);border-color:var(--line2)}
.btn-s:hover{border-color:var(--amber-line);background:var(--amber-wash)}
.btn-lg{min-height:52px;padding:0 24px;font-size:16px}
.arr{transition:transform .15s ease-out}
.btn:hover .arr{transform:translateX(3px)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 19px 'Outfit',system-ui,sans-serif;color:var(--hi);letter-spacing:-.01em}
.logo img{width:32px;height:32px;border-radius:8px}
.navlinks{display:flex;gap:28px;font-size:14.5px}
.navlinks a{text-decoration:none;color:var(--mid)}
.navlinks a:hover{color:var(--hi)}
.navr{display:flex;align-items:center;gap:10px}
.navr .btn{min-height:40px;padding:0 16px;font-size:14px}
.tgl{width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:var(--mid);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tgl:hover{color:var(--hi);border-color:var(--amber-line)}
.tgl svg{width:18px;height:18px}
[data-theme="dark"] .i-moon,[data-theme="light"] .i-sun{display:none}

/* hero */
.hero{padding:88px 0 40px;position:relative}
.hero::before{content:"";position:absolute;inset:-120px 0 auto;height:620px;background:radial-gradient(60% 60% at 50% 0%,var(--amber-wash),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.hero h1{font-size:clamp(42px,6.6vw,80px);font-weight:700;letter-spacing:-.035em;line-height:1.0;max-width:1000px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.trust-line{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font:500 11.5px/1.4 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.trust-line span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:8px;vertical-align:middle}

/* device frame */
.frame{border-radius:18px;border:1px solid var(--amber-line);box-shadow:0 0 0 4px var(--amber-wash),var(--shadow);overflow:hidden;background:var(--panel)}
.frame-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.tag{font:500 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:5px 9px;white-space:nowrap}
.themed{position:relative}
[data-theme="dark"] .themed .t-light,[data-theme="light"] .themed .t-dark{display:none}
.hero-shot{width:100%;max-width:1240px;margin:48px auto 0;padding:0 32px}
.hero-stage{position:relative;aspect-ratio:1600/1000}
.hero-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;transition:opacity .6s ease}
.hero-stage img.off{opacity:0}
.hero-steps{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.step-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:999px;padding:8px 14px;font-size:13.5px;color:var(--mid);background:transparent;cursor:pointer;font-family:inherit}
.step-pill b{font:600 11px 'IBM Plex Mono',monospace;color:var(--dim)}
.step-pill.on{border-color:var(--amber-line);background:var(--amber-wash);color:var(--hi)}
.step-pill.on b{color:var(--amber-text)}

/* two products */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.pcard.hl{border-color:var(--amber-line)}
.pcard .who{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard h3{font-size:28px}
.pcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--mid);font-size:15px}
.pcard li{display:flex;gap:10px;align-items:flex-start}
.pcard li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-top:9px}
.pcard .btn{align-self:flex-start;margin-top:auto}
.agent-strip{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 28px;color:var(--dim);font-size:14px;flex-wrap:wrap;text-align:center}

/* how */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.how li{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px}
ol.how{margin:0;padding:0}
.how .n{font:600 12px 'IBM Plex Mono',monospace;color:var(--amber-text);letter-spacing:.08em}
.how h3{font-size:20px}
.how p{font-size:14.5px;color:var(--mid)}

/* scenario player */
.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.player{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:center}
.scen-list{display:flex;flex-direction:column;gap:8px}
.scen{display:flex;flex-direction:column;gap:6px;text-align:left;background:transparent;border:1px solid transparent;border-radius:14px;padding:16px 18px;cursor:pointer;color:var(--mid);font-family:inherit;position:relative;overflow:hidden}
.scen:hover{background:var(--card)}
.scen.on{background:var(--card);border-color:var(--line2);color:var(--hi)}
.scen .q{font:500 14px/1.4 'IBM Plex Mono',monospace;color:inherit}
.scen .q::before{content:"\203A  ";color:var(--amber)}
.scen .w{font-size:14.5px;color:var(--dim);display:none}
.scen.on .w{display:block}
.scen .lbl{font:600 10px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:6px;border:1px solid currentColor;align-self:flex-start}
.lbl.r{color:#8FB4E8}.lbl.t{color:var(--amber-text)}.lbl.ac{color:#B89BE8}.lbl.c{color:#6CC4B8}
[data-theme="light"] .lbl.r{color:#2F5FA6}[data-theme="light"] .lbl.ac{color:#6B44B0}[data-theme="light"] .lbl.c{color:#16786C}
.scen .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--amber);width:0}
.scen.on .bar{animation:fill var(--dur,6s) linear forwards}
.paused .scen.on .bar{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.screen{position:relative;aspect-ratio:900/1151;max-height:720px;margin:0 auto;width:100%}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:18px;transition:opacity .45s ease,transform .45s ease}
.screen img.off{opacity:0;transform:translateY(10px)}
.screen-wrap{border-radius:20px;border:1px solid var(--amber-line);box-shadow:0 0 0 4px var(--amber-wash),var(--shadow);background:var(--panel);overflow:hidden}
.pctrl{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:12px}
.mini{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--mid);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:7px 12px;cursor:pointer}
.mini:hover{color:var(--hi);border-color:var(--amber-line)}

/* safety */
.safety{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.sbox{border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px;background:var(--card)}
.sbox h3{font-size:18px}
.sbox p{font-size:14.5px;color:var(--mid)}
.fine{margin-top:20px;font-size:13px;color:var(--dim);line-height:1.6;max-width:900px}

/* dock */
.dock-stage{border-radius:18px;overflow:hidden;border:1px solid var(--line2);box-shadow:var(--shadow);background:#fff}
.dock-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px;padding:0 16px;border-bottom:1px solid rgba(12,16,24,.09);background:#F7F8FA;color:#5E636C}
.dock-bar .tag{color:#5E636C;border-color:rgba(12,16,24,.16)}
.dock-bar .mini{color:#3A3F48;border-color:rgba(12,16,24,.16)}
.shotbox{position:relative;width:100%;aspect-ratio:1920/916;background:#fff}
#shotCap{font-size:18px;font-weight:700;text-align:center;max-width:760px;min-height:52px;margin:18px auto 0;text-wrap:balance}
#prompts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
#prompts button{font:500 13.5px 'Inter',sans-serif;color:var(--mid);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:8px 14px;cursor:pointer}
#prompts button[aria-pressed="true"],#prompts button.on{border-color:var(--amber-line);background:var(--amber-wash);color:var(--hi)}
.dock-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.journey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.jcol{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--card)}
.jcol.good{border-color:var(--amber-line)}
.jcol ol{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.jcol li{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:14.5px;color:var(--mid)}
.jcol li span{font:500 11px/1.9 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.jcol .out{color:var(--hi);font-weight:600}
.jcol .bad{color:var(--down)}
.jcol .ok{color:var(--up)}

/* trust */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.trust div{background:var(--card);padding:24px;display:flex;flex-direction:column;gap:8px}
.trust h3{font-size:17px}
.trust p{font-size:14px;color:var(--mid)}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.post{border:1px solid var(--line);border-radius:16px;padding:24px;text-decoration:none;display:flex;flex-direction:column;gap:12px;background:var(--card);transition:border-color .15s ease-out}
.post:hover{border-color:var(--amber-line)}
.post h3{font-size:19px}
.post p{font-size:14.5px;color:var(--mid)}
.post .more{margin-top:auto;font-size:14px;color:var(--amber-text);font-weight:600}

/* contact */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:56px;align-items:center}
.weeks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.weeks div{border-top:1px solid var(--line2);padding-top:12px;font-size:14.5px}
.weeks span{display:block;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--dim);margin-bottom:6px}
.formcard{background:var(--card);border:1px solid var(--amber-line);border-radius:18px;padding:32px;box-shadow:0 0 0 4px var(--amber-wash),var(--shadow)}
form{display:flex;flex-direction:column;gap:16px}
.fld{display:flex;flex-direction:column;gap:7px}
.lblf{font-size:13.5px;font-weight:600;color:var(--hi)}
.lblf i{font-style:normal;font-weight:400;color:var(--dim)}
.inp{width:100%;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);color:var(--hi);font:15px 'Inter',sans-serif}
.inp:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
textarea.inp{padding:12px 14px;min-height:104px;resize:vertical;line-height:1.5}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.err{font-size:13px;color:var(--down);display:none}
.done{display:none;flex-direction:column;gap:12px}
.tick{width:44px;height:44px;border-radius:50%;background:var(--amber-wash);color:var(--amber-text);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px}

/* footer */
footer{border-top:1px solid var(--line);padding:36px 0 44px}
footer .wrap{display:flex;flex-direction:column;gap:20px}
.frow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.flinks{display:flex;gap:22px;font-size:14px}
.flinks a{text-decoration:none;color:var(--mid)}
.flinks a:hover{color:var(--hi)}
.disc{font-size:13px;color:var(--dim);max-width:900px;line-height:1.6}

/* entrance motion: 0.32 s, opacity and a 10 px rise, nothing else */
.rv{opacity:0;transform:translateY(10px);transition:opacity .32s ease,transform .32s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

/* responsive */
@media (max-width:1020px){
  .navlinks{display:none}
  .player,.contact .wrap{grid-template-columns:minmax(0,1fr)}
  .screen{max-width:520px}
  .how,.trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posts,.safety,.dock-points{grid-template-columns:1fr}
}
@media (max-width:720px){
  .wrap,.hero-shot{padding:0 16px}
  section{padding:72px 0}
  .hero{padding:56px 0 24px}
  .lead{font-size:17px}
  .duo,.how,.trust,.journey,.two{grid-template-columns:1fr}
  .navr .hide-sm{display:none}
  .frame-bar .tag{display:none}
  .pcard{padding:24px}
  .jcol li{grid-template-columns:1fr;gap:2px}
  .weeks{grid-template-columns:1fr}
  .formcard{padding:22px}
  .hero-stage{aspect-ratio:820/1000}
  .hero-stage img{object-position:right top}
  .scen-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .scen{flex:0 0 82%;scroll-snap-align:start;border-color:var(--line)}
  .scen .w{display:block}
}