/* PrettyFast — Soft Life quiz landing + immersive quiz overlay.
   Quiz palette mirrors the in-app quiz (lib/constants/App_colors.dart kQuiz*). */
:root{
  --q-ink:#111111; --q-charcoal:#1A1A1E; --q-charcoal-mid:#2C2C32;
  --q-mist:#F4F9F9; --q-wash:#EAF5F4;
  --q-accent:#3D9E99; --q-accent-light:#8ECEC0; --q-accent-deep:#2A7A75;
  --q-warm:#F7F4F0; --q-muted:#7A8F8E; --q-soft:#A8B8B7; --q-rule:#D8EBEA;
}

/* ============ LANDING (light, sits in the normal theme) ============ */
.quiz-hero{background:linear-gradient(180deg,#0e1b1a 0%,#13211f 55%,#0c1716 100%);
  color:var(--q-warm);padding:104px 0 110px;position:relative;overflow:hidden;text-align:center}
.quiz-hero:before{content:"";position:absolute;left:50%;top:-160px;transform:translateX(-50%);
  width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(61,158,153,.30),transparent 66%);pointer-events:none}
.quiz-hero .wrap{position:relative;z-index:1;max-width:780px}
.quiz-hero .eyebrow{color:var(--q-accent-light)}
.quiz-hero h1{color:var(--q-warm);max-width:16ch;margin:0 auto .3em}
.quiz-hero h1 .serif-i{color:var(--q-accent-light)}
.quiz-hero .lead{color:#cdd9d7;max-width:54ch;margin:0 auto;font-size:1.24rem}
.quiz-hero .btn-row{justify-content:center;margin-top:38px}
.quiz-hero .micro{color:#8fa6a4}
.q-cta{background:var(--q-accent);color:#fff;border:0;cursor:pointer;
  box-shadow:0 14px 34px rgba(61,158,153,.34);font-family:var(--pf-sans)}
.q-cta:hover{background:var(--q-accent-deep);transform:translateY(-2px)}
.q-names{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.q-names span{font-family:var(--pf-serif);font-style:italic;font-size:1.04rem;color:var(--q-accent-light);
  border:1px solid rgba(142,206,192,.3);border-radius:999px;padding:7px 18px}
.quiz-trust{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:30px;color:#8fa6a4;font-size:.92rem;flex-wrap:wrap}
.quiz-trust .stars{color:var(--q-accent-light);letter-spacing:2px}

/* Meet the six — curiosity cards */
.q-six{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.q-six-card{background:#fff;border:1px solid var(--pf-rule);border-radius:18px;padding:28px 26px;transition:.2s}
.q-six-card:hover{transform:translateY(-5px);box-shadow:var(--pf-shadow)}
.q-six-card .q-num{font-family:var(--pf-serif);font-style:italic;font-size:1.3rem;color:var(--pf-teal);opacity:.5}
.q-six-card h3{margin:.3em 0 .35em;font-size:1.45rem}
.q-six-card p{margin:0;color:#5b5350;font-size:1rem;font-weight:300}
.q-six-foot{text-align:center;margin-top:40px}

/* ============ IMMERSIVE QUIZ OVERLAY ============ */
.pfq{position:fixed;inset:0;z-index:9999;background:var(--q-ink);color:var(--q-warm);
  display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;font-family:var(--pf-sans)}
.pfq.open{display:block}
.pfq-close{position:fixed;top:14px;right:16px;z-index:5;background:rgba(255,255,255,.07);
  border:0;color:var(--q-soft);width:40px;height:40px;border-radius:50%;font-size:1.1rem;cursor:pointer;line-height:1}
.pfq-close:hover{background:rgba(255,255,255,.14);color:#fff}
.pfq-stage{max-width:620px;margin:0 auto;padding:18px 22px 64px;min-height:100%;
  opacity:0;transform:translateX(14px);transition:opacity .42s ease,transform .42s ease}
.pfq-stage.in{opacity:1;transform:none}

.pfq-screen{display:block}
.pfq-light{background:var(--q-mist);margin:-18px -22px 0;padding:18px 22px 0;min-height:100vh;color:var(--q-ink)}

/* nav + progress dots */
.pfq-nav{display:flex;justify-content:center;padding:14px 0 6px}
.pfq-dots{display:flex;gap:7px;align-items:center}
.pfq-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.16);transition:.3s}
.pfq-dots span.on{width:8px;height:8px;background:var(--q-accent-light)}
.pfq-dots span.done{background:rgba(142,206,192,.5)}
.pfq-light .pfq-dots span{background:rgba(45,123,122,.18)}
.pfq-light .pfq-dots span.on{background:var(--q-accent)}
.pfq-light .pfq-dots span.done{background:rgba(61,158,153,.5)}

/* headers */
.pfq-head{padding:26px 2px 22px;border-bottom:1px solid rgba(255,255,255,.06)}
.pfq-head.light{border-bottom-color:var(--q-rule)}
.pfq-sub{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--q-accent-light);
  margin:0 0 12px;font-weight:500}
.pfq-head.light .pfq-sub{color:var(--q-accent)}
.pfq-q{font-family:var(--pf-serif);font-weight:500;font-size:clamp(1.7rem,5vw,2.1rem);
  line-height:1.18;color:var(--q-warm);margin:0;letter-spacing:-.2px}
.pfq-light .pfq-q{color:var(--q-ink)}
.pfq-hint{margin:10px 0 0;font-size:.86rem;color:var(--q-muted)}

/* option list */
.pfq-list{padding:22px 0 10px}
.pfq-opt{display:flex;width:100%;align-items:center;gap:12px;text-align:left;cursor:pointer;
  background:var(--q-charcoal-mid);border:1px solid rgba(255,255,255,.06);border-radius:6px;
  padding:16px 18px;margin-bottom:9px;color:var(--q-soft);font-family:var(--pf-sans);font-size:1rem;
  transition:.2s;line-height:1.35}
.pfq-opt .e{font-size:1.2rem;width:26px;flex-shrink:0;text-align:center}
.pfq-opt .t{flex:1}
.pfq-opt .r{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.16);flex-shrink:0;transition:.2s}
.pfq-opt:hover{border-color:rgba(142,206,192,.5)}
.pfq-opt.sel{background:rgba(61,158,153,.13);border-color:var(--q-accent);color:var(--q-warm)}
.pfq-opt.sel .r{background:var(--q-accent);border-color:var(--q-accent);
  box-shadow:inset 0 0 0 3px var(--q-charcoal-mid)}
/* light theme options */
.pfq-light .pfq-opt{background:#fff;border-color:transparent;color:var(--q-charcoal);
  box-shadow:0 2px 12px rgba(44,110,106,.06);border-radius:12px}
.pfq-light .pfq-opt .r{border-color:#cfe0df}
.pfq-light .pfq-opt.sel{background:var(--q-wash);border-color:var(--q-accent);color:var(--q-ink)}
.pfq-light .pfq-opt.sel .r{box-shadow:inset 0 0 0 3px #fff}

/* cloud chips */
.pfq-cloud{display:flex;flex-wrap:wrap;gap:8px;padding:22px 0 10px}
.pfq-chip{cursor:pointer;background:transparent;border:1px solid rgba(61,158,153,.22);border-radius:3px;
  padding:9px 14px;color:rgba(247,244,240,.5);font-family:var(--pf-sans);font-size:.86rem;transition:.18s}
.pfq-chip:hover{border-color:rgba(142,206,192,.5);color:var(--q-warm)}
.pfq-chip.sel{background:rgba(61,158,153,.16);border-color:var(--q-accent-light);color:var(--q-accent-light)}
.pfq-light .pfq-chip{border-color:rgba(45,123,122,.22);color:#5d6b6a}
.pfq-light .pfq-chip.sel{background:var(--q-wash);border-color:var(--q-accent);color:var(--q-accent-deep)}

/* continue button */
.pfq-cta-wrap{position:sticky;bottom:0;padding:18px 0 24px;
  background:linear-gradient(180deg,transparent,var(--q-ink) 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.pfq-cta-wrap.show{opacity:1;pointer-events:auto}
.pfq-light .pfq-cta-wrap{background:linear-gradient(180deg,transparent,var(--q-mist) 40%)}
.pfq-btn{display:block;width:100%;background:var(--q-accent);color:#fff;border:0;cursor:pointer;
  font-family:var(--pf-sans);font-weight:600;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  padding:17px;border-radius:5px;transition:.2s;text-align:center}
.pfq-btn:hover{background:var(--q-accent-deep)}
.pfq-btn:disabled{opacity:.5;cursor:default}

/* loader */
.pfq-loader{text-align:center;padding-top:24vh}
.pfq-spin{width:54px;height:54px;border-radius:50%;margin:0 auto;
  border:1px solid rgba(61,158,153,.18);border-top-color:var(--q-accent-light);animation:pfq-rot 1s linear infinite}
@keyframes pfq-rot{to{transform:rotate(360deg)}}
.pfq-loader .pfq-q{font-style:italic}
.pfq-load-msg{color:var(--q-muted);font-size:.9rem;letter-spacing:.06em;margin-top:14px}

/* email reveal gate */
.pfq-email{display:flex;align-items:center;min-height:88vh}
.pfq-email-inner{text-align:center;max-width:440px;margin:0 auto}
.pfq-seal{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;
  border:1px solid rgba(61,158,153,.3);color:var(--q-accent-light);font-size:1.4rem;margin-bottom:26px}
.pfq-reveal-h{font-family:var(--pf-serif);font-weight:500;font-size:clamp(2rem,6vw,2.7rem);color:var(--q-warm);margin:0}
.pfq-reveal-h i{font-style:italic;color:var(--q-accent-light)}
.pfq-email-sub{color:var(--q-muted);font-size:1rem;margin:14px 0 26px}
.pfq-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(61,158,153,.25);border-radius:5px;
  padding:16px 18px;color:var(--q-warm);font-family:var(--pf-sans);font-size:1.05rem;text-align:center;outline:none;transition:.2s}
.pfq-input::placeholder{color:rgba(122,143,142,.5)}
.pfq-input:focus{border-color:var(--q-accent-light)}
.pfq-input.err{border-color:#d98a7a;animation:pfq-shake .3s}
@keyframes pfq-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pfq-email-go{margin-top:14px}
.pfq-fine{color:rgba(122,143,142,.6);font-size:.78rem;margin-top:14px}

/* ============ RESULT ============ */
.pfq-result{padding-bottom:30px}
.pfq-hero-res{padding:30px 2px 28px;border-bottom:1px solid rgba(61,158,153,.12);
  background:linear-gradient(135deg,#1A2624,var(--q-ink));margin:-18px -22px 0;padding-left:22px;padding-right:22px;padding-top:48px}
.pfq-res-eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(142,206,192,.75);margin:0 0 12px;font-weight:500}
.pfq-res-name{font-family:var(--pf-serif);font-weight:500;font-size:clamp(2.6rem,9vw,3.4rem);line-height:1.05;color:var(--q-warm);margin:0}
.pfq-diamond{width:110px;height:1px;background:rgba(142,206,192,.35);position:relative;margin:18px 0 16px}
.pfq-diamond:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;background:var(--q-accent-light);transform:translate(-50%,-50%) rotate(45deg)}
.pfq-res-tag{margin:0;font-family:var(--pf-serif);font-style:italic;font-size:.95rem;color:rgba(61,158,153,.6)}
.pfq-res-body{padding:26px 2px 22px;border-bottom:1px solid rgba(255,255,255,.05)}
.pfq-res-desc{font-family:var(--pf-serif);font-size:1.22rem;line-height:1.7;color:rgba(247,244,240,.85);margin:0}
.pfq-res-line{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--q-accent);margin:16px 0 0}
.pfq-pack{padding:22px 2px;border-bottom:1px solid rgba(255,255,255,.05)}
.pfq-pack-label{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--q-muted);margin:0 0 14px}
.pfq-pack-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.pfq-pack-row:last-child{border-bottom:0}
.pfq-pack-row .e{font-size:1.15rem;width:24px;text-align:center}
.pfq-pack-row .n{flex:1;color:var(--q-warm);font-size:1rem}
.pfq-pack-row .f{font-size:.7rem;letter-spacing:.06em;color:var(--q-muted)}
.pfq-provider{margin:0 -22px;padding:15px 22px;background:rgba(61,158,153,.06);
  font-style:italic;color:var(--q-muted);font-size:.92rem}
.pfq-res-cta{padding:28px 2px 10px;text-align:center}
.pfq-btn-lg{display:block;font-size:.82rem;padding:19px}
.pfq-res-fine{color:var(--q-muted);font-size:.82rem;margin:14px 0 0}
.pfq-res-emailed{color:var(--q-accent-light);font-size:.84rem;font-weight:600;margin:14px 0 0;font-family:var(--pf-sans)}
.q-retrieve-link{margin:14px 0 0;text-align:center}
.q-retrieve-link a{color:var(--pf-teal);font-family:var(--pf-sans);font-size:.92rem;text-decoration:underline;text-underline-offset:3px}
.q-retrieve-link a:hover{opacity:.75}
.pfq-share{display:flex;gap:10px;margin:22px 0 18px;justify-content:center;flex-wrap:wrap}
.pfq-share-wa,.pfq-share-copy{background:transparent;border:1px solid rgba(142,206,192,.3);color:var(--q-accent-light);
  border-radius:999px;padding:11px 20px;font-family:var(--pf-sans);font-size:.82rem;cursor:pointer;transition:.18s}
.pfq-share-wa{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.4);color:#7fe3a6}
.pfq-share-wa:hover{background:rgba(37,211,102,.2)}
.pfq-share-copy:hover{border-color:var(--q-accent-light);color:#fff}
.pfq-browse{display:inline-block;margin-top:6px;color:rgba(122,143,142,.7);font-size:.92rem;
  text-decoration:underline;text-underline-offset:3px}
.pfq-browse:hover{color:var(--q-accent-light)}

/* ============ BUSINESS QUIZ — landing + result extras ============ */
.q-four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.q-plan-card{background:#fff;border:1px solid var(--pf-rule);border-radius:18px;padding:26px 22px;transition:.2s;position:relative}
.q-plan-card:hover{transform:translateY(-5px);box-shadow:var(--pf-shadow)}
.q-plan-card.is-pop{border-color:var(--q-accent)}
.q-plan-card .q-pop{position:absolute;top:-11px;left:22px;background:var(--q-accent);color:#fff;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:999px;font-weight:600}
.q-plan-card .q-plan-name{font-family:var(--pf-serif);font-size:1.5rem;color:var(--pf-ink);margin:0}
.q-plan-card .q-plan-price{font-family:var(--pf-serif);font-size:1.9rem;color:var(--pf-teal);margin:.1em 0 .2em;font-weight:600}
.q-plan-card .q-plan-price small{font-size:.7rem;color:var(--pf-muted);font-family:var(--pf-sans);letter-spacing:.04em}
.q-plan-card p{margin:0;color:#5b5350;font-size:.96rem;font-weight:300}
/* phase cards (landing) */
.q-plan-card .q-phase-num{display:inline-block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pf-teal);font-weight:600;margin-bottom:6px}
.q-plan-card .q-phase-feel{font-family:var(--pf-serif);font-style:italic;font-size:1.04rem;color:var(--pf-teal-deep);margin:.2em 0 .5em}

/* result: phase number above the phase name */
.pfq-phase-num{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--q-accent-light);margin:8px 0 2px;font-weight:500}

/* diagnosis block — "what's keeping you here" */
.pfq-diag{padding:22px 2px;border-bottom:1px solid rgba(255,255,255,.05)}
.pfq-diag-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#e6b9a8;margin:0 0 10px;font-weight:500}
.pfq-diag-text{font-family:var(--pf-serif);font-size:1.22rem;line-height:1.6;color:var(--q-warm);margin:0}

/* next phase block */
.pfq-next{padding:20px 2px;border-bottom:1px solid rgba(255,255,255,.05)}
.pfq-next-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--q-muted);margin:0 0 8px;font-weight:500}
.pfq-next-name{font-family:var(--pf-serif);font-size:1.7rem;color:var(--q-accent-light);margin:0;font-weight:500}
.pfq-next-name span{color:var(--q-accent)}
.pfq-next-line{color:var(--q-muted);font-size:.96rem;margin:4px 0 0}

/* the bridge (plan as prescription) */
.pfq-bridge{margin:0 -22px;padding:22px 22px;background:rgba(61,158,153,.06);border-bottom:1px solid rgba(255,255,255,.05)}
.pfq-bridge-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--q-accent-light);margin:0 0 12px;font-weight:500}
.pfq-bridge-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pfq-bridge-name{font-family:var(--pf-serif);font-size:1.9rem;color:var(--q-warm);font-weight:500}
.pfq-bridge-price{font-family:var(--pf-serif);font-size:1.5rem;color:var(--q-accent-light);font-weight:500;white-space:nowrap}
.pfq-bridge-price small{font-size:.7rem;color:var(--q-muted);font-family:var(--pf-sans);letter-spacing:.04em}
.pfq-bridge-pos{font-style:italic;color:var(--q-soft);font-size:1rem;margin:6px 0 14px;font-family:var(--pf-serif)}

.pfq-feats{list-style:none;margin:0;padding:0}
.pfq-feats li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;color:var(--q-warm);font-size:.96rem;border-bottom:1px solid rgba(255,255,255,.04)}
.pfq-feats li:last-child{border-bottom:0}
.pfq-feats .ck{color:var(--q-accent-light);font-weight:700;flex-shrink:0}

/* result: recommended reads */
.pfq-reads{padding:22px 2px;border-top:1px solid rgba(255,255,255,.06)}
.pfq-reads-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--q-accent-light);margin:0 0 14px;font-weight:500}
.pfq-read{display:block;background:var(--q-charcoal-mid);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:15px 16px;margin-bottom:10px;transition:.18s}
.pfq-read:hover{border-color:rgba(142,206,192,.5);transform:translateY(-1px)}
.pfq-read-t{display:block;font-family:var(--pf-serif);font-size:1.12rem;color:var(--q-warm);line-height:1.25}
.pfq-read-x{display:block;color:var(--q-muted);font-size:.86rem;margin:5px 0 8px}
.pfq-read-go{display:inline-block;color:var(--q-accent-light);font-size:.78rem;letter-spacing:.06em;font-weight:500}

/* ============ Responsive ============ */
@media(max-width:900px){
  .q-four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .q-six{grid-template-columns:1fr}
  .quiz-hero{padding:84px 0 86px}
}
@media(max-width:520px){
  .q-four{grid-template-columns:1fr}
}