/* platform survey -- one question at a time, sized for a thumb.
 *
 * Styled from the system's --sk-* palette (0032), so a quiz on Nueva wears Nueva and the
 * same file serves every system. Fallbacks are the house purple, for a page that sets no
 * palette at all.
 *
 * Answer cards are BUTTONS, full width, at least 56px tall: the whole point of a quiz is
 * that answering costs one tap, and a radio dot you have to hit precisely undoes that.
 */
/* THE LOOK IS GHL'S HOUSE QUIZ, MEASURED (2026-09-28). Every value below was read off the
 * computed styles of Nueva's quiz in GHL's own preview at 1280 and 390 wide, not guessed:
 * labels Roboto 800 26px in GHL's grey, answer CARDS (icon over text in a grid; on a phone,
 * one column, icon left), a full-width green gradient Next, a grey Go Back under it. The
 * colours a survey sets for itself (accent, button gradient) arrive as --pf-brand and
 * --pf-cta-a/b from its own data; the icons as <img> per answer.
 */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");
.pf-sv{
  --pf-brand:var(--sk-brand,#295BAC);
  --pf-ink:#1E293B;
  --pf-q:#607179;
  --pf-soft:#64748B;
  --pf-line:#E2E8F0;
  --pf-card:#FFFFFF;
  --pf-cta-a:#188A42;
  --pf-cta-b:#12692F;
  max-width:680px;margin:0 auto;padding:16px 16px 8px;
  background:transparent;color:var(--pf-q);
  font:16px/1.5 Roboto,"Helvetica Neue",Helvetica,Arial,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.pf-sv *{box-sizing:border-box}
.pf-sv-slide{outline:none;display:grid;gap:14px;animation:pf-sv-in .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes pf-sv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pf-sv-slide{animation:none}}

.pf-sv-prog{height:5px;border-radius:9px;background:color-mix(in srgb,var(--pf-brand) 14%,#fff);overflow:hidden;margin-bottom:18px}
.pf-sv-prog i{display:block;height:100%;background:var(--pf-brand);border-radius:9px;transition:width .3s}

.pf-sv-html{color:var(--pf-ink)}
.pf-sv-html :where(h1,h2,h3){margin:0 0 8px;text-wrap:balance}
.pf-sv-html :where(p){margin:0 0 8px}

.pf-sv-label{margin:0 0 21px;font-size:26px;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--pf-q);text-align:center;text-wrap:balance}
/* "Answer Below", under a question the slide's header already asked. */
.pf-sv-label.pf-sv-label-sm{font-size:14px;font-weight:600;color:var(--pf-soft);letter-spacing:0;margin-bottom:2px}
.pf-sv-label-f{display:block;font-size:16px;font-weight:700;letter-spacing:0;text-align:left;margin-bottom:10px}
.pf-sv-req{color:var(--pf-ink)}

.pf-sv-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.pf-sv-opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:128px;padding:22px 16px;text-align:center;cursor:pointer;
  font:inherit;font-size:16px;font-weight:700;line-height:1.3;color:var(--pf-ink);
  background:var(--pf-card);border:2px solid var(--pf-line);border-radius:14px;
  box-shadow:0 1px 3px rgba(15,23,42,.08);
  transition:border-color .2s,box-shadow .2s,transform .2s,background .2s;
  -webkit-tap-highlight-color:transparent;
}
.pf-sv-opt:hover{border-color:var(--pf-brand);box-shadow:0 6px 16px color-mix(in srgb,var(--pf-brand) 18%,transparent);transform:translateY(-1px)}
.pf-sv-opt:active{transform:translateY(0)}
.pf-sv-opt:focus-visible{outline:3px solid var(--pf-brand);outline-offset:2px}
.pf-sv-opt[aria-checked="true"]{border-color:var(--pf-brand);background:color-mix(in srgb,var(--pf-brand) 8%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--pf-brand) 33%,transparent)}
.pf-sv-ico{flex:none;width:38px;height:38px;display:block}
.pf-sv-mark{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--pf-line);transition:border-color .15s}
.pf-sv-opt[aria-checked="true"] .pf-sv-mark{border-color:var(--pf-brand);background:var(--pf-brand);box-shadow:inset 0 0 0 3px var(--pf-card)}

.pf-sv-f{width:100%;max-width:520px;margin:0 auto}
.pf-sv-f input{
  width:100%;height:56px;padding:0 16px;font:inherit;font-size:16px;color:var(--pf-ink);
  background:var(--pf-card);border:2px solid var(--pf-line);border-radius:12px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.pf-sv-f input::placeholder{color:#64748B}
.pf-sv-f input:focus{border-color:var(--pf-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--pf-brand) 18%,transparent)}

.pf-sv-consent{display:flex;gap:11px;align-items:flex-start;max-width:520px;margin:0 auto;font-size:13px;line-height:1.5;color:var(--pf-soft);cursor:pointer}
.pf-sv-consent input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--pf-brand)}
.pf-sv-consent a{color:inherit;text-decoration:underline}

