/* ============================================================
   FlowLab — Site page patterns (requires tokens + components)
   Shared across every page: heroes, sections, flows, cards…
   ============================================================ */

/* skip link */
.skip{position:fixed;top:-60px;inset-inline-start:8px;z-index:200;background:var(--color-surface);color:var(--color-text-primary);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:9px 16px;font-size:var(--text-sm);
  font-weight:var(--weight-bold);text-decoration:none;transition:top var(--transition-fast)}
.skip:focus{top:8px}

/* ===== section scaffolding ===== */
.sec{padding:var(--space-16) 0}
.sec--tint{background:var(--color-bg-secondary);border-block:1px solid var(--color-border)}
.sec--flush{padding-top:0}
.sec-head{max-width:660px;margin-bottom:var(--space-8)}
.sec-head h2{font-size:var(--text-heading);margin-bottom:var(--space-2)}
.sec-sub{color:var(--color-text-muted);font-size:var(--text-md)}
.sec-head--center{margin-inline:auto;text-align:center;max-width:600px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-xs);font-weight:var(--weight-bold);
  color:var(--color-accent-ink);background:var(--color-accent-soft);padding:5px var(--space-3);
  border-radius:var(--radius-sm);margin-bottom:var(--space-3)}
.grid{display:grid;gap:var(--space-4)}
.grid>*{min-width:0}
.grid--2{grid-template-columns:1fr 1fr}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.grid--3,.grid--4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ===== heroes ===== */
.heroSec{position:relative;padding-bottom:var(--space-16);overflow:hidden}
.hero{position:relative;text-align:center;padding:var(--space-12) 0 var(--space-2)}
.hero::before{content:"";position:absolute;left:50%;top:-160px;transform:translateX(-50%);width:860px;height:440px;
  background:radial-gradient(closest-side,var(--color-glow),transparent 72%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--color-pattern-dot) 1px,transparent 1.6px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,#000 30%,transparent 74%);
  mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,#000 30%,transparent 74%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:var(--text-display);margin:var(--space-4) auto var(--space-2);max-width:760px}
.hero-sub{color:var(--color-text-muted);font-size:var(--text-md);max-width:640px;margin-inline:auto}
.hero-cta{display:flex;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
.pill-tag{display:inline-flex;gap:8px;align-items:center;padding:7px var(--space-4);border:1px solid var(--color-border);
  border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text-secondary);
  font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.pill-tag svg{color:var(--color-accent)}
.kicker--hero{display:flex;width:max-content;margin:0 auto var(--space-3)}
/* inner-page hero (no dot field, tighter) */
.page-hero{position:relative;padding:var(--space-12) 0 var(--space-2);overflow:hidden}
.page-hero::before{content:"";position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:760px;height:380px;
  background:radial-gradient(closest-side,var(--color-glow),transparent 72%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:var(--text-display);margin:var(--space-4) 0 var(--space-2)}
.page-hero--center{text-align:center}
.page-hero--center .crumb{justify-content:center}
.page-hero--center h1{max-width:760px;margin-inline:auto}
.page-hero--center .hero-sub{max-width:620px;margin-inline:auto}
.page-hero .crumb{margin-bottom:var(--space-5)}

/* ===== trust strip ===== */
.trust{display:flex;justify-content:center;gap:var(--space-5) var(--space-6);flex-wrap:wrap;margin-top:var(--space-5)}
.trust span{display:inline-flex;gap:8px;align-items:center;font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.trust svg{color:var(--color-accent);width:16px;height:16px}

/* ===== capability strip ===== */
.cap-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cap{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:var(--space-4) var(--space-2);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--color-text-secondary);
  transition:transform var(--transition-base),border-color var(--transition-base)}
.cap:hover{transform:translateY(-3px);border-color:var(--color-accent)}
.cap i{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-accent-soft);
  color:var(--color-accent-ink);display:grid;place-items:center}
@media(max-width:920px){.cap-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cap-strip{grid-template-columns:1fr 1fr}}

/* ===== hero pipeline visual ===== */
.hpipe{position:relative;margin-top:var(--space-10);background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);padding:var(--space-6);overflow:hidden}
.hpipe::before{content:"";position:absolute;top:-110px;left:50%;transform:translateX(-50%);width:520px;height:220px;
  background:radial-gradient(closest-side,var(--color-glow),transparent 72%);pointer-events:none}
.hpipe__src{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.hpipe__src .chip{padding:6px 13px}
.hpipe__src .chip .ic-xs{color:var(--color-accent)}
.hpipe__lane{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2);
  margin:var(--space-6) 0;position:relative;z-index:1}
.hpipe__lane::before{content:"";position:absolute;top:24px;inset-inline:64px;height:2px;
  background-image:linear-gradient(to left,var(--color-accent) 55%,transparent 45%);background-size:14px 2px;
  animation:dashmove 1.4s linear infinite;opacity:.55}
html[dir="ltr"] .hpipe__lane::before{background-image:linear-gradient(to right,var(--color-accent) 55%,transparent 45%)}
@keyframes dashmove{to{background-position:-14px 0}}
.hnode{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hnode__ic{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--color-surface);
  border:1.5px solid var(--color-border-strong);display:grid;place-items:center;color:var(--color-text-muted);
  box-shadow:var(--shadow-sm)}
.hnode__ic .ic{color:var(--color-accent)}
.hnode--gate .hnode__ic{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent-ink)}
.hnode b{font-size:var(--text-base);font-weight:var(--weight-extrabold)}
.hnode small{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.7;font-weight:var(--weight-medium)}
.hnode__tag{font-size:10px;font-weight:var(--weight-bold);color:var(--color-accent-ink);background:var(--color-accent-soft);
  padding:2px 9px;border-radius:var(--radius-pill)}
