/* quidex.app only; everything shared is in house.css (built by tools/build_site.py). */

/* ---------- the illustrated app screens (.mock): invented content, always the app's dark palette ---------- */
.mock{--f-bg:#141518;--f-raise:#1B1D21;--f-panel:#1F2126;--f-panel2:#24262C;--f-line:#2E3138;--f-line-soft:#282B31;--f-track:#2A2D33;
  --f-ink:#EDEEF0;--f-ink2:#A9AEB6;--f-ink3:#858B95;--f-gold:#FFC72C;--f-ok:#3FB950;--f-bad:#F85149;--f-info:#6AA8FF;
  --fk-document:#9C8CE0;--fk-image:#46BFC0;--fk-media:#DE7FB4;--fk-web:#57B8DE;--fk-archive:#C09062;--fk-executable:#8A93A8;--fk-other:#767C86;
  position:relative;background:var(--f-bg);border:1px solid var(--f-line);border-radius:var(--r3);box-shadow:var(--shadow);overflow:hidden;
  color:var(--f-ink);font:400 13px/1.5 var(--text);text-align:left;color-scheme:dark}
.mock p{margin:0}
.mock-wrap{margin:0;display:grid;gap:var(--s2);min-width:0}
.mock-cap{text-align:center}
.mock .fbar{display:flex;align-items:center;gap:18px;height:46px;padding:0 16px;border-bottom:1px solid var(--f-line)}
.mock .fmark{height:22px;width:auto;flex:none}
.mock .ftabs{display:flex;gap:16px;font-size:12px;color:var(--f-ink3);font-weight:500}
.mock .ftabs .on{color:var(--f-ink)}
.mock .fright{margin-left:auto;display:flex;align-items:center;gap:10px}
.mock .fpausechip{border:1px solid var(--f-gold);color:var(--f-gold);border-radius:999px;padding:3px 12px;font-size:11px;font-weight:600;white-space:nowrap}
.mock .fdot{width:26px;height:26px;border:1px solid var(--f-line);border-radius:7px;color:var(--f-ink3);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.mock .fbody{padding:18px}
@media (max-width:640px){.mock .ftabs span:nth-child(n+3){display:none}.mock .fbody{padding:12px}}
.mock .fmode{display:flex;align-items:center;justify-content:center;gap:14px;padding:4px 0 16px;flex-wrap:wrap}
.mock .fmodenote{font-size:11px;color:var(--f-ink3)}
.mock .fswitch{position:relative;display:inline-flex;border:1px solid var(--f-line);border-radius:999px;background:var(--f-raise);padding:3px;font:inherit;cursor:pointer}
.mock .fswitch span{position:relative;z-index:1;padding:5px 16px;font-size:11.5px;font-weight:600;color:var(--f-ink3);transition:color .35s ease}
.mock .fswitch::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--f-panel2);border:1px solid var(--f-line);transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.mock[data-state="before"] .fswitch span:first-child{color:var(--f-ink)}
.mock[data-state="after"] .fswitch::before{transform:translateX(100%);background:color-mix(in srgb,var(--f-gold) 16%,var(--f-panel2));border-color:color-mix(in srgb,var(--f-gold) 45%,var(--f-line))}
.mock[data-state="after"] .fswitch span:last-child{color:var(--f-gold)}
.mock .fcols{display:grid;grid-template-columns:280px 1fr;gap:16px;min-height:330px}
.mock .fcols>*{min-width:0}
@media (max-width:760px){.mock .fcols{grid-template-columns:1fr;min-height:0}.mock .fcols .fcards{display:none}.mock .fcols .ftree li{white-space:normal}}
.mock .ftree{background:var(--f-panel);border:1px solid var(--f-line-soft);border-radius:10px;padding:10px 8px;position:relative;overflow:hidden}
.mock .ftree ul{list-style:none;margin:0;padding:0}
.mock .ftree li{display:flex;align-items:center;gap:8px;padding:5.5px 8px;border-radius:7px;font-size:12.5px;color:var(--f-ink2);white-space:nowrap}
.mock .ftree li.sel{background:var(--f-panel2);color:var(--f-ink)}
.mock .ftree li .n{margin-left:auto;color:var(--f-ink3);font-size:11px;font-variant-numeric:tabular-nums}
.mock .ftree li.sub{padding-left:26px}
.mock .ffold{width:14px;height:12px;flex:none;stroke:var(--f-ink3);fill:none;stroke-width:1.5}
.mock li.sel .ffold{stroke:var(--f-gold)}
.mock .fshelves{border-top:1px solid var(--f-line-soft);margin-top:8px;padding-top:8px;transition:opacity .5s ease}
.mock .fshelves li{opacity:.7}
.mock .fshelves .ffold{stroke-dasharray:3 2.4}
.mock .ftag{font-size:9.5px;border:1px solid var(--f-line);color:var(--f-ink3);border-radius:999px;padding:1px 7px;margin-left:auto}
.mock .fshelves li .n{margin-left:6px}
.mock .ftree .state{transition:opacity .5s ease}
.mock .ftree .state.before{position:absolute;inset:10px 8px}
.mock[data-state="after"] .state.before{opacity:0;pointer-events:none}
.mock[data-state="before"] .state.after{opacity:0;pointer-events:none}
.mock[data-state="before"] .fshelves{opacity:0}
.mock .fcards{display:flex;flex-direction:column;gap:10px}
.mock .fgridhead{font-size:11px;color:var(--f-ink3);letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:2px 2px 0}
.mock .fcard{display:flex;gap:12px;align-items:flex-start;background:var(--f-panel);border:1px solid var(--f-line-soft);border-radius:12px;padding:12px 14px}
.mock .fcard>div{min-width:0}
.mock .fcard .hx{width:30px;height:31px;flex:none;margin-top:2px}
.mock .fname{font-size:13px;font-weight:500;color:var(--f-ink);margin:0 0 2px;overflow-wrap:anywhere}
.mock .fdesc{font-size:12px;color:var(--f-ink2)}
.mock .fwhere{font-size:11px;color:var(--f-ink3);margin-top:3px}
.mock .hx .shape{fill:color-mix(in srgb,var(--kc) 13%,var(--f-panel2));stroke:color-mix(in srgb,var(--kc) 55%,var(--f-line));stroke-width:2}
.mock .hx .glyph{stroke:var(--kc);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mock .hx.doc{--kc:var(--fk-document)}.mock .hx.img{--kc:var(--fk-image)}.mock .hx.med{--kc:var(--fk-media)}
.mock .hx.web{--kc:var(--fk-web)}.mock .hx.arc{--kc:var(--fk-archive)}.mock .hx.exe{--kc:var(--fk-executable)}.mock .hx.oth{--kc:var(--fk-other)}
.mock .fproc{padding:6px 4px 2px}
.mock .fprockick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--f-ink3);font-weight:600;margin:0 0 6px}
.mock .fprocnum{font-size:46px;font-weight:600;color:var(--f-ink);line-height:1;font-variant-numeric:tabular-nums;margin:0 0 6px}
.mock .fprocnum small{font-size:20px;color:var(--f-ink2);font-weight:500}
.mock .fprocline{font-size:12px;color:var(--f-ink2);margin:0 0 12px}
.mock .fprocline b{color:var(--f-ink)}
.mock .fbar-meter{height:8px;border-radius:5px;background:var(--f-track);overflow:hidden;margin:0 0 8px}
.mock .fbar-meter i{display:block;height:100%;border-radius:5px;background:var(--f-gold)}
.mock .ffine{font-size:11px;color:var(--f-ink3)}
.mock .fstages{display:flex;gap:10px;margin:18px 0 4px;flex-wrap:wrap}
.mock .fstage{flex:1;min-width:86px;text-align:center;padding:10px 6px 8px;border:1px solid var(--f-line-soft);border-radius:10px;background:var(--f-panel)}
.mock .fstage .hxs{width:26px;height:27px;margin:0 auto 6px}
.mock .fstage .hxs .shape{fill:none;stroke:var(--f-ink3);stroke-width:2.2}
.mock .fstage.live .hxs .shape{stroke:var(--f-gold)}
.mock .fstage .sl{font-size:10.5px;color:var(--f-ink3);font-weight:500}
.mock .fstage.live .sl{color:var(--f-ink)}
.mock .fstage .sn{font-size:13px;color:var(--f-ink);font-weight:600;font-variant-numeric:tabular-nums}
.mock .fstatcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
@media (max-width:640px){.mock .fstatcards{grid-template-columns:1fr}}
.mock .fstat{background:var(--f-panel);border:1px solid var(--f-line-soft);border-radius:12px;padding:12px 14px}
.mock .fstat .lab{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--f-ink2);font-weight:500;margin-bottom:6px}
.mock .fstat .lab .dot{width:6px;height:6px;border-radius:50%;background:var(--f-gold)}
.mock .fstat .cnt{font-size:24px;font-weight:600;color:var(--f-ink);line-height:1.1;font-variant-numeric:tabular-nums}
.mock .fstat .cnt small{font-size:12px;color:var(--f-ink3);font-weight:400}
.mock .fstat .meter{height:5px;border-radius:3px;background:var(--f-track);margin:8px 0 6px}
.mock .fstat .meter i{display:block;height:100%;border-radius:3px;background:var(--f-gold)}
.mock .fstat .foot{font-size:10.5px;color:var(--f-ink3)}
.mock .fstat.ok .cnt{color:var(--f-ok);font-size:15px;font-weight:500;padding:6px 0}
.mock .w15{width:15%}.mock .w32{width:32%}.mock .w41{width:41%}.mock .w55{width:55%}.mock .w68{width:68%}.mock .w80{width:80%}.mock .w93{width:93%}.mock .w100{width:100%}
.mock .fsearch{display:flex;flex-direction:column;gap:10px}
.mock .fquery{display:flex;align-items:center;gap:10px;background:var(--f-raise);border:1px solid var(--f-line);border-radius:10px;padding:11px 14px;font-size:13.5px;color:var(--f-ink)}
.mock .fquery span{min-width:0;overflow-wrap:anywhere}
.mock .fquery svg{width:15px;height:15px;stroke:var(--f-ink3);fill:none;stroke-width:2;flex:none}
.mock .fquery .cursor{display:inline-block;width:1.5px;height:16px;background:var(--f-gold);margin-left:1px;animation:mock-blink 1.1s steps(1) infinite}
@keyframes mock-blink{50%{opacity:0}}
.mock .fresult{display:flex;gap:12px;align-items:flex-start;background:var(--f-panel);border:1px solid var(--f-line-soft);border-radius:12px;padding:11px 14px}
.mock .fresult>div{min-width:0}
.mock .fresult .hx{width:26px;height:27px;flex:none;margin-top:1px}
.mock .fresult .rn{font-size:12.5px;font-weight:500;color:var(--f-ink);overflow-wrap:anywhere}
.mock .fresult .rd{font-size:11.5px;color:var(--f-ink2);margin-top:1px}
.mock .fresult .rd b{color:var(--f-ink);font-weight:500}
.mock .fresult .rt{margin-left:auto;flex:none;font-size:10.5px;color:var(--f-ink3);border:1px solid var(--f-line);border-radius:999px;padding:2px 9px;white-space:nowrap}
@media (max-width:520px){.mock .fresult{flex-wrap:wrap}.mock .fresult .rt{margin-left:38px}}
.mock .fresult.top{border-color:color-mix(in srgb,var(--f-gold) 35%,var(--f-line))}
.mock .flenses{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 12px}
.mock .flens{font-size:11px;color:var(--f-ink2);border:1px solid var(--f-line);border-radius:999px;padding:4px 12px}
.mock .flens.on{color:var(--f-info);border-color:color-mix(in srgb,var(--f-info) 55%,var(--f-line));background:color-mix(in srgb,var(--f-info) 12%,transparent)}
.mock .fviewnote{font-size:11px;color:var(--f-ink3);padding:0 0 10px}
.mock .fviewnote b{color:var(--f-info);font-weight:600}
.mock.views{box-shadow:inset 3px 0 0 var(--f-info),var(--shadow)}
.mock .fgroup{display:inline-flex;align-items:center;gap:8px;border:1.5px dashed color-mix(in srgb,var(--f-info) 50%,var(--f-line));color:var(--f-ink2);border-radius:11px;padding:9px 14px;font-size:12px;margin:0 8px 8px 0}
.mock .fgroup .n{color:var(--f-ink3);font-size:10.5px}
.mock .fsheet{max-width:430px;margin:0 auto;background:var(--f-raise);border:1px solid var(--f-line);border-radius:14px;padding:20px 22px}
.mock .fsheet h4{margin:0 0 4px;font:600 15px/1.3 var(--display);color:var(--f-ink)}
.mock .fsheet .blast{font-size:12.5px;color:var(--f-ink2);margin:0 0 12px}
.mock .fsheet ul{list-style:none;margin:0 0 14px;padding:10px 12px;border:1px dashed var(--f-line);border-radius:9px}
.mock .fsheet li{display:flex;justify-content:space-between;font-size:11.5px;color:var(--f-ink3);padding:2px 0}
.mock .fsheet .fbtns{display:flex;gap:10px;margin:0 0 10px}
.mock .fsheet .fb{flex:1;text-align:center;border-radius:999px;padding:9px 0;font-size:12.5px;font-weight:600}
.mock .fsheet .fb.primary{background:var(--f-gold);color:#141518}
.mock .fsheet .fb.outline{border:1.5px solid var(--f-line);color:var(--f-ink2)}
.mock .fsheet .fine{font-size:11px;color:var(--f-ink3);text-align:center}
.mock .fsheet .fine b{color:var(--f-ok);font-weight:500}

/* ---------- release notification form (js/notify.js) ---------- */
.notify{display:flex;flex-wrap:wrap;align-items:end;gap:var(--s3);width:100%;max-width:620px}
.notify .field{flex:1 1 260px}
.notify .btn{flex:none}
.statusline{font-size:var(--t-14);color:var(--ink-2);min-height:1.2em}
.statusline:empty{display:none}
.statusline.ok{color:var(--ok)}

/* ---------- home and section bits ---------- */
.h2like{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.feature h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.tiles a.card{color:var(--ink);text-decoration:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.tiles a.card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.card.ours{border-color:color-mix(in srgb,var(--product) 55%,var(--line))}
.card b{color:var(--ink)}
.note{max-width:66ch;color:var(--ink-2)}
.band>.needs,.band>.actions{width:100%}
.needs a{white-space:nowrap}

/* ---------- how it works: numbered steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid}
.step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s5);padding-block:var(--s6);border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--product-wash);color:var(--product-ink);font:600 var(--t-18) var(--display)}
.step .text{display:grid;gap:var(--s3);min-width:0}
.step .text>p{color:var(--ink-2);max-width:70ch}
.step .mock-wrap{margin-top:var(--s3)}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:var(--s3)}}

/* ---------- stories ---------- */
.stories{gap:0}
.persona{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(24px,4vw,48px);padding-block:clamp(32px,5vw,56px);border-top:1px solid var(--line);align-items:start;scroll-margin-top:84px}
.persona:first-child{border-top:0;padding-top:0}
@media (max-width:880px){.persona{grid-template-columns:1fr}}
.pcard{position:sticky;top:88px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);display:grid;gap:var(--s2)}
@media (max-width:880px){.pcard{position:static}}
.pcard .pwho{font-size:var(--t-20)}
.pcard .prole{color:var(--product-ink);font-weight:600;font-size:var(--t-14)}
.pcard dl{margin:0;font-size:var(--t-14)}
.pcard dt{color:var(--ink-3);font:600 var(--t-12)/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;margin-top:var(--s3)}
.pcard dd{margin:4px 0 0;color:var(--ink-2)}
.pcard .usecase{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--t-14);color:var(--ink-2)}
.beats{display:grid;gap:var(--s5);min-width:0}
.beat{display:grid;gap:var(--s3)}
.beat>p{color:var(--ink-2);max-width:66ch}
.outcome{border-left:3px solid var(--product);padding:4px 0 4px 18px}
.outcome p{color:var(--ink);max-width:60ch}

/* ---------- download ---------- */
.spec dl{margin:0;display:grid}
.spec dl div{display:grid;grid-template-columns:104px 1fr;gap:var(--s3);padding:10px 0;border-top:1px solid var(--line)}
.spec dt{font:600 var(--t-12)/1.6 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.spec dd{margin:0;color:var(--ink-2)}
@media (max-width:420px){.spec dl div{grid-template-columns:1fr;gap:2px}}

/* ---------- licence key page ---------- */
.keybox{display:block;padding:14px 16px;background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r2);font:500 var(--t-16)/1.5 var(--mono);color:var(--ink);word-break:break-all;user-select:all}
.activated #haskey:not([hidden]),.activated #nokey:not([hidden]){display:grid;gap:var(--s4)}