@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800&display=swap');

/* The look follows OpenRouter: a near-white ground, near-black ink, a grey scale built from the
   ink at low opacity rather than from separate hex values, hairline borders and a small 6px
   radius. Heebo stays, because it is Avi's house font and it carries the same geometric feel in
   Hebrew that Plus Jakarta Sans carries in Latin.

   The brand green is pulled toward turquoise. Two stops, on purpose: the vivid one is for marks
   and fills, where it is a graphic; the deep one is for buttons and text, where it has to clear
   4.5:1 against white. */
:root{
  --ink:#03080A;
  --ink-2:rgba(3,8,10,.70);
  --mut:rgba(3,8,10,.48);
  --line:rgba(3,8,10,.10);
  --line-2:rgba(3,8,10,.20);
  --bg:#FFFFFF;
  --bg-2:#FCFCFE;
  --bg-3:rgba(3,8,10,.04);

  --brand:#12BFA6;          /* marks, dots, fills */
  --brand-deep:#0A7A6B;     /* buttons and text: 4.8:1 on white */
  --brand-ink:#075E53;      /* hover */
  --brand-soft:#E7F8F5;

  --warn-soft:#FFF8E8;
  --warn-line:rgba(180,130,10,.28);
  --warn-ink:#7A5800;
  --bad:#B42318; --bad-soft:#FEF3F2;

  --r:6px; --r-lg:8px; --max:720px;
  --font:'Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg-2);color:var(--ink);direction:rtl;line-height:1.6;font-size:15px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{letter-spacing:-.025em;margin:0}

/* ---------- sign in ---------- */
.gate{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 20px}
.gate .card{width:100%;max-width:400px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px 26px}
.mark{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.mark i{width:26px;height:26px;border-radius:7px;background:var(--brand-deep);display:block}
.mark b{font-size:.95rem;font-weight:700;letter-spacing:-.02em}
.gate h1{font-size:1.5rem;margin:0 0 7px;font-weight:800}
.gate p.sub{margin:0 0 24px;color:var(--ink-2);font-size:.92rem}
label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
input,textarea,select{width:100%;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);padding:11px 13px;transition:border-color .12s,box-shadow .12s}
input:focus,textarea:focus,select:focus{border-color:var(--brand-deep);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.code-input{letter-spacing:.45em;text-align:center;font-size:1.4rem;font-weight:700;padding:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:11px 18px;font:inherit;font-size:.95rem;font-weight:700;border:0;border-radius:var(--r);background:var(--brand-deep);color:#fff;cursor:pointer;transition:background .12s}
.btn:hover{background:var(--brand-ink)}
.btn[disabled]{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2);font-weight:600}
.btn.ghost:hover{background:var(--bg-3);color:var(--ink)}
.msg{margin-top:14px;font-size:.87rem;padding:10px 12px;border-radius:var(--r);display:none}
.msg.show{display:block}
.msg.err{background:var(--bad-soft);color:var(--bad)}
.msg.ok{background:var(--brand-soft);color:var(--brand-ink)}

/* ---------- shell ---------- */
.top{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px}
.brandline{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem}
.brandline i{width:24px;height:24px;border-radius:6px;background:var(--brand-deep);flex:none}
.brandline span{font-weight:400;font-size:.82rem;color:var(--mut)}
.linkbtn{background:none;border:0;font:inherit;font-size:.83rem;color:var(--mut);cursor:pointer;padding:6px;border-radius:4px}
.linkbtn:hover{color:var(--ink)}

main{padding:28px 0 72px}
.headline{margin-bottom:20px}
.headline .eyebrow{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:700}
.headline h1{font-size:1.75rem;margin:9px 0 10px;font-weight:800;line-height:1.15}
.headline .meta{color:var(--ink-2);font-size:.9rem;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--bg-3);color:var(--ink-2)}
.pill.live{background:var(--brand-soft);color:var(--brand-ink)}
.pill svg{width:13px;height:13px;flex:none}

/* progress rail, the one bit of chrome that says "you are here" */
.bar{height:4px;border-radius:999px;background:var(--bg-3);overflow:hidden;margin:14px 0 0}
.bar i{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width .5s cubic-bezier(.2,.7,.2,1)}

.notice{margin:18px 0;background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--r-lg);padding:15px 17px}
.notice h3{margin:0 0 9px;font-size:.92rem;color:var(--warn-ink)}
.notice ul{margin:0;padding-inline-start:18px;color:var(--ink-2);font-size:.9rem}
.notice li{margin-bottom:3px}

/* ---------- timeline ---------- */
.steps{margin-top:26px;position:relative}
.step{position:relative;padding-inline-start:34px;padding-bottom:26px}
.step::before{content:"";position:absolute;inset-inline-start:10px;top:22px;bottom:-2px;width:1.5px;background:var(--line)}
.step.done::before{background:var(--brand)}
.step:last-child::before{display:none}
.dot{position:absolute;inset-inline-start:2px;top:2px;width:19px;height:19px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:.2s}
.dot svg{display:none}
.step.done .dot{background:var(--brand);border-color:var(--brand)}
.step.done .dot svg{display:block;color:#fff}
.step.active .dot{border-color:var(--brand-deep);border-width:2px;box-shadow:0 0 0 4px var(--brand-soft)}
.step h3{font-size:.98rem;font-weight:700;letter-spacing:-.015em}
.step.pending h3{color:var(--mut);font-weight:500}
.step .when{font-size:.79rem;color:var(--mut);margin-top:2px}
.step .note{margin:7px 0 0;color:var(--ink-2);font-size:.89rem}
.panel{margin-top:13px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 17px}
.panel h4{margin:0 0 9px;font-size:.88rem;font-weight:700}
.doc-body{max-height:280px;overflow:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:.87rem;color:var(--ink-2);white-space:pre-wrap;line-height:1.7}
.signed{display:flex;align-items:center;gap:8px;color:var(--brand-ink);font-size:.87rem;font-weight:600}
.signed svg{width:14px;height:14px;flex:none}
.asks{list-style:none;margin:0;padding:0}
.asks li{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.89rem}
.asks li:last-child{border-bottom:0;padding-bottom:0}
.asks .tick{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);margin-top:3px;display:flex;align-items:center;justify-content:center}
.asks .tick svg{display:none;width:9px;height:9px;color:#fff}
.asks li.got .tick{background:var(--brand);border-color:var(--brand)}
.asks li.got .tick svg{display:block}
.asks li.got>span:last-child{color:var(--mut)}
.count{font-size:.79rem;color:var(--mut);font-weight:400}
.link{color:var(--brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.issue{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;font-size:.87rem}
.issue .st{font-size:.72rem;font-weight:700;color:var(--mut);margin-bottom:2px}
.field{margin-bottom:12px}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .headline h1{font-size:1.45rem}
  .panel{padding:14px 15px}
}