.hpipe__out{position:relative;z-index:1;border-top:1px dashed var(--color-border);padding-top:var(--space-4);
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.hpipe__out .plat{padding:6px 13px;font-size:var(--text-xs)}
@media(max-width:880px){
  .hpipe__lane{flex-direction:column;align-items:stretch;gap:0}
  .hpipe__lane::before{top:24px;bottom:24px;inset-inline:24px auto;width:2px;height:auto;background-image:linear-gradient(to bottom,var(--color-accent) 55%,transparent 45%);background-size:2px 14px;animation-name:dashmove-v}
  .hnode{flex-direction:row;max-width:none;text-align:start;gap:14px;padding:10px 0}
  @keyframes dashmove-v{to{background-position:0 -14px}}
}

/* ===== one source → many outputs ===== */
.branch{display:flex;flex-direction:column;align-items:center}
.branch__src{width:min(420px,100%);text-align:center;background:var(--color-surface);border:1px solid var(--color-accent);
  border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:0 0 0 5px var(--color-accent-faint)}
.branch__src .b-ic{width:52px;height:52px;border-radius:var(--radius-lg);background:var(--color-accent-soft);
  color:var(--color-accent-ink);display:grid;place-items:center;margin:0 auto var(--space-3)}
.branch__src b{font-size:var(--text-lg);font-weight:var(--weight-extrabold)}
.branch__src p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:6px}
.branch__stem{width:2px;height:34px;background:linear-gradient(var(--color-accent),transparent 90%);opacity:.4}
.branch__out{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);width:100%;margin-top:var(--space-4);
  padding-top:var(--space-5);border-top:1px dashed var(--color-border-strong);position:relative}
.branch__out::before{content:"";position:absolute;top:-2px;left:16.6%;right:16.6%;height:2px;
  background:linear-gradient(to left,transparent,var(--color-accent),transparent);opacity:.35}
.ocard{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-4);display:flex;gap:12px;align-items:flex-start;
  transition:transform var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base)}
.ocard:hover{transform:translateY(-3px);border-color:var(--color-accent);box-shadow:var(--shadow-md)}
.ocard::before{content:"";position:absolute;top:-21px;left:50%;transform:translateX(-50%);width:2px;height:20px;
  background:var(--color-accent);opacity:.35}
.ocard i{width:38px;height:38px;border-radius:var(--radius-md);background:var(--color-accent-soft);
  color:var(--color-accent-ink);display:grid;place-items:center;flex:none}
.ocard b{display:block;font-size:var(--text-base);font-weight:var(--weight-extrabold)}
.ocard small{display:block;font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.8;margin-top:3px}
@media(max-width:920px){.branch__out{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.branch__out{grid-template-columns:1fr}.ocard::before{display:none}}

/* ===== feature cards ===== */
.fcard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);
  padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.fcard__ic{width:46px;height:46px;border-radius:var(--radius-md);background:var(--color-accent-soft);
  color:var(--color-accent-ink);display:grid;place-items:center}
.fcard__ic--premium{background:var(--color-premium-bg);border:1px solid var(--color-premium-border);color:var(--color-premium-accent)}
.fcard h3{font-size:var(--text-lg)}
.fcard p{font-size:var(--text-sm);color:var(--color-text-muted)}
.fcard ul{list-style:none;margin:var(--space-1) 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.fcard ul li{display:flex;gap:8px;align-items:flex-start;font-size:var(--text-base);color:var(--color-text-secondary)}
.fcard ul .ic-xs{color:var(--color-accent);margin-top:6px}
.fcard__more{margin-top:auto;padding-top:var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-bold);
  color:var(--color-accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.fcard__more:hover{color:var(--color-accent)}
.fcard__more .ic-xs{transform:rotate(-90deg)}
html[dir="rtl"] .fcard__more .ic-xs{transform:rotate(90deg)}
.fcard__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}

/* mini card (why / principles) */
.mini{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-5);display:flex;gap:14px;align-items:flex-start;
  transition:transform var(--transition-base),border-color var(--transition-base)}
.mini:hover{transform:translateY(-2px);border-color:var(--color-accent)}
.mini i{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-accent-soft);
  color:var(--color-accent-ink);display:grid;place-items:center;flex:none}
