/* GroupiApp — Phase 0 landing. RTL Hebrew.
   Tokens defined on bare :root (light), overridden for dark. */

:root{
  --bg:#fbfaf8;
  --bg-elev:#ffffff;
  --band:#f2efe9;
  --ink:#161513;
  --ink-2:#4a4741;
  --ink-3:#78736a;
  --line:#e3ded4;
  --brand:#e2483d;
  --brand-ink:#ffffff;
  --brand-soft:#fdeceb;
  --accent:#1f6f5c;
  --danger:#b3261e;
  --radius:16px;
  --radius-sm:10px;
  --maxw:1080px;
  --shadow:0 1px 2px rgba(20,18,15,.05), 0 8px 24px -12px rgba(20,18,15,.18);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131211;
    --bg-elev:#1c1a18;
    --band:#1a1917;
    --ink:#f4f1ec;
    --ink-2:#c2bcb2;
    --ink-3:#8f8981;
    --line:#2e2b27;
    --brand:#ff6b5e;
    --brand-ink:#1a0e0c;
    --brand-soft:#2a1a18;
    --accent:#5fbfa4;
    --danger:#ff8a80;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#131211; --bg-elev:#1c1a18; --band:#1a1917;
  --ink:#f4f1ec; --ink-2:#c2bcb2; --ink-3:#8f8981; --line:#2e2b27;
  --brand:#ff6b5e; --brand-ink:#1a0e0c; --brand-soft:#2a1a18;
  --accent:#5fbfa4; --danger:#ff8a80;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Heebo",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--brand);color:var(--brand-ink);padding:10px 16px;z-index:99;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{inset-inline-start:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:900;letter-spacing:-.02em}
.brand-mark{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--brand),var(--accent));display:inline-block;flex:0 0 auto}
.brand-name{font-size:19px}
.nav nav{display:flex;align-items:center;gap:8px}
.nav nav a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;padding:8px 10px;border-radius:var(--radius-sm)}
.nav nav a:hover{color:var(--ink);background:var(--band)}
.nav nav a.btn:hover{background:var(--brand)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:var(--brand-ink);
  border:1px solid transparent;border-radius:999px;
  padding:11px 22px;font:inherit;font-weight:700;font-size:16px;
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:8px 16px;font-size:15px}
.btn-lg{padding:14px 30px;font-size:17px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--band);filter:none}
.btn:disabled{opacity:.55;cursor:not-allowed}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:6px;
}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,9vw,104px) 0 clamp(36px,6vw,72px)}
.eyebrow{
  display:inline-block;margin:0 0 20px;padding:6px 14px;
  background:var(--brand-soft);color:var(--brand);
  border-radius:999px;font-size:14px;font-weight:700;
}
h1{
  margin:0 0 22px;font-size:clamp(38px,7.4vw,74px);line-height:1.06;
  font-weight:900;letter-spacing:-.035em;
}
h1 em{font-style:normal;color:var(--brand)}
.lede{font-size:clamp(18px,2.3vw,21px);color:var(--ink-2);margin:0 0 30px;max-width:60ch}
.lede.narrow{max-width:52ch}
.lede strong{color:var(--ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.micro{font-size:14px;color:var(--ink-3);margin:0}

/* ---------- bands ---------- */
.band{background:var(--band);border-block:1px solid var(--line);padding:clamp(40px,6vw,72px) 0;margin-block:clamp(40px,6vw,72px)}
.band.alt{background:transparent;border:0;margin-block:0}
.section-h{font-size:clamp(24px,3.4vw,34px);line-height:1.2;font-weight:900;letter-spacing:-.025em;margin:0 0 22px}

.enemy{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:62ch}
.enemy li{
  position:relative;padding-inline-start:30px;color:var(--ink-2);font-size:17px;
}
.enemy li::before{
  content:"";position:absolute;inset-inline-start:6px;top:.72em;
  width:9px;height:2px;background:var(--brand);border-radius:2px;
}
.enemy strong{color:var(--ink)}

/* ---------- steps ---------- */
.steps{padding-block:clamp(8px,2vw,16px)}
.grid3{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid3 li{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);
}
.num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--brand-soft);color:var(--brand);
  font-weight:900;font-size:17px;margin-bottom:14px;
}
.grid3 h3{margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.grid3 p{margin:0;color:var(--ink-2);font-size:16px}
.grid3 strong{color:var(--ink)}

/* ---------- card / form ---------- */
.card{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow);
  margin-block:clamp(40px,6vw,72px);
}
form{max-width:520px;margin-top:26px}
.field{margin-bottom:20px;border:0;padding:0}
.field > label,.field legend{display:block;font-weight:700;font-size:15px;margin-bottom:7px;padding:0}
input[type=email],input[type=text],input[type=tel]{
  width:100%;padding:13px 15px;font:inherit;font-size:16px;
  color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-sm);
}
input[type=email]::placeholder,input[type=text]::placeholder,input[type=tel]::placeholder{color:var(--ink-3)}
input[aria-invalid="true"]{border-color:var(--danger)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips span{
  display:inline-block;padding:9px 16px;border:1px solid var(--line);
  border-radius:999px;font-size:15px;color:var(--ink-2);background:var(--bg);
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.chips input:checked + span{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.chips input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

.consent .check{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-2);font-weight:400;cursor:pointer}
.consent input{margin-top:5px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand)}
.consent a{color:var(--ink)}

.err{color:var(--danger);font-size:14px;margin:6px 0 0;font-weight:500}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

.done{
  margin-top:26px;padding:24px;border-radius:var(--radius);
  background:var(--brand-soft);border:1px solid var(--brand);
}
.done h3{margin:0 0 6px;font-size:22px;font-weight:900}
.done p{margin:0;color:var(--ink-2)}

/* ---------- prose (legal / org pages) ---------- */
.prose{max-width:66ch;margin-block:clamp(36px,6vw,64px)}
.prose h1{font-size:clamp(30px,5vw,46px);margin-bottom:18px}
.prose h2{font-size:clamp(21px,2.8vw,26px);font-weight:800;letter-spacing:-.02em;margin:38px 0 10px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-inline-start:22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink)}
.prose a{color:var(--ink)}
.note{
  border-inline-start:3px solid var(--brand);background:var(--band);
  padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:24px 0;
}
.note p{margin:0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--band);padding:36px 0;margin-top:clamp(48px,7vw,88px)}
.foot-in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.foot p{margin:0;color:var(--ink-3);font-size:14px;max-width:52ch}
.foot nav{display:flex;flex-wrap:wrap;gap:16px}
.foot a{color:var(--ink-2);font-size:14px;text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}

