/* Birger Reflex pages (How it works, Reflexr examples, Company, Ravun, docs, studio, account, the vision demos) in the Birger.ai look.
   assets/brand.css, imported first, gives the charcoal palette, the fonts, the white banner and the footer; this file adds
   the page parts on top. The older colour names (--chalk, --slate, ...) stay, as aliases on the brand's scale, because the
   generated demo pages use them. The interface is grey and white; colour is kept for meaning in data:
   signal = what a model does, ember = you / your action, violet = API-paced models in comparisons. */
@import url("/assets/brand.css");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600&family=Tomorrow:wght@300;400;500;600&display=swap");
:root{color-scheme:dark;
  --void:var(--ink);--carbon:var(--panel);--graphite:var(--line);--line2:var(--edge);
  --chalk:var(--hi);--mist:var(--text);--slate:var(--mute);--dust:var(--dim);
  --signal:#5ac8fa;--signal2:#9adcfc;--signal-dim:rgba(90,200,250,.10);--ember:#f5a524;--ember-dim:rgba(245,165,36,.10);
  --violet:#9b87f5;--bad:#f2555a;
  --h:var(--display);--b:var(--ui);--m:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:16px;--gut:clamp(1rem,4vw,1.5rem);--max:1000px}   /* the banner's width, so pages line up under it */
[hidden]{display:none!important}
body{line-height:1.6}
/* links inside running text; links with a class are buttons, tiles or tabs and style themselves */
:is(p,li,dd,td,summary,label) a:not([class]){color:var(--hi);border-bottom:1px solid var(--edge);transition:border-color .15s}
:is(p,li,dd,td,summary,label) a:not([class]):hover{border-color:var(--hi)}
h1,h2,h3,h4{margin:0;color:var(--hi);text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.005em}
h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.04}
h2{font-size:clamp(1.4rem,2.6vw,1.95rem);line-height:1.12}
h3,h4{font-family:var(--ui);font-size:1.02rem;font-weight:600;line-height:1.3}
p{margin:0;max-width:68ch}
code,kbd,pre{font-family:var(--m)}code{font-size:.86em;color:var(--hi)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
main{flex:1;display:flex;flex-direction:column;gap:clamp(3rem,7vw,5.5rem);padding-block:clamp(2rem,5vw,3.5rem) 5rem}
.eyebrow{font:500 .74rem var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.lede{font-size:clamp(1.04rem,1.7vw,1.18rem);color:var(--text);line-height:1.55}
.small{font-size:.86rem;color:var(--mute)}
.num{font-family:var(--m);font-variant-numeric:tabular-nums}
.sig{color:var(--signal)}.emb{color:var(--ember)}.vio{color:var(--violet)}
section.block{display:flex;flex-direction:column;gap:1.4rem}
.row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- buttons, inputs: the home page's pills (filled white, or outlined) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:500 15px var(--ui);letter-spacing:.03em;border-radius:999px;padding:.58rem 1.5rem;border:1px solid var(--hi);cursor:pointer;color:var(--ink);background:var(--hi);transition:background .15s,border-color .15s,color .15s}
.btn:not(:disabled):hover{background:transparent;color:var(--hi)}
.btn.ghost{background:transparent;color:var(--hi);border-color:var(--edge)}.btn.ghost:not(:disabled):hover{border-color:var(--hi)}
.btn.sm{padding:.36rem 1rem;font-size:13.5px}
.btn:disabled{opacity:.4;cursor:default}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{font:400 15px var(--ui);color:var(--hi);background:var(--ink);border:1px solid var(--edge);border-radius:999px;padding:.55rem 1rem;min-width:0}
textarea{border-radius:12px}
::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus{border-color:var(--hi);outline:none}
input[type=range]{accent-color:var(--hi)}
label.f{display:flex;flex-direction:column;gap:.35rem;font-size:.84rem;color:var(--mute);min-width:0}

/* ---------- surfaces */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1rem,2.4vw,1.6rem);min-width:0}
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.stat b{display:block;font:400 clamp(1.6rem,3.2vw,2.3rem)/1.05 var(--display);color:var(--hi);font-variant-numeric:tabular-nums}
.stat span{font-size:.86rem;color:var(--mute)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:.92rem}
th,td{padding:.6rem .85rem;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
th{font:500 .72rem var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:var(--ink)}
tr:last-child td{border-bottom:0}td.r{color:var(--hi);font-weight:600}
pre.code{margin:0;background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;overflow-x:auto;font-size:.84rem;line-height:1.65;color:var(--text)}
pre.code .c{color:var(--dim)}pre.code .k{color:var(--hi)}pre.code .s{color:var(--mute)}
.tabs{display:flex;gap:.3rem;flex-wrap:wrap}.tabs button{font:500 .84rem var(--ui);color:var(--mute);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;cursor:pointer}
.tabs button:hover{color:var(--hi);border-color:var(--edge)}
.tabs button[aria-selected="true"]{color:var(--ink);background:var(--hi);border-color:var(--hi)}
.tag{display:inline-flex;align-items:center;gap:.35rem;font:500 .7rem var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--edge);color:var(--text)}
.tag.sig{border-color:rgba(90,200,250,.35);color:var(--signal)}.tag.emb{border-color:rgba(245,165,36,.35);color:var(--ember)}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--hi);color:var(--ink);font:500 .9rem var(--ui);padding:.6rem 1.3rem;border-radius:999px;z-index:50;box-shadow:0 10px 40px var(--shade)}

