/* MatchMyIdea - canonical design tokens (design ZIP §3.1) */
:root{
  --ink-900:#101828; --ink-700:#344054; --ink-600:#475467;
  --ink-400:#98A2B3; --ink-300:#D0D5DD;
  --bg:#FAFAF8; --surface:#FFFFFF;
  --border:#EAECF0; --border-soft:#F2F4F7;
  --blue-600:#2970FF; --blue-700:#1B5BDB; --blue-50:#EFF4FF;
  --purple-600:#7A5AF8; --purple-700:#6938EF; --purple-50:#F4F1FE;
  --gold-500:#F7A928; --warm-50:#FFF4E6;
  --success:#12B76A; --success-50:#ECFDF3;
  --error:#F04438; --error-50:#FEF3F2;
  --grad-brand:linear-gradient(100deg,#2970FF 0%,#7A5AF8 91%);
  --grad-cool:linear-gradient(100deg,#2970FF 10%,#7A5AF8 90%);
  --grad-capsule:linear-gradient(100deg,#2970FF 60%,#7A5AF8 100%);
  --sh-sm:0 1px 2px rgba(16,24,40,.05);
  --sh-md:0 6px 16px -4px rgba(16,24,40,.08);
  --sh-lg:0 12px 32px -8px rgba(16,24,40,.14);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:24px;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:'Sora','Inter',-apple-system,BlinkMacSystemFont,
    "Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100dvh}
body{font-family:var(--font-body);
  background:var(--bg);color:var(--ink-900);-webkit-font-smoothing:antialiased}
a{color:var(--blue-600)}
button{font-family:inherit}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.015em}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px 90px}
.ic{display:inline-flex;flex:none;align-items:center;justify-content:center}
.ic svg{display:block}

/* ---------------------------------------------------------------- top nav */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:26px 0 14px}
.logo{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  user-select:none;text-decoration:none}
.logo-word{font-size:21px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink-900)}
.logo-word .my{background:var(--grad-cool);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.topnav{display:flex;gap:26px;align-items:center;font-size:14.5px}
.topnav a{font-weight:600;color:var(--ink-700);text-decoration:none;
  cursor:pointer}
.topnav a:hover{color:var(--ink-900)}
.navlink{font-size:14px;font-weight:600;color:var(--ink-700);
  cursor:pointer;transition:color .15s;border:none;background:none;
  font-family:inherit;padding:0}
.navlink:hover{color:var(--ink-900)}
.topnav a.navcustom{color:var(--purple-700);border:1.5px solid
  rgba(122,90,248,.35);border-radius:999px;padding:7px 16px;
  transition:background .15s,border-color .15s}
.topnav a.navcustom:hover{color:var(--purple-700);text-decoration:none;
  background:var(--purple-50);border-color:rgba(122,90,248,.55)}
.navbtn{font-family:inherit;font-size:14px;font-weight:700;
  color:var(--blue-600);background:var(--surface);
  border:1.5px solid rgba(41,112,255,.4);border-radius:10px;
  padding:8px 16px;cursor:pointer;text-decoration:none;
  display:inline-block}
.navbtn:hover{background:var(--blue-50)}
.navauth{display:inline-flex;gap:12px;align-items:center;
  position:relative}
.navmenu{position:absolute;top:38px;right:0;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--sh-md);padding:8px;min-width:180px;z-index:50}
.navmenu a{display:block;padding:9px 12px;border-radius:8px;
  font-size:14px;color:var(--ink-700);cursor:pointer;
  text-decoration:none}
.navmenu a:hover{background:var(--blue-50);color:var(--ink-900)}
.navpage{margin-right:2px}
.freeline{margin-top:12px;text-align:center;font-size:13.5px;
  color:var(--ink-600)}
.matchnav{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:0 0 12px}
.navarrow{font-family:inherit;font-size:13.5px;font-weight:700;
  color:var(--blue-600);background:var(--surface);
  border:1px solid rgba(41,112,255,.3);border-radius:999px;
  padding:8px 16px;cursor:pointer;min-height:40px}
.navarrow:hover{background:var(--blue-50)}
.navarrow:disabled{opacity:.4;cursor:default}
.oflabel{font-size:13px;font-weight:700;color:var(--ink-600)}
.partialpanel{margin:26px auto 0;max-width:680px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:24px 28px;animation:rise .3s ease}
.partialpanel h3{font-size:17px;font-weight:800}
.partialpanel .note{margin-top:6px;font-size:13.5px;
  color:var(--ink-600)}
.partialpanel .choices{margin-top:14px}
.fbrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:22px;padding-top:16px;
  border-top:1px solid var(--border-soft)}
.fbrow .fbq{font-size:13px;color:var(--ink-600)}
.fbbtn{padding:7px 14px;min-height:34px;font-size:13px}
.fbbtn.sel{border-color:var(--blue-600);color:var(--blue-600)}
.fbrow select{font-family:inherit;font-size:13px;padding:7px 9px;
  border-radius:9px;border:1px solid var(--border)}
.fbthanks{font-size:12.5px;color:var(--success)}
.inlineform{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  margin-top:6px}
.inlineform .flab{display:flex;flex-direction:column;gap:5px;
  font-size:13px;font-weight:600}
.inlineform input[type=email]{font-family:inherit;font-size:14px;
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  min-width:230px}
.fcheck{display:flex;gap:7px;align-items:center;font-size:13px}
.psupport{font-size:12px;color:var(--ink-600);margin-top:4px;
  text-align:center;line-height:1.4}
.utext{display:flex;flex-direction:column;gap:3px;text-align:left}
.authoverlay{position:fixed;inset:0;background:rgba(11,18,32,.45);
  display:flex;align-items:center;justify-content:center;z-index:100;
  padding:20px}
.authcard{position:relative;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);max-width:420px;
  width:100%;padding:30px 32px}
.authcard h2{font-size:20px;font-weight:800}
.authcard .note{margin-top:8px;font-size:13.5px;color:var(--ink-600)}
.authcard .flab{display:flex;flex-direction:column;gap:6px;
  font-size:13px;font-weight:700;margin-top:16px}
.authcard input{font-family:inherit;font-size:15px;padding:11px 13px;
  border:1px solid var(--border);border-radius:10px}
.authcard input:focus{outline:none;border-color:var(--blue-600);
  box-shadow:0 0 0 3px var(--blue-50)}
.authcard .cta{margin-top:16px;width:100%;justify-content:center;
  padding:12px;font-size:15px}
.authclose{position:absolute;top:4px;right:6px;border:none;
  background:none;font-size:22px;color:var(--ink-400);cursor:pointer;
  padding:8px 10px}
.authclose:focus-visible{outline:2px solid var(--blue-600);
  outline-offset:2px}
.autherr{margin-top:10px;font-size:13px;color:var(--purple-700);
  min-height:16px}
.authcard .authswap{margin-top:22px}
.authswap a{color:var(--blue-600);cursor:pointer;font-weight:700}
.devtoggle{font-size:12px;color:var(--ink-400);cursor:pointer;
  user-select:none}
.modebox{display:none;gap:8px;align-items:center;font-size:12.5px}
body.dev .modebox{display:flex}
.modebox select{font-size:12.5px;padding:4px 6px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface)}

/* --------------------------------------------------- hero (full + compact) */
.hero{padding:96px 0 8px;text-align:center;position:relative;
  min-height:calc(100dvh - 96px);display:flex;flex-direction:column;
  justify-content:flex-start;transition:padding .35s ease}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14px;
  font-weight:600;color:var(--blue-600);background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:10px 22px;
  box-shadow:var(--sh-sm)}