.mini b{display:block;font-size:var(--text-md);font-weight:var(--weight-extrabold)}
.mini small{display:block;font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.9;margin-top:4px}

/* ===== wireframe visual (feature rows) ===== */
.frow{display:grid;grid-template-columns:5fr 6fr;gap:var(--space-10);align-items:center}
.frow--flip .frow__txt{order:2}
.frow__txt .kicker{margin-bottom:var(--space-2)}
.frow__txt h3{font-size:var(--text-2xl);margin-bottom:var(--space-3)}
.frow__txt p{color:var(--color-text-muted);font-size:var(--text-md)}
.frow__txt ul{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.frow__txt ul li{display:flex;gap:9px;align-items:flex-start;font-size:var(--text-base);color:var(--color-text-secondary)}
.frow__txt ul .ic-xs{color:var(--color-accent);margin-top:6px}
.frow+.frow{margin-top:var(--space-16)}
@media(max-width:920px){.frow{grid-template-columns:1fr;gap:var(--space-6)}.frow--flip .frow__txt{order:0}}
/* generic wire mock */
.wire{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);padding:var(--space-4);display:flex;flex-direction:column;gap:10px}
.wire__bar{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--color-border)}
.wire__dots{display:flex;gap:5px}
.wire__dots i{width:9px;height:9px;border-radius:50%;background:var(--color-border-strong)}
.wire__tag{font-size:10px;font-weight:var(--weight-bold);color:var(--color-text-muted);background:var(--color-surface-secondary);
  border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:2px 9px}
.wire__line{height:9px;border-radius:5px;background:var(--color-surface-secondary);border:1px solid var(--color-border)}
.wire__line--w60{width:60%}.wire__line--w80{width:80%}.wire__line--w40{width:40%}.wire__line--w30{width:30%}
.wire__line--accent{background:var(--color-accent-soft);border-color:transparent}
.wire__row{display:flex;gap:10px}
.wire__box{flex:1;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:10px;
  display:flex;flex-direction:column;gap:7px;background:var(--color-surface-secondary)}
.wire__box b{font-size:var(--text-xs);color:var(--color-text-secondary);font-weight:var(--weight-bold)}
.wire__msg{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:10px var(--space-3);background:var(--color-surface-secondary)}
.wire__msg i{width:28px;height:28px;border-radius:8px;background:var(--color-accent-soft);color:var(--color-accent-ink);
  display:grid;place-items:center;flex:none}
.wire__msg i .ic{width:15px;height:15px}
.wire__cta{display:flex;justify-content:flex-end;gap:8px}

/* ===== flow steps (workflow) ===== */
.flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3)}
.flow--6{grid-template-columns:repeat(6,1fr)}
.flow-track{position:absolute;top:26px;inset-inline:calc(100%/10);height:2px;background:var(--color-border-strong);
  border-radius:2px;overflow:hidden}
.flow--6 .flow-track{inset-inline:calc(100%/12)}
.flow-fill{position:absolute;top:0;bottom:0;inset-inline-start:0;width:calc(var(--p,0)*100%);
  background:linear-gradient(to left,var(--color-premium-accent),var(--color-accent));
  transition:width .7s var(--ease-standard)}
html[dir="ltr"] .flow-fill{background:linear-gradient(to right,var(--color-premium-accent),var(--color-accent))}
.flow-step{position:relative;z-index:1;border:0;background:none;padding:0;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;color:inherit}
.flow-node{position:relative;width:54px;height:54px;border-radius:var(--radius-lg);background:var(--color-surface);
  border:1.5px solid var(--color-border-strong);display:grid;place-items:center;color:var(--color-text-muted);
  transition:border-color var(--transition-base),color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base)}
.flow-node svg{width:22px;height:22px}
.f-idx{position:absolute;top:-6px;inset-inline-start:-6px;width:19px;height:19px;border-radius:50%;
  background:var(--color-surface);border:1.5px solid var(--color-border-strong);font-size:10px;
  font-weight:var(--weight-extrabold);color:var(--color-text-muted);display:grid;place-items:center;line-height:1;
  transition:border-color var(--transition-base),color var(--transition-base),background var(--transition-base)}
.f-txt{display:flex;flex-direction:column;align-items:center;gap:4px}
.f-txt b{font-size:var(--text-base);font-weight:var(--weight-extrabold)}
.f-txt small{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.8;font-weight:var(--weight-medium)}
.f-gate-tag{order:3;font-size:10px;font-weight:var(--weight-bold);color:var(--color-accent-ink);
  background:var(--color-accent-soft);padding:2px 9px;border-radius:var(--radius-pill)}
.flow-step.is-done .flow-node{border-color:var(--color-accent);color:var(--color-accent)}
.flow-step.is-done .f-idx{border-color:var(--color-accent);color:var(--color-accent)}
.flow-step.is-act .flow-node{border-color:var(--color-accent);color:var(--color-accent);
  box-shadow:0 0 0 5px var(--color-accent-soft);transform:translateY(-3px)}
