:root{ --ink:#122749; --rust:#ED7423; --rust-soft:#F39B5C; --rust-tint:#FBEBDD; --cream:#F5EFE4; --bone:#FBF7EF;
       --stone:#E6DDC9; --steel:#4F5966; --rule:#D6CCB7; --serif:'Rubik',sans-serif; --sans:'Assistant',sans-serif; --wa:#25A25A; }
*{ box-sizing:border-box; margin:0; padding:0; }

/* ---------- app screen elements ---------- */
.s-top{ background:#fff; border-bottom:1px solid var(--rule); padding:10px 18px 0; }
.s-top .row{ display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; }
.s-top .lg{ height:26px; }
.back{ font-size:15px; color:var(--steel); }
.prog{ font-family:var(--serif); font-weight:600; font-size:15px; color:var(--steel); }
.s-bar{ height:4px; background:var(--stone); overflow:hidden; }
.s-bar i{ display:block; height:100%; background:var(--rust); }
.s-body{ padding:20px 20px 8px; flex:1; }
.s-body.center{ text-align:center; padding-top:64px; }
.s-logo .lg{ height:64px; margin-bottom:26px; }
.s-fixed{ font-size:15px; color:var(--steel); margin-bottom:12px; }
.s-q{ font-family:var(--serif); font-weight:700; font-size:24px; line-height:1.3; color:var(--ink); }
.s-q.big{ font-size:27px; }
.s-hint{ font-size:17px; color:var(--steel); margin-top:8px; line-height:1.5; }
.s-hint.strong{ color:var(--ink); font-weight:700; font-size:18px; margin-top:14px; }
.s-opts{ list-style:none; margin-top:16px; }
.s-opt{ position:relative; background:#fff; border:1.5px solid var(--rule); border-radius:12px; padding:14px 46px 14px 14px; font-size:18px; line-height:1.4; margin-bottom:9px; color:var(--ink); }
.s-opt::before{ content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; border:2px solid var(--rule); border-radius:50%; background:#fff; }
.s-opt.multi::before{ border-radius:4px; }
.s-opt.sel{ border-color:var(--rust); background:var(--rust-tint); }
.s-opt.sel::before{ border-color:var(--rust); background:var(--rust); box-shadow:inset 0 0 0 3px #fff; }
.s-foot{ padding:12px 20px 26px; }
.s-btn{ display:block; width:100%; text-align:center; background:var(--rust); color:#fff; font-family:var(--serif); font-weight:700; font-size:18px; border-radius:12px; padding:15px 16px; }
.s-btn.sec{ background:transparent; color:var(--ink); border:2px solid var(--ink); margin-top:10px; }
.s-btn.wa{ background:var(--wa); }
.s-link{ display:block; text-align:center; font-size:16px; color:var(--steel); margin-top:12px; text-decoration:underline; }
.s-form{ margin-top:16px; }
.s-input{ display:block; background:#fff; border:1.5px solid var(--rule); border-radius:12px; padding:13px 14px; font-size:18px; color:var(--steel); margin-bottom:10px; }
.s-input.area{ min-height:120px; margin-top:14px; }
/* results */
/* the hero reads as one sentence: lead, the number, tail; then the punch line */
.s-hero{ background:var(--ink); border-radius:16px; padding:28px 18px 26px; text-align:center; }
.s-lead{ font-size:18px; color:var(--stone); line-height:1.4; }
.s-num{ font-family:var(--serif); font-weight:800; font-size:clamp(34px, 11vw, 64px); color:var(--rust); line-height:1.1; margin:8px 0 4px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.s-tail{ font-family:var(--serif); font-weight:700; font-size:28px; color:#fff; line-height:1.2; }
.s-punch{ font-size:17.5px; font-weight:700; color:#fff; line-height:1.45; margin-top:16px; padding-top:16px; border-top:1px solid rgba(251,247,239,.18); }
.s-cta{ margin-top:14px; text-align:center; }
.s-foot-note{ font-size:13px; color:var(--steel); line-height:1.5; margin-top:18px; }
.s-small{ font-size:16px; color:var(--steel); line-height:1.5; }
.s-small.dark{ color:var(--ink); font-size:17px; margin-bottom:8px; }
.s-how{ margin-top:10px; font-size:13px; color:var(--ink); text-decoration:underline; }
.s-how span{ text-decoration:none; color:var(--steel); display:block; margin-top:4px; }
.s-h{ font-family:var(--serif); font-weight:700; font-size:21px; color:var(--ink); margin:28px 0 10px; }
.s-chart{ background:#fff; border:1px solid var(--rule); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.s-chart .lbl{ font-size:15px; color:var(--steel); margin-bottom:8px; }
.s-bars{ display:flex; align-items:flex-end; gap:6px; height:64px; direction:rtl; }
.s-bars b{ flex:1; background:var(--stone); border-radius:3px 3px 0 0; }
.s-bars b.me{ background:var(--rust); }
.s-axis{ display:flex; gap:6px; margin-top:4px; }
.s-axis span{ flex:1; font-size:11.5px; color:var(--steel); text-align:center; white-space:nowrap; }
.s-sent{ font-size:16px; color:var(--ink); margin-top:8px; font-weight:600; }
.s-dual{ background:#fff; border:1px solid var(--rule); border-radius:12px; padding:12px 14px; }
.s-legend{ display:flex; gap:16px; font-size:14.5px; color:var(--steel); margin-bottom:10px; }
.s-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-left:5px; vertical-align:-1px; }
.s-legend i.c, .s-dual .b.c{ background:var(--ink); }  .s-legend i.o, .s-dual .b.o{ background:var(--rust); }
.s-dual .row{ margin-bottom:9px; }
.s-dual .lbl{ font-size:15px; color:var(--ink); margin-bottom:3px; }
.s-dual .b{ height:8px; border-radius:4px; margin-bottom:3px; }
.s-dual .b.none{ background:none; height:auto; font-size:13px; color:var(--steel); }
.s-pitch{ font-size:20px; line-height:1.45; margin-top:22px; text-align:center; color:var(--ink); }
.s-pitch b{ font-family:var(--serif); }
.s-booth{ font-size:16px; color:var(--steel); text-align:center; margin:12px 0 4px; }
.s-body .s-booth{ text-align:right; margin:14px 0 0; }

/* ---- page shell (added; the block above is lifted from design/survey-v3.html) ---- */
html, body { height: 100%; }
body { margin: 0; background: var(--bone); font-family: var(--sans); color: #1B2740; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.app { min-height: 100dvh; display: flex; flex-direction: column; }
/* the mockup's .lg carries the mark as an inline data URI; here it is a real file */
.lg { display: inline-block; height: 26px; aspect-ratio: 515/485; background: url(assets/logo.png) center/contain no-repeat; }
.s-top .row { min-height: 40px; }
.s-top .lg { display: inline-block; height: 26px; aspect-ratio: 515/485; background: url(assets/logo.png) center/contain no-repeat; }
.s-logo .lg { height: 64px; margin-bottom: 26px; }
/* opening screen: the phone frame has no top bar at all, the desktop one does */
.intro-top { display: none; }
/* on the phone the card is the flex column the design's .scr is, so .s-body{flex:1}
   still pushes the footer to the bottom of a short screen */
.card { display: flex; flex-direction: column; flex: 1; }
.back { background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-size: 15px; color: var(--steel); }
.s-body { padding: 20px 20px 8px; flex: 1; }
.s-opt { cursor: pointer; user-select: none; }
.s-opt:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.s-foot { padding: 12px 20px calc(26px + env(safe-area-inset-bottom)); background: var(--bone); position: sticky; bottom: 0; }
/* the results footer is three elements tall; pinned it would cover a quarter of
   the phone while the charts scroll under it, so there it sits after the content
   as in the design */
.card.wide .s-foot { position: static; }
.s-btn { border: 0; cursor: pointer; font: inherit; font-family: var(--serif); font-weight: 700; font-size: 18px; }
.s-btn:disabled { opacity: .45; cursor: default; }
.s-btn.sec { background: transparent; color: var(--ink); border: 2px solid var(--ink); margin-top: 10px; }
a.s-btn { text-decoration: none; }
.s-input { width: 100%; font: inherit; font-size: 18px; color: var(--ink); background: #fff; border: 1.5px solid var(--rule); border-radius: 12px; padding: 13px 14px; margin-bottom: 10px; }
/* Chrome's UA sheet forces `direction: ltr` on a tel input, which would leave
   its Hebrew placeholder alone on the left under four right-aligned ones */
.s-input { text-align: right; }
.s-input::placeholder { color: var(--steel); }
.s-input:focus { outline: none; border-color: var(--rust); }
textarea.s-input.area { min-height: 120px; margin-top: 14px; resize: vertical; }
.s-count { font-size: 14px; color: var(--steel); text-align: left; margin-top: -6px; }
.s-err { color: #B4231F; font-size: 16px; margin: 8px 0 0; text-align: center; min-height: 1.4em; }
/* hidden from humans, still in the DOM for a bot to fill. Clipped rather than
   pushed off-canvas: a `left:-9999px` box widens the RTL page's scroll area. */
.hp { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.s-note { font-size: 16px; color: var(--steel); margin-top: 10px; }
.s-empty { background: #fff; border: 1px dashed var(--rule); border-radius: 12px; padding: 14px; font-size: 16px; color: var(--steel); line-height: 1.5; margin-bottom: 10px; }
.s-toast { font-size: 15px; color: var(--steel); text-align: center; margin-top: 8px; }

/* share sheet (fallback when navigator.share is missing) */
.sheet { position: fixed; inset: 0; background: rgba(18,39,73,.45); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.sheet[hidden] { display: none; }
.sheet-card { background: #fff; width: 100%; max-width: 480px; border-radius: 16px 16px 0 0; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); }
.sheet-item { display: block; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 14px; font: inherit; font-size: 18px; color: var(--ink); cursor: pointer; text-align: center; }
.sheet-item:last-child { border-bottom: 0; }
.sheet-cancel { color: var(--steel); }

/* ---- desktop: white top bar + centered card, per the design's .desk rules ---- */
@media (min-width: 760px) {
  .app { background: var(--bone); }
  .s-top { padding: 14px 44px 0; }
  .s-top .lg { height: 34px; }
  .intro-top { display: block; }
  .card { display: block; flex: none; width: 660px; margin: 40px auto 48px; background: #fff; border-radius: 16px; padding: 36px 40px 30px; box-shadow: 0 6px 24px rgba(18,39,73,.07); }
  .card.wide { width: 820px; }
  .card .s-body { padding: 0; }
  .s-q { font-size: 30px; }  .s-q.big { font-size: 34px; }
  .s-fixed, .back, .prog { font-size: 16px; }
  .s-hint { font-size: 18.5px; }  .s-hint.strong { font-size: 20px; }
  .s-opt { font-size: 19px; }
  .s-input { font-size: 19px; }
  .s-hero { padding: 40px 32px 34px; }
  .s-lead { font-size: 22px; }
  .s-num { font-size: 92px; }
  .s-tail { font-size: 36px; }
  .s-punch { font-size: 20px; }
  .s-pitch { font-size: 24px; }
  .s-h { font-size: 24px; }
  .s-small { font-size: 17px; }  .s-small.dark { font-size: 18px; }
  .s-chart .lbl, .s-dual .lbl { font-size: 16px; }
  .s-axis span { font-size: 12.5px; }
  .s-sent { font-size: 17px; }
  .s-booth { font-size: 17px; }
  .s-foot-note { font-size: 14px; }
  .s-foot { position: static; background: transparent; padding: 18px 0 0; text-align: left; }
  .s-btn { display: inline-block; width: auto; padding: 14px 40px; font-size: 19px; }
  .s-btn.sec { margin: 0 12px 0 0; }
  .charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .sheet { align-items: center; }
  .sheet-card { border-radius: 16px; }
}