/* EasyWindow bridge — clean, light, blue (easywindow-style) */
:root{
  --brand:#8B1A63;
  --brand-deep:#6f1550;
  --brand-tint:#f7e9f1;
  --ink:#231a20;
  --slate:#6b5560;
  --line:#ecdfe6;
  --orange:#f0922f;
  --orange-deep:#e07d16;
  --paper:#ffffff;
  --bg:#faf6f8;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 14px 34px -16px rgba(20,54,78,.30);
  --tap:44px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 420px at 50% -120px, #f3e2ec 0%, rgba(243,226,236,0) 70%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* ---- top bar ---- */
.top{padding:calc(12px + var(--safe-t)) 16px 12px}
.top-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;min-height:var(--tap);cursor:pointer}
.brand-mark{width:28px;height:28px}
.brand-name{font-weight:900;font-size:1.18rem;color:var(--ink);letter-spacing:-.02em;line-height:1;text-transform:uppercase;display:inline-flex;align-items:baseline;gap:5px}
.brand-sub{font-weight:800;font-size:.92rem;color:var(--brand)}
.top-tag{font-style:italic;font-weight:700;color:var(--slate);font-size:.95rem}

/* ---- layout ---- */
.wrap{max-width:760px;margin:0 auto;padding:6px 16px calc(28px + var(--safe-b))}

/* progress strip like the partner flow */
.progress{
  position:relative;height:30px;border-radius:999px;background:#f0dfe8;
  margin:6px 0 16px;overflow:hidden;display:flex;align-items:center;
}
.progress-fill{position:absolute;left:0;top:0;bottom:0;width:18%;background:var(--ink);border-radius:999px}
.progress-pill{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:#fff;border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:800;color:var(--ink);
  box-shadow:0 4px 10px -4px rgba(20,54,78,.3)
}

/* cards */
.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:16px}

.h1{margin:0 0 4px;font-size:clamp(1.6rem,6vw,2.4rem);line-height:1.08;font-weight:900;color:var(--ink);text-align:center;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.h1 .hl{color:var(--brand)}
.h1-sub{margin:0 0 14px;text-align:center;font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--slate);text-transform:uppercase}
.sub{margin:0 auto;max-width:46ch;text-align:center;color:var(--slate);font-size:1rem}
.sub strong{color:var(--ink)}

.trust{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center}
.trust li{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;color:var(--ink)}
.trust svg{width:16px;height:16px;color:var(--brand)}

/* gallery */
.h2{margin:0 0 4px;font-size:clamp(1.25rem,3.8vw,1.6rem);font-weight:900;color:var(--ink);text-align:center;text-transform:uppercase;letter-spacing:-.005em}
.h2 .hl{color:var(--brand)}
.gallery-lead{margin:0 0 16px;text-align:center;color:var(--slate);font-size:.95rem}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#f1f5f9;box-shadow:0 6px 16px -10px rgba(20,54,78,.35)}
.shot img{display:block;width:100%;height:auto}

/* question */
.q-title{margin-top:2px}
.q-sub{margin:0 0 16px;text-align:center;color:var(--slate);font-size:.95rem}
.options{display:flex;flex-direction:column;gap:11px}
.opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:15px 16px;cursor:pointer;font-family:inherit;font-size:1.0rem;font-weight:700;color:var(--ink);
  min-height:60px;transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease,background-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.opt-ic{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand);border:1px solid #e7cedd}
.opt-ic svg{width:23px;height:23px}
.opt-tx{flex:1}
.opt-go{flex:none;width:24px;height:24px;display:grid;place-items:center;color:var(--brand);opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease}
.opt-go svg{width:20px;height:20px}
@media (hover:hover){
  .opt:hover{border-color:var(--brand);box-shadow:0 12px 24px -14px rgba(139,26,99,.6);transform:translateY(-1px)}
  .opt:hover .opt-go{opacity:1;transform:translateX(0)}
}
.opt:active{transform:translateY(0) scale(.995)}
.opt.is-selected{border-color:var(--brand);background:var(--brand-tint)}
.opt.is-selected .opt-go{opacity:1;transform:translateX(0)}
.opt:focus-visible{outline:3px solid rgba(139,26,99,.65);outline-offset:2px}

.q-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:16px 0 0;color:var(--slate);font-size:.82rem;font-weight:600}
.q-note svg{width:16px;height:16px;flex:none;color:var(--brand)}

/* footer */
.foot{max-width:760px;margin:0 auto;padding:8px 18px calc(30px + var(--safe-b));text-align:center;color:var(--slate)}
.foot-copy{margin:0 0 8px;font-size:.82rem;font-weight:700;color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;font-size:.8rem;margin-bottom:10px}
.foot-links a{color:var(--brand);text-decoration:none;font-weight:700}
.foot-links a:hover{text-decoration:underline}
.foot-links span{color:#b9c6d2}
.foot-disc{margin:0 auto;max-width:62ch;font-size:.72rem;line-height:1.55;color:#8497a6}

/* redirect overlay */
.overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(238,244,249,.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:24px}
.overlay.is-on{display:flex}
.overlay-box{text-align:center;max-width:340px}
.spinner{width:46px;height:46px;border-radius:50%;border:4px solid #e7cedd;border-top-color:var(--brand);margin:0 auto 16px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.overlay-t{margin:0 0 6px;font-weight:900;font-size:1.05rem;color:var(--ink)}
.overlay-s{margin:0;color:var(--slate);font-size:.9rem}

@media (prefers-reduced-motion:reduce){
  .spinner{animation:none}
  .opt{transition:none}
}

/* desktop polish */
@media (min-width:720px){
  .wrap{padding-top:8px}
  .card{padding:30px}
  .gallery{gap:14px}
}

/* ---- selection nudge (research: visual cue + animation lifts CTR) ---- */
.q-nudge{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:0 0 14px;font-weight:800;font-size:.92rem;color:var(--brand);
  text-align:center;
}
.q-nudge-hand{display:inline-block;animation:nudgeBounce 1.4s ease-in-out infinite;font-size:1.05rem}
@keyframes nudgeBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}

/* gentle pulse on the option cards so they read as tappable (Unbounce: animated CTA +52%) */
.options .opt{position:relative}
.options .opt::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(139,26,99,.0);
}
.options .opt:nth-child(1){animation:optPulse 2.2s ease-in-out infinite}
.options .opt:nth-child(2){animation:optPulse 2.2s ease-in-out .25s infinite}
.options .opt:nth-child(3){animation:optPulse 2.2s ease-in-out .5s infinite}
.options .opt:nth-child(4){animation:optPulse 2.2s ease-in-out .75s infinite}
@keyframes optPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(139,26,99,0)}
  50%{box-shadow:0 6px 18px -10px rgba(139,26,99,.45)}
}
/* keep the arrow gently visible/animated to signal "tap" */
.opt .opt-go{opacity:.55;transform:translateX(0)}
.opt .opt-go svg{animation:arrowNudge 1.6s ease-in-out infinite}
@keyframes arrowNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}

@media (prefers-reduced-motion:reduce){
  .q-nudge-hand,.options .opt,.opt .opt-go svg{animation:none !important}
  .opt .opt-go{opacity:.55}
}