/* בין הנקודות · צבעי המותג, גופן ועיצוב */
/* Rubik, רישיון SIL Open Font License, מאוחסן עם האתר */
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/rubik-hebrew-400-normal.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/rubik-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/rubik-hebrew-500-normal.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/rubik-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/rubik-hebrew-600-normal.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/rubik-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/rubik-hebrew-700-normal.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/rubik-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --cream:#F5F0E9; --beige:#EAE3D9; --brown:#594539; --ink-soft:#76625A;
  --sage:#7C8B70; --sage-deep:#66755B; --sage-pastel:#E5E9DF;
  --rose:#C99FA4; --rose-pastel:#EEE2E5; --taupe:#B99C86;
  --gold:#A47A42; --paper:#FFFDF9; --line:#DDD3C6; --err:#8E4048;
  --ans-g:#A5B49A; --ans-b:#D9C6AE; --ans-p:#D4A9AF;
  --font:'Rubik','Arial Hebrew','Segoe UI',Arial,sans-serif;
  --col:520px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{direction:rtl;text-align:right;background:var(--cream);color:var(--brown);font-family:var(--font);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  padding-left:max(18px, env(safe-area-inset-left, 0px));padding-right:max(18px, env(safe-area-inset-right, 0px))}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.3;text-wrap:balance}