.flow-step.is-act .f-idx{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-on-accent)}
@media(max-width:1000px){
  .flow,.flow--6{grid-template-columns:1fr;gap:0}
  .flow-track{top:27px;bottom:27px;inset-inline:26px auto;width:2px;height:auto}
  .flow-fill{width:100%;height:calc(var(--p,0)*100%);top:0;bottom:auto;inset-inline:0;
    background:linear-gradient(to bottom,var(--color-premium-accent),var(--color-accent));
    transition:height .7s var(--ease-standard)}
  .flow-step{flex-direction:row;align-items:center;gap:18px;padding:13px 0;text-align:start}
  .f-txt{align-items:flex-start;text-align:start;gap:3px}
  .f-gate-tag{order:0}
}

/* ===== platforms row ===== */
.plats{margin-top:var(--space-10);text-align:center}
.plats__l{display:block;font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--weight-bold);
  margin-bottom:var(--space-3)}
.plat-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.plats__note{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--color-text-disabled)}
.plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.pcard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-4);display:flex;align-items:center;gap:12px;
  transition:transform var(--transition-base),border-color var(--transition-base)}
.pcard:hover{transform:translateY(-2px);border-color:var(--color-accent)}
.pcard i{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-surface-secondary);
  border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-text-secondary);flex:none}
.pcard__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.pcard__t b{font-size:var(--text-base);font-weight:var(--weight-extrabold)}
.pcard__t small{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.pcard .chip{margin-inline-start:auto}
@media(max-width:920px){.plat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.plat-grid{grid-template-columns:1fr}}

/* ===== FAQ (shared) ===== */
.faq{max-width:800px;margin:0 auto}
.faq--start{margin:0}
.fq{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);margin-bottom:10px}
.fq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);
  cursor:pointer;font-weight:var(--weight-bold);font-size:var(--text-md);list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary span{flex:1}
.fq .chev{color:var(--color-text-muted);transition:transform var(--transition-base)}
.fq[open] .chev{transform:rotate(180deg)}
.fq-body{padding:0 var(--space-5) var(--space-4)}
.fq-body p{font-size:var(--text-base);color:var(--color-text-muted);line-height:2.1}
.fq-body p+p{margin-top:var(--space-2)}
.faq-tools{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--space-5)}
.faq-search{position:relative;flex:1;min-width:220px;max-width:420px}
.faq-search .ic{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:12px;color:var(--color-text-muted);width:17px;height:17px}
.faq-search .input{padding-inline-start:38px}
.faq-cats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:var(--space-8)}
.fcat{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text-secondary);
  font:inherit;font-size:var(--text-sm);font-weight:var(--weight-bold);padding:7px 16px;border-radius:var(--radius-pill);
  cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.fcat:hover{border-color:var(--color-accent);color:var(--color-accent-ink)}
.fcat.is-on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.faq-group-h{font-size:var(--text-md);font-weight:var(--weight-extrabold);color:var(--color-text-secondary);
  margin:var(--space-8) 0 var(--space-3);display:flex;align-items:center;gap:8px}
.faq-group-h:first-of-type{margin-top:0}
.faq-group-h .ic-s{color:var(--color-accent)}

/* ===== CTA panel ===== */
.cta-panel{position:relative;overflow:hidden;background:var(--color-premium-bg);
  border:1px solid var(--color-premium-border);border-radius:var(--radius-2xl);padding:var(--space-10);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;
  color:var(--color-premium-text)}
.cta-panel::before{content:"";position:absolute;top:-80px;inset-inline-end:-70px;width:340px;height:280px;
  background:radial-gradient(closest-side,var(--color-glow-strong),transparent 72%);pointer-events:none}
.cta-panel h3{font-size:clamp(19px,2.6vw,24px);position:relative}
.cta-panel p{margin-top:var(--space-2);color:var(--color-premium-muted);font-size:var(--text-md);max-width:520px;position:relative}
.cta-panel .chip{position:relative}
.cta-btns{display:flex;gap:var(--space-3);position:relative;flex-wrap:wrap}
@media(max-width:640px){.cta-panel{padding:var(--space-6) var(--space-5)}.cta-btns{width:100%}.cta-btns .btn{flex:1}}

/* ===== pricing page ===== */
.billing{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
.billing__label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--weight-bold)}
.save-badge{display:inline-flex;align-items:center;gap:6px;background:var(--color-accent-soft);color:var(--color-accent-ink);
  font-weight:var(--weight-bold);font-size:var(--text-xs);border-radius:var(--radius-pill);padding:6px var(--space-4)}
.save-badge svg{color:var(--color-accent)}
.plans{display:grid;grid-template-columns:1fr 1.13fr 1fr;gap:22px;align-items:stretch;margin-top:var(--space-6)}
.plans .plan-card--featured{margin-block-start:-16px;padding-block-start:var(--space-10)}
@media(max-width:920px){.plans{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .plans .plan-card--featured{order:-1;margin-block-start:0;padding-block-start:var(--space-8)}}
.cred-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);
  padding:var(--space-6);display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8)}