.hero h1{margin-top:6px;font-size:52px;line-height:1.14;font-weight:800;
  letter-spacing:-.025em}
.grad{background:var(--grad-cool);-webkit-background-clip:text;
  background-clip:text;color:transparent;font:inherit}
.hero.compact{display:none}
.promptcard{position:relative;width:100%;max-width:1120px;margin:120px auto 0;
  background:var(--surface);border-radius:999px;
  border:1px solid rgba(122,90,248,.16);
  box-shadow:0 0 0 8px rgba(122,90,248,.05),
    0 26px 60px -20px rgba(41,112,255,.28),
    0 14px 34px -14px rgba(122,90,248,.22);
  padding:8px 8px 8px 22px;text-align:left;
  transition:margin .35s ease,box-shadow .25s ease,border-color .25s ease}
.promptcard:focus-within{border-color:rgba(122,90,248,.36);
  box-shadow:0 0 0 10px rgba(122,90,248,.08),
    0 30px 66px -18px rgba(41,112,255,.34),
    0 16px 38px -12px rgba(122,90,248,.28)}
.hero .promptcard{overflow:hidden;max-height:280px;opacity:1;
  transition:max-height .5s ease, opacity .4s ease, margin .5s ease,
    padding .5s ease}
.hero .promptcard.boxgone{max-height:0;opacity:0;margin-top:0;
  padding-top:0;padding-bottom:0;pointer-events:none}
.promptrow{display:flex;align-items:center;gap:13px}
.picon{position:relative;width:46px;height:46px;border-radius:50%;
  flex:none;background:var(--grad-cool);display:flex;align-items:center;
  justify-content:center;color:#fff}
.picon svg{width:18px;height:18px}
.picon::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(122,90,248,.16),
    transparent 72%);z-index:-1}
.promptrow textarea{flex:1;min-width:0;border:none;outline:none;resize:none;
  font-family:inherit;font-size:19.5px;line-height:1.4;color:var(--ink-900);
  min-height:56px;max-height:40dvh;padding:11px 0}
.promptrow textarea::placeholder{color:var(--ink-600)}
.cta{display:inline-flex;align-items:center;gap:8px;
  background:var(--grad-brand);color:#fff;border:none;cursor:pointer;
  border-radius:var(--r-md);padding:12px 22px;font-size:15px;
  font-weight:700;letter-spacing:-.005em;
  box-shadow:0 10px 24px -6px rgba(105,56,239,.45);flex:none;
  text-decoration:none;transition:filter .18s ease,background .18s ease,
    box-shadow .18s ease,transform .18s ease}
.cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cta:disabled{opacity:.55;cursor:default}
.cta:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}
.cta[hidden]{display:none}
/* primary treatment at action-row scale, so Find more matches reads
   as the main move without towering over its neighbours */
.cta-sm{padding:9px 16px;font-size:14px;
  box-shadow:0 6px 16px -6px rgba(105,56,239,.45)}
.cta-soft{background:var(--blue-50);color:var(--blue-600);
  box-shadow:none;border:1.5px solid rgba(41,112,255,.3)}
.cta-soft:hover{background:#E2E9FF;filter:none}
.cta-custom{background:var(--grad-capsule);
  box-shadow:0 6px 16px -8px rgba(41,112,255,.35)}
.cta-custom:hover{background:var(--grad-cool)}
.cta-arrow{position:relative;display:inline-flex;align-items:center;
  justify-content:center;flex:none;width:50px;height:50px;border:none;
  border-radius:22px;background:var(--grad-cool);color:#fff;
  cursor:pointer;margin-right:4px;
  box-shadow:0 8px 18px -8px rgba(41,112,255,.4);
  transition:box-shadow .18s ease,transform .18s ease}
.cta-arrow::before{content:"";position:absolute;inset:-7px;
  border-radius:29px;background:radial-gradient(closest-side,
    rgba(122,90,248,.16),transparent 72%);z-index:-1}
.cta-arrow .ic svg{width:19px;height:19px}
.cta-arrow:hover{box-shadow:0 10px 22px -8px rgba(122,90,248,.5);
  transform:translateY(-1px)}
.cta-arrow:focus-visible{outline:2px solid var(--blue-600);
  outline-offset:2px}
.cta-arrow:disabled{opacity:.55;cursor:default;transform:none}
.warn{background:var(--purple-50);color:var(--purple-700);
  border-radius:12px;padding:10px 14px;font-size:13.5px;
  margin:12px auto 0;max-width:760px}
.orbitbg{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  z-index:-1;opacity:.6}
.orbitbg .oring{position:absolute;border:1.5px solid var(--ink-300);
  border-radius:50%;opacity:.35}
.horizonarc{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:72%;height:24px;pointer-events:none}
/* generic small dot-pagination button, reused by the rotating module */
.illdot{width:7px;height:7px;border-radius:50%;border:none;padding:0;
  background:var(--border-soft);cursor:pointer}
.illdot.on{background:var(--purple-700);width:18px;border-radius:4px;
  transition:width .2s ease}

/* -------------------------------------------------------- idea echo card */
.echo{max-width:900px;margin:26px auto 0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:18px 22px;display:flex;gap:16px;
  align-items:flex-start}
.echo .eico{width:52px;height:52px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#A78BFA,#7A5AF8);color:#fff;
  display:flex;align-items:center;justify-content:center}
.echo .lab{font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:var(--purple-600)}
.echo .q{margin-top:4px;font-size:16.5px;font-weight:700;line-height:1.45}
.echo .editlink{margin-left:auto;flex:none;font-size:13.5px;
  color:var(--blue-600);text-decoration:none;cursor:pointer;font-weight:600}
.echo .editlink:hover{text-decoration:underline}

/* ---------------------------------------------------------- clarification */
.clarify{max-width:720px;margin:36px auto 0;text-align:center;
  animation:rise .4s ease}
.clarify .eyebrow2{font-size:13px;font-weight:800;letter-spacing:.08em;
  color:var(--purple-600)}
.clarify h2{margin-top:12px;font-size:28px;font-weight:800;
  letter-spacing:-.02em;line-height:1.3}
.clarify .note{margin-top:10px;font-size:14.5px;color:var(--ink-600)}
.choices{margin-top:26px;display:flex;flex-direction:column;gap:13px}
.choice{background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:14px 18px;font-size:15.5px;
  font-weight:600;color:var(--ink-900);cursor:pointer;
  box-shadow:var(--sh-sm);text-align:left;display:flex;
  align-items:center;gap:14px;min-height:56px}
.choice:hover{border-color:var(--purple-600)}
.choice .cico{width:40px;height:40px;border-radius:12px;flex:none;
  background:var(--blue-50);color:var(--blue-600);display:flex;
  align-items:center;justify-content:center}
.choice.decide .cico{background:var(--purple-50);color:var(--purple-600)}
.choice .spacer{flex:1}
.choice .arr{color:var(--ink-400)}
.freetext{background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:12px 18px;display:flex;gap:14px;
  align-items:flex-start;box-shadow:var(--sh-sm);text-align:left}
.freetext .cico{width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--border-soft);color:var(--ink-600);display:flex;
  align-items:center;justify-content:center;margin-top:2px}
.freetext .ftlab{font-size:14.5px;font-weight:700}
.freetext textarea{width:100%;border:none;outline:none;resize:none;
  font-family:inherit;font-size:13.5px;color:var(--ink-900);
  margin-top:3px;min-height:22px}
.freetext textarea::placeholder{color:var(--ink-400)}
.freetext .count{flex:none;font-size:12px;color:var(--ink-400);
  margin-top:10px}
