@import url('./fonts.css');

:root{

  --tabby-green:   #6CFF93;
  --tabby-bg:      rgba(255,255,255,.92);
  --tabby-bg-press:#ffffff;
  --tabby-edge:    rgba(16,44,40,.18);

  --bg:            #F4F6FA;
  --ink:           #0E1420;
  --ink-80:        rgba(14,20,32,.80);
  --ink-72:        rgba(14,20,32,.72);
  --ink-60:        rgba(14,20,32,.60);
  --ink-45:        rgba(14,20,32,.45);
  --ink-38:        rgba(14,20,32,.38);
  --hairline:      rgba(14,20,32,.12);

  --accent:        #2F6AE0;
  --accent-press:  #2757BC;
  --accent-tint:   rgba(47,106,224,.10);
  --accent-tint-2: rgba(47,106,224,.25);

  --glass:         rgba(255,255,255,.58);
  --glass-quiet:   rgba(255,255,255,.40);
  --glass-bar:     rgba(255,255,255,.62);
  --glass-edge:    rgba(255,255,255,.90);
  --blur:          blur(30px) saturate(1.6);
  --blur-bar:      blur(22px) saturate(1.5);

  --shadow-panel:  0 24px 60px rgba(14,20,32,.10);
  --shadow-bar:    0 10px 30px rgba(14,20,32,.08);
  --shadow-accent: 0 14px 32px rgba(47,106,224,.32);

  --r-panel: 28px;
  --r-sub:   20px;
  --r-pill:  999px;

  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:22px; --s6:26px; --s7:34px; --s8:44px;

  --font: 'Alexandria', system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }

body{
  font-family:var(--font);
  font-weight:300;
  font-size:13.5px;
  line-height:2.05;
  color:var(--ink-72);
  background:var(--bg);
  min-height:100vh;
}

body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(620px 340px at 88% -10%, rgba(47,106,224,.24), transparent 62%),
    radial-gradient(520px 300px at  6% 106%, rgba(47,106,224,.14), transparent 60%);
}

body[data-bloom="qa"]::before{
  background-image:
    radial-gradient(620px 340px at 10% -10%, rgba(47,106,224,.24), transparent 62%),
    radial-gradient(520px 300px at 94% 106%, rgba(47,106,224,.14), transparent 60%);
}
body[data-bloom="card"]::before{
  background-image:
    radial-gradient(620px 340px at 20% -10%, rgba(47,106,224,.24), transparent 62%),
    radial-gradient(520px 300px at 86% 106%, rgba(47,106,224,.14), transparent 60%);
}

h1,h2,h3{ font-weight:500; color:var(--ink); margin:0 }
h1{ font-size:clamp(28px,3.2vw,38px); line-height:1.25 }
h2{ font-size:clamp(23px,2.4vw,29px); line-height:1.3 }
h3{ font-size:15.5px; line-height:1.5 }
p{ margin:0 0 var(--s3) }
p:last-child{ margin-bottom:0 }
a{ color:var(--accent); text-decoration:none }
b,strong{ font-weight:500; color:var(--ink) }

.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block }

.eyebrow{

  font-size:11.5px; font-weight:500;
  color:var(--accent); line-height:1.6; margin:0 0 var(--s2);
}
.ltr.trk{ letter-spacing:.20em }
.meta{ font-size:11.5px; color:var(--ink-45); line-height:1.7 }
.muted{ color:var(--ink-60) }
.rule-line{ color:var(--accent) }

.panel{
  background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-panel);
  padding:var(--s6) var(--s7);
  box-shadow:var(--shadow-panel);
  animation:panel-in .24s var(--ease) both;
}
.panel--quiet{ background:var(--glass-quiet); border-color:rgba(255,255,255,.70); box-shadow:none }
.panel--current{ border-color:rgba(47,106,224,.35); box-shadow:0 18px 44px rgba(47,106,224,.14) }
.panel--pass{ border-color:var(--accent) }
@supports not (backdrop-filter: blur(1px)){ .panel{ background:rgba(255,255,255,.86) } }

.hr{ border:0; border-top:1px solid var(--hairline); margin:var(--s4) 0 }
.sep{ border-top:1px solid var(--hairline); padding-top:var(--s4); margin-top:var(--s4) }

.stack{ display:flex; flex-direction:column; gap:var(--s4) }
.row{ display:flex; align-items:center; gap:var(--s3) }
.row--between{ justify-content:space-between }
.push{ margin-inline-start:auto }

.bar{
  display:flex; align-items:center; gap:var(--s3);
  flex-wrap:wrap; margin-bottom:var(--s5);
}
.pill{
  background:var(--glass-bar);
  backdrop-filter:var(--blur-bar); -webkit-backdrop-filter:var(--blur-bar);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-bar);
}
.pill--brand{ display:flex; align-items:center; gap:var(--s3); padding:10px 20px }
.brand{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--ink) }
.brand-div{ width:1px; height:16px; background:var(--hairline) }
.slogan{ font-size:12px; font-weight:300; color:var(--ink-60) }
.nav{ display:flex; padding:5px; gap:2px }
.nav a{
  padding:7px 16px; border-radius:var(--r-pill); font-size:12.5px;
  color:var(--ink-60); transition:background .16s var(--ease), color .16s var(--ease);
}
.nav a[aria-current="page"]{ background:var(--ink); color:var(--bg) }
.bar-progress{ font-size:12px; color:var(--ink-60) }
.avatar{
  width:30px; height:30px; border-radius:var(--r-pill); background:var(--accent);
  color:#fff; display:grid; place-items:center; font-size:11px; font-weight:500;
}

