/* MyPatchly landing, Pauline's design.
   Tokens, type sizes and geometry taken from her Figma exports (29 Aug 2026).
   Artwork cropped from her full-page exports; all text is live so it stays
   sharp, selectable and readable by screen readers. */

:root{
  --cream:#FDF6EB;
  --card:#FBF3E2;
  --sand:#CDBD9B;
  --sand-20:rgba(205,189,155,.2);
  --olive:#7D8253;
  --olive-deep:#4A5433;
  --ink:#1F1F1C;
  --gold:#C9B95D;
  --green:#106441;
  --ribbon-ink:#FBD9A6;
  --ribbon-edge:#453E30;
  --inset:#F9EFDC;
  --maxw:1440px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream) url("assets/pauline/paper.webp?v=2");
  background-size:256px;
  color:var(--ink);
  font-family:Fraunces,Georgia,"Times New Roman",serif;
  font-variation-settings:'SOFT' 100,'WONK' 0;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--olive-deep)}

.page{max-width:var(--maxw);margin:0 auto;padding:24px 24px 0;position:relative;z-index:1}

/* ---------- shared card chrome ---------- */
.card{position:relative;border:1.8px solid var(--sand);border-radius:28px;background:transparent}
.corner{
  position:absolute;width:76px;height:63px;pointer-events:none;
  background:no-repeat center/contain;
}
.corner.tl{left:8px;top:8px;background-image:url("assets/pauline/corner_lu.webp?v=2")}
.corner.tr{right:8px;top:8px;background-image:url("assets/pauline/corner_ru.webp?v=2")}
.corner.bl{left:8px;bottom:8px;background-image:url("assets/pauline/corner_ld.webp?v=2")}
.corner.br{right:8px;bottom:8px;background-image:url("assets/pauline/corner_rd.webp?v=2")}

.sprig{
  display:inline-block;width:46px;height:32px;vertical-align:middle;margin:0 10px;
  background:url("assets/pauline/leaf_l.webp?v=2") no-repeat center/contain;
}
.sprig.flip{background-image:url("assets/pauline/leaf_r.webp?v=2")}

/* ---------- 01 hero ---------- */
.hero{margin:0 0 28px;position:relative}
.hero-art{
  width:100%;border:2px solid var(--olive);border-radius:28px;
}
.hero-logo{
  position:absolute;top:4.5%;left:50%;transform:translateX(-50%);
  width:clamp(220px,34%,470px);height:auto;
}

/* ---------- 02 welcome ---------- */
.welcome{padding:52px 72px 44px;text-align:center;margin-bottom:64px}
.eyebrow{
  font-size:23px;font-weight:500;line-height:110%;letter-spacing:-.01em;
  color:var(--olive-deep);margin:0 0 26px;
}
.display{
  font-size:60px;font-weight:600;line-height:92%;letter-spacing:-.01em;
  font-variation-settings:'SOFT' 100,'WONK' 1;
  margin:0 0 26px;text-wrap:balance;
}
.lede{
  font-size:25px;font-weight:500;line-height:130%;letter-spacing:-.01em;
  margin:0 auto 34px;max-width:1000px;text-wrap:balance;
}

.cta{
  display:inline-flex;align-items:center;justify-content:center;
  width:394px;max-width:100%;height:80px;
  background:linear-gradient(rgba(201,185,93,.88),rgba(201,185,93,.88)),url("assets/pauline/paper.webp?v=2");
  background-size:auto,256px;
  border:2.8px solid var(--ink);border-radius:20px;
  box-shadow:4px 6px 0 rgba(43,38,23,.26);
  font-size:32px;font-weight:400;line-height:1;letter-spacing:-.02em;
  font-variation-settings:'SOFT' 100,'WONK' 1;
  color:var(--ink);text-decoration:none;position:relative;
  transition:transform .12s ease;
}
.cta::after{
  content:"";position:absolute;inset:5px;border:2px dashed rgba(0,0,0,.35);border-radius:15px;
}
.cta:hover{transform:translateY(-2px)}
.cta:focus-visible{outline:3px solid var(--olive-deep);outline-offset:4px}

.trust{
  list-style:none;margin:34px 0 0;padding:0;
  display:flex;justify-content:center;align-items:center;gap:110px;flex-wrap:wrap;
}
.trust li{display:flex;align-items:center;gap:16px;text-align:left}
.trust img{width:76px;height:76px;flex:none;border-radius:50%}
.trust span{font-size:22px;font-weight:500;line-height:120%}