/* the 320px report popover has no room for the wide-card layout above
   (icon + label/textarea + button all on one row); stack it instead */
.reportpop .freetext{flex-direction:column;align-items:stretch;
  padding:10px 14px}
.reportpop .freetext .cico{display:none}
.reportpop .freetext #reportOtherGo{align-self:flex-end;margin-top:8px}
.clarifyfoot{margin-top:26px;display:flex;gap:16px;align-items:center;
  justify-content:center;flex-wrap:wrap}
.alink{font-size:13px;color:var(--ink-400);cursor:pointer;
  text-decoration:none}
.alink:hover{color:var(--ink-600)}

/* -------------------------------------------------------------- Match Hunt */
.center-stage{min-height:380px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:30px 16px 14px}
.hunt{position:relative;width:420px;height:200px;max-width:92vw}
.cdot{position:absolute;border-radius:50%;animation:bob 4.2s ease-in-out infinite}
.cdot::after{content:"";position:absolute;inset:30%;background:var(--bg);
  border-radius:50%}
.cdot.b{background:var(--blue-600)}.cdot.g{background:var(--gold-500)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.d1{width:7%;padding-top:7%;left:5%;top:18%;
  animation:bob 4.2s ease-in-out infinite,fadeout 10s ease-in-out infinite}
.d2{width:9%;padding-top:9%;left:23%;top:59%;
  animation:bob 4.6s .4s ease-in-out infinite,lockin 10s ease-in-out infinite}
.d3{width:6%;padding-top:6%;left:38%;top:11%;
  animation:bob 3.9s .8s ease-in-out infinite,fadeout 10s .5s ease-in-out infinite}
.d4{width:10%;padding-top:10%;left:53%;top:38%;
  animation:bob 4.4s .2s ease-in-out infinite,lockin 10s .6s ease-in-out infinite}
.d5{width:6.5%;padding-top:6.5%;left:70%;top:75%;
  animation:bob 4.1s .6s ease-in-out infinite,fadeout 10s 1s ease-in-out infinite}
.d6{width:8.5%;padding-top:8.5%;left:84%;top:22%;
  animation:bob 4.7s .3s ease-in-out infinite,lockin 10s 1.2s ease-in-out infinite}
.d7{width:5.5%;padding-top:5.5%;left:62%;top:4%;
  animation:bob 4s .9s ease-in-out infinite,fadeout 10s 1.4s ease-in-out infinite}
@keyframes fadeout{0%,34%{opacity:1}50%,82%{opacity:.16}96%,100%{opacity:1}}
@keyframes lockin{0%,38%{filter:none}
  54%,80%{filter:drop-shadow(0 0 10px rgba(122,90,248,.55)) brightness(1.12)}
  94%,100%{filter:none}}
.huntspark{position:absolute;width:8%;animation:hunt 10s ease-in-out infinite;
  z-index:2}
.huntspark svg{display:block;width:100%;height:auto;
  animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes hunt{0%{left:1%;top:40%}10%{left:5%;top:15%}22%{left:36%;top:8%}
  34%{left:23%;top:56%}46%{left:53%;top:35%}58%{left:70%;top:72%}
  70%{left:84%;top:19%}82%{left:53%;top:35%}92%{left:43%;top:42%}
  100%{left:1%;top:40%}}
.ring{position:absolute;border:2px solid var(--purple-600);border-radius:50%;
  opacity:0;animation:ringpop 10s ease-out infinite;width:13%;
  padding-top:13%}
.r2{left:21%;top:52%;animation-delay:3.4s}
.r4{left:51.5%;top:32%;animation-delay:4.6s}
.r6{left:82%;top:16%;animation-delay:7s}
@keyframes ringpop{0%,1%{opacity:0;transform:scale(.5)}
  4%{opacity:.8;transform:scale(1)}12%{opacity:0;transform:scale(1.5)}
  100%{opacity:0}}
.load-stage{margin-top:30px;font-size:22px;font-weight:800;
  letter-spacing:-.01em;text-align:center}
.load-looking{margin-top:10px;font-size:15px;color:var(--ink-600);
  text-align:center;max-width:540px;line-height:1.55}
.load-looking .hl-b{color:var(--blue-600);font-weight:600}
.load-looking .hl-p{color:var(--purple-600);font-weight:600}
.stage-dots{margin-top:26px;display:flex;gap:10px;justify-content:center}
.sd{width:8px;height:8px;border-radius:50%;background:var(--ink-300);
  transition:all .3s}
.sd.done{background:var(--success)}
.sd.now{background:var(--purple-600);transform:scale(1.35)}
.trustline{margin-top:26px;font-size:13px;color:var(--ink-400);
  text-align:center}
@media (prefers-reduced-motion: reduce){
  .cdot,.huntspark,.huntspark svg,.ring{animation:none !important}
  .hunt{opacity:.9;animation:pulse 3s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.9}50%{opacity:.55}}
  .mcard.enter,.sumbar,.detail.swap,.controw,.pricing,.refine,
  .clarify,.echo,.center-stage{animation:none !important}
}

/* ---------------------------------------------------------------- results */
.sumbar{margin:26px auto 0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:20px 24px;display:flex;gap:18px;
  align-items:center;animation:rise .4s ease}
.sumbar .sico{width:56px;height:56px;border-radius:50%;flex:none;
  background:var(--grad-cool);display:flex;align-items:center;
  justify-content:center;color:#fff}
.sumbar .stext{flex:1}
.sumbar .stext .idealab{font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400)}
.sumbar .stext h2{margin-top:4px;font-size:19px;font-weight:800;
  letter-spacing:-.01em;line-height:1.35}
.sumbar .editlink{flex:none;font-size:13.5px;font-weight:600;
  color:var(--blue-600);cursor:pointer;white-space:nowrap}
.sumbar .editlink:hover{text-decoration:underline}
.sumbar .sactions{display:flex;gap:10px;flex:none;flex-wrap:wrap}
.btn-outline{display:inline-flex;align-items:center;gap:9px;
  background:var(--surface);color:var(--blue-600);
  border:1.5px solid rgba(41,112,255,.35);border-radius:12px;
  padding:12px 20px;font-size:14px;font-weight:700;cursor:pointer;
  text-decoration:none;min-height:44px}
.btn-outline:hover{background:var(--blue-50)}
.btn-outline .ic{color:var(--blue-600)}
.sumnote{max-width:1160px;margin:10px auto 0;font-size:13px;
  color:var(--ink-600)}
.sumnote:empty{display:none}
.btn-quiet{display:inline-flex;align-items:center;gap:9px;
  justify-content:center;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:12px 20px;
  font-size:14px;font-weight:600;color:var(--ink-700);cursor:pointer;
  min-height:44px;text-decoration:none}
.btn-quiet:hover{border-color:var(--ink-400)}
.resgrid{margin:18px auto 0;display:grid;
  grid-template-columns:340px 1fr;gap:18px;align-items:start}
.selcol{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:16px}
.selcol .selhead{font-size:14px;font-weight:800;padding:2px 6px 10px}
.mcard{display:flex;gap:12px;align-items:center;border:1.5px solid
  var(--border);border-radius:var(--r-md);padding:14px;cursor:pointer;
  margin-bottom:10px;background:var(--surface)}
.mcard:hover{border-color:var(--blue-600)}
.mcard.active{border-color:var(--blue-600);
  box-shadow:0 0 0 3px var(--blue-50)}
.mcard.enter{animation:rise .24s ease}
.mcard .sname{font-size:15px;font-weight:700}
.mcard .srole{font-size:12.5px;color:var(--ink-600);margin-top:2px}
.mcard .schips{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.mcard .arr{margin-left:auto;color:var(--ink-400)}
.stillrow{display:flex;gap:10px;align-items:center;color:var(--ink-600);
  font-size:13px;padding:12px 8px}
.avatar{border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:800;
  background:var(--grad-cool)}
.avatar.a2{background:linear-gradient(120deg,#7A5AF8,#F79009)}
.avatar.a3{background:linear-gradient(120deg,#F7A928,#2970FF)}
.avatar.sm{width:48px;height:48px;font-size:16px}
.avatar.lg{width:92px;height:92px;font-size:31px}
.chip-ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  font-weight:600;color:var(--success);background:var(--success-50);
  border-radius:999px;padding:5px 12px}
.chip-match{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  font-weight:600;color:var(--purple-700);background:var(--purple-50);
  border-radius:999px;padding:5px 12px}
.chip-fit{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  font-weight:600;color:var(--blue-700);background:var(--blue-50);
  border-radius:999px;padding:5px 12px}
.detail{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:28px 30px}
.detail.swap{animation:rise .3s ease}
.dhead{display:flex;gap:22px;align-items:flex-start}
.dhead h1{font-size:29px;font-weight:800;letter-spacing:-.02em}
.dhead .drole{margin-top:5px;font-size:15px;color:var(--ink-600)}
.dhead .dchips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.starbtn{border:none;background:none;cursor:pointer;font-size:19px;
  color:var(--ink-300);padding:8px;min-height:38px;min-width:38px;
  flex:none;line-height:1;margin-left:auto}
.starbtn:hover{color:var(--ink-400)}
.starbtn.on{color:var(--gold-500)}
.starbtn:focus-visible{outline:2px solid var(--blue-600);
  outline-offset:2px}
.dintro{margin-top:20px;font-size:14.5px;line-height:1.65;
  color:var(--ink-700)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:22px;
  border-top:1px solid var(--border-soft);padding-top:20px}
.twocol .col{padding-right:26px}
.twocol .col+.col{border-left:1px solid var(--border-soft);
  padding-left:26px;padding-right:0}
.sec2{display:flex;align-items:center;gap:10px;font-size:15.5px;
  font-weight:800;margin:0 0 10px}
.sec2 .ic{width:34px;height:34px;border-radius:10px;
  background:var(--blue-50);color:var(--blue-600)}
.sec2.mt{margin-top:26px}
.dbody{font-size:14px;line-height:1.62;color:var(--ink-700)}
.dsec{margin-top:24px}
.linkrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:4px}
.lbtn{display:flex;align-items:center;gap:11px;text-decoration:none;
  background:#EEF2FF;border:1px solid rgba(41,112,255,.16);
  color:var(--blue-600);font-weight:700;font-size:14px;line-height:1.25;
  padding:13px 16px;border-radius:12px;min-height:50px;
  transition:background .15s,border-color .15s}
.lbtn:hover{background:#E2E9FF;border-color:rgba(41,112,255,.32)}
.lbtn .lico{flex:none;display:flex;color:var(--blue-600)}
.lbtn .llab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbtn .larr{margin-left:auto;flex:none;display:flex;opacity:.8}
.evstrip{margin-top:18px;background:var(--blue-50);
  border-radius:var(--r-md);padding:13px 18px;display:flex;gap:12px;
  align-items:center;flex-wrap:wrap}
.evstrip .lab{font-size:11.5px;font-weight:800;letter-spacing:.07em;
  color:var(--blue-700);flex:none}
.evstrip a{font-size:14px;font-weight:700;color:var(--blue-600);
  text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.evstrip a:hover{text-decoration:underline}
.evstrip .evsum{width:100%;font-size:13px;color:var(--ink-600);
  line-height:1.5}
.tint{position:relative;border-radius:var(--r-md);padding:15px 52px 15px 18px}
.tint pre{font-family:inherit;font-size:13.5px;white-space:pre-wrap;
  line-height:1.62;color:var(--ink-700)}
.tint .subj{font-size:13.5px;margin-bottom:8px;color:var(--ink-900)}
.tint-green{background:#ECFDF5;border:1px solid #C7F0DD;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.tint-green .okmark{display:flex;color:var(--success)}
.tint-green .oklabel{font-size:13.5px;font-weight:800;
  color:var(--success)}
.tint-green .okmail{font-size:13.5px;font-weight:700;color:var(--success);
  overflow-wrap:anywhere}
.tint-note{background:#F3F3FF;border:1px solid #E4E4F9}
.tint-dm{background:#FFF9EC;border:1px solid #F6E8C6}
.vcap{margin-top:7px;font-size:12.5px;color:var(--ink-400)}
.copybtn{position:absolute;top:10px;right:10px;width:32px;height:32px;
  border:none;border-radius:9px;background:rgba(255,255,255,.65);
  color:var(--ink-600);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .15s,color .15s}
.copybtn:hover{background:#fff;color:var(--blue-600)}
.copybtn.ok{color:var(--success)}
.tint-green .copybtn{top:50%;transform:translateY(-50%);
  background:none}
.tint-green .copybtn:hover{background:rgba(255,255,255,.7)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}}

/* quiet continuation row + pricing reveal */
.controw{margin:26px auto 0;display:flex;gap:12px;align-items:center;
  justify-content:center;flex-wrap:wrap;animation:rise .3s ease}
.controw .ctext{font-size:14.5px;font-weight:600;color:var(--ink-600)}
.pricing{margin:26px auto 0;max-width:660px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);padding:26px 30px;animation:rise .3s ease}
.pricing .phead{display:flex;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin-bottom:16px}
.pricing .phead h3{font-size:18px;font-weight:800}
.pricing .pctx{font-size:13.5px;color:var(--ink-600)}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pack{position:relative;border:1.5px solid var(--border);
  border-radius:var(--r-md);background:var(--surface);cursor:pointer;
  padding:20px 12px 16px;display:flex;flex-direction:column;gap:6px;
  align-items:center;font-family:inherit;
  transition:border-color .15s,background .15s}
.pack:hover{border-color:var(--blue-600)}
.pack.sel{border-color:var(--blue-600);background:var(--blue-50)}
/* the most popular pack carries the same purple accent it carries on
   the pricing page, so the offer looks like one offer wherever it is
   shown; selection still reads through the tinted fill */
.pack.pop{border-color:var(--purple-600)}
.pack.pop.sel{border-color:var(--purple-600);background:var(--purple-50)}
.pack .pcount{font-size:14.5px;font-weight:700;color:var(--ink-900)}
.pack .pprice{font-size:20px;font-weight:800;color:var(--blue-600)}
.pack .popbadge{position:absolute;top:-10px;left:50%;
  transform:translateX(-50%);background:var(--purple-600);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;
  padding:3px 10px;border-radius:999px;white-space:nowrap}
.cntcustom{margin-top:10px;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap}
.numinput{width:64px;padding:8px 10px;border:1.5px solid var(--border);
  border-radius:var(--r-sm);font-family:inherit;font-size:14.5px;
  color:var(--ink-900);background:var(--surface);text-align:center}
.numinput:focus{outline:none;border-color:var(--blue-600);
  box-shadow:0 0 0 3px var(--blue-50)}
.pfoot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;
  flex-wrap:wrap}
.upnote{font-size:12.5px;color:var(--ink-400);margin-top:10px}
.upnote:empty{display:none}
/* lower homepage */
#homelower{max-width:1160px;margin:0 auto;position:relative}
/* one continuous, near-invisible wash behind every lower section so the
   page reads as one surface instead of separate white panels -- part of
   the visual-coherence pass; safe to delete this rule alone to revert
   just the background-continuity effect */
#homelower::before{content:"";position:absolute;top:0;left:50%;
  width:100vw;height:100%;transform:translateX(-50%);z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(640px 420px at 12% 6%,rgba(41,112,255,.035),
      transparent 70%),
    radial-gradient(760px 520px at 88% 34%,rgba(122,90,248,.04),
      transparent 70%),
    radial-gradient(640px 420px at 18% 78%,rgba(41,112,255,.03),
      transparent 70%),
    radial-gradient(700px 460px at 82% 96%,rgba(122,90,248,.032),
      transparent 70%)}
.hero.compact ~ #homelower{display:none}
/* the result/profile header (sumbar+matchnav, built into #results) must
   only ever be visible while the hero is in its compact/searching state
   -- never alongside the full expanded homepage search bar. Enforced
   declaratively so no JS timing/state gap can ever leave it wedged
   between the hero prompt and the rest of the homepage. */
.hero:not(.compact) ~ #results{display:none}
.sechead{font-size:26px;font-weight:800;letter-spacing:-.015em;
  text-align:center;margin-top:120px}
.secsub{font-size:15px;color:var(--ink-600);text-align:center;
  margin-top:10px;max-width:520px;margin-left:auto;margin-right:auto}
.howsec{margin-top:64px;padding:0}
.whosec{margin-top:40px}
.whosec,.customsec,.faqsec{position:relative;padding-top:34px}
.whosec::before,.customsec::before,.faqsec::before{content:"";
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:220px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(41,112,255,.4),
    rgba(122,90,248,.4),transparent)}
.howsec .sechead,.whosec .sechead{margin-top:0;font-size:19px}
.howrow{display:flex;align-items:flex-start;justify-content:center;
  gap:12px;margin-top:28px}
.howstep{flex:0 1 220px;text-align:center}
.hownum{width:26px;height:26px;border-radius:50%;background:var(--grad-cool);
  color:#fff;font-size:12.5px;font-weight:800;display:flex;
  align-items:center;justify-content:center;margin:0 auto}
.howstep h3{margin-top:10px;font-size:14.5px;font-weight:700}
.howstep p{margin-top:6px;font-size:13px;line-height:1.55;
  color:var(--ink-600)}
.howdash{flex:0 1 90px;border-top:1px solid var(--border-soft);
  margin-top:13px}
/* source-backed rotating match module */
.rotatesec{margin-top:-20px;padding-top:44px;position:relative}
.rotateintro{max-width:900px;margin:0 auto}
.rotateintro>.sechead.rotatehead{margin-top:0;font-size:52px;
  line-height:1.26;letter-spacing:-.025em;font-weight:800;padding-bottom:4px}
.rotateintro>.secsub{font-size:18px;margin-top:14px}
.sourceslabel{text-align:center;margin-top:40px;font-size:12px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-400)}
.sourcesviz{max-width:1040px;margin:0 auto}
.sourcerow{display:flex;justify-content:center;align-items:flex-start;
  gap:56px;margin-top:22px;flex-wrap:wrap}
.sourcecard{display:flex;flex-direction:column;align-items:center;
  gap:10px}
.sourcecard .srcicon{display:flex}
.sourcecard .srcicon svg{width:64px;height:64px}
.sourcecard .srclabel{font-size:13px;font-weight:600;
  color:var(--ink-700)}
.connectorlines{display:block;width:100%;height:120px;margin-top:8px}
.rotatewrap{margin-top:0;max-width:1000px;margin-left:auto;
  margin-right:auto}
.rotatecarousel{overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;cursor:grab;touch-action:pan-y}
.rotatecarousel::-webkit-scrollbar{display:none}
.rotatecarousel.dragging{cursor:grabbing;scroll-snap-type:none}
.rotatetrack{display:flex}
.rotateslide{flex:0 0 100%;scroll-snap-align:start;padding:0 2px}
.rotatecard{position:relative;overflow:hidden;background:var(--surface);
  border:1px solid rgba(122,90,248,.14);border-radius:36px;
  box-shadow:0 22px 48px -26px rgba(41,60,120,.22),
    0 0 0 1px rgba(122,90,248,.03);
  padding:32px 38px 35px;
  transition:box-shadow .3s ease,border-color .3s ease}
.rotatecard:hover,.rotatecard:focus-within{border-color:rgba(122,90,248,.24)}
.rotateheader{display:flex;gap:18px;align-items:center}
.demoavatar{overflow:hidden;border:1px solid var(--border-soft);
  box-shadow:0 0 0 4px rgba(122,90,248,.07)}
.demoavatar img{width:100%;height:100%;object-fit:cover;display:block}
.rotateheader .avatar.lg{width:62px;height:62px;font-size:22px}
.rotateheader h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
.demorole{margin-top:3px;font-size:15.5px;color:var(--ink-700);
  font-weight:500}
.demoorg{font-size:14px;color:var(--ink-400)}
.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.tagpill{font-size:13.5px;font-weight:700;color:var(--blue-700);
  background:var(--blue-50);border-radius:999px;padding:3px 11px}
.rotatesummary{margin-top:16px;font-size:15.5px;line-height:1.55;
  color:var(--ink-700);max-width:700px}
.rotategrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-top:19px;align-items:start}
.rotatepanel{background:transparent;border:none;padding:0 19px;
  border-left:1px solid rgba(122,90,248,.14)}
.rotatepanel:first-child{border-left:none;padding-left:0}
.rotatepanel h4{font-size:15px;font-weight:800;margin-bottom:9px}
.rotatepanel h4:not(:first-child){margin-top:13px}
.rotatepanel p{font-size:15px;line-height:1.5;color:var(--ink-700)}
.rotatepanel .sec2{font-size:16px;gap:9px;margin-bottom:13px}
.rotatepanel .sec2 .ic{width:32px;height:32px;border-radius:9px}
.rotatepanel .sec2 .ic svg{width:19px;height:19px}
.rotatepanel .sec2{flex-wrap:wrap}
.rotatepanel .exnote{font-size:13px}
.hookitem{display:flex;gap:8px;align-items:flex-start;margin-top:11px}
.hookitem:first-of-type{margin-top:0}
.hookicon{flex:none;display:flex;margin-top:1px}
.hookicon svg{width:20px;height:20px}
.hookitem p{margin:0}
.exnote{font-size:13px;font-weight:500;color:var(--ink-400);
  margin-left:3px}
.demopreview{border:1px solid var(--border-soft);border-radius:12px;
  padding:14px 15px;margin-top:14px;background:rgba(122,90,248,.028)}
.demopreview p{font-size:15px;line-height:1.5;color:var(--ink-700);
  margin-top:7px}
.demopreview p:first-of-type{margin-top:8px}
.demoprevhead{display:flex;align-items:center;gap:11px;font-size:15px;
  font-weight:700;color:var(--purple-700)}
.demoprevhead .rcopy{margin-left:auto;display:flex;color:var(--ink-400)}
.demoprevhead .rcopy svg{width:20px;height:20px}
.demoprevsubj{font-weight:700;color:var(--ink-900)}
.rotatepanel .chip-ok{font-size:15px;padding:5px 14px;gap:8px}
.rotatepanel .chip-ok svg{width:18px;height:18px}
.rotatedots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.rotatecount{text-align:center;margin-top:10px;font-size:12.5px;
  color:var(--ink-400)}
.simlabel{text-align:center;margin-top:6px;font-size:12.5px;
  color:var(--ink-400)}
.whosec .sechead,.whosec .secsub{text-align:left;margin-left:0}
.whosec .sechead.whobighead{font-size:52px;line-height:1.26;
  letter-spacing:-.025em;font-weight:800;padding-bottom:4px}
.whoflowwrap{position:relative;margin-top:56px;height:150px}
.whowave{position:absolute;inset:0;width:100%;height:100%;
  overflow:visible}
.whoflow{position:relative;display:grid;grid-template-columns:
  repeat(6,1fr);height:100%}
.whostep{display:flex;justify-content:center;align-items:flex-end}
.whostep:nth-child(1){padding-bottom:22px}
.whostep:nth-child(2){padding-bottom:78px}
.whostep:nth-child(3){padding-bottom:44px}
.whostep:nth-child(4){padding-bottom:104px}
.whostep:nth-child(5){padding-bottom:52px}
.whostep:nth-child(6){padding-bottom:106px}
.whoiconcircle{width:52px;height:52px;border-radius:50%;
  background:var(--bg);border:1px solid rgba(122,90,248,.14);
  box-shadow:0 6px 16px -12px rgba(41,60,120,.2);display:flex;
  align-items:center;justify-content:center;color:var(--blue-600)}
.whoiconcircle svg{width:24px;height:24px}
.whorow{display:grid;grid-template-columns:repeat(6,1fr);
  margin-top:8px;text-align:left;column-gap:22px}
.whonum{font-size:11px;font-weight:800;color:var(--purple-600);
  letter-spacing:.04em}
.whoq{margin-top:4px;font-size:13px;font-weight:800;line-height:1.35;
  min-height:36px}
.whodiv{display:block;width:22px;height:2px;margin-top:10px;
  border-radius:2px;background:linear-gradient(90deg,
    rgba(41,112,255,.4),rgba(122,90,248,.4))}
.whoitem{padding-bottom:6px}
.whoitem h3{margin-top:12px;font-size:12.5px;font-weight:700;
  color:var(--blue-700)}
.whoitem p{margin-top:6px;font-size:11.5px;line-height:1.55;
  color:var(--ink-600)}
.customsec{margin:40px auto 0;max-width:1080px;padding-left:20px;
  padding-right:20px}
.bannercard{position:relative;border-radius:36px;padding:48px 56px;
  background:
    radial-gradient(120% 160% at 15% 0%,rgba(41,112,255,.07),
      transparent 60%),
    radial-gradient(120% 160% at 85% 100%,rgba(122,90,248,.08),
      transparent 60%)}
.bannertitle{font-size:27px;font-weight:800;letter-spacing:-.015em;
  text-align:left;margin-top:0}
.bannerrow{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;
  margin-top:30px;align-items:center}
.bannerhalf{max-width:400px}
.bannernum{font-size:26px;font-weight:800;color:var(--purple-600)}
.bannerhalf h3{margin-top:6px;font-size:18px;font-weight:800}
.bannerhalf p{margin-top:8px;font-size:14px;line-height:1.6;
  color:var(--ink-700)}
.bannerlink{display:inline-flex;align-items:center;gap:7px;
  margin-top:16px;font-size:14.5px;font-weight:700;color:var(--blue-600);
  text-decoration:none}
.bannerlink:hover{text-decoration:underline}
.bannerlink .ic{display:inline-flex}
.bannerdivider{position:relative;align-self:stretch;width:1px;
  background:rgba(122,90,248,.22)}
.bannerspark{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;
  background:var(--surface);box-shadow:var(--sh-sm);display:flex;
  align-items:center;justify-content:center;color:var(--purple-600)}
.faqsec{max-width:900px;margin:50px auto 0;padding-bottom:8px}
.faqsec .sechead{margin-top:0;text-align:left}
.faqcols{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;
  margin-top:32px}
.faqitem{margin-top:0;border-top:1px solid var(--border-soft)}
.faqitem:last-of-type{border-bottom:1px solid var(--border-soft)}
.faqitem summary{display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:19px 0;
  font-size:15px;line-height:1.5;font-weight:700;color:var(--ink-900);
  cursor:pointer;list-style:none;transition:color .15s}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary:hover{color:var(--blue-700)}
.faqitem summary:focus-visible{outline:2px solid var(--blue-600);
  outline-offset:2px}
.faqitem .faqtoggle{flex:none;font-weight:400;font-size:19px;
  line-height:1;color:var(--ink-400);width:14px;text-align:right}
.faqitem .faqtoggle::before{content:"+"}
.faqitem[open] .faqtoggle::before{content:"\2212"}
.faqitem p{padding:0 0 19px;font-size:14px;line-height:1.62;
  color:var(--ink-600)}
@media (prefers-reduced-motion: no-preference){
  .faqitem p{animation:faqrise .18s ease}
}
@keyframes faqrise{from{opacity:0}to{opacity:1}}
.sitefoot{margin:64px auto 48px;max-width:1080px}
.footrow{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:24px;
  border-top:1px solid var(--border-soft)}
.footrow a{font-size:13.5px;color:var(--ink-600);text-decoration:none}
.footrow a:hover{color:var(--blue-600);text-decoration:underline}
.footrow a:focus-visible{outline:2px solid var(--blue-600);
  outline-offset:2px;border-radius:2px}
.footline{margin-top:32px;text-align:center;font-size:12.5px;
  color:var(--ink-400)}

/* refinement / failure */
.refine{max-width:680px;margin:26px auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:22px 26px;text-align:center;
  animation:rise .4s ease}
.refine h3{font-size:17px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;
  justify-content:center}
.chipbtn{background:var(--surface);border:1.5px solid var(--blue-600);
  color:var(--blue-600);font-weight:600;font-size:13.5px;
  padding:10px 18px;border-radius:999px;cursor:pointer;min-height:44px}
.chipbtn:hover{background:var(--blue-600);color:#fff}
.failhead{max-width:680px;margin:50px auto 0;text-align:center}
.failic{width:52px;height:52px;border-radius:50%;margin:0 auto;
  background:var(--blue-50);color:var(--purple-700);display:flex;
  align-items:center;justify-content:center}
.failhead h2{margin-top:18px;font-size:25px;font-weight:800;
  letter-spacing:-.02em;line-height:1.3}
.failhead p{margin-top:12px;font-size:15px;color:var(--ink-600)}
.failhead .failquality{font-size:13px;color:var(--ink-400)}
.failactions{margin-top:22px;display:flex;align-items:center;
  justify-content:center;gap:18px;flex-wrap:wrap}
.failactions .editlink{font-size:13.5px;font-weight:600;
  color:var(--blue-600);cursor:pointer;white-space:nowrap}
.failactions .editlink:hover{text-decoration:underline}

/* ---------------------------------------------------------------- history */
.histhead{margin:34px 0 8px}
.histhead h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
.hlist{margin-top:14px}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px 20px;margin:10px 0;cursor:pointer;
  box-shadow:var(--sh-sm)}
.hrow:hover{border-color:var(--blue-600)}
.hrow .hi{font-weight:700;font-size:14.5px}
.hrow .hm{color:var(--ink-600);font-size:12.5px;margin-top:4px}
.hrow .hact{display:flex;gap:8px;align-items:center;flex:none}
.hstatus{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.hstatus.COMPLETE{background:var(--success-50);color:var(--success)}
.hstatus.PARTIAL{background:var(--warm-50);color:#93540B}
.hstatus.RUNNING{background:var(--purple-50);color:var(--purple-700)}
.hstatus.FAILED,.hstatus.INCOMPLETE,.hstatus.BLOCKED{
  background:var(--error-50);color:#B42318}
.empty{color:var(--ink-600);text-align:center;margin-top:70px;font-size:15px}

/* -------------------------------------- state system (Rev 3) additions */
/* C2 companions: quiet in-search exits and the member email-me row */
.quietrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-600);padding:10px 8px 4px;
  border-top:1px solid var(--border-soft);margin-top:4px}
.qlink{border:none;background:none;font-family:inherit;font-size:12.5px;
  font-weight:700;color:var(--blue-600);cursor:pointer;padding:6px 2px;
  min-height:32px}
.qlink:hover{text-decoration:underline}
.qlink:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
/* C5 offer popover: noticeable but calm, guests only */
.offerpop{position:relative;background:var(--surface);
  border:1px solid rgba(122,90,248,.28);border-radius:16px;
  padding:16px 19px;max-width:380px;margin:14px auto 0;
  box-shadow:var(--sh-lg),0 0 0 5px rgba(122,90,248,.05);
  animation:rise .3s ease}
.offerpop .ptext{font-size:13.5px;font-weight:600;color:var(--ink-900);
  line-height:1.5;display:flex;gap:8px;align-items:center}
.offeractions{margin-top:12px;display:flex;gap:10px;align-items:center}
.offerclose{position:absolute;top:8px;right:11px;border:none;
  background:none;font-size:17px;color:var(--ink-400);cursor:pointer;
  padding:4px 8px}
.offerclose:focus-visible{outline:2px solid var(--blue-600);
  outline-offset:2px}
/* C6 toast: small confirmations, bottom center */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  display:inline-flex;gap:9px;align-items:center;background:var(--ink-900);
  color:#fff;font-size:13px;font-weight:600;border-radius:999px;
  padding:10px 18px;box-shadow:0 12px 32px -8px rgba(16,24,40,.3);
  z-index:120;animation:rise .25s ease;max-width:92vw}
.toast .tok{display:flex;color:var(--success)}
.toast .undo{border:none;background:none;font-family:inherit;
  font-size:13px;font-weight:700;color:#8FB1FF;cursor:pointer;
  margin-left:2px;padding:2px 4px}
/* E3/E4 offline pill */
.offpill{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  display:inline-flex;gap:9px;align-items:center;background:var(--ink-900);
  color:#fff;font-size:12.5px;font-weight:600;border-radius:999px;
  padding:9px 17px;box-shadow:0 12px 32px -8px rgba(16,24,40,.3);
  z-index:130;max-width:92vw}
.offpill .offdot{width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--gold-500)}
/* C3 "New" pill on appended matches */
.chip-new{display:inline-flex;align-items:center;font-size:10.5px;
  font-weight:800;letter-spacing:.05em;color:var(--blue-700);
  background:var(--blue-50);border-radius:999px;padding:3px 9px}
/* C9 credit sentences share one quiet emphasis */
.creditline{color:var(--ink-700);font-weight:600}
.longernote{max-width:900px;margin:10px auto 0;text-align:left}
/* L1 report control: a small anchored popover (bottom sheet on
   narrow viewports), same chrome as the rest of the product -- never
   a native control. Positioned via JS (top/left/bottom only); every
   visual property lives here. */
.reportrow{margin-top:22px;padding-top:16px;
  border-top:1px solid var(--border-soft)}
.reportlink{border:none;background:none;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--ink-600);cursor:pointer;
  padding:8px 2px;min-height:36px}
.reportlink:hover{color:var(--blue-600);text-decoration:underline}
.reportlink:focus-visible{outline:2px solid var(--blue-600);
  outline-offset:2px}
.reportpop{position:fixed;z-index:110;width:320px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:16px 18px;
  animation:rise .18s ease}
.reportpop[hidden]{display:none}
.reportpop h3{font-size:15px;font-weight:800}
.reportpop .choices{margin-top:11px;gap:8px}
.reportpop .choice{padding:12px 14px;font-size:14.5px;min-height:48px}
.reportsheet-backdrop{position:fixed;inset:0;background:rgba(11,18,32,.4);
  z-index:105}
.reportsheet-backdrop[hidden]{display:none}
@media (max-width:520px){
  .reportpop.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;
    width:auto;max-width:none;border-radius:20px 20px 0 0;
    padding:18px 18px calc(18px + env(safe-area-inset-bottom));
    animation:sheetup .2s ease}
  .reportpop.sheet .choice{min-height:52px}
}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cta-sm{padding:10px 18px;font-size:14px}
.cta-lg{padding:12px 30px;font-size:15px}
.actrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:14px}
.partialpanel .actrow .cta{flex:none}
@media (prefers-reduced-motion: reduce){
  .offerpop,.toast,.reportpop,.partialpanel{animation:none !important}
  .reportpop.sheet{animation:none !important}
}
@media (max-width:430px){
  .quietrow{justify-content:center}
  .offerpop{max-width:none}
}

