/* IENN poll. Palette and font stack copied from ienn-website (shop.css / index.html :root). No red, no web fonts. */
:root { --lilac:#d4c4e0; --sage:#6b7c6a; --sage-dark:#4a5a4a; --cream:#f8f6f3; --text:#2c2c2c; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:var(--cream); color:var(--text); -webkit-text-size-adjust:100%; }
#app { min-height:100%; max-width:480px; margin:0 auto; padding:max(1.25rem, env(safe-area-inset-top)) 1.1rem max(1.25rem, env(safe-area-inset-bottom)); display:flex; }
.screen { flex:1; display:flex; flex-direction:column; gap:1.1rem; }
.screen[hidden] { display:none; }
#s-intro { justify-content:center; align-items:stretch; text-align:center; border-top:6px solid var(--lilac); padding-top:2rem; gap:1.6rem; }
h1 { font-size:1.6rem; line-height:1.3; color:var(--sage-dark); }
h2 { font-size:1.4rem; line-height:1.3; color:var(--sage-dark); min-height:5.5rem; }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.primary { min-height:56px; border:0; border-radius:999px; background:var(--sage-dark); color:#fff; font-size:1.2rem; font-weight:700; padding:0 2rem; }
.primary:active { background:var(--sage); }
.top { display:flex; justify-content:space-between; align-items:center; min-height:44px; }
.back { background:none; border:0; color:var(--sage-dark); font-size:0.95rem; min-height:44px; padding:0 0.4rem 0 0; text-decoration:underline; text-underline-offset:3px; }
.back[disabled] { visibility:hidden; }
.progress { font-size:0.95rem; color:var(--sage-dark); font-weight:600; background:var(--lilac); border-radius:999px; padding:0.25rem 0.75rem; }
.bar { height:6px; background:#e6e3dd; border-radius:999px; overflow:hidden; }
.bar span { display:block; height:100%; width:33.3%; background:var(--sage); transition:width .2s; }
.scale { display:flex; flex-direction:column; gap:0.6rem; }
.scale button { display:flex; align-items:center; gap:0.9rem; min-height:58px; padding:0 1rem; border:2px solid #d9d6cf; border-radius:14px; background:#fff; color:var(--text); font-size:1.1rem; text-align:left; }
.scale button b { display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:50%; background:var(--cream); color:var(--sage-dark); font-size:1.05rem; flex:none; }
.scale button[aria-checked="true"] { border-color:var(--sage-dark); background:var(--sage-dark); color:#fff; }
.scale button[aria-checked="true"] b { background:var(--lilac); }
.scale button:focus-visible, .primary:focus-visible, .back:focus-visible { outline:3px solid var(--lilac); outline-offset:2px; }
#s-thanks { justify-content:center; align-items:center; text-align:center; }
/* Logo sits on a white panel: the logo file's own background is white (#fff), so no box edge shows inside the panel. */
.logo-panel { width:100%; background:#fff; border-radius:16px; box-shadow:0 1px 3px rgba(74,90,74,.12); padding:0.6rem; } /* padding keeps the rounded corners off the image: nothing is clipped */
.logo { display:block; width:100%; height:auto; }
.thanks { font-size:1.35rem; font-weight:700; color:var(--sage-dark); }
.ig { color:var(--sage); font-size:1rem; }
.noscript { padding:1rem; text-align:center; }
@media (prefers-reduced-motion:reduce) { .bar span { transition:none; } }

/* California poppy (Eschscholzia californica) bloom on the thank-you screen. Inline SVG + CSS only.
   Base styles are the finished bloom; keyframes animate *from* the sprout, so reduced motion simply shows the bloom. */
.poppy { display:block; width:104px; height:139px; margin:0 auto -0.5rem; overflow:visible; }
.poppy * { transform-box:view-box; transform-origin:0 0; }
.pp-stem { fill:none; stroke:#7f988a; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; animation:pp-grow 1.2s cubic-bezier(.3,.6,.4,1) both; }
.pp-leaf { fill:none; stroke:#8fa89b; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s)); animation:pp-unfurl .9s cubic-bezier(.2,.8,.3,1) var(--d) both; }
.pp-torus { fill:#a9bba9; animation:pp-fade .3s ease-out 1.25s both; }
.pp-petal { transform:translate(60px,65px) rotate(var(--r)) scale(var(--sx),1); animation:pp-open 1.05s cubic-bezier(.25,.9,.35,1.05) var(--d) both; }
.pp-bud { fill:#9fb3a6; stroke:#7f988a; stroke-width:.6; opacity:0; transform:translate(60px,34px); animation:pp-bud 2.5s ease-in-out both; }
@keyframes pp-grow { from { stroke-dashoffset:1; } }
@keyframes pp-unfurl { from { transform:translate(var(--x),var(--y)) rotate(calc(var(--r) * 0.2)) scale(0); } }
@keyframes pp-fade { from { opacity:0; } }
@keyframes pp-open {
  from { transform:translate(60px,65px) rotate(calc(var(--r) * 0.1)) scale(.22,.62); opacity:0; }
  25% { opacity:1; }
}
@keyframes pp-bud {
  0%, 44% { transform:translate(60px,66px) scale(0); opacity:1; }
  64%, 80% { transform:translate(60px,66px) scale(1); opacity:1; }
  100% { transform:translate(60px,34px) scale(.9); opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .poppy, .poppy * { animation:none !important; } }