.btn{
  font-family:var(--font); font-size:13px; font-weight:500; white-space:nowrap;
  border-radius:var(--r-pill); border:0; cursor:pointer; padding:15px 34px;
  background:var(--accent); color:#fff; box-shadow:var(--shadow-accent);
  transition:filter .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.btn:hover{ filter:brightness(1.06) }
.btn:active{ background:var(--accent-press); transform:translateY(1px) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn[disabled]{ opacity:.45; box-shadow:none; cursor:not-allowed; filter:none; transform:none }
.btn--compact{ padding:9px 22px; font-size:12.5px }
.btn--wide{ width:100%; }
.btn--secondary{ background:transparent; color:var(--ink); border:1px solid rgba(14,20,32,.16); box-shadow:none }
.btn--secondary:active{ background:transparent }

.btn--tabby{
  background:var(--tabby-bg); color:var(--ink); box-shadow:none;
  border:1px solid var(--tabby-edge);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-inline:20px; text-align:start;
}
.btn--tabby:hover{ filter:none; background:var(--tabby-bg-press); border-color:rgba(16,44,40,.32) }
.btn--tabby:active{ background:var(--tabby-bg-press) }
.btn--tabby:focus-visible{ outline:2px solid var(--tabby-green); outline-offset:2px }

.paymethod{ display:flex; flex-direction:column; gap:var(--s2) }
.paymethod--rejected .btn--tabby{ opacity:.62; cursor:not-allowed; filter:grayscale(.15) }
.paymethod--rejected .btn--tabby:hover{ background:var(--tabby-bg); border-color:var(--tabby-edge) }
.tabby-reject{
  margin:0; font-size:12.5px; line-height:1.7; color:var(--ink); text-align:start;
  padding:8px 12px; border-radius:10px; background:rgba(16,44,40,.06);
  border-inline-start:3px solid var(--tabby-green);
}

.btn-tabby__lead{ white-space:normal; font-size:12.5px; line-height:1.45 }

.tabby-mark{ flex:0 0 auto; margin-inline-start:auto; display:block; height:24px; width:auto }

.btn--quiet{
  background:none; box-shadow:none; color:var(--accent); font-weight:400;

  padding:6px 2px; min-height:32px; display:inline-flex; align-items:center;
}
.btn--quiet:active{ background:none; transform:none }

.chips{ display:inline-flex; padding:5px; gap:2px; flex-wrap:wrap }

.chip{
  font-family:var(--font); font-size:12.5px; padding:9px 18px; cursor:pointer;
  border-radius:var(--r-pill); color:var(--ink-72);
  background:rgba(255,255,255,.62); border:1px solid var(--hairline);
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.chip:hover{ border-color:var(--accent-tint-2); color:var(--ink) }
.chip[aria-pressed="true"]{ background:var(--accent); color:#fff; border-color:var(--accent) }

.opt{
  display:block; text-align:start; width:100%; cursor:pointer;
  border-radius:18px; padding:var(--s4) var(--s5);
  background:rgba(255,255,255,.62); border:1px solid var(--hairline);
  font-family:var(--font); color:var(--ink-72);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.opt:hover{ border-color:var(--accent-tint-2) }
.opt[aria-pressed="true"]{ background:var(--accent-tint); border-color:var(--accent) }
.opt__t{ display:block; font-size:13.5px; color:var(--ink); font-weight:500 }
.opt[aria-pressed="true"] .opt__t{ color:var(--accent) }
.opt__d{ display:block; font-size:12px; color:var(--ink-60); margin-top:2px }
.opts{ display:grid; gap:10px }
@media (min-width:721px){ .opts--2{ grid-template-columns:1fr 1fr } }
.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.field{
  display:block; width:100%; border:0; border-top:1px solid var(--hairline);
  padding:14px 0 0; min-height:96px; resize:vertical; background:transparent;
  font-family:var(--font); font-size:12.5px; font-weight:300; line-height:2;
  color:var(--ink);
}
.field::placeholder{ color:var(--ink-38) }
.field:focus{ outline:0; border-top-color:var(--accent) }
.field--single{ min-height:0; padding-bottom:6px }
.field--code{ direction:ltr; text-align:left; font-variant-ligatures:none }
.panel:focus-within{ border-color:var(--accent-tint-2) }
label.lbl{ display:block; font-size:12px; color:var(--ink-60); margin-bottom:2px }

.check{ display:flex; align-items:flex-start; gap:var(--s2); cursor:pointer; font-size:12.5px; color:var(--ink-72) }
.check input{ margin:6px 0 0; accent-color:var(--accent); width:16px; height:16px; flex:none }

.agree{ margin-top:var(--s3) }
.agree a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }

.waiver-gate__list{ margin:var(--s3) 0 0; padding-inline-start:1.15rem }
.waiver-gate__list li{ margin:.35rem 0 }
.waiver-gate__agree{ display:block; margin-top:var(--s4) }
.waiver-gate__agree input{ margin-inline-end:.5rem }
.waiver-gate .btn[disabled]{ opacity:.45; cursor:not-allowed }

.prompt-head{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3) }
.prompt-body{
  direction:ltr; text-align:left; font-size:12px; font-weight:300; line-height:2;
  color:var(--ink-72); white-space:pre-wrap; word-break:break-word;
  max-height:340px; overflow-y:auto; border-top:1px solid var(--hairline); padding-top:var(--s3);
}
.prompt-body[dir="rtl"]{ direction:rtl; text-align:start }

.gate-note{ font-size:12px; color:var(--ink-45); margin-top:var(--s2) }

.gate-note.pay-notice{
  font-size:13px; line-height:1.9; color:var(--ink-80);
  margin-top:var(--s3); padding:var(--s3) var(--s4);
  border:1px solid var(--accent-tint-2); border-radius:12px; background:var(--accent-tint);
}
.pay-notice a{ color:var(--accent); font-weight:500; text-decoration:underline }
.gate-fail{ color:var(--ink); font-weight:500 }
.gate-pass{ color:var(--accent); font-weight:500 }

.well{
  border-radius:var(--r-sub); background:var(--accent-tint); height:236px;
  display:grid; place-items:center; cursor:pointer;
}
.well__play{
  width:54px; height:54px; border-radius:var(--r-pill); background:#fff;
  box-shadow:0 10px 24px rgba(14,20,32,.14); display:grid; place-items:center;
}
.well__play::after{
  content:''; width:0; height:0;

  margin-left:3px;
  border-block:8px solid transparent; border-left:13px solid var(--accent);
}
.well-caption{ font-size:12px; color:var(--ink-60); margin-top:var(--s2) }

.ring{
  width:150px; height:150px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--accent) 0 var(--p,0%), rgba(14,20,32,.09) var(--p,0%));
  margin-inline:auto;
}
.ring__disc{
  width:120px; height:120px; border-radius:50%; background:var(--bg);
  display:grid; place-items:center; text-align:center; line-height:1.3;
}
.ring--sm{ width:44px; height:44px }
.ring--sm .ring__disc{ width:34px; height:34px; font-size:10px }
.track{ height:8px; border-radius:var(--r-pill); background:rgba(14,20,32,.09); overflow:hidden }
.track__fill{ height:100%; border-radius:var(--r-pill); background:var(--accent); transition:width .32s var(--ease) }

.answer{ display:flex; gap:12px }
.answer__rule{ width:2px; background:var(--accent); border-radius:2px; flex:none }
.sign{ color:var(--accent) }

.app{
  max-width:1180px; margin-inline:auto;
  padding:calc(var(--s6) + env(safe-area-inset-top))
          calc(var(--s7) + env(safe-area-inset-right))
          calc(96px + env(safe-area-inset-bottom))
          calc(var(--s7) + env(safe-area-inset-left));
}
.grid{ display:grid; gap:20px }
.grid--mission{ grid-template-columns:1.15fr 1fr; align-items:start }
.grid--split{ grid-template-columns:1fr 1fr; align-items:start }
.grid--card{ grid-template-columns:432px 1fr; align-items:start }
.grid--hero{ grid-template-columns:1fr 216px; align-items:stretch }
.col{ display:flex; flex-direction:column; gap:20px }
.col--fill > .panel:last-child{ flex:1 }
.narrow{ max-width:660px; margin-inline:auto }

.phase{ display:flex; align-items:flex-start; gap:var(--s4) }
.phase__name{ width:110px; flex:none }
.phase__chips{ display:flex; flex-wrap:wrap; gap:8px; flex:1 }
.mchip{
  border-radius:14px; padding:10px 12px; min-width:104px; cursor:pointer;
  border:1px solid transparent; background:transparent; text-align:start;
  font-family:var(--font); transition:transform .16s var(--ease), background .32s var(--ease);
  display:block;
}
.mchip__id{ font-size:11px; color:var(--accent); line-height:1.6 }
.mchip__title{ font-size:12.5px; color:var(--ink); line-height:1.5 }
.mchip--done{ background:var(--accent-tint); border-color:var(--accent-tint-2) }

.mchip--done .mchip__title{ position:relative; color:var(--ink-60) }
.mchip--done .mchip__title::after{
  content:''; position:absolute; inset-inline-start:0; top:52%;
  height:1.5px; background:var(--accent); border-radius:1px;
  width:100%; transform-origin:var(--edge-start, right) center;
  animation:strike .32s var(--ease) both;
}
@keyframes strike{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.mchip--current{ background:var(--accent); box-shadow:0 10px 24px rgba(47,106,224,.35) }
.mchip--current .mchip__id{ color:rgba(255,255,255,.75) }
.mchip--current .mchip__title{ color:#fff }
.mchip--locked{ border-color:var(--hairline); cursor:not-allowed }
.mchip--locked .mchip__id, .mchip--locked .mchip__title{ color:var(--ink-45) }
.mchip:not(.mchip--locked):hover{ transform:translateY(-1px) }
.mchip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.share{
  width:432px; height:548px; border-radius:32px; padding:var(--s7);
  background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge); box-shadow:0 34px 80px rgba(14,20,32,.16);
  display:flex; flex-direction:column; gap:var(--s4);
}
.share__idea{ font-size:33px; font-weight:400; line-height:1.55; color:var(--ink) }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

.fact{ background:var(--accent-tint); border-radius:16px; padding:var(--s3) var(--s4) }
.fact__k{ font-size:11px; font-weight:500; color:var(--accent) }
.fact__v{ font-size:12.5px; color:var(--ink); line-height:1.7 }

.mic{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap }
.mic__btn{
  width:54px; height:54px; border-radius:var(--r-pill); border:0; cursor:pointer; flex:none;
  background:var(--accent); box-shadow:var(--shadow-accent); display:grid; place-items:center;
}
.mic__btn[data-rec="1"]{ background:var(--accent-press) }
.mic__btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.level{ display:flex; align-items:flex-end; gap:3px; height:26px }
.level i{ width:3px; background:var(--accent-tint-2); border-radius:2px; height:6px; display:block }
.mic[data-rec="1"] .level i{ animation:lvl .9s var(--ease) infinite alternate }
.mic[data-rec="1"] .level i:nth-child(2){ animation-delay:.1s }
.mic[data-rec="1"] .level i:nth-child(3){ animation-delay:.2s }
.mic[data-rec="1"] .level i:nth-child(4){ animation-delay:.3s }
.mic[data-rec="1"] .level i:nth-child(5){ animation-delay:.15s }
.mic[data-rec="1"] .level i:nth-child(6){ animation-delay:.25s }
@keyframes lvl{ to{ height:24px; background:var(--accent) } }

.actions{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5) }
.actions .push{ margin-inline-start:auto }

@keyframes panel-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.bottom-nav{ display:none }
@media (max-width:720px){

  .app{
    padding:calc(var(--s4) + env(safe-area-inset-top))
            calc(var(--s4) + env(safe-area-inset-right))
            calc(28px + env(safe-area-inset-bottom))
            calc(var(--s4) + env(safe-area-inset-left));
  }
  .panel{ padding:var(--s5) var(--s5); border-radius:25px }
  .grid--mission,.grid--split,.grid--card,.grid--hero{ grid-template-columns:1fr }

  .bar{ flex-wrap:nowrap; gap:var(--s2) }
  .bar .nav, .bar .bar-progress{ display:none }
  .pill--brand{ flex:1; min-width:0; padding:10px 16px; overflow:hidden }
  .brand{ font-size:11.5px; white-space:nowrap }
  .slogan{ white-space:nowrap }
  .avatar{ flex:none }
  .phase{ flex-direction:column; gap:var(--s2) }
  .phase__name{ width:auto }
  .phase__chips{ flex-direction:column }
  .mchip{ width:100% }
  .btn{ width:100%; padding:15px 24px }
  .btn--compact{ width:auto }
  .btn--quiet{ width:auto; min-height:44px }
  .actions .btn{ width:100% }
  .actions{ flex-direction:column; align-items:stretch }
  .actions .push{ margin-inline-start:0 }
  .share{ width:100%; height:auto; aspect-ratio:432/548 }
  .share__idea{ font-size:26px }
  .well{ height:190px }
  .bottom-nav{
    display:flex; position:fixed; inset-inline:18px; z-index:40;
    bottom:calc(18px + env(safe-area-inset-bottom));
    padding:5px; justify-content:space-around;
  }
  .bottom-nav a{ flex:1; text-align:center }
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0ms !important; transition-duration:0ms !important }
}