/* -------------------------------------------------------------- dev panels */
.devstrip{display:none;font-family:ui-monospace,Menlo,monospace;
  font-size:11.5px;color:var(--ink-600);margin:10px auto;
  padding:6px 10px;background:var(--surface);border:1px dashed var(--border);
  border-radius:8px}
.devpanel{display:none;border:1px dashed var(--border);
  border-radius:12px;margin:14px auto;padding:14px 16px;
  font-size:12.5px;background:var(--surface)}
.devpanel h4{font-size:12px;letter-spacing:.5px;color:var(--ink-400);
  margin-bottom:8px}
.devpanel table{border-collapse:collapse;width:100%}
.devpanel td{padding:2.5px 8px 2.5px 0;vertical-align:top;
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
  overflow-wrap:anywhere}
.devpanel td:first-child{color:var(--ink-400);white-space:nowrap}
.devlog{max-height:220px;overflow:auto;background:var(--bg);
  border-radius:8px;padding:8px 10px;margin-top:10px;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5}
body.dev .devstrip,body.dev .devpanel{display:block}
.spinner{width:15px;height:15px;border:2.5px solid var(--border);
  border-top-color:var(--blue-600);border-radius:50%;flex:none;
  animation:spin2 .8s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}

/* account avatar: same circular identity language as a match card */
.navav{width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--grad-cool);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-size:11.5px;
  font-weight:700;margin-right:8px;vertical-align:middle;
  letter-spacing:0}