a{color:var(--sage-deep)}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:8px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{direction:rtl;text-align:right;max-width:var(--col);margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-block:22px 28px}
.screen{flex:1;display:flex;flex-direction:column;gap:18px;animation:in .45s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.logo{display:block;width:88px;height:auto;align-self:center}
.logo.sm{width:58px}
.grow{flex:1}
.center{text-align:center;align-items:center}
.title{font-size:clamp(34px,9vw,44px);font-weight:700}
.h2{font-size:clamp(23px,6vw,28px);font-weight:700}
.tagline{font-size:18px;font-weight:600;max-width:30ch}
.soft{color:var(--ink-soft)}
.small{font-size:14px}
.text{display:grid;gap:12px}
.text strong{font-weight:700}

.btn{font-family:var(--font);font-size:17px;font-weight:600;border:0;border-radius:999px;padding:15px 24px;cursor:pointer;background:var(--sage-deep);color:#fff;min-height:52px;width:100%;transition:background .2s, opacity .2s;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn:hover{background:#56644C}
.btn.ghost{background:transparent;color:var(--brown);border:1.5px solid var(--taupe)}
.btn.ghost:hover{background:var(--paper)}
.btn.link{background:transparent;color:var(--ink-soft);text-decoration:underline;width:auto;min-height:44px;padding:8px 12px;font-weight:500;font-size:15px}
.btn[aria-disabled="true"]{background:var(--beige);color:var(--ink-soft);cursor:default}
.actions{padding-block:12px calc(10px + env(safe-area-inset-bottom, 0px));display:grid;gap:8px;margin-top:auto;width:100%;align-self:stretch}

/* leaf */
.leaf svg{display:block;width:100%;height:auto}
.leaf.hero{width:min(60%,280px);align-self:center}

/* form */
.fld{display:grid;gap:6px}
.fld label{font-weight:600;font-size:15px}
.fld input{font-family:var(--font);font-size:17px;padding:13px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--brown);width:100%}
.fld input:focus{border-color:var(--brown);outline:none}
.fld input[aria-invalid="true"]{border-color:var(--err)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.6;cursor:pointer}
.consent input{margin-top:4px;width:22px;height:22px;flex:none;accent-color:var(--sage-deep)}
.why{background:var(--paper);border-radius:14px;padding:14px 16px;display:grid;gap:6px;font-size:14px}
.why b{font-weight:600}
.msg{font-size:14.5px;border-radius:12px;padding:10px 14px}
.msg.err{color:var(--err);background:var(--rose-pastel)}
.msg.ok{background:var(--sage-pastel)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px}

/* explain legend */
.ans-legend{display:grid;gap:8px}
.ans-legend div{display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:14px;padding:10px 14px;font-weight:500}

/* quiz */
.qtop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--taupe);transition:background .2s}
.dots i.d{background:var(--taupe)}
.dots i.c{background:var(--brown);border-color:var(--brown)}
.qbody{flex:1;display:flex;flex-direction:column;justify-content:center;gap:30px;padding-block:10px}
.qnum{font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.qtext{font-size:clamp(26px,7vw,32px);font-weight:700;line-height:1.35;min-height:4.1em;transition:opacity .22s ease, transform .22s ease}
.qtext.out{opacity:0;transform:translateY(6px)}
.opts{display:grid;gap:12px;border:0;margin:0;padding:0;min-width:0}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.opt label{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;border:2px solid transparent;background:var(--paper);font-size:17px;font-weight:500;cursor:pointer;min-height:60px;transition:border-color .2s, background .2s}
.opt input:checked+label{border-color:var(--brown);background:#fff;font-weight:600}
.opt input:focus-visible+label{outline:2px solid var(--brown);outline-offset:3px}
.opt svg{flex:none;width:26px;height:26px}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qnav .btn{width:auto;min-width:130px}
.hint{min-height:1.5em;text-align:center;font-size:14px;color:var(--ink-soft)}
.qfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.confirm{background:var(--rose-pastel);border-radius:14px;padding:12px 14px;display:grid;gap:10px;font-size:15px}
.confirm div{display:flex;gap:8px;flex-wrap:wrap}
.confirm .btn{width:auto;min-height:44px;padding:8px 16px;font-size:15px}

/* result */
.stage{position:relative;overflow:hidden;border-radius:22px;padding:6px}
.stage .leaf{width:min(92%,420px);margin:0 auto;transform-origin:50% 72%}
.skip{position:absolute;top:8px;left:8px;font-family:var(--font);font-size:14px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--brown);cursor:pointer;min-height:36px}
.fade{transition:opacity .8s ease}
.legend{display:grid;gap:8px}
.lg{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;background:var(--paper);border-radius:14px;padding:11px 14px}
.lg i{width:20px;height:20px;border-radius:50%;background:var(--c);border:1.5px solid var(--gold)}
.lg b{font-weight:600;font-size:15.5px}
.lg .pc{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;text-align:left;line-height:1.2}
.lg .pc small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-soft)}
details.acc{background:var(--paper);border-radius:16px;border:1px solid var(--line)}
details.acc summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;padding:14px 16px;font-weight:600;font-size:16px;min-height:52px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary i{width:13px;height:13px;border-radius:50%;background:var(--c);flex:none;border:1.3px solid var(--gold)}
details.acc summary .cnt{margin-inline-start:auto;font-size:14px;font-weight:500;color:var(--ink-soft);font-variant-numeric:tabular-nums}
details.acc summary::after{content:"";width:8px;height:8px;border-left:1.8px solid var(--brown);border-bottom:1.8px solid var(--brown);transform:rotate(-45deg) translateY(-2px);transition:transform .2s;margin-inline-start:6px}
details.acc[open] summary::after{transform:rotate(135deg)}
details.acc ul{margin:0;padding:0 16px 16px;list-style:none;display:grid;gap:10px}
details.acc li{font-size:15.5px;padding-right:18px;position:relative;line-height:1.55}
details.acc li::before{content:"";position:absolute;right:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--c);border:1px solid var(--gold)}
.take{background:var(--sage-pastel);border-radius:20px;padding:18px;display:grid;gap:12px}
.take h3{font-size:19px;font-weight:700}
.take h4{margin:0;font-size:16px;font-weight:600;line-height:1.5}
.take p{font-size:15px}
.private{background:var(--paper);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.55}
.ta{font-family:var(--font);width:100%;min-height:96px;border:1.5px solid var(--line);background:var(--paper);border-radius:14px;padding:12px;font-size:16px;color:var(--brown);resize:vertical;line-height:1.6}
.ta:focus{border-color:var(--brown);outline:none}

