/* frontdesk — shared theme (dark phosphor-mint). Linked by every page. */
:root{
  color-scheme: dark light;
  --bg:#0a0f0d;
  --bg2:#0d1512;
  --panel:#101a16;
  --panel2:#0c1410;
  --line:#1c2b25;
  --line2:#26382f;
  --ink:#e4f0ea;
  --soft:#8fa89d;
  --mut:#5f7a6f;
  --sig:#3ff0a8;      /* phosphor mint */
  --sig-dim:#1f9e73;
  --amber:#ffcf5c;
  --wa:#25d366;
  --glow:0 0 0 1px rgba(63,240,168,.10), 0 0 22px -12px rgba(63,240,168,.20);
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eef3f0;
    --bg2:#e6ede9;
    --panel:#ffffff;
    --panel2:#f4f8f5;
    --line:#d3e0d9;
    --line2:#c2d4ca;
    --ink:#0d1a15;
    --soft:#3f584d;
    --mut:#6c8578;
    --sig:#0b8f5f;
    --sig-dim:#12a06d;
    --amber:#a5730a;
    --wa:#128c3e;
    --glow:0 0 0 1px rgba(11,143,95,.22), 0 10px 34px -14px rgba(11,143,95,.4);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.54; font-size:15px;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(120% 80% at 82% -8%, rgba(63,240,168,.045), transparent 62%),
    radial-gradient(90% 60% at 0% 0%, rgba(63,240,168,.025), transparent 58%);
  background-attachment:fixed;
}
@media (prefers-color-scheme: light){
  body{ background-image:
    radial-gradient(120% 80% at 82% -8%, rgba(11,143,95,.10), transparent 60%),
    radial-gradient(90% 60% at 0% 0%, rgba(11,143,95,.05), transparent 55%);
  }
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1500px; margin:0 auto; padding:0 clamp(22px,4vw,64px)}
.wrap.narrow{max-width:560px}
.mono{font-family:var(--mono)}
.ey{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--sig); font-weight:600}

/* header */
header{position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:52px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.01em; font-size:17px}
.logo{width:26px; height:26px; flex:none}
.nav-r{display:flex; align-items:center; gap:22px}
.nav-r a{font-size:13.5px; color:var(--soft); font-family:var(--mono)}
.nav-r a:hover{color:var(--sig)}
.nav-r a.cta-link{color:var(--sig); border:1px solid var(--sig-dim); border-radius:8px; padding:7px 13px}
.nav-r a.cta-link:hover{background:color-mix(in srgb, var(--sig) 12%, transparent)}
.live{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--sig); letter-spacing:.06em}
.pulse{width:7px; height:7px; border-radius:50%; background:var(--sig); box-shadow:0 0 0 0 var(--sig); animation:pulse 3s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sig) 40%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion: reduce){ .pulse{animation:none} }
@media (max-width:620px){ .nav-r a.hidesm{display:none} }

/* hero */
.hero{padding:32px 0 16px; display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center}
@media (max-width:860px){ .hero{grid-template-columns:1fr; gap:22px; padding:24px 0 10px} }
h1{font-size:clamp(27px,4.4vw,40px); line-height:1.05; letter-spacing:-.025em; margin:11px 0 12px; font-weight:800}
h1 .g{color:var(--sig)}
.lede{font-size:clamp(14.5px,1.6vw,16.5px); color:var(--soft); max-width:52ch; margin:0 0 16px}
.lede b{color:var(--ink); font-weight:600}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:14px; font-weight:600;
  padding:12px 20px; border-radius:9px; border:1px solid var(--line2); background:var(--panel); color:var(--ink); transition:.16s; cursor:pointer}
