/* Kong Reviews: Light-Lux typography and ruled surfaces, neutral greys and Carolina accents.
   Shared theme and component adaptations are grouped at the end of this stylesheet.
   Existing workflow layouts, save states, and responsive behavior remain in their sections. */
:root {
  --page: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F8FC;
  --line: #E2E8F0;
  --line-2: #EDF1F7;
  --text: #0F172A;
  --text-2: #334155;
  --muted: #5B6882;
  --accent: #0072D6;
  --accent-hover: #005FB5;
  --on-accent: #FFFFFF;
  --accent-soft: #E7F2FD;
  --accent-ink: #0A58A3;
  --ok: #0E7A54;
  --ok-soft: #E4F5EC;
  --warn: #B4470F;
  --warn-soft: #FDF2EA;
  --warn-ink: #8A3A10;
  --info: #5B3FC4;
  --info-soft: #EFEBFB;
  /* Likes on the Showcase: BetaList's red heart. */
  --like: #E0294A;
  --like-soft: #FDECEF;
  --sky-1: #1583F2;
  --sky-2: #4FA9FA;
  --sky-3: #A9D5FD;
  --sky-4: #E4F1FE;
  --on-sky: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.78);
  --shadow-1: 0 0 0.5px rgba(15, 23, 42, 0.18), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 0 0.5px rgba(15, 23, 42, 0.2), 0 8px 28px rgba(2, 47, 95, 0.12);
  --shadow-3: 0 2px 6px rgba(2, 47, 95, 0.08), 0 24px 60px rgba(2, 47, 95, 0.16);
  /* Modals: a scrim that clearly dims the page, a lifted surface and an edge that separates them. */
  --overlay: rgba(15, 23, 42, 0.55);
  --surface-raised: #FFFFFF;
  --modal-edge: rgba(15, 23, 42, 0.1);
  --modal-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 30px 80px rgba(2, 47, 95, 0.32);
  --r-xl: 22px;
  --r-lg: 18px;
  --r: 12px;
  --r-sm: 8px;
  --display-tracking: -0.01em;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.68, -0.25, 0.27, 1.25);
  --fast: 160ms;
  --med: 300ms;
  --slow: 700ms;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* hidden always hides, whatever display a class gives (the filter popover was showing on Home). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 15px/1.55 var(--sans); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--text); }
a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--accent); }
h1 { margin: 0 0 8px; font: 700 clamp(32px, 4.4vw, 44px)/1.08 var(--display); letter-spacing: var(--display-tracking); }
h2, h3, h4 { font-family: var(--display); letter-spacing: -0.005em; }
.cap-group h3, .sc-layer h3, .fb-subgroup h4 { font-family: var(--sans); }
h2 { margin: 24px 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
h2:first-child { margin-top: 0; }
.muted { color: var(--muted); margin: 0; }
.hint { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.num, .stat .v, .pick-cost .now, .plan-price, .preview-price, .costs, .bar .val { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
@media (min-width: 1280px) { .wrap { padding: 0 48px; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The sky behind the top of every page: tall on Home, a band elsewhere. */
.sky { position: absolute; inset: 0 0 auto; height: 260px; z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 72%, var(--page) 100%);
  transition: height var(--slow) var(--ease); }
body.home .sky { height: min(1000px, 118vh); }
body.home.has-result .sky { height: 820px; }
.sky::after { content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>"); }
.cloud { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); filter: blur(6px); }
.cloud.c1 { width: 520px; height: 180px; left: -120px; bottom: 6%; animation: drift 38s var(--ease) infinite alternate; }
.cloud.c2 { width: 680px; height: 220px; right: -180px; bottom: 2%; animation: drift 46s var(--ease) infinite alternate-reverse; }
.cloud.c3 { width: 360px; height: 120px; left: 38%; bottom: -2%; animation: drift 30s var(--ease) infinite alternate; }
@keyframes drift { to { transform: translateX(60px); } }

/* Top bar: white words on the sky, glass once the page scrolls under it. */
/* A light glass bar from the top, so the logo and links read dark against it. */
.topbar { position: sticky; top: 0; z-index: 20; }
.topbar-inner { display: flex; align-items: center; gap: 8px 20px; min-height: 72px; }
.topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: 700 18px/1 var(--sans); letter-spacing: -0.02em; color: var(--on-sky); text-decoration: none; min-height: 44px; white-space: nowrap; }
.brand:hover { color: var(--on-sky); }
/* The logo stands alone, tinted with the text colour: light on the sky or a dark page, dark on a light one. */
.brand-mark { flex: none; width: 29px; height: 46px; background: currentColor; -webkit-mask: url(/img/logo.svg) center / contain no-repeat; mask: url(/img/logo.svg) center / contain no-repeat; }
.topbar .brand, .topbar .tab, .topbar .ghost-pill { color: var(--text); }
/* The header bars stay light, so the logo always reads dark. */
.topbar, .mobile-bar {
  --surface: #FFFFFF; --surface-2: #F5F8FC; --line: #E2E8F0; --line-2: #EDF1F7;
  --text: #0F172A; --text-2: #334155; --muted: #5B6882;
  --accent: #0072D6; --accent-hover: #005FB5; --on-accent: #FFFFFF; --accent-soft: #E7F2FD; --accent-ink: #0A58A3;
  color-scheme: light;
}
.tabs { display: flex; gap: 2px; }
.tab { position: relative; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--on-sky); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.tab:hover { background: rgba(255, 255, 255, .16); }
.tab[aria-pressed="true"] { background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.topbar .tab:hover { background: var(--surface-2); }
.topbar .tab[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
.account-area { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ghost-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.12); color: var(--on-sky); font: 500 14px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.ghost-pill:hover { background: rgba(255,255,255,.24); color: var(--on-sky); }
.topbar .ghost-pill { border-color: var(--line); background: var(--surface); }
.topbar .ghost-pill:hover { background: var(--surface-2); }
.gh { width: 16px; height: 16px; flex: none; }
@media (max-width: 899px) {
  .topbar-inner { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; min-height: 0; }
  .tabs { order: 3; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -6px; }
  .tab { flex: none; }
}

/* Buttons. Labels are one word; the longer meaning sits in title/data-tip. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 14px var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; box-shadow: inset 0 -2px 0 rgba(0,0,0,.14), 0 2px 8px rgba(0, 114, 214, .28); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-big { min-height: 54px; padding: 0 36px; font-size: 18px; }
.btn-wide { width: 100%; margin-top: 20px; }
.btn[disabled] { opacity: .65; cursor: progress; }
.btn-link { text-decoration: none; }
.btn-danger { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.icon-btn { min-width: 44px; padding: 0; }
/* Secondary actions are icon-only: quiet until hovered, named by aria-label and the tooltip. One primary per area keeps its words. */
.icon-btn:not(.btn-danger):not(.btn-primary) { color: var(--text-2); }
.icon-btn:not(.btn-danger):not(.btn-primary):hover { color: var(--text); }
.icon-btn .ico, .icon-btn .check, .icon-btn .spin { width: 18px; height: 18px; flex: none; }
.icon-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.pager-step.icon-btn { min-width: 40px; min-height: 40px; }
.link-btn { border: 0; padding: 0; background: none; color: var(--accent-ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fields */
label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin: 14px 0 6px; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 14px; font: 400 15px var(--sans); background: var(--surface); color: var(--text); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }
textarea { resize: vertical; min-height: 120px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Home hero */
.hero { position: relative; text-align: center; padding: 56px 0 24px; color: var(--on-sky); }
.hero h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -0.015em; margin: 0 auto 18px; max-width: 900px; text-wrap: balance; text-shadow: 0 2px 30px rgba(2, 47, 95, .18); }
.hero h1 em { font-style: normal; font-weight: 400; }
.hero .lede { max-width: 560px; margin: 0 auto; font-size: 18px; line-height: 1.5; text-wrap: balance; color: rgba(255,255,255,.95); }
.hero-in > * { animation: rise var(--slow) var(--ease) both; }
.hero-in > :nth-child(2) { animation-delay: 80ms; }
.hero-in > :nth-child(3) { animation-delay: 160ms; }
.hero-in > :nth-child(4) { animation-delay: 240ms; }
.hero-in > :nth-child(5) { animation-delay: 320ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* The ask box: describe the product, press Plan. */
.composer { position: relative; z-index: 2; max-width: 720px; margin: 40px auto 0; padding: 7px; border-radius: var(--r-xl); background: rgba(251, 251, 255, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow-3); text-align: left; color: var(--text); transition: box-shadow var(--med) var(--ease); }
.composer-card { display: flex; flex-direction: column; gap: 12px; min-height: 200px; padding: 18px 16px 14px 20px; border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-1); border: 1px solid transparent; transition: border-color var(--med) var(--ease), border-width var(--med) var(--ease); }
.composer[data-state="working"] .composer-card { border: 2px solid var(--accent); }
.composer textarea { flex: 1; min-height: 96px; border: 0; padding: 0; background: transparent; font-size: 17px; line-height: 1.5; resize: none; box-shadow: none; }
.composer textarea:focus { box-shadow: none; }
.composer textarea::placeholder { color: var(--muted); opacity: .8; }
.composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.composer-bar .spacer { flex: 1; }
.chip-field { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 6px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); font-size: 14px; }
.chip-field svg { flex: none; }
.chip-field input, .chip-field select { width: 100px; min-height: 0; height: 30px; border: 0; padding: 0 4px; background: transparent; font-size: 14px; color: var(--text); box-shadow: none; }
.chip-field select { width: auto; max-width: 260px; cursor: pointer; }
.chip-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan-btn { min-height: 40px; padding: 0 20px; }
.composer-status { min-height: 22px; margin: 12px 4px 0; font-size: 14px; color: var(--text-2); text-align: center; }
.examples-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 22px auto 0; }
.example { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-1); color: var(--accent-ink); font: 500 13px var(--sans); cursor: pointer; transition: background var(--fast) var(--ease); }
.example:hover { background: var(--surface); }
.hero-cta { margin-top: 36px; }

/* Home sections under the hero */
.home-more { --home-gap: clamp(80px, 10vw, 144px); padding-top: clamp(72px, 8vw, 112px); padding-bottom: clamp(72px, 8vw, 112px); }
.section-head { max-width: 640px; margin: 0 0 56px; }
.section-head .muted { color: var(--text-2); font-size: 16px; text-wrap: pretty; }
.section-head h2 { margin: 0 0 14px; font: 700 clamp(28px, 3.8vw, 40px)/1.1 var(--display); letter-spacing: var(--display-tracking); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 4vw, 56px); }
@media (max-width: 760px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.feature { padding: 0; }
.feature h3 { margin: 24px 0 8px; font: 650 21px/1.15 var(--display); }
.feature p { margin: 0; color: var(--text-2); }
.recent { margin-top: 8px; }
.recent-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.recent-head h2 { margin: 0; font: 650 22px/1.1 var(--display); }
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.recent-card { display: block; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; box-shadow: var(--shadow-1); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.recent-card:hover { border-color: var(--accent); color: var(--text); box-shadow: var(--shadow-2); }
.recent-card strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.recent-card .costs { margin-top: 6px; font-size: 14px; color: var(--text-2); }

/* Welcome after the first sign-in */
.welcome { max-width: 720px; margin: 28px auto 0; padding: 22px 24px; border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); text-align: left; animation: rise var(--slow) var(--spring) both; position: relative; z-index: 2; }
.welcome-head { display: flex; align-items: center; gap: 14px; }
.welcome-head h2 { margin: 0; font: 650 22px/1.1 var(--display); }
.welcome-head .grow { flex: 1; }
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.step { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.step .n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; flex: none; transition: all var(--med) var(--ease); }
.step.done .n { border-color: var(--ok); background: var(--ok); color: #FFFFFF; }
.step .what { flex: 1; min-width: 0; }
.step .what strong { display: block; font-weight: 600; }
.step .what span { color: var(--muted); font-size: 14px; }
.step.done .what strong { color: var(--muted); }

/* Page heads on the inner views sit just below the sky band. */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 56px 0 28px; }
.page-head h1 { margin: 0 0 8px; }
.page-head .muted { font-size: 16px; max-width: 640px; }
.view { animation: viewIn var(--med) var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } }

/* Plan results */
.plan-body { padding-top: 40px; padding-bottom: 64px; }
.result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 20px; }
.result-head h2 { margin: 0; font: 700 clamp(26px, 3.4vw, 34px)/1.1 var(--display); }
.result-head .muted { margin-top: 6px; max-width: 640px; }
.assumed { margin: -8px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 14px; line-height: 1.5; }
.assumed strong { color: var(--text); }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.result-head > :first-child { flex: 1 1 280px; min-width: 0; }
.cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.plan-body .cols { flex-wrap: wrap-reverse; }
#view-estimate .cols, #view-stacks, #view-browse, #view-vendor, #view-settings { padding-bottom: 24px; }
.col-side { flex: 1 1 300px; min-width: 0; }
.col-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 960px) { .cols, .plan-body .cols { flex-wrap: nowrap; } .col-side { position: sticky; top: 88px; max-height: calc(100vh - 100px); overflow: auto; flex: 0 0 340px; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.empty { color: var(--muted); text-align: center; padding: 48px 20px; }
.empty .spot { display: block; margin: 0 auto 14px; }
.empty .btn { margin-top: 14px; }
.side-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px; }
.side-title h2 { margin: 0; font: 650 19px var(--display); }
.prd { border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 14px; margin-top: 16px; background: var(--surface-2); }
.prd summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: 28px; display: flex; align-items: center; }
.prd .btn { margin-top: 10px; }
.caps { display: flex; flex-direction: column; gap: 14px; }
.cap-group h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cap { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 6px 0; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; }
.cap input { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.cap-row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.cap-row .nice { display: flex; gap: 6px; align-items: center; margin: 0; padding: 7px 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.cap-row .nice input { width: 14px; height: 14px; min-height: 0; margin: 0; accent-color: var(--accent); }
.cap-row:not(:has(.cap input:checked)) .nice { display: none; }
.cap .src { display: block; font-size: 12px; color: var(--muted); font-style: italic; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; animation: rise var(--med) var(--ease) both; }
.stat:nth-child(2) { animation-delay: 60ms; } .stat:nth-child(3) { animation-delay: 120ms; } .stat:nth-child(4) { animation-delay: 180ms; }
.stat .k { font-size: 13px; color: var(--muted); }
.stat .v { font: 650 30px/1.05 var(--sans); margin-top: 8px; }
.stat .s { font-size: 12px; color: var(--muted); margin-top: 6px; }
.stat.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); border-width: 2px; padding: 17px; }
.stat.warn .k, .stat.warn .s { color: var(--warn-ink); }
.stat .ok { color: var(--ok); font-weight: 600; }
.stat .bad { color: var(--warn); font-weight: 600; }

.picks { padding: 0; overflow: hidden; }
.picks-head { padding: 18px 22px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }
.picks-head h2 { margin: 0; font: 650 19px var(--display); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.pick { padding: 18px 22px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 12px 16px; animation: rise var(--med) var(--ease) both; }
.pick:first-of-type { border-top: 0; }
.pick-main { flex: 1 1 280px; min-width: 0; display: flex; gap: 14px; }
.pick-text { min-width: 0; }
.pick-cat { font-size: 12px; color: var(--muted); }
.pick-name { font-size: 17px; font-weight: 600; margin-top: 1px; }
.pick-name a { color: var(--text); text-decoration: none; }
.pick-name a:hover { color: var(--accent-ink); text-decoration: underline; }
#plan-result { display: flex; flex-direction: column; gap: 16px; }
#plan-result[hidden] { display: none; }
.caps { margin-top: 14px; }
.pick-why { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.pick-runner { font-size: 13px; color: var(--muted); margin-top: 10px; }
.pick-weighed { font-size: 13px; color: var(--text-2); margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line); }
.ranking-note { margin: 14px 0 0; font-size: 13px; }
.q-list { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 14px; font-size: 14px; line-height: 1.5; }
.q-list .hint { margin-top: 4px; }
.q-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.q-field { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.q-field input, .q-field select { width: 150px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: 14px var(--sans); }
.questions-form .btn { margin-top: 16px; }
.pick-cost { text-align: right; flex: 0 0 auto; }
.pick-cost .now { font-size: 18px; font-weight: 600; }
.pick-cost .later { font-size: 12px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 12px; font-weight: 500; border-radius: 999px; padding: 3px 10px; }
.chip.met { color: var(--ok); background: var(--ok-soft); }
.chip.higher_tier { color: var(--info); background: var(--info-soft); }
.chip.missing { color: var(--warn); background: var(--warn-soft); }
.note { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.note strong { color: var(--text); }
.preview-line { font-size: 13px; color: var(--muted); margin: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 500; padding: 8px; }
td { padding: 11px 8px; border-top: 1px solid var(--line-2); }
td.num, th.num { text-align: right; }
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 520px; }

.bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; height: 220px; border-bottom: 1px solid var(--line); padding: 0 8px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bar .val { font-size: 13px; font-weight: 600; }
.bar .fill { width: 100%; max-width: 88px; background: linear-gradient(180deg, var(--sky-2), var(--accent)); border-radius: 10px 10px 2px 2px; transform-origin: bottom; animation: grow var(--slow) var(--ease) both; }
@keyframes grow { from { transform: scaleY(0); } }
.bar-labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 8px 8px 0; font-size: 12px; color: var(--muted); text-align: center; }

/* A plan's cost as it grows: the plan's pick per category, each swappable, over a ruled table. */
.plan-cost .cost-head { align-items: flex-start; }
.plan-cost .cost-head .hint { margin: 4px 0 0; max-width: 62ch; }
.plan-cost-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px 16px; margin: 4px 0 20px; }
.plan-cost-picks label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.plan-cost-picks select { width: 100%; min-height: 38px; font-size: 14px; }
.plan-cost-out { transition: opacity var(--fast) var(--ease); }
.plan-cost-out[aria-busy="true"] { opacity: .55; }
.plan-cost-table th:first-child, .plan-cost-table td:first-child { white-space: nowrap; }
.plan-cost-table tfoot :is(th, td) { padding-block: 14px; border-top: 1px solid var(--text); border-bottom: 0; font-size: 14px; color: var(--text); }
.plan-cost .caveats { margin-top: 14px; }
.plan-cost-sources { margin-top: 16px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
.sources { font-size: 13px; color: var(--muted); }
.sources ul { margin: 6px 0 0; padding-left: 18px; }
.caveats { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-2); }
.copy-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
code { font: 500 13px ui-monospace, 'SF Mono', Menlo, monospace; }
.copy-row code { flex: 1 1 260px; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; word-break: break-all; }
pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; overflow-x: auto; margin: 0; }
.examples { margin: 0; padding-left: 18px; color: var(--text-2); }
.error { color: var(--warn); }
.card.error { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* Save box: Saving, then Saved */
.save-box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; transition: border-color var(--med) var(--ease); }
.save-box[data-save="busy"] { border: 2px solid var(--accent); padding: 21px; }
.save-box > div { flex: 1 1 220px; min-width: 0; }
.save-box label { margin-top: 0; }
.save-box .hint { flex-basis: 100%; margin: 0; }
/* Save beside the page's other actions (Your Stack's Save and Copy Link), no card of its own. */
/* Field, link, Save on one row; the width is set because a wrapping flex box reports too small a content width. */
.save-inline { justify-content: flex-end; align-items: center; gap: 8px; width: 420px; max-width: 100%; }
.save-inline > div { flex: 0 1 auto; width: 300px; max-width: 100%; min-width: 0; }
.save-inline input { text-overflow: ellipsis; }
.save-box.save-inline[data-save="busy"] { border: 0; padding: 0; }
.save-inline > .save-status:empty { display: none; }
@media (max-width: 720px) {
  .result-head .result-actions, .save-inline { width: 100%; justify-content: flex-start; }
  .save-inline > div { flex: 1 1 0; width: auto; max-width: none; }
}
.save-status { display: inline-flex; align-items: center; gap: 6px; }
.check { width: 16px; height: 16px; flex: none; }
.check path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw 420ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Loading: a light line that rolls while work goes on. */
.loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px; color: var(--muted); text-align: center; }
.loading .bars-anim { display: flex; align-items: flex-end; gap: 6px; height: 40px; }
.loading .bars-anim span { width: 10px; border-radius: 4px; background: linear-gradient(var(--sky-2), var(--accent)); animation: barLoop 1.2s var(--ease) infinite; }
.loading .bars-anim span:nth-child(2) { animation-delay: .15s; } .loading .bars-anim span:nth-child(3) { animation-delay: .3s; } .loading .bars-anim span:nth-child(4) { animation-delay: .45s; }
@keyframes barLoop { 0%, 100% { height: 10px; } 50% { height: 40px; } }
.loading .line { min-height: 22px; animation: rise var(--med) var(--ease); }