.shell{ display:flex; gap:24px; max-width:1280px; margin-inline:auto; padding:var(--s6) var(--s7); min-height:100vh }
.side{
  width:224px; flex:none; position:sticky; top:var(--s6);
  align-self:flex-start; display:flex; flex-direction:column; gap:var(--s5);
  max-height:calc(100vh - 52px);
}
.side__brand{ padding:var(--s4) var(--s5); border-radius:24px }

.side__nav{ display:flex; flex-direction:column; gap:2px; padding:8px; border-radius:24px }
.side__nav a{
  display:flex; align-items:center; gap:var(--s3);
  padding:11px 14px; border-radius:16px; font-size:13px; color:var(--ink-60);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.side__nav a:hover{ background:rgba(255,255,255,.55); color:var(--ink) }
.side__nav a[aria-current="page"]{ background:var(--accent); color:#fff; box-shadow:var(--shadow-accent) }
.side__nav a[aria-current="page"] svg{ stroke:#fff }
.side__nav svg{ flex:none; stroke:var(--ink-45); transition:stroke .16s var(--ease) }
.side__foot{ margin-top:auto; padding:var(--s4) var(--s5); display:flex; align-items:center; gap:var(--s3); border-radius:24px }
.shell__main{ flex:1; min-width:0; padding-bottom:64px }

.tabbar{
  display:none; position:fixed; inset-inline:0; bottom:0; z-index:40;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom));
  justify-content:space-around; gap:2px;
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 4px 6px; border-radius:16px; font-size:10.5px; color:var(--ink-60);
}
.tabbar a svg{ stroke:var(--ink-45) }
.tabbar a[aria-current="page"]{ background:var(--accent); color:#fff }
.tabbar a[aria-current="page"] svg{ stroke:#fff }

.pagehead{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap }
.back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-60); padding:8px 14px;
  border-radius:var(--r-pill); border:1px solid var(--hairline);
  background:transparent; cursor:pointer; font-family:var(--font);
}
.back:hover{ color:var(--ink); border-color:rgba(14,20,32,.25) }
.back svg{ stroke:currentColor }
.mission-pager{ display:inline-flex; gap:8px }
.mission-preview{
  color:#7a5312; background:#fff8e8 !important; border-color:#efd79b !important;
}
.mission-preview p{ margin:0; font-size:12.5px; font-weight:500 }

@media (pointer: coarse) {
  .back{ min-height:44px; padding-block:11px }

  .mission-ask a,
  .meta.sep > a:only-child{
    display:inline-flex; align-items:center; min-height:44px;
  }
}
.crumb{ font-size:11.5px; color:var(--ink-45) }
.crumb b{ color:var(--ink-60); font-weight:400 }

.tool-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:var(--r-pill);
  background:var(--accent-tint); border:1px solid var(--accent-tint-2);
  font-size:11.5px; color:var(--ink); white-space:nowrap;
}
.tool-badge svg{ stroke:var(--accent); flex:none }