/* save */
.card{background:var(--paper);border-radius:20px;padding:20px;display:grid;gap:12px}
.status{font-size:14px;min-height:1.4em}
.foot{display:grid;gap:8px;justify-items:center;text-align:center;padding-top:10px;font-size:13px;color:var(--ink-soft)}

#print-area{display:none}
@media print{
  @page{size:A4;margin:0}
  body{background:#fff;padding:0}
  .app{display:none!important}
  #print-area{display:block}
  #print-area img{display:block;width:210mm;height:297mm;page-break-after:always;break-after:page}
}
@media (prefers-reduced-motion:reduce){
  .screen{animation:none}
  *{transition-duration:.01ms!important}
}
@media (min-width:760px){
  .app{padding-block:40px 40px}
  .qtext{min-height:3.6em}
}

[hidden]{display:none!important}
.center{text-align:center}
.savenote{font-size:14.5px;color:var(--ink-soft);background:var(--paper);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.savenote::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376625A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M5 19h14'/%3E%3C/svg%3E")}
.ig{display:inline-flex;flex-direction:column;align-items:center;gap:6px;align-self:center;text-decoration:none;color:var(--ink-soft);font-size:14px;padding:6px;border-radius:16px;transition:transform .2s}
.ig:hover{transform:translateY(-2px)}

/* fixed header */
.topbar{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:var(--cream);border-bottom:1px solid var(--line);margin-left:calc(-1 * max(18px, env(safe-area-inset-left, 0px)));margin-right:calc(-1 * max(18px, env(safe-area-inset-right, 0px)))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:21;background:var(--cream)}
.topbar-in{max-width:var(--col);margin:0 auto;padding:10px max(18px, env(safe-area-inset-left, 0px));display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:12px}
.tb-text{text-align:center}
.tb-title{font-size:24px;font-weight:700;line-height:1.15}
.tb-sub{font-size:13px;color:var(--ink-soft);line-height:1.45;margin-top:3px}
.tb-logo{width:46px;height:auto;flex:none}
.hero-t{font-size:clamp(23px,6.4vw,28px);font-weight:700;max-width:22ch;line-height:1.35}
.app{padding-block:18px 28px}

.app{min-height:calc(100vh - 100px);min-height:calc(100dvh - 100px)}
.leaf.hero{width:min(52%,240px)}
.hero-t{font-size:clamp(22px,6vw,26px)}

.qnote{font-size:15px;color:var(--ink-soft);margin-top:-18px;line-height:1.55}

/* pop-ups */
body.pop-open{overflow:hidden}
.pop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:rgba(89,69,57,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}
.pop.in{opacity:1}
.pop-card{background:var(--paper);border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 50px rgba(89,69,57,.18);padding:28px 24px 22px;width:min(100%,380px);text-align:center;display:grid;gap:10px;transform:translateY(8px);transition:transform .2s}
.pop.in .pop-card{transform:none}
.pop-leaf{font-size:30px;line-height:1}
.pop-q{font-size:21px;font-weight:700;line-height:1.35}
.pop-sub{font-size:15px;color:var(--ink-soft);line-height:1.6}
.pop-actions{display:grid;gap:10px;margin-top:8px}
.dots3{display:flex;justify-content:center;gap:14px;font-size:30px;line-height:1;padding:6px 0 4px}
.dots3 span{display:inline-block;animation:bhn-leaf 1.2s ease-in-out infinite}
.dots3 span:nth-child(2){animation-delay:.2s}
.dots3 span:nth-child(3){animation-delay:.4s}
@keyframes bhn-leaf{0%,80%,100%{transform:translateY(0) rotate(0);opacity:.35}40%{transform:translateY(-8px) rotate(-12deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.pop,.pop-card{transition:none}.dots3 span{animation:none;opacity:1}}