.btn:hover{border-color:var(--sig); color:var(--sig)}
.btn.pri{background:var(--sig); color:#04140d; border-color:var(--sig); box-shadow:var(--glow)}
.btn.pri:hover{color:#04140d; filter:brightness(1.06)}

/* phone/chat mock */
.phone{background:var(--panel); border:1px solid var(--line2); border-radius:18px; padding:11px; box-shadow:0 30px 70px -30px rgba(0,0,0,.6), var(--glow)}
.phbar{display:flex; align-items:center; justify-content:space-between; padding:3px 6px 9px; border-bottom:1px solid var(--line); margin-bottom:9px}
.phbar .who{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600}
.avatar{width:30px;height:30px;border-radius:50%; background:var(--sig-dim); display:grid; place-items:center; color:#04140d; font-family:var(--mono); font-weight:700; font-size:13px}
.phbar .st{font-family:var(--mono); font-size:11px; color:var(--sig); display:flex; align-items:center; gap:6px}
.thread{display:flex; flex-direction:column; gap:8px; padding:2px 4px 4px}
.bub{max-width:82%; padding:8px 11px; border-radius:13px; font-size:13px; line-height:1.4}
.in{align-self:flex-start; background:var(--panel2); border:1px solid var(--line); border-bottom-left-radius:5px}
.out{align-self:flex-end; background:var(--sig); color:#04140d; border-bottom-right-radius:5px; font-weight:500}
.tag{align-self:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--mut); text-transform:uppercase;
  border:1px dashed var(--line2); border-radius:20px; padding:3px 11px; margin:2px 0}

/* section scaffolding */
section{padding:20px 0}
.shead{max-width:64ch; margin-bottom:14px}
.shead h2{font-size:clamp(19.5px,2.3vw,24px); line-height:1.14; letter-spacing:-.02em; margin:7px 0 8px; font-weight:800}
.shead p{color:var(--soft); margin:0}
.divider{height:1px; background:var(--line); border:0; margin:0}

/* routing diagram */
.route{background:var(--panel2); border:1px solid var(--line); border-radius:16px; padding:22px; overflow-x:auto}
.route pre{margin:0; font-family:var(--mono); font-size:13px; line-height:1.72; color:var(--soft); white-space:pre; min-width:520px}
.route pre .h{color:var(--sig); font-weight:700}
.route pre .b{color:var(--ink); font-weight:600}
.route pre .d{color:var(--mut)}

/* connect + flow diagram (inline SVG, theme-driven) */
.dgm-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:stretch}
@media (max-width:760px){ .dgm-grid{grid-template-columns:1fr; gap:26px} }
.dgm{background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:14px 13px 13px}
.dgm-h{font:700 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sig); margin:0 0 12px; display:flex; align-items:center; gap:8px}
.dgm-h .num{display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--sig); color:#04140d; font-size:11px; font-weight:800}
.dgm svg{width:100%; max-width:400px; height:auto; display:block; margin-inline:auto}
.dgm-cap{font:500 12.5px/1.5 var(--sans); color:var(--soft); margin:12px 2px 0}
.dgm-cap b{color:var(--ink); font-weight:600}
#diagram text{font-family:var(--sans)}
#diagram .d-hub-t{fill:#04140d; font-weight:800}
#diagram .d-hub-s{fill:#04140d; font-weight:600}
#diagram .d-lbl{fill:var(--ink); font-weight:700}
#diagram .d-sub{fill:var(--soft); font-weight:500}
#diagram .d-mut{fill:var(--mut); font-weight:600}
#diagram .d-node{fill:var(--panel); stroke:var(--line2); stroke-width:1.5}
#diagram .d-hi{fill:var(--panel); stroke:var(--sig); stroke-width:2}
#diagram .d-dash{fill:none; stroke:var(--sig-dim); stroke-width:1.6; stroke-dasharray:5 5}
#diagram .d-link{fill:none; stroke:var(--sig-dim); stroke-width:1.8}
#diagram .d-badge{fill:var(--sig)}

/* compact horizontal step strip (how it works) */
.steps{display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin-top:4px}
.steps-col{flex-direction:column; align-items:stretch}
.steps-col .step{flex:0 0 auto}
.step{flex:1 1 150px; display:flex; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 13px}
.step.hi{border-color:var(--sig-dim)}
.step .sn{flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:var(--sig); color:#04140d; font:800 12px/1 var(--mono)}
.step .stx{font:600 13px/1.3 var(--sans); color:var(--ink)}
.step .stx small{display:block; font:500 11px/1.3 var(--mono); color:var(--mut); margin-top:2px}
@media (max-width:640px){ .step{flex:1 1 100%} }

/* feature grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px}
@media (max-width:820px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .grid{grid-template-columns:1fr} }
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 14px; transition:.18s}
.card:hover{border-color:var(--line2); transform:translateY(-2px)}
.card .ic{width:27px; height:27px; border-radius:7px; background:var(--panel2); border:1px solid var(--line2); display:grid; place-items:center; color:var(--sig); margin-bottom:9px}
.card h3{font-size:14.5px; margin:0 0 4px; letter-spacing:-.01em}
.card p{margin:0; font-size:13px; color:var(--soft); line-height:1.48}
.card .k{display:block; font-family:var(--mono); font-size:10.5px; color:var(--mut); margin-top:8px; letter-spacing:.05em}

/* trust list */
.trust{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:720px){ .trust{grid-template-columns:1fr} }
.trow{display:flex; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:12px 14px}
.trow .n{font-family:var(--mono); color:var(--sig); font-size:12.5px; font-weight:700; flex:none; padding-top:1px}
.trow h4{margin:0 0 3px; font-size:14px}
.trow p{margin:0; font-size:12.5px; color:var(--soft); line-height:1.48}

/* stack strip */
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-family:var(--mono); font-size:11.5px; color:var(--soft); border:1px solid var(--line2); background:var(--panel);
  border-radius:20px; padding:5px 11px}
.chip b{color:var(--sig); font-weight:600}

/* CTA band */
.band{background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:26px 24px; text-align:center; box-shadow:var(--glow)}
.band h2{font-size:clamp(21px,2.8vw,27px); letter-spacing:-.02em; margin:0 0 8px; font-weight:800}
.band p{color:var(--soft); margin:0 auto 16px; max-width:46ch}

/* form (sign-in / connect page) */
.suf{display:grid; gap:18px; max-width:480px; margin:26px auto 0; text-align:left}
.fgroup{display:grid; gap:13px; background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:18px 16px}
.fgroup.hi{border-color:var(--sig-dim)}
.fgroup-h{display:flex; align-items:baseline; gap:8px}
.fgroup-h .ab{font:700 11px/1 var(--mono); color:#04140d; background:var(--sig); border-radius:6px; padding:4px 7px}
.fgroup-h .ti{font:700 12px/1.3 var(--mono); letter-spacing:.04em; color:var(--ink)}
.fgroup .note{margin:0; font:400 12.5px/1.5 var(--sans); color:var(--soft)}
.flabel{display:grid; gap:6px; font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.finput{font:400 15px/1 var(--sans); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--ink); outline:none}
.finput:focus{border-color:var(--sig)}
.chan-opt{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; font:500 14px/1 var(--sans); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:11px 12px; cursor:pointer; transition:.15s}
/* honeypot — off-screen decoy field for bots; never seen or reached by real users */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0}

/* footer */
footer{border-top:1px solid var(--line); margin-top:20px}
.foot{display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; justify-content:space-between; padding:26px 0 40px}
.foot .l{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; color:var(--mut)}
.foot a{font-family:var(--mono); font-size:13px; color:var(--soft)}
.foot a:hover{color:var(--sig)}
.foot .links{display:flex; flex-wrap:wrap; gap:20px}

/* ---- mobile / narrow widths (phone-first product) ---- */
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  section{padding:34px 0}
  .hero{padding:38px 0 12px}
  h1{font-size:clamp(31px,10vw,42px); margin:16px 0 16px}
  .lede{font-size:17px; margin:0 0 22px}
  .cta{gap:9px}
  .cta .btn{flex:1 1 100%; justify-content:center}     /* buttons stack full-width */
  .band{padding:26px 18px}
  .route{padding:14px}
  .phone{padding:11px}
  .shead{margin-bottom:22px}
  #chan{flex-direction:column}                          /* channel toggles stack */
}
@media (max-width:380px){
  h1{font-size:29px}
}

/* ── Yaakov: NO black anywhere — force the LIGHT base across the whole site ──
   Appended last so it overrides the default dark :root + body above. Matches
   the /start + auth-page light override for one consistent light system. */
:root{
  color-scheme: light;
  --bg:#f3f7f4; --bg2:#e9efeb; --panel:#ffffff; --panel2:#f5f9f6;
  --line:#dbe6e0; --line2:#c7d8ce; --ink:#0e1c16; --soft:#41594e; --mut:#6c8578;
  --sig:#0b8f5f; --sig-dim:#12a06d; --amber:#a5730a;
  --glow:0 0 0 1px rgba(11,143,95,.16), 0 10px 30px -16px rgba(11,143,95,.30);
}
body{
  background:var(--bg);
  background-image:
    radial-gradient(120% 80% at 82% -6%, rgba(11,143,95,.10), transparent 60%),
    radial-gradient(90% 60% at 0% 0%, rgba(11,143,95,.06), transparent 55%);
  background-attachment:fixed;
}