/* ---------- 03 quote ---------- */
.quote-band{
  position:relative;background:rgba(205,189,155,.16);border-radius:28px;
  margin:0 56px 72px;padding:28px 24px;
  display:flex;align-items:center;justify-content:center;gap:24px;
}
.quote-band::before{
  content:"";position:absolute;inset:10px;border:2px dashed var(--sand);border-radius:18px;
  pointer-events:none;
}
.quote{
  margin:0;font-size:30px;font-style:italic;font-weight:600;line-height:122%;
  letter-spacing:-.02em;text-align:center;flex:0 1 800px;
}
.q-art{width:205px;flex:none;background:none;align-self:flex-end;margin-bottom:-6px}
.quote-band .mini{
  position:absolute;left:50%;width:37px;height:34px;transform:translateX(-50%);
  background:url("assets/pauline/mini_flower.webp?v=2") no-repeat center/contain;
}
.quote-band .mini.top{top:-16px}
.quote-band .mini.bot{bottom:-16px}
.q-art.right{width:222px}

/* ---------- 04 quiz ---------- */
.quiz-section{position:relative;margin:0 48px 40px}
.banner{
  position:relative;z-index:2;width:max-content;max-width:100%;margin:0 auto -28px;
  display:flex;align-items:center;justify-content:center;
  background:url("assets/pauline/ribbon_banner.webp?v=2") no-repeat center/100% 100%;
  padding:32px 160px;
}
.banner h2{
  margin:0;font-size:36px;font-weight:400;line-height:1;letter-spacing:-.02em;
  font-variation-settings:'SOFT' 100,'WONK' 1;
  color:var(--ribbon-ink);text-align:center;
}

.quiz-card{
  border:none;background:transparent;
  padding:58px 40px 130px;position:relative;
}
.quiz-card::after{
  content:"";position:absolute;inset:0 0 78px 0;
  border:1.6px solid #DCD3BF;border-bottom:none;border-radius:104px 104px 0 0;
  pointer-events:none;
}
.quiz-card::before{
  content:"";position:absolute;inset:14px 14px 96px 14px;
  border:1.5px solid rgba(205,189,155,.38);border-bottom:none;
  border-radius:92px 92px 0 0;pointer-events:none;
}
.quiz-wave{
  position:absolute;left:-1px;bottom:-32px;width:calc(100% + 2px);height:150px;
  display:block;pointer-events:none;
}
.quiz-sub{
  margin:0 0 26px;font-size:26px;font-weight:500;line-height:110%;text-align:center;
}

/* ---------- footer ---------- */
.foot{position:relative;margin:0 -24px;padding:300px 24px 96px}
.foot::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:100%;
  background:url("assets/pauline/patchwork_ground.webp?v=2") no-repeat top center/cover;
  z-index:-1;
}
.foot-card{max-width:1160px;margin:0 auto;padding:64px 96px 48px;text-align:center;background:var(--cream) url("assets/pauline/paper.webp?v=2");background-size:256px}
.foot-mark{
  margin:0 0 24px;font-size:60px;font-weight:600;line-height:92%;letter-spacing:-.01em;
  font-variation-settings:'SOFT' 100,'WONK' 1;
}
.foot-mark .sprig{width:44px;height:30px;margin:0 16px}
.legal{margin:0 0 8px;font-size:18px;font-weight:500;line-height:115%}
.foot-link{
  display:inline-block;margin-top:20px;padding:12px 18px;
  font-size:18px;font-weight:500;color:var(--olive-deep);
}
.foot-link:focus-visible{outline:2px solid var(--olive-deep);outline-offset:2px}

/* ---------- the quiz component, restyled to match ----------
   Class names come from quiz.js: .quiz-progress-row, .quiz-dots, .dot(.dot-on),
   .pace-cue, .quiz-question, .quiz-options, .option, .quiz-nav              */
.quiz{max-width:1120px;margin:0 auto}

.quiz-progress-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 28px}
.quiz-dots{display:flex;align-items:center;gap:0}
.quiz-dots .dot{
  width:13px;height:13px;border-radius:50%;background:var(--sand);flex:none;position:relative;
}
.quiz-dots .dot + .dot{margin-left:48px}
.quiz-dots .dot + .dot::before{
  content:"";position:absolute;right:13px;top:5px;width:48px;
  border-top:3px dashed var(--sand);
}
.quiz-dots .dot-on{width:22px;height:22px;background:var(--olive)}

.pace-cue{font-size:16px;color:var(--olive-deep);font-weight:500}