.tbl{ display:flex; flex-direction:column }
.tbl__row{ display:flex; gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--hairline); align-items:baseline }
.tbl__row:first-child{ border-top:0 }
.tbl__k{ width:132px; flex:none; font-size:12.5px; font-weight:500; color:var(--ink) }
.tbl__v{ font-size:12.5px; color:var(--ink-72) }

.term-en{ display:block; margin-top:2px; font-size:11px; font-weight:400; color:var(--ink-45) }
.tbl--models .tbl__k{ width:96px }

.steps{ display:flex; flex-direction:column }
.step{ display:flex; gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--hairline) }
.step:first-child{ border-top:0 }
.step__n{
  flex:none; width:30px; height:30px; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent);
  display:grid; place-items:center; font-size:12px; font-weight:500;
}
.step__t{ font-size:13.5px; font-weight:500; color:var(--ink); margin-bottom:2px }
.step__cmd{
  margin-top:var(--s2); display:flex; align-items:center; gap:var(--s2);
  background:rgba(14,20,32,.05); border-radius:12px; padding:9px 14px;
}
.step__cmd code{
  direction:ltr; text-align:left; font-size:12px; color:var(--ink);
  font-family:var(--font); overflow-x:auto; white-space:nowrap; flex:1;
  font-variant-ligatures:none;
}