#navMenuBtn{display:inline-flex;align-items:center}

/* quantity selector (friends and family testing) */
.authcard .testnote{margin-top:6px;color:var(--purple-700);
  font-weight:600}
.qtypacks{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.qtypacks .pack{flex:1;min-width:66px;padding:14px 10px}
/* room for the badge that sits above the pack's top edge */
.qtypacks .pack.pop{padding-top:18px}
.qtyother{margin-top:12px}
.qtyother .numinput{width:100%}

/* docked incremental search indicator: never covers the results */
.adddock{position:fixed;right:20px;bottom:20px;z-index:60;
  display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;
  box-shadow:var(--sh-md);padding:10px 16px;font-size:13.5px;
  font-weight:600;color:var(--ink-700);max-width:calc(100vw - 40px)}
@media (max-width:920px){
  .adddock{right:12px;left:12px;bottom:12px;justify-content:center}
}

/* ----------------------------------------------------------------- mobile */
@media (max-width:920px){
  .hero h1{font-size:34px}
  .promptrow{flex-wrap:wrap}
  .promptrow textarea{min-width:0;min-height:60px}
  .promptrow .cta-arrow{margin:4px auto 0}
  .resgrid{grid-template-columns:1fr}
  .selcol{display:flex;gap:10px;overflow-x:auto;padding:12px}
  .selcol .selhead{display:none}
  .mcard{min-width:240px;margin-bottom:0;flex:none}
  .stillrow{min-width:170px}
  .linkrow{grid-template-columns:1fr 1fr}
  .twocol{grid-template-columns:1fr}
  .twocol .col+.col{border-left:none;padding-left:0;margin-top:18px}
  .linkrow{grid-template-columns:1fr}
  .packs{grid-template-columns:1fr}
  .sechead{margin-top:64px;font-size:21px}
  .howsec,.whosec{margin-top:52px}
  .rotatesec{margin-top:52px;padding-top:28px}
  .rotateintro>.sechead.rotatehead{font-size:30px}
  .rotateintro>.secsub{font-size:15px}
  .sourcecard .srcicon svg{width:44px;height:44px}
  .connectorlines{height:80px}
  .rotatecard{padding:36px 18px 40px}
  .howrow{flex-direction:column;align-items:center;margin-top:32px}
  .howdash{display:none}
  .rotateheader{flex-wrap:wrap}
  .rotategrid{grid-template-columns:1fr;gap:28px}
  .whosec .sechead.whobighead{font-size:32px}
  .whoflowwrap{display:none}
  .whorow{grid-template-columns:1fr;margin-top:12px}
  .whoitem{padding:16px 0}
  .whoitem:nth-child(n+2){border-top:1px solid rgba(16,24,40,.07);
    margin-top:2px;padding-top:20px}
  .whonum{display:none}
  .whoq{margin-top:0;min-height:0}
  .customsec{margin-top:56px}
  .bannercard{padding:32px 24px}
  .bannertitle{font-size:22px}
  .bannerrow{grid-template-columns:1fr;gap:24px}
  .bannerdivider{display:none}
  .faqsec{margin-top:56px}
  .faqcols{grid-template-columns:1fr;column-gap:0}
  .faqcol:last-child .faqitem:first-child{border-top:none}
  .sumbar{flex-wrap:wrap}
  /* the result-page actions sit on one line on a phone only if they
     are allowed to share it: without this the second button is cut
     off at the screen edge and cannot be pressed */
  .sumbar .sactions{flex:1 1 100%;min-width:0}
  .sumbar .sactions>*{flex:1 1 auto;min-width:0;justify-content:center}
  .echo{flex-wrap:wrap}
  .upsell{flex-wrap:wrap}
  .dhead{flex-wrap:wrap}
  .topbar{padding:16px 0 8px}
  .orbitbg{display:none}
}
@media (max-width:430px){
  .logo-word{font-size:17px}
  .topnav{gap:12px}
  .navlink{font-size:12.5px;white-space:nowrap}
  .navpage{display:none}
  .hero{padding-top:30px}
  .hero h1{font-size:28px}
  .promptcard{padding:16px;border-radius:var(--r-xl)}
  .promptrow textarea{padding-left:2px}
  .hunt{width:300px;height:150px}
  .linkrow{grid-template-columns:1fr}
  .sechead{margin-top:48px;font-size:19px}
  .howsec,.whosec{margin-top:40px}
  .rotatesec{margin-top:40px}
  .rotatecard{padding:28px 16px 32px}
  .whorow{grid-template-columns:1fr}
  .whoitem{padding:14px 0}
  .customsec{margin-top:44px;padding-left:16px;padding-right:16px}
  .bannercard{padding:26px 18px}
  .bannertitle{font-size:19px}
  .faqsec{margin-top:44px}
  .faqitem summary{font-size:14.5px;padding:16px 2px}
  .sitefoot{margin-top:40px}
}

/* ---- custom quantity stepper (P1, 2026-08-30): − n + ---- */
.qtyother { display: flex; justify-content: center; margin: 10px 0 2px; }
.qtystep {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1.5px solid var(--purple-200, #E4DDFB);
  border-radius: 12px; overflow: hidden; background: #fff;
}
.qtybtn {
  width: 46px; min-height: 46px; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; font-weight: 700;
  color: var(--purple-700, #5B3DF5);
  background: var(--purple-50, #F4F1FE);
}
.qtybtn:hover:not(:disabled) { background: #EBE5FD; }
.qtybtn:focus-visible {
  outline: 2px solid var(--blue-600, #2970FF); outline-offset: -2px;
}
.qtybtn:disabled { color: #B9AEE8; cursor: default; background: #F8F6FE; }
.qtynum {
  width: 64px; border: 0; text-align: center;
  font-size: 19px; font-weight: 700; color: var(--ink-900, #101828);
  -moz-appearance: textfield; appearance: textfield;
}
.qtynum:focus { outline: none; background: var(--blue-50, #EFF4FF); }
/* native spinner UI must never appear on any quantity field */
.qtynum::-webkit-outer-spin-button,
.qtynum::-webkit-inner-spin-button,
.numinput::-webkit-outer-spin-button,
.numinput::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.numinput { -moz-appearance: textfield; appearance: textfield; }
@media (max-width: 520px) {
  .qtybtn { width: 54px; min-height: 52px; }
  .qtynum { width: 72px; font-size: 21px; }
}

/* ---- content-aware idea typography (P1, 2026-08-30) ---- */
.sumbar .stext h2.idea-md{font-size:15px;line-height:1.4;font-weight:700}
.sumbar .stext h2.idea-lg{font-size:13.5px;line-height:1.4;font-weight:650;
  letter-spacing:0}
.sumbar .stext h2.idea-xl{font-size:13px;line-height:1.4;font-weight:650;
  letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.sumbar .stext h2.idea-xl.idea-open{display:block;-webkit-line-clamp:unset;
  overflow:visible}
.ideamore{border:0;background:none;padding:2px 0 0;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--blue-600)}
.ideamore:hover{text-decoration:underline}
@media (max-width: 700px){
  .sumbar .stext h2{font-size:16px}
  .sumbar .stext h2.idea-md{font-size:14px}
  .sumbar .stext h2.idea-lg{font-size:12.5px}
  .sumbar .stext h2.idea-xl{font-size:12.5px}
  /* a long idea needs the whole card width on a phone, or it wraps
     into a tall sliver between the icon and the edit link */
  .sumbar:has(h2.idea-lg) .sico,
  .sumbar:has(h2.idea-xl) .sico{display:none}
  .sumbar:has(h2.idea-lg) .stext,
  .sumbar:has(h2.idea-xl) .stext{flex:1 1 100%}
}

/* ---- prominent shortfall panel in the results area (P1) ---- */
#shortfallhost .partialpanel.shortfallbar{
  position:relative;margin:14px 0 6px;padding:18px 44px 16px 20px;
  background:var(--purple-50,#F4F1FE);
  border:1.5px solid var(--purple-200,#E4DDFB);
  border-radius:var(--r-lg,16px);box-shadow:var(--sh-sm);
  animation:rise .35s ease}
#shortfallhost .shortfallbar h3{font-size:16.5px;margin:0 0 4px}
#shortfallhost .shortfallbar .choices{margin-top:10px}
.sfclose{position:absolute;top:10px;right:12px;border:0;background:none;
  font-size:20px;line-height:1;color:var(--ink-400,#98A2B3);
  cursor:pointer;padding:6px}
.sfclose:hover{color:var(--ink-900,#101828)}
.sfclose:focus-visible{outline:2px solid var(--blue-600,#2970FF);
  border-radius:6px}
@media (max-width:700px){
  #shortfallhost .partialpanel.shortfallbar{padding:16px 40px 14px 14px}
}