/* 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)}
/* Custom Search is a secondary path: same weight as the other links,
   not the one outlined item in the bar */
.topnav a.navcustom{color:var(--ink-700)}
.topnav a.navcustom:hover{color:var(--ink-900);text-decoration:none}
.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)}
/* homepage hero only: the words "first 3 matches are free" in the
   theme purple so they read under the search box (owner decision
   2026-09-11); the rest of the line keeps its grey */
#hero .freeline .freehi{color:var(--purple-700);font-weight:700}
.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)}
/* the second pager under the open match: same controls, comfortable
   thumb-sized targets, and scrolling back up lands with a little air
   above the pager+detail block */
.matchnav-bottom{margin:12px 0 0}
.matchnav-bottom .navarrow{min-height:44px;min-width:44px}
#detailhost{scroll-margin-top:12px}
.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:1250;
  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}
/* the hero's quiet connection motif: two thin curves crossing through
   the whitespace under the free line, with a few nodes sitting exactly
   on them. Near-transparent blue, one faint orange node, no glow, no
   motion. One SVG scaled by width, so every breakpoint draws the same
   artwork; phones hide it rather than squeeze it. */
.heromotif{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);
  width:min(64%,820px);pointer-events:none;z-index:0;line-height:0}
.heromotif .heroflow{display:block;width:100%;height:auto;overflow:visible}
.heromotif .hf-line{fill:none;stroke:#3B6DF6;stroke-opacity:.13;
  stroke-width:1.4;stroke-linecap:round}
.heromotif .hf-ring{fill:var(--bg);stroke:#5B7CF6;stroke-opacity:.42;
  stroke-width:1.5}
.heromotif .hf-dot{fill:#5B7CF6;fill-opacity:.38}
.heromotif .hf-orange{fill:var(--gold-500);fill-opacity:.55}
/* tablet: heights vary a lot (768x830 vs 768x1024) and a percentage
   offset lands high on one and low on the other. Below 920px the motif
   leaves the absolute position and becomes a flex child of the hero
   column, so it centres itself in whatever space remains under the free
   line at any viewport height. Desktop keeps the absolute placement. */
@media (max-width:920px){
  .heromotif{position:static;left:auto;bottom:auto;transform:none;
    width:100%;flex:1 1 auto;min-height:0;display:flex;
    align-items:center;justify-content:center}
  .heromotif .heroflow{width:min(64%,820px)}
}
@media (max-width:640px){.heromotif{display:none}}
.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}
/* narrow layouts: the action row lives below the matches (see
   placeResultActions in app.js); the match itself comes first */
.sactions-below{display:none;margin:18px auto 0;max-width:1120px}
.sactions-below .sactions{display:flex;gap:10px;flex-wrap:wrap}
.sactions-below .sactions>*{flex:1 1 auto;min-width:0;justify-content:center}
.sactions-below:not(:empty){display:block}
.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{position:relative;margin:18px auto 0;display:grid;
  grid-template-columns:340px 1fr;gap:18px;align-items:start}
/* ---- MatchMyIdea's ring-dot and sparkle motif, held still ----
   The same family as the search stage (.cdot / .huntspark) and the
   dashboard Home decoration: decorative only, never interactive. */
.mmimotif{pointer-events:none}
.mmimotif .hdot{position:absolute;border-radius:50%;
  background:var(--blue-600)}
.mmimotif .hdot::after{content:"";position:absolute;inset:30%;
  background:var(--bg);border-radius:50%}
.mmimotif .hdot.orange{background:var(--gold-500)}
.mmimotif .hspark{position:absolute;width:12px;height:12px;
  color:var(--purple-600);opacity:.6}
.mmimotif .hspark svg{display:block;width:100%;height:100%}
/* results page: the empty left column under the match list. It is
   positioned inside the grid (out of flow), so nothing moves; its top
   is set from the match list's height and it runs to the bottom of
   the detail panel. Shown only when that leaves real room, never on
   the single-column layout, so it can never sit on top of a card. */
.resmotif{position:absolute;left:0;top:0;bottom:24px;width:340px;
  display:none;pointer-events:none;overflow:hidden}
.resmotif.show{display:block}
.resmotif .resflow{display:block;width:100%;height:100%}
.resmotif .rm-line{fill:none;stroke:#3B6DF6;stroke-opacity:.11;
  stroke-width:1.5;stroke-linecap:round}
