/* Alkemi: tokens + shared components (from the approved mockups). */
/* Alkemi site tokens. Same values as .preview/alkemi-v2.html (appendix A section 5). */
:root{
  --ground:#0a0a0f;--panel:#0d1020;--rule:#1c2136;--rule-lit:#2a3148;
  --muted:#8892a0;--soft:#b9c0ca;--text:#e5e7eb;--white:#fff;
  --signal:#0eb7f7;--signal-dim:rgba(14,183,247,.12);--warn:#e2b34d;
  --bull:#22c98a;--bear:#f0525a;--bear-text:#ff8a90;
  --bull-dim:rgba(34,201,138,.24);--bear-dim:rgba(240,82,90,.22);--neut-dim:rgba(136,146,160,.20);
  --bull-line:rgba(34,201,138,.5);--bear-line:rgba(240,82,90,.5);--neut-line:rgba(136,146,160,.4);
  --chip:#151a26;--hbg:rgba(255,255,255,.022);
  --sans:'Hanken Grotesk',system-ui,sans-serif;--serif:'EB Garamond',Georgia,serif;--mono:'DM Mono',ui-monospace,monospace;
  color-scheme:dark;
}
html.light{
  --ground:#e8ebf0;--panel:#f5f6f9;--rule:#d5dae2;--rule-lit:#bac2ce;
  --muted:#4f5a6b;--soft:#262e3d;--text:#0e1422;--white:#060910;
  --signal:#0467a3;--signal-dim:rgba(14,183,247,.14);--warn:#865c05;
  --bull:#08744c;--bear:#c42a35;--bear-text:#bd2832;
  --bull-dim:rgba(34,201,138,.16);--bear-dim:rgba(240,82,90,.14);--neut-dim:rgba(79,90,107,.12);
  --bull-line:rgba(21,162,111,.5);--bear-line:rgba(228,70,78,.5);--neut-line:rgba(79,90,107,.35);
  --chip:#e2e6ed;--hbg:rgba(14,20,34,.045);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ground);color:var(--text)}
body{font:400 13.5px/1.5 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;min-height:100vh}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer;text-align:left}
:focus-visible{outline:1px solid var(--signal);outline-offset:2px}
.lab{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.mono{font-family:var(--mono)}
.bull{color:var(--bull)}.bear{color:var(--bear-text)}.neut{color:var(--muted)}
.chip{display:inline-block;font-size:11.5px;padding:4px 10px;border:1px solid var(--rule);border-radius:0;color:var(--soft)}
.chip.on{color:var(--white);border-color:var(--signal)}
.cta{color:var(--signal);border-bottom:1px solid var(--signal);padding-bottom:1px}
.cta:hover{color:var(--white);border-color:var(--white)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--signal);color:var(--white);font-weight:500;border-radius:0}
.btn:hover{background:var(--signal-dim)}
.btn.ghost{border-color:var(--rule-lit);color:var(--soft)}
/* confidence ticks: ten cells, filled to conf/10. A count, not a chart. */
.tk{display:inline-flex;gap:2px;align-items:center}
.tk i{display:block;width:4px;height:9px;background:var(--rule-lit)}
.tk i.f{background:currentColor}
.tk b{font:500 13px var(--mono);margin-left:8px;color:var(--white)}
.hair{border-top:1px solid var(--rule)}