.step__link{
  display:inline-block; margin-top:var(--s2); font-size:12.5px; color:var(--accent);
  text-decoration:underline; text-underline-offset:3px; word-break:break-all;
}
.step__link:hover{ color:var(--accent-press) }

.step__more{ margin-top:var(--s2) }
.step__more summary{
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:500; color:var(--accent); list-style:none;
  padding:5px 12px; border:1px solid var(--accent-tint-2); border-radius:var(--r-pill);
  background:var(--accent-tint);
}
.step__more summary::-webkit-details-marker{ display:none }
.step__more summary::before{ content:'＋'; font-weight:600 }
.step__more[open] summary::before{ content:'－' }
.step__steps{
  margin:var(--s3) 0 0; padding-inline-start:20px; display:flex;
  flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-72); line-height:1.9;
}
.step__steps li{ padding-inline-start:2px }
.step__instruction > span:not(.step__platform){ display:block }
.step__platform{
  display:inline-flex; align-items:center; min-height:24px; margin-bottom:5px;
  padding:1px 9px; border-radius:var(--r-pill); background:rgba(14,20,32,.06);
  color:var(--ink); font-size:11px; font-weight:600;
}
.step__ui-path,.step__checks{
  margin-top:8px; padding:10px 12px; border:1px solid var(--hairline);
  border-radius:12px; background:rgba(255,255,255,.54);
}
.step__ui-label{ display:block; margin-bottom:7px; color:var(--ink-60); font-size:11px; font-weight:600 }
.step__ui-path ol{
  margin:0; padding:0; list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:6px;
  counter-reset:ui-path;
}
.step__ui-path ol li{
  counter-increment:ui-path; min-width:0; padding:8px 9px;
  border-radius:9px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--hairline);
}
.step__ui-path ol li::before{
  content:counter(ui-path); display:grid; place-items:center; width:18px; height:18px;
  margin-bottom:5px; border-radius:50%; background:var(--accent-tint); color:var(--accent);
  font-size:10px; font-weight:700;
}
.step__ui-path li span,.step__checks li span{ display:block; color:var(--ink); font-weight:600 }
.step__ui-path li small,.step__checks li small{
  display:block; margin-top:1px; color:var(--ink-60); font-size:10.5px;
  overflow-wrap:anywhere;
}
.step__checks ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px }
.step__checks li{
  min-width:150px; flex:1; padding:7px 9px; border-radius:9px;
  background:var(--paper); box-shadow:inset 0 0 0 1px var(--hairline);
}