.cs-h{font-size:var(--text-md);font-weight:var(--weight-extrabold);margin-bottom:var(--space-3)}
.leg{margin-bottom:var(--space-5)}
.leg-h{display:flex;gap:8px;align-items:center;font-size:var(--text-sm);font-weight:var(--weight-bold);
  color:var(--color-text-secondary);margin-bottom:var(--space-2)}
.leg-h svg{color:var(--color-accent)}
.leg--amber .leg-h svg{color:var(--color-warning)}
.leg-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.leg-list li{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;gap:8px;align-items:center;font-weight:var(--weight-medium)}
.leg-list svg{color:var(--color-accent);width:15px;height:15px}
.leg--amber .leg-list svg{color:var(--color-warning)}
.calc{border:1.5px dashed var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-4);background:var(--color-surface-secondary)}
.calc__h{display:flex;gap:8px;align-items:center;font-size:var(--text-sm);font-weight:var(--weight-bold);
  color:var(--color-text-secondary);margin-bottom:var(--space-4)}
.calc__h svg{color:var(--color-accent)}
.calc__row{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--space-4)}
.calc__cl{font-size:var(--text-xs);color:var(--color-text-secondary);font-weight:var(--weight-semibold);
  display:flex;justify-content:space-between;gap:8px}
.calc__cl b{color:var(--color-accent-ink);font-weight:var(--weight-extrabold)}
.calc__res{border-top:1px dashed var(--color-border);padding-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-secondary)}
.calc__res>b{color:var(--color-accent-ink);font-weight:var(--weight-extrabold);font-size:var(--text-md)}
.calc__plan{margin-top:4px;color:var(--color-text-muted);font-size:var(--text-xs)}
.cred-groups{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);align-content:start}
.cgroup{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-4) var(--space-2);background:var(--color-surface-secondary)}
.cgroup-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:var(--space-2)}
.cgroup-t{font-weight:var(--weight-extrabold);font-size:var(--text-md)}
.tier{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--color-accent-ink);
  background:var(--color-accent-soft);padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.tier--amb{color:var(--color-warning);background:var(--color-warning-soft)}
.crow{display:grid;grid-template-columns:100px 1fr 96px;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--color-border)}
.c-name{font-size:var(--text-xs);color:var(--color-text-secondary);font-weight:var(--weight-semibold)}
.meter{height:6px;border-radius:var(--radius-pill);background:var(--color-border);overflow:hidden}
.meter i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--color-accent);width:0;
  transition:width .9s var(--ease-standard)}
.meter i.m-amb{background:var(--color-warning)}
[data-reveal].is-in .meter i{width:var(--w)}
.c-val{font-size:var(--text-xs);font-weight:var(--weight-extrabold);text-align:end}
.cred-note{display:flex;gap:10px;align-items:flex-start;margin-top:var(--space-4);font-size:var(--text-xs);
  color:var(--color-text-muted);max-width:760px}
.cred-note svg{color:var(--color-accent);margin-top:5px;flex:none}
.topups{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.tcard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-5);display:flex;flex-direction:column;
  transition:transform var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base)}
.tcard:hover{transform:translateY(-3px);border-color:var(--color-accent);box-shadow:var(--shadow-md)}
.tcoin{width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-accent-soft);
  color:var(--color-accent-ink);display:grid;place-items:center;margin-bottom:var(--space-3)}
.tcard__credits{font-size:var(--text-xl);font-weight:var(--weight-extrabold)}
.tcard__price{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--color-text-secondary);margin-top:3px}
.tcard__eq{font-size:var(--text-2xs);color:var(--color-text-muted);margin-top:var(--space-2);line-height:1.9}
.tcard .btn{margin-top:var(--space-4);align-self:stretch}
.tnotes{list-style:none;padding:0;margin:var(--space-5) 0 0;display:flex;flex-direction:column;gap:8px;max-width:640px}
.tnotes li{display:flex;gap:9px;align-items:flex-start;font-size:var(--text-xs);color:var(--color-text-muted)}
.tnotes svg{color:var(--color-accent);margin-top:5px;flex:none}
.brand-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);
  padding:var(--space-6);display:grid;grid-template-columns:5fr 7fr;gap:var(--space-8)}
.b-stats{margin:var(--space-1) 0 var(--space-4)}
.b-stat{display:flex;justify-content:space-between;align-items:center;padding:10px 2px;
  border-bottom:1px dashed var(--color-border);font-size:var(--text-md)}
.b-stat b{font-weight:var(--weight-extrabold)}
.b-stat span{color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.b-note{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-xs);color:var(--color-text-muted)}
.b-note svg{color:var(--color-warning);margin-top:5px;flex:none}
.b-list{display:flex;flex-direction:column;gap:var(--space-2)}
.brow{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-3);
  border:1px solid var(--color-border);border-radius:var(--radius-md);padding:11px var(--space-4);cursor:pointer;
  background:var(--color-surface);transition:border-color var(--transition-fast),background var(--transition-fast)}