.lg{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--chip);border:1px solid var(--rule-lit);font:500 8.5px var(--mono);align-items:center;justify-content:center;color:var(--soft);flex:none;letter-spacing:.04em}
.wm{font:500 19px var(--serif);color:var(--white);letter-spacing:.01em}
.wm small{display:block;font:500 9px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.disc{font-size:11.5px;color:var(--muted);line-height:1.5}
.foot{border-top:1px solid var(--rule);padding:22px 0;display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;color:var(--muted);font-size:11.5px}
.foot nav a{margin-right:18px}
/* waitlist form */
.wl{display:grid;gap:10px}
.wl .row{display:flex;gap:8px;flex-wrap:wrap}
.wl input[type=email]{flex:1 1 220px;min-width:0;padding:10px 12px;border:1px solid var(--rule-lit);background:var(--panel);color:var(--text);font:400 13.5px var(--sans)}
.wl input[type=email]:focus{border-color:var(--signal);outline:none}
.wl label.ck{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--soft);line-height:1.4}
.wl label.ck input{margin-top:3px;accent-color:var(--signal)}
.wl .ts{height:62px;width:300px;max-width:100%;border:1px dashed var(--rule-lit);display:flex;align-items:center;justify-content:center;font:400 10px var(--mono);color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.wl .btn{justify-content:center}
.wl .msg{font-size:12px;color:var(--soft)}
.wl .msg.ok{color:var(--bull)}.wl .msg.bad{color:var(--bear-text)}
/* read card (shared by landing heroes and hub desk) */
.rc{border:1px solid var(--rule);border-left:2px solid var(--rule);background:var(--panel);padding:14px 16px 12px;display:grid;gap:9px;min-width:0}
.rc.bull{border-left-color:var(--bull)}.rc.bear{border-left-color:var(--bear)}
.rc .hd{display:flex;align-items:center;gap:9px}
.rc .hd .nm{font:400 17px var(--serif);color:var(--white);flex:1}
.rc .hd .cf{font:500 15px var(--mono)}
.rc .bar{height:2px;background:var(--rule);position:relative}.rc .bar i{position:absolute;left:0;top:0;height:2px;background:currentColor}
.rc p{font-size:13px;color:var(--soft);line-height:1.5}
.rc .ft{display:flex;justify-content:space-between;font:400 10.5px var(--mono);color:var(--muted);letter-spacing:.06em}
.rc .ft .st{font:500 10px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.old{color:var(--warn)}
.gl{border-bottom:1px dotted var(--signal);position:relative;cursor:help}
.gp{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:300px;max-width:80vw;background:var(--panel);border:1px solid var(--rule-lit);padding:10px 12px;font:400 12.5px/1.45 var(--sans);color:var(--soft);text-align:left;white-space:normal}
.gp b{display:block;font:400 15px var(--serif);color:var(--white);margin-bottom:2px}.gp em{display:block;font-style:normal;color:var(--text);margin-top:6px}
.gl:focus .gp{display:block}
@media (hover:hover){.gl:hover .gp{display:block}}
.tc{border-top:1px solid var(--rule-lit);padding-top:12px;display:grid;gap:6px;align-content:start}
.tc b{font:400 21px var(--serif);color:var(--white)}.tc p{font-size:13px;color:var(--soft);line-height:1.5}
.tc .oc{color:var(--text)}.tc .oc .lab{display:block;margin-bottom:2px;color:var(--signal)}
/* tone strip: the note's four scores */
.tone4{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tone4>div{padding:12px 22px 12px 0;margin-right:22px;border-right:1px solid var(--rule)}.tone4>div:last-child{border-right:0}
.tone4 dt{font:500 10px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}.tone4 dd{font:400 20px var(--serif);color:var(--white)}
.tone4 dd small{display:block;font:400 10.5px var(--sans);color:var(--muted)}
@media(max-width:600px){.tone4{display:grid;grid-template-columns:1fr 1fr}.tone4>div{margin:0;padding:12px 0 12px 14px;border-right:0;border-bottom:1px solid var(--rule)}.tone4>div:nth-child(odd){padding-left:0;border-right:1px solid var(--rule)}.tone4>div:nth-last-child(-n+2){border-bottom:0}}
/* desk rows with confidence ticks */
.rr{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.rr .nm{font:400 16px var(--serif);color:var(--white)}.rr .st{font:500 10px var(--sans);letter-spacing:.16em;text-transform:uppercase}
@media(max-width:420px){.rr{grid-template-columns:22px 1fr auto}.rr .st{display:none}}


/* ---- site-wide additions (beyond the mockups) ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:72px}
body{overflow-x:hidden}
img,svg{max-width:100%}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--panel);border:1px solid var(--signal);padding:8px 12px;color:var(--white)}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gp.fix{position:fixed;left:8px;top:8px}
.wl input[type=email]{font-size:16px}               /* below 16px iOS zooms the page on focus */
.wl .ts:empty{display:none}
.wl .ts{height:auto;width:auto;border:0;display:block}
.wl .btn[disabled]{opacity:.55;cursor:default}
.msg{min-height:1.4em}
button.chip{cursor:pointer}
.loading{padding:60px 0;color:var(--muted);font:400 12px var(--mono)}
.err-box{border:1px solid var(--rule-lit);padding:18px;max-width:520px}
.err-box b{font:400 20px var(--serif);color:var(--white);display:block;margin-bottom:6px}
dialog{border:1px solid var(--rule-lit);background:var(--panel);color:var(--text);padding:0;max-width:min(560px,calc(100vw - 24px));width:100%}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dlg{padding:22px 22px 18px;display:grid;gap:12px}
.dlg-x{position:absolute;right:10px;top:8px;width:36px;height:36px;display:grid;place-items:center;color:var(--muted);font-size:20px}
.dlg-x:hover{color:var(--white)}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media (hover:none){.gl{border-bottom-style:solid}}
.gl:focus:not(:hover) .gp,.q:focus:not(:hover) .gp{cursor:pointer}

/* ---- motion: quiet hover feedback, mouse devices only; reduced-motion users get none (rule above) ---- */
:root{--t1:.14s;--t2:.24s;--ease:cubic-bezier(.2,.7,.2,1)}
.btn,.chip,.cta,.rc,.tc,.gl,.q,.lg,a{transition:color var(--t1) var(--ease),background-color var(--t2) var(--ease),border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease),transform var(--t2) var(--ease)}
.cta{border-bottom-color:transparent;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;transition:background-size var(--t2) var(--ease),color var(--t1)}
.btn:active,.chip:active{transform:translateY(0) scale(.98)}
@media (hover:hover){
  .btn:hover{background:var(--signal-dim);transform:translateY(-1px);box-shadow:0 6px 18px -10px var(--signal)}
  .btn.ghost:hover{border-color:var(--soft);color:var(--white)}
  .cta:hover{color:var(--white);background-size:0 1px;background-position:100% 100%}
  .chip:hover{border-color:var(--rule-lit);color:var(--white)}
  .rc:hover{border-color:var(--rule-lit);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(0,0,0,.9)}
  .rc.bull:hover{border-left-color:var(--bull)}.rc.bear:hover{border-left-color:var(--bear)}
  .rc:hover .lg{border-color:var(--signal);color:var(--white)}
  .tc:hover{border-top-color:var(--signal)}
  .tc:hover b{color:var(--signal)}
  .gl:hover{color:var(--white);border-bottom-color:var(--white)}
  .rr{transition:background-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
  .rr:hover{background:var(--hbg);box-shadow:inset 2px 0 0 var(--signal)}
  .foot a:hover{color:var(--white)}
}
/* first paint: content rises in once, nothing loops */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rise{animation:rise .5s var(--ease) both}
.rise.d1{animation-delay:.06s}.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.18s}.rise.d4{animation-delay:.26s}
.rc .bar i,.fl-b i{transform-origin:left;animation:grow .7s var(--ease) both .2s}
.fl-b i.dn{transform-origin:right}
dialog[open]{animation:rise .22s var(--ease)}
dialog.drawer[open]{animation:slidein .28s var(--ease)}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
dialog::backdrop{animation:fade .22s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* entrance plays once per visit; later re-renders (filters, data refresh) stay still */
.settled .rise,.settled .rc .bar i,.settled .fl-b i{animation:none}

/* brand mark + flags (ported from the preview) */
:root{--keyline:rgba(255,255,255,.14);--keyline2:rgba(255,255,255,.16);--csh:0 1px 2px rgba(0,0,0,.45)}
html.light{--keyline:rgba(14,20,34,.14);--keyline2:rgba(14,20,34,.16);--csh:0 1px 2px rgba(14,20,34,.08),0 4px 14px -8px rgba(14,20,34,.18)}
.brand{display:inline-flex;align-items:center;gap:10px}.brand .em{width:28px;height:28px;flex:none;display:block}
.mnav .brand .em{width:22px;height:22px}.app.mini .side .brand span{display:none}
.ilogo{--lsz:22px;width:var(--lsz);height:var(--lsz);border-radius:50%;position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:-5px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--keyline),var(--csh)}
.ilogo .fh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--lsz)*1.5);line-height:1}
.ilogo .fh b{display:block;line-height:1;font-weight:400}
.ilogo .fh.em{font-size:calc(var(--lsz)*.82)}
.ilogo.pr2{background:none;box-shadow:none;overflow:visible;width:calc(var(--lsz)*1.3)}
.ilogo .fc{position:absolute;width:calc(var(--lsz)*.74);height:calc(var(--lsz)*.74);top:50%;transform:translateY(-50%);border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--chip);box-shadow:inset 0 0 0 1px var(--keyline)}
.ilogo .c1{left:0;z-index:2;box-shadow:inset 0 0 0 1px var(--keyline),0 0 0 max(1px,calc(var(--lsz)*.075)) var(--panel)}
.ilogo .c2{right:0;z-index:1}
.ilogo .tx{font:600 calc(var(--lsz)*.64)/1 var(--sans)}
.ilogo .fimg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.96)}
.ilogo:not(.pr2)::after,.ilogo .fc::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--keyline2);pointer-events:none}
.ilogo svg{width:62%;height:62%;fill:#fff;opacity:.95}
.ilogo.sm{--lsz:15px;vertical-align:-3px;margin-right:6px}
.ilogo.lg{--lsz:28px}
@media (hover:hover){.rc:hover .ilogo,.ix:hover .ilogo,.rr:hover .ilogo{transform:scale(1.08)}}
.ilogo{transition:transform var(--t2,.24s) var(--ease,ease)}