@media (max-width:560px){
  .nav nav a:not(.btn){display:none}
  .hero-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- auth flow (join.html) ---------- */
.auth h1{font-size:clamp(26px,4vw,38px);margin:0 0 14px}
.auth h1:focus-visible,.done h3:focus-visible{outline:none}

.steps-bar{
  list-style:none;display:flex;gap:8px;margin:0 0 30px;padding:0;
  font-size:14px;color:var(--ink-3);flex-wrap:wrap;
}
.steps-bar li{
  display:flex;align-items:center;gap:8px;padding:5px 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);
}
.steps-bar li.is-current{border-color:var(--brand);color:var(--brand);font-weight:700}
.steps-bar li.is-done{color:var(--accent);border-color:var(--accent)}
.steps-bar li.is-done::before{content:"✓";font-weight:900}

.two{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:520px){ .two{grid-template-columns:1fr} }

.code-input{
  font-size:30px;letter-spacing:.42em;text-align:center;font-weight:700;
  font-variant-numeric:tabular-nums;padding-inline:10px;
}
.opt{font-weight:400;color:var(--ink-3);font-size:14px}

.linkish{
  background:none;border:0;padding:0;font:inherit;font-size:14px;
  color:var(--ink);text-decoration:underline;cursor:pointer;
}
.linkish:hover{color:var(--brand)}

.auth .btn-ghost{margin-inline-start:8px}
@media (max-width:520px){
  .auth .btn,.auth .btn-ghost{width:100%;margin:6px 0 0}
}

/* ---------- help / support ---------- */
.faq{border-top:1px solid var(--line);margin-top:26px}
.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq summary{
  cursor:pointer;padding:16px 4px;font-weight:700;font-size:17px;
  list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-weight:900;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details > *:not(summary){color:var(--ink-2);padding:0 4px 18px;margin:0}
.faq details p + p{padding-top:10px}

select{
  width:100%;padding:13px 15px;font:inherit;font-size:16px;
  color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-sm);
}
textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  min-height:150px;resize:vertical;
}
textarea::placeholder{color:var(--ink-3)}

.danger{
  border:1px solid var(--danger);border-radius:var(--radius);
  padding:22px;margin:26px 0;background:var(--bg-elev);
}
.danger h2{margin-top:0;color:var(--danger)}
.btn-danger{background:var(--danger);color:#fff}

/* ---------- tables in legal prose ---------- */
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:start;vertical-align:top}
.prose th{background:var(--band);font-weight:700;color:var(--ink);white-space:nowrap}
.prose td{color:var(--ink-2)}