/* ---------- the head of How it works, the Reflexr examples and the demo pages (main.page): a title, a line, the content close under it */
main.page{gap:clamp(2.6rem,6vw,4.5rem);padding-top:clamp(1.4rem,3.5vw,2.4rem)}
.page .head{display:flex;flex-direction:column;gap:.6rem}
.page .head h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.page .head .lede{font-size:clamp(1rem,1.5vw,1.1rem)}
/* the Join waitlist band near the end of those pages */
.cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}

/* ---------- latency ruler (signature element) */
.ruler{position:relative;padding:4.6rem 0 1.6rem;user-select:none;overflow:hidden}
.ruler .track{position:relative;height:2px;background:linear-gradient(90deg,var(--signal),var(--edge) 45%,var(--edge) 70%,var(--violet))}
.ruler .tick{position:absolute;top:-6px;width:1px;height:14px;background:var(--edge)}
.ruler .tl{position:absolute;top:14px;transform:translateX(-50%);font:500 .7rem var(--m);color:var(--dim);white-space:nowrap}
.ruler .mark{position:absolute;bottom:10px;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.ruler .mark b{font:500 .74rem var(--ui);white-space:nowrap;padding:.2rem .6rem;border-radius:999px;background:var(--ink);border:1px solid var(--edge)}
.ruler .mark i{width:9px;height:9px;border-radius:50%;margin-bottom:-14px}
.ruler .mark.sig b{color:var(--signal);border-color:rgba(90,200,250,.4)}.ruler .mark.sig i{background:var(--signal)}
.ruler .mark.emb b{color:var(--ember);border-color:rgba(245,165,36,.4)}.ruler .mark.emb i{background:var(--ember)}
.ruler .mark.vio b{color:var(--violet);border-color:rgba(155,135,245,.45)}.ruler .mark.vio i{background:var(--violet)}
.ruler .lane{position:absolute;top:-3px;height:8px;pointer-events:none;animation:ruler-pulse 4.2s linear infinite}   /* its width: first mark to last */
.ruler .pulse{position:absolute;left:-4px;top:0;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px 1px rgba(90,200,250,.5)}
.ruler.away .lane{animation-play-state:paused}
@keyframes ruler-pulse{0%{transform:translateX(0);opacity:.9}95%{transform:translateX(95%);opacity:.9}100%{transform:translateX(100%);opacity:0}}
@media (max-width:600px){.ruler .tl:nth-child(4n){display:none}.ruler .mark b{font-size:.66rem}}

/* ---------- live demo tiles (the Reflexr examples, the How it works page): a demo running live on top (assets/live.js), a line and its numbers under it */
/* lit from above and lifted off the page (How it works' cards use the same surface: .lift); pointing at a tile raises it
   further and brings its demo closer */
.tile,.lift{border-radius:var(--r);border:1px solid var(--edge);
  background:linear-gradient(180deg,color-mix(in srgb,var(--hi) 5%,var(--panel)),var(--panel) 60%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--hi) 9%,transparent),0 14px 34px var(--shade-soft),0 2px 6px var(--shade)}
.tile{display:flex;flex-direction:column;overflow:hidden;color:var(--text);min-width:0;
  transition:transform .25s cubic-bezier(.22,.7,.2,1),border-color .2s,box-shadow .25s}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);border-color:var(--mute);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--hi) 14%,transparent),0 24px 50px var(--shade),0 0 0 1px color-mix(in srgb,var(--hi) 10%,transparent)}
.live{position:relative;aspect-ratio:5/4;background:var(--frame);overflow:hidden;border-bottom:1px solid var(--edge)}
.live iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.22,.7,.2,1)}
.tile:is(:hover,:focus-visible) .live iframe{transform:scale(1.04)}
.live .ready{opacity:1}
.live canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.live .on{position:absolute;right:.7rem;top:.7rem;z-index:2;display:flex;align-items:center;gap:.4rem;font:500 .66rem var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--hi);
  background:color-mix(in srgb,var(--ink) 80%,transparent);border-radius:999px;padding:.2rem .6rem .2rem .5rem;opacity:0;transition:opacity .3s}
.live .on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bad);animation:beat 1.6s ease-in-out infinite}
.live:has(.ready) .on{opacity:1}
@keyframes beat{50%{opacity:.3}}
.tile .body{flex:1;display:flex;flex-direction:column;gap:.45rem;padding:.9rem 1rem 1rem}
.tile .top{display:flex;align-items:center;gap:.5rem}
.tile h3{font-size:1.1rem}
.tile .top::after{content:"→";margin-left:auto;font:400 1.1rem/1 var(--ui);color:var(--mute);transition:transform .25s,color .2s}
.tile:is(:hover,:focus-visible) .top::after{color:var(--hi);transform:translateX(4px)}
.tile p{font-size:.9rem;color:var(--mute)}
.tile .stats{display:flex;gap:1.3rem;flex-wrap:wrap;margin-top:auto;padding-top:.4rem}
.tile .stats b{display:block;font:400 1.5rem/1.1 var(--display);color:var(--hi);font-variant-numeric:tabular-nums}
.tile .stats span{font-size:.74rem;color:var(--mute)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}