.pf-sv-nav{display:flex;flex-direction:column;gap:10px;margin:24px auto 0;max-width:720px}
.pf-sv-nav:empty{display:none}
.pf-sv-go,.pf-sv-back{width:100%;border:0;border-radius:12px;cursor:pointer;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.pf-sv-go{
  min-height:56px;padding:16px 32px;font-size:18px;font-weight:800;line-height:1.25;color:#fff;
  background:linear-gradient(135deg,var(--pf-cta-a),var(--pf-cta-b));
  box-shadow:0 8px 20px color-mix(in srgb,var(--pf-cta-a) 35%,transparent);transition:filter .15s;
}
.pf-sv-go:hover{filter:brightness(.95)}
.pf-sv-go:disabled{opacity:.6;cursor:default}
.pf-sv-back{min-height:48px;padding:0 20px;font-size:16px;font-weight:700;background:#F1F5F9;color:#475569}
.pf-sv-go:focus-visible,.pf-sv-back:focus-visible{outline:3px solid var(--pf-brand);outline-offset:2px}

.pf-sv-err{margin:10px 0 0;min-height:1em;font-size:14.5px;color:#B3261E;text-align:center}
.pf-sv-err:empty{display:none}
.pf-sv-done{padding:28px 6px;text-align:center;font-size:19px;font-weight:650;color:var(--pf-ink)}

/* A phone: one column of cards, icon at the left (GHL switches at 600px). */
@media (max-width:600px){
  .pf-sv{padding:0 0 8px}
  .pf-sv-opts{grid-template-columns:1fr}
  .pf-sv-opt{flex-direction:row;justify-content:flex-start;text-align:left;min-height:0;padding:16px 18px}
  .pf-sv-ico{width:34px;height:34px}
}

/* Answer layouts (0068), chosen on the admin side. "cards" is everything above.
   rows: one answer per row at every width, icon at the left (compact, reads like a list).
   tiles: two across even on a phone, icon on top (the side-by-side card look). */
.pf-sv.pf-sv-l-rows .pf-sv-opts{grid-template-columns:1fr}
.pf-sv.pf-sv-l-rows .pf-sv-opt{flex-direction:row;justify-content:flex-start;text-align:left;min-height:0;padding:16px 18px}
.pf-sv.pf-sv-l-tiles .pf-sv-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-sv.pf-sv-l-tiles .pf-sv-opt{flex-direction:column;justify-content:center;text-align:center;min-height:112px;padding:18px 10px;font-size:15px}

/* The full-page survey (a quiz step with no page block of its own). */
.pf-sv-page{min-height:100vh;padding:28px 14px 56px;background:var(--sk-paper,#F7F5FB)}
/* GHL's hero column is ~860px, so the two-line headline stays on two lines at desktop. */
.pf-sv-page .pf-sv-intro{max-width:880px;margin:0 auto 18px}
.pf-sv-page .pf-sv-outro{max-width:600px;margin:22px auto 0}
@media (min-width:768px){.pf-sv-page{padding-top:72px}}
/* Inside a ported GHL page the page's own rows and columns set the width and spacing. */
/* GHL's survey box, measured off its preview (2026-09-28). Desktop: the form's own 16px on
   top, 20 + 16px at the sides, and 110px of box under Next. Phone: 40px on top, 20px sides,
   103px under Next. Next runs outside the form's padding, 720px on desktop. */
.pf-np-survey.pf-sv{width:100%;max-width:720px;padding:16px 36px 110px}
.pf-np-survey .pf-sv-nav{margin:34px -36px 0;max-width:none}
@media (max-width:767px){
  .pf-np-survey.pf-sv{padding:40px 20px 103px}
  .pf-np-survey .pf-sv-nav{margin:17px 0 0}
}

/* Native GHL text elements, ported (import-surveys.mjs). Their colours, weights and
   alignment arrive inline; size arrives per breakpoint as --pf-fs / --pf-fs-m, exactly as
   GHL stores it, and switches at GHL's own tablet breakpoint. */
.pf-g{font-size:var(--pf-fs-m,var(--pf-fs,17px));line-height:1.5;margin:0 0 10px}
.pf-g :where(p,h1,h2,h3){margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.pf-g a{color:var(--link-color,inherit)}
@media (min-width:768px){.pf-g{font-size:var(--pf-fs,17px)}}
.pf-g-hr{border:0;border-top:1px solid #E2E8F0;margin:18px 0}
.pf-g-img{display:block;max-width:100%;height:auto;margin:0 auto 12px}
/* A popup survey (S.popup): over a block page whose buttons open it. */
.pf-sv-ov{position:fixed;inset:0;z-index:2147483000;background:rgba(10,16,28,.6);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 12px}
.pf-sv-ov[hidden]{display:none}
.pf-sv-card{position:relative;width:min(640px,100%);background:#fff;border-radius:16px;padding:44px 18px 24px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pf-sv-x{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#555}