/* Toasts, top centre, one action each. */
.toasts { position: fixed; left: 50%; top: 84px; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: #0F172A; color: #FFFFFF; box-shadow: var(--shadow-3); font-size: 14px; pointer-events: auto; animation: toastIn 420ms var(--spring) both; }
.toast.out { animation: toastOut 260ms var(--ease) forwards; }
.toast button, .toast a { min-height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.16); color: #FFFFFF; font: 600 13px var(--sans); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.toast .x { background: transparent; padding: 0 8px; color: rgba(255,255,255,.75); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* Tooltips for icon-only and one-word controls */
.tip { position: fixed; z-index: 60; padding: 6px 10px; border-radius: 8px; background: #0F172A; color: #FFFFFF; font-size: 12px; font-weight: 500; pointer-events: none; max-width: 260px; animation: rise var(--fast) var(--ease); }

.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 40px 16px 48px; margin-top: 40px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.footer a { color: var(--muted); }
.footer .made { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--text-2); }

/* Connect AI setup list and legal pages */
.setup { margin: 0; display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 8px 16px; }
.setup dt { font-weight: 600; }
.setup dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .setup { grid-template-columns: 1fr; } .setup dd { margin-bottom: 8px; } }
.legal { max-width: 760px; padding-top: 40px; padding-bottom: 40px; }
.legal h1 { margin: 0 0 6px; }
/* One sheet, read top to bottom: sections split by a rule, not boxed one by one. */
.legal-sheet { margin-top: 24px; padding: clamp(22px, 4vw, 40px); }
.legal pre { overflow-x: auto; padding: 12px 14px; background: var(--surface-2); border-radius: 8px; font-size: 13px; }
.legal-sheet section + section { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.legal-sheet h2 { margin: 0 0 12px; font: 650 19px/1.25 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.legal-sheet :is(p, li) { max-width: 68ch; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.legal-sheet strong { color: var(--text); }
.legal-sheet p { margin: 0 0 14px; }
.legal-sheet :is(p, ul):last-child { margin-bottom: 0; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin: 8px 0; }
.legal li::marker { color: var(--muted); }
.legal-foot { max-width: 760px; margin-top: 0; padding-inline: 16px; }
@media (min-width: 720px) { .legal-foot { padding-inline: 32px; } }
@media (min-width: 1280px) { .legal-foot { padding-inline: 48px; } }

/* Account */
.account-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 4px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: rgba(255,255,255,.14); color: var(--on-sky); font: 500 14px var(--sans); cursor: pointer; transition: background var(--fast) var(--ease); }
.account-chip:hover { background: rgba(255,255,255,.26); }
.topbar .account-chip { border-color: var(--line); background: var(--surface); color: var(--text); }
.account-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8CC8FF, var(--accent)); color: #FFFFFF; font-weight: 600; font-size: 14px; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 56px; height: 56px; font-size: 22px; }
.stack-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 48px; }
.stack-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; animation: rise var(--med) var(--ease) both; }
.stack-item.leaving { animation: leave var(--med) var(--ease) forwards; }
@keyframes leave { to { opacity: 0; transform: scaleY(.6); height: 0; padding: 0; margin: -6px 0; } }
.stack-item h2 { margin: 0 0 4px; font: 650 19px/1.15 var(--display); overflow-wrap: anywhere; }
.stack-item .costs { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.stack-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.changes { flex-basis: 100%; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.changes ul { margin: 6px 0 0; padding-left: 18px; }
.profile { display: flex; align-items: center; gap: 16px; }
.profile h2 { margin: 0; font: 650 21px var(--display); }
.account-grid { display: flex; flex-direction: column; gap: 16px; padding-bottom: 48px; max-width: 760px; }
.danger-zone { border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.danger-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.danger-row > div { flex: 1 1 220px; min-width: 0; }

/* Settings, laid out like Light-Lux's: sections of ruled rows, what it is on the left and the control on
   the right; a setting saves as it's pressed and says Saving, then Saved, beside its label. */
.set-page { display: flex; flex-direction: column; gap: 36px; max-width: 860px; padding-bottom: 56px; }
.set-section { display: flex; flex-direction: column; gap: 12px; }
.set-head { margin: 0; font: 650 20px/1.2 var(--display); letter-spacing: var(--display-tracking); }
.set-card { padding: 0; overflow: hidden; }
.set-row { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: start; gap: 10px 36px; padding: 20px 24px; }
.set-row + .set-row { border-top: 1px solid var(--line-2); }
.set-row-wide > .email-preview { grid-column: 1 / -1; }
.set-empty { grid-template-columns: minmax(0, 1fr); }
.set-label { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 10px; min-width: 0; }
.set-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.set-label > p { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.set-control { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.set-control-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; }
.set-control-stack .email-form { width: 100%; flex: none; }
.set-control-stack .hint { margin: 0; display: flex; align-items: center; gap: 6px; }
.set-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; max-width: 100%; }
.set-note { margin: 0; color: var(--text-2); }
.set-fine { margin: -24px 0 0; }
.set-status { min-height: 22px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.set-status[data-state="saving"] { color: var(--accent-ink); }
.set-status[data-state="saved"] { color: var(--ok); }
.set-status[data-state="error"] { color: var(--warn); }
.set-status .check { width: 14px; height: 14px; }
.set-status .link-btn { font-size: 12px; color: inherit; }
.profile-name { display: block; font: 650 19px/1.2 var(--display); }
.alert-email { margin: 0; overflow-wrap: anywhere; }
.alert-email .ok { color: var(--ok); font-weight: 600; }
.alert-email .bad { color: var(--warn); font-weight: 600; }
.set-value { color: var(--text); overflow-wrap: anywhere; }
/* On · Off: the picked side fills; the group's edge turns blue while it saves, warm while it failed. */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.segmented button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; transition: background var(--med) var(--spring), color var(--fast) var(--ease); }
.segmented button:not([aria-checked="true"]):hover { color: var(--text); }
.segmented button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 114, 214, .3); }
.segmented[data-save="saving"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.segmented[data-save="error"] { border-color: var(--warn); }
.email-preview { border-top: 1px solid var(--line-2); padding-top: 16px; animation: rise var(--med) var(--ease) both; }
.email-subject { margin: 0 0 8px; font-weight: 600; }
.email-body { margin: 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); font: 13px/1.6 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
/* Delete Account, apart from everything else at the end, ruled above. No box. */
.set-danger { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.set-danger .set-head { color: var(--warn-ink); }
.set-danger-note { margin: 0 0 8px; color: var(--text-2); font-size: 14px; }
@media (max-width: 720px) {
  .set-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  .set-page { gap: 28px; }
}

/* Browse vendors, vendor detail and MCP settings */
.browse-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 12px; }
.browse-bar .search { flex: 1 1 320px; }
/* Vendors: how much pricing detail a service has. One dot colour per depth, on the switch, cards and pages. */
.depth-segs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); }
.depth-seg { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.depth-seg:hover { color: var(--text); }
.depth-seg[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); }
.depth-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.depth-engine { background: var(--ok); }
.depth-researched { background: var(--accent); }
.depth-candidate { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.depth-segs:empty { display: none; }
/* Sorts on the left, the view (Services, Companies, Products) on the right, one rule under both. */
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.list-head .sort-tabs { border-bottom: 0; margin-bottom: -1px; flex: 1 1 auto; min-width: 0; }
.view-segs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 6px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); }
.view-seg { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 13px var(--sans); cursor: pointer; }
.view-seg:hover { color: var(--text); }
.view-seg[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); }
.vendor-grid[data-view="companies"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: start; }
.vendor-grid[data-view="products"] { display: block; }
.company-card { padding: 18px 20px; }
/* Types: the landing view, every type of service under its group. */
.vendor-grid[data-view="types"] { display: block; }
.type-group + .type-group { margin-top: 28px; }
.type-group-title { margin: 0 0 12px; font-size: 13px; font-family: var(--sans); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.type-tile { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color var(--fast) var(--ease), box-shadow var(--med) var(--ease); }
.type-tile:hover, .type-tile:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-2); }
.type-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.type-head h3 { margin: 0; font-size: 16px; font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }
.type-marks { display: flex; gap: 6px; }
.type-marks .vendor-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.type-tile .hint { margin: 0; font-size: 13px; }
.type-full { display: inline-flex; align-items: center; gap: 6px; margin: auto 0 0; font-size: 12px; color: var(--ok); font-weight: 550; }
.vendor-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; }
.vendor-context[hidden] { display: none; }
.vendor-context h2 { margin: 0; font-size: 24px; }
.vendor-context p { margin: 2px 0 0; }
.company-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.company-head h2 { margin: 0; font-size: 18px; }
.company-head .hint { margin: 2px 0 0; }
.company-services { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.company-services li + li { border-top: 1px solid var(--line-2); }
.company-services a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 4px; color: var(--text); text-decoration: none; }
.company-services a:hover .cs-name, .company-services a:focus-visible .cs-name { color: var(--accent-ink); text-decoration: underline; }
.company-services .grow { display: flex; flex-direction: column; min-width: 0; }
.cs-name { font-weight: 550; }
.company-services .hint { font-size: 12px; }
.cs-price { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.company-services .vendor-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.products-view { padding: 8px 22px; }
.pr-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); text-decoration: none; }
.pr-name:hover { color: var(--accent-ink); text-decoration: underline; }
.depth-note { margin: -4px 0 12px; }
.depth-note[hidden] { display: none; }
.facts-top .listed-date { color: var(--accent-ink); font-weight: 500; }
.vendor-preview.facts.listed .facts-includes { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.vendor-preview.facts.listed .preview-price { font-size: 20px; }
.vendor-card .vendor-preview.facts.candidate { background: var(--surface-2); border-style: dashed; }
.depth-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: -8px 0 20px; padding: 14px 18px; border-radius: var(--r); background: var(--accent-soft); }
.depth-callout-candidate { background: var(--surface-2); }
.depth-callout p { margin: 2px 0 0; font-size: 14px; }
.depth-callout .depth-dot { align-self: flex-start; margin-top: 7px; }
.alternatives { margin: 32px 0 48px; }
.alt-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.alt-head h2 { margin: 0; font-size: 20px; }
.alt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.alt-list a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 500; transition: border-color var(--fast) var(--ease); }
.alt-list a:hover, .alt-list a:focus-visible { border-color: var(--accent); }
.alt-list .vendor-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
@media (max-width: 560px) {
  .depth-segs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: var(--r); }
  .depth-seg { justify-content: center; padding: 0 8px; font-size: 13px; }
}
/* Page search boxes: lighter than the page and its cards, with a firmer edge and a soft lift, so they read
   as the place to start, the way Plan's ask box does. One style on every page. */
.search { display: block; max-width: 560px; }
.search input {
  min-height: 48px; padding: 0 18px 0 46px; border-radius: 999px;
  border-color: color-mix(in srgb, var(--line) 80%, var(--text) 20%);
  background: color-mix(in srgb, var(--surface) 90%, #FFFFFF 10%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") no-repeat 17px center / 18px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .06);
  font-size: 15px;
}
.search input::placeholder { color: var(--muted); }
.search input:hover { border-color: color-mix(in srgb, var(--line) 55%, var(--text) 45%); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 18px rgba(15, 23, 42, .06); }
/* Pages under a long list (pager in app.js). */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 24px 0 8px; }
.pager-nums { display: flex; align-items: center; gap: 4px; }
.pager-num { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text-2); font: 500 14px var(--sans); cursor: pointer; }
.pager-num:hover { border-color: var(--line); background: var(--surface); color: var(--text); }
.pager-num[aria-current="page"] { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.pager-gap { color: var(--muted); padding: 0 2px; }
.pager-step:disabled { opacity: .45; cursor: default; }
.pager-count { flex-basis: 100%; text-align: center; }
/* Long tables (enhanceTable in app.js): headings that sort, and a box that filters the rows. */
.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.th-sort:hover { color: var(--text); }
.th-arrow::after { content: '↕'; font-size: 11px; opacity: .35; }
th[aria-sort="ascending"] .th-arrow::after { content: '↑'; opacity: 1; }
th[aria-sort="descending"] .th-arrow::after { content: '↓'; opacity: 1; }
th:is(.num, [class*="num"]) .th-sort { flex-direction: row-reverse; }
.table-filter { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.table-filter .search { flex: 0 1 320px; }
.search-sm input { min-height: 38px; font-size: 14px; }
.table-none { margin: 12px 0 0; }
.reqs-search { display: block; max-width: 320px; margin: 4px 0 10px; }
.reqs-search[hidden] { display: none; }
.sort-tabs, .subtabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.sort, .subtab { flex: none; min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 500 14px var(--sans); cursor: pointer; margin-bottom: -1px; transition: color var(--fast) var(--ease), border-color var(--med) var(--ease); }
.sort[aria-pressed="true"], .subtab[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.vendor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; padding-bottom: 48px; }
.vendor-card { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.vendor-preview { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--sky-4), var(--surface)); border: 1px solid var(--line-2); transition: border-color var(--fast) var(--ease), box-shadow var(--med) var(--ease); }
.vendor-card:hover .vendor-preview, .vendor-card:focus-visible .vendor-preview { border-color: var(--accent); box-shadow: var(--shadow-2); }
.badge { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.preview-price { font: 650 24px/1.1 var(--sans); }
.preview-sub { color: var(--muted); font-size: 13px; }
.vendor-meta { display: flex; align-items: center; gap: 12px; }
.vendor-name { font-weight: 600; }
.vendor-mark { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; font: 600 14px var(--sans); background: var(--accent-soft); color: var(--accent-ink); }
.vendor-mark.xl { width: 72px; height: 72px; border-radius: 20px; font-size: 24px; }
.cat-database, .cat-ai { background: var(--info-soft); color: var(--info); }
.cat-auth, .cat-edge { background: var(--warn-soft); color: var(--warn-ink); }
.cat-email, .cat-app_store { background: var(--line-2); color: var(--text-2); }
.cat-payments, .cat-observability { background: var(--ok-soft); color: var(--ok); }
.back-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 40px; color: var(--muted); text-decoration: none; font-size: 14px; }
.vendor-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 8px 0 28px; }
.vendor-hero h1 { margin: 0; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0; }
.meta-row dt { color: var(--muted); font-size: 13px; }
.meta-row dd { margin: 2px 0 0; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vendor-tab-body { display: flex; flex-direction: column; gap: 16px; padding-bottom: 48px; }
.plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-head h2 { margin: 0; font: 650 19px var(--display); }
.plan-price { font-size: 15px; font-weight: 600; white-space: nowrap; }
.plan-notes { font-size: 14px; color: var(--text-2); }
ul.plain { margin: 8px 0; padding-left: 18px; font-size: 14px; }
.card code { overflow-wrap: anywhere; }
.card p code + code { margin-left: 6px; }
/* Package and env names: whole tokens that wrap between, not inside, unless one is wider than the line. */
.code-list { display: flex; flex-wrap: wrap; gap: 6px; }
.code-list code { padding: 2px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 13px; line-height: 1.5; }
.cap-table td.yes { color: var(--ok); font-weight: 700; }
.cap-table td.no { color: var(--muted); }
.cost-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cost-head h2 { margin: 0; }
.cost-head select { width: auto; }
.mcp-page { display: flex; flex-direction: column; gap: 28px; max-width: 760px; padding-bottom: 48px; }
.mcp-title { font: 650 28px/1.1 var(--sans); margin: 0 0 4px; }
.preview-note { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; }
.pill { flex: none; border: 1px solid var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.section-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.connected-list { display: flex; flex-direction: column; }
.connected-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.grow { flex: 1; min-width: 0; }
/* In rows that wrap, the text column needs a real starting width: with flex: 1 alone (a basis of 0)
   Safari keeps the actions beside it and squeezes the text to a letter per line on phones. */
.stack-item > .grow, .alerts-card > .grow, .sc-hero-head > .grow { flex: 1 1 240px; }
.app-mark { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font: 600 13px var(--sans); }
.app-mark.logo { background: var(--surface); border: 1px solid var(--line); }
.menu { position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-weight: 700; color: var(--text-2); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--line-2); }
.menu-pop { position: absolute; right: 0; top: 48px; z-index: 30; min-width: 190px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3); transform-origin: top right; animation: pop var(--fast) var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
.menu-item { display: flex; align-items: center; width: 100%; min-height: 40px; text-align: left; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--text); font: 500 14px var(--sans); cursor: pointer; text-decoration: none; }
.menu-item:hover { background: var(--surface-2); color: var(--text); }
.menu-item.danger { color: var(--warn); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line-2); }
.menu-who { padding: 8px 12px 6px; font-size: 13px; color: var(--muted); }
.menu-who strong { display: block; color: var(--text); font-size: 14px; }
.account-menu .menu-pop { top: 46px; }
.account-menu summary { width: auto; height: auto; border-radius: 999px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.tool-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 108px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 14px var(--sans); cursor: pointer; transition: border-color var(--fast) var(--ease), box-shadow var(--med) var(--ease); }
.tool-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.setup-dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--modal-edge); border-radius: var(--r-xl); padding: 24px; background: var(--surface-raised); color: var(--text); box-shadow: var(--modal-shadow); }
.setup-dialog[open] { animation: dialogIn var(--med) var(--spring); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.setup-dialog::backdrop, .filters-dialog::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: scrimIn var(--med) var(--ease); }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.dialog-head h2 { margin: 0; font: 650 22px var(--display); }
.setup-dialog pre { overflow-x: auto; background: var(--surface-2); padding: 12px; border-radius: var(--r); font-size: 13px; }
.setup-dialog p { color: var(--text-2); }
.preview-plans { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 90%; margin-top: 8px; }
.preview-plans span { font-size: 11px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pricing, FAQ and vendor requests */
.pricing-hero { text-align: center; max-width: 680px; margin: 56px auto 32px; }
.pricing-hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; margin: 0 0 14px; }
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; max-width: 840px; margin: 0 auto 24px; }
.price-card { display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-1); }
.price-card.featured { border: 2px solid var(--accent); padding: 21px; box-shadow: var(--shadow-2); }
.price-name { display: flex; align-items: center; gap: 10px; }
.price-name h2 { margin: 0; font: 650 24px var(--display); }
.price-amount { display: flex; align-items: baseline; gap: 10px; }
.price-amount .big { font: 650 52px/1 var(--sans); }
.price-card .btn-wide { margin-top: 4px; }
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%230072D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat; }
/* Asking for a Showcase submission: what we want, the website field and Submit, together in one box. */
.submit-box { flex: 0 1 440px; display: grid; gap: 6px; padding: 18px 20px; }
.submit-box h2 { margin: 0; font: 650 18px var(--display); }
.submit-box p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.submit-row { display: flex; gap: 8px; }
.submit-row input { flex: 1; min-width: 0; }
.request-foot { display: flex; justify-content: center; margin: 8px 0 48px; }
.request-foot .submit-box { flex-basis: 560px; }
.request-box-status:empty { display: none; }
/* A field that has to be filled in before results can show (needField in app.js). */
.needs-input, input.needs-input:focus, textarea.needs-input:focus { border-color: var(--warn) !important; box-shadow: 0 0 0 3px var(--warn-soft) !important; }
.needs-note { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--warn-ink); }
.faq-title { text-align: center; font: 700 clamp(28px, 3.6vw, 38px) var(--sans); margin: 24px 0 24px; }
.faq { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 0 4px; }
.faq summary { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); font-size: 22px; font-weight: 300; transition: transform var(--med) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--text-2); }
.faq-more { text-align: center; margin: 24px 0 56px; }
.request-form { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.request-form h2 { margin: 0 0 8px; font: 650 24px var(--display); }
.request-form .hint { margin: 0; text-align: left; }

/* Phones: the ask box's controls take the full width, Plan last and widest. */
@media (max-width: 560px) {
  .hero { padding-top: 32px; }
  .composer { margin-top: 28px; }
  .composer-card { min-height: 0; padding: 16px; }
  .composer textarea { min-height: 110px; font-size: 16px; }
  .composer-bar .spacer { display: none; }
  .chip-field { flex: 1 1 auto; min-width: 0; }
  .chip-field input, .chip-field select { flex: 1; width: 100%; max-width: none; min-width: 0; }
  .plan-btn { flex: 1 1 100%; min-height: 46px; }
}
.menu summary.account-chip { display: inline-flex; width: auto; height: auto; min-height: 40px; place-items: center; align-items: center; border-radius: 999px; color: var(--on-sky); font-weight: 500; }
.topbar .menu summary.account-chip { color: var(--text); }
.account-menu[open] summary.account-chip { background: rgba(255,255,255,.28); }
.topbar .account-menu[open] summary.account-chip { background: var(--surface-2); }
.topbar.static { position: relative; }
.ghost-pill[aria-pressed="true"] { background: rgba(255,255,255,.3); border-color: #FFFFFF; }
.topbar .ghost-pill[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }

/* Generated art (ElevenLabs Image & Video): the sky photo and cloud loop, floating objects, feature tiles. */
.sky { background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 72%, var(--page) 100%); }
.sky-photo, .sky-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.sky-video { opacity: 0; transition: opacity 1.2s var(--ease); }
.sky-video.playing { opacity: 1; }
/* WebGL birds over the sky (public/birds.js); under the fade into the page, so they never cross the content. */
.sky-birds { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky::before { content: ''; position: absolute; inset: auto 0 0; height: 28%; z-index: 1; background: linear-gradient(transparent, var(--page)); }
body:not(.home) .sky-photo, body:not(.home) .sky-video { object-position: center 20%; }
.feature { overflow: hidden; }
.f-art { display: block; width: 40%; height: auto; margin: 0 0 18px; aspect-ratio: 4 / 3; object-fit: contain; }

/* ---------- In the app: no sky, a flat page, blue for actions and one warm complement. ----------
   body.app is set once someone is signed in, has a plan on screen, or is on any page but the homepage. */
body.app {
  --page: #FAFAF8; --surface: #FFFFFF; --surface-2: #F4F4F1; --line: #E6E5E0; --line-2: #EFEEEA;
  --text: #18181B; --text-2: #3F3F46; --muted: #63636B;
  --warm: #C2560D; --warm-soft: #FDF0E6;
  --shadow-1: none; --shadow-2: 0 1px 2px rgba(24, 24, 27, .06); --shadow-3: 0 8px 24px rgba(24, 24, 27, .08);
}
body.app .sky { display: none; }
body.app .topbar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--line); }
body.app .btn-primary { box-shadow: none; }
body.app .hero { color: var(--text); padding: 48px 0 8px; }
body.app .hero h1 { font-size: clamp(30px, 4vw, 40px); text-shadow: none; margin-bottom: 10px; }
body.app .hero .lede { color: var(--muted); font-size: 16px; }
body.app .composer { background: transparent; padding: 0; box-shadow: none; margin-top: 28px; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.app .composer-card { border: 1px solid var(--line); box-shadow: none; min-height: 168px; }
body.app .composer-card:focus-within { border-color: var(--accent); }
body.app .composer-status { color: var(--muted); }
body.app .example { background: var(--surface); border: 1px solid var(--line); box-shadow: none; color: var(--text-2); }
body.app .example:hover { border-color: var(--accent); color: var(--accent-ink); }
body.app .home-more .section-head, body.app .home-more .feature-grid { display: none; }
/* Signed in, the Showcase spotlight keeps a compact heading, sized like Your Stacks. */
body.app .home-more .spotlight .section-head { display: block; margin: 56px 0 16px; }
body.app .spotlight .section-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.005em; }
body.app .spotlight .section-head .muted { display: none; }
body.app .home-more { padding-top: 40px; }
body.app .welcome, body.app .recent-card, body.app .card { box-shadow: none; }
body.app .page-head { margin-top: 40px; }
body.app .vendor-preview { background: var(--surface-2); border-color: var(--line-2); }
body.app .bar .fill { background: var(--accent); }
body.app .stat.warn { border-color: var(--warm); }
body.app .stat.warn .k, body.app .stat.warn .s { color: var(--warm); }
body.app .stat .bad, body.app .chip.missing { color: var(--warm); }
body.app .chip.missing { background: var(--warm-soft); }
body.app .step .n { border-color: var(--line); }
body.app .welcome { border: 1px solid var(--line); }

/* The mascot: feature tiles, category pictures, empty states. */
.f-art { object-fit: contain; }
/* Empty states (emptyState() in app.js): Kong, or an object from the same set, doing something about
   the empty spot, then a Title Case line, the sentence and the next step. Centred in a card, or
   compact (small picture beside the words) inside a settings row or an admin table. */