.brow:hover{border-color:var(--color-border-strong)}
.brow.is-sel{border-color:var(--color-accent);background:var(--color-accent-soft)}
.brow input{position:absolute;opacity:0;pointer-events:none}
.brow:focus-within{outline:2px solid var(--color-accent);outline-offset:2px}
.b-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--color-border-strong);position:relative;
  transition:border-color var(--transition-fast);flex:none}
.brow.is-sel .b-dot{border-color:var(--color-accent)}
.brow.is-sel .b-dot::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--color-accent)}
.b-val{font-weight:var(--weight-bold);font-size:var(--text-md)}
.b-price{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.b-price small{font-size:var(--text-2xs)}
.b-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4);
  padding-top:var(--space-4);border-top:1px dashed var(--color-border);flex-wrap:wrap}
.b-sum{font-size:var(--text-sm);color:var(--color-text-muted)}
.b-sum b{color:var(--color-text-primary);font-weight:var(--weight-extrabold)}
.cmp thead th{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-strong);
  font-weight:var(--weight-extrabold);font-size:var(--text-md);text-align:center}
.cmp th.tf,.cmp td.tf{text-align:start}
.cmp th.cpop,.cmp td.cpop{background:var(--color-accent-faint)}
.cmp thead th.cpop{background:var(--color-accent-faint-strong);color:var(--color-accent-ink)}
.cmp tbody td{padding:10px var(--space-4);border-bottom:1px solid var(--color-border);text-align:center;
  color:var(--color-text-secondary);font-size:var(--text-sm)}
.cmp td.tf{font-weight:var(--weight-semibold);font-size:var(--text-base)}
.cmp tr.mgrp td{background:var(--color-surface-secondary);font-weight:var(--weight-extrabold);
  font-size:var(--text-xs);color:var(--color-text-muted);padding:8px var(--space-4)}
.th-b{display:block;font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--color-accent-ink);
  background:var(--color-accent-soft);padding:2px 8px;border-radius:var(--radius-pill);margin:5px auto 0;width:max-content}
.cy .ic-s{color:var(--color-accent);display:inline-block;vertical-align:middle}
.cn{color:var(--color-text-disabled)}
.pillc{display:inline-block;font-size:11px;font-weight:var(--weight-bold);padding:2px 10px;
  border-radius:var(--radius-pill);background:var(--color-bg-secondary);color:var(--color-text-muted)}
.cnum{font-weight:var(--weight-extrabold);color:var(--color-text-primary);font-size:var(--text-md)}
.ctxt{font-size:var(--text-xs)}
.m-legend{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--color-text-disabled)}
#mMob{display:none}
.mtabs{margin-bottom:var(--space-4)}
.mplan{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden}
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}
.mp-name{font-size:var(--text-lg);font-weight:var(--weight-extrabold)}
.mp-price{display:block;font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.mg{margin:0;background:var(--color-surface-secondary);padding:8px var(--space-5);
  font-size:var(--text-2xs);font-weight:var(--weight-extrabold);color:var(--color-text-muted)}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:11px var(--space-5);
  border-bottom:1px solid var(--color-border);font-size:var(--text-sm)}
.mrow:last-child{border-bottom:0}
.mrow>span:first-child{color:var(--color-text-secondary);font-weight:var(--weight-semibold)}
@media(max-width:920px){#mDesk{display:none}#mMob{display:block}
  .cred-panel,.brand-panel{grid-template-columns:1fr;gap:var(--space-6)}}
@media(max-width:640px){.topups{grid-template-columns:1fr}
  .crow{grid-template-columns:88px 1fr 88px;gap:8px}
  .cred-groups{grid-template-columns:1fr}
  .cred-panel,.brand-panel{padding:var(--space-5)}
  .b-foot{flex-direction:column;align-items:stretch}
  .b-foot .btn{width:100%}
  .seg button{padding:8px var(--space-4);font-size:var(--text-sm)}
  .mrow,.mp-head{padding-inline:var(--space-4)}
  .trust{gap:var(--space-3) var(--space-5)}}

/* ===== learn / tutorial cards ===== */
.tut{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
.tut:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.tut__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.tut h3{font-size:var(--text-lg)}
.tut h3 a{color:inherit;text-decoration:none}
.tut h3 a:hover{color:var(--color-accent-ink)}
.tut p{font-size:var(--text-sm);color:var(--color-text-muted)}
.tut__meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:var(--space-3);
  border-top:1px dashed var(--color-border);font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.tut__meta span{display:inline-flex;align-items:center;gap:5px}
.tut__meta .ic-xs{color:var(--color-accent)}
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.pstep{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);
  padding:var(--space-5)}
.pstep__n{width:34px;height:34px;border-radius:var(--radius-md);background:var(--color-accent-soft);color:var(--color-accent-ink);
  display:grid;place-items:center;font-weight:var(--weight-extrabold);font-size:var(--text-md);margin-bottom:var(--space-3)}
