/* "Help me choose" adviser pop-up (advisor.js). Locked Microooo look: Inter Tight, white cards that lift on hover,
   black primary buttons, the shared .cl-filters tab bar, --sel-raise / --sel-edge for chosen states, copper #e0682f. */
:root { --adv-cu: #e0682f; --adv-cu-soft: color-mix(in srgb, #e0682f 10%, transparent); }
html.adv-open, html.adv-open body { overflow: hidden; }

.adv-ov { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; font-family: var(--font); }
.adv-scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, .34); opacity: 0; transition: opacity .2s var(--ease); }
.adv-modal { position: relative; width: min(900px, 100%); max-height: min(860px, calc(100dvh - 48px)); display: flex; flex-direction: column;
  background: var(--panel); border-radius: 22px; box-shadow: 0 0 0 1px var(--line), var(--shadow-3); overflow: hidden;
  opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .22s var(--ease), transform .26s var(--ease); }
.adv-ov.in .adv-scrim { opacity: 1; }
.adv-ov.in .adv-modal { opacity: 1; transform: none; }
.adv-ov.out .adv-scrim, .adv-ov.out .adv-modal { opacity: 0; transition-duration: .16s; }

/* header + progress */
.adv-h, .adv-prog, .adv-foot { flex: none; }
.adv-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 12px 24px; }
.adv-mark { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--adv-cu); background: var(--adv-cu-soft); }
.adv-h > div { flex: 1; min-width: 0; }
.adv-h h2 { margin: 0; font: 600 18px/24px var(--display, var(--font)); letter-spacing: -.01em; color: var(--ink); }
.adv-h p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.adv-x { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.adv-x:hover { background: var(--hover); color: var(--ink); }
.adv-prog { display: flex; align-items: center; gap: 8px; padding: 0 24px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.adv-prog::-webkit-scrollbar { display: none; }
.adv-prog button { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 4px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); font: 450 13px/1 var(--font); white-space: nowrap; cursor: pointer; transition: color .15s var(--ease), background-color .15s var(--ease); }
.adv-prog button:disabled { cursor: default; }
.adv-prog button i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.adv-prog button.done { color: var(--ink-2); }
.adv-prog button.done:hover { background: var(--hover); color: var(--ink); }
.adv-prog button.done i { background: var(--ink); color: var(--panel); box-shadow: none; }
.adv-prog button.on { color: var(--ink); font-weight: 500; background: var(--sel-raise); box-shadow: var(--sel-edge); }
.adv-prog button.on i { background: var(--adv-cu); color: #fff; box-shadow: none; }
.adv-sep { flex: none; width: 18px; height: 1px; background: var(--line-2); }

/* body + footer */
.adv-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 24px; scrollbar-width: thin; }
.adv-pane { display: grid; gap: 16px; }
.adv-in { animation: adv-in .22s var(--ease); }
@keyframes adv-in { from { opacity: 0; transform: translateY(4px); } }
.adv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px 12px 24px; border-top: 1px solid var(--line); background: var(--panel); }
.adv-f-r { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.adv-f-note { color: var(--ink-3); font-size: 13px; }
.adv-foot .btn svg, .adv-sec .btn svg { flex: none; }
.adv-foot .btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* step 1 */
.adv-mode { justify-self: start; }
.adv-mode > button { cursor: pointer; }
.adv-lead { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 21px; }
.adv-lead b { color: var(--ink); font-weight: 500; }
.adv-lbl { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); margin: 0 0 8px; letter-spacing: .01em; }
.adv-ta { width: 100%; min-height: 92px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 0; background: var(--panel); color: var(--ink);
  font: 400 15px/22px var(--font); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .15s var(--ease); }
.adv-ta:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink-3), 0 0 0 4px var(--adv-cu-soft); }
.adv-ta::placeholder { color: var(--ink-3); }
.adv-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.adv-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--panel); color: var(--ink-2);
  font: 450 13px/1 var(--font); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.adv-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); transform: translateY(-1px); }
.adv-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.adv-or::before, .adv-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.adv-projs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.adv-proj { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.adv-proj:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); transform: translateY(-1px); }
.adv-proj > div { flex: 1; min-width: 0; }
.adv-proj b { display: block; font-weight: 500; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-proj small { color: var(--ink-3); font-size: 12px; }
.adv-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adv-goal { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--panel); color: var(--ink-2);
  font: 500 14px/1 var(--font); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .18s var(--ease), color .15s var(--ease), transform .18s var(--ease); }
.adv-goal:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); transform: translateY(-1px); }
.adv-goal.on { color: var(--ink); background: var(--sel-raise); box-shadow: var(--sel-edge); }
.adv-goal.on svg { color: var(--adv-cu); }

