/* extraDisp site. Light, flat, platform-icon style (indigo to cyan brand, same as the app icon).
   The demo monitors and the log boxes stay dark on purpose: they are screens and terminals. */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --band:#f5f7fb;
  --panel:#f5f7fb;
  --panel2:#ffffff;
  --entry:#eef1f7;
  --line:#dde3ee;
  --hair:rgba(15,23,42,.08);
  --fg:#0f172a;
  --dim:#475569;
  --mute:#64748b;
  --accent:#4f46e5;
  --accent-hi:#4338ca;
  --accent-ink:#ffffff;
  --accent-soft:rgba(79,70,229,.12);
  --cyan:#0e7490;
  --cyan-lt:#22d3ee;
  --grad:linear-gradient(135deg,#4f46e5 0%,#0e7490 100%);
  --green:#059669;
  --red:#dc2626;
  --amber:#d97706;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.07);
  --wall:#14202c;
  --win:#e8eaef;
  --win-ink:#1b2430;
  --term:#0b1220;
  --term-fg:#94a3b8;
  --term-mute:#64748b;
  --term-green:#34d399;
  --term-cyan:#67e8f9;
  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:var(--accent)}
a:hover{color:var(--accent-hi)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
code,kbd{font-family:var(--mono);font-size:.9em;background:var(--entry);border:1px solid var(--line);border-radius:4px;padding:.05em .35em;color:var(--fg)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{line-height:1.12;margin:0;letter-spacing:-.02em;text-wrap:balance;color:var(--fg)}
h1{font-weight:800}
h2{font-size:clamp(1.55rem,3.4vw,2.35rem);font-weight:700}
h3{font-size:1.06rem;font-weight:650}
p{margin:0}
.eyebrow{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.lede{color:var(--dim);font-size:1.1rem;max-width:62ch}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:16px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font-weight:700;font-size:1.08rem;letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:9px}
.brand b{color:var(--accent);font-weight:700}
.top nav{display:flex;gap:22px;margin-left:auto}
.top nav a{color:var(--dim);text-decoration:none;font-size:.93rem;font-weight:500}
.top nav a:hover{color:var(--accent)}
@media (max-width:860px){.top nav{display:none}.top .btn{margin-left:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:650;font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;border-radius:10px;padding:13px 22px;line-height:1.2;transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.btn svg{width:18px;height:18px;flex:none}
.btn-acc{background:var(--grad);color:var(--accent-ink);box-shadow:0 6px 16px rgba(79,70,229,.28)}
.btn-acc:hover{color:var(--accent-ink);transform:translateY(-1px);box-shadow:0 10px 22px rgba(79,70,229,.34)}
.btn-sec{background:#fff;color:var(--fg);border-color:var(--line)}
.btn-sec:hover{border-color:var(--accent);color:var(--accent)}
.btn-dark{background:var(--fg);color:#fff}
.btn-dark:hover{background:#1e293b;color:#fff}
.btn-sm{padding:8px 14px;font-size:.88rem;border-radius:8px}
.btn small{font-weight:500;opacity:.85}

/* card frame (demo and download panels) */
.frame{position:relative;border:1px solid var(--line);background:var(--panel2);border-radius:16px;padding:28px 22px 22px;min-width:0;box-shadow:var(--shadow)}
.frame > .legend{position:absolute;top:-.8em;left:16px;background:var(--grad);padding:3px 12px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;line-height:1.4}

/* hero */
.hero{background:radial-gradient(900px 420px at 85% -10%,rgba(34,211,238,.18),transparent 70%),radial-gradient(800px 420px at 0% 0%,rgba(79,70,229,.14),transparent 70%),linear-gradient(180deg,#f3f5ff 0%,#fff 100%);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:center;padding-block:64px 56px}
.hero h1{font-size:clamp(2.1rem,4.9vw,3.55rem);margin-block:14px 18px}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.plats{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.plats li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 10px;font-size:.88rem;font-weight:600;color:var(--fg);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.plats svg{width:20px;height:20px;flex:none;color:var(--accent)}
.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin:24px 0 0;padding:0;list-style:none;font-size:.93rem;color:var(--dim)}
.ticks li{display:flex;align-items:flex-start;gap:8px;min-width:0}
.ticks svg{width:16px;height:16px;flex:none;color:var(--green);margin-top:4px}
@media (max-width:980px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:36px;padding-block:40px}}
@media (max-width:460px){.ticks{grid-template-columns:minmax(0,1fr)}}

/* demo */
.demo{padding:30px 18px 18px}
.demo-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.demo-head p{font-size:.88rem;color:var(--dim)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--entry)}
.seg button{font:600 .8rem var(--mono);background:transparent;color:var(--dim);border:0;padding:7px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.desk{display:grid;grid-template-columns:4fr 3fr;gap:7%;align-items:start;user-select:none;-webkit-user-select:none}
.mon{min-width:0}
.mon .bez{background:#0b1018;border:1px solid #1f2937;border-radius:8px;padding:4%}
.mon .stand{width:22%;height:14px;margin:0 auto;background:#cbd3e1;border:1px solid #b6c0d2;border-top:0}
.mon .foot{width:44%;height:6px;margin:0 auto;background:#cbd3e1;border:1px solid #b6c0d2;border-radius:3px}
.tab{min-width:0;margin-top:8%}
.tab .bez{background:#0b1018;border:2px solid var(--accent);border-radius:14px;padding:6%;box-shadow:0 0 0 4px var(--accent-soft)}
.scr{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--wall);border-radius:2px;container-type:inline-size}
.scr .num{position:absolute;left:5%;top:4%;font:700 clamp(12px,14cqw,40px)/1 var(--sans);color:rgba(232,234,239,.28);pointer-events:none}
.tab .scr .num{color:rgba(34,211,238,.45)}
.scr .bar{position:absolute;left:0;right:0;bottom:0;height:7%;background:rgba(5,8,11,.82);display:flex;align-items:center;gap:3%;padding:0 3%;pointer-events:none}
.scr .bar i{display:block;width:4%;aspect-ratio:1;border-radius:2px;background:rgba(232,234,239,.35)}
.scr .bar i:first-child{background:var(--cyan-lt)}
.scr .hint{position:absolute;inset:auto 0 18% 0;text-align:center;font:500 clamp(8px,5.6cqw,13px)/1.3 var(--mono);color:rgba(232,234,239,.6);padding:0 6%;pointer-events:none}
.scr .conn{position:absolute;right:3%;top:4%;font:500 clamp(7px,4.4cqw,11px)/1 var(--mono);color:var(--term-green);pointer-events:none;white-space:nowrap}
.win{position:absolute;background:var(--win);color:var(--win-ink);border-radius:3px;box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:grab;touch-action:none;overflow:hidden}
.win:active{cursor:grabbing}
.win .tb{height:13%;min-height:7px;background:var(--accent);display:flex;align-items:center;padding:0 5%;font:600 clamp(6px,var(--fs,10px),12px)/1 var(--sans);color:var(--accent-ink);white-space:nowrap;overflow:hidden}
.win .body{padding:6% 7%;display:grid;gap:7%}
.win .body i{display:block;height:5px;max-height:7px;border-radius:2px;background:#9aa4b5}
.win .body i:nth-child(1){width:86%;background:var(--win-ink)}
.win .body i:nth-child(2){width:72%}
.win .body i:nth-child(3){width:90%}
.win .body i:nth-child(4){width:58%}
.win .body i:nth-child(5){width:78%}
.ripple{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2px solid var(--cyan-lt);pointer-events:none;animation:rip .5s ease-out forwards}
@keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
.labels{display:grid;grid-template-columns:4fr 3fr;gap:7%;margin-top:8px;font:500 .74rem/1.3 var(--mono);color:var(--mute)}
.labels span{min-width:0}
.ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:18px}
.ctl label{display:flex;justify-content:space-between;font-size:.86rem;color:var(--fg);font-weight:500}
.ctl output{font-family:var(--mono);color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--accent);margin:6px 0 0}
.readout{margin-top:14px;font:500 .84rem/1.5 var(--mono);color:var(--dim);border-top:1px dashed var(--line);padding-top:12px}
.readout strong{color:var(--fg);font-weight:600}
.wire{margin:12px 0 0;background:var(--term);border:1px solid #1f2937;border-radius:8px;padding:10px 12px;font:500 .76rem/1.6 var(--mono);color:var(--term-green);height:7.4em;overflow:hidden;white-space:pre-wrap;word-break:break-all}
.wire .t{color:var(--term-mute)}
.demo-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.demo-note{margin-top:12px;font-size:.8rem;color:var(--mute)}
@media (max-width:520px){.ctl{grid-template-columns:minmax(0,1fr)}.demo{padding:28px 12px 14px}}

section{scroll-margin-top:72px}
.sec{padding-block:76px}
main > section.sec:nth-of-type(even){background:var(--band);border-block:1px solid var(--line)}
.sec-head{display:grid;gap:12px;margin-bottom:38px;max-width:780px}

/* steps (a real sequence) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;min-width:0;box-shadow:var(--shadow)}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;font:700 1rem var(--sans);color:#fff;background:var(--grad);margin-bottom:14px}
.steps h3{margin-bottom:6px}
.steps p{color:var(--dim);font-size:.96rem}
.more-link{margin-top:28px;font-weight:600}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:620px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font:700 .74rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:var(--panel)}
tbody th{font-weight:600;color:var(--fg);width:22%}
td{color:var(--dim)}
td.v{font-family:var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}
tr:last-child th,tr:last-child td{border-bottom:0}

/* split: connect section */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:28px}
.logbox{background:var(--term);border:1px solid #1f2937;border-radius:10px;padding:14px 16px;font:500 .8rem/1.75 var(--mono);color:var(--term-fg);overflow-x:auto;white-space:pre}
.logbox .ok{color:var(--term-green)}
.logbox .c{color:var(--term-cyan)}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}

/* features */
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.feat{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.feat svg{width:48px;height:48px;padding:11px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.feat p{color:var(--dim);font-size:.96rem;margin-top:4px}
@media (max-width:760px){.feats{grid-template-columns:minmax(0,1fr)}}

/* shots */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:38px;max-width:720px}
.shots figure{margin:0;min-width:0}
.shots img{border:1px solid var(--line);border-radius:14px;width:100%;box-shadow:var(--shadow)}
.shots figcaption{font:500 .78rem var(--sans);color:var(--mute);margin-top:8px}

/* is / isn't */
.isnt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.isnt ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.isnt li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;color:var(--dim);font-size:.96rem}
.isnt li strong{color:var(--fg);font-weight:600}
.isnt li svg{width:18px;height:18px;margin-top:4px}
.yes svg{color:var(--green)}
.no svg{color:var(--red)}
@media (max-width:860px){.isnt{grid-template-columns:minmax(0,1fr)}}

/* download */
.dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px}
.dl .price{font:800 2.6rem/1 var(--sans);letter-spacing:-.03em;margin:8px 0 4px}
.dl .price small{font-size:1rem;color:var(--dim);font-weight:500;letter-spacing:0}
.dl .meta{font:500 .82rem/1.6 var(--mono);color:var(--dim);margin-bottom:16px}
.dl ul{margin:0 0 18px;padding-left:18px;color:var(--dim);font-size:.95rem;display:grid;gap:6px}
.files{display:grid;gap:12px}
.file{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;box-shadow:var(--shadow)}
.file h3{font-size:1rem}
.file p{color:var(--dim);font-size:.88rem;grid-column:1 / -1}
.file .sz{font:500 .78rem var(--mono);color:var(--dim)}
.note{font-size:.86rem;color:var(--dim);margin-top:14px}
@media (max-width:860px){.dl{grid-template-columns:minmax(0,1fr)}}
@media (max-width:460px){.file{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.qa{padding:22px 22px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;min-width:0}
.qa h3{font-size:1.04rem;margin-bottom:8px;letter-spacing:-.01em}
.qa p{color:var(--dim);font-size:.96rem}
@media (max-width:760px){.faq{grid-template-columns:minmax(0,1fr)}}

/* more apps + footer */
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.more a{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--fg);font-weight:600;font-size:.95rem;min-width:0}
.more a span{font:400 .76rem var(--sans);color:var(--mute);white-space:nowrap}
.more a:hover{border-color:var(--accent)}
@media (max-width:900px){.more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.more{grid-template-columns:minmax(0,1fr)}}
footer{border-top:1px solid var(--line);margin-top:64px;background:var(--band)}
footer .wrap{padding-block:30px 40px;display:grid;gap:14px;color:var(--dim);font-size:.88rem}
footer .row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
footer .sel{font-family:var(--mono);color:var(--fg);user-select:all}

/* article pages */
.crumbs{font:500 .82rem var(--sans);color:var(--dim);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--dim)}
.article{max-width:780px}
.article h1{font-size:clamp(1.9rem,4.4vw,2.9rem);margin-block:14px 16px}
.article h2{font-size:clamp(1.35rem,2.8vw,1.75rem);margin-top:52px;margin-bottom:14px}
.article h3{margin-top:26px;margin-bottom:8px}
.article p,.article li{color:var(--dim);font-size:1.02rem}
.article p+p{margin-top:14px}
.article strong{color:var(--fg)}
.article ol,.article ul{display:grid;gap:9px;padding-left:22px;margin:12px 0}
.byline{font-size:.9rem;color:var(--dim);margin-top:6px}
.answer{margin-top:24px;padding:18px 20px;border-left:4px solid var(--accent);background:var(--band);border-radius:0 10px 10px 0}
.answer p{color:var(--fg)}
.article figure{margin:22px 0;max-width:300px}
.article figure img{border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.article figcaption{font:500 .78rem var(--sans);color:var(--mute);margin-top:8px}
.cta-box{margin-top:52px;display:grid;gap:14px;justify-items:start}