/* Ploa tokens, shared with design/prototype.html */
:root{
  --canvas:#f6f6f3;
  --surface:#ffffff;
  --sunken:#efefeb;
  --ink:#17181b;
  --ink-2:#4b4e55;
  --ink-3:#83868d;
  --line:#e5e4df;
  --lagoon:#13786f;
  --lagoon-soft:#e2f1ed;
  --sky:#3a6fc4;
  --r-pill:999px;
  --shadow:0 1px 0 rgba(23,24,27,.03), 0 1px 3px rgba(23,24,27,.05);
  --font:"Google Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Google Sans Code",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 16px 32px}
.mark{border-radius:16px;box-shadow:var(--shadow)}
h1{margin:20px 0 0;font-size:clamp(44px,9vw,72px);font-weight:600;letter-spacing:-.035em;line-height:1}
.tagline{margin:14px 0 0;max-width:30rem;font-size:clamp(18px,2.4vw,21px);color:var(--ink-2)}

.lane{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,64px));gap:5px;font-size:12px;color:var(--ink-3)}
.lane li{padding-top:12px;position:relative}
.lane li::before{content:"";position:absolute;inset-inline:0;top:0;height:6px;border-radius:var(--r-pill);background:var(--sunken)}
.lane li.done::before{background:var(--lagoon)}
.lane li.now{color:var(--ink);font-weight:500}
.lane li.now::before{background:var(--sky)}

.soon{margin:32px 0 0;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);background:var(--lagoon-soft);color:var(--lagoon);font-size:14px;font-weight:500}
.soon .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.cmd{margin-top:18px;padding:8px 14px;border-radius:10px;background:var(--ink);color:#e9eae6;font-family:var(--mono);font-size:14px;direction:ltr}
.cmd span{color:#7fd1c3}

footer{display:flex;justify-content:center;padding:24px 16px 32px}
.lang{display:grid;grid-template-columns:1fr 1fr;width:200px;padding:3px;border-radius:var(--r-pill);background:var(--sunken)}
.lang button{padding:6px 0;border-radius:var(--r-pill);font-size:13px;color:var(--ink-2);transition:background .2s var(--ease),color .2s}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
html[lang="he"] .lane{font-size:12.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}