.kr-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 36px; color: var(--muted); }
.kr-empty-art { position: relative; width: 132px; height: 132px; margin-bottom: 12px; flex: none; }
.kr-empty-art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
/* The shadow it lands on: a soft ellipse, offset down, that grows as the picture arrives. */
.kr-empty-shadow { position: absolute; left: 50%; bottom: 2px; width: 72%; height: 14px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 47, 95, .2), rgba(2, 47, 95, 0)); }
.kr-empty-words { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 46ch; }
.kr-empty-title { color: var(--text); font: 650 20px/1.2 var(--display); letter-spacing: var(--display-tracking); text-wrap: balance; }
.kr-empty-text { margin: 0; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.kr-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.kr-empty.compact { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 4px 0; }
.kr-empty.compact.card { padding: 16px 20px; }
.kr-empty.compact .kr-empty-art { width: 64px; height: 64px; margin: 0; }
.kr-empty.compact .kr-empty-shadow { height: 8px; bottom: 1px; }
.kr-empty.compact .kr-empty-words { align-items: flex-start; gap: 2px; max-width: 60ch; }
.kr-empty.compact .kr-empty-title { font: 600 15px/1.35 var(--sans); letter-spacing: 0; }
.kr-empty.compact .kr-empty-text { font-size: 14px; }
.kr-empty.compact .kr-empty-actions { justify-content: flex-start; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  /* Characters peek up from behind the floor of their box; objects drop in and settle. */
  .kr-empty.act-peek .kr-empty-art img, .kr-empty.act-look .kr-empty-art img { animation: kr-peek 680ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  /* The magnifier Kong then glances left and right, once. */
  .kr-empty.act-look .kr-empty-art img { transform-origin: 50% 88%; animation: kr-peek 680ms cubic-bezier(0.16, 1, 0.3, 1) both, kr-look 1100ms 620ms cubic-bezier(0.65, 0, 0.35, 1); }
  .kr-empty.act-drop .kr-empty-art img { transform-origin: 50% 100%; animation: kr-drop 620ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .kr-empty .kr-empty-shadow { animation: kr-shadow 620ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .kr-empty-words > * { animation: kr-rise 460ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .kr-empty-words > :nth-child(1) { animation-delay: 220ms; }
  .kr-empty-words > :nth-child(2) { animation-delay: 290ms; }
  .kr-empty-words > :nth-child(3) { animation-delay: 360ms; }
  .kr-empty.compact .kr-empty-words > * { animation-duration: 340ms; }
  /* Back within a few seconds (a search still finding nothing as you type): no second entrance. */
  .kr-empty.still .kr-empty-art img, .kr-empty.still .kr-empty-shadow, .kr-empty.still .kr-empty-words > * { animation: none; }
  /* A little hop toward the pointer. */
  .kr-empty-art img { transition: translate 260ms cubic-bezier(0.16, 1, 0.3, 1); }
  @media (hover: hover) {
    .kr-empty:hover .kr-empty-art img { translate: 0 -5px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .kr-empty:not(.still) .kr-empty-art, .kr-empty:not(.still) .kr-empty-words { animation: kr-fade 240ms ease both; }
}
@keyframes kr-peek { from { transform: translateY(42%); clip-path: inset(0 0 42% 0); } to { transform: none; clip-path: inset(0); } }
@keyframes kr-look { 0%, 100% { rotate: 0deg; } 30% { rotate: -7deg; } 65% { rotate: 6deg; } }
@keyframes kr-drop { 0% { opacity: 0; transform: translateY(-30px); } 55% { opacity: 1; transform: translateY(3px) scale(1.04, .95); } 100% { transform: none; } }
@keyframes kr-shadow { from { opacity: 0; transform: scale(.3); } }
@keyframes kr-rise { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
@keyframes kr-fade { from { opacity: 0; } }
.vendor-mark { position: relative; overflow: hidden; }
.vendor-mark.has-logo { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.vendor-mark img { width: 72%; height: 72%; object-fit: contain; }
.pick-cat img { width: 22px; height: 22px; vertical-align: -6px; margin-right: 4px; }
.preview-logo { width: 64px; height: 64px; object-fit: contain; margin-bottom: 8px; border-radius: 14px; }

/* Browse: each vendor's card is its facts, not a picture. */
.vendor-preview.facts { aspect-ratio: auto; align-items: stretch; justify-content: flex-start; gap: 12px; padding: 18px; text-align: left; background: var(--surface); border-color: var(--line); }
.facts-top { display: flex; align-items: center; gap: 12px; }
.facts-top .badge { position: static; flex: none; align-self: flex-start; }
.facts-top .vendor-name { line-height: 1.25; }
.facts-price { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; }
.facts-price .preview-price { font-size: 24px; letter-spacing: -0.02em; }
.facts-includes { margin: -6px 0 0; font-size: 14px; color: var(--text-2); min-height: 2.9em; }
.facts-ladder { display: flex; flex-wrap: wrap; gap: 6px; }
.facts-ladder span { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.facts-ladder b { font-weight: 600; color: var(--text-2); }
.facts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line-2); }
.facts-row dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.facts-row dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.facts-row dd.perk { color: var(--ok); }
.lock { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.lock-low { background: var(--ok); }
.lock-medium { background: #D69E2E; }
.lock-high { background: var(--warm, var(--warn)); }
.vendor-card:hover .vendor-preview.facts { border-color: var(--accent); }
.vendor-card { height: 100%; }
.vendor-card .vendor-preview.facts, body.app .vendor-preview.facts { flex: 1; background: var(--surface); border-color: var(--line); }
.facts-top .hint { margin-top: 2px; }
.facts-top .checked { color: var(--ok); font-weight: 500; }
.facts-top .unchecked { color: var(--warm, var(--warn)); font-weight: 500; }
.facts-top .vendor-mark { width: 44px; height: 44px; border-radius: 12px; }
.facts-top .checked, .facts-top .unchecked, .facts-top .listed-date, .facts-row dd { white-space: nowrap; }

/* ---------- Filters (Juicebox's pattern): pills over the results, a popover per pill, one dialog for all ---------- */
.filter-bar { position: sticky; top: 72px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; padding: 10px 0; background: var(--page); border-bottom: 1px solid var(--line-2); }
.fpill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.fpill:hover { border-color: var(--accent); color: var(--text); }
.fpill.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.fpill[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fpill .caret { font-size: 10px; opacity: .7; }
.fbar-status { flex: 1; min-width: 0; }
/* Plan's bar stays on one line: four pills and More, with a long app type cut short. */
#filter-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#filter-bar .fpill > span:first-child { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.fbar-more { color: var(--text); padding: 0 10px; }
.fbar-more-ico { width: 15px; height: 15px; }
.fl-pop { position: fixed; z-index: 40; max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--modal-edge); border-radius: 16px; box-shadow: var(--shadow-3), 0 12px 40px rgba(15, 23, 42, .14); transform-origin: top left; animation: pop var(--fast) var(--ease); }
.fl-pop-body { position: relative; overflow: auto; padding: 16px 18px 6px; }
.fl-pop-body .fl-sec { padding: 0; border: 0; }
.fl-pop-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-2); }
.fl-pop-status { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.fl-pop-foot .btn { min-height: 36px; }
.filters-dialog { width: min(980px, calc(100vw - 32px)); height: min(720px, calc(100vh - 48px)); padding: 0; border: 1px solid var(--modal-edge); border-radius: 18px; background: var(--surface-raised); color: var(--text); box-shadow: var(--modal-shadow); overflow: hidden; }
.filters-dialog[open] { display: flex; animation: dialogIn var(--med) var(--spring); }
.filters-dialog form { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.fl-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--modal-edge); background: var(--surface-raised); }
.fl-head h2 { margin: 0; font-size: 17px; }
.fl-live { flex: 1; display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fl-body { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; }
.fl-nav { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-right: 1px solid var(--modal-edge); background: var(--surface-2); overflow: auto; }
.fl-nav input { min-height: 38px; border-radius: 10px; font-size: 14px; }
.fl-nav-list { display: flex; flex-direction: column; gap: 2px; }
.fl-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: 500 14px var(--sans); text-align: left; cursor: pointer; }
.fl-nav-item:hover { background: var(--line-2); }
.fl-nav-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.fl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
/* position: the chips' hidden checkboxes are absolutely positioned; without a positioned ancestor here they
   are laid out against the dialog, stretch its scroll area, and a jump to a section scrolls the whole dialog. */
.fl-pane { position: relative; overflow: auto; padding: 4px 24px 40px; scroll-behavior: smooth; }
.fl-sec { padding: 20px 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: 8px; }
.fl-sec h3 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
.fl-sec-head { display: flex; justify-content: space-between; align-items: baseline; }
.fl-sec label { margin-top: 8px; }
.fl-sec .btn { margin-top: 10px; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: stretch; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; overflow: hidden; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.fchip[hidden] { display: none; }
.fchip-main { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 10px 7px 12px; color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer; }
.fchip-mark::before { content: '+'; color: var(--muted); font-weight: 600; }
.fchip-src { color: var(--accent); font-weight: 700; }
.fchip:has(.cap-must:checked) { background: var(--accent-soft); border-color: transparent; }
.fchip:has(.cap-must:checked) .fchip-main { color: var(--accent-ink); }
.fchip:has(.cap-must:checked) .fchip-mark::before { content: '✕'; color: var(--accent-ink); font-size: 11px; }
.fchip:has(.cap-must:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fchip-nice { display: none; align-items: center; margin: 0; padding: 0 10px; border-left: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); font-size: 12px; font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.fchip:has(.cap-must:checked) .fchip-nice { display: inline-flex; }
.fchip-nice .nice { display: none; }
.fchip-nice:has(input:checked) .must { display: none; }
.fchip-nice:has(input:checked) .nice { display: inline; color: var(--warm, var(--warn)); }
.fchip-nice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.plan-body .col-main { gap: 16px; }
#plan-result { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1200px) { .q-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (max-width: 720px) {
  .filter-bar { top: 112px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 10px 16px; }
  .fbar-status { display: none; }
  .fl-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .fl-nav { border-right: 0; border-bottom: 1px solid var(--line-2); padding: 10px 16px; overflow: visible; }
  .fl-nav-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .fl-nav-item { flex: none; border: 1px solid var(--line); border-radius: 999px; min-height: 34px; }
  .fl-head h2 { display: none; }
  .fl-pane { padding: 0 16px 32px; }
  .filters-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
}
@media (max-width: 720px) {
  .fl-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto !important; max-height: 78vh; border-radius: 18px 18px 0 0; transform-origin: bottom center; animation: sheetUp var(--med) var(--ease); }
  @keyframes sheetUp { from { transform: translateY(100%); } }
}
.fl-sec.cap-group h3 { margin: 0 0 10px; font-size: 15px; font-weight: 650; color: var(--text); text-transform: none; letter-spacing: -0.015em; }
.fl-pop .fl-clear { display: none; }

/* A service's products table (its page, and the All Products tab of a vendor priced in full) */
.directory-card { padding: 18px 22px; }
.directory-table th { padding-top: 4px; padding-bottom: 6px; }
.directory-table td { padding-top: 10px; padding-bottom: 10px; line-height: 1.5; }
.directory-table td .small { margin-top: 2px; line-height: 1.5; }
.directory-card td { vertical-align: top; }
.directory-card .small, .directory-caveats { font-size: 13px; }
.directory-caveats { color: var(--warn-ink); margin: 10px 0 0; padding-left: 18px; }
.directory-card > p.small { margin: 8px 0 0; }
.directory-table table { table-layout: fixed; }
.directory-table th:first-child { width: 44%; }
.directory-card td { overflow-wrap: anywhere; }
/* Phones: each product becomes a small stack of labelled rows instead of a wide table. */
@media (max-width: 640px) {
  .directory-table thead { display: none; }
  .directory-table tr, .directory-table td { display: block; }
  .directory-table tr { border-top: 1px solid var(--line-2); padding: 10px 0; }
  .directory-table td { border: 0; padding: 2px 0; }
  .directory-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
}

/* ---------- Audit: an app that's already built ---------- */
.link-on-sky { border: 0; background: none; padding: 6px 4px; color: var(--on-sky); font: 600 15px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.5); }
body.app .link-on-sky { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.audit-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 48px; }
@media (min-width: 1100px) { .audit-cols { grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); } .audit-report { position: sticky; top: 88px; max-height: calc(100vh - 100px); overflow: auto; } }
.audit-steps { display: flex; flex-direction: column; gap: 16px; }
.audit-step h2 { margin: 0; font-size: 18px; }
.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
.step-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.step-foot .hint { flex: 1; margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); margin-bottom: 14px; }
.seg-btn { min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; }
.seg-btn[aria-selected="true"], .seg-btn[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.seg-sm { margin: 0; flex-wrap: wrap; }
.seg-sm .seg-btn { min-height: 30px; padding: 0 10px; font-size: 13px; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 22px 16px; border: 1.5px dashed var(--line); border-radius: 14px; text-align: center; color: var(--muted); cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.drop strong { color: var(--text); font-size: 15px; }
.drop span { font-size: 13px; max-width: 360px; }
.drop.over, .drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.drop:focus-within { border-color: var(--accent); }
.drop-actions { display: flex; gap: 8px; margin-top: 6px; }
.drop-actions .btn { min-height: 36px; }
.audit-summary { margin: -4px 0 12px; color: var(--text-2); }
.audit-stack { display: flex; flex-direction: column; }
.stack-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.stack-row:first-child { border-top: 0; }
.stack-row select { width: 180px; min-height: 36px; font-size: 13px; padding: 4px 10px; }
.stack-row .hint { margin: 2px 0 0; overflow-wrap: anywhere; }
.stack-row-top { display: flex; align-items: center; gap: 8px; }
.conf { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: var(--surface-2); color: var(--muted); }
.conf-high { background: var(--ok-soft); color: var(--ok); }
.conf-medium { background: var(--accent-soft); color: var(--accent-ink); }
.conf-low { background: var(--warm-soft, var(--warn-soft)); color: var(--warm, var(--warn)); }
.add-row { margin-top: 10px; }
.add-row select { min-height: 38px; font-size: 14px; }
.audit-reqs { max-height: 220px; overflow: auto; padding: 2px; }
.audit-reqs .fchip-main { padding: 5px 10px; font-size: 13px; }
.priorities { display: flex; flex-direction: column; gap: 8px; }
.prio-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prio-label { font-size: 14px; font-weight: 500; }
.audit-report { display: flex; flex-direction: column; gap: 16px; }
.report-head { display: flex; align-items: center; gap: 18px; }
.report-head h2 { margin: 0 0 4px; font-size: 22px; }
.grade { display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 16px; font-size: 34px; font-weight: 800; color: #FFFFFF; letter-spacing: -0.02em; }
.grade.sm { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
.grade-A { background: #0E7A54; } .grade-B { background: #2F8F5B; } .grade-C { background: #B7791F; } .grade-D { background: #C2560D; } .grade-F { background: #B42318; }
.stat.good .v { color: var(--ok); }
.recs h2 { margin: 0 0 6px; font-size: 18px; }
.rec-list { list-style: none; margin: 0; padding: 0; counter-reset: rec; }
.rec { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--line-2); counter-increment: rec; }
.rec:first-child { border-top: 0; }
.rec::before { content: counter(rec); position: absolute; left: 0; top: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 700; }
.rec-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec p { margin: 6px 0 8px; color: var(--text-2); font-size: 14px; }
.rec-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.rec-money { font-weight: 600; color: var(--text); }
.rec-money.good { color: var(--ok); }
.urg { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.urg-act { background: var(--warm-soft, var(--warn-soft)); color: var(--warm, var(--warn)); }
.urg-plan { background: var(--accent-soft); color: var(--accent-ink); }
.urg-watch { background: var(--surface-2); color: var(--muted); }
.scorecard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.score { padding: 16px; }
.score-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.score .k { font-weight: 600; }
.score p { margin: 8px 0 4px; font-size: 14px; color: var(--text-2); }
.svc { display: flex; align-items: center; gap: 10px; }
.svc .vendor-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
.svc-table td { vertical-align: middle; }
.svc-table tr.svc-why td { border-top: 0; padding-top: 0; font-size: 13px; color: var(--muted); }
.verdict { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.v-keep { background: var(--ok-soft); color: var(--ok); }
.v-watch { background: var(--surface-2); color: var(--text-2); }
.v-optimise { background: var(--accent-soft); color: var(--accent-ink); }
.v-switch { background: var(--info-soft); color: var(--info); }
.v-fix { background: var(--warm-soft, var(--warn-soft)); color: var(--warm, var(--warn)); }
@media (max-width: 560px) { .stack-row { flex-wrap: wrap; } .stack-row > .grow { flex: 1 1 160px; } .stack-row select { width: 100%; order: 3; } }
.stack-row .grow { min-width: 0; }
.stack-row .evidence { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack-row select { width: 150px; }
.stack-row .icon-btn { min-width: 36px; min-height: 36px; }
.stack-row .vendor-mark { width: 36px; height: 36px; border-radius: 10px; }

/* ---------- The app's left sidebar (Light-Lux's pattern). The signed-out homepage keeps the top bar. ---------- */
:root { --side-w: 248px; --sidebar: #F2F1EC; }
.sidebar, .mobile-bar, .side-scrim { display: none; }
body.app .topbar { display: none; }
body.app .sidebar { display: flex; flex-direction: column; gap: 4px; position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--side-w); padding: 16px 12px 12px; background: var(--sidebar); border-right: 1px solid var(--line); overflow-y: auto; }
body.app main, body.app .footer { margin-left: var(--side-w); }
body.app .footer { width: auto; }
.side-brand { color: var(--text); padding: 4px 8px 16px; font-size: 17px; }
.side-brand:hover { color: var(--text); }
.side-brand .brand-mark, .mobile-bar .brand-mark { width: 24px; height: 38px; }
.side-nav, .side-group { display: flex; flex-direction: column; gap: 2px; }
.side-group { margin-top: 18px; }
.side-label { padding: 0 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.side-item { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: 500 14.5px var(--sans); text-align: left; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.side-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.side-item[aria-current] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.side-icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-item[aria-current] .side-icon { stroke-width: 2; }
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.side-account { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--fast) var(--ease); }
.side-account:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.side-account[aria-current] { background: var(--accent-soft); }
.side-account .grow { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-account strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-account .grow span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-pop.up { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; transform-origin: bottom left; }
.side-signin { width: 100%; }
/* Getting Started: the checklist card above the account (Juicebox's pattern). Its steps open beside
   the menu on wide screens and inside the drawer on phones. The ledger is src/checklist.ts. */
.side-checklist-slot:empty { display: none; }
.side-checklist-slot { margin-top: auto; padding-top: 12px; }
.side-checklist-slot:not(:empty) + .side-foot { margin-top: 10px; }
.side-checklist { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cl-open { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--fast) var(--ease); }
.cl-open:hover, .cl-open:focus-visible { background: var(--surface-2); }
/* The next three steps, one line each. */
.cl-next { margin: 0; padding: 0 6px 6px; list-style: none; }
.cl-line { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0 6px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font: 500 13px var(--sans); text-align: left; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.cl-line:hover, .cl-line:focus-visible { background: var(--surface-2); color: var(--text); }
.cl-dot { width: 10px; height: 10px; flex: none; border: 1.5px solid var(--line); border-radius: 50%; }
.cl-line:hover .cl-dot { border-color: var(--accent); }
.cl-line-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ring { display: none; width: 24px; height: 24px; flex: none; color: var(--accent); }
.cl-head { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.cl-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cl-title strong { font-size: 14px; font-weight: 650; color: var(--accent-ink); }
.cl-pct { font-size: 13px; font-weight: 650; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.cl-bar { display: block; height: 4px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; }
.cl-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--slow) var(--ease); }
/* Every step, in a modal (the same dialog as Edit Your Plan). */
.checklist-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 22px 20px 16px; }
.checklist-dialog .dialog-head { align-items: flex-start; }
.checklist-dialog .dialog-head h2 { font-size: 20px; line-height: 1.2; }
.checklist-dialog .dialog-head .hint { margin: 4px 0 0; }
.cl-bar-lg { margin: 6px 0 4px; }
.cl-foot { display: flex; justify-content: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.cl-foot .link-btn { font-size: 13px; color: var(--muted); }
.cl-group { margin-top: 12px; }
.cl-label { padding: 0 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cl-steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cl-step { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--fast) var(--ease); }
.cl-step:hover, .cl-step:focus-visible { background: var(--surface-2); }
.cl-check { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; flex: none; border: 1.5px solid var(--line); border-radius: 50%; color: #FFFFFF; transition: all var(--med) var(--ease); }
.cl-check .check { width: 12px; height: 12px; }
.cl-step.done .cl-check { border-color: var(--ok); background: var(--ok); }
.cl-what { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cl-what strong { font-size: 14px; font-weight: 600; }
.cl-what span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cl-step.done .cl-what strong { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.cl-go { align-self: center; color: var(--muted); opacity: 0; transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
.cl-step:hover .cl-go, .cl-step:focus-visible .cl-go { opacity: 1; transform: translateX(2px); }
/* Collapse and expand the left menu (wide screens only; phones use the slide-out drawer). */
.side-collapse { position: absolute; top: 20px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.side-collapse:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.side-collapse .side-icon { width: 18px; height: 18px; transition: transform var(--med) var(--ease); }
@media (min-width: 900px) {
  body.app .sidebar { transition: width var(--med) var(--ease), padding var(--med) var(--ease); }
  body.app main, body.app .footer { transition: margin-left var(--med) var(--ease); }
  body.app.side-collapsed { --side-w: 68px; }
  body.side-collapsed .sidebar { padding-inline: 10px; overflow-x: hidden; }
  body.side-collapsed .side-brand { justify-content: center; gap: 0; padding: 4px 0 8px; }
  body.side-collapsed .side-collapse { position: static; margin: 0 auto 10px; }
  body.side-collapsed .side-collapse .side-icon { transform: scaleX(-1); }
  body.side-collapsed .side-item { justify-content: center; padding: 0; }
  body.side-collapsed :is(.side-item span, .side-text) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.side-collapsed .side-label { height: 1px; margin: 0 8px 8px; padding: 0; overflow: hidden; color: transparent; background: var(--line); }
  body.side-collapsed .side-account { justify-content: center; padding: 6px 0; }
  body.side-collapsed .side-checklist { border-color: transparent; background: none; }
  body.side-collapsed .cl-open { justify-content: center; padding: 10px 0; }
  body.side-collapsed :is(.cl-head, .cl-next) { display: none; }
  body.side-collapsed .cl-ring { display: block; }
  body.side-collapsed .side-account .grow { display: none; }
  body.side-collapsed .side-signin { font-size: 0; padding: 0; gap: 0; }
  body.side-collapsed .side-signin svg { width: 18px; height: 18px; }
}
@media (max-width: 899px) { .side-collapse { display: none; } }
/* Sticky things sit at the top now there's no top bar. */
body.app .filter-bar { top: 0; }
body.app .audit-report, body.app .col-side { top: 16px; }
body.app .toasts { top: 16px; left: calc(50% + var(--side-w) / 2); }
body.app .page-head { margin-top: 36px; }

@media (max-width: 899px) {
  body.app main, body.app .footer { margin-left: 0; }
  body.app .mobile-bar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 25; min-height: 56px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .mobile-bar .brand { color: var(--text); font-size: 16px; }
  .mobile-bar .icon-btn { border: 0; background: none; min-width: 40px; min-height: 40px; }
  .mobile-bar .side-icon { width: 22px; height: 22px; }
  body.app .sidebar { width: min(300px, 86vw); transform: translateX(-102%); transition: transform var(--med) var(--ease); box-shadow: none; }
  body.app.side-open .sidebar { transform: none; box-shadow: var(--shadow-3); }
  body.app .side-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(10, 17, 32, .4); animation: viewIn var(--fast) var(--ease); }
  body.app .filter-bar { top: 56px; }
  body.app .toasts { left: 50%; top: 68px; }
}

/* Signed out, the Showcase and the vendor pages are pages of the public site: the app's plain page under the site's top bar, no sidebar. */
body.app.site .topbar { display: block; }
body.app.site :is(.sidebar, .mobile-bar, .side-scrim) { display: none; }
body.app.site :is(main, .footer) { margin-left: 0; }
body.app.site .filter-bar { top: 72px; }
body.app.site .toasts { top: 84px; left: 50%; }
body.app.site :is(.col-side, .audit-report) { top: 88px; }
@media (max-width: 899px) {
  body.app.site .filter-bar { top: 108px; }
}

/* Homepage: how big the catalogue is, under the prices heading */
.cb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; max-width: 760px; margin: 0 0 56px; }
.cb-stats > div { display: flex; flex-direction: column; gap: 2px; }
.cb-stats dt { order: 2; font-size: 14px; font-weight: 600; color: var(--text); }
.cb-stats dd { order: 1; margin: 0; font: 650 36px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.cb-stats span { order: 3; font-size: 13px; }
@media (max-width: 480px) { .cb-stats { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Signed-out home: every benefit on one page ---------- */
/* Sections the top bar jumps to land below the sticky bar. */
:is(#plan-title, #home-audit, #home-prices, #home-showcase, #home-free) { scroll-margin-top: 96px; }
@media (max-width: 899px) { :is(#plan-title, #home-audit, #home-prices, #home-showcase, #home-free) { scroll-margin-top: 128px; } }
body.app :is(.home-benefits, .hb-free) { display: none; }
.home-benefits { display: flex; flex-direction: column; gap: var(--home-gap); margin-top: var(--home-gap); }
.hb-panel { padding: 0; }
.hb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px clamp(48px, 6vw, 96px); }
.hb-copy h2, .hb-head h2 { margin: 0 0 16px; font: 700 clamp(28px, 3.4vw, 38px)/1.08 var(--display); letter-spacing: var(--display-tracking); text-wrap: balance; }
.hb-copy > p { margin: 0 0 24px; max-width: 52ch; color: var(--text-2); font-size: 16px; text-wrap: pretty; }
.hb-copy .checks { margin: 0 0 32px; font-size: 15px; }
.hb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#home-prices { margin-top: 56px; }
.hb-head { max-width: 640px; margin: 0 0 40px; }
.hb-head .muted { font-size: 16px; text-wrap: pretty; }
.hb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(32px, 4vw, 56px); }
.hb-pair { margin-top: 72px; }
.hb-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-card { display: flex; flex-direction: column; align-items: flex-start; padding: 0; }
.hb-card h3 { margin: 24px 0 8px; font: 650 19px/1.2 var(--display); letter-spacing: -0.015em; }
.hb-card p { margin: 0 0 20px; color: var(--text-2); font-size: 14px; text-wrap: pretty; }
.hb-card .btn { margin-top: auto; }
.hb-free { margin-top: var(--home-gap); }
.hb-free .price-amount { margin: 4px 0 14px; }
.hb-trust { margin: 0; gap: 14px; font-size: 15px; color: var(--text-2); }
@media (max-width: 960px) { .hb-split, .hb-grid, .hb-pair { grid-template-columns: minmax(0, 1fr); } }

/* Drawn previews of the real screens: decorative, in the product's own parts. */
.pv { width: 100%; padding: 16px; border-radius: var(--r); background: var(--page); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); font-size: 13px; color: var(--text-2); }
.hb-card .pv { background: var(--surface-2); border-color: transparent; box-shadow: none; }
/* Same height previews, so the headings under them line up across a row. */
@media (min-width: 961px) { .hb-grid .pv { min-height: 202px; } .hb-pair .pv { min-height: 136px; } }
.pv b { color: var(--text); font-weight: 600; }
.pv-mark { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); color: var(--accent-ink); font: 650 11px var(--sans); font-style: normal; }
.pv-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.pv-pill.ok { background: var(--ok-soft); color: var(--ok); }
.pv-pill.warn { background: var(--warn-soft); color: var(--warn-ink); }
.pv-cost { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.pv-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; color: var(--text); }
.pv-field { padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }

.pv--audit { padding: 20px; }
.pv-top { display: flex; align-items: center; gap: 12px; }
.pv-top div { display: flex; flex-direction: column; gap: 2px; }
.pv-top b { font-size: 15px; }
.pv-grade { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); font: 700 24px var(--sans); }
.pv-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 12px; }
.pv-scores span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 12px; color: var(--muted); }
.pv-scores b { font-size: 17px; }
.pv-rows, .pv-list { list-style: none; margin: 0; padding: 0; }
.pv-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.pv-rows li > span:nth-child(2) { color: var(--text); font-weight: 500; }
.pv-rows em { font-style: normal; color: var(--muted); font-weight: 400; }
.pv-rows .pv-pill { justify-self: end; }
@media (max-width: 480px) { .pv-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-rows li { grid-template-columns: auto minmax(0, 1fr) auto; } .pv-rows .pv-cost { display: none; } }

.pv-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pv-ladder span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); font-size: 12px; }
.pv-ladder span.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pv-ladder b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pv-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 14px; }
.pv-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; }
.pv-bars .b1 { height: 12%; } .pv-bars .b2 { height: 22%; } .pv-bars .b3 { height: 38%; } .pv-bars .b4 { height: 64%; } .pv-bars .b5 { height: 100%; }

.pv-list { margin-top: 10px; }
.pv-list li { display: flex; align-items: center; gap: 8px; padding: 7px 2px; color: var(--text); }
.pv-list .pv-pill { margin-left: auto; }

.pv-diff { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.pv-diff s { color: var(--muted); font-size: 15px; }
.pv-diff b { font-size: 22px; letter-spacing: -0.02em; }
.pv-diff em { font-style: normal; color: var(--muted); }
.pv--change q { display: block; margin: 10px 0 12px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface); border: 1px dashed var(--line); font-style: italic; quotes: '“' '”'; }
.pv-votes { display: flex; align-items: center; }
.pv-votes i { width: 22px; height: 22px; margin-right: -6px; border-radius: 50%; background: var(--sky-3); border: 2px solid var(--surface-2); }
.pv-votes i:nth-child(2) { background: var(--sky-2); } .pv-votes i:nth-child(3) { background: var(--sky-1); }
.pv-votes span { margin-left: 14px; color: var(--ok); font-weight: 500; }

.pv--browser { padding: 0; overflow: hidden; }
.pv-chrome { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
.pv-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.pv-chrome span { margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: var(--surface-2); font-size: 12px; color: var(--muted); }
.pv-stack { display: flex; flex-wrap: wrap; gap: 6px; padding: 28px 16px; background: linear-gradient(160deg, var(--sky-4), var(--surface-2)); }
.pv-stack span { padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 500; }

.pv-saved { display: flex; justify-content: space-between; gap: 12px; color: var(--text); }
.pv-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; color: var(--muted); }
.pv-link { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--muted); }

/* ---------- Showcase: products framed as a website, an app or both, with mock screens in their colours ---------- */
.sc-ico { width: 15px; height: 15px; flex: none; }
.vendor-mark.xs { width: 22px; height: 22px; border-radius: 7px; font-size: 9px; }
.vendor-mark.sm { width: 22px; height: 22px; border-radius: 7px; font-size: 9px; }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); grid-auto-flow: dense; gap: 24px; padding-bottom: 48px; }
.sc-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; transition: border-color var(--fast) var(--ease), box-shadow var(--med) var(--ease), transform var(--med) var(--ease); }
.sc-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-2); }
.sc-stage-link { position: relative; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.sc-form.on-stage { position: absolute; top: 12px; left: 12px; z-index: 3; background: var(--glass); color: var(--text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-1); }
.sc-stage-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (min-width: 760px) {
  .sc-card.big { grid-column: span 2; grid-row: span 2; }
  .sc-card.big .sc-stage-link { flex: 1; }
  .sc-card.big .sc-stage { flex: 1; aspect-ratio: auto; min-height: 320px; }
  .sc-card.big .sc-name { font-size: 22px; }
}
.sc-meta { display: grid; gap: 12px; padding: 16px 18px 18px; }
.sc-title { display: flex; gap: 12px; align-items: flex-start; }
.sc-mono { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--sc, var(--accent)); color: #FFFFFF; font: 700 18px var(--sans); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); }
.sc-mono.xl { width: 76px; height: 76px; border-radius: 22px; font-size: 34px; }
.sc-name { font: 650 17px var(--sans); color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.sc-name:hover { color: var(--accent-ink); }
.sc-tagline { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-form { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font: 500 12px var(--sans); white-space: nowrap; }
.sc-tech { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-tech-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font: 500 12px var(--sans); cursor: pointer; transition: all var(--fast) var(--ease); }
.sc-tech-chip:hover, .sc-tech-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.sc-more { font: 500 12px var(--sans); color: var(--muted); }
.sc-foot > :is(span, button) + :is(span, button):not(.sc-sample)::before { content: '·'; margin-right: 10px; }
.sc-foot { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--muted); }
.sc-sample { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--info-soft); color: var(--info); font: 600 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.sc-hero-badges .sc-sample { margin-left: 0; }
.sc-platforms { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sc-plat { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); font: 500 12px var(--sans); }

/* The stage: frames on a backdrop tinted with the product's accent (--sc). Sizes are relative to the stage. */
.sc-stage { --sc: var(--accent); position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sc) 34%, transparent), transparent 62%),
    radial-gradient(100% 80% at 100% 100%, color-mix(in srgb, var(--sc) 22%, transparent), transparent 60%),
    color-mix(in srgb, var(--sc) 7%, var(--surface-2)); }
.sc-stage.xl { aspect-ratio: 16 / 8.4; border-radius: var(--r-xl); border: 1px solid var(--line); margin-top: 8px; }
.fr-browser, .fr-desktop { position: absolute; top: 15%; left: 7%; right: 7%; border-radius: clamp(6px, 1.6cqw, 16px) clamp(6px, 1.6cqw, 16px) 0 0; overflow: hidden; background: #F3F5F9; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 50px rgba(2, 30, 70, .22); transition: transform var(--slow) var(--ease); }
.fr-desktop { border-radius: clamp(6px, 1.6cqw, 16px); bottom: auto; }
.sc-card:hover .fr-browser, .sc-card:hover .fr-desktop { transform: translateY(-1.5%); }
.fr-bar { display: flex; align-items: center; gap: 2cqw; height: clamp(14px, 4.2cqw, 40px); padding: 0 clamp(6px, 1.8cqw, 18px); background: #ECEFF4; border-bottom: 1px solid rgba(15, 23, 42, .07); }
.fr-dots { display: inline-flex; gap: clamp(3px, .8cqw, 8px); }
.fr-dots i { width: clamp(4px, 1.1cqw, 11px); aspect-ratio: 1; border-radius: 50%; background: #FF5F57; }
.fr-dots i:nth-child(2) { background: #FEBC2E; }
.fr-dots i:nth-child(3) { background: #28C840; }
.fr-url { flex: 0 1 46%; margin: 0 auto; transform: translateX(-3cqw); padding: 0 1.4cqw; border-radius: 999px; background: #FFFFFF; color: #475569; font: 500 clamp(5px, 1.35cqw, 13px)/clamp(9px, 2.5cqw, 24px) var(--sans); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-title { flex: 1; margin-right: 4cqw; text-align: center; color: #475569; font: 600 clamp(5px, 1.35cqw, 13px) var(--sans); }
.th-dark .fr-browser, .th-dark .fr-desktop { background: #161B24; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 50px rgba(0, 0, 0, .4); }
.th-dark .fr-bar { background: #1E2430; border-bottom-color: rgba(255, 255, 255, .06); }
.th-dark .fr-url { background: #0F131A; color: #94A3B8; }
.th-dark .fr-title { color: #94A3B8; }
.fr-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; }
.fr-phone { position: absolute; aspect-ratio: 9 / 19.5; border-radius: 16% / 7.4%; background: #0B0D12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 22px 50px rgba(2, 20, 50, .35); transition: transform var(--slow) var(--ease); }
.fr-screen { position: absolute; inset: 1.3% 2.8%; border-radius: 13% / 6%; overflow: hidden; container-type: inline-size; }
.fr-island { position: absolute; z-index: 2; top: 2.2%; left: 50%; width: 32%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #000000; }
.fr-phone.solo { width: 34%; left: 33%; top: 12%; }
.fr-phone.over { width: 21%; right: 5%; top: 28%; }
.form-both .fr-browser, .form-desktop .fr-desktop:has(+ .fr-phone) { left: 5%; right: 19%; }
.form-desktop .fr-desktop { top: 16%; }
.fr-phone.back { width: 22%; left: 30%; top: 10%; transform: rotate(-7deg); }
.fr-phone.front { width: 22%; left: 47%; top: 6%; transform: rotate(5deg); }
.sc-stage.xl .fr-phone.solo { width: 22%; left: 39%; top: 6%; }
.sc-stage.xl .fr-phone.over { width: 17%; right: 6%; top: 20%; }
.sc-card:hover .fr-phone.solo, .sc-card:hover .fr-phone.over { transform: translateY(-3%); }
.sc-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Showcase motion, kept subtle: screenshots slowly ease closer, phones float, mock charts grow in and
   cards rise in. app.js marks a stage .live while it is on screen and a card .shown when
   it first arrives; nothing moves for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .sc-card:not(.shown) { opacity: 0; translate: 0 14px; }
  .sc-card.shown { animation: sc-rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .fr-view .sc-shot { transform-origin: 50% 0; animation: sc-read 18s ease-in-out infinite alternate paused; }
  .fr-phone, .fr-store { animation: sc-float 6s ease-in-out infinite alternate paused; }
  .fr-phone.over, .fr-phone.front, .fr-store.over { animation-delay: -3s; }
  .sc-stage.live .sc-shot, .sc-stage.live .fr-phone, .sc-stage.live .fr-store { animation-play-state: running; }
  .sc-stage.live .mk-chart i { transform-origin: bottom; animation: sc-grow .9s var(--ease) both; animation-delay: calc(var(--n, 0) * 45ms); }
}
@keyframes sc-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes sc-read { 0%, 15% { transform: none; } 85%, 100% { transform: scale(1.07); } }
@keyframes sc-float { to { translate: 0 -2.2%; } }
@keyframes sc-grow { from { transform: scaleY(.12); } }

/* Mock screens. Everything is in em, and the em follows the frame's width, so one drawing fits every size. */
.mock { --mk-bg: #FFFFFF; --mk-panel: #F3F5F9; --mk-line: #DDE3EC; --mk-ink: #1F2937; position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--mk-bg); font-size: 1.6cqw; color: var(--mk-ink); overflow: hidden; }
.mock.mk-dark { --mk-bg: #0F141C; --mk-panel: #19212D; --mk-line: #2A3546; --mk-ink: #E5E9F0; }
.mock.m { font-size: 5.4cqw; padding-top: 11cqw; }
.mock b, .mock i { display: block; font-style: normal; }
.mock > :nth-child(2) { flex: 1; min-height: 0; }
.mk-top { display: flex; align-items: center; gap: 1em; padding: .9em 1.3em; border-bottom: 1px solid var(--mk-line); }
.mk-brand { display: flex; align-items: center; gap: .5em; min-width: 0; }
.mk-logo { width: 1.3em; height: 1.3em; border-radius: .38em; background: var(--sc); flex: none; }
.mk-brand span { font: 700 .95em/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-nav { display: flex; gap: 1em; margin-left: auto; }
.mk-nav .mk-line { width: 3.2em; }
.mk-avatar { width: 1.5em; height: 1.5em; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--sc) 40%, var(--mk-panel)); }
.m .mk-avatar { margin-left: auto; }
.mk-line { height: .5em; border-radius: 1em; background: var(--mk-line); width: 72%; }
.mk-line.w0 { width: 92%; } .mk-line.w1 { width: 76%; } .mk-line.w2 { width: 60%; } .mk-line.w3 { width: 84%; }
.mk-line.sm { width: 40%; }
.mk-line.title { height: .95em; width: 56%; background: var(--mk-ink); opacity: .85; }
.mk-line.short { width: 36%; }
.mk-line.light { background: rgba(255, 255, 255, .9); opacity: 1; }
.mk-line.price { width: 30%; background: var(--mk-ink); opacity: .6; }
.mk-dot { width: 1.3em; height: 1.3em; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--sc) 28%, var(--mk-panel)); }
.mk-dot.hi { background: var(--sc); border-radius: .4em; }
.mk-row { display: flex; align-items: center; gap: .6em; }
.mk-row .mk-line { flex: 1; }
.mk-row .mk-line.sm { flex: 0 0 25%; }
.mk-side { flex: 0 0 22%; display: flex; flex-direction: column; gap: 1em; padding: 1.2em 1em; background: var(--mk-panel); border-right: 1px solid var(--mk-line); }
.mk-side .mk-row.sel { margin: -.4em; padding: .4em; border-radius: .5em; background: color-mix(in srgb, var(--sc) 16%, var(--mk-panel)); }

.mk-dash { display: flex; }
.mk-main { flex: 1; display: flex; flex-direction: column; gap: 1em; padding: 1.2em; min-width: 0; }
.mk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.mk-stat { display: grid; gap: .55em; padding: .85em; border-radius: .7em; background: var(--mk-panel); }
.mk-num { height: 1.15em; width: 62%; border-radius: .3em; background: var(--mk-ink); opacity: .8; }
.mk-num.hi { background: var(--sc); opacity: 1; }
.mk-chart { flex: 1; min-height: 5em; display: flex; align-items: flex-end; gap: .45em; padding: .9em; border-radius: .7em; background: var(--mk-panel); }
.mk-chart i { flex: 1; border-radius: .25em .25em 0 0; background: color-mix(in srgb, var(--sc) 38%, var(--mk-panel)); }
.mk-chart i.hi { background: var(--sc); }
.mk-rows { display: grid; gap: .7em; }

.mk-feed { display: grid; gap: 1em; align-content: start; padding: 1.1em; width: 100%; max-width: 58%; margin: 0 auto; box-sizing: border-box; overflow: hidden; }
.m .mk-feed { max-width: none; }
.mk-post { display: grid; gap: .6em; padding: .85em; border-radius: .8em; background: var(--mk-panel); }
.mk-img { border-radius: .55em; background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 32%, var(--mk-panel)), color-mix(in srgb, var(--sc) 10%, var(--mk-panel))); }
.mk-img.hi { background: linear-gradient(135deg, var(--sc), color-mix(in srgb, var(--sc) 45%, #FFFFFF)); }

.mk-editor { display: grid; grid-template-columns: 1fr 24%; grid-template-rows: auto 1fr; }
.m .mk-editor { grid-template-columns: 1fr; }
.mk-tools { grid-column: 1 / -1; display: flex; gap: .5em; padding: .65em 1.3em; border-bottom: 1px solid var(--mk-line); }
.mk-tools b { width: 1.35em; height: 1.35em; border-radius: .32em; background: var(--mk-panel); }
.mk-tools b.hi { background: var(--sc); }
.mk-doc { display: grid; gap: .75em; align-content: start; padding: 1.8em 12%; }
.m .mk-doc { padding: 1.3em; }
.mk-quote { display: grid; gap: .55em; padding-left: .9em; border-left: .28em solid var(--sc); }
.mk-margin { display: grid; gap: .9em; align-content: start; padding: 1.3em .9em; border-left: 1px solid var(--mk-line); }
.mk-note { display: grid; gap: .45em; padding: .7em; border-radius: .55em; background: color-mix(in srgb, var(--sc) 13%, var(--mk-bg)); }

.mk-chat { display: flex; }
.mk-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .75em; padding: 1.3em; min-width: 0; }
.mk-bubble { height: 2.3em; border-radius: 1.1em; flex: none; }
.mk-bubble.in { align-self: flex-start; background: var(--mk-panel); border-bottom-left-radius: .3em; }
.mk-bubble.out { align-self: flex-end; background: color-mix(in srgb, var(--sc) 30%, var(--mk-bg)); border-bottom-right-radius: .3em; }
.mk-bubble.out.hi { background: var(--sc); }
.mk-input { display: flex; align-items: center; gap: .6em; margin-top: .4em; padding: .55em .55em .55em 1em; border: 1px solid var(--mk-line); border-radius: 2em; }
.mk-input .mk-line { flex: 1; }
.mk-send { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--sc); }

.mk-map { position: relative; }
.mk-terrain { position: absolute; inset: 0; background:
  repeating-linear-gradient(28deg, transparent 0 4.6em, rgba(255, 255, 255, .95) 4.6em 5.1em),
  repeating-linear-gradient(-62deg, transparent 0 7em, rgba(255, 255, 255, .8) 7em 7.4em),
  radial-gradient(40% 30% at 70% 30%, #CFE3C8, transparent 70%),
  radial-gradient(30% 40% at 20% 80%, #C5DDF0, transparent 70%), #E7EEE4; }
.mk-dark .mk-terrain { background:
  repeating-linear-gradient(28deg, transparent 0 4.6em, rgba(255, 255, 255, .08) 4.6em 5.1em),
  repeating-linear-gradient(-62deg, transparent 0 7em, rgba(255, 255, 255, .06) 7em 7.4em), #18212C; }
.mk-pin { position: absolute; width: 1.5em; height: 1.5em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: color-mix(in srgb, var(--sc) 55%, #FFFFFF); border: .25em solid #FFFFFF; box-shadow: 0 .2em .5em rgba(0, 0, 0, .25); }
.mk-pin.hi { width: 2em; height: 2em; background: var(--sc); }
.mk-sheet { position: absolute; left: 4%; bottom: 6%; width: 36%; display: grid; gap: .65em; padding: 1em; border-radius: .9em; background: var(--mk-bg); box-shadow: 0 .4em 1.4em rgba(0, 0, 0, .18); }
.m .mk-sheet { left: 4%; right: 4%; width: auto; bottom: 4%; }
.mk-chip { width: 3.6em; height: 1.5em; border-radius: 1em; background: var(--mk-panel); }
.mk-chip.hi { background: var(--sc); }

.mk-store { display: grid; gap: 1em; align-content: start; padding: 1.1em; }
.mk-banner { display: grid; align-content: center; gap: .9em; height: 7em; padding: 0 1.5em; border-radius: .9em; background: linear-gradient(120deg, var(--sc), color-mix(in srgb, var(--sc) 55%, #000000)); }
.mk-cta { width: 7em; height: 2em; border-radius: 1em; background: var(--sc); }
.mk-cta.light { width: 5.5em; background: #FFFFFF; }
.mk-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; }
.m .mk-products { grid-template-columns: 1fr 1fr; }
.mk-product { display: grid; gap: .45em; }
.mk-product .mk-img { aspect-ratio: 1; }

.mk-landing { display: grid; gap: 2.2em; align-content: start; padding: 2.4em 10%; }
.m .mk-landing { padding: 1.6em 1.2em; gap: 1.6em; }
.mk-hero { display: grid; justify-items: center; gap: .85em; }
.mk-hero .mk-line.title { height: 1.5em; width: 62%; }
.mk-hero .mk-line.title.short { width: 42%; }
.m .mk-hero .mk-line.title { width: 88%; }
.mk-hero .mk-line.center { width: 48%; }
.mk-hero .mk-cta { margin-top: .5em; width: 8.5em; height: 2.3em; }
.mk-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.m .mk-features { grid-template-columns: 1fr; }
.mk-feature { display: grid; gap: .6em; padding: 1em; border-radius: .8em; background: var(--mk-panel); }

.mk-tabbar { display: flex; justify-content: space-around; padding: .9em 0 1.6em; border-top: 1px solid var(--mk-line); background: var(--mk-bg); }
.mk-tabbar b { width: 1.5em; height: 1.5em; border-radius: .45em; background: var(--mk-panel); }
.mk-tabbar b.hi { background: var(--sc); }

/* Product page */
.sc-back { display: inline-block; margin: 32px 0 18px; text-decoration: none; }
.sc-hero-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 20px; }
.sc-hero-head h1 { margin: 0; }
.sc-hero-tagline { margin: 6px 0 12px; font-size: 18px; color: var(--text-2); }
.sc-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-basis: 100%; }
.sc-detail-cols { display: grid; gap: 20px; margin-top: 24px; }
@media (min-width: 960px) { .sc-detail-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; } }
.sc-about h2, .sc-built h2 { margin-top: 0; }
.sc-about > p { color: var(--text-2); line-height: 1.6; }
.sc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 0; }
.sc-facts dt { font-size: 12px; color: var(--muted); }
.sc-facts dd { margin: 2px 0 0; font-weight: 500; }
.sc-layers { display: grid; gap: 18px; }
@media (min-width: 640px) { .sc-layers { grid-template-columns: 1fr 1fr; } }
.sc-layer h3 { margin: 0 0 8px; font: 600 12px var(--sans); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.sc-layer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sc-tech-row { display: flex; align-items: center; gap: 10px; }
.sc-tech-row .vendor-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.sc-tech-row strong { display: block; }
.sc-tech-row .grow { min-width: 0; }
.sc-tech-link { display: block; margin: 2px 0 0; text-decoration: none; color: var(--accent-ink); }
.sc-like { font-size: 12px; white-space: nowrap; }
.sc-similar-title { margin: 44px 0 16px; }
@media (max-width: 560px) { .sc-like { display: none; } .sc-hero-tagline { font-size: 16px; } }

/* Submit dialog */
.submit-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.submit-form label { display: block; margin: 12px 0 6px; font: 500 13px var(--sans); }
.submit-form input:not([type="checkbox"]), .submit-form select { width: 100%; box-sizing: border-box; }
.sub-platforms { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0 0; padding: 0; border: 0; }
.sub-platforms legend { margin-bottom: 6px; padding: 0; font: 500 13px var(--sans); }
.sub-platforms label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.fl-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 400; }
.fl-check input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--accent); }
.fl-check + .hint { margin: 4px 0 0; }
.sub-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* ---------- community review and Settings → Community (community.js) ---------- */
/* Scoped to the community view, the sign-in dialog and the settings body so they don't touch the rest of the app. */
.signin-dialog { width: min(440px, calc(100vw - 32px)); }
.signin-dialog .dialog-close { position: absolute; right: 12px; top: 8px; }
.signin-dialog .or { text-align: center; margin: 4px 0; }
/* GitHub first and strongest; GitLab in its brand orange so it stands out too; email last, plain. */
.signin-dialog .btn-wide.si-gitlab { margin-top: 2px; }
.signin-dialog .or { margin-top: 12px; }
.signin-dialog .si-email { margin-top: 12px; }
/* Connected sign-ins (Settings → Account, and onboarding): one line each, Connect buttons in each brand's colours. */
.sw-list { display: flex; flex-direction: column; gap: 10px; min-width: min(100%, 340px); }
.sw-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sw-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; color: var(--text); font-weight: 600; }
.sw-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sw-state { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; }
.sw-state .ok { color: var(--accent-ink); font-weight: 600; }
.sw-row .btn { min-height: 36px; padding: 0 14px; }
:is(.sw-row, .signin-dialog) .si-github { background: #24292F; border-color: transparent; color: #FFFFFF; font-weight: 600; }
:is(.sw-row, .signin-dialog) .si-github:hover { background: #32383F; color: #FFFFFF; }
:is(.sw-row, .signin-dialog) .si-gitlab { background: #FC6D26; border-color: transparent; color: #171321; font-weight: 600; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
:is(.sw-row, .signin-dialog) .si-gitlab:hover { background: #E24329; color: #171321; }
:is(#view-community, .signin-dialog, #settings-body) .stack { display: flex; flex-direction: column; gap: 8px; }
:is(#view-community, .signin-dialog, #settings-body) .stack h2 { margin: 0 0 4px; }
.signin-dialog .code-input { font: 600 22px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.3em; text-align: center; }
.signin-dialog .label-row { display: flex; justify-content: space-between; align-items: baseline; }
.signin-dialog .cap { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.signin-dialog .cap input { width: auto; min-height: 0; margin-top: 3px; }
:is(#view-community, .signin-dialog, #settings-body) .form-msg { min-height: 1.2em; margin: 4px 0 0; font-size: 13px; color: var(--warn); }
:is(#view-community, .signin-dialog, #settings-body) .ok { color: var(--accent-ink); }
:is(#view-community, .signin-dialog, #settings-body) .bad { color: var(--warn); }
#view-community .who { margin: 0 0 12px; }
#view-community .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
:is(#view-community, #settings-body) .row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#view-community .change-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
#view-community .change-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
#view-community .change-main { flex: 1; min-width: 0; }
#view-community .change-main a { color: var(--text); font-weight: 600; text-decoration: none; }
#view-community .change-main a:hover { text-decoration: underline; }
#view-community .status { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
#view-community .status.live { background: var(--accent-soft); color: var(--accent-ink); }
#view-community .status.pending { background: var(--info-soft); color: var(--info); }
#view-community .status.reverted, #view-community .status.rejected, #view-community .status.superseded { background: var(--warn-soft); color: var(--warn-ink); }
#view-community .score { font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-2); min-width: 3ch; text-align: right; }
#view-community .change-head { display: flex; gap: 16px; align-items: flex-start; }
#view-community .change-head h2 { margin: 4px 0; }
#view-community .votes { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#view-community .vote { width: 40px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 14px; }
#view-community .vote[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
:is(#community-root, #settings-body) .card + .card { margin-top: 12px; }
#view-community .evidence { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
#view-community .evidence blockquote { margin: 0; padding: 6px 12px; border-left: 3px solid var(--accent); color: var(--text-2); }
#view-community .item + .item { margin-top: 12px; }
#view-community table.diff td, #view-community table.diff th { vertical-align: top; }
#view-community table.diff code { white-space: pre-wrap; word-break: break-word; font-size: 12px; }
#view-community td.del { background: var(--warn-soft); }
#view-community td.add { background: var(--accent-soft); }
#view-community .comments { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 12px; }
#view-community .comments p { margin: 2px 0; }
#view-community .comments .link-btn { font-size: 12px; margin-right: 8px; }
#view-community .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
#view-community .linediff { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; margin: 8px 0 0; }
#view-community .linediff .del { color: var(--warn-ink); }
#view-community .linediff .add { color: var(--accent-ink); }
#view-community .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#settings-body .sessions { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
#settings-body .sessions li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#settings-body .danger { border-color: var(--warn); }
#settings-body .danger ul { margin: 0; padding-left: 18px; color: var(--text-2); }
@media (max-width: 640px) {
  #view-community .change-row { flex-wrap: wrap; }
  #view-community .grid2 { grid-template-columns: 1fr; }
}

/* Showcase figures, App Store images and stack sources */
.sc-figs { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-fig { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font: 600 12px var(--sans); }
.sc-fig .sc-ico { width: 12px; height: 12px; color: #E3A008; }
.sc-fig.muted-fig { font-weight: 500; color: var(--muted); }
.fr-store { position: absolute; z-index: 2; overflow: hidden; border-radius: clamp(8px, 2.2cqw, 22px); box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 22px 50px rgba(2, 20, 50, .3); transition: transform var(--slow) var(--ease); }
.fr-store img { display: block; width: 100%; height: auto; }
.fr-store.over { width: 22%; right: 4%; top: 20%; }
.fr-store.solo { width: 34%; left: 33%; top: 8%; }
.sc-stage.xl .fr-store.over { width: 19%; right: 5%; top: 12%; }
.sc-stage.xl .fr-store.solo { width: 24%; left: 38%; top: 6%; }
.sc-card:hover .fr-store { transform: translateY(-3%); }
.sc-evidence { display: block; margin-top: 2px; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); overflow-wrap: anywhere; }
.sc-credit { margin: 8px 2px 0; }

/* Showcase filters reuse Plan's pills, popover and dialog; its chips pick one value per group. */
.fchip:has(.fb-opt:checked) { background: var(--accent-soft); border-color: transparent; }
.fchip:has(.fb-opt:checked) .fchip-main { color: var(--accent-ink); }
.fchip:has(.fb-opt:checked) .fchip-mark::before { content: '✕'; color: var(--accent-ink); font-size: 11px; }
.fchip:has(.fb-opt:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-count { padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 600 12px var(--sans); font-variant-numeric: tabular-nums; }
.fchip:has(.fb-opt:checked) .fb-count { background: rgba(255, 255, 255, .5); color: var(--accent-ink); }
.fchip-main .vendor-mark.xs { width: 20px; height: 20px; border-radius: 6px; margin-left: -4px; }
.fchip-main .sc-ico { width: 14px; height: 14px; }
.fb-subgroup + .fb-subgroup { margin-top: 14px; }
.fb-subgroup[hidden] { display: none; }
.fb-subgroup h4 { margin: 0 0 8px; font: 600 12px var(--sans); color: var(--muted); }
.filter-bar .fbar-status { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.fb-clear-all { font-size: 13px; }
#fb-pop .fl-clear { display: none; }

/* A lazy logo waiting to load: in the layout (so it loads as it nears the screen) but unseen. */
.vendor-mark img.pending { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- Plan: after a plan, the hero folds into a one-line ask bar and Your Stack takes the page ---------- */
body.consolidated .hero { padding: 20px 0 0; text-align: left; }
body.consolidated .hero-in > h1, body.consolidated .hero-in > .lede,
body.consolidated .examples-row, body.consolidated #welcome-slot { display: none; }
body.consolidated .composer { max-width: none; margin: 0; }
body.consolidated .composer-card { flex-direction: row; align-items: center; gap: 10px; min-height: 0; padding: 6px 6px 6px 16px; border-radius: 999px; }
body.consolidated .composer textarea { flex: 1; min-width: 0; height: 26px; min-height: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; line-height: 26px; }
body.consolidated .composer-bar { flex-wrap: nowrap; }
body.consolidated .composer-bar .spacer { display: none; }
body.consolidated .composer .chip-field { min-height: 34px; }
body.consolidated .plan-btn { min-height: 36px; }
/* Editing the ask opens the bar back into a card, in place. */
body.consolidated .composer-card:focus-within { flex-direction: column; align-items: stretch; border-radius: 15px; padding: 14px 14px 12px 18px; }
body.consolidated .composer-card:focus-within textarea { height: auto; min-height: 72px; overflow: auto; white-space: pre-wrap; line-height: 1.5; }
body.consolidated .composer-card:focus-within .composer-bar .spacer { display: block; }
body.consolidated .composer-status { min-height: 0; margin: 8px 16px 0; text-align: left; font-size: 13px; }
body.consolidated .composer-status:empty { display: none; }
body.consolidated .plan-body { padding-top: 16px; }
#plan-result .result-head h2:focus { outline: none; }
#plan-result .result-head h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 560px) {
  body.consolidated .composer-card:not(:focus-within) .chip-field { display: none; }
  body.consolidated .composer-card:not(:focus-within) .plan-btn { flex: none; }
}

/* The consolidation: the ask box morphs into the bar, the hero copy blurs away, and Your Stack rises into place.
   Names exist only during this transition, so other view changes are untouched. */
/* The ask box is drawn live, not from a snapshot: its contents travel as their own named parts, so the card's
   own snapshot is only its chrome. That chrome is hidden and repainted on the image pair at every frame from the
   old card's exact border, background and radius to the bar's (--ask-*-from/to, set by consolidate()). Nothing is
   stretched, so the first frame is the card as it was and the last is the bar as it lands. */
.vt-consolidate .composer-card { view-transition-name: ask; }
.vt-consolidate #ask { view-transition-name: ask-text; }
.vt-consolidate .composer .chip-field[for="ask-users"] { view-transition-name: ask-users; }
.vt-consolidate .composer .chip-field[for="ask-profile"] { view-transition-name: ask-profile; }
.vt-consolidate #ask-go { view-transition-name: ask-go; }
.vt-consolidate .hero-in > h1 { view-transition-name: hero-title; }
.vt-consolidate .hero-in > .lede { view-transition-name: hero-lede; }
.vt-consolidate #examples { view-transition-name: hero-examples; }
.vt-consolidate #plan-result .result-head { view-transition-name: your-stack; }
::view-transition-group(ask), ::view-transition-group(ask-text), ::view-transition-group(ask-users),
::view-transition-group(ask-profile), ::view-transition-group(ask-go) { animation-duration: 560ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(ask), ::view-transition-new(ask) { display: none; }
::view-transition-image-pair(ask) {
  box-sizing: border-box; border: var(--ask-bw-to) solid var(--ask-bc-to); border-radius: var(--ask-r-to); background: var(--ask-bg-to);
  animation: ask-box 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ask-box { from { border-width: var(--ask-bw-from); border-color: var(--ask-bc-from); border-radius: var(--ask-r-from); background: var(--ask-bg-from); } }
/* The parts keep their own pixels (no stretching) and cross-fade where they differ. */
::view-transition-old(ask-users), ::view-transition-new(ask-users), ::view-transition-old(ask-profile), ::view-transition-new(ask-profile),
::view-transition-new(ask-go) { inset: 0; width: auto; height: auto; margin: auto; animation-duration: 280ms; }
/* Plan can go from full width (phones) to its own width: the pill is painted live and its label stays put in the middle. */
::view-transition-image-pair(ask-go) { border-radius: 999px; background: var(--accent); }
::view-transition-old(ask-go) { display: none; }
::view-transition-new(ask-go) { animation: none; }
/* The text shrinks from the card's 17px to the bar's 15px with both copies scaled alike, so the glyphs stay on top of each other. */
::view-transition-group(ask-text) { overflow: clip; }
::view-transition-old(ask-text), ::view-transition-new(ask-text) { width: auto; height: auto; transform-origin: 0 0; animation-duration: 560ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(ask-text) { animation-name: vt-fade, ask-text-old; animation-duration: 220ms, 560ms; animation-fill-mode: both; }
::view-transition-new(ask-text) { animation-name: vt-fade-in, ask-text-new; animation-fill-mode: both; }
@keyframes ask-text-old { to { transform: scale(var(--ask-fs)); } }
@keyframes ask-text-new { from { transform: scale(calc(1 / var(--ask-fs))); } }
::view-transition-old(hero-title), ::view-transition-old(hero-lede), ::view-transition-old(hero-examples) { animation: vt-recede 240ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-group(your-stack) { animation-duration: 560ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-new(your-stack) { animation: vt-arrive 520ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
::view-transition-old(your-stack) { animation: none; opacity: 0; }
::view-transition-old(root) { animation-duration: 240ms; }
::view-transition-new(root) { animation-duration: 420ms; animation-delay: 80ms; }
@keyframes vt-recede { to { opacity: 0; filter: blur(6px); transform: translateY(-14px) scale(.98); } }
@keyframes vt-arrive { from { opacity: 0; filter: blur(4px); transform: translateY(28px); } }
/* A re-plan from the bar: the new stack settles in place. */
.result-head.settle { animation: settle 280ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes settle { from { opacity: .35; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  /* No travel: the bar and the stack swap in with a short cross-fade, and focus still lands on Your Stack. */
  ::view-transition-group(ask), ::view-transition-group(ask-text), ::view-transition-group(ask-users), ::view-transition-group(ask-profile),
  ::view-transition-group(ask-go), ::view-transition-group(your-stack), ::view-transition-image-pair(ask) { animation: none; }
  ::view-transition-old(ask-text) { animation: vt-fade 160ms ease both; }
  ::view-transition-new(ask-text) { animation: vt-fade-in 160ms ease both; }
  ::view-transition-old(hero-title), ::view-transition-old(hero-lede), ::view-transition-old(hero-examples) { animation: vt-fade 160ms ease both; }
  ::view-transition-new(your-stack) { animation: vt-fade-in 200ms ease both; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-delay: 0ms; }
  .result-head.settle { animation: vt-fade-in 160ms ease; }
}
@keyframes vt-fade { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
body.consolidated .composer-status { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.consolidated .composer-status:empty { display: none; }

/* Admin (admin.js): the growth plan, posts, outreach, numbers and automations. Only admins see it. */
#view-admin { padding-bottom: 48px; }
.admin-who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-signin { max-width: 440px; }
.admin-stats { margin-bottom: 20px; }
.admin-of { font-size: 14px; font-weight: 500; color: var(--muted); }
.admin-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
.admin-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.admin-grid.wide { grid-template-columns: minmax(0, 1fr); }
.admin-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.admin-card + .admin-card, .admin-toolbar + .admin-card, .filter-bar + .admin-card { margin-top: 12px; }
.admin-toolbar + .filter-bar { margin-top: 12px; }
.admin-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-card-head h2 { margin: 0; font: 650 18px var(--display); }
.admin-card p { margin: 0; }
.admin-sub { margin-top: 6px; }
.admin-empty { padding: 6px 0; }
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 16px; }
.admin-toolbar .search { flex: 1 1 260px; }
.admin-table td { vertical-align: top; }
.admin-row { cursor: pointer; }
.admin-row:hover td, .admin-row:focus-visible td { background: var(--surface-2); }
.admin-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.admin-tag { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: var(--surface-2); color: var(--text-2); }
.admin-tag.ok { background: var(--ok-soft); color: var(--ok); }
.admin-tag.warn { background: var(--warn-soft); color: var(--warn-ink); }
.admin-tag.info, .admin-tag.seg-vendor { background: var(--info-soft); color: var(--info); }
.admin-tag.acc, .admin-tag.seg-founder { background: var(--accent-soft); color: var(--accent-ink); }
.admin-tag.seg-startup { background: var(--ok-soft); color: var(--ok); }
.admin-tag.seg-multiplier { background: var(--warn-soft); color: var(--warn-ink); }
.admin-late { color: var(--warn); font-weight: 600; }
.admin-tasks { display: flex; flex-direction: column; }
.admin-task { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 7px 0; font-size: 14px; color: var(--text); cursor: pointer; }
.admin-task input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--accent); }
.admin-task.done span { color: var(--muted); text-decoration: line-through; }
.admin-task-line { display: flex; gap: 10px; align-items: flex-start; }
.admin-week { flex: none; width: 34px; padding-top: 8px; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.admin-phase + .admin-phase { border-top: 1px solid var(--line-2); padding-top: 12px; }
.admin-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.admin-rhythm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-rhythm li { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.admin-rhythm li:first-child { border-top: 0; }
.admin-rhythm strong { flex: none; width: 46px; }
.admin-tpl { border-top: 1px solid var(--line-2); padding: 10px 0 0; }
.admin-tpl summary { cursor: pointer; }
.admin-tpl p { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.admin-form { display: flex; flex-direction: column; gap: 12px; }
.admin-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 0 12px; }
.admin-fields .wide { grid-column: 1 / -1; }
.admin-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-actions > div, .admin-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-drafts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.admin-draft { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); }
.admin-draft .btn { align-self: flex-start; }
.admin-draft select { min-height: 38px; font-size: 14px; }
.admin-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.admin-contact { display: flex; flex-direction: column; gap: 16px; }
.admin-composer { display: flex; flex-direction: column; gap: 10px; }
.admin-composer .section-title { margin: 8px 0 0; }
.admin-composer textarea { min-height: 150px; font-size: 14px; }
.admin-note { display: flex; gap: 8px; }
.admin-note input { flex: 1; width: auto; }
.admin-history { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.admin-history li { padding: 8px 0; border-top: 1px solid var(--line-2); }
.admin-edit summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.admin-check { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: var(--text); cursor: pointer; }
.admin-check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.admin-out:empty { display: none; }
.admin-out.ok { color: var(--ok); }
.admin-out.bad { color: var(--warn); }
.admin-pre { margin: 0; white-space: pre-wrap; font-size: 13px; padding: 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); max-height: 320px; overflow: auto; }
.admin-delta { font-size: 12px; }
.admin-delta.up { color: var(--ok); }
.admin-delta.down { color: var(--warn); }
.admin-when { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.admin-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.admin-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 16px; margin: 0; }
.admin-facts dt { font-size: 12px; color: var(--muted); }
.admin-facts dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.admin-chart-wrap { display: flex; flex-direction: column; gap: 6px; }
.admin-chart { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding-bottom: 1px; border-bottom: 1px solid var(--line-2); }
.admin-chart-bar { flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0; background: var(--accent); }
.admin-chart-bar:hover { background: var(--accent-ink); }
.admin-chart-axis { display: flex; justify-content: space-between; gap: 8px; }
.admin-card .table-scroll table { min-width: 0; }



/* Homepage: the pill under the ask box that opens the Connect page. */
.hero-mcp { margin: 24px 0 0; text-align: center; }
/* Over the clouds white text has no contrast; a solid glass pill reads on sky and cloud alike. */
.hero-mcp .link-on-sky { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--accent-ink); font: 600 14px var(--sans); text-decoration: none; box-shadow: 0 6px 18px rgba(2, 47, 95, .12); transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.hero-mcp .link-on-sky:hover { background: #FFFFFF; box-shadow: 0 8px 22px rgba(2, 47, 95, .18); }
body.app .hero-mcp { display: none; }
.pv--chat { display: grid; gap: 14px; padding: 20px; }
.pv-ask { justify-self: end; max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--on-accent); font-size: 14px; line-height: 1.45; }
.pv-reply { display: grid; gap: 12px; padding: 14px; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 1px solid var(--line-2); }
.pv-tool { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.pv-tool code, .pv-code code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pv--chat .pv-rows li { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
.pv--chat .pv-rows li > span:first-child { color: var(--text); font-weight: 500; }
.pv--chat .pv-rows li:first-child { border-top: 0; }
.pv-code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--muted); }
.pv-code code { padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
@media (max-width: 480px) {
  /* The costs are the answer, so they stay: the finding takes its own line, the cost and verdict go under it. */
  .pv--chat .pv-rows li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .pv--chat .pv-rows li > span:first-child { grid-column: 1 / -1; }
  .pv--chat .pv-rows .pv-cost { display: block; }
}

/* ---------- home: startup spotlight ---------- */
.spotlight { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); margin-bottom: var(--home-gap); }
.sp-slide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 40px clamp(40px, 5vw, 80px); }
.sp-stage .sc-stage.xl { margin-top: 0; aspect-ratio: 16 / 10; box-shadow: var(--shadow-2); }
.sp-stage:hover .fr-browser, .sp-stage:hover .fr-desktop { transform: translateY(-1.5%); }
.sp-title { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sp-title h3 { margin: 0; font: 700 clamp(30px, 3.6vw, 42px)/1.05 var(--display); letter-spacing: var(--display-tracking); }
.sp-title h3 a { color: inherit; text-decoration: none; }
.sp-title h3 a:hover { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 2px; }
.sp-tagline { margin: 0 0 12px; font: 600 18px/1.4 var(--sans); color: var(--text); text-wrap: balance; }
.sp-desc { margin: 0 0 24px; max-width: 54ch; color: var(--text-2); font-size: 15px; text-wrap: pretty; }
.sp-copy .sc-tech { margin-bottom: 16px; }
.sp-copy a.sc-tech-chip { text-decoration: none; }
.sp-copy span.sc-tech-chip { cursor: default; }
.sp-copy span.sc-tech-chip:hover { border-color: var(--line); background: var(--surface); color: var(--text-2); }
.sp-copy .sc-figs { margin-bottom: 28px; }
.sp-copy .hb-actions { margin-top: 28px; }
.sp-copy .sc-figs + .hb-actions { margin-top: 0; }

/* The new slide resolves out of a soft blur rather than appearing from nothing. */
.sp-slide.in .sp-stage { animation: spStage var(--slow) var(--ease-out) both; }
.sp-slide.in .sp-copy > * { animation: spCopy var(--slow) var(--ease-out) both; }
.sp-slide.in .sp-copy > :nth-child(2) { animation-delay: 40ms; }
.sp-slide.in .sp-copy > :nth-child(3) { animation-delay: 80ms; }
.sp-slide.in .sp-copy > :nth-child(n+4) { animation-delay: 120ms; }
@keyframes spStage { from { opacity: .35; filter: blur(10px); transform: scale(.985); } }
@keyframes spCopy { from { opacity: .3; filter: blur(6px); transform: translateY(6px); } }

.sp-controls { display: flex; align-items: center; gap: 8px; margin-top: 28px; }
.sp-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease); }
.sp-btn svg { width: 16px; height: 16px; }
.sp-btn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.sp-btn:focus-visible, .sp-dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sp-btn .i-play, .paused .sp-btn .i-pause { display: none; }
.paused .sp-btn .i-play { display: block; }
.sp-count { margin-left: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sp-dots { display: flex; align-items: center; gap: 2px; margin: 0 4px; }
/* 24px targets around 8px marks; the current one stretches into a progress track. */
.sp-dot { display: inline-grid; place-items: center; min-width: 24px; height: 40px; padding: 0 4px; border: 0; background: none; cursor: pointer; }
.sp-dot i { position: relative; display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; transition: width var(--med) var(--ease-out), background var(--fast) var(--ease); }
.sp-dot:hover i { background: var(--muted); }
.sp-dot.on i { width: 36px; background: var(--line); }
.sp-dot.on i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left; animation: spFill var(--spot-ms, 8000ms) linear forwards; }
.spotlight:is(.paused, .away, :hover, :focus-within) .sp-dot.on i::after { animation-play-state: paused; }
.paused .sp-dot.on i::after { animation: none; transform: scaleX(1); }
@keyframes spFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 960px) {
  .sp-slide { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the current startup's progress track and the count stand in for fifteen dots. */
@media (max-width: 560px) {
  .sp-dot:not(.on) { display: none; }
  .sp-dots { order: 2; }
  .sp-count { order: 3; margin-left: 0; }
  #sp-next { order: 4; }
  #sp-pause { order: 5; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-slide.in .sp-stage, .sp-slide.in .sp-copy > * { animation: none; }
}

/* ---------- server-rendered pages: the facts, before the app takes over ---------- */
body[data-ssr] main > .view, body[data-ssr] main > .wrap > .view { display: none; }
.ssr { padding-top: 48px; padding-bottom: 96px; }
.ssr-page { max-width: 820px; }
.ssr-page h1 { margin: 12px 0 16px; font: 700 clamp(30px, 4vw, 44px)/1.08 var(--display); letter-spacing: var(--display-tracking); text-wrap: balance; }
.ssr-page h2 { margin: 40px 0 12px; font: 700 22px/1.2 var(--display); }
.ssr-page p, .ssr-page li { max-width: 70ch; color: var(--text-2); }
.ssr-lede { font-size: 17px; }
.ssr-crumbs { font-size: 13px; color: var(--muted); }
.ssr-crumbs a { color: var(--accent-ink); }
.ssr-page table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ssr-page th, .ssr-page td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.ssr-page th { color: var(--muted); font-weight: 600; }

/* ---------- company logos in the home page's previews ---------- */
.pv-mark { position: relative; overflow: hidden; }
.pv-mark.has-logo { background: #FFFFFF; border-color: var(--line); }
.pv-mark img { width: 74%; height: 74%; object-fit: contain; }
.pv-mark img.pending { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pv--chat .pv-rows li > span:first-child { display: flex; align-items: center; gap: 8px; }
.pv-chrome span, .pv-stack span { display: inline-flex; align-items: center; gap: 6px; }
.pv-chrome .pv-mark, .pv-stack .pv-mark { width: 18px; height: 18px; border-radius: 5px; font-size: 9px; }
.pv-stack span:has(.pv-mark) { padding-left: 4px; }
.pv-marks { display: inline-flex; }
.pv-marks .pv-mark { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; box-shadow: 0 0 0 2px var(--surface); }
.pv-marks .pv-mark + .pv-mark { margin-left: -5px; }
.ai-apps { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 28px; padding: 0; list-style: none; }
.ai-apps li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: 500 13px var(--sans); }
.ai-apps .pv-mark { border: 0; }
.ai-apps .pv-mark.has-logo { box-shadow: inset 0 0 0 1px var(--line-2); }
.pick-runner:has(.vendor-mark) { display: flex; align-items: center; gap: 8px; }
.ssr-logo { display: block; width: 40px; height: 40px; margin-bottom: 14px; padding: 6px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); object-fit: contain; }
.sc-mono { position: relative; overflow: hidden; }
.sc-mono.has-logo { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.sc-mono img { width: 74%; height: 74%; object-fit: contain; }

/* My Stacks: alert email, users and the alerts switch */
.alerts-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; margin-bottom: 12px; }
.alerts-card .alert-email { margin: 4px 0 0; overflow-wrap: anywhere; }
.alerts-card.set { padding-block: 12px; }
.alerts-card.set .alert-email { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; color: var(--text-2); }
.alerts-card.set .alert-email strong { color: var(--text); font-weight: 600; }
.alerts-card.set .alert-email .bad { margin-left: 0; }
.email-form { flex: 1 1 320px; min-width: 0; }
.stack-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.kind-tag { font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.users-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.users-row .hint { margin: 0; }
.users-input { width: 110px; }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text-2); font: 500 14px var(--sans); cursor: pointer; }
.switch-knob { width: 30px; height: 18px; border-radius: 999px; background: var(--line); position: relative; transition: background var(--med) var(--ease); }
.switch-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface, #fff); transition: transform var(--med) var(--ease); }
.switch[aria-checked="true"] .switch-knob { background: var(--accent); }
.switch[aria-checked="true"] .switch-knob::after { transform: translateX(12px); }

/* Audit report: save and share */
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.share-grid > .card { margin: 0; }
.share-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.share-card .hint { margin: 0; }
.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.badge-row img { display: block; height: 20px; }
.save-status .email-form { margin-top: 8px; }

/* Settings → MCP: files to copy */
.snippet { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.snippet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--line); }
.snippet pre { margin: 0; border: 0; border-radius: 0; padding: 12px; overflow-x: auto; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.alert-email .ok, .alert-email .bad { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; margin-left: 4px; }
.alert-email .ok { background: var(--ok-soft); color: var(--ok); }
.alert-email .bad { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.save-box > .save-status { flex: 1 1 100%; }
.save-status .email-form { margin-top: 8px; }
.email-form .hint { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.save-box > .save-status { flex-wrap: wrap; }
.save-status > .alerts-ask, .save-status > .email-form { flex-basis: 100%; margin: 0; }
.save-status .email-form > .hint, .alerts-card .email-form > .hint { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 6px; }

/* My Stacks: bills next to the estimate */
.bills { display: flex; flex-direction: column; gap: 10px; }
.bills .hint { margin: 0; }
.bills-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.bills-month { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.bills-month input { width: auto; }
.bill-input { width: 110px; text-align: right; }
.bills-table td { vertical-align: middle; }
.bill-status { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.bill-status.bad { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); }
.bill-status.good, .bill-status.ok { background: var(--ok-soft); color: var(--ok); }
.bill-status.muted { background: var(--surface-2); color: var(--muted); }
.bills-total { margin: 0; font-weight: 600; }
.stack-item > .changes { min-width: 0; max-width: 100%; }
.bills .table-scroll { overflow-x: auto; max-width: 100%; }
@media (max-width: 560px) { .bill-input { width: 90px; } }
.invoice-paste { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.invoice-text { width: 100%; font: 13px/1.5 var(--mono, ui-monospace, monospace); }
.invoice-read { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.invoice-found { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.invoice-found .hint { overflow-wrap: anywhere; }

/* ---------- Sticky bars ----------
   The top bar (Plan, Audit, ...) and each page's filter bar sit on a tinted band that differs from the page body,
   and the filter bar runs the full width of the main column (main is a size container, so 50cqw is half of it). */
body { --bar: color-mix(in srgb, var(--accent) 7%, var(--page)); }
.topbar, body.app .topbar, body.app .mobile-bar { background: color-mix(in srgb, var(--bar) 94%, transparent); }
main { container-type: inline-size; }
.filter-bar, body.app .filter-bar {
  background: var(--bar);
  margin-inline: calc(50% - 50cqw);
  padding-inline: calc(50cqw - 50%);
}

/* ---------- interview and three ways to build it ---------- */
.interview { display: flex; flex-direction: column; gap: 14px; padding: 26px; animation: rise var(--med) var(--ease) both; }
.interview.busy { opacity: .6; pointer-events: none; transition: opacity var(--fast) var(--ease); }
.iv-head { display: flex; align-items: center; gap: 14px; }
.iv-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.iv-progress { flex: 1; height: 4px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.iv-progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--med) var(--ease); }
.iv-q { margin: 6px 0 0; font: 700 clamp(22px, 2.8vw, 28px)/1.15 var(--display); }
.iv-why { margin: -4px 0 0; color: var(--muted); font-size: 15px; max-width: 640px; }
.iv-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.iv-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); font: 400 14px var(--sans); cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.iv-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface-2); }
.iv-opt strong { font-size: 15px; font-weight: 600; }
.iv-opt span { color: var(--muted); line-height: 1.4; }
.iv-opt em { font-style: normal; font-size: 12px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; margin-top: 4px; }
.iv-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.iv-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.arch { display: flex; flex-direction: column; gap: 16px; }
.arch-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 20px; }
.arch-head h2 { margin: 0; font: 650 19px var(--display); }
.arch-head .muted { margin-top: 4px; font-size: 14px; }
.arch-answers { display: flex; flex-wrap: wrap; gap: 6px; }
.answer-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 400 13px var(--sans); cursor: pointer; }
.answer-chip:hover { border-color: var(--accent); }
.answer-chip .k { color: var(--muted); }
.arch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.arch-opt { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); animation: rise var(--med) var(--ease) both; }
.arch-opt:nth-child(2) { animation-delay: 60ms; } .arch-opt:nth-child(3) { animation-delay: 120ms; }
.arch-opt.in-use { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-1); }
.arch-opt > .btn { align-self: flex-start; margin-top: 4px; }
.arch-title { display: flex; align-items: center; gap: 10px; }
.arch-title h3 { margin: 0; font: 650 17px/1.25 var(--display); }
.arch-rank { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font: 650 13px var(--sans); color: var(--text-2); }
.in-use .arch-rank { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.fit { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fit-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.fit-bar span { display: block; height: 100%; border-radius: inherit; background: var(--fit, var(--accent)); }
.fit-num { font-weight: 650; font-size: 15px; color: var(--text); }
.fit-label { color: var(--fit-ink, var(--muted)); font-weight: 500; }
.fit.strong { --fit: var(--ok); --fit-ink: var(--ok); }
.fit.good { --fit: var(--accent); --fit-ink: var(--accent-ink); }
.fit.ok { --fit: var(--info); --fit-ink: var(--info); }
.fit.weak { --fit: var(--warn); --fit-ink: var(--warn-ink); }
.arch-cost { font-size: 14px; color: var(--muted); }
.arch-cost strong { color: var(--text); font-size: 18px; font-weight: 650; }
.arch-sum { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.arch-opt h4 { margin: 4px 0 0; font: 600 12px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.roles li { display: flex; gap: 10px; align-items: flex-start; }
.roles li > div { min-width: 0; flex: 1; }
.role-dot { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); border: 1px dashed var(--line); }
.role-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; }
.role-layer { font-size: 12px; color: var(--muted); }
.role-price { margin-left: auto; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.role-does { font-size: 13px; color: var(--text-2); line-height: 1.45; margin-top: 2px; }
.role-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pros, .cons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
.pros li, .cons li { position: relative; padding-left: 20px; }
.pros li::before, .cons li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.pros li { color: var(--text-2); }
.pros li::before { content: "✓"; color: var(--ok); }
.cons li { color: var(--warn-ink); }
.cons li::before { content: "!"; color: var(--warn); left: 5px; }
.follow-up { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.follow-up label { font: 600 14px var(--sans); }
.follow-row { display: flex; gap: 8px; }
.follow-row input { flex: 1; min-width: 0; }
.follow-status { margin: 0; font-size: 13px; color: var(--muted); }
.follow-status:empty { display: none; }

.considered h2 { margin: 0 0 12px; font: 650 19px var(--display); }
.considered ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.considered li { padding: 12px 0; border-top: 1px solid var(--line-2); }
.considered li:first-child { border-top: 0; padding-top: 0; }
.considered-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.considered p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.considered .tag { font-size: 12px; font-weight: 500; border-radius: 999px; padding: 2px 10px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.considered .tag.ruled { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.btn-text { margin-left: auto; border: 0; background: none; padding: 4px 6px; color: var(--accent-ink); font: 500 13px var(--sans); cursor: pointer; border-radius: 6px; }
.btn-text:hover { background: var(--accent-soft); }

@media (max-width: 560px) {
  .interview { padding: 18px; }
  .iv-options { grid-template-columns: minmax(0, 1fr); }
  .follow-row { flex-direction: column; }
  .follow-row .btn { align-self: flex-start; }
}

/* Where it stands: the ranking under the question, updated with each answer. */
.live { display: flex; flex-direction: column; gap: 14px; transition: opacity var(--fast) var(--ease); }
.live.busy { opacity: .6; }
.live-head h2 { margin: 0; font: 650 19px var(--display); }
.live-head .muted { margin-top: 4px; font-size: 14px; }
.live-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.live-top li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); animation: rise var(--med) var(--ease) both; }
.live-top li:first-child { border-top: 0; padding-top: 0; }
.live-top li:first-child .arch-rank { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.live-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.live-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.live-main .fit { max-width: 360px; }
.live-note { font-size: 13px; color: var(--warn-ink); line-height: 1.4; }
.live-cost { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--muted); }
.live-cost strong { font-size: 15px; color: var(--text); font-weight: 650; }
.move { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; }
.move.up { color: var(--ok); background: var(--ok-soft); }
.move.down { color: var(--warn-ink); background: var(--warn-soft); }
.move.new { color: var(--accent-ink); background: var(--accent-soft); }
.live-ruled { padding-top: 12px; border-top: 1px solid var(--line-2); }
.live-ruled h3 { margin: 0 0 8px; font: 600 12px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.live-ruled ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.live-ruled li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; }
.live-ruled .why { flex-basis: 100%; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.live-ruled .tag { font-size: 12px; font-weight: 500; border-radius: 999px; padding: 1px 8px; }
.live-ruled .tag.ruled { background: var(--warn-soft); color: var(--warn-ink); }
.live-ruled li.fresh { animation: rise var(--med) var(--ease) both; }
.live-none { margin: 0; font-size: 14px; color: var(--muted); }

/* Billing: bills across stacks, adding them, and connected accounts */
#billing-body { display: flex; flex-direction: column; gap: 16px; }
#billing-body > .card { display: flex; flex-direction: column; gap: 12px; }
#billing-body h2 { margin: 0; font-size: 17px; }
#billing-body .hint { margin: 0; }
#billing-body select { width: auto; max-width: 100%; }
.bill-bars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bill-bars li { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px; font-size: 14px; }
.bar-label { color: var(--muted); white-space: nowrap; }
.bar-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.bar-value { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; min-width: 80px; }
.conn-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.conn-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.conn-item:first-child { border-top: 0; padding-top: 0; }
.conn-item .grow { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.conn-item .error { overflow-wrap: anywhere; }
.connect-form { display: flex; flex-direction: column; gap: 12px; }
.connect-form .seg { margin: 0; align-self: flex-start; flex-wrap: wrap; }
.billing-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.billing-bar .btn .ico { width: 18px; height: 18px; }
.bill-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.bill-stat .k { font-size: 13px; color: var(--muted); }
.bill-stat .v { font: 650 28px/1.1 var(--sans); margin-top: 6px; font-variant-numeric: tabular-nums; }
.bill-stat .s { font-size: 13px; color: var(--muted); margin-top: 4px; }
.bill-stat .ok { color: var(--ok); font-weight: 600; }
.bill-stat .bad { color: var(--warn); font-weight: 600; }
.add-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.add-way { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--surface); color: var(--text); font: 500 14px var(--sans); text-align: left; cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.add-way .ico { width: 20px; height: 20px; color: var(--accent); }
.add-way .hint { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; }
.add-way:hover { border-color: var(--accent); background: var(--surface-2); }
.add-way[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.billing-add > .hint:last-child { font-size: 13px; }
.btn-quiet { border-color: transparent; background: none; color: var(--muted); }
.btn-quiet:hover { color: var(--warn); background: var(--warn-soft); }
.bills-table .icon-btn.btn-sm { min-width: 36px; min-height: 36px; }
.bills-table td.col-del, .bills-table th.col-del { width: 44px; text-align: right; }
.conn-confirm { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md, 12px); background: var(--warn-soft); font-size: 14px; }
.conn-remove { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.conn-remove input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--warn); }
.conn-item .stack-actions:has(.conn-confirm) { flex: 1 1 100%; }
.conn-confirm .stack-actions { flex: none; }
.connect-fields { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.connect-fields .field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 14px; font-weight: 500; }
.connect-fields .field input { width: 100%; font-family: var(--mono, ui-monospace, monospace); }
.billing-list .bills-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .bill-bars li { grid-template-columns: 64px 1fr auto; gap: 8px; font-size: 13px; }
  .bar-value { min-width: 0; }
  .bill-stats { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .bill-stat .v { font-size: 22px; }
  .add-ways { grid-template-columns: 1fr 1fr; }
  /* On a phone: month, service, amount and remove. */
  .billing-list .col-stack, .billing-list .col-from { display: none; }
  .billing-list .table-scroll table { min-width: 0; }
}
/* Billing: bills not on a stack, and where to move them */
.billing-assign { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.billing-assign p { margin: 0; }

/* Billing: subscriptions, and the guide for an individual Claude key */
.sub-row { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.sub-row .field { flex: 1 1 140px; }
.claude-solo { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--text); font-size: 14px; }
.claude-solo p, .claude-solo ol { margin: 0; }
.claude-solo ol { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }

/* Billing: the forwarding address and its recent emails */
.inbox-pane .copy-row code { overflow-wrap: anywhere; }
.inbox-log { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* Light-Lux direction: neutral paper, ruled surfaces, one corner, two type voices.
   These shared tokens cover tools, account/community/admin, dialogs and legal pages. */
@font-face { font-family: 'Public Sans'; src: url('/fonts/public-sans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root, body.app {
  --page: #fafafa; --surface: #fff; --surface-2: #f0f0ef; --sidebar: #ededec;
  --line: #d4d5d4; --line-2: #e5e6e5;
  --text: #202121; --text-2: #454646; --muted: #656666;
  --accent: #7bafd4; --accent-hover: #6aa3cc; --on-accent: #102d42;
  --accent-soft: #e0ebf3; --accent-ink: #245c84;
  --warm: #92551c; --warm-soft: #f5eee7;
  --ok: #2d6b4a; --ok-soft: #e4f1e9; --warn: #92551c; --warn-ink: #7b4212; --warn-soft: #f5eee7;
  --info: #245c84; --info-soft: #e0ebf3;
  --sky-1: #222323; --sky-2: #363737; --sky-3: #ededec; --sky-4: #f0f0ef;
  --on-sky: #f7f7f6; --glass: #ffffffed;
  --r: 4px; --r-sm: 4px; --r-md: 4px; --r-lg: 4px; --r-xl: 4px;
  --sans: 'Public Sans', system-ui, -apple-system, sans-serif;
  --display: 'Fraunces', Georgia, serif; --mono: var(--sans);
  --shadow-1: 0 1px 2px #2021210a; --shadow-2: 0 1px 2px #20212114;
  --shadow-3: 0 1px 2px #20212114, 0 18px 44px -10px #2021213d;
  --overlay: #20212188; --modal-edge: #20212126; --modal-shadow: var(--shadow-3);
  --side-w: 232px; --fast: 160ms; --med: 320ms; --ease: cubic-bezier(.65,0,.35,1);
}
body { font-size: 13px; }
h1, h2, h3, h4 { font-weight: 400; }
h1 { font-size: clamp(28px, 3.2vw, 36px); letter-spacing: -.025em; }
h2 { font-size: 22px; }
h3 { font-size: 20px; }
.brand { font-family: var(--display); font-weight: 400; font-size: 22px; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--text); }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 16px; padding: 12px 18px; background: var(--surface); }
.skip-link:focus { top: 12px; }
/* State is blue; ordinary primary actions are ink. Status colors retain their meaning. */
.btn, .ghost-pill, .side-item, .side-collapse, .side-account,
.chip-field, .example, .plan-btn, .composer, .composer-card, .subtabs, .subtab,
.depth-segs, .depth-seg, .view-segs, .view-seg, .filter-pill, .answer-chip,
.tag, .badge, .pager button, .search, input, textarea, select, .fl-chip,
.facts-top .vendor-mark, .type-marks .vendor-mark, .company-services .vendor-mark,
dialog, .modal, .menu-pop, .toast, .tooltip, .arch-rank, .move, .role-dot,
.add-way, .conn-confirm, .claude-solo, .considered .tag, .live-ruled .tag,
body.consolidated .composer-card, body.consolidated .composer-card:focus-within { border-radius: var(--r); }
.btn { min-height: 36px; font-size: 13px; }
.btn-primary, body.app .btn-primary { background: var(--text); color: var(--page); border-color: var(--text); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: #334956; color: #fff; border-color: #334956; }
.btn:active { transform: translateY(1px); }
.view-seg[aria-pressed="true"], .depth-seg[aria-pressed="true"], .subtab[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.subtabs { width: fit-content; max-width: 100%; padding: 3px; background: var(--surface); border: 1px solid var(--line); gap: 3px; }
.subtab { min-height: 28px; font-size: 13px; }
input, select, textarea { accent-color: var(--accent-ink); }
.side-item { min-height: 36px; font-size: 13px; border: 1px solid transparent; }
.side-item[aria-current] { color: var(--text); border-color: #b4cbdb; }
.side-item[aria-current] .side-icon { color: var(--accent-ink); }
.side-label, .type-group-title, .facts-row dt { font-size: 12px; text-transform: none; letter-spacing: 0; }
.side-brand { font-size: 20px; padding-top: 10px; padding-bottom: 26px; }
/* The collapse button sits on the brand row, centred on the mark (sidebar padding 20 + brand padding 10 + half the 38px mark − half the 32px button). */
.side-collapse { top: 33px; right: 8px; }
body:not(.side-collapsed) .side-nav { margin-top: 8px; }
body.app .sidebar { padding: 20px 16px 16px; }
body.app .page-head { margin-top: 40px; }
.page-head h1, .vendor-hero h1 { font-weight: 400; }
.card, .vendor-preview.facts, .type-tile, .company-card, .arch-opt { box-shadow: none; }
.depth-callout, .conn-confirm, .claude-solo { background: transparent; padding: 16px 0; border-radius: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
table { border-top: 1px solid var(--text); font-variant-numeric: tabular-nums; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
td { padding-block: 16px; border-bottom-color: var(--line-2); }
.pv-link, #view-community .mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }
/* A services register, with all existing pricing and category filters retained.
   One line per service: who it is, what it starts at (with the basis under the price), its plans, then its facts.
   Every cell aligns to the top so names, prices and facts read across on one line. */
.vendor-grid[data-view="services"] { --reg-cols: minmax(0,1.45fr) minmax(0,1.2fr) minmax(0,1.15fr) minmax(0,1.3fr); grid-template-columns: minmax(0, 1fr); gap: 0; }
.register-head { display: none; }
.vendor-grid[data-view="services"] .register-head { display: grid; grid-template-columns: var(--reg-cols); gap: 24px; padding: 0 12px 10px; border-bottom: 1px solid var(--text); font-size: 12px; font-weight: 600; color: var(--muted); }
.vendor-grid[data-view="services"] .vendor-card { border-bottom: 1px solid var(--line-2); height: auto; }
.vendor-grid[data-view="services"] .vendor-preview.facts { display: grid; grid-template-columns: var(--reg-cols); grid-template-areas: "top price ladder row" "top incl ladder row"; grid-template-rows: auto 1fr; align-items: start; gap: 4px 24px; border: 0; border-radius: 0; padding: 16px 12px; background: transparent; transition: background var(--fast) var(--ease); }
.vendor-grid[data-view="services"] .vendor-card:hover .vendor-preview.facts { background: var(--surface-2); box-shadow: none; }
.vendor-grid[data-view="services"] .vendor-card:focus-visible { outline-offset: -2px; }
.vendor-grid[data-view="services"] .facts-top { grid-area: top; align-items: flex-start; }
.vendor-grid[data-view="services"] .facts-top .vendor-mark { width: 40px; height: 40px; }
.vendor-grid[data-view="services"] .facts-top .hint { font-size: 13px; }
.vendor-grid[data-view="services"] .facts-price { grid-area: price; margin: 0; }
.vendor-grid[data-view="services"] .facts .preview-price { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.vendor-grid[data-view="services"] .facts-price .muted { font-size: 13px; }
.vendor-grid[data-view="services"] .facts-includes { grid-area: incl; margin: 0; min-height: 0; font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.vendor-grid[data-view="services"] .facts-ladder { grid-area: ladder; gap: 4px; min-width: 0; }
.vendor-grid[data-view="services"] .facts-ladder span { max-width: 100%; padding: 2px 8px; white-space: normal; }
.vendor-grid[data-view="services"] .facts-row { grid-area: row; margin: 0; padding: 0; border: 0; gap: 12px; }
.vendor-grid[data-view="services"] .facts-row dd { font-size: 14px; font-weight: 500; }
.vendor-grid[data-view="services"] .vendor-card .vendor-preview.facts.candidate { background: transparent; }
.vendor-grid[data-view="services"] .facts.candidate .preview-price { color: var(--muted); font-weight: 500; }
.facts-top .checked, .facts-top .listed-date, .type-full { color: var(--muted); }
/* Homepage: charcoal backdrop, inset paper composer, generous grey sections. */
:is(body:not(.app), body.app.site) .topbar { background: #222323; backdrop-filter: none; box-shadow: 0 1px 0 #414242; }
:is(body:not(.app), body.app.site) .topbar :is(.brand,.tab,.ghost-pill) { color: #eee; }
body:not(.app) #view-plan > .wrap:first-child { background: #222323; padding-block: 20px 40px; }
body:not(.app) .hero { padding: 40px 0 20px; text-align: left; }
body:not(.app) .hero-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 64px; align-items: center; }
body:not(.app) .hero h1 { grid-column: 1; grid-row: 1; font-size: clamp(36px,4.2vw,58px); font-weight: 400; letter-spacing: -.04em; line-height: 1.08; margin: 0 0 22px; text-align: left; text-shadow: none; }
body:not(.app) .hero .lede { grid-column: 1; grid-row: 2; margin: 0; font-size: 15px; line-height: 1.8; color: #bfc1bf; text-align: left; text-wrap: pretty; }
.hero .hero-actions { display: none; }
body:not(.app) .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; grid-column: 1; grid-row: 3; margin-top: 26px; }
body:not(.app) .hero-actions .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body:not(.app) .hero-actions .btn:not(.btn-primary) { background: none; border-color: #666; color: #eee; }
body:not(.app) .composer { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 100%; margin: 0; padding: 0; background: var(--page); backdrop-filter: none; perspective: 1200px; }
.composer-heading { font: 400 24px/1.2 var(--display); margin: 0 0 20px; }
.composer textarea { font: 400 15px/1.7 var(--sans); }
body:not(.app) .composer-card { padding: 28px; background: var(--page); min-height: 320px; }
body:not(.app) .composer textarea { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); padding: 12px; min-height: 112px; }
body:not(.app) .composer-status { grid-column: 2; color: #ddd; }
body:not(.app) .hero-in > * { animation: none; }
body.app .composer-heading { display: none; }
body:not(.app) .examples-row { justify-content: flex-start; margin-top: 32px; }
body:not(.app) .example { background: #303131; border: 1px solid #555; color: #eee; box-shadow: none; }
body:not(.app) .hero-mcp { text-align: left; }
body:not(.app) .link-on-sky { color: #ccc; background: transparent; border: 0; box-shadow: none; }
.feature-grid .feature { border-top: 1px solid var(--text); padding-top: 20px; }
.feature-grid .f-art { display: none; }
.hb-copy h2, .hb-head h2, .section-head h2, .hb-card h3 { font-family: var(--display); font-weight: 400; }
.hb-copy > p, .hb-head .muted { font-size: 15px; }
.hb-card h3 { font-size: 20px; }
.cb-stats { max-width: none; padding: 24px 0; border-block: 1px solid var(--line); }
.cb-stats dd { font-size: 28px; color: var(--text); font-weight: 400; }
.pv, .hb-card .pv { background: var(--surface-2); border: 1px solid var(--line); }
/* Depth is finite and triggered by arrival or interaction; never a continuous floating loop. */
body:not(.app) .composer { --tilt-x: 0deg; --tilt-y: 0deg; transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease); box-shadow: 0 7px 0 -3px #c8cbcc, 0 14px 0 -7px #777b7d, 0 25px 50px -12px #0007; }
body:not(.app) .composer:focus-within { transform: none; }
.home-depth.shown { animation: home-depth 720ms var(--ease) both; animation-delay: var(--depth-delay,0ms); }
@keyframes home-depth { from { translate: 0 26px; } to { translate: 0 0; } }
.home-more :is(.hb-card,.feature,.pv) { transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease); }
@media(hover:hover) and (pointer:fine) {
  body:not(.app) .home-more :is(.hb-card,.feature):hover { transform: translateY(-5px); }
  body:not(.app) .home-more .pv:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -22px #20212166; }
}
@media(min-width:900px) { body.app .wrap { padding-inline: 44px; } }
@media(max-width:1100px) {
  .vendor-grid[data-view="services"] .register-head { display: none; }
  .vendor-grid[data-view="services"] .vendor-preview.facts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "top price" "top incl" "ladder row"; grid-template-rows: auto auto auto; row-gap: 4px; }
  .vendor-grid[data-view="services"] .facts-ladder, .vendor-grid[data-view="services"] .facts-row { margin-top: 12px; }
  body:not(.app) .hero-in { column-gap: 32px; }
  body:not(.app) .composer-bar { flex-wrap: wrap; }
}
@media(max-width:700px) {
  body:not(.app) .hero-in { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  body:not(.app) .hero h1 { margin: 0; font-size: 42px; }
  body:not(.app) .hero-actions { margin: 0 0 12px; order: 2; }
  body:not(.app) .composer { order: 3; }
  body:not(.app) .composer-status { order: 4; }
  body:not(.app) .composer-card { padding: 22px; }
  body:not(.app) .hero { padding-top: 24px; }
  .btn { min-height: 44px; }
  .vendor-grid[data-view="services"] .vendor-preview.facts { grid-template-columns: minmax(0,1fr); grid-template-areas: "top" "price" "incl" "ladder" "row"; gap: 4px; padding: 18px 4px; }
  .vendor-grid[data-view="services"] .facts-price { margin-top: 10px; }
  .cb-stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .cb-stats dt { font-size: 12px; }
  .cb-stats dd { font-size: 28px; }
}
@media(prefers-reduced-motion:reduce) {
  .home-depth.shown { animation: none; }
  body:not(.app) .composer, body:not(.app) .home-more :is(.hb-card,.feature,.pv):hover { transform: none; }
}
:is(body:not(.app), body.app.site) .topbar .ghost-pill { background: transparent; border: 1px solid #666; }
:is(body:not(.app), body.app.site) .topbar .ghost-pill:hover { background: #393a3a; }
body:not(.app) .examples-row { display: flex; justify-content: flex-start; }
/* The same control geometry on filters, search, account controls, and tabs. */
.search input, .fl-pill, .fl-more, .fl-chip, .depth-seg .count, .facts-plans span,
.preview-plans span, .subtab, .vendor-mark, .vendor-mark.xl, .settings-tabs button,
.account-btn, .chip, .pill, .set-tab, .toggle button { border-radius: 4px; }
.search input { box-shadow: none; min-height: 38px; font-size: 13px; }
.subtab { padding: 0 14px; margin-bottom: 0; border-bottom: 0; }
.filter-bar { background: var(--page); }
/* The search and the pricing-depth switch beside it share one height. */
.browse-bar .search input { min-height: 40px; }
@media(pointer:fine) { .browse-bar .depth-segs { padding: 3px; } .browse-bar .depth-seg { min-height: 32px; } }
.vendor-hero { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 14px 18px; margin: 20px 0 28px; }
.vendor-hero > .vendor-mark { width: 54px; height: 54px; border-radius: 4px; background: var(--surface-2); color: var(--text); }
.vendor-hero > h1 { grid-column: 2; grid-row: 1; }
.vendor-hero > .hero-actions { grid-column: 3; grid-row: 1; }
.vendor-hero > .meta-row { grid-column: 1 / -1; padding-block: 14px; }
.plan-list { gap: 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.plan-list > .card { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; padding: 26px 24px; }
.plan-list > .card:last-child { border-right: 0; }
.plan-head { flex-direction: column; gap: 12px; margin-bottom: 22px; }
.plan-head h2 { font: 400 24px var(--display); }
.plan-price { font-size: 20px; font-weight: 400; }
.vendor-tab-body > .card { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 24px 0; }
@media(max-width:700px) {
  .vendor-hero { grid-template-columns: 44px minmax(0,1fr); }
  .vendor-hero > .vendor-mark { width: 44px; height: 44px; }
  .vendor-hero > .hero-actions { grid-column: 1 / -1; grid-row: auto; }
  .plan-list > .card { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 6px; }
  .subtab { padding-inline: 10px; }
}
.fpill, .fl-pop, .filters-dialog, .facts-plans > *, .ai-apps li,
.kind-tag, .switch, .alert-email .ok, .alert-email .bad, .bill-status,
.iv-opt em, .btn-text, .ssr-logo { border-radius: 4px; }
.fpill { font-size: 13px; }
body.app .mobile-bar { background: var(--surface-2); }

/* Signed in or out: the homepage hero's headline and lede for each (boot.js and app.js set body.signed-in). */
body.signed-in .hero .for-out, body:not(.signed-in) .hero .for-in { display: none; }
body.signed-in .sidebar .for-out { display: none; }
/* Switching between the homepage and the app after the page is drawn (signing in or out) is one step:
   entrance animations don't replay, and the whole page cross-fades where view transitions exist. */
body.mode-switched .hero-in > *, body.mode-switched .welcome { animation: none; }
.vt-mode::view-transition-old(root), .vt-mode::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--ease); }

/* Ways to build it: a ruled comparison. Each option is a column on one subgrid, so name, fit, cost,
   the Use button, summary, pros and cons, and who does what line up across options. The one in use
   is told by its edge (a 2px Carolina rule on top) and a Carolina In Use button. */
.arch-grid { display: grid; grid-template-columns: repeat(var(--arch-cols, 3), minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 0; align-items: stretch; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.arch-opt { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 14px; align-content: start; padding: 22px 22px 24px; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; background: transparent; box-shadow: none; position: relative; transition: background var(--fast) var(--ease); }
.arch-opt:first-child { border-left: 0; }
.arch-opt::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--med) var(--ease); }
.arch-opt.in-use { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); border-color: var(--line-2); box-shadow: none; }
.arch-opt.in-use::before { transform: none; }
.arch-title { align-items: flex-start; }
.arch-title h3 { font: 400 20px/1.2 var(--display); }
.arch-rank { width: 24px; height: 24px; margin-top: 1px; font-size: 12px; }
.arch-cost { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; font-variant-numeric: tabular-nums; }
.arch-cost dt { font-size: 12px; color: var(--muted); }
.arch-cost dd { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.arch-cost dd.arch-now { font-size: 22px; line-height: 1.15; color: var(--text); font-weight: 500; }
.arch-opt > .arch-use { align-self: start; justify-self: stretch; width: 100%; min-height: 40px; margin: 0; gap: 8px; font-weight: 600; }
.arch-use:not(.on):hover { border-color: var(--text); background: var(--surface); }
.arch-use.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); cursor: default; }
.arch-use.on:active { transform: none; }
.arch-use .check { width: 15px; height: 15px; }
.arch-verdict { display: flex; flex-direction: column; gap: 8px; }
.arch-roles { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.arch-roles h4 { margin: 0; font: 600 12px var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; }
.arch .follow-up { border-top: 0; padding-top: 4px; }
@media (max-width: 900px) {
  .arch-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .arch-opt { grid-row: auto; grid-template-rows: none; border-left: 0; border-top: 1px solid var(--line); padding: 20px 4px 22px; }
  .arch-opt.in-use { padding-inline: 12px; }
  .arch-opt:first-child { border-top: 0; }
}

/* The interview's way out: Finish shows the results with the answers so far. */
.iv-fine { margin: -4px 0 0; font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 560px) { .iv-fine { text-align: left; } }

/* Settings controls in the shared control geometry: On · Off is the same 4px segmented control as the
   Settings tabs (no pill, no glow), and section titles are Fraunces at 400 like every other heading. */
.segmented { padding: 3px; gap: 3px; border-radius: var(--r); background: var(--surface); border-color: var(--line); }
.segmented button { min-height: 30px; padding: 0 14px; border-radius: var(--r); font-size: 13px; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.segmented button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.segmented[data-save="saving"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.set-head, .arch-head h2, .considered h2, .iv-q, .live-head h2 { font-weight: 400; }
.set-note { padding-bottom: 4px; }
body.no-transitions, body.no-transitions * { transition: none !important; }
/* ---------- Homepage below the hero: Mobbin's order, voice and surfaces ----------
   Bold Public Sans headings in short pairs, large grey prose, soft grey 24px panels, pill buttons, and motion
   inside the visuals (recorded clips, the assistant example) rather than on the layout. Signed in, the
   home shows only My Stacks and the Showcase carousel. */
body.app .hm, body:not(.app) .spotlight { display: none; }
.hm { --hm-ink: #202121; --hm-grey: #6b6c6b; --hm-panel: #efefee; --hm-r: 24px; --hm-out: cubic-bezier(0.16, 1, 0.3, 1); color: var(--hm-ink); }
body:not(.app) .home-more { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(96px, 12vw, 168px); }
.hm + .hm, .spotlight + .hm { margin-top: clamp(112px, 13vw, 184px); }
.hm h2 { margin: 0; font: 700 clamp(36px, 5.2vw, 68px)/1.02 var(--sans); letter-spacing: -0.04em; text-wrap: balance; }
.hm-center { text-align: center; }
.hm p { text-wrap: pretty; }
.hm-fine { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--hm-grey); }
.hm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hm-actions.hm-center { justify-content: center; }
.hm-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--hm-ink, #202121); color: #fff; font: 600 15px var(--sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.hm-pill:hover { background: #3a3b3b; color: #fff; }
.hm-pill--grey { background: #e4e4e3; color: var(--hm-ink, #202121); }
.hm-pill--grey:hover { background: #d8d8d7; color: var(--hm-ink, #202121); }
.hm-pill:active { transform: scale(.98); }
.hm :focus-visible, .site-foot :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.hm-go { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
a.hm-go { color: var(--hm-ink); font-weight: 600; font-size: 15px; }
a.hm-go:hover { color: var(--hm-ink); text-decoration: underline; text-underline-offset: 4px; }
.hm-link { padding: 0; border: 0; background: none; color: var(--hm-ink); font: 600 15px var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* Coverage strip, where Mobbin puts its customer logos. */
.hm-cover { text-align: center; }
.hm-cover h2 { font: 500 15px/1.4 var(--sans); letter-spacing: 0; color: var(--hm-grey); }
.hm-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 44px; margin: 28px auto 0; padding: 0; list-style: none; }
.hm-logos li { display: inline-flex; align-items: center; gap: 10px; font: 650 19px var(--sans); letter-spacing: -0.03em; color: #4a4b4a; }
.hm-logos img { width: 28px; height: 28px; border-radius: 7px; filter: grayscale(1) contrast(1.1); opacity: .8; }
.hm-counts { margin: 28px 0 0; font-size: 14px; color: var(--hm-grey); }
.hm-counts b { color: var(--hm-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Clips: a Pause control that shows on hover, focus or touch. */
.hm-media { position: relative; overflow: hidden; border-radius: 14px; background: #e4e4e3; }
.hm-media video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hm-pause { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: #202121b8; color: #fff; cursor: pointer; opacity: 0; transition: opacity var(--fast) var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hm-pause svg { width: 14px; height: 14px; }
.hm-pause .i-pause path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.hm-pause .i-play path { fill: currentColor; }
.hm-pause .i-play, .paused > .hm-pause .i-pause { display: none; }
.paused > .hm-pause .i-play { display: block; }
.hm-media:hover .hm-pause, .hm-tile:hover .hm-pause, .hm-pause:focus-visible, .held > .hm-pause { opacity: 1; }
@media (hover: none) { .hm-pause { opacity: 1; } }

/* One place for every decision: soft grey tiles, each a clip, a name and one line. */
.hm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.hm-tile { position: relative; display: flex; flex-direction: column; padding: 10px 10px 24px; border-radius: var(--hm-r); background: var(--hm-panel); transition: background var(--fast) var(--ease); }
.hm-tile:hover { background: #e7e7e6; }
.hm-tile h3 { margin: 20px 12px 4px; font: 650 20px/1.2 var(--sans); letter-spacing: -0.025em; }
.hm-tile .hm-go::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: var(--hm-r); }
.hm-tile .hm-go:focus-visible { outline: none; }
.hm-tile .hm-go:focus-visible::after { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.hm-tile p { margin: 0 12px; font-size: 15px; line-height: 1.5; color: var(--hm-grey); }
.hm-tools > .hm-fine { margin-top: 20px; }

/* Your AI assistant: the pitch, then a live example in a grey panel. */
.hm-agent { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 48px clamp(40px, 6vw, 96px); }
.hm-agent h2 { font-size: clamp(34px, 4.2vw, 56px); }
.hm-agent-copy > p:not(.hm-fine) { max-width: 44ch; margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--hm-grey); }
.hm-clients { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 32px 0 0; padding: 0; list-style: none; }
.hm-clients li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #4a4b4a; }
.hm-chat { display: flex; flex-direction: column; gap: 14px; min-height: 480px; margin: 0; padding: clamp(18px, 3vw, 32px); border-radius: var(--hm-r); background: var(--hm-panel); }
.hm-chat-ask { align-self: flex-end; max-width: 88%; margin: 0; padding: 14px 18px; border-radius: 18px 18px 4px 18px; background: #fff; font-size: 15px; line-height: 1.55; box-shadow: 0 1px 2px #2021210f; }
.hm-chat-steps { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--hm-grey); }
.hm-chat-steps li { display: flex; align-items: center; gap: 10px; opacity: 0; }
.hm-chat-steps li::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 999px; border: 1.6px solid #b9bab9; border-top-color: var(--hm-ink); }
.asking .hm-chat-steps li, .answered .hm-chat-steps li { opacity: 1; animation: hmStep 420ms var(--hm-out) both; }
.asking .hm-chat-steps li::before { animation: hmSpin 800ms linear infinite; }
.asking .hm-chat-steps li:nth-child(2) { animation-delay: 600ms; }
.asking .hm-chat-steps li:nth-child(3) { animation-delay: 1200ms; }
.answered .hm-chat-steps li { animation: none; }
.answered .hm-chat-steps li::before { border-color: transparent; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@keyframes hmStep { from { opacity: 0; transform: translateY(4px); } }
@keyframes hmSpin { to { transform: rotate(1turn); } }
.hm-chat-answer:empty { display: none; }
.hm-chat-answer { padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px #2021210f; }
.hm-chat-picks { margin: 0; padding: 0; list-style: none; }
.hm-chat-picks li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; animation: hmRow 520ms var(--hm-out) both; }
.hm-chat-picks li:nth-child(2) { animation-delay: 60ms; } .hm-chat-picks li:nth-child(3) { animation-delay: 120ms; }
.hm-chat-picks li:nth-child(4) { animation-delay: 180ms; } .hm-chat-picks li:nth-child(5) { animation-delay: 240ms; }
.hm-chat-picks li:nth-child(n+6) { animation-delay: 300ms; }
@keyframes hmRow { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.hm-chat-cat { color: var(--hm-grey); font-size: 13px; }
.hm-chat-vendor { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.hm-chat-vendor > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-chat-cost { color: var(--text-2); font-size: 13px; white-space: nowrap; }
.hm-chat-total { margin: 14px 0 12px; font-size: 13px; line-height: 1.55; color: var(--hm-grey); animation: hmRow 520ms 360ms var(--hm-out) both; }
.hm-chat-total strong { display: block; color: var(--hm-ink); font-size: 16px; letter-spacing: -0.01em; }
.hm-chat-answer > a { animation: hmRow 520ms 420ms var(--hm-out) both; }
.hm-chat figcaption { margin-top: auto; padding-top: 8px; font-size: 12px; line-height: 1.6; color: var(--hm-grey); }
.hm-chat code { font-size: 12px; }

/* The Showcase band: where Mobbin keeps customer stories. */
.hm-band { margin-inline: calc(50% - 50vw); padding: clamp(72px, 9vw, 120px) 16px; background: var(--hm-panel); }
@media (min-width: 720px) { .hm-band { padding-inline: 32px; } }
@media (min-width: 1280px) { .hm-band { padding-inline: 48px; } }
.hm-band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.hm-band h2 { font-size: clamp(34px, 4.2vw, 56px); }
.hm-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.hm-story { display: flex; flex-direction: column; min-height: 320px; padding: 28px; border-radius: var(--hm-r); background: #fff; }
.hm-story-name { display: flex; align-items: center; gap: 12px; font-weight: 650; font-size: 16px; letter-spacing: -0.01em; }
.hm-story-name .sc-mono { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.hm-story-line { margin: 44px 0 12px; font: 650 clamp(22px, 2.1vw, 28px)/1.18 var(--sans); letter-spacing: -0.03em; }
.hm-story-tag { margin: 0 0 24px; font-size: 14px; line-height: 1.55; color: var(--hm-grey); }
.hm-story .hm-go { margin-top: auto; }
.hm-band > .hm-fine { margin-top: 20px; }

/* A principle in the size Mobbin gives its testimonial. */
.hm-quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); align-items: end; gap: 32px clamp(40px, 6vw, 96px); }
.hm-quote blockquote { margin: 0; font: 650 clamp(32px, 4.4vw, 58px)/1.08 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.hm-quote blockquote::before { content: "“"; } .hm-quote blockquote::after { content: "”"; }
.hm-quote p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--hm-grey); }
.hm-quote .hm-link { padding-block: 12px; }
.hm-chat-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: 12px; color: var(--hm-grey); }

/* Already built: a centred deep-dive between the logos of services people pay for. */
.hm-deep { position: relative; }
.hm-deep-copy { position: relative; max-width: 760px; margin: 0 auto; padding: 72px 0; text-align: center; }
.hm-deep-copy > p:not(.hm-fine) { max-width: 52ch; margin: 24px auto 0; font-size: 18px; line-height: 1.6; color: var(--hm-grey); }
.hm-float { position: absolute; inset: 0 0 auto; height: 100%; max-height: 560px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.hm-float li { position: absolute; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px #2021210f, 0 14px 30px -18px #20212166; rotate: var(--r, 0deg); }
.hm-float img { width: 44px; height: 44px; border-radius: 10px; }
.hm-float li:nth-child(1) { left: 2%; top: 4%; --r: -8deg; }
.hm-float li:nth-child(2) { left: 9%; top: 46%; --r: 6deg; width: 64px; height: 64px; }
.hm-float li:nth-child(3) { left: 1%; top: 82%; --r: -4deg; width: 60px; height: 60px; }
.hm-float li:nth-child(4) { right: 3%; top: 6%; --r: 7deg; }
.hm-float li:nth-child(5) { right: 10%; top: 44%; --r: -6deg; width: 64px; height: 64px; }
.hm-float li:nth-child(6) { right: 1%; top: 80%; --r: 5deg; width: 60px; height: 60px; }
.hm-facts { max-width: 760px; margin: 24px auto 0; border-bottom: 1px solid var(--line); }
.hm-facts details { border-top: 1px solid var(--line); }
.hm-facts summary { display: flex; align-items: center; min-height: 56px; padding: 0 4px; font-size: 15px; font-weight: 500; cursor: pointer; }
.hm-facts p { max-width: 74ch; margin: 0 4px 20px; font-size: 14px; line-height: 1.75; color: var(--text-2); }

/* Close. */
.hm-close { text-align: center; }
.hm-close p { margin: 24px auto 0; font-size: 18px; color: var(--hm-grey); }

/* The homepage's black footer: link columns, then the wordmark running off the bottom edge. */
.site-foot .foot-cols, .site-foot .foot-word { display: none; }
:is(body:not(.app), body.app.site) .site-foot { margin-top: 0; overflow: hidden; background: #111212; color: #a3a4a3; }
:is(body:not(.app), body.app.site) .foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; padding-top: 80px; padding-bottom: 56px; }
.foot-cols h2 { margin: 0 0 16px; font: 500 14px var(--sans); letter-spacing: 0; color: #8f908f; }
.foot-cols ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.foot-cols :is(a, button) { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: #ececeb; font: 500 15px var(--sans); text-decoration: none; cursor: pointer; }
.foot-cols :is(a, button):hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
:is(body:not(.app), body.app.site) .site-foot .footer { margin-top: 0; padding-block: 24px; border-top: 1px solid #2c2d2d; color: #8f908f; }
:is(body:not(.app), body.app.site) .site-foot .footer a { color: #bcbdbc; }
:is(body:not(.app), body.app.site) .site-foot .footer .made { color: #ececeb; }
:is(body:not(.app), body.app.site) .foot-word { display: block; margin: 8px 0 -0.2em; font: 800 13.4vw/1 var(--sans); letter-spacing: -0.04em; color: #262727; text-align: center; white-space: nowrap; user-select: none; }

:is(#home-decide,#home-billing,#home-watch,#home-audit,#home-showcase,#home-free,#ask) { scroll-margin-top: var(--home-scroll-offset,100px); }
:is(body:not(.app), body.app.site) .topbar .tab:hover { background: #393a3a; }
@media (max-width: 1100px) {
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-agent { grid-template-columns: minmax(0, 1fr); }
  .hm-stories { grid-template-columns: minmax(0, 1fr); }
  .hm-story { min-height: 0; }
  .hm-story-line { margin-top: 28px; }
  .hm-float li:nth-child(2), .hm-float li:nth-child(5) { display: none; }
}
@media (max-width: 860px) {
  .hm-quote { grid-template-columns: minmax(0, 1fr); }
  .hm-float { position: static; display: flex; justify-content: center; gap: 12px; height: auto; margin-bottom: 8px; }
  .hm-float li, .hm-float li:nth-child(n) { position: static; display: grid; width: 56px; height: 56px; border-radius: 16px; }
  .hm-float img { width: 32px; height: 32px; }
  .hm-deep-copy { padding: 24px 0 40px; }
  :is(body:not(.app), body.app.site) .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 56px; }
}
@media (max-width: 700px) {
  :is(body:not(.app), body.app.site) .topbar-inner { gap: 4px 12px; }
  :is(body:not(.app), body.app.site) .topbar .brand { font-size: 20px; }
  :is(body:not(.app), body.app.site) .topbar .brand-mark { width: 30px; height: 36px; }
  :is(body:not(.app), body.app.site) .topbar .account-area > [data-view="connect"] { display: none; }
  :is(body:not(.app), body.app.site) .topbar .tabs { justify-content: space-between; }
  :is(body:not(.app), body.app.site) .topbar .tab { padding-inline: 8px; font-size: 12px; min-height: 44px; }
  .hm-tiles { grid-template-columns: minmax(0, 1fr); }
  .hm-chat { min-height: 0; }
  .hm-chat-picks li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .hm-chat-cat { grid-column: 1 / -1; }
  .hm-story { padding: 24px; }
  .hm-float li:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .asking .hm-chat-steps li, .hm-chat-picks li, .hm-chat-total, .hm-chat-answer > a { animation: none; }
  .asking .hm-chat-steps li::before { animation: none; }
  .hm-pill:active { transform: none; }
}


/* ---------- Rules and controls ----------
   One rule between two things, never two stacked with nothing between them. A tab row marks its
   choice with the active tab's underline alone, so content under it brings its own edge; a table that
   opens a card uses the card's edge as its top rule; and two sections that meet share one line. */
.sort-tabs, .list-head { border-bottom: 0; }
.list-head .sort-tabs { margin-bottom: 0; }
.card > table:first-child, .card > :is(.table-scroll, .directory-table):first-child > table { border-top: 0; }
table > tbody:first-child > tr:first-child > td, table > tr:first-child > td { border-top: 0; }
.picks-head + .pick { border-top: 0; }
.vendor-tab-body > .plan-list:has(+ .card) { border-bottom: 0; }
.depth-callout:has(+ .directory-card) { border-bottom: 0; }

/* Dropdowns and fields: one height with the buttons beside them, a drawn chevron, and a crisp focus ring
   in the link blue instead of a soft halo. Touch screens keep 44px. */
:root { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23656666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E"); }
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; text-overflow: ellipsis; cursor: pointer;
  background: var(--surface) var(--chevron) no-repeat right 12px center / 12px;
}
select:hover, input:not([type="checkbox"], [type="radio"], [type="range"]):hover, textarea:hover { border-color: #b4b6b4; }
select:disabled { cursor: not-allowed; opacity: .6; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink); outline: none; }
@media (pointer: fine) {
  input:not([type="checkbox"], [type="radio"], [type="range"]), select { min-height: 36px; padding-block: 6px; font-size: 14px; }
  .browse-bar .search input { min-height: 40px; }
}
.chip-field select { padding: 0 22px 0 4px; background: transparent var(--chevron) no-repeat right 4px center / 12px; }
.chip-field select:focus, .chip-field input:focus { box-shadow: none; }


/* ---------- Showcase: likes, categories and the digest; the Newsletter page ---------- */
/* The heart: grey until liked, then red, as on BetaList. Its count sits beside it. */
.sc-heart { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none; min-width: 40px; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: 600 13px var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.sc-heart .ico { width: 18px; height: 18px; flex: none; }
.sc-heart:hover { border-color: var(--like); color: var(--like); background: var(--like-soft); }
.sc-heart:active { transform: scale(.92); }
.sc-heart[aria-pressed="true"] { border-color: transparent; background: var(--like); color: #FFFFFF; }
.sc-heart[aria-pressed="true"] .ico { fill: currentColor; animation: heartPop 380ms var(--spring); }
.sc-heart-n:empty { display: none; }
.sc-heart.big { min-height: 44px; height: auto; padding: 0 18px; font-size: 14px; gap: 8px; }
@keyframes heartPop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sc-heart[aria-pressed="true"] .ico { animation: none; } }
.sc-liked-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.sc-liked-toggle .sc-ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.sc-liked-toggle[aria-pressed="true"] { border-bottom-color: var(--like); }
.sc-liked-toggle[aria-pressed="true"] .sc-ico { fill: var(--like); stroke: var(--like); }

/* Categories: a row of chips with icons and counts, scrolling sideways on narrow screens. */
.sc-cat-ico { width: 16px; height: 16px; flex: none; }
/* They lead the filter bar: the chips scroll in the room the pills leave, and each takes a row of its own when it's narrow. */
.sc-cats { display: flex; gap: 8px; flex: 1 1 0; min-width: 0; margin: 0; padding: 2px 12px 2px 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; border-right: 1px solid var(--line-2); }
.sc-cats::-webkit-scrollbar { display: none; }
.fbar-pills { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; }
.fbar-pills .fbar-status { white-space: nowrap; }
#sc-filter-bar { flex-wrap: nowrap; }
@media (max-width: 1100px) {
  #sc-filter-bar { flex-wrap: wrap; overflow: visible; }
  #sc-filter-bar .sc-cats, #sc-filter-bar .fbar-pills { flex: 1 1 100%; border-right: 0; padding-right: 0; }
  #sc-filter-bar .fbar-pills { overflow-x: auto; scrollbar-width: none; }
  #sc-filter-bar .fbar-pills::-webkit-scrollbar { display: none; }
}
/* A fade at the end says there's more to scroll to, until there isn't. */
.sc-cats.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.sc-cat { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font: 500 13.5px var(--sans); white-space: nowrap; cursor: pointer; scroll-snap-align: start; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.sc-cat:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--text); }
.sc-cat.on { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.sc-cat.empty { color: var(--muted); border-style: dashed; }
.sc-cat-n { padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 600 11.5px var(--sans); font-variant-numeric: tabular-nums; }
.sc-cat.on .sc-cat-n { background: var(--surface); color: var(--accent-ink); }
.sc-cat-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sc-cat-link:hover { color: var(--accent-ink); }
.sc-cat-link .sc-cat-ico { width: 14px; height: 14px; }
.sc-hero-badges .sc-cat-link { padding: 4px 10px; }

/* The band under the grid: the daily digest and a link to add a product. A known address leaves only the
   button; a subscription leaves one line. */
.sc-digest { display: grid; grid-template-columns: auto 1fr minmax(0, 420px); gap: 10px 16px; align-items: center; margin: 8px 0 48px; padding: 16px 20px; background: linear-gradient(135deg, var(--sky-4), var(--surface) 70%); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.sc-digest-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--on-accent); }
.sc-digest-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-digest-title { margin: 0; font: 650 18px var(--display); }
.sc-digest-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.sc-digest-foot .hint { margin: 0; }
.sc-digest-foot .link-btn { color: var(--muted); }
.sc-digest-foot .link-btn:hover { color: var(--accent-ink); }
.sc-digest.known { grid-template-columns: auto 1fr auto; }
.sc-digest.known .submit-row input { display: none; }
.sc-digest.subscribed { display: block; padding: 12px 20px; }
.sc-digest.subscribed > :not(.sc-digest-foot) { display: none; }
.digest-msg { min-height: 1.4em; }
.digest-msg.err { color: var(--warn); }
[data-digest-form].subscribed .digest-msg { color: var(--ok); }
.sc-digest.subscribed .digest-msg { color: var(--text-2); }
@media (max-width: 700px) {
  .sc-digest:not(.known) { grid-template-columns: auto 1fr; }
  .sc-digest:not(.known) .submit-row { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .sc-digest { padding: 14px 16px; }
  .sc-digest:not(.known) .submit-row { flex-direction: column; }
}

/* The Newsletter page */
.nl-hero { max-width: 640px; margin: 56px auto 36px; text-align: center; }
.nl-hero h1 { font-size: clamp(36px, 5.6vw, 58px); line-height: 1.04; margin: 0 0 14px; text-wrap: balance; }
.nl-hero > .muted { font-size: 17px; }
.nl-kicker { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.nl-form { display: grid; gap: 12px; margin-top: 28px; padding: 20px; text-align: left; box-shadow: var(--shadow-2); }
.nl-freq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
.nl-opt { position: relative; display: block; cursor: pointer; }
.nl-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nl-opt > span { display: grid; gap: 2px; height: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--line); border-radius: var(--r); transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.nl-opt > span::before { content: ''; box-sizing: border-box; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface); transition: border var(--fast) var(--ease); }
.nl-opt strong { font: 600 15px var(--sans); }
.nl-opt small { color: var(--muted); font-size: 13px; }
.nl-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.nl-opt input:checked + span::before { border: 5px solid var(--accent); }
.nl-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.nl-form .digest-msg { margin: 0; text-align: center; }
.nl-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; max-width: 1040px; margin: 0 auto 64px; align-items: start; }
.nl-side { display: grid; gap: 20px; }
.nl-sample h2, .nl-side h2 { margin: 0 0 4px; font: 650 18px var(--display); }
.nl-issue { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.nl-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line-2); }
.nl-item:first-child { border-top: 0; padding-top: 4px; }
.nl-meta { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.nl-logos { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.nl-logo { display: inline-flex; border-radius: 12px; transition: transform var(--fast) var(--ease); }
.nl-logo:hover { transform: translateY(-2px); }
@media (max-width: 820px) { .nl-cols { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .nl-hero { margin-top: 32px; }
  .nl-freq { grid-template-columns: 1fr; }
  .nl-form .submit-row { flex-direction: column; }
}

/* ---------- Build Library (app.js renderBuilds) ---------- */
.lib-group { margin-bottom: 36px; }
.lib-group-head { margin: 0 0 12px; font-size: 18px; }
.lib-card { display: flex; flex-direction: column; }
.lib-card .hint { margin: 6px 0 14px; font-size: 13.5px; line-height: 1.45; }
/* Pinned to the card's foot so the three stages line up across a row of cards. */
.lib-costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); }
.lib-costs span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-costs small { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lib-costs b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lib-back { margin: 28px 0 0; font-size: 14px; }
.lib-head { margin-top: 16px; align-items: flex-start; }
.lib-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-stage { margin-bottom: 16px; }
.lib-stage h2 { margin: 14px 0 6px; font-size: 20px; }
.lib-adds { display: grid; gap: 4px; margin: 4px 0 8px; font-size: 13.5px; }
.lib-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.lib-table th, .lib-table td { padding: 10px 8px; border-bottom: 1px solid var(--line-2); text-align: left; font-size: 14px; }
.lib-table th { font-size: 12px; font-weight: 600; color: var(--muted); }
.lib-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lib-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-bottom: 16px; }
.lib-cols h2 { margin: 0 0 10px; font-size: 18px; }
.lib-list { display: grid; gap: 8px; margin: 0; }
.lib-list li { font-size: 14.5px; line-height: 1.45; }

/* ---------- Community builds (app.js communitySection, renderSharedBuild) ---------- */
.lib-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lib-card-top .sc-heart { height: 30px; min-width: 34px; padding: 0 8px; font-size: 12px; }
.lib-group-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 16px; }
.lib-group-row .lib-group-head { margin-bottom: 0; }
.lib-group-row .hint { margin: 0; max-width: 60ch; }
.lib-group-row .btn { margin-top: 10px; }
.lib-by { margin-top: 4px !important; font-weight: 500; }
.lib-credit { margin: 10px 0 0; font-size: 14.5px; }
.lib-status { margin: 16px 0 0; border-color: var(--warn, #B45309); }
.lib-status p { margin: 4px 0 0; }
.lib-flag { color: var(--muted); font-size: 13.5px; }
.share-form textarea, .flag-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
.share-agree { margin: 16px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.share-agree legend { padding: 0 6px; font: 600 13px var(--sans); }
.share-agree ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.share-check { display: flex !important; align-items: flex-start; gap: 8px; margin: 6px 0 !important; font-weight: 500; cursor: pointer; }
.share-check input { margin-top: 3px; }
.flag-reasons { border: 0; padding: 0; margin: 8px 0; }
.set-actions { display: flex; align-items: center; gap: 12px; }
.flag-reasons input[type="radio"], .share-check input { width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; flex: none; margin: 3px 0 0 !important; }
.set-card > .set-note { padding: 16px 20px; }
#settings-body .set-section + .set-section { margin-top: 28px; }

/* Build pack: setup steps on a saved stack, and the Start Building card on a plan */
.build-steps { display: grid; gap: 12px; margin: 10px 0 14px; padding: 0; list-style: none; }
.build-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.build-step { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; cursor: pointer; }
.build-step input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--accent); }
.build-step:has(input:checked) > span { color: var(--muted); }
.build-indent { margin: 4px 0 0 28px; }
.fw-field { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.fw-field label { margin: 0; font-size: 13px; font-weight: 500; white-space: nowrap; }
.fw-field select { width: auto; min-width: 200px; min-height: 36px; padding: 0 12px; font-size: 14px; }
.build-steps code { font-size: 12px; }
.repo-link { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.repo-row { display: flex; gap: 8px; margin: 8px 0; }
.repo-row .repo-input { flex: 1; min-width: 0; }
ul.repo-list { display: grid; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.repo-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.repo-list .bill-status { min-width: 78px; text-align: center; }
.repo-drift-head { margin: 12px 0 0; }
.availability-note { margin: 16px 0; padding: 14px 18px; border-left: 4px solid var(--accent); }
.availability-note.is-shut_down, .availability-note.is-shutting_down { border-left-color: var(--warn); }
.availability-note strong { display: block; margin-bottom: 4px; }
.availability-note p { margin: 4px 0 0; }
.tool-details { margin-top: 8px; }
.tool-details summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.tool-list code { font-size: 12px; color: var(--muted); }
.start-building .stack-actions, .build-pack .stack-actions { flex-wrap: wrap; align-items: center; }
.continue-help { display: grid; gap: 8px; margin: 10px 0 14px; }
.continue-prompt { margin: 0; white-space: pre-wrap; font-size: 12px; }

/* Questions card: "That's Right" keeps an assumption (H4) */
.q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.q-keep { flex: none; }
@media (max-width: 560px) { .q-head { flex-direction: column; } }

/* Host moves (plan_migration): the verdict first, then what moves, the app spec and the cutover. */
.mig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mig-verdict { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 14px 16px; background: var(--surface-2); }
.mig-verdict.mig-stay { border-left-color: var(--ok); }
.mig-verdict p { margin: 6px 0 10px; color: var(--text-2); }
.mig-call { font-size: 1.05rem; }
.mig-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mig-stats > div { display: grid; gap: 2px; align-content: start; }
.mig-stats .k { color: var(--muted); font-size: 0.82rem; }
.mig-list { display: grid; gap: 10px; }
.mig-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); }
.mig-kind.bad { background: var(--warn-soft); color: var(--warn-ink); }
.mig-kind.warn { background: var(--info-soft); color: var(--info); }
.mig-kind.ok { background: var(--ok-soft); color: var(--ok); }
.mig-spec { max-height: 320px; overflow: auto; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 0.8rem; }
.mig-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mig-list li:not(:has(.build-tick)) .build-indent { margin-left: 0; }

/* The top of a plan: one recommendation, whether it is complete, its whole cost and the next steps. */
.rec-summary { display: grid; gap: 14px; }
.rec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rec-kicker { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rec-top h2 { margin: 0; }
.rec-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--ok-soft); color: var(--ok); }
.rec-status.partially_priced { background: var(--info-soft); color: var(--info); }
.rec-status.missing_requirements { background: var(--warn-soft); color: var(--warn-ink); }
.rec-status-hint { margin: -8px 0 0; color: var(--muted); font-size: 14px; }
.rec-missing, .arch-missing { margin: 0; padding: 10px 14px; border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--warn-ink); font-size: 14px; line-height: 1.5; }
.arch-missing { font-size: 13px; padding: 8px 10px; }
.rec-cost { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; font-variant-numeric: tabular-nums; }
.rec-cost > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.rec-cost dt { font-size: 13px; color: var(--muted); }
.rec-cost dd { margin: 4px 0 0; display: grid; gap: 4px; }
.rec-cost dd strong { font: 650 26px/1.1 var(--sans); }
.rec-cost dd span { font-size: 13px; color: var(--text-2); }
.rec-excluded { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.rec-assume { font-size: 14px; color: var(--text-2); }
.rec-assume summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-weight: 500; }
.rec-assume ul { margin: 6px 0 8px; padding-left: 18px; }
.rec-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rec-reqs { border-top: 1px solid var(--line); padding-top: 12px; }
.rq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rq-head h3 { margin: 0; font-size: 16px; }
.rec-reqs dl { margin: 10px 0 0; display: grid; gap: 8px; }
.rq-row { display: grid; grid-template-columns: 170px 1fr; gap: 8px; align-items: start; }
.rq-row dt { font-size: 13px; color: var(--muted); padding-top: 4px; }
.rq-row dd { margin: 0; }
.rq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rq-item { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; background: var(--surface); }
.rq-item em { font-style: normal; color: var(--muted); font-size: 12px; }
.rq-item.cov-unavailable, .rq-item.cov-unresolved { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.rq-item.cov-unavailable em, .rq-item.cov-unresolved em { color: var(--warn-ink); font-weight: 600; }
.plan-cost-table tr.sub th, .plan-cost-table tr.sub td { font-weight: 500; color: var(--text-2); }
.svc-kind { display: block; font-size: 12px; font-weight: 400; }
@media (max-width: 640px) {
  .rq-row { grid-template-columns: 1fr; gap: 4px; }
  .rq-row dt { padding-top: 0; }
  .rec-actions .btn { flex: 1 1 100%; }
}

/* Audit: lines graded D or F beside the overall grade, and an upgrade's facts. */
.attention { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.attention li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.attention .grade.sm { flex: none; }
.upgrade-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.upgrade-facts dt { font-size: 12px; color: var(--muted); }
.upgrade-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.upgrade-facts .why { grid-column: 1 / -1; }
.upgrade-facts .why dd { font-weight: 400; }

/* Showcase submissions: the honeypot stays off screen, the receipt and status read at a glance. */
.sub-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sub-more { margin: 12px 0 4px; }
.sub-more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 500; }
.sub-fallback { margin-top: 10px; }
.sub-receipt { display: grid; gap: 10px; }
.sub-receipt h3 { margin: 0; }
.sub-ref { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.sub-ref strong { font: 600 20px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.sc-submission { margin-bottom: 18px; display: grid; gap: 8px; }
.sub-status-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sub-status-head h2 { margin: 0; }
.sub-state { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--info-soft); color: var(--info); }
.sub-state.listed { background: var(--ok-soft); color: var(--ok); }
.sub-state.needs_information, .sub-state.not_listed { background: var(--warn-soft); color: var(--warn-ink); }
.sub-more summary::before, .rec-assume summary::before { content: '+'; display: inline-block; width: 1.2em; font-weight: 600; color: var(--accent-ink); }
.sub-more[open] summary::before, .rec-assume[open] summary::before { content: '−'; }

/* Showcase product: what running something like it costs, beside the stack. */
.sc-cost-note { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.sc-cost-note p { margin: 0; line-height: 1.5; }
.sc-cost-note p + p { margin-top: 6px; }

/* Touch screens: every tab, pill and chip is at least 44px tall (vendor tabs were 28px). */
@media (pointer: coarse) {
  .subtab, .fpill, .sc-cat, .answer-chip, .btn-sm, .prd summary, .rec-assume summary, .cl-line { min-height: 44px; }
  .subtabs { gap: 4px; }
}

/* Showcase screenshots: a button that enlarges them, and one view per platform. */
.sc-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-lg); }
.sc-zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sc-zoom-hint { margin: 8px 0 0; text-align: center; }
.shot-dialog { width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 16px; border: 1px solid var(--modal-edge); border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: var(--modal-shadow); }
.shot-dialog::backdrop { background: var(--overlay); }
.shot-dialog .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.shot-dialog .dialog-head h2 { margin: 0; font-size: 18px; }
.shot-views { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.shot-views button[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.shot-frame { display: flex; justify-content: center; overflow: auto; max-height: calc(100vh - 170px); }
.shot-frame img { max-width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); }
.shot-frame img.mobile { max-height: calc(100vh - 190px); width: auto; }
/* Plan results: what is secondary sits in a disclosure. */
.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; font: 600 16px var(--sans); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--accent-ink); font-weight: 600; }
.fold[open] > summary::before { content: '−'; }
.arch-roles.fold { display: block; }
.arch-roles.fold > summary { font: 600 13px var(--sans); color: var(--text-2); }
.arch-roles.fold[open] .roles { margin-top: 8px; }
.considered.fold > summary { font: 400 19px var(--display); }
.considered.fold[open] > summary { margin-bottom: 8px; }
.sources.fold > summary { font: 600 13px var(--sans); color: var(--text-2); min-height: 36px; }

/* Signed out: what My Stacks and Billing hold, with an example row marked as one. */
.signed-out-preview { margin-top: 16px; display: grid; gap: 12px; }
.signed-out-preview h2 { margin: 0; }
.so-example { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.so-example > div { display: grid; gap: 2px; font-size: 14px; }
.so-example .muted { font-size: 12.5px; }
.so-tag { align-self: start; padding: 2px 8px; border-radius: 999px; background: var(--info-soft); color: var(--info); font-size: 12px; font-weight: 600; }
@media (max-width: 640px) { .so-example { grid-template-columns: 1fr; } }
.mig-todo { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--warn-ink); font-size: 14px; }
.mig-todo ul { margin: 6px 0 0; padding-left: 18px; }
.stack-actions > .mig-todo { flex-basis: 100%; margin: 0 0 4px; }
/* ---------- MCP: /connect ----------
   A Read page in the app's world: Fraunces 400 headings, ruled sections under an ink rule, 4px corners.
   One authored moment: the example answer, a real price_change result whose steps tick through while it loads. */
.cx { max-width: 1120px; }
.cx-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 56px; align-items: start; margin: 48px 0 8px; }
.cx-intro h1 { margin: 0 0 16px; font: 400 clamp(32px, 3.6vw, 44px)/1.06 var(--display); letter-spacing: -.03em; text-wrap: balance; max-width: 17ch; }
.cx-lede { margin: 0 0 28px; font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 54ch; text-wrap: pretty; }
.cx-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cx-address .copy-row code { font-size: 13px; font-variant-numeric: tabular-nums; background: var(--surface); }
.cx-fine { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.cx-fine a { color: var(--accent-ink); text-underline-offset: 3px; }

/* The example conversation: a quiet sheet, the user's words in the secondary tone. */
.cx-example { margin: 4px 0 0; padding: 20px 22px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 1px 2px #2021210a, 0 12px 32px -18px #20212133; }
.cx-turn { margin: 0 0 16px; }
.cx-turn p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.cx-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cx-turn--you p { padding: 12px 14px; background: var(--surface-2); border-radius: var(--r); color: var(--text); }
.cx-mark { width: 18px; height: 18px; flex: none; }
.cx-ex-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--muted); transition: opacity 400ms cubic-bezier(.16, 1, .3, 1), max-height 500ms cubic-bezier(.16, 1, .3, 1); max-height: 90px; overflow: hidden; }
.cx-ex-steps li { position: relative; padding-left: 20px; opacity: .55; transition: opacity 300ms cubic-bezier(.16, 1, .3, 1), color 300ms; }
.cx-ex-steps li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; }
.cx-ex-steps li.done { opacity: 1; color: var(--text-2); }
.cx-ex-steps li.done::before { border-color: var(--accent-ink); background: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--surface); }
.cx-ex-steps.settled { opacity: .7; }
.cx-ex-answer > * { animation: cx-in 520ms cubic-bezier(.16, 1, .3, 1) both; }
.cx-ex-answer > *:nth-child(2) { animation-delay: 80ms; }
.cx-ex-answer > *:nth-child(n+3) { animation-delay: 160ms; }
@keyframes cx-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }
.cx-ex-cost { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 0 12px; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.cx-ex-cost div { padding: 10px 0; }
.cx-ex-cost div + div { padding-left: 16px; border-left: 1px solid var(--line-2); }
.cx-ex-cost dt { font-size: 12px; color: var(--muted); }
.cx-ex-cost dd { margin: 2px 0 0; font: 400 26px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cx-example figcaption { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 12px; line-height: 1.45; color: var(--muted); }

/* Sections: an ink rule, the heading, then the content. */
.cx-sec { margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--text); }
.cx-sec-head { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 8px 40px; margin-bottom: 24px; align-items: baseline; }
.cx-sec-head h2 { margin: 0; font: 400 24px/1.15 var(--display); letter-spacing: -.015em; }
.cx-sec-lede { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); max-width: 64ch; }

/* Install: segmented tabs with the apps' marks, then the steps. */
.cx-tabs { margin-bottom: 0; }
.cx-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.cx-tab img { width: 16px; height: 16px; }
.cx-panel { margin-top: 20px; max-width: 760px; }
.cx-panel:focus-visible { outline-offset: 6px; }
.cx-steps { list-style: none; counter-reset: cx; margin: 0; padding: 0; }
.cx-steps li { counter-increment: cx; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.cx-steps li:first-child { padding-top: 0; }
.cx-steps li::before { content: counter(cx); grid-row: span 2; font: 400 20px/1.2 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.cx-steps p { margin: 0; font-size: 14px; line-height: 1.55; }
.cx-steps li > :not(p):not(:first-child) { grid-column: 2; margin-top: 10px; justify-self: start; max-width: 100%; }
.cx-steps .copy-row { width: 100%; }
.cx-steps pre { margin: 0; width: 100%; }

/* What to ask: a ruled register, one workflow per row. */
.cx-flows { list-style: none; margin: 0; padding: 0; }
.cx-flow { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 40px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cx-flow:first-child { padding-top: 4px; }
.cx-flow h3 { margin: 0 0 8px; font: 400 19px/1.2 var(--display); letter-spacing: -.01em; }
.cx-flow-ask { position: relative; padding-right: 40px; }
.cx-flow-ask blockquote { margin: 0; }
.cx-flow-ask blockquote p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.cx-flow-ask blockquote p::before { content: '“'; }
.cx-flow-ask blockquote p::after { content: '”'; }
.cx-flow-ask .icon-btn { position: absolute; top: 18px; right: 0; }
.cx-flow-does p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.cx-tools { color: var(--muted); }
.cx-tools code, .cx-shortcuts code { font-size: 12px; padding: 1px 5px; background: var(--surface-2); border-radius: var(--r); color: var(--text-2); }

/* Tips: two ruled columns. */
.cx-tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.cx-tips li { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.cx-tips strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.cx-tips p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); max-width: 58ch; }

.cx-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.cx-col h3 { margin: 0 0 10px; font: 400 18px/1.2 var(--display); }
.cx-col .checks { margin: 0; }

.cx .snippet { max-width: 860px; }
.cx-shortcuts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 24px; margin: 0 0 20px; max-width: 860px; }
.cx-shortcuts dt, .cx-shortcuts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.cx-shortcuts dd { color: var(--text-2); }
#view-connect .connected-list { max-width: 760px; }

@media (max-width: 960px) {
  .cx-head { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .cx-sec-head, .cx-flow { grid-template-columns: minmax(0, 1fr); }
  .cx-flow { gap: 12px; }
}
@media (max-width: 640px) {
  .cx-tips, .cx-split { grid-template-columns: minmax(0, 1fr); }
  .cx-sec { margin-top: 48px; }
  .cx-tabs { width: 100%; overflow-x: auto; }
  .cx-shortcuts { grid-template-columns: minmax(0, 1fr); }
  .cx-shortcuts dt { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-ex-answer > * { animation: none; }
  .cx-ex-steps, .cx-ex-steps li { transition: none; }
}

/* The plan in stages: Approach, Services, Assumptions, Cost, Build. One stage shows under the summary;
   the stepper is a ruled row, the stage in view marked by a 2px Carolina edge like the option in use. */
.stages { margin-top: 8px; }
.stages ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.stage-step[hidden] { display: none; }
.stage-step + .stage-step { border-left: 1px solid var(--line-2); }
.stage-tab { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 64px; padding: 14px 16px; border: 0; border-radius: 0; background: transparent; color: var(--text-2); font: inherit; text-align: left; cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.stage-tab::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--med) cubic-bezier(.16, 1, .3, 1); }
.stage-tab:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.stage-tab:focus-visible { outline-offset: -2px; }
.stage-tab[aria-selected="true"] { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); color: var(--text); }
.stage-tab[aria-selected="true"]::after, .stage-tab[aria-current="step"]::after { transform: none; }
.stage-tab:disabled { cursor: default; color: var(--muted); }
.stage-num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); }
.stage-step.past .stage-num { background: var(--surface-2); border-color: var(--line-2); color: var(--muted); }
.stage-tab[aria-selected="true"] .stage-num, .stage-tab[aria-current="step"] .stage-num { background: var(--text); border-color: var(--text); color: var(--surface); }
.stage-text { display: grid; gap: 2px; min-width: 0; }
.stage-label { font-size: 15px; font-weight: 600; line-height: 1.3; }
.stage-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-meta:empty { display: none; }
.stage-panel[hidden] { display: none; }
.stage-panel { display: flex; flex-direction: column; gap: 16px; animation: stage-in 280ms cubic-bezier(.16, 1, .3, 1); }
@keyframes stage-in { from { opacity: 0; transform: translateY(6px); } }
.stage-body { display: flex; flex-direction: column; gap: 16px; }
.stage-foot { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.stage-foot .grow { flex: 1; }
.stage-foot .btn { min-height: 44px; }
.stage-split { display: grid; gap: 16px; align-items: start; }
.stage-side { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1100px) { .stage-split { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } .stage-side { position: sticky; top: 140px; } }
.picks .ranking-note { margin: 0; padding: 14px 22px 18px; border-top: 1px solid var(--line-2); }
.trade-offs h2, .not-planned h2, .start-building h2, .rests-on h2, .questions h2 { margin: 0; font: 400 20px/1.2 var(--display); }

/* The summary holds the outcome only: the approach, whether it is complete, and three totals. */
.rec-summary { gap: 16px; }
.rec-title { display: grid; gap: 4px; min-width: 0; }
.rec-top h2 { font: 400 24px/1.2 var(--display); }
.rec-status-hint { margin: 0; }
.rec-cost { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.rec-cost > div { padding: 14px 18px 0 0; border: 0; border-radius: 0; background: none; }
.rec-cost > div + div { padding-left: 18px; border-left: 1px solid var(--line-2); }
.rec-cost dd strong { font: 400 28px/1.1 var(--display); font-variant-numeric: tabular-nums; }

/* Assumptions: what the plan rests on beside the figures assumed to price it. */
.rests-on { display: grid; gap: 20px; }
.rests-on .rec-reqs { border-top: 0; padding-top: 0; }
.rests-on .rec-assume h3 { margin: 0 0 8px; font: 600 14px var(--sans); }
.rests-on .rec-assume ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.5; }
@media (min-width: 1000px) {
  .rests-on:has(.rec-assume) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0; }
  .rests-on .rec-assume { padding-left: 24px; margin-left: 24px; border-left: 1px solid var(--line-2); }
}

/* Build: two ways to hand the plan over, side by side. */
.start-building { display: grid; gap: 16px; }
.build-intro .hint { margin: 4px 0 0; }
.build-ways { display: grid; gap: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.build-way { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.build-way h3 { margin: 0; font: 600 15px var(--sans); }
.build-way .hint { margin: 0; max-width: 62ch; }
.build-way .continue-help { margin: 0; }
@media (min-width: 900px) {
  .build-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .build-way + .build-way { padding-left: 24px; margin-left: 24px; border-left: 1px solid var(--line-2); }
}

@media (max-width: 760px) {
  .stage-tab { flex-direction: column; align-items: center; gap: 6px; min-height: 60px; padding: 10px 4px; text-align: center; }
  .stage-label { font-size: 12px; }
  .stage-meta { display: none; }
  .rec-cost > div + div { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-panel { animation: none; }
  .stage-tab::after { transition: none; }
}

/* Vendors, signed out (renderVendorsOut): the homepage's charcoal band and grey sections, a few vendors, then sign-up.
   The full list, its filters and views are for signed-in people. */
.vendors-out { display: none; }
body:not(.app) #view-browse > :not(.vendors-out) { display: none; }
body:not(.app) #view-browse > .vendors-out { display: block; }
.vo-hero { width: 100vw; margin-left: calc(50% - 50vw); background: #222323; color: #eee; padding: clamp(48px, 7vw, 96px) 16px clamp(56px, 7vw, 96px); }
.vo-hero { padding-inline: 0; }
:is(body:not(.app), body.app.site) .topbar .tab[aria-pressed="true"] { background: #393a3a; color: #fff; box-shadow: inset 0 0 0 1px #555; }
.vo-hero h1 { max-width: 760px; margin: 0 0 22px; font: 400 clamp(36px, 4.2vw, 58px)/1.08 var(--display); letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.vo-lede { max-width: 600px; margin: 0; font-size: 15px; line-height: 1.8; color: #bfc1bf; text-wrap: pretty; }
.vo-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.vo-actions .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.vo-actions .btn:not(.btn-primary) { background: none; border-color: #666; color: #eee; }
.vo-note { margin: 14px 0 0; font-size: 13px; color: #9a9c9a; }
.vo-picks { margin-top: clamp(72px, 9vw, 120px); }
.vo-picks h2 { text-align: center; }
.vo-sub { max-width: 560px; margin: 18px auto 0; text-align: center; font-size: 17px; line-height: 1.6; color: var(--hm-grey); text-wrap: balance; }
.vo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.vo-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; background: var(--hm-panel); color: var(--hm-ink); text-decoration: none; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.vo-card:hover { background: #e6e6e5; color: var(--hm-ink); }
.vo-card:active { transform: scale(.99); }
.vo-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.vo-card h3 { margin: 0; font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.vo-cat { margin: 2px 0 0; font-size: 13px; color: var(--hm-grey); }
.vo-price { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.vo-price span { margin-left: 2px; font-size: 14px; font-weight: 400; color: var(--hm-grey); }
.vo-inc { margin: 0; font-size: 14px; line-height: 1.5; color: #454646; }
.vo-perk { margin: 0; font-size: 13px; font-weight: 600; color: #2f6f3e; }
.vo-more { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--hm-ink); }
.vo-close { margin-top: clamp(112px, 13vw, 184px); margin-bottom: clamp(96px, 12vw, 168px); }
.vo-list { display: grid; gap: 10px; max-width: 520px; margin: 32px auto 0; padding: 0; list-style: none; text-align: left; font-size: 16px; color: #454646; }
.vo-list li { display: flex; gap: 10px; }
.vo-list li::before { content: '✓'; font-weight: 700; color: var(--hm-ink); }
.vo-close .hm-actions + p { font-size: 14px; }
@media (max-width: 720px) {
  .vo-grid { grid-template-columns: 1fr; }
}

/* Signed out, public pages (body.site): the homepage's closing band under each page, and the vendor page's sign-up band. */
.out-close { display: none; }
body.app.site .out-close { display: block; padding: clamp(80px, 10vw, 144px) 0; text-align: center; background: var(--page); border-top: 1px solid var(--line); }
.out-close p { max-width: 560px; margin: 24px auto 0; font-size: 18px; line-height: 1.6; color: var(--hm-grey); text-wrap: balance; }
.out-band { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 40px 0; padding: 28px 32px; border-radius: 16px; background: #222323; color: #eee; }
.out-band h2 { margin: 0 0 6px; font: 400 26px/1.15 var(--display); letter-spacing: -0.02em; color: #fff; }
.out-band p { max-width: 640px; margin: 0; font-size: 15px; line-height: 1.6; color: #bfc1bf; }
.out-band > .grow { flex: 1 1 320px; min-width: 0; }
.out-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body .out-band .btn-primary, body .out-band .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
body .out-band .btn:not(.btn-primary) { background: none; border-color: #666; color: #eee; }
.out-band .btn:not(.btn-primary):hover { background: #393a3a; }
.vo-search { display: flex; gap: 10px; max-width: 560px; margin-top: 32px; }
.vo-search input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid #555; border-radius: 4px; background: #2d2e2e; color: #fff; font: inherit; font-size: 15px; }
.vo-search input::placeholder { color: #9a9c9a; }
.vo-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.vo-search .btn { min-height: 44px; background: none; border-color: #666; color: #eee; }
.vo-cats { margin-top: clamp(96px, 11vw, 160px); }
.vo-cats h2 { text-align: center; }
.vo-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: clamp(32px, 4vw, 48px); }
.vo-cat-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 18px; border-radius: 12px; background: var(--hm-panel); color: var(--hm-ink); font-weight: 500; text-decoration: none; transition: background var(--fast) var(--ease); }
.vo-cat-link:hover { background: #e6e6e5; color: var(--hm-ink); }
.vo-cat-link-n { font-size: 13px; color: var(--hm-grey); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .out-band { padding: 24px 20px; }
  .vo-cat-grid { grid-template-columns: 1fr 1fr; }
}

/* Content stops widening past 1360px (1264px of content inside the page margins); bands and bars stay full-bleed. */
.wrap { max-width: 1360px; }
body:not(.app) #view-plan > .wrap:first-child { box-shadow: 0 0 0 100vmax #222323; clip-path: inset(0 -100vmax); }

/* The sign-up modal: one sentence on what the person pressed, on every step, so the account starts from it. */
.si-say { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
/* Full-bleed bands keep their content at the page's width. */
.hm-band > * { max-width: 1264px; margin-inline: auto; }
.hm-band > .hm-fine { margin-inline: auto; }
/* The footer's last row lines up with the columns above it. */
body.app.site .footer { margin-left: auto; margin-right: auto; }
@media (min-width: 720px) { .site-foot .wrap.footer { padding-inline: 32px; } }
@media (min-width: 1280px) { .site-foot .wrap.footer { padding-inline: 48px; } }

/* Signed in, the plan page's header (the composer strip once a plan is on screen): a band a step darker than the
   filter pills' blue (--accent-soft), running the full width of the main column like the filter bar under it. */
body.app.consolidated .hero { background: #d4e4f0; margin-inline: calc(50% - 50cqw); padding-inline: calc(50cqw - 50%); padding-bottom: 16px; }
body.app.consolidated .composer-status { color: var(--text-2); }
body.app.consolidated .plan-body { padding-top: 0; }