.hero{ text-align:center; padding:clamp(40px,9vh,96px) 0 var(--s7) }
.hero__slogan{
  font-size:clamp(44px,7vw,76px); font-weight:600; color:var(--ink);
  line-height:1.2; margin:0 0 var(--s3);
}
.hero__sub{ font-size:clamp(14px,1.6vw,17px); color:var(--ink-60); max-width:560px; margin-inline:auto }
.hero .btn{ margin-top:var(--s6); padding:17px 44px; font-size:14.5px }
.beats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:var(--s7) }
@media (max-width:720px){
  .shell{ flex-direction:column; padding:var(--s4) var(--s4) 56px }

  .shell__main{ padding-bottom:0 }
  .side{ display:none }
  .tabbar{ display:flex }
  .beats{ grid-template-columns:1fr }
  .hero{ padding-top:48px }
}

.bar--funnel{ justify-content:space-between }
.fsteps{ display:flex; align-items:center; gap:8px; padding:9px 18px; font-size:11px }

@media (max-width:720px){

  .bar--funnel{ flex-wrap:nowrap; gap:var(--s2) }
  .bar--funnel .pill--brand{ flex:none; padding:9px 14px }
  .bar--funnel .brand, .bar--funnel .brand-div{ display:none }
  .bar--funnel .slogan{ display:inline; font-size:12px; font-weight:500; color:var(--ink) }
  .fsteps{ flex:1; min-width:0; justify-content:flex-end; padding:7px 12px; font-size:10px; overflow:hidden }
  .fstep{ white-space:nowrap }
}
.fstep{ color:var(--ink-38); white-space:nowrap }
.fstep--done{ color:var(--ink-60) }
.fstep--at{ color:var(--accent); font-weight:500 }
.fstep-sep{ width:12px; height:1px; background:var(--hairline) }

.side__resume{
  display:flex; flex-direction:column; gap:2px;
  background:var(--accent); color:#fff; border-radius:20px;
  padding:var(--s4) var(--s5); box-shadow:var(--shadow-accent);
}
.side__resume-k{ font-size:10.5px; opacity:.75 }
.side__resume-t{ font-size:14px; font-weight:500 }
.side__resume-go{ font-size:11.5px; margin-top:6px; opacity:.9 }
.side__resume:hover{ filter:brightness(1.05) }

.land-hero{ max-width:780px; margin-inline:auto; text-align:center; padding:clamp(30px,6vh,64px) 0 var(--s5) }

.land-hero h1{ font-size:clamp(28px,4.2vw,46px); font-weight:600; line-height:1.32; margin-bottom:var(--s3) }
.land-hero .sub{ font-size:clamp(13.5px,1.5vw,15.5px); color:var(--ink-60); max-width:600px; margin-inline:auto }
.land-dump{ max-width:640px; margin-inline:auto; text-align:start }
.outcomes{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:840px; margin:var(--s8) auto 0 }
.faq-q{ font-size:13.5px; font-weight:500; color:var(--ink) }
@media (max-width:720px){ .outcomes{ grid-template-columns:1fr } }

.verdict{ font-size:clamp(24px,3vw,32px); font-weight:500; color:var(--ink); line-height:1.35 }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--hairline) }
.split > div{ padding:var(--s4) 0 }
.split > div:first-child{ border-inline-end:1px solid var(--hairline); padding-inline-end:var(--s5) }
.split > div:last-child{ padding-inline-start:var(--s5) }
.split h3{ font-size:12.5px; color:var(--accent); margin-bottom:var(--s2) }
.split li{ font-size:12.5px; color:var(--ink-72); line-height:2 }
.split ul{ margin:0; padding-inline-start:18px }
@media (max-width:720px){
  .split{ grid-template-columns:1fr }
  .split > div:first-child{ border-inline-end:0; border-bottom:1px solid var(--hairline); padding-inline-end:0 }
  .split > div:last-child{ padding-inline-start:0 }
}
.big-range{ font-size:clamp(34px,4.4vw,52px); font-weight:300; color:var(--accent); line-height:1.2 }