/* step 2 */
.adv-q .cl-filters > button { cursor: pointer; }
.adv-q .cl-filters em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--adv-cu); margin-left: 2px; }
.adv-hint { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }

/* step 3: summary */
.adv-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 8px; }
.adv-start, .adv-stats > div { border-radius: 16px; padding: 16px 18px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.adv-start { background: var(--ink); color: var(--panel); box-shadow: none; }
.adv-start small { display: block; font-size: 12px; line-height: 16px; opacity: .72; }
.adv-start b { display: block; font: 600 34px/40px var(--display, var(--font)); letter-spacing: -.02em; margin: 2px 0; }
.adv-start b span, .adv-stats b span { font-size: 14px; font-weight: 450; opacity: .6; margin-left: 2px; letter-spacing: 0; }
.adv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.adv-stats small { display: block; color: var(--ink-3); font-size: 12px; }
.adv-stats b { display: block; font: 600 22px/30px var(--display, var(--font)); letter-spacing: -.01em; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.adv-stats b.sm { font-size: 15px; line-height: 22px; font-weight: 500; }
.adv-stats .hl { box-shadow: 0 0 0 1px color-mix(in srgb, var(--adv-cu) 45%, transparent); }
.adv-stats .hl small { color: var(--adv-cu); }

/* sections */
.adv-sec { display: grid; gap: 10px; }
.adv-sec h3 { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font: 600 15px/22px var(--display, var(--font)); color: var(--ink); }
.adv-sec h3 svg { color: var(--ink-3); }
.adv-sec h3 span { font-size: 12px; font-weight: 500; color: var(--ink-3); background: var(--hover); border-radius: 999px; padding: 1px 8px; }
.adv-est { margin: -4px 0 0; font-size: 12px; line-height: 18px; color: var(--ink-3); }

/* service rows */
.adv-rows { display: grid; gap: 8px; }
.adv-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border-radius: 16px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.adv-row:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); transform: translateY(-1px); }
.adv-row-l { display: flex; gap: 12px; min-width: 0; flex: 1; }
.adv-row-l .mono-tile { margin-top: 2px; }
.adv-row-l > div { min-width: 0; }
.adv-cat { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.adv-row-l b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); margin-top: 1px; }
.adv-row-l p { margin: 2px 0 0; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.adv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adv-tags span { font-size: 12px; line-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--hover); color: var(--ink-2); }
.adv-tags span.pay { background: var(--adv-cu-soft); color: var(--adv-cu); }
.adv-tags span.why { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.adv-row-r { flex: none; display: grid; justify-items: end; gap: 2px; text-align: right; min-width: 180px; }
.adv-row-r > b { font: 600 18px/24px var(--display, var(--font)); color: var(--ink); font-variant-numeric: tabular-nums; }
.adv-row-r > small { font-size: 12px; color: var(--ink-3); }
.adv-alt { position: relative; margin-top: 8px; display: inline-flex; align-items: center; }
.adv-alt select { appearance: none; -webkit-appearance: none; height: 32px; max-width: 240px; padding: 0 30px 0 12px; border-radius: 10px; border: 0; background: var(--tab-track-in, var(--hover));
  color: var(--ink-2); font: 450 12px/1 var(--font); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; text-overflow: ellipsis; transition: color .15s var(--ease), box-shadow .15s var(--ease); }
.adv-alt select:hover, .adv-alt select:focus { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); outline: none; }
.adv-alt svg { position: absolute; right: 10px; pointer-events: none; color: var(--ink-3); }

/* AI to connect */
.adv-ai { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.adv-ai-i { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.adv-ai-i:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); transform: translateY(-1px); }
.adv-ai-i > div { flex: 1; min-width: 0; }
.adv-ai-i b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.adv-ai-i small { display: block; font-size: 12px; line-height: 17px; color: var(--ink-3); }
.adv-ai-i.note { box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
.adv-ai-i.note:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.adv-ai-i.note > svg { color: var(--ink-3); flex: none; }
.adv-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--ok); white-space: nowrap; }