.quiz-question{
  font-size:40px;font-weight:600;line-height:100%;letter-spacing:-.02em;
  text-align:center;margin:0 0 46px;text-wrap:balance;color:var(--ink);
}

.quiz-options{
  counter-reset:optnum;
  display:flex;gap:20px;justify-content:center;align-items:stretch;flex-wrap:wrap;
  margin:0 auto;max-width:1120px;
}
.quiz-options .option{
  counter-increment:optnum;
  flex:0 1 360px;min-height:190px;margin-bottom:26px;
  background:transparent;border:1.6px solid #D9CFBA;border-radius:60px;
  font-family:inherit;font-size:33px;font-weight:600;line-height:120%;letter-spacing:-.02em;
  color:var(--ink);cursor:pointer;padding:30px 42px;text-align:center;
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:border-color .12s ease,background .12s ease,transform .12s ease;
}
.quiz-options .option::after{
  content:"";position:absolute;left:2.36%;right:2.36%;top:3.6%;bottom:3.15%;
  border:2px solid var(--sand);border-radius:50px;opacity:.3;pointer-events:none;
}
.quiz-options .option::before{
  content:counter(optnum);
  position:absolute;left:50%;bottom:-26px;width:52px;height:52px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--card);border:2px solid var(--sand);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:0;
}
.quiz-options .option::after{
  content:counter(optnum);
  position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  font-size:22px;font-weight:600;color:var(--ink);z-index:2;
  border:0;inset:auto auto -12px 50%;border-radius:0;opacity:1;
}
.quiz-options .option:hover{border-color:var(--olive);transform:translateY(-2px)}
.quiz-options .option.selected{
  background:linear-gradient(rgba(205,189,155,.14),rgba(205,189,155,.14)),url("assets/pauline/paper.webp?v=2");
  background-size:auto,256px;
  border:2.6px solid var(--olive);
}
.quiz-options .option.selected::before{background:var(--olive);border-color:var(--olive-deep)}
.quiz-options .option.selected::after{color:var(--cream)}
.next-arrow{
  position:absolute;left:50%;bottom:-61px;transform:translateX(-50%);z-index:3;
  width:132px;height:62px;border-radius:40px;cursor:pointer;
  background:#4F8A6B;border:2.4px solid var(--ink);color:var(--cream);
  font-size:30px;line-height:1;font-family:inherit;
  outline:2px dashed rgba(253,246,235,.7);outline-offset:-8px;
  box-shadow:3px 5px 0 rgba(43,38,23,.26);
}
.next-arrow:disabled{opacity:.4;box-shadow:none;cursor:default}
.next-arrow:not(:disabled):hover{transform:translateX(-50%) translateY(-2px)}
.next-arrow:focus-visible{outline:3px solid var(--olive-deep);outline-offset:3px}
.quiz-options .option:hover::before{border-color:var(--olive)}
.quiz-options .option{outline:1.5px solid #E3DAC6;outline-offset:-9px}
.quiz-options .option.selected{outline:1.5px solid rgba(125,130,83,.5)}
.quiz-options .option:focus-visible{outline:3px solid var(--olive-deep);outline-offset:4px}

.quiz-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin:34px auto 0;max-width:1120px;font-size:18px;
}
.quiz-nav button,.quiz-nav a{
  font-family:inherit;font-size:18px;background:none;border:0;cursor:pointer;
  color:var(--olive-deep);text-decoration:underline;padding:10px 6px;
}
.quiz-nav button:focus-visible,.quiz-nav a:focus-visible{outline:2px solid var(--olive-deep);outline-offset:2px}

/* email gate + result, same family */
.quiz form{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:22px}
.quiz label{font-size:20px;font-weight:500}
.quiz input[type="email"],.quiz input[type="text"]{
  font-family:inherit;font-size:22px;padding:16px 20px;width:min(460px,100%);
  border:2px solid var(--sand);border-radius:18px;background:var(--card);color:var(--ink);
}
.quiz input:focus-visible{outline:3px solid var(--olive-deep);outline-offset:2px}
.quiz .btn,.quiz button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:168px;height:80px;padding:0 34px;
  background:var(--green);border:2.8px solid var(--ink);border-radius:1000px;
  color:var(--cream);font-family:inherit;font-size:26px;font-weight:500;cursor:pointer;
  box-shadow:inset 4px 4px 0 rgba(249,239,220,.3),inset -4px 4px 0 rgba(249,239,220,.3);
}
.quiz .btn:hover,.quiz button[type="submit"]:hover{transform:translateY(-2px)}
.quiz .btn:focus-visible,.quiz button[type="submit"]:focus-visible{
  outline:3px solid var(--olive-deep);outline-offset:4px}
