/* מעטפה: one narrow column, one question group per screen, one bold moment (the envelope verdict). */
:root{
  --paper:#FFF8F1; --card:#FFFFFF; --ink:#17332D; --muted:#5D6E68; --line:#EFE4D6;
  --accent:#C8345A; --rose:#F0627C; --accent-soft:#FDE7EC;
  --green:#12312B; --sage:#DCEBE3; --gold:#F2C94C; --mint:#9DD9C5; --pink:#FFB3C4;
  --good:#1B7550; --good-soft:#DFF3E8; --bad:#B3261E; --bad-soft:#FBE4E2;
  --c1:#D43D62; --c2:#B98300; --c3:#0E8A78;
  --display:"Secular One","Rubik","Arial Hebrew",Arial,sans-serif;
  --body:"Rubik","Assistant","Arial Hebrew",Arial,sans-serif;
  --shadow:0 14px 34px -22px rgba(23,51,45,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38rem 26rem at 105% -6%,#FFDCE5 0,transparent 62%),radial-gradient(34rem 26rem at -12% 104%,#D9EFE4 0,transparent 62%)}
.wrap{max-width:34rem;margin:0 auto;padding:0 18px 7.5rem}
.view{display:flex;flex-direction:column;gap:16px}
.view.enter>*{animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
.view.enter>*:nth-child(2){animation-delay:.05s}.view.enter>*:nth-child(3){animation-delay:.1s}
.view.enter>*:nth-child(4){animation-delay:.15s}.view.enter>*:nth-child(n+5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes pop{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@keyframes fall{0%{transform:translateY(-30px) rotate(0);opacity:1}100%{transform:translateY(300px) rotate(560deg);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* top bar */
header.top{position:sticky;top:0;z-index:5;margin:0 -18px 14px;padding:12px 18px 10px;display:flex;flex-direction:column;gap:10px;
  background:rgba(255,248,241,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.toprow{display:flex;align-items:center;gap:10px}
.brand{all:unset;cursor:pointer;display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:1.3rem;line-height:1;margin-inline-end:auto}
.brand svg{width:26px;height:26px;flex:none}
.pill{font-size:.88rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--muted);white-space:nowrap;box-shadow:var(--shadow)}
.pill b{color:var(--ink);font-variant-numeric:tabular-nums}
.acct{all:unset;cursor:pointer;position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);flex:none;box-shadow:var(--shadow)}
.acct svg{width:20px;height:20px}
.acct.on{background:var(--green);border-color:var(--green);color:#FFF8F1}
.acct i{position:absolute;inset:auto auto -2px -2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--paper);background:var(--good)}
.acct.saving i{background:var(--gold)} .acct.err i{background:var(--bad)}
.acct:not(.on) i{display:none}
.brand:focus-visible,.acct:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:999px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.steps button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:var(--muted);text-align:center}
.steps button::before{content:"";height:6px;border-radius:3px;background:var(--line);transition:background .3s}
.steps button.done::before{background:var(--c3)}
.steps button.on::before{background:linear-gradient(90deg,var(--rose),var(--accent))}
.steps button.on{color:var(--ink);font-weight:700}
.steps button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.demobar{background:var(--gold);color:#3B2E00;border-radius:12px;padding:8px 12px;font-size:.92rem;display:flex;justify-content:space-between;gap:10px;align-items:center}
.demobar .link{color:#3B2E00}

h1{font-family:var(--display);font-weight:400;font-size:clamp(1.85rem,7.4vw,2.5rem);line-height:1.14;margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:1.55rem;line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
.lead{color:var(--muted);font-size:1.02rem}
.center{text-align:center}
.sh{display:flex;gap:12px;align-items:flex-start}
.sh>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.badge{flex:none;width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:1.7rem;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transform:rotate(-4deg)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.card>b{font-family:var(--display);font-weight:400;font-size:1.15rem}

/* welcome */
.hero{position:relative;overflow:hidden;background:var(--green);color:#FFF8F1;border-radius:28px;padding:10px 20px 22px;display:flex;flex-direction:column;gap:12px;text-align:center;
  box-shadow:0 24px 44px -26px rgba(18,49,43,.8)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(18rem 12rem at 85% 0,rgba(240,98,124,.34),transparent 70%),radial-gradient(16rem 12rem at 0 100%,rgba(157,217,197,.22),transparent 70%)}
.hero>*{position:relative}
.hero p{color:#CFE0D8}
.art{width:min(15.5rem,78%);margin:0 auto -4px;display:block;overflow:visible}
.art g{transform-box:fill-box;transform-origin:center}
.art .bill{animation:bob 3.6s ease-in-out infinite}
.art .b2{animation-delay:-1.2s}.art .b3{animation-delay:-2.3s}
.art .tw{animation:twinkle 2.4s ease-in-out infinite}
.art .t2{animation-delay:-.8s}.art .t3{animation-delay:-1.5s}.art .t4{animation-delay:-2s}
.cta{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.feats div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 8px;text-align:center;font-size:.86rem;line-height:1.3;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow)}
.feats span{font-size:1.5rem;line-height:1}
.feats div:nth-child(1){transform:rotate(1.2deg)}.feats div:nth-child(3){transform:rotate(-1.2deg)}

/* fields */
.field{display:flex;align-items:center;justify-content:space-between;gap:10px}
.field label{flex:1;min-width:0;font-weight:500;display:flex;align-items:center;gap:9px}
.field label>span:last-child{min-width:0}
.field small{display:block;font-weight:400;color:var(--muted);font-size:.84rem}
.ico{flex:none;width:34px;height:34px;border-radius:11px;background:var(--paper);display:grid;place-items:center;font-size:1.1rem}
.amt{position:relative;flex:0 0 8.6rem}
.amt input{width:100%;font:inherit;font-weight:700;font-variant-numeric:tabular-nums;text-align:center;direction:ltr;padding:10px 26px 10px 8px;border:1.5px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
.amt input::placeholder{color:var(--muted);font-weight:400;opacity:.7;font-size:.9rem}
.amt input:not(:placeholder-shown){background:#fff;border-color:#D9CDBB}
.amt input:focus-visible,.txt:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background:#fff}
.amt>span{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.amt.plain input{padding:10px 8px}
.txt{flex:1;min-width:0;font:inherit;padding:11px 12px;border:1.5px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--accent);height:30px}
.rangehead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:500}
.rangehead output{font-family:var(--display);font-size:1.2rem;color:var(--accent)}
.live{background:var(--green);color:#FFF8F1;border-radius:18px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 16px 30px -22px rgba(18,49,43,.9)}
.live b{font-family:var(--display);font-weight:400;font-size:1.45rem;font-variant-numeric:tabular-nums;color:var(--gold)}
.live .note{color:#B9CFC6}
.note{color:var(--muted);font-size:.9rem}
.link{all:unset;cursor:pointer;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.x{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--muted);font-size:1.3rem;flex:none}
.x:hover{background:var(--paper);color:var(--bad)}
.x:focus-visible{outline:2px solid var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{all:unset;cursor:pointer;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:.95rem;transition:transform .12s,background .15s}
.chip:active{transform:scale(.95)}
.chip[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#FFF8F1;font-weight:500}
.chip[aria-pressed=true]::before{content:"✓ ";color:var(--gold)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.addrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{font:inherit;font-weight:700;cursor:pointer;border-radius:16px;padding:13px 20px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);transition:transform .12s,box-shadow .15s;text-align:center}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,#D43D62,#B82C50);border-color:transparent;color:#fff;flex:1;box-shadow:0 12px 22px -12px rgba(200,52,90,.85)}
.btn.primary:hover{box-shadow:0 14px 26px -10px rgba(200,52,90,.9)}
.btn.big{font-size:1.1rem;padding:15px 20px}
.btn.ghost{background:transparent;border-color:rgba(255,248,241,.4);color:#FFF8F1}
.btn.small{padding:9px 14px;border-radius:12px}
.btn[disabled]{opacity:.6;cursor:progress}
.btn:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
nav.foot{position:fixed;inset:auto 0 0 0;z-index:6;background:rgba(255,248,241,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px))}
nav.foot div{max-width:34rem;margin:0 auto;display:flex;gap:10px}
.num{font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap}

/* result */
.total{position:relative;overflow:hidden;background:var(--green);color:#FFF8F1;border-radius:28px;padding:20px 20px 22px;display:flex;flex-direction:column;gap:4px;text-align:center;box-shadow:0 24px 44px -26px rgba(18,49,43,.8)}
.total::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(16rem 10rem at 90% 0,rgba(240,98,124,.3),transparent 70%),radial-gradient(14rem 10rem at 0 100%,rgba(157,217,197,.2),transparent 70%)}
.total>*{position:relative}
.total .lead{color:#CFE0D8}
.total .big{font-family:var(--display);font-size:clamp(2.9rem,14vw,4.3rem);line-height:1.05;font-variant-numeric:tabular-nums;color:var(--gold)}
.env{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:4.3rem 16px 16px;overflow:hidden;display:flex;flex-direction:column;gap:12px;text-align:center;box-shadow:var(--shadow)}
.env::before{content:"";position:absolute;inset:0 0 auto 0;height:3.7rem;background:var(--flap);clip-path:polygon(0 0,100% 0,50% 100%)}
.env::after{content:"";position:absolute;top:2.55rem;left:50%;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:var(--seal);box-shadow:0 3px 8px -3px rgba(0,0,0,.4)}
.env.good{--flap:var(--good-soft);--seal:var(--good)} .env.bad{--flap:var(--bad-soft);--seal:var(--rose)} .env.none{--flap:var(--accent-soft);--seal:var(--gold)}
.env .verdict{font-family:var(--display);font-size:1.7rem;line-height:1.18;text-wrap:balance}
.env.good .verdict b{color:var(--good)} .env.bad .verdict b{color:var(--bad)}
.env b{font-weight:inherit}
.view.enter .env .verdict{animation:pop .5s .25s both}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:0;width:9px;height:14px;border-radius:3px;animation:fall 1.9s cubic-bezier(.3,.6,.5,1) forwards}
.scen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.scen div{border:1px solid var(--line);border-radius:14px;padding:8px 4px;display:flex;flex-direction:column;gap:2px;font-size:.82rem;color:var(--muted);background:var(--paper)}
.scen div:nth-child(2){background:#fff;border-color:var(--ink)}
.scen b{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.pos{color:var(--good)} .neg{color:var(--bad)}
.stack{display:flex;gap:2px;height:16px}
.stack i{display:block;min-width:4px;background:var(--c);flex:var(--f) 1 0}
.stack i:first-child{border-radius:0 5px 5px 0}.stack i:last-child{border-radius:5px 0 0 5px}
.rows{display:flex;flex-direction:column;gap:9px}
.kv{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.kv b{font-variant-numeric:tabular-nums;white-space:nowrap}
.kv .dot{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--c);margin-inline-end:8px}
.kv small{color:var(--muted);font-weight:400;margin-inline-start:6px}
.tag{align-self:center;font-size:.8rem;font-weight:700;background:var(--gold);color:#3B2E00;border-radius:999px;padding:3px 12px}
.savecard{background:linear-gradient(135deg,#FFF1C9,#FFE3EA);border-color:transparent}
.savecard.ok{background:var(--good-soft)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:8px}
.tiles div{border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:.85rem;color:var(--muted);background:var(--paper)}
.tiles b{font-size:1.1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.tiles .late{background:var(--bad-soft);border-color:transparent}
.tiles .late b,.tiles .late span{color:var(--bad)}
.pays{gap:0;padding:4px 16px}
.pay{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.pay:last-child{border-bottom:0}
.tick{all:unset;cursor:pointer;flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center;font-weight:700;transition:background .15s,transform .12s}
.tick:active{transform:scale(.9)}
.tick[aria-pressed=true]{background:var(--good);border-color:var(--good);color:#fff}
.tick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.85rem;color:var(--muted)}
.pinfo b{font-size:1rem;color:var(--ink);font-weight:500}
.pinfo em{font-style:normal;font-weight:700}
.pay.late .pinfo em{color:var(--bad)} .pay.soon .pinfo em{color:var(--accent)}
.pay.paid .pinfo b,.pay.paid .pamt{text-decoration:line-through;color:var(--muted)}
.pamt{font-variant-numeric:tabular-nums;white-space:nowrap}
select.txt,input[type=date].txt{min-height:46px}
.field.stackf{flex-direction:column;align-items:stretch;gap:6px}
.pbox{background:var(--paper);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.pbox .btn{align-self:flex-start}
.meter{display:block;height:12px;border-radius:6px;background:var(--line);overflow:hidden}
.meter::after{content:"";display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,#2FA37A,var(--good));border-radius:6px;transition:width .5s ease}

/* account */
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border-radius:14px;padding:4px;gap:4px}
.seg button{all:unset;cursor:pointer;text-align:center;padding:9px 6px;border-radius:11px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--card);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
form.auth{display:flex;flex-direction:column;gap:12px}
form.auth label{display:flex;flex-direction:column;gap:5px;font-weight:500}
form.auth input{font:inherit;direction:ltr;text-align:left;padding:12px;border:1.5px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink)}
form.auth input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background:#fff}
.alert{border-radius:13px;padding:10px 12px;font-size:.95rem}
.alert.bad{background:var(--bad-soft);color:var(--bad)} .alert.info{background:var(--good-soft);color:var(--good)} .alert.warn{background:#FFF1C9;color:#5A4600}
.who{display:flex;align-items:center;gap:12px}
.who span:first-child{flex:none;width:46px;height:46px;border-radius:50%;background:var(--green);color:var(--gold);display:grid;place-items:center;font-family:var(--display);font-size:1.3rem}
.who div{min-width:0;display:flex;flex-direction:column}
.who b{overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:right}
.spin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}