.sheet-wrap{ position:fixed; inset-inline:0; top:var(--vv-top,0px); height:var(--vv-h,100%); z-index:80; display:grid; place-items:center; padding:18px }
.sheet-wrap::before{ content:''; position:fixed; inset:0; background:rgba(14,20,32,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.sheet{ position:relative; width:min(440px,100%); max-height:100%; overflow-y:auto }
@media (max-width:720px){
  .sheet-wrap{ align-items:flex-end; padding:0 }
  .sheet{ width:100%; border-end-start-radius:0; border-end-end-radius:0 }
}

.lost{ text-align:center; padding:80px 0 }
.lost .ltr{ color:var(--ink-38); font-size:12px }

.panel > .eyebrow{ margin-bottom:6px }
.panel > h1, .panel > h2{ margin-bottom:10px }
.panel > h1 + .meta, .panel > h2 + .meta,
.panel > h1 + p, .panel > h2 + p{ margin-top:0 }

.sep{ margin-top:var(--s5); padding-top:var(--s5) }
.sep > h3:first-child, .sep > .eyebrow:first-child{ margin-top:0; margin-bottom:6px }
h3 + .meta{ margin-top:0; margin-bottom:var(--s3) }

.panel p + p{ margin-top:var(--s3) }
.panel p:last-child{ margin-bottom:0 }

.panel b, .panel strong{ font-weight:500 }

.stack > .panel:nth-child(2){ animation-delay:.04s }
.stack > .panel:nth-child(3){ animation-delay:.08s }
.stack > .panel:nth-child(4){ animation-delay:.12s }
.stack > .panel:nth-child(5){ animation-delay:.16s }
.stack > .panel:nth-child(6){ animation-delay:.20s }

.lift{ transition:transform .16s var(--ease), box-shadow .16s var(--ease) }
.lift:hover{ transform:translateY(-2px); box-shadow:0 28px 66px rgba(14,20,32,.13) }

@keyframes num-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.num{ animation:num-in .34s var(--ease) both }
.num:nth-child(2){ animation-delay:.06s }
.num:nth-child(3){ animation-delay:.12s }
.num:nth-child(4){ animation-delay:.18s }

.vs{ display:grid; grid-template-columns:1.05fr 1fr 1fr; gap:0; margin-top:var(--s4) }
.vs__h{ padding:var(--s3) var(--s4); font-size:12px; font-weight:500 }
.vs__h--us{ color:var(--accent) }
.vs__c{ padding:var(--s3) var(--s4); font-size:12.5px; border-top:1px solid var(--hairline); line-height:1.85 }
.vs__c--k{ color:var(--ink); font-weight:500 }
.vs__c--alone{ color:var(--ink-60) }
.vs__h--us, .vs__c--us{ background:var(--accent-tint); color:var(--ink) }
.vs__h--us{ border-start-start-radius:16px; border-start-end-radius:16px }
.vs__row:last-child .vs__c--us{ border-end-start-radius:16px; border-end-end-radius:16px }
@media (max-width:720px){
  .vs{ grid-template-columns:1fr }
  .vs__h{ display:none }
  .vs__c{ border-top:0; padding:3px var(--s3) }
  .vs__c--k{ border-top:1px solid var(--hairline); padding-top:var(--s3); margin-top:var(--s2) }
  .vs__c--alone::before{ content:'وحدك: '; color:var(--ink-45) }
  .vs__c--us::before{ content:'معنا: '; color:var(--accent) }
  .vs__c--us{ border-radius:12px; margin-bottom:var(--s2) }
}

.tvs{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s4); text-align:center }
.tvs__v{ font-size:clamp(22px,3vw,30px); font-weight:500; line-height:1.3 }
.tvs__v--us{ color:var(--accent) }
.tvs__k{ font-size:11.5px; color:var(--ink-60); margin-top:2px }
.tvs__sep{ color:var(--ink-38); font-size:12px }

.need-ask{ background:rgba(47,106,224,.05); border-radius:14px; padding:var(--s3) var(--s4); margin:var(--s2) 0 }
.need-ask__q{ font-size:13px; font-weight:500; color:var(--ink) }
.need-ask__w{ font-size:11.5px; color:var(--ink-60); margin-bottom:var(--s2) }

.cmd-note{
  display:flex; flex-direction:column; gap:3px;
  background:var(--accent-tint); border:1px solid var(--accent-tint-2);
  border-radius:14px; padding:var(--s3) var(--s4); margin:var(--s3) 0;
}
.cmd-note strong{ font-size:12.5px; font-weight:600; color:var(--accent) }
.cmd-note span{ font-size:11.5px; color:var(--ink-60); line-height:1.8 }
.cmd-note__act{ align-self:flex-start; margin-block-start:6px }

@media (max-width:720px){
  html{ -webkit-tap-highlight-color:transparent }
  body{ font-size:14px }

  .app, .shell{ padding-inline:12px }
  .panel{ padding:var(--s5) var(--s4); border-radius:20px }
  .narrow, .stack{ max-width:100% }

  h1{ font-size:26px; line-height:1.35 }
  h2{ font-size:21px }
  .verdict{ font-size:22px }
  .land-hero h1{ font-size:26px }

  .bar{ position:sticky; top:0; z-index:30; padding-block:8px;
        background:linear-gradient(var(--bg) 72%, transparent) }

  .btn{ min-height:46px }
  .chip{ min-height:38px; padding-inline:16px }
  .opt{ padding:var(--s4) }

  .field, input, textarea, select{ font-size:16px }

  .tbl__row{ flex-direction:column; align-items:flex-start; gap:2px }
  .tbl__k{ width:auto; font-size:12px; color:var(--ink-60) }
  .split{ grid-template-columns:1fr }

  .need .chips{ width:100%; justify-content:flex-start }
  .need .chips .chip{ flex:1 }

  .scope-item{ flex-direction:column; align-items:stretch; gap:var(--s2) }
  .scope-item__act{ width:100%; justify-content:flex-start }
  .scope-item__act .chip{ flex:1 }

  .ccard__body{ font-size:11px; padding:var(--s3) var(--s4); overflow-x:auto }

  .nums{ gap:10px }
  .num__v{ font-size:22px }
}

@media (max-width:380px){
  .nums{ grid-template-columns:1fr }
  .vs__price{ font-size:26px }
}

.intro{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:
    radial-gradient(760px 420px at 50% 42%, rgba(37,99,235,.30), transparent 66%),
    linear-gradient(180deg, #0B1B3E 0%, #081F4E 55%, #050F2B 100%);
  opacity:1; transition:opacity .5s var(--ease), transform .5s var(--ease);
}

.intro--out{ opacity:0; transform:translateY(-10px); pointer-events:none }
body.intro-on{ overflow:hidden }

.intro__in{ display:grid; justify-items:center; gap:0; text-align:center; padding:24px }

.intro__mark{
  width:116px; height:116px; display:block;

  filter:drop-shadow(0 0 26px rgba(0,184,255,.42)) drop-shadow(0 8px 26px rgba(0,0,0,.35));
  animation:in-mark .72s var(--ease) both;
}
.intro__name{
  margin-top:24px; font-size:clamp(22px,3.4vw,32px); font-weight:600;
  letter-spacing:.02em; color:#EAF4FF;
  animation:in-up .6s var(--ease) .28s both;
}

.intro__rule{
  width:132px; height:1px; margin:14px 0 12px;
  background:linear-gradient(90deg, transparent, rgba(0,184,255,.85), transparent);
  transform:scaleX(0); animation:in-rule .5s var(--ease) .62s both;
}
.intro__slogan{
  font-size:clamp(15px,2vw,19px); font-weight:400; color:rgba(234,244,255,.82);
  animation:in-up .6s var(--ease) .82s both;
}

@keyframes in-mark{
  from{ opacity:0; transform:translateY(10px) scale(.9) }
  to  { opacity:1; transform:none }
}
@keyframes in-up{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes in-rule{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

@media (prefers-reduced-motion: reduce){
  .intro__mark, .intro__name, .intro__rule, .intro__slogan{ animation:none }
  .intro__rule{ transform:none }
  .intro{ transition:opacity .2s linear }
}

.brandmark{ display:block; flex:none; width:22px; height:22px; object-fit:contain }
.brandmark--side{ width:34px; height:34px; margin-bottom:6px }
.side__brand{ display:grid; justify-items:start }

.native, .native *{ -webkit-tap-highlight-color:transparent }

.native .btn, .native .chip, .native .back, .native .tabbar,
.native .nav, .native .mfact, .native .end-row__k, .native button{
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}

.native body{ overscroll-behavior-y:none }
.native .scroll, .native .qa2-list{ -webkit-overflow-scrolling:touch }

.native .field, .native input, .native textarea{
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
}

@media (pointer: coarse) {
  .btn:hover, .chip:hover, .back:hover{ filter:none }
  .btn:active{ transform:scale(.985) }
  .chip:active, .back:active{ opacity:.7 }
}

.proj-switch{ display:flex; flex-direction:column; gap:8px; margin-block-end:14px }
.proj-switch__k{ font-size:12px; color:var(--ink-60); font-weight:500 }
.proj-switch__k .ltr{ color:var(--ink-45) }
.proj-switch__chips{
  display:flex; gap:8px; overflow-x:auto; padding-block-end:2px; scrollbar-width:thin;
}
.proj-chip{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; max-inline-size:220px;
  padding:8px 12px; border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:var(--glass); color:var(--ink); font:inherit; font-size:13px; cursor:pointer;
  text-align:start;
}
.proj-chip__n{ font-size:11px; font-weight:600; color:var(--ink-45) }
.proj-chip__t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.proj-chip--active{
  background:var(--accent-tint); border-color:var(--accent-tint-2);
  color:var(--accent-press); cursor:default;
}
.proj-chip--active .proj-chip__n{ color:var(--accent) }

.proj-chip[aria-busy="true"]{
  border-color:var(--accent-tint-2); color:var(--accent-press);
  animation:proj-chip-pulse 1s ease-in-out infinite;
}
.proj-chip:disabled:not([aria-busy="true"]){ opacity:.45; cursor:wait }
@keyframes proj-chip-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
@media (prefers-reduced-motion: reduce){ .proj-chip[aria-busy="true"]{ animation:none; opacity:.7 } }
.proj-chip--new{
  border-style:dashed; border-color:var(--accent-tint-2);
  color:var(--accent-press); background:transparent;
}
.proj-chip__plus{ font-size:16px; font-weight:600; line-height:1 }
.proj-chip--full{
  color:var(--ink-45); background:transparent; border-style:dashed; cursor:default;
}