.quiz p{font-size:20px;line-height:135%;text-align:center;max-width:70ch;margin-inline:auto}
.quiz h2:not(.quiz-question),.quiz h3{
  font-size:34px;font-weight:600;text-align:center;letter-spacing:-.02em;
  font-variation-settings:'SOFT' 100,'WONK' 1;margin:0 0 14px;
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .welcome{padding:44px 40px 38px}
  .display{font-size:clamp(38px,5.2vw,60px)}
  .lede{font-size:clamp(17px,2.2vw,25px)}
  .eyebrow{font-size:clamp(16px,1.9vw,23px)}
  .quote{font-size:clamp(22px,3vw,32px)}
  .q-art{width:24%}
  .quote-band{margin:0 24px 48px;flex-wrap:wrap;justify-content:center}
  .quote{flex:1 1 100%;order:-1;margin-bottom:14px}
  .q-art,.q-art.right{width:150px;flex:none}
  .banner h2{font-size:clamp(21px,3.2vw,36px)}
  .quiz-question{font-size:clamp(25px,3.6vw,40px)}
  .quiz-options .option{font-size:clamp(22px,2.8vw,36px);flex-basis:300px;min-height:180px}
  .foot-mark{font-size:clamp(36px,5vw,60px)}
}
@media (max-width:760px){
  .page{padding:8px 8px 0}
  .hero{margin-bottom:20px}
  .hero-logo{display:none}
  .hero-art{
    border:2px solid var(--olive);border-radius:24px;
    height:min(calc(100vh - 96px), 222vw);
    height:min(calc(100svh - 96px), 222vw);
    object-fit:cover;object-position:center bottom;
  }
  .welcome{padding:38px 22px 32px;margin-bottom:32px;border-radius:28px}
  .eyebrow{font-size:16px;margin-bottom:18px}
  .display{font-size:38px}
  .lede{font-size:16px;margin-bottom:26px}
  .cta{width:300px;height:64px;font-size:24px}
  .welcome{display:flex;flex-direction:column}
  .welcome .cta{order:6;align-self:center;margin-top:26px}
  .trust{flex-direction:column;align-items:flex-start;gap:20px;margin-top:6px;
         padding-left:12px}
  .trust::before{content:"";width:88%;margin:0 auto 10px;border-top:1.5px solid var(--sand)}
  .trust img{width:56px;height:56px}
  .trust span{font-size:16px}
  .quote-band{margin:0 4px 36px;padding:24px 14px 18px;flex-wrap:wrap;gap:8px;
              justify-content:space-between}
  .quote{font-size:22px;order:-1;flex-basis:100%;margin-bottom:6px}
  .q-art,.q-art.right{width:105px;flex:none}
  .quiz-section{margin:0 2px 32px}
  .banner{
    background:var(--olive);border:2px solid var(--ribbon-edge);
    clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);
    padding:10px 24px;margin-bottom:-22px;
  }
  .banner h2{font-size:19px;max-width:260px}
  .quiz-card{padding:40px 16px 34px;border-radius:26px}
  .quiz-sub{font-size:16px}
  .quiz-question{font-size:25px}
  .quiz-options{flex-direction:column;gap:16px}
  .quiz-options .option{
    flex-basis:auto;width:100%;min-height:84px;font-size:22px;
    padding:16px 22px 16px 52px;border-radius:44px;
  }
  .quiz-options .option::before{
    width:38px;height:38px;left:-12px;bottom:auto;top:50%;
    transform:translateY(-50%) rotate(45deg);
  }
  .quiz-options .option::after{
    inset:auto;left:-12px;top:50%;transform:translate(0,-50%);
    bottom:auto;font-size:17px;width:38px;text-align:center;line-height:1;
  }
  .quiz-card{border-radius:0;padding:40px 16px 96px}
  .quiz-card::after{inset:0 0 48px 0;border-radius:44px 44px 0 0}
  .quiz-card::before{left:9px;right:9px;top:8px;bottom:56px;border-radius:38px 38px 0 0}
  .quiz-wave{height:96px;bottom:-22px}
  .next-arrow{width:104px;height:50px;font-size:24px;bottom:-46px}
  .quiz-options .option{padding-left:44px}
  .quiz .btn,.quiz button[type="submit"]{height:60px;font-size:20px;min-width:120px}
  .foot{padding:150px 8px 44px;margin:0 -8px}
  .foot-card{padding:34px 22px 30px}
  .foot-mark{font-size:36px}
  .foot-mark .sprig{width:26px;height:18px;margin:0 8px}
  .legal{font-size:13px}
  .foot-link{font-size:13px}
  .corner{width:34px;height:28px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- email gate (Save your Garden) ---------- */
.gate-sub{font-size:24px;font-weight:500;text-align:center;margin:6px 0 8px}
.gate-art{display:block;width:min(460px,80%);height:auto;margin:18px auto 26px}
.result-form input[type="text"]{margin-bottom:14px}
.mail-pill{
  display:flex;align-items:center;gap:10px;width:min(620px,100%);margin:0 auto;
  border:1.6px solid var(--sand);border-radius:999px;background:transparent;
  padding:8px 10px 8px 22px;
}
.mail-ico{font-size:22px;color:var(--olive-deep);flex:none}
.mail-pill input[type="email"]{
  flex:1;border:none;background:transparent;font-family:inherit;font-size:21px;
  color:var(--ink);padding:10px 4px;min-width:0;
}
.mail-pill input[type="email"]:focus-visible{outline:2px solid var(--olive-deep);outline-offset:2px;border-radius:8px}
.mail-go{
  flex:none;width:132px;height:52px;border-radius:999px;cursor:pointer;
  background:transparent;border:1.8px dashed var(--sand);color:var(--ink);
  font-size:26px;line-height:1;font-family:inherit;
}
.mail-go:hover{border-color:var(--olive);color:var(--olive-deep)}
.mail-go:focus-visible{outline:3px solid var(--olive-deep);outline-offset:3px}
/* ---------- result (Your garden match) ---------- */
.match-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 10px}
.match-divider span{width:64px;border-top:1.5px solid var(--sand)}
.match-divider .mf{
  width:26px;height:24px;border:none;
  background:url("assets/pauline/mini_flower.webp?v=2") no-repeat center/contain;
}
.match-scene{display:block;width:min(96%,1080px);height:auto;margin:18px auto -64px}
@media (max-width:760px){
  .gate-sub{font-size:16px}
  .mail-pill{padding-left:14px}
  .mail-go{width:88px;height:44px;font-size:22px}
  .match-scene{margin-bottom:-40px}
}