.resmotif .rm-line2{stroke:#7A5AF8;stroke-opacity:.08}
.resmotif .rm-ring{fill:var(--bg);stroke:#5B7CF6;stroke-opacity:.34;
  stroke-width:1.6}
.resmotif .rm-ring.rm-orange{stroke:var(--gold-500);stroke-opacity:.42}
.resmotif .rm-ring.rm-purple{stroke:#7A5AF8;stroke-opacity:.3}
.resmotif .rm-dot{fill:#5B7CF6;fill-opacity:.3}
.resmotif .rm-dot.rm-orange{fill:var(--gold-500);fill-opacity:.42}
.resmotif .rm-dot.rm-purple{fill:#7A5AF8;fill-opacity:.28}
.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 .schips:empty,.dhead .dchips:empty{display:none}
.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)}
.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}}
/* The footer's empty space belongs ABOVE the copyright line, not under
   it: the links stay put, the line drops to anchor the bottom of the
   page about 36px above the edge. Pages that end with the footer give
   up most of the wrapper's bottom padding for it; pages without a
   footer (results) keep theirs. */
.sitefoot{margin:64px auto 0;max-width:1080px}
.wrap:has(.sitefoot){padding-bottom:36px}
/* the two link rows sit centred as one unit above the copyright */
.footrow{display:flex;flex-wrap:wrap;justify-content:center;
  text-align:center;gap:10px 28px;padding-top:24px;
  border-top:1px solid var(--border-soft)}
.footrow.footrow2{padding-top:12px;border-top:none}
.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:112px;text-align:center;font-size:12.5px;
  color:var(--ink-400)}
.turnstile-host{width:min(100%,360px);margin:0 auto;
  display:flex;justify-content:center}
.turnstile-host[hidden]{display:none}

/* 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){
  /* tablet: every nav item stays on one line; below 700 px the page
     links leave the bar (they remain in the footer) so Sign in and
     Create account never wrap or collide with the logo */
  .topnav{gap:14px}
  .topnav a,.navlink,.navbtn{white-space:nowrap}
  .logo{gap:8px}
  .logo-word{font-size:19px}
  .hero h1{font-size:34px}
  .promptrow{flex-wrap:wrap}
  .promptrow textarea{min-width:0;min-height:60px}
  .promptrow .cta-arrow{margin:4px auto 0}
  /* the single column must be allowed to shrink to the page width:
     otherwise the card row's own width pushes the column, the detail
     panel and its star past the right edge of the screen */
  .resgrid{grid-template-columns:minmax(0,1fr)}
  .selcol,#detailhost{min-width:0}
  .resmotif{display:none !important}
  .selcol{display:flex;gap:10px;overflow-x:auto;padding:12px}
  .selcol .selhead{display:none}
  .mcard{min-width:240px;width:min(300px,100%);margin-bottom:0;flex:none}
  .mcard>div{min-width:0;flex:1}
  .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}
  /* a grid item's automatic minimum is its no-wrap label: let the
     evidence link buttons shrink to the column so the narrowest phones
     never scroll sideways (the label already ellipsizes) */
  .linkrow .lbtn{min-width:0}
  .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){
  /* the top bar must hold the logo, Sign in and Create account on one
     line down to 320 px without the logo and links touching */
  .topbar{gap:10px}
  .logo{gap:6px}
  .logo-word{font-size:16px}
  .topnav{gap:8px}
  .navauth{gap:8px}
  .navlink{font-size:12.5px;white-space:nowrap}
  .navbtn{padding:7px 10px;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}
  /* phones: a natural flow, the line a little under the links */
  .footline{margin-top:40px}
  .wrap:has(.sitefoot){padding-bottom:32px}
}

/* ---- 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){
  .navpage{display:none}
  .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}
/* ---- every partial/continuation choice is a centered modal ---- */
/* The host is an in-flow div that becomes a fixed, dimmed layer only
   while a choice is open, so the matches stay exactly where they are
   underneath and nothing on the page moves when it opens or closes. */
.optionsmodalhost{position:fixed;inset:0;z-index:1200;
  display:grid;place-items:center;padding:20px;overflow:auto;
  background:rgba(16,24,40,.42)}