.pstep b{font-size:var(--text-md);font-weight:var(--weight-extrabold)}
.pstep p{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:6px;line-height:1.9}
@media(max-width:920px){.path{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.path{grid-template-columns:1fr}}

/* ===== article layout ===== */
.article{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--space-10);align-items:start}
.article__main{max-width:var(--container-readable)}
.toc{position:sticky;top:calc(var(--header-height) + 24px);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface);padding:var(--space-4)}
.toc__h{font-size:var(--text-xs);font-weight:var(--weight-extrabold);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.toc a{display:block;font-size:var(--text-sm);color:var(--color-text-secondary);text-decoration:none;
  padding:6px 0;font-weight:var(--weight-semibold);border-bottom:1px dashed var(--color-border)}
.toc a:last-child{border:0}
.toc a:hover{color:var(--color-accent-ink)}
.prose h2{font-size:var(--text-xl);margin:var(--space-8) 0 var(--space-3);padding-inline-start:var(--space-3);
  border-inline-start:3px solid var(--color-accent)}
.prose h3{font-size:var(--text-md);margin:var(--space-5) 0 var(--space-2)}
.prose p{color:var(--color-text-secondary);font-size:var(--text-base);margin-bottom:var(--space-3)}
.prose ul{margin:0 0 var(--space-3);padding-inline-start:var(--space-5);color:var(--color-text-secondary);font-size:var(--text-base)}
.prose ul li{margin-bottom:6px}
.prose .callout{display:flex;gap:12px;align-items:flex-start;background:var(--color-accent-faint);
  border:1px solid var(--color-accent-faint-strong);border-radius:var(--radius-md);padding:var(--space-4);
  margin:var(--space-5) 0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.prose .callout .ic{color:var(--color-accent);margin-top:4px;flex:none}
.steps{list-style:none;counter-reset:st;margin:var(--space-4) 0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{counter-increment:st;display:flex;gap:12px;align-items:flex-start;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  font-size:var(--text-base);color:var(--color-text-secondary)}
.steps li::before{content:counter(st);width:26px;height:26px;border-radius:8px;background:var(--color-accent-soft);
  color:var(--color-accent-ink);font-size:var(--text-xs);font-weight:var(--weight-extrabold);display:grid;place-items:center;flex:none}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-10)}
.art-nav a{display:flex;flex-direction:column;gap:4px;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-4);text-decoration:none;
  transition:border-color var(--transition-fast),transform var(--transition-fast)}
.art-nav a:hover{border-color:var(--color-accent);transform:translateY(-2px)}
.art-nav small{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--weight-bold)}
.art-nav b{font-size:var(--text-base);color:var(--color-text-primary);font-weight:var(--weight-bold)}
.art-nav a:last-child{text-align:end}
@media(max-width:920px){.article{grid-template-columns:1fr}.toc{position:static;display:none}}

/* ===== auth pages ===== */
.auth{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:stretch;max-width:920px;
  margin:var(--space-10) auto var(--space-12)}
.auth__panel{position:relative;overflow:hidden;background:var(--color-premium-bg);border:1px solid var(--color-premium-border);
  border-radius:var(--radius-2xl);padding:var(--space-8);color:var(--color-premium-text);display:flex;flex-direction:column;gap:var(--space-4)}
.auth__panel::before{content:"";position:absolute;top:-70px;inset-inline-end:-60px;width:300px;height:250px;
  background:radial-gradient(closest-side,var(--color-glow-strong),transparent 72%);pointer-events:none}
.auth__panel h2{font-size:var(--text-xl);position:relative}
.auth__panel p{color:var(--color-premium-muted);font-size:var(--text-sm);position:relative}
.auth__panel ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:10px;position:relative}
.auth__panel ul li{display:flex;gap:9px;align-items:flex-start;font-size:var(--text-sm);color:#c7d4cf}
.auth__panel ul .ic-xs{color:var(--color-premium-accent);margin-top:6px}
.auth__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);
  padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.auth__card h1{font-size:var(--text-2xl)}
.auth__sub{font-size:var(--text-sm);color:var(--color-text-muted)}
.auth__form{display:flex;flex-direction:column;gap:var(--space-4)}
.auth__alt{text-align:center;font-size:var(--text-sm);color:var(--color-text-muted)}
.auth__alt a{color:var(--color-accent-ink);font-weight:var(--weight-bold)}
.auth__row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.auth__row .lnk{font-size:var(--text-sm);text-decoration:none}
.auth__check{display:flex;gap:8px;align-items:center;font-size:var(--text-sm);color:var(--color-text-secondary);
  font-weight:var(--weight-semibold);cursor:pointer}
@media(max-width:880px){.auth{grid-template-columns:1fr;max-width:480px}.auth__panel{order:2}}

/* ===== contact ===== */
.contact-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-6);align-items:start}
.contact-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);
  padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.contact-form .f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.contact-aside{display:flex;flex-direction:column;gap:var(--space-4)}
.link-card{display:flex;gap:12px;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-4);text-decoration:none;
  transition:border-color var(--transition-fast),transform var(--transition-fast)}