/* gate + result shared typography */
.result-wrap{text-align:center}
.result-wrap .result-title{
  font-size:52px;font-weight:600;letter-spacing:-.02em;line-height:1.02;
  font-variation-settings:'SOFT' 100,'WONK' 1;margin:6px 0 14px;text-wrap:balance;
}
.result-eyebrow{font-size:24px;font-weight:600;margin:0 0 2px}
.result-line{font-size:24px;font-weight:500;margin:0 0 16px}
.result-trust{font-size:17px;color:var(--olive-deep)}
.quiz .mail-pill button[type="submit"]{
  background:transparent;border:1.8px dashed var(--sand);border-radius:999px;
  box-shadow:none;color:var(--ink);min-width:0;width:132px;height:52px;font-size:26px;padding:0;
}
.quiz .mail-pill button[type="submit"]:hover{border-color:var(--olive);color:var(--olive-deep);transform:none}
@media (max-width:760px){
  .result-wrap .result-title{font-size:32px}
  .result-eyebrow{font-size:17px}
  .result-line{font-size:17px}
  .quiz .mail-pill button[type="submit"]{width:88px;height:44px;font-size:22px}
}

/* laptop heights: keep the whole question + arrow within one viewport */
@media (min-width:761px) and (max-height:960px){
  .quiz-card{padding-top:34px}
  .quiz-sub{margin-bottom:12px;font-size:22px}
  .quiz-progress-row{margin-bottom:14px}
  .quiz-question{margin-bottom:26px;font-size:34px}
  .quiz-options .option{min-height:150px;font-size:29px}
  .quiz-card{padding-bottom:96px}
}

/* mobile: the whole question step, arrow included, inside one phone viewport */
@media (max-width:760px){
  .quiz-card{padding:28px 14px 60px}
  .quiz-sub{margin-bottom:10px;font-size:15px}
  .quiz-progress-row{margin-bottom:12px}
  .quiz-question{margin:0 0 22px;font-size:23px}
  .quiz-options{gap:12px}
  .quiz-options .option{min-height:70px;padding:10px 18px 10px 48px;font-size:20px}
  .quiz-options .option::after{font-size:17px}
}