/* Pillow Finder page. Lavender illustrated look (Oct 15): Melbourne headlines, Figtree text, art in site/img. Always light. */
@font-face{font-family:"Melbourne";src:url(fonts/melbourne-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Melbourne";src:url(fonts/melbourne-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --bg:#f7f5fe; --card:#ece8fb; --card2:#e2dcf8; --line:#dcd6f3; --track:#e4e0f7;
  --ink:#2a2244; --head:#2f2766; --sub:#8c86ab; --purple:#4a3f8c; --bright:#6e62de;
  --gold:#f4c46b; --coral:#e8775b; --green:#2c7a57; --err:#b3261e;
  /* Headlines: Melbourne (licence check open). Swap to var(--f-body) here to drop it. */
  --f-head:"Melbourne","Figtree",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--f-body);-webkit-text-size-adjust:100%}
button{-webkit-tap-highlight-color:transparent;font-family:inherit}
:focus-visible{outline:2px solid var(--bright);outline-offset:2px}
.pf{position:relative;max-width:480px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
@media (min-width:520px){body{background:#ebe8f5}.pf{box-shadow:0 0 0 1px var(--line)}}
.scroll,.thread{flex:1;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scroll::-webkit-scrollbar,.thread::-webkit-scrollbar{display:none}

/* ---------- shared pieces ---------- */
.nav{flex:0 0 auto;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:14px 20px 6px}
.nav .logo{justify-self:center;height:24px;width:auto}
.bk{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--purple);display:grid;place-items:center;cursor:pointer;padding:0}
.fhead{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:4px 22px 8px;font:600 13px var(--f-body);color:var(--sub);white-space:nowrap}
.segs,.cprog{flex:1;display:flex;gap:4px}
.segs i,.cprog i{flex:1;height:6px;border-radius:9px;background:var(--track)}
.segs i.on,.cprog i.on{background:var(--bright)}
.moon{width:52px;height:52px;border-radius:50%;background:var(--purple);color:var(--gold);display:grid;place-items:center;flex:0 0 auto}
.moon svg{width:24px;height:24px}
.qh{margin:0;font:500 29px/1.13 var(--f-head);color:var(--head);letter-spacing:-.015em;text-wrap:balance}
.qh.lg{font-size:31px}
.qs{margin:-6px 0 2px;font:400 15.5px/1.45 var(--f-body);color:var(--sub)}
.subq{margin:6px 0 0;font:500 19px/1.2 var(--f-head);color:var(--head)}
.fine{margin:0;font-size:12px;color:var(--sub);text-align:center}
.fine.left{text-align:left}
.err{color:var(--err);font:600 13px var(--f-body)}
.badge{display:inline-block;vertical-align:middle;margin-left:6px;padding:3px 9px;border-radius:999px;background:var(--card);color:var(--purple);font:600 11px var(--f-body);letter-spacing:.05em;text-transform:uppercase}
.plink{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.hint{margin:-4px 0 0;font-size:12.5px;color:var(--sub)}
.lbl{font:600 12px var(--f-body);color:var(--sub)}

/* illustrated answer cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.c{position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;border:1.5px solid transparent;background:var(--card);border-radius:20px;padding:10px 12px 14px;cursor:pointer;color:var(--ink);font:inherit;transition:background .15s,border-color .15s,box-shadow .15s}
.c .art{width:100%;height:auto;aspect-ratio:420/258;object-fit:cover;border-radius:14px;display:block;margin-bottom:6px;background:var(--card2)}
.c b{font:600 16px/1.25 var(--f-body);color:var(--head)}
.c small{font:400 13px/1.35 var(--f-body);color:var(--sub)}
.c .ck{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--purple);color:#fff;display:none;place-items:center;z-index:1}
.c[aria-checked="true"],.c[aria-pressed="true"]{background:#fff;border-color:var(--bright);box-shadow:0 6px 16px -10px rgba(74,63,140,.6)}
.c[aria-checked="true"] .ck,.c[aria-pressed="true"] .ck{display:grid}
/* small tiles in the chat dock */
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.c.sm{padding:4px 4px 8px;border-radius:14px;align-items:center;text-align:center}
.c.sm .art{border-radius:10px;margin-bottom:4px}
.c.sm b{font-size:12.5px;line-height:1.2}
.c.sm .ck{width:20px;height:20px;top:4px;right:4px}

/* rows: height (radio) and "anything else" (checkbox with icon) */
.rows{display:flex;flex-direction:column;gap:10px}
.rowc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid transparent;background:var(--card);border-radius:18px;padding:13px 16px;min-height:58px;font:600 16px/1.3 var(--f-body);color:var(--head);cursor:pointer}
.rowc .tx{flex:1;min-width:0}
.rowc .rd{flex:0 0 22px;height:22px;border-radius:50%;border:2px solid #b8b0dc;background:#fff;display:grid;place-items:center}
.rowc .ico{flex:0 0 40px;width:40px;height:40px;border-radius:10px;object-fit:cover}
.rowc .cb{flex:0 0 22px;height:22px;border-radius:7px;border:2px solid #b8b0dc;background:#fff;display:grid;place-items:center;color:transparent}
.rowc[aria-checked="true"]{background:#fff;border-color:var(--bright)}
.rowc[aria-checked="true"] .rd{border-color:var(--purple)}
.rowc[aria-checked="true"] .rd::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--purple)}
.rowc[aria-checked="true"] .cb{border-color:var(--purple);background:var(--purple);color:#fff}

/* buttons */
.dock{flex:0 0 auto;padding:10px 18px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.cta{width:100%;border:0;border-radius:999px;background:var(--purple);color:#fff;font:600 18px var(--f-body);padding:15px 18px;min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-align:center;text-decoration:none}
.cta:disabled{opacity:.45;cursor:default}
.cta.alt2{background:#fff;color:var(--purple);border:1.5px solid var(--purple);font-size:15px;min-height:46px;padding:11px 16px}
.linkish{background:none;border:0;color:var(--purple);font:600 14px var(--f-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px;min-height:44px;align-self:center}
.dock .linkish:disabled{color:var(--sub);text-decoration:none;cursor:default}

/* ---------- form skin ---------- */
.land,.form{padding:12px 22px 22px;display:flex;flex-direction:column;gap:14px}
.land .fine{margin-top:4px}
.fq{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.fq legend{padding:0;margin-bottom:14px}
.form > .moon{margin-bottom:-2px}
.fq legend.qh{display:block}
.fl{font:600 14px var(--f-body);color:var(--head)}
.fl small{font:400 12.5px var(--f-body);color:var(--sub);margin-left:4px}
.mailf{display:flex;flex-direction:column;gap:8px}
.mailf input,.lrow input{width:100%;min-width:0;min-height:50px;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font:400 16px var(--f-body);color:var(--ink);background:#fff}
/* blurred peek at the match on the email step */
.peek{position:relative;display:flex;gap:12px;align-items:center;border-radius:18px;background:#fff;border:1.5px solid var(--line);padding:12px;overflow:hidden}
.peek .pimg{flex:0 0 64px;height:64px;border-radius:14px;background:var(--card);overflow:hidden}
.peek .pimg img{width:100%;height:100%;object-fit:cover;filter:blur(7px);transform:scale(1.15)}
.peek .ln{flex:1;display:flex;flex-direction:column;gap:7px;filter:blur(3px)}
.peek .ln i{display:block;height:10px;border-radius:6px;background:var(--card2)}
.peek .ln i:nth-child(1){width:40%}.peek .ln i:nth-child(2){width:85%}.peek .ln i:nth-child(3){width:60%}
.peek .lock{position:absolute;inset:0;display:grid;place-items:center}
.peek .lock span{display:flex;gap:6px;align-items:center;background:#fff;border-radius:999px;padding:6px 12px;font:600 13px var(--f-body);color:var(--purple);box-shadow:0 4px 14px -6px rgba(74,63,140,.5)}

/* ---------- chat skin ---------- */
.shead{position:sticky;top:0;z-index:2;background:var(--card)}
.shin{display:flex;align-items:center;gap:10px;padding:14px 16px 11px;background:#fff;border-radius:28px 28px 0 0;border-bottom:1px solid #eeeaf9}
.shead .av{width:34px;height:34px;flex-basis:34px}
.shead .who{flex:1;min-width:0}
.shead .who b{display:block;font:600 15px var(--f-body);color:var(--head)}
.shead .who span{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--sub)}
.shead .who span .on{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
.cprog{display:flex;margin-top:6px}
.cprog i{height:5px}
.thread{display:flex;flex-direction:column}
.intro{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;padding:8px 22px 22px}
.msgs{padding:12px 14px 16px;display:flex;flex-direction:column;gap:7px}
.sheet.chat .bub{background:var(--card);border-color:transparent}
.row{display:flex;gap:8px;align-items:flex-end}
.row.me{justify-content:flex-end;margin:4px 0}
.av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--purple);color:var(--gold);display:grid;place-items:center}
.av.blank{visibility:hidden}
.bub{max-width:84%;padding:10px 13px;border-radius:18px 18px 18px 6px;background:#fff;border:1.5px solid var(--line);font:400 15px/1.4 var(--f-body)}
.bub.q{font-weight:600;color:var(--head);background:var(--card);border-color:transparent;text-wrap:balance}
.qsub{font-weight:400;color:var(--sub);font-size:13px}
.row.me .bub{border:0;font:600 15px/1.4 var(--f-body);text-align:left;background:var(--purple);color:#fff;border-radius:18px 18px 6px 18px;cursor:pointer}
.row.me .bub.static{cursor:default}
.row.wide{display:block}
.row.wide .av{display:none}
.typing{display:inline-flex;gap:4px;padding:12px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--sub);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.new{animation:rise .28s ease-out}
@keyframes rise{from{transform:translateY(6px)}to{transform:none}}
.is-chat .dock{background:#fff;border-top:1.5px solid var(--line);padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px))}
.dock .hint{margin:0;font:600 11px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:10px 14px;min-height:44px;font:600 14px var(--f-body);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--card);border-color:var(--purple);color:var(--purple)}
.more{align-self:center;border:1.5px solid var(--line);background:#fff;color:var(--sub);border-radius:999px;padding:8px 16px;min-height:40px;font:600 13.5px var(--f-body);cursor:pointer}
.qr{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.qr button{border:1.5px solid var(--purple);background:#fff;color:var(--purple);border-radius:999px;padding:8px 13px;min-height:40px;font:600 13px var(--f-body);cursor:pointer}

/* ---------- result ---------- */
.rtitle{margin:0}
.rstack{display:flex;flex-direction:column;gap:10px;min-width:0}
.card{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:12px}
.hero{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center}
.hero img{width:92px;height:92px;border-radius:16px;object-fit:cover;background:var(--card)}
.hero .tag,.pairhead .tag{font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--coral)}
.hero h3{margin:2px 0 0;font:500 23px/1.1 var(--f-head);color:var(--head)}
.hero .rt,.pairhead .rt{font:400 13px var(--f-body);color:var(--sub);margin-top:3px}
.why{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.why li{display:flex;gap:9px;font:400 14.5px/1.4 var(--f-body)}
.why li::before{content:"";flex:0 0 20px;height:20px;border-radius:50%;margin-top:1px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%234a3f8c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.seg{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.seg .lbl{min-width:68px}
.seg button{flex:1;min-height:44px;border:1.5px solid transparent;background:var(--card);border-radius:12px;padding:8px 10px;font:600 14px var(--f-body);color:var(--head);cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;border-color:var(--bright);color:var(--purple)}
.alt{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;border:1.5px dashed var(--line);border-radius:14px;padding:8px 10px}
.alt img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.alt b{display:block;font:600 14px var(--f-body);color:var(--head)}
.alt small{font-size:12px;color:var(--sub)}
.alt button{border:1.5px solid var(--purple);background:#fff;color:var(--purple);border-radius:999px;padding:7px 12px;min-height:40px;font:600 13px var(--f-body);cursor:pointer}
.add{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;border:1.5px solid transparent;border-radius:14px;padding:6px 10px 6px 6px;min-height:50px;background:var(--card);cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.add img{width:36px;height:36px;border-radius:9px;object-fit:cover}
.add .nm{font:600 14px var(--f-body);color:var(--head)}
.add .pr{font:600 13px var(--f-body);color:var(--purple);white-space:nowrap}
.add[aria-pressed="true"]{border-color:var(--bright);background:#fff}
.tot{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font:400 14px var(--f-body);font-variant-numeric:tabular-nums;border-top:1.5px dashed var(--line);padding-top:10px}
.tot small{color:var(--sub)}
.tot .r{text-align:right}
.tot s{color:var(--sub);margin-right:3px}
.tot .g{color:var(--green);font-weight:600}
.tot .big{font:600 18px var(--f-body);color:var(--head)}
.late{display:flex;flex-direction:column;gap:8px;border-top:1.5px dashed var(--line);padding-top:12px}
.lrow{display:flex;gap:6px}
.mini{flex:0 0 auto;min-height:50px;border:0;border-radius:14px;padding:0 16px;background:var(--purple);color:#fff;font:600 14px var(--f-body);cursor:pointer}
.card.pair{border-style:dashed;border-color:var(--bright);background:#fbfaff}
.pairhead{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center}
.pairhead img{width:64px;height:64px;border-radius:14px;object-fit:cover}
.pairhead h3{margin:2px 0 0;font:500 19px/1.15 var(--f-head);color:var(--head)}
.pwhy{margin:0;font-size:14px}

/* hover only where a pointer really hovers, so taps don't leave cards highlighted */
@media (hover:hover){
  .c:hover,.rowc:hover{border-color:var(--bright)}
  .chip:hover{border-color:var(--purple)}
  .more:hover{border-color:var(--purple);color:var(--purple)}
}
@media (prefers-reduced-motion:reduce){.new,.typing i{animation:none}.c{transition:none}}
/* the peek as one of Mel's messages, lined up with the bubbles */
.thread .peek{margin-left:38px;max-width:calc(84% + 8px)}

/* colour picker on the result card: one row until tapped, then swatches */
.sw{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(47,39,102,.18);display:inline-block}
.colrow{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;border:1.5px solid transparent;background:var(--card);border-radius:12px;padding:8px 12px;cursor:pointer;text-align:left;font:inherit;color:var(--head)}
.colrow .lbl{min-width:58px}
.colrow b{font:600 14px var(--f-body);flex:1}
.colrow .chg{font:600 13px var(--f-body);color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.colours{display:flex;flex-direction:column;gap:8px}
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.swb{display:flex;align-items:center;gap:8px;min-height:44px;border:1.5px solid transparent;background:var(--card);border-radius:12px;padding:6px 10px;cursor:pointer;text-align:left;font:600 13.5px var(--f-body);color:var(--head)}
.swb span:not(.sw){flex:1;min-width:0}
.swb small{font:600 12px var(--f-body);color:var(--sub)}
.swb[aria-checked="true"]{background:#fff;border-color:var(--bright);color:var(--purple)}
@media (hover:hover){.colrow:hover,.swb:hover{border-color:var(--bright)}}

/* first screen hook (Oct 15): social proof, headline, how it works, what you get */
.proof{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 12px 6px 10px;font:400 13.5px var(--f-body);color:var(--ink)}
.proof .stars{display:inline-flex;gap:1px;color:#f5a623}
.proof b{font-weight:600;color:var(--head)}
.gets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.gets li{display:flex;align-items:center;gap:10px;font:600 15px/1.3 var(--f-body);color:var(--head)}
.gets .gi{flex:0 0 24px;height:24px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center}
.sleepers{margin:-2px 0 0;font:400 13.5px var(--f-body);color:var(--sub)}
/* First screens (option 2, Oct 15): hook on the lavender page, the quiz on a white panel that runs to the bottom */
.is-chat,.is-land{background:var(--card)}
/* Full screen after the first answer: white, no logo, Back in the top row */
.is-sheet,.is-full{background:#fff}
.is-sheet .sheet,.is-full .sheet{border-radius:0;box-shadow:none}
.is-full .shead{background:#fff}
.is-full .shin{border-radius:0}
.fbar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 18px 8px}
.fbar .fhead{flex:1;padding:0}
.is-land .scroll,.is-sheet .scroll{display:flex;flex-direction:column}
.is-sheet .dock{background:#fff}
.land{flex:0 0 auto;padding-bottom:22px}
.land .qs,.intro .qs,.land .sleepers,.intro .sleepers{color:#5f5985}
.sheet{flex:1 0 auto;background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -8px 30px rgba(74,63,140,.14)}
.is-land .sheet{padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.qhead{display:flex;flex-direction:column;gap:4px}
.qhead .subq{margin:0;font-size:21px}
.qhead .qs{margin:0;font-size:14.5px;color:var(--sub)}
.is-chat .dock{border-top-color:#eeeaf9}
/* Chat answer tiles: four across for up to 4 options, three across for 6 */
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.intro .qh.lg{font-size:26px}
.intro .proof{margin-bottom:2px}