.link-card:hover{border-color:var(--color-accent);transform:translateY(-2px)}
.link-card i{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-accent-soft);
  color:var(--color-accent-ink);display:grid;place-items:center;flex:none}
.link-card b{display:block;font-size:var(--text-base);color:var(--color-text-primary);font-weight:var(--weight-extrabold)}
.link-card small{font-size:var(--text-xs);color:var(--color-text-muted)}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}.contact-form .f2{grid-template-columns:1fr}}

/* ===== legal ===== */
.legal{max-width:760px;margin-inline:auto}
.draft-badge{display:inline-flex;align-items:center;gap:7px;background:var(--color-warning-soft);color:var(--color-warning);
  font-size:var(--text-xs);font-weight:var(--weight-bold);padding:6px 14px;border-radius:var(--radius-pill);margin-top:var(--space-4)}
.legal__toc{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-5);margin:var(--space-6)}
.legal__toc ol{margin:0;padding-inline-start:var(--space-5);color:var(--color-text-secondary);font-size:var(--text-sm)}
.legal__toc a{color:var(--color-accent-ink);text-decoration:none}
.legal__toc a:hover{text-decoration:underline}
.legal section{margin-top:var(--space-8)}
.legal h2{font-size:var(--text-lg);padding-inline-start:var(--space-3);border-inline-start:3px solid var(--color-accent)}
.legal p{color:var(--color-text-secondary);font-size:var(--text-base);margin-top:var(--space-3)}
.legal ul{margin:var(--space-3) 0 0;padding-inline-start:var(--space-5);color:var(--color-text-secondary);font-size:var(--text-base)}
.legal li{margin-bottom:6px}
.ph{background:var(--color-warning-soft);color:var(--color-warning);border-radius:6px;padding:1px 8px;
  font-weight:var(--weight-bold);font-size:var(--text-sm);white-space:nowrap}

/* ===== status page ===== */
.st-hero{border:1px solid var(--color-border);border-radius:var(--radius-2xl);background:var(--color-surface);
  padding:var(--space-6);display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.st-hero__ic{width:52px;height:52px;border-radius:var(--radius-lg);background:var(--color-surface-secondary);
  border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-text-muted);flex:none}
.st-hero b{font-size:var(--text-lg);font-weight:var(--weight-extrabold)}
.st-hero p{font-size:var(--text-sm);color:var(--color-text-muted)}
.st-hero .chip{margin-inline-start:auto}
.comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.comp{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.comp__h{display:flex;align-items:center;gap:10px}
.comp__h i{width:38px;height:38px;border-radius:var(--radius-md);background:var(--color-surface-secondary);
  border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-text-secondary)}
.comp__h b{font-size:var(--text-md);font-weight:var(--weight-extrabold)}
.comp__h .chip{margin-inline-start:auto}
.comp p{font-size:var(--text-sm);color:var(--color-text-muted)}
.comp__foot{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:var(--color-text-disabled);
  padding-top:var(--space-3);border-top:1px dashed var(--color-border);font-weight:var(--weight-semibold)}
@media(max-width:880px){.comp-grid{grid-template-columns:1fr}}
.hist-row{display:grid;grid-template-columns:110px 1fr auto;gap:var(--space-4);align-items:center;
  padding:10px 0;border-bottom:1px solid var(--color-border);font-size:var(--text-sm)}
.hist-row:last-child{border:0}
.hist-row time{color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.hist-row span{color:var(--color-text-secondary)}

/* ===== 404 ===== */
.nf{text-align:center;padding:var(--space-16) 0 var(--space-20)}
.nf__code{font-size:clamp(72px,14vw,130px);font-weight:var(--weight-black);line-height:1;
  background:linear-gradient(140deg,var(--color-accent),var(--color-premium-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nf h1{font-size:var(--text-2xl);margin:var(--space-4) 0 var(--space-2)}
.nf p{color:var(--color-text-muted);max-width:420px;margin:0 auto}
.nf__btns{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap}

/* ===== pricing teaser (home) ===== */
.plans--teaser .plan-card--featured{margin-block-start:0;padding-block-start:var(--space-6)}

/* ===== roadmap / direction rows ===== */
.drow{display:flex;gap:14px;align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-4)}
.drow i{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-surface-secondary);
  border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-text-secondary);flex:none}
.drow b{display:block;font-size:var(--text-base);font-weight:var(--weight-extrabold)}
.drow small{display:block;font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.9;margin-top:3px}
.drow .chip{margin-inline-start:auto;flex:none}

/* ===== search input (learn) ===== */
.search-box{position:relative;max-width:520px;margin:var(--space-5) auto 0}
.search-box .ic{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:14px;color:var(--color-text-muted)}
.search-box .input{height:50px;padding-inline-start:42px;font-size:var(--text-md);border-radius:var(--radius-lg);
  background:var(--color-surface);box-shadow:var(--shadow-sm)}

/* inside the Android WebView bundle (file://), download UI is hidden */
html.is-file .dl-only{display:none!important}