/* WebsiteBuilders quiz card (shared by /start/). Moved out of index.html 2026-09-03.
   Uses the page's palette variables (--paper, --ink, --line, --cta, --serif, --sans, --ease). */
.quiz-shell{max-width:820px; width:100%; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; position:relative; display:flex; flex-direction:column}
.q-top{padding:18px 26px 0; flex:none}
.q-progress{height:7px; border-radius:99px; background:var(--paper2); overflow:hidden}
.q-progress i{display:block; height:100%; width:0%; background:var(--ink); border-radius:99px; transition:width .5s var(--ease)}
.q-meta{display:flex; justify-content:space-between; font-size:12.5px; color:var(--faint); margin-top:9px; font-weight:500}
.q-body{padding:26px clamp(20px,4vw,44px) 36px; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain}
.q-step{animation:qin .45s var(--ease); display:flex; flex-direction:column; flex:1 1 auto; min-height:0}
@keyframes qin{from{opacity:0; transform:translateX(26px)}}
.q-step h3{font-family:var(--serif); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(24px,3.2vw,32px); line-height:1.15; margin-bottom:6px}
.q-step .q-sub{color:var(--soft); font-size:14.5px; margin:0 0 22px}
.q-opts{display:grid; gap:10px; overflow:auto; min-height:0; overscroll-behavior:contain; padding:2px 3px 4px; scrollbar-gutter:stable}
.q-opts.two{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.q-opt{
  display:flex; align-items:center; gap:12px; text-align:left;
  border:1.5px solid var(--line); background:var(--card); border-radius:13px;
  padding:15px 17px; font:inherit; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:border-color .2s, background .2s, transform .2s; min-height:54px;
}
.q-opt:hover{border-color:var(--line2); transform:translateY(-1px)}
.q-opt[aria-pressed="true"]{border-color:var(--ink); background:var(--paper)}
.q-opt .em{font-size:20px; flex:none; color:var(--ink)}
.q-inputs{display:grid; gap:12px}
.q-inputs input{
  font:inherit; font-size:16px; padding:14px 16px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink); width:100%;
}
.q-inputs input:focus{outline:none; border-color:var(--ink); box-shadow:none}
.q-inputs label{font-size:13px; font-weight:600; color:var(--faint); display:block; margin:6px 0 -4px}
.q-opts + .q-inputs{margin-top:14px}
.q-nav{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:26px; gap:12px; flex:none}
.q-back{background:none; border:0; color:var(--faint); font:inherit; font-size:14px; cursor:pointer; min-width:44px; min-height:44px; padding:8px 12px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:4px}
.q-promise{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0 0 10px}
.q-back:hover{color:var(--ink); background:#0F121908}
.q-err{color:var(--coral-deep); font-size:13px; min-height:18px; margin-top:8px; flex:none}
.q-intro{text-align:center; padding:clamp(30px,5vw,54px) clamp(20px,4vw,44px); flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.q-intro h2{font-family:var(--serif); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(28px,3.6vw,40px); line-height:1.1}
.q-intro h3{font-family:var(--serif); font-weight:800; font-variation-settings:"opsz" 96; font-size:clamp(24px,3.2vw,32px); line-height:1.15}
.q-intro p{color:var(--soft); max-width:46ch; margin:14px auto 26px}
.q-chips{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:26px}
.q-chips span{font-size:12.5px; font-weight:600; color:var(--soft); border:1px solid var(--line); border-radius:99px; padding:7px 14px; background:transparent}
.q-resume{margin-top:14px}
.q-resume button{background:none; border:0; color:var(--faint); font:inherit; font-size:14px; cursor:pointer; min-height:44px; padding:8px 12px; text-decoration:underline; text-underline-offset:4px}
.q-resume button:hover{color:var(--ink)}
.plan-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px}
@media (max-width:640px){ .plan-cards{grid-template-columns:1fr} }
.plan{
  border:1.5px solid var(--line); border-radius:16px; padding:22px; text-align:left;
  position:relative; background:var(--card); display:flex; flex-direction:column; gap:8px;
}
.plan.hot{border-color:var(--ink); box-shadow:none}
.plan .tag{position:absolute; top:-11px; right:14px; background:var(--ink); color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; padding:4px 11px; border-radius:99px}
.plan h4{margin:0; font-size:16px}
.plan .amt{font-family:var(--serif); font-weight:800; font-variation-settings:"opsz" 96; font-size:40px; line-height:1}
.plan .amt s{font-size:20px; color:var(--faint); margin-right:8px; text-decoration-color:var(--coral); text-decoration-thickness:2px}
.plan .tag.hot{background:var(--coral)}
.plan-urg{margin:6px 0 0; font-size:13.5px; font-weight:700; color:var(--coral-deep)}
.q-chips s.was{color:var(--faint); text-decoration-color:var(--coral); margin-right:4px}
.q-chips .wk-tag{background:var(--coral); color:#fff; border-color:var(--coral); font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.plan ul{margin:6px 0 14px; padding:0; list-style:none; display:grid; gap:6px}
.plan li{font-size:13.5px; color:var(--ink2); display:flex; gap:8px}
.plan li::before{content:"check"; font-family:'Material Symbols Outlined'; font-size:15px; color:var(--ink); font-weight:400}
.plan .btn{width:100%}
.q-note{font-size:12.5px; color:var(--faint); text-align:center; margin-top:14px}
.q-result{text-align:left; padding-bottom:34px}
.q-result .q-top{padding:0 0 18px}
.q-result .q-chips{justify-content:flex-start; margin:16px 0 6px}
.q-result > p{margin:10px 0 0}
.q-result .plan-cards{grid-template-columns:1fr; max-width:420px}
/* desktop: copy on the left, the plan card on the right, so the card fills its width */
@media (min-width:761px){
  .q-result{display:grid; grid-template-columns:minmax(0,1fr) 380px; column-gap:36px; align-items:start}
  .q-result .q-top{grid-column:1 / -1}
  .q-result .q-result-copy{align-self:center}
  .q-result .plan-cards{margin-top:8px; max-width:none}
}

@media (max-width:760px){
  .q-body{padding:20px 16px 24px; min-height:0}
  .q-step h3{font-size:clamp(22px,6vw,26px)}
  .q-step .q-sub{margin-bottom:14px}
  .q-opts{gap:8px}
  .q-opt{min-height:48px; padding:11px 14px}
  .q-nav{padding-top:16px}
  .q-intro{padding:28px 18px 26px}
  .q-intro p{margin:12px auto 20px}
  .q-chips{margin-bottom:20px}
  .q-sub, .q-step .q-sub, .q-opt, .q-intro p, .plan li, .q-note, .q-promise-copy{font-size:16px}
  .q-promise{font-size:13px}
  .plan{padding:18px}
  .plan .amt{font-size:34px}
  /* result screen: the whole offer, including the buy button, fits a 390x844 phone without scrolling the card */
  .q-result{padding:18px 16px 16px}
  .q-result .q-top{padding:0 0 6px}
  .q-result h3{font-size:clamp(20px,5.4vw,22px); line-height:1.15}
  .q-result .q-chips{margin:8px 0 0; gap:5px}
  .q-result .q-chips span{font-size:12px; padding:4px 9px; line-height:1.2}
  /* body copy stays at 16px on phones (readability rule); the card scrolls internally on the smallest screens */
  .q-result .q-result-copy p{font-size:16px; line-height:1.4; margin:8px 0 0}
  .q-result .plan-cards{margin-top:12px}
  .q-result .plan{padding:12px; gap:4px}
  .q-result .plan h4{font-size:16px}
  .q-result .plan .amt{font-size:26px}
  .q-result .plan ul{margin:2px 0 6px; gap:2px}
  .q-result .plan li{font-size:16px; line-height:1.3}
  .q-result .plan .btn{padding:11px 12px; font-size:16px; min-height:48px}
  .q-result .q-note{font-size:16px; line-height:1.35; margin-top:6px}
  .q-result .q-chips{margin-top:6px}
  .q-result .q-result-copy p{margin-top:6px}
  .q-result .plan-cards{margin-top:10px}
}
@media (max-width:380px){
  .q-result{padding:14px 14px 12px}
  .q-result .q-chips{gap:5px}
  .q-result .q-chips span{font-size:12px; padding:4px 8px}
  .q-result .plan{padding:12px}
  .q-result .plan ul{margin-bottom:6px}
  .q-result .plan .btn{font-size:16px; padding:11px 8px}
  .q-result .q-note{margin-top:6px}
}