/* growth chart + table */
.adv-chart { width: 100%; height: auto; display: block; color: var(--ink); background: var(--panel); border-radius: 16px; box-shadow: 0 0 0 1px var(--line); padding: 6px 4px 0; }
.adv-chart .g { stroke: var(--line); stroke-width: 1; }
.adv-chart .ax { fill: var(--ink-3); font: 450 11px var(--font); }
.adv-chart .vl { fill: var(--ink-2); font: 500 11px var(--font); font-variant-numeric: tabular-nums; }
.adv-chart .vl.hl { fill: var(--adv-cu); font-weight: 600; }
.adv-chart .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.adv-chart .ar { fill: var(--adv-cu); opacity: .08; }
.adv-chart .pt { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.adv-chart .pt.hl { fill: var(--adv-cu); stroke: var(--adv-cu); }
.adv-tw { overflow-x: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); background: var(--panel); }
.adv-tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.adv-tbl th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adv-tbl td { padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.adv-tbl tr:last-child td { border-bottom: 0; }
.adv-tbl .n { text-align: right; font-variant-numeric: tabular-nums; }
.adv-tbl .tot td { color: var(--ink); font-weight: 600; background: var(--hover); }
.adv-tn { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.adv-how { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; }
.adv-how summary { display: flex; align-items: center; gap: 8px; height: 40px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.adv-how summary::-webkit-details-marker { display: none; }
.adv-how summary:hover { color: var(--ink); }
.adv-how ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 12px; line-height: 18px; color: var(--ink-2); }

/* good to know */
.adv-warn { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adv-warn li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 19px; color: var(--ink-2); background: var(--hover); }
.adv-warn li svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.adv-warn li.day1 svg, .adv-warn li.trial svg { color: var(--adv-cu); }
.adv-warn li.tip { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* why Microooo */
.adv-why-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adv-why-g > div { padding: 14px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.adv-why-g > div:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); transform: translateY(-1px); }
.adv-why-g svg { color: var(--adv-cu); }
.adv-why-g b { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.adv-why-g p { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: var(--ink-2); }

/* Microooo plan */
.adv-plan { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--sel-raise); box-shadow: var(--sel-edge); }
.adv-plan > svg { flex: none; color: var(--adv-cu); }
.adv-plan > div { flex: 1; min-width: 0; }
.adv-plan b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.adv-plan p { margin: 2px 0 0; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.adv-plan.ok { background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.adv-plan.ok > svg { color: var(--ok); }

/* AI team add-ons */
.adv-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.adv-role { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.adv-role:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); transform: translateY(-1px); }
.adv-role > svg { flex: none; color: var(--ink-2); margin-top: 1px; }
.adv-role > div { flex: 1; min-width: 0; }
.adv-role b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.adv-role small { display: block; font-size: 12px; line-height: 17px; color: var(--ink-3); }
.adv-role em { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--hover); color: var(--ink-2); }
.adv-role em.pro { background: var(--adv-cu-soft); color: var(--adv-cu); }
.adv-team { justify-self: start; }

/* tablet */
@media (max-width: 820px) {
  .adv-hero { grid-template-columns: 1fr; }
  .adv-why-g { grid-template-columns: repeat(2, 1fr); }
  .adv-goals { grid-template-columns: repeat(2, 1fr); }
}
/* phone: a full-height sheet */
@media (max-width: 640px) {
  .adv-ov { padding: 0; place-items: end stretch; }
  .adv-modal { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; transform: translateY(16px); }
  .adv-h { padding: 14px 12px 10px 16px; padding-top: max(14px, env(safe-area-inset-top)); }
  .adv-prog { padding: 0 16px 12px; }
  .adv-prog button { font-size: 12px; }
  .adv-body { padding: 16px; }
  .adv-foot { padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .adv-foot .btn { height: 40px; padding: 0 14px; }
  .adv-f-note { display: none; }
  .adv-row { flex-direction: column; gap: 10px; }
  .adv-row-r { justify-items: start; text-align: left; min-width: 0; width: 100%; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; }
  .adv-row-r .adv-alt { grid-column: 1 / -1; margin-top: 4px; width: 100%; }
  .adv-alt select { max-width: none; width: 100%; }
  .adv-why-g { grid-template-columns: 1fr; }
  .adv-goals { grid-template-columns: 1fr 1fr; }
  .adv-goal { height: 48px; padding: 0 12px; font-size: 13px; }
  .adv-plan { flex-wrap: wrap; }
  .adv-plan .btn { margin-left: 34px; }
  .adv-start b { font-size: 30px; }
  .adv-mode { width: 100%; }
  .adv-f-r .btn-line { padding: 0 12px; }
}
@media (max-width: 380px) { .adv-f-r .btn-line svg + * { display: none; } .adv-goals { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .adv-modal, .adv-scrim, .adv-in, .adv-row, .adv-proj, .adv-goal, .adv-ai-i, .adv-role, .adv-why-g > div, .adv-chip { transition: none; animation: none; } }

/* one height for every step (owner 2026-11-11: no growing and shrinking between tabs) */
@media (min-width: 701px) { .adv-modal { height: min(760px, calc(100dvh - 48px)); } }