#shortfallhost.optionsmodalhost .optionsmodal,
#upsellhost.optionsmodalhost .optionsmodal{
  position:relative;width:min(620px,100%);margin:0;
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  overflow:auto;padding:26px 28px 22px;
  background:var(--surface,#fff);
  border:1.5px solid var(--purple-200,#E4DDFB);
  border-radius:var(--r-lg,16px);
  box-shadow:0 24px 64px rgba(16,24,40,.22);outline:none;
  animation:rise .3s ease}
.optionsmodal h3{padding-right:44px;overflow-wrap:anywhere}
.optionsmodalhost .sfclose{
  top:12px;right:12px;width:44px;height:44px;padding:0;
  display:grid;place-items:center;border:1px solid var(--border,#E4E7EC);
  border-radius:999px;background:var(--surface,#fff);
  color:var(--ink-700,#344054);font-size:30px;line-height:1}
.optionsmodalhost .sfclose:hover{
  background:var(--blue-50,#EFF4FF);border-color:var(--blue-600,#2970FF)}
.optionsmodal .stopfornow{width:100%;margin-top:10px;
  min-height:48px;font-weight:750}
.optionsmodal .actrow .stopfornow{width:auto;margin-top:0}
.optionsmodal .keepnote{margin-top:12px;text-align:center;
  font-size:12.5px;color:var(--ink-400,#98A2B3)}
@media (max-width:700px){
  #shortfallhost .partialpanel.shortfallbar{padding:16px 40px 14px 14px}
}
@media (max-width:520px){
  .optionsmodalhost{padding:10px}
  #shortfallhost.optionsmodalhost .optionsmodal,
  #upsellhost.optionsmodalhost .optionsmodal{
    padding:20px 16px 16px;
    max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
  .optionsmodal .choice{min-height:52px;font-size:14.5px;
    padding:12px 14px;gap:10px}
  .optionsmodal .choice .cico{width:34px;height:34px}
  .optionsmodal .freetext{flex-wrap:wrap}
  .optionsmodal .freetext .cta{width:100%;justify-content:center}
  .optionsmodal .actrow .cta,.optionsmodal .actrow .stopfornow{
    width:100%;justify-content:center}
  .authcard{padding:24px 18px}
  .authclose{top:2px;right:2px;padding:10px 12px}
}
@media (prefers-reduced-motion: reduce){
  #shortfallhost.optionsmodalhost .optionsmodal,
  #upsellhost.optionsmodalhost .optionsmodal,.bignotice{
    animation:none !important}
}

/* ---- result email: pressed, sent and capped states ---- */
.sentnote{display:flex;gap:10px;align-items:flex-start;max-width:640px;
  background:var(--blue-50,#EFF4FF);
  border:1px solid var(--purple-200,#E4DDFB);border-radius:12px;
  padding:10px 14px;color:var(--ink-900,#101828);overflow-wrap:anywhere}
.sentnote .tok{display:flex;color:var(--success);flex:none;margin-top:1px}
.sentnote strong{display:block;font-size:13.5px;font-weight:800}
.sentnote span{font-size:13px;color:var(--ink-600,#475467)}
.btn-outline.sent{border-color:var(--success);color:var(--success)}
.btn-outline.sent .ic{color:var(--success)}
.btn-outline .spinner{width:13px;height:13px;border-width:2px}
.btn-outline[aria-busy="true"],.btn-outline.sent{opacity:1}
.inlineerr{flex-basis:100%;margin:6px 0 0}

/* ---- password rules, shown before anyone submits ---- */
.phint{margin-top:6px;font-size:12.5px;color:var(--ink-600,#475467);
  line-height:1.45}
.authcard input[aria-invalid="true"]{border-color:var(--purple-700)}

/* ---- big themed notice: payment received, email confirmed ---- */
.bignotice{position:fixed;top:16px;left:12px;right:12px;margin:0 auto;
  z-index:1300;display:flex;gap:12px;align-items:flex-start;
  width:min(520px,calc(100vw - 24px));background:var(--surface,#fff);
  border:1.5px solid var(--purple-200,#E4DDFB);
  border-radius:var(--r-lg,16px);
  box-shadow:0 18px 48px rgba(16,24,40,.22);padding:14px 12px 14px 16px;
  animation:rise .25s ease}
.bignotice .tok{display:flex;flex:none;width:36px;height:36px;
  border-radius:50%;background:var(--blue-50,#EFF4FF);color:var(--success);
  align-items:center;justify-content:center}
.bignotice .bntext{display:flex;flex-direction:column;gap:2px;flex:1;
  min-width:0;overflow-wrap:anywhere;padding-top:4px}
.bignotice strong{font-size:15.5px;font-weight:800}
.bignotice span{font-size:13.5px;color:var(--ink-600,#475467)}
.bignotice .bnclose{border:0;background:none;font-size:26px;line-height:1;
  color:var(--ink-400,#98A2B3);cursor:pointer;padding:6px 8px;
  margin:-4px -2px 0 0;flex:none}
.bignotice .bnclose:hover{color:var(--ink-900,#101828)}
.bignotice .bnclose:focus-visible{outline:2px solid var(--blue-600);
  border-radius:8px}

/* ---- narrowest phones: the word mark alone keeps the bar on one line ---- */
@media (max-width:360px){
  .logo svg{display:none}
  .logo-word{font-size:15.5px}
  .navbtn{padding:6px 8px;font-size:12px}
  /* the sparkle gives its width to the text: the whole placeholder fits */
  #hero .promptrow .picon{display:none}
  #hero .promptcard{padding-left:18px}
}