/* Synthiya - built by tools/build.php - do not edit; edit assets/src/*.css or src/modules/<name>/style.css */

/* ---- assets/src/fonts.css ---- */
/* Self-hosted variable fonts (Inter and Inter Tight, SIL Open Font License, see /assets/fonts/OFL.txt) */
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/inter-tight-latin-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/inter-tight-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/assets/fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- assets/src/base.css ---- */
/* Synthiya design system: tokens, themes, base elements.
   Brand: ink #0B0A1A · iris #7C5CFF · coral #FF6A88 · mint #2DD4A7 (plus rose #FF5470, amber #FFB547).
   Every color the UI uses is a variable below. Dark mode redefines the theme variables, so module CSS that uses
   var(--surface), var(--text), var(--muted), var(--line), var(--paper), var(--iris)... adapts on its own.
   Theme choice: <html data-theme="light|dark"> (set by assets/theme.js), otherwise the system setting. */

:root {
  color-scheme: light;

  /* brand constants: the same in both themes */
  --ink: #0b0a1a; --ink-2: #15122e; --ink-3: #221d45;
  --iris: #7c5cff; --coral: #ff6a88; --mint: #2dd4a7; --rose: #ff5470; --amber: #ffb547;
  --grad: linear-gradient(135deg, #7c5cff 0%, #b05cff 45%, #ff6a88 100%);
  --grad-text: linear-gradient(100deg, #a993ff 0%, #d38cff 45%, #ff8fa6 100%);
  --grad-btn: linear-gradient(135deg, #6440f5 0%, #8b37e8 55%, #c92f74 100%);
  --on-dark: #fff; --on-dark-2: #cdc8ee; --on-dark-3: #a9a3d6; --on-dark-line: rgba(255,255,255,.12);

  /* theme: light */
  --paper: #fbfaff; --paper-2: #f4f2fb;
  --surface: #fff; --surface-2: #f8f7fd; --surface-3: #f1eff8;
  --text: #14122b; --text-2: #3f3c5e; --muted: #625f7e; --faint: #726e8c;
  --line: #e8e5f3; --line-2: #d8d4ea;
  --iris-600: #6440f5; --iris-700: #4f2fd8; --iris-50: #f3f0ff; --iris-100: #e7e1ff; --iris-200: #cfc3ff;
  --pos: #087553; --neu: #8e8ba8; --neg: #c42443; --warn: #995a00;
  --pos-bg: #e6f7f0; --neg-bg: #fdecef; --warn-bg: #fff5e2; --info-bg: var(--iris-50);
  --pos-line: #b9ead6; --neg-line: #f8c6d0; --warn-line: #fbdca5;
  --btn-bg: #6440f5; --btn-bg-hover: #5434e4; --btn-text: #fff;
  --field: #fff; --field-line: #d6d2e8; --field-hover: #bdb7d8;
  --focus: #6440f5;
  --header-bg: rgba(251,250,255,.8);
  --track: #efedf7;
  --star-line: #c77d00;
  --shadow-xs: 0 1px 2px rgba(20,18,43,.05);
  --shadow-sm: 0 1px 2px rgba(20,18,43,.04), 0 2px 8px rgba(20,18,43,.04);
  --shadow: 0 1px 2px rgba(20,18,43,.04), 0 8px 24px rgba(20,18,43,.06);
  --shadow-lg: 0 2px 6px rgba(20,18,43,.04), 0 24px 48px -12px rgba(48,30,130,.18);
  --shadow-xl: 0 40px 90px -20px rgba(48,30,130,.30);

  /* type */
  --font: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Inter Tight", Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 44px;
  --fs-display: clamp(40px, 6.4vw, 76px);

  /* space, shape, motion */
  --gutter: 20px; --wrap: 1180px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius-xs: 6px; --radius-sm: 10px; --radius: 16px; --radius-lg: 20px; --radius-xl: 28px; --pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms; --t: 200ms; --t-slow: 420ms;
}

/* theme: dark (system setting, unless the visitor picked light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0b0a1a; --paper-2: #0f0d22;
    --surface: #13112a; --surface-2: #181634; --surface-3: #201d40;
    --text: #efedfb; --text-2: #cbc8e6; --muted: #a3a0c3; --faint: #8a86b0;
    --line: #262247; --line-2: #34305e;
    --iris-600: #a995ff; --iris-700: #c3b6ff; --iris-50: #1b1640; --iris-100: #261f56; --iris-200: #3a3080;
    --pos: #3bd9a6; --neu: #6f6b95; --neg: #ff6b85; --warn: #ffc163;
    --pos-bg: #0f2a26; --neg-bg: #2e1426; --warn-bg: #2c2114; --info-bg: var(--iris-50);
    --pos-line: #1d4a41; --neg-line: #552139; --warn-line: #4f3a1c;
    --btn-bg: #6440f5; --btn-bg-hover: #7052ff; --btn-text: #fff;
    --field: #0f0d23; --field-line: #38345f; --field-hover: #4a4578;
    --focus: #b4a3ff;
    --header-bg: rgba(11,10,26,.74);
    --track: #221f42;
    --star-line: #ffb547;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.28);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 30px 60px -12px rgba(0,0,0,.6);
    --shadow-xl: 0 40px 100px -20px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0a1a; --paper-2: #0f0d22;
  --surface: #13112a; --surface-2: #181634; --surface-3: #201d40;
  --text: #efedfb; --text-2: #cbc8e6; --muted: #a3a0c3; --faint: #8a86b0;
  --line: #262247; --line-2: #34305e;
  --iris-600: #a995ff; --iris-700: #c3b6ff; --iris-50: #1b1640; --iris-100: #261f56; --iris-200: #3a3080;
  --pos: #3bd9a6; --neu: #6f6b95; --neg: #ff6b85; --warn: #ffc163;
  --pos-bg: #0f2a26; --neg-bg: #2e1426; --warn-bg: #2c2114; --info-bg: var(--iris-50);
  --pos-line: #1d4a41; --neg-line: #552139; --warn-line: #4f3a1c;
  --btn-bg: #6440f5; --btn-bg-hover: #7052ff; --btn-text: #fff;
  --field: #0f0d23; --field-line: #38345f; --field-hover: #4a4578;
  --focus: #b4a3ff;
  --header-bg: rgba(11,10,26,.74);
  --track: #221f42;
  --star-line: #ffb547;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.28);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 30px 60px -12px rgba(0,0,0,.6);
  --shadow-xl: 0 40px 100px -20px rgba(0,0,0,.75);
}

/* ---------------------------------------------------------------- reset & base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--font); font-size: var(--fs-base); line-height: 1.6; font-feature-settings: "cv11";
  background: var(--paper); color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; display: block; min-width: 0; }
.theme-switching, .theme-switching * { transition: none !important; }
::selection { background: color-mix(in srgb, var(--iris) 30%, transparent); }

a { color: var(--iris-600); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
img, svg, video { max-width: 100%; }
img { height: auto; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.018em; word-spacing: .02em; color: inherit; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.026em; word-spacing: .04em; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: 16.5px; letter-spacing: -.012em; }
h4 { font-size: var(--fs-base); }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.h-xl { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; letter-spacing: -.028em; word-spacing: .05em; line-height: 1.08; }
.h-lg { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.024em; word-spacing: .04em; line-height: 1.12; }
.lead { font-size: var(--fs-md); color: var(--text-2); line-height: 1.6; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

code, kbd, samp { font-family: var(--mono); font-size: .88em; }
code { background: var(--iris-50); color: var(--iris-700); padding: 2px 6px; border-radius: var(--radius-xs); overflow-wrap: anywhere; }
kbd { display: inline-block; min-width: 1.6em; text-align: center; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--surface); color: var(--text-2); font-size: 11.5px; line-height: 1.5; }
pre { font-family: var(--mono); }

/* ---------------------------------------------------------------- focus */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ---------------------------------------------------------------- layout utilities (kept: modules use these) */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 800px; }
.wrap.narrow { max-width: 800px; }
.center { text-align: center; } .center-row { justify-content: center; }
.section { padding: 40px var(--gutter); }
.marketing .section { padding-top: 88px; padding-bottom: 88px; }
.section-tight { padding-top: 40px; padding-bottom: 8px; }
.pad-xl { padding: 80px var(--gutter); }
.big { font-size: clamp(64px, 12vw, 120px); margin: 0; }
.t-pos { color: var(--pos); } .t-neg { color: var(--neg); } .t-neu { color: var(--muted); } .t-warn { color: var(--warn); }
.inline { display: inline; } .push { margin-left: auto; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack > * + * { margin-top: 14px; }
.stack-gap > * + * { margin-top: 16px; }
.row-gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row-gap select { width: auto; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between > h2, .row-between > h3 { margin-bottom: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mt0 { margin-top: 0 !important; } .mb0 { margin-bottom: 0 !important; }
.mt-s { margin-top: 8px; } .mt-m { margin-top: 16px; } .mt-l { margin-top: 32px; } .mt-xl { margin-top: 56px; }
.nowrap { white-space: nowrap; }

@media (max-width: 880px) {
  .grid2, .grid3, .grid-main { grid-template-columns: minmax(0, 1fr); }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing .section { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; --fs-2xl: 28px; }
  body { font-size: 15.5px; }
  .section { padding-top: 28px; padding-bottom: 28px; }
  .marketing .section { padding-top: 56px; padding-bottom: 56px; }
  .grid4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- motion */
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(45,212,167,0); } }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes ring-draw { from { stroke-dashoffset: var(--ring-c); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---- assets/src/10-components.css ---- */
/* Components: buttons, forms, cards, badges, chips, flashes, tables, tabs, empty states, skeletons, charts. */

/* ---------------------------------------------------------------- icons */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(20,10,80,.25), 0 6px 16px -4px rgba(100,64,245,.45);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 18px; border: 1px solid transparent; border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-text);
  font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; text-align: center; white-space: nowrap;
  cursor: pointer; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: var(--btn-shadow);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease), filter var(--t) var(--ease), color var(--t) var(--ease);
}
.btn:hover { text-decoration: none; background: var(--btn-bg-hover); color: var(--btn-text); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 12px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .ico { width: 18px; height: 18px; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13.5px; border-radius: 10px; gap: 6px; }
.btn-sm .ico { width: 16px; height: 16px; }
.btn-sm:focus-visible { border-radius: 10px; }
.btn-lg { min-height: 52px; padding: 13px 24px; font-size: 16px; border-radius: 14px; }
.btn-lg:focus-visible { border-radius: 14px; }
.btn-block { width: 100%; display: flex; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-2); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--field-hover); }
.btn-quiet { background: transparent; color: var(--text-2); border-color: transparent; box-shadow: none; }
.btn-quiet:hover { background: var(--surface-3); color: var(--text); }
.btn-light { background: #fff; color: var(--ink); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 30px -8px rgba(0,0,0,.45); }
.btn-light:hover { background: #f1eeff; color: var(--ink); }
.btn-glow { background: var(--grad-btn); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 30px -6px rgba(176,92,255,.6), 0 0 0 1px rgba(255,255,255,.08); }
.btn-glow:hover { background: var(--grad-btn); color: #fff; filter: brightness(1.1) saturate(1.05); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 40px -6px rgba(176,92,255,.75), 0 0 0 1px rgba(255,255,255,.12); }
.btn-danger { background: #c42443; color: #fff; box-shadow: 0 1px 2px rgba(80,0,20,.25); }
.btn-danger:hover { background: #a91c37; color: #fff; }
.btn-x { background: #000; color: #fff; box-shadow: none; border-color: rgba(255,255,255,.18); }
.btn-x:hover { background: #1b1b1f; color: #fff; }
.btn-reddit { background: #d93a00; color: #fff; box-shadow: none; }
.btn-reddit:hover { background: #bf3300; color: #fff; }
.btn-linkedin { background: #0a66c2; color: #fff; box-shadow: none; }
.btn-linkedin:hover { background: #08559f; color: #fff; }
.btn-ghost-dark { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.16); box-shadow: none; }
.btn-ghost-dark:hover { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.26); }
.btn-ghost-dark:focus-visible, .btn-light:focus-visible, .btn-glow:focus-visible { outline-color: #c9bcff; }
.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
.linkbtn:hover { text-decoration: underline; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn .ico { width: 19px; height: 19px; }

/* ---------------------------------------------------------------- forms */
input, select, textarea {
  font: inherit; font-size: 15px; width: 100%; padding: 10px 13px; min-height: 42px;
  border: 1px solid var(--field-line); border-radius: 11px; background: var(--field); color: var(--text);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
textarea { min-height: 0; line-height: 1.55; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--field-hover); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 4px color-mix(in srgb, var(--iris) 22%, transparent); }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }
input[readonly] { background: var(--surface-2); }
select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8ba8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
select::-ms-expand { display: none; }
input[type=color] { width: 64px; height: 42px; padding: 4px; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--iris); flex: none; cursor: pointer; }
input[type=file] { padding: 8px; cursor: pointer; }
input[type=file]::file-selector-button { font: inherit; font-size: 13.5px; font-weight: 600; margin-right: 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
label { display: block; font-weight: 550; font-size: 14px; color: var(--text); }
label > input, label > textarea, label > select { margin-top: 7px; font-weight: 400; }
label.check { display: flex; gap: 10px; align-items: center; font-weight: 450; cursor: pointer; }
.hint, .help { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 6px; }
.field-icon { position: relative; display: block; }
.field-icon > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); width: 18px; height: 18px; pointer-events: none; }
.field-icon > input { padding-left: 40px; margin-top: 0; }
.input-group { display: flex; gap: 8px; align-items: stretch; }
.input-group > input, .input-group > select, .input-group > textarea { flex: 1; min-width: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 8px; }

/* ---------------------------------------------------------------- eyebrow, chips, badges */
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--iris-600); background: var(--iris-50); border: 1px solid color-mix(in srgb, var(--iris) 18%, transparent); padding: 4px 12px; border-radius: var(--pill); margin-bottom: 16px; letter-spacing: -.005em; }
.eyebrow .ico { width: 15px; height: 15px; }
.kicker { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--iris-600); margin-bottom: 12px; }
.badge {
  --b-c: var(--text-2); --b-bg: var(--surface-3);
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; line-height: 1.5;
  padding: 2px 8px; border-radius: var(--pill); background: var(--b-bg); color: var(--b-c);
  text-transform: uppercase; letter-spacing: .045em; white-space: nowrap; vertical-align: middle;
}
.b-bug, .b-churn_risk, .b-urgent, .b-neg { --b-c: var(--neg); --b-bg: var(--neg-bg); }
.b-feature_request, .b-iris { --b-c: var(--iris-600); --b-bg: var(--iris-50); }
.b-praise, .b-pos { --b-c: var(--pos); --b-bg: var(--pos-bg); }
.b-pricing, .b-warn { --b-c: var(--warn); --b-bg: var(--warn-bg); }
.b-performance, .b-ux { --b-c: color-mix(in srgb, #c026d3 62%, var(--text)); --b-bg: color-mix(in srgb, #c026d3 12%, var(--surface)); }
.b-support, .b-question { --b-c: color-mix(in srgb, #0284c7 62%, var(--text)); --b-bg: color-mix(in srgb, #0284c7 12%, var(--surface)); }
.badge-plan { --b-c: #fff; --b-bg: var(--grad-btn); background: var(--grad-btn); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; line-height: 1.5; background: var(--iris-50); color: var(--iris-600); padding: 3px 10px; border-radius: var(--pill); margin: 4px 4px 0 0; border: 1px solid transparent; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
a.chip:hover, button.chip:hover { text-decoration: none; border-color: var(--iris-200); }
button.chip { font: inherit; font-size: 12.5px; cursor: pointer; }
.chip[aria-pressed="true"], .chip.on { background: var(--btn-bg); color: #fff; }
.chip-count { opacity: .75; font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill); font-size: 12.5px; font-weight: 600; background: var(--surface-3); color: var(--text-2); }

/* ---------------------------------------------------------------- flashes & notices */
.flash { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px 12px 16px; border-radius: 12px; font-size: 14.5px; border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); animation: fade-up var(--t-slow) var(--ease) both; }
.flash > .ico { margin-top: 2px; width: 18px; height: 18px; }
.flash-msg { flex: 1; min-width: 0; }
.flash-ok { background: var(--pos-bg); border-color: var(--pos-line); }
.flash-ok > .ico { color: var(--pos); }
.flash-error { background: var(--neg-bg); border-color: var(--neg-line); }
.flash-error > .ico { color: var(--neg); }
.flash-close { display: none; margin: -6px -6px -6px 0; width: 30px; height: 30px; color: var(--muted); }
.js .flash-close { display: inline-grid; }
.notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--text); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; font-size: 14.5px; }
.notice > .ico { color: var(--warn); }
.callout { position: relative; padding: 18px 20px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--iris); }
.callout p { font-size: 16.5px; font-weight: 500; margin: 8px 0 0; color: var(--text); }
.callout-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--iris-600); }
.callout-label .ico { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 16px; min-width: 0; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card h2 { font-size: 18px; }
.card-link { display: block; color: var(--text); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.card-link:hover { text-decoration: none; border-color: var(--iris-200); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); }
.card.danger { border-color: var(--neg-line); }
.card.danger h2 { color: var(--neg); }
.card-flat { box-shadow: none; }
.card-pad-lg { padding: 32px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2, .card-head h3 { margin: 0; }
.card-foot { margin: 18px -22px -22px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.section-head .lead { margin: 0 auto; }
.section-head.left { margin-left: 0; text-align: left; }

/* ---------------------------------------------------------------- avatars, rings, stars, deltas */
.av {
  --av-s: 48px; --av-a: #7c5cff; --av-b: #ff6a88;
  display: inline-grid; place-items: center; flex: none; width: var(--av-s); height: var(--av-s);
  border-radius: calc(var(--av-s) * .24); color: #fff; font-family: var(--display); font-weight: 800;
  font-size: calc(var(--av-s) * .46); line-height: 1; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0,0,0,.25);
  background: radial-gradient(120% 90% at 25% 10%, rgba(255,255,255,.38), transparent 55%), linear-gradient(135deg, var(--av-a), var(--av-b));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.12);
  user-select: none;
}
.av-img { object-fit: cover; background: var(--surface-3); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.08); }

.ring2 { --ring-s: 120px; position: relative; display: inline-grid; place-items: center; width: var(--ring-s); height: var(--ring-s); flex: none; }
.ring2 svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ring2-track { stroke: var(--track); }
.ring2-val { animation: ring-draw 1.3s var(--ease) both .15s; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--iris) 35%, transparent)); }
.ring2-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: calc(var(--ring-s) * .3); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
/* legacy ring (conic) kept for modules */
.ring { --p: 50; width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(closest-side, var(--ink) 80%, transparent 81% 100%), conic-gradient(var(--mint) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); color: #fff; }
.ring span { font-family: var(--display); font-size: 32px; font-weight: 800; line-height: 1; }
.ring small { font-size: 9px; color: var(--on-dark-3); text-transform: uppercase; letter-spacing: .04em; }

.stars5 { display: inline-block; line-height: 1; letter-spacing: 1px; font-size: 14px; white-space: nowrap; vertical-align: -1px; }
.stars5 > span { background: linear-gradient(90deg, var(--amber) var(--fill), var(--line-2) var(--fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars-sm { color: var(--amber); font-size: 13px; letter-spacing: 1px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 650; line-height: 1.4; padding: 2px 7px; border-radius: var(--pill); white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta-good { color: var(--pos); background: var(--pos-bg); }
.delta-bad { color: var(--neg); background: var(--neg-bg); }
.delta-flat { color: var(--muted); background: var(--surface-3); }

/* ---------------------------------------------------------------- bars, meters, kpis (modules use these) */
.bar { display: block; height: 8px; background: var(--track); border-radius: var(--pill); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--iris); }
.pos { background: var(--pos); } .neu { background: var(--neu); } .neg { background: var(--neg); }
.bar i.pos { background: linear-gradient(90deg, color-mix(in srgb, var(--pos) 75%, var(--mint)), var(--pos)); }
.bar i.neg { background: linear-gradient(90deg, color-mix(in srgb, var(--neg) 75%, var(--coral)), var(--neg)); }
.bar i.neu { background: var(--neu); }
.meter { height: 8px; background: var(--track); border-radius: var(--pill); overflow: hidden; width: 280px; max-width: 100%; margin-top: 8px; }
.meter i { display: block; height: 100%; background: var(--grad); border-radius: var(--pill); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); min-width: 0; }
.kpi > span:first-child, .kpi-label { color: var(--muted); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi strong { display: block; font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
@media (max-width: 880px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kpi strong { font-size: 26px; } }

/* ---------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 24px; box-shadow: var(--shadow-xs); }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.table th { background: var(--surface-2); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td, .table tr:hover td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; margin-bottom: 24px; }
.table-wrap > .table { margin-bottom: 0; }
@media (max-width: 600px) { .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* ---------------------------------------------------------------- tabs & segmented controls */
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 12px 13px; color: var(--muted); font-weight: 550; font-size: 14.5px; white-space: nowrap; scroll-snap-align: start; border-radius: 8px 8px 0 0; transition: color var(--t) var(--ease); }
.tabs a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--t) var(--ease); }
.tabs a:hover { text-decoration: none; color: var(--text); }
.tabs a:hover::after { background: var(--line-2); }
.tabs a.active, .tabs a[aria-current="page"] { color: var(--text); }
.tabs a.active::after, .tabs a[aria-current="page"]::after { background: var(--iris); }
.tabs a:focus-visible { outline-offset: -2px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--line); }
.seg button, .seg a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; text-decoration: none; }
.seg button:hover, .seg a:hover { color: var(--text); text-decoration: none; }
.seg [aria-pressed="true"], .seg .on, .seg [aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.seg .ico { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- empty states & skeletons */
.empty { text-align: center; padding: 56px 24px; }
.empty > p, .empty .muted { max-width: 460px; margin-left: auto; margin-right: auto; }
.empty-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 16px; color: var(--iris-600); background: linear-gradient(135deg, var(--iris-50), color-mix(in srgb, var(--coral) 12%, var(--surface))); border: 1px solid var(--iris-100); box-shadow: var(--shadow-sm); }
.empty-icon .ico { width: 26px; height: 26px; }
.empty .cta-row { justify-content: center; }
.skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 45%, var(--surface-3) 90%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel-line { height: 12px; margin: 8px 0; }
.skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; } .skel-line.w40 { width: 40%; }
.skel-circle { border-radius: 50%; }

/* ---------------------------------------------------------------- disclosure (FAQ) */
:where(details) { border-bottom: 1px solid var(--line); padding: 4px 0; }
:where(details) > summary { list-style: none; cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-radius: 8px; }
:where(details) > summary::-webkit-details-marker { display: none; }
:where(details) > summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e8ba8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform var(--t) var(--ease); }
:where(details[open]) > summary::after { transform: rotate(45deg); }
:where(details) > p, :where(details) > div { color: var(--text-2); margin: 0 0 16px; }

/* ---------------------------------------------------------------- busy overlay (app.js) */
.busy-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(11,10,26,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade-in var(--t) var(--ease) both; }
.busy-card { width: 100%; max-width: 380px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 22px; padding: 26px 26px 22px; box-shadow: var(--shadow-xl); display: grid; gap: 10px; justify-items: center; text-align: center; animation: fade-up var(--t-slow) var(--ease) both; }
.busy-card strong { font-family: var(--display); font-size: 18px; letter-spacing: -.02em; }
.busy-card small { color: var(--muted); font-size: 13.5px; }
.busy-steps { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; text-align: left; display: grid; gap: 6px; }
.busy-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); padding: 7px 10px; border-radius: 10px; transition: color var(--t), background-color var(--t); }
.busy-steps li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; box-sizing: border-box; }
.busy-steps li.on { color: var(--text); background: var(--surface-2); }
.busy-steps li.on::before { border-color: var(--iris-200); border-top-color: var(--iris); animation: spin .8s linear infinite; }
.busy-steps li.done { color: var(--text-2); }
.busy-steps li.done::before { border: 0; background: var(--pos) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.spinner { width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--iris-100); border-top-color: var(--iris); animation: spin .8s linear infinite; }

/* ---------------------------------------------------------------- misc */
.pager { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 24px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 12px; }
.ticks { list-style: none; padding: 0; margin: 20px 0 28px; }
.ticks li { padding: 7px 0 7px 32px; position: relative; color: var(--text-2); }
.ticks li b { color: var(--text); font-weight: 600; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 21px; height: 21px; border-radius: 50%; background: var(--iris-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5cff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; border: 1px solid var(--iris-100); }
blockquote { margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--iris); background: var(--iris-50); color: var(--text); border-radius: 0 12px 12px 0; font-style: normal; }
q { quotes: "“" "”" "‘" "’"; }
.copy-row { display: flex; gap: 8px; align-items: flex-start; }
.copy-row textarea, .copy-row input { font-family: var(--mono); font-size: 13px; margin: 0; }
.copy-row .btn { flex: none; }
pre.code { position: relative; background: #0e0c20; color: #e4e1f7; padding: 16px 18px; border-radius: 14px; overflow-x: auto; font-size: 13px; line-height: 1.65; border: 1px solid #262247; margin: 12px 0; }
pre.code code { background: none; color: inherit; padding: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neg); flex: none; box-shadow: 0 0 0 4px var(--neg-bg); }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(45,212,167,.2); animation: pulse 2s infinite; flex: none; }
.divider { height: 1px; background: var(--line); margin: 24px 0; border: 0; }
.lvl { font-weight: 600; }
.l-high { color: var(--neg); } .l-medium { color: var(--warn); } .l-low { color: var(--muted); }
.copied-toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 550; box-shadow: var(--shadow-lg); animation: fade-up var(--t) var(--ease) both; pointer-events: none; border: 1px solid rgba(255,255,255,.12); }

/* ---- assets/src/20-layout.css ---- */
/* Site chrome: skip link, header, desktop + mobile navigation, user menu, theme switch, footer. */

.skip { position: fixed; left: 12px; top: 12px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; transform: translateY(-200%); opacity: 0; transition: transform var(--t) var(--ease), opacity var(--t); }
.skip:focus, .skip:focus-visible { transform: none; opacity: 1; box-shadow: var(--shadow-lg); text-decoration: none; outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- header */
.topbar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
/* The blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile menu inside it. */
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--header-bg); backdrop-filter: saturate(170%) blur(14px); -webkit-backdrop-filter: saturate(170%) blur(14px); }
.topbar-inner { display: flex; align-items: center; gap: 12px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.03em; color: var(--text); flex: none; border-radius: 8px; }
.brand img { width: 28px; height: 28px; display: block; }
.brand:hover { text-decoration: none; color: var(--text); }
.brand-sm { font-size: 16px; gap: 8px; }
.brand-sm img { width: 24px; height: 24px; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 18px; font-size: 14px; font-weight: 550; min-width: 0; }
.nav a, .nav .linkbtn { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 9px; color: var(--text-2); white-space: nowrap; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.nav a:hover, .nav .linkbtn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-3); }
.nav a.btn { color: var(--btn-text); padding: 6px 12px; }
.nav a.btn:hover { background: var(--btn-bg-hover); }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.topbar-actions .nav-login { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 9px; color: var(--text-2); font-size: 14px; font-weight: 550; }
.topbar-actions .nav-login:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.topbar-actions .btn-sm { margin-left: 2px; }

/* theme switch (hidden without JavaScript, since it needs it) */
.theme-ctl { display: none; }
.js .theme-ctl { display: inline-grid; }
.js .seg.theme-ctl { display: inline-flex; }
.theme-ctl .t-sun, .theme-ctl .t-moon, .theme-ctl .t-sys { display: none; }
.theme-ctl[data-theme-cycle] .t-sys, [data-theme-choice="light"] .theme-ctl[data-theme-cycle] .t-sun, [data-theme-choice="dark"] .theme-ctl[data-theme-cycle] .t-moon { display: block; }
[data-theme-choice="light"] .theme-ctl[data-theme-cycle] .t-sys, [data-theme-choice="dark"] .theme-ctl[data-theme-cycle] .t-sys { display: none; }
.seg.theme-ctl .t-sun, .seg.theme-ctl .t-moon, .seg.theme-ctl .t-sys { display: block; }

/* user menu */
.umenu { position: relative; border: 0; padding: 0; }
.umenu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px; border-radius: var(--pill); cursor: pointer; }
.umenu > summary::-webkit-details-marker { display: none; }
.umenu > summary::after { display: none; }
.umenu > summary:hover .uav { box-shadow: 0 0 0 3px var(--iris-100); }
.uav { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13.5px; background: radial-gradient(120% 90% at 25% 10%, rgba(255,255,255,.35), transparent 55%), var(--grad-btn); transition: box-shadow var(--t) var(--ease); }
.umenu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 270px; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; animation: fade-up var(--t) var(--ease) both; }
.umenu-id { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.umenu-id strong { display: block; font-size: 14.5px; }
.umenu-id span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu-id .badge { margin-top: 8px; }
.umenu-panel a, .umenu-panel button.mitem { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 500; background: none; border: 0; cursor: pointer; text-align: left; }
.umenu-panel a:hover, .umenu-panel button.mitem:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.umenu-panel .ico { width: 17px; height: 17px; color: var(--muted); }
.umenu-panel form { margin: 0; }
.umenu-sep { height: 1px; background: var(--line); margin: 6px 0; }
.umenu-theme { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; font-size: 13.5px; color: var(--muted); }

/* mobile menu: a <details>, so it opens without JavaScript; app.js adds Escape, outside click and scroll lock */
.mnav { display: none; border: 0; padding: 0; }
.mnav > summary { list-style: none; padding: 0; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav > summary::after { display: none; }
.mnav .i-close { display: none; }
.mnav[open] .i-open { display: none; }
.mnav[open] .i-close { display: block; }
.mnav-panel { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; margin: 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-top: 1px solid var(--line); padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom)); animation: fade-in var(--t) var(--ease) both; }
.mnav-panel nav { display: grid; }
.mnav-panel nav a, .mnav-panel nav .linkbtn { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-size: 17px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); font-family: var(--display); letter-spacing: -.015em; width: 100%; }
.mnav-panel nav a:hover { text-decoration: none; color: var(--iris-600); }
.mnav-panel nav a[aria-current="page"] { color: var(--iris-600); }
.mnav-panel nav .ico { color: var(--faint); width: 18px; height: 18px; }
.mnav-cta { display: grid; gap: 10px; margin-top: 22px; }
.mnav-cta form { margin: 0; }
.mnav-note { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.mnav-user { display: flex; align-items: center; gap: 12px; padding: 12px 4px 4px; }
.mnav-user > span:last-child { display: grid; min-width: 0; }
.mnav-user strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav-user small { color: var(--muted); font-size: 13px; }
.topbar-app .ico { width: 15px; height: 15px; }
.mnav-theme { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; color: var(--muted); font-size: 14px; }
.mnav-lock { overflow: hidden; }

@media (max-width: 880px) {
  .nav, .topbar-actions .nav-login, .topbar-actions > .theme-ctl, .umenu { display: none !important; }
  .mnav { display: block; }
  /* while the menu is open, its own Start free / Open app button is the one to use: hide the copy in the header */
  .mnav-lock .topbar-actions > .btn { display: none; }
  .topbar-actions:has(> .mnav[open]) > .btn { display: none; }
}
@media (max-width: 380px) {
  .brand span { display: none; }
}

/* ---------------------------------------------------------------- flashes under the header */
.flashes { padding-top: 4px; }
.flashes:empty { display: none; }

/* ---------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); background: var(--paper-2); padding: 56px 0 28px; font-size: 14px; color: var(--muted); margin-top: 0; }
.in-app .footer { margin-top: 56px; padding-top: 36px; }
.footer-inner { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 36px 56px; align-items: start; }
.footer-brand { min-width: 0; }
.footer-brand p { margin: 12px 0 18px; color: var(--muted); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 28px 24px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; font-size: 14px; }
.footer-col a { color: var(--text-2); width: fit-content; }
.footer-col a:hover { color: var(--text); }
.footer-h { font-family: var(--font); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.footer-bottom p { margin: 0; }
.footer-mini { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.footer-mini a { color: var(--muted); }
.footer-mini a:hover { color: var(--text); }
@media (max-width: 880px) { .footer-inner { grid-template-columns: minmax(0, 1fr); } .footer-brand { max-width: 420px; } }
@media (max-width: 600px) {
  .footer { padding-top: 40px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- assets/src/30-marketing.css ---- */
/* Marketing: dark heroes, teardown form, landing sections, pricing, FAQ, final call to action.
   Dark heroes stay dark in both themes, so they use the --on-dark colors. */

/* ---------------------------------------------------------------- dark hero (modules use .hero-dark, .hero-sm, .glow g1 g2) */
.hero-dark { --focus: #c9bcff; position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--on-dark); padding: 88px 0 96px; border-bottom: 1px solid #1d1a3a; }
.hero-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 30%, transparent 75%); }
.hero-dark a:not(.btn) { color: #cbbfff; }
.hero-dark h1, .hero-dark h2 { color: #fff; }
.hero-sm { padding: 64px 0 72px; }
.glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(100px); opacity: .5; pointer-events: none; }
.g1 { width: 560px; height: 560px; background: #7c5cff; top: -260px; right: -140px; }
/* g2 is the top half of a circle: the lower half was always clipped by the hero, and a box that hangs far below
   the hero makes contrast checkers mix the pink into the next section's text. */
.g2 { width: 460px; height: 230px; border-radius: 230px 230px 0 0; background: #ff6a88; bottom: -70px; left: -160px; opacity: .3; }
.g3 { width: 380px; height: 380px; background: #2dd4a7; top: 34%; left: 50%; transform: translateX(-50%); opacity: .08; }
.hero-center { position: relative; text-align: center; max-width: 960px; }
.hero-dark h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.035em; word-spacing: .04em; line-height: 1.04; margin: 22px 0 20px; max-width: 22ch; }
.hero-center h1 { margin-left: auto; margin-right: auto; }
.hero-sm h1 { font-size: clamp(36px, 5vw, 56px); max-width: 26ch; margin-top: 16px; }
.hero-home h1 { max-width: none; }
.hl-love { color: var(--mint); } .hl-hate { color: var(--rose); }
.hl-want { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow-dark { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #ddd6ff; background: rgba(124,92,255,.14); border: 1px solid rgba(124,92,255,.38); padding: 5px 13px; border-radius: var(--pill); box-shadow: 0 0 24px -4px rgba(124,92,255,.5); }
.eyebrow-dark .ico { width: 15px; height: 15px; color: #c9bcff; }
.lead-dark { font-size: clamp(16.5px, 1.6vw, 19px); color: var(--on-dark-2); max-width: 640px; margin: 0 auto 32px; line-height: 1.6; }
.muted-dark { color: var(--on-dark-3); }
.br-lg { display: inline; }
@media (max-width: 700px) { .br-lg { display: none; } }

/* ---------------------------------------------------------------- teardown form (hero version is always on a dark background) */
.td-form { position: relative; display: flex; gap: 8px; align-items: stretch; max-width: 760px; margin: 0 auto; padding: 8px; border-radius: 20px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px -30px rgba(124,92,255,.55), inset 0 1px 0 rgba(255,255,255,.06); transition: box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease); }
.td-form:focus-within { border-color: rgba(169,147,255,.6); box-shadow: 0 0 0 4px rgba(124,92,255,.22), 0 30px 90px -30px rgba(124,92,255,.8); }
.td-input { position: relative; flex: 1; min-width: 0; display: flex; }
.td-input > .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: #8e8ba8; pointer-events: none; z-index: 1; }
.td-form input { flex: 1; min-width: 0; margin: 0; height: 52px; background: #fff; color: #14122b; border: 0; font-size: 16px; padding: 14px 16px; border-radius: 13px; box-shadow: none; }
.td-input > input { padding-left: 44px; }
.td-form input::placeholder { color: #6e6a8c; }
.td-form input:focus { box-shadow: none; }
.td-form select { width: auto; flex: none; margin: 0; height: 52px; border: 0; border-radius: 13px; background-color: #fff; color: #14122b; font-size: 15px; padding-left: 14px; }
.td-form select:focus { box-shadow: 0 0 0 3px rgba(124,92,255,.45); }
.td-form .btn { min-height: 52px; padding: 0 22px; border-radius: 13px; font-size: 15.5px; white-space: nowrap; flex: none; }
.td-form-light { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-lg); margin-top: 24px; backdrop-filter: none; }
.td-form-light:focus-within { border-color: var(--iris-200); box-shadow: 0 0 0 4px color-mix(in srgb, var(--iris) 16%, transparent), var(--shadow-lg); }
.td-form-light input, .td-form-light select { background-color: var(--field); color: var(--text); border: 1px solid var(--field-line); }
.td-form-light input::placeholder { color: var(--faint); }
.td-form-light input:focus { border-color: var(--iris); }
.try { margin: 18px 0 0; color: var(--on-dark-3); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 4px; }
.try a { color: #e9e5ff !important; padding: 3px 10px; border-radius: var(--pill); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 13.5px; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.try a:hover { text-decoration: none; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
@media (max-width: 700px) {
  .td-form { flex-wrap: wrap; padding: 7px; border-radius: 18px; }
  .td-input { flex-basis: 100%; }
  .td-form select { flex: 1; }
  .td-form .btn { flex: 1.4; padding: 0 14px; }
}

/* ---------------------------------------------------------------- home hero + live teardown preview */
.hero-home { padding: 92px 0 84px; }
.hero-home .hero-center > * { animation: fade-up .7s var(--ease) both; }
.hero-home .hero-center > :nth-child(2) { animation-delay: .06s; }
.hero-home .hero-center > :nth-child(3) { animation-delay: .12s; }
.hero-home .hero-center > :nth-child(4) { animation-delay: .18s; }
.hero-home .hero-center > :nth-child(5) { animation-delay: .24s; }
.hero-grid { display: none; }
.tdp { --c-love: #2dd4a7; --c-hate: #ff6b85; --c-want: #b4a3ff;
  position: relative; max-width: 1000px; margin: 64px auto 0; text-align: left; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(30,26,64,.92), rgba(18,16,40,.94)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 50px 120px -30px rgba(124,92,255,.5), 0 30px 60px -30px rgba(0,0,0,.9);
  transform-origin: 50% 0; }
@media (min-width: 881px) { .tdp { animation: tdp-in 1.1s var(--ease) both .25s; } .tdp-item i { transform-origin: left; animation: grow-x 1s var(--ease) both .8s; } }
.tdp::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(169,147,255,.7), rgba(255,106,136,.6), transparent); }
@keyframes tdp-in { from { opacity: 0; transform: perspective(1800px) rotateX(16deg) translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
.tdp-chrome { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.tdp-dots { display: inline-flex; gap: 6px; }
.tdp-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.tdp-url { display: inline-flex; align-items: center; gap: 7px; margin: 0 auto; padding: 4px 14px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--on-dark-3); font-size: 12.5px; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tdp-url .ico { width: 13px; height: 13px; flex: none; }
.tdp-url > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tdp-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #8ff0cf; background: rgba(45,212,167,.12); border: 1px solid rgba(45,212,167,.3); padding: 2px 8px; border-radius: var(--pill); }
.tdp-body { padding: 26px 28px 24px; color: var(--on-dark); }
.tdp-top { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 28px; align-items: center; }
.tdp-app { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tdp-name { display: block; font-family: var(--display); font-size: 19px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.tdp-meta { display: block; font-size: 13px; color: var(--on-dark-3); }
.tdp-verdict { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: #fff; padding-left: 24px; border-left: 1px solid rgba(255,255,255,.1); }
.tdp-score { display: grid; justify-items: center; gap: 6px; }
.tdp-score > span { font-size: 12px; font-weight: 600; color: var(--on-dark-2); white-space: nowrap; }
.tdp .ring2-track { stroke: rgba(255,255,255,.1); }
.tdp .ring2-num { color: #fff; }
.tdp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.tdp-col { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.tdp-col-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; }
.tdp-col-h .ico { width: 16px; height: 16px; }
.tdp-love .tdp-col-h { color: var(--c-love); } .tdp-hate .tdp-col-h { color: var(--c-hate); } .tdp-want .tdp-col-h { color: var(--c-want); }
.tdp-item { padding: 7px 0; font-size: 14px; color: #ecebff; }
.tdp-item + .tdp-item { border-top: 1px solid rgba(255,255,255,.06); }
.tdp-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdp-item i { display: block; height: 4px; margin-top: 7px; border-radius: 4px; width: var(--w); background: currentColor; opacity: .9; }
.tdp-love .tdp-item i { color: var(--c-love); } .tdp-hate .tdp-item i { color: var(--c-hate); } .tdp-want .tdp-item i { color: var(--c-want); }
.tdp-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; margin-top: 12px; }
.tdp-dist, .tdp-fix { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: 13.5px; color: var(--on-dark-2); }
.tdp-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 8px; }
.tdp-stack { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; }
.tdp-stack i { display: block; height: 100%; }
.tdp-stack .s5 { background: #2dd4a7; } .tdp-stack .s4 { background: #7fe3c4; } .tdp-stack .s3 { background: #8e8ba8; } .tdp-stack .s2 { background: #ff9aac; } .tdp-stack .s1 { background: #ff5470; }
.tdp-legend { display: block; margin-top: 7px; font-size: 12px; color: var(--on-dark-3); }
.tdp-legend b { color: var(--on-dark-2); font-weight: 600; }
.tdp-fix span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.tdp-fix span .ico { width: 15px; height: 15px; }
.tdp-cap { text-align: center; margin: 20px 0 0; font-size: 14px; }
.tdp-cap a { display: inline-flex; align-items: center; gap: 6px; }
.tdp-cap .ico { width: 16px; height: 16px; }
@media (max-width: 880px) {
  .tdp-top { grid-template-columns: 1fr auto; }
  .tdp-verdict { grid-column: 1 / -1; grid-row: 2; padding-left: 0; border-left: 0; font-size: 18px; }
  .tdp-cols { grid-template-columns: 1fr; }
  .tdp-foot { grid-template-columns: 1fr; }
  .tdp-item:nth-child(n+3) { display: none; }
}
@media (max-width: 600px) {
  .hero-home { padding: 56px 0 56px; }
  .tdp { margin-top: 44px; border-radius: 18px; }
  .tdp-body { padding: 18px 16px; }
  .tdp-url { max-width: 70%; }
  .tdp-tag { display: none; }
  .tdp .ring2 { --ring-s: 76px !important; }
  .tdp-cols { gap: 8px; margin-top: 16px; }
  .tdp-col { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; padding: 10px 12px; }
  .tdp-col-h { margin: 0; }
  .tdp-item { padding: 0; font-size: 13.5px; }
  .tdp-item i { display: none; }
  .tdp-dist { display: none; }
  .tdp-name { font-size: 17px; }
}

/* ---------------------------------------------------------------- how it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 22px 24px; box-shadow: var(--shadow-sm); }
.step-art { grid-column: 1 / -1; }
.step h3 { grid-column: 2; align-self: center; font-size: 19px; margin: 18px 0 8px; }
.step p { grid-column: 1 / -1; color: var(--muted); margin: 0; }
.step-n { grid-column: 1; align-self: center; margin-top: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--iris-50); color: var(--iris-600); font-weight: 700; font-size: 13px; border: 1px solid var(--iris-100); }
.step-art { height: 132px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; align-content: center; gap: 9px; padding: 16px; overflow: hidden;
  background-image: radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0); background-size: 14px 14px; }
.sa-input { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--iris-200); box-shadow: 0 0 0 4px color-mix(in srgb, var(--iris) 12%, transparent); font-size: 13px; color: var(--text-2); }
.sa-input .ico { width: 16px; height: 16px; color: var(--faint); }
.sa-caret { width: 2px; height: 16px; background: var(--iris); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sa-btn { justify-self: end; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--btn-bg); padding: 6px 12px; border-radius: 8px; }
.sa-review { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); }
.sa-review .skel-line { flex: 0 1 auto; min-width: 0; margin: 0; height: 8px; }
.sa-stars { color: var(--amber); font-size: 12px; letter-spacing: 1px; flex: none; }
.sa-low { color: var(--neg); }
.sa-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.sa-row i { display: block; height: 10px; border-radius: 6px; width: var(--w); transform-origin: left; }
.sa-love b { color: var(--pos); } .sa-love i { background: linear-gradient(90deg, var(--mint), var(--pos)); }
.sa-hate b { color: var(--neg); } .sa-hate i { background: linear-gradient(90deg, var(--coral), var(--neg)); }
.sa-want b { color: var(--iris-600); } .sa-want i { background: var(--grad); }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- bands */
.section-band { padding: 72px 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-head { margin-bottom: 26px; align-items: flex-end; }
#trending .td-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { #trending .td-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { #trending .td-grid { grid-template-columns: minmax(0, 1fr); } #trending .td-grid > :nth-child(n+5) { display: none; } }
.band-head .kicker { margin-bottom: 8px; }
@media (max-width: 600px) { .section-band { padding: 52px 0; } }

/* ---------------------------------------------------------------- product tour */
.tour { position: relative; overflow: hidden; }
.tour::before { content: ""; position: absolute; left: 50%; top: 280px; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--iris) 16%, transparent), transparent); pointer-events: none; z-index: -1; }
.tour-stage { position: relative; max-width: 1040px; margin: 8px auto 0; padding: 0 0 8px; }
.dash { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-xl); overflow: hidden; }
.dash-chrome { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.dash-chrome .tdp-dots i { background: var(--line-2); }
.dash-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dash-tag { flex: none; white-space: nowrap; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-3); padding: 2px 8px; border-radius: var(--pill); }
.dash-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 380px; }
.dash-side { border-right: 1px solid var(--line); padding: 14px 10px; display: grid; align-content: start; gap: 2px; background: var(--surface-2); }
.ds-brand { padding: 4px 8px 12px; }
.ds-brand img { display: block; }
.ds-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.ds-item .ico { width: 16px; height: 16px; }
.ds-item.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); border: 1px solid var(--line); }
.dash-main { padding: 18px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dash-kpis > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.dash-kpis small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpis b { display: block; font-family: var(--display); font-size: 22px; letter-spacing: -.03em; line-height: 1.25; }
.dash-kpis em { font-style: normal; font-size: 11.5px; font-weight: 650; }
.c-pos { color: var(--pos); } .c-neg { color: var(--neg); }
.up-good, .down-good { color: var(--pos); } .up-bad { color: var(--neg); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; }
.dash-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); min-width: 0; }
.dash-h { margin: 0 0 6px; font-size: 13px; font-weight: 650; }
.dash-theme { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 34px 34px; gap: 10px; align-items: center; font-size: 13px; padding: 6px 0; }
.dash-theme > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-theme b { text-align: right; font-variant-numeric: tabular-nums; }
.dash-theme em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.dash-theme em.up-bad { color: var(--neg); } .dash-theme em.down-good { color: var(--pos); }
.dash-bars { display: flex; align-items: flex-end; gap: 3px; height: 118px; padding-top: 6px; }
.dash-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--iris), color-mix(in srgb, var(--iris) 45%, var(--surface))); }
.dash-alert { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--neg-bg); border: 1px solid var(--neg-line); font-size: 13px; }
.float-card { position: absolute; z-index: 2; display: flex; gap: 12px; align-items: flex-start; width: 256px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 13px; }
.float-card strong { display: block; font-size: 13.5px; }
.float-card p { margin: 2px 0 0; color: var(--muted); line-height: 1.45; }
.fc-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; color: #fff; background: var(--grad-btn); }
.fc-icon .ico { width: 18px; height: 18px; }
.fc-i-slack { background: #4a154b; }
.fc-slack { right: -92px; top: 178px; animation: float 6s var(--ease-in-out) infinite; }
.fc-digest { left: -92px; bottom: 34px; animation: float 7s var(--ease-in-out) infinite 1s; }
@keyframes float { 50% { transform: translateY(-8px); } }
@media (max-width: 1240px) { .fc-slack { right: -16px; top: auto; bottom: -34px; } .fc-digest { display: none; } }
@media (max-width: 880px) {
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-vol { display: none; }
  .float-card { position: relative; right: auto; left: auto; top: auto; bottom: auto; width: auto; margin: 12px 0 0; animation: none; }
  .fc-slack { margin-top: 14px; }
}
@media (max-width: 480px) {
  .dash-main { padding: 12px; }
  .dash-theme { grid-template-columns: minmax(0, 1fr) 52px 28px 30px; gap: 8px; }
}
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; margin-top: 72px; }
.feature h3 { font-size: 17px; margin: 14px 0 6px; }
.feature p { color: var(--muted); margin: 0; }
.f-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--iris-600); background: var(--iris-50); border: 1px solid var(--iris-100); }
.f-icon .ico { width: 21px; height: 21px; }
@media (max-width: 880px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-top: 48px; } }
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; gap: 22px; }
  .feature { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; }
  .feature .f-icon { grid-row: span 2; }
  .feature h3 { margin: 0 0 4px; align-self: center; }
}

/* ---------------------------------------------------------------- who it's for */
.who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.who { display: flex; flex-direction: column; margin: 0; padding: 22px; transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.who:hover { transform: translateY(-3px); border-color: var(--iris-200); box-shadow: var(--shadow); }
.who h3 { font-size: 17.5px; margin: 16px 0 8px; }
.who p { color: var(--muted); flex: 1; }
.who-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; margin-top: 14px; }
.who-link .ico { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.who-link:hover .ico { transform: translateX(3px); }
@media (max-width: 1000px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .who-grid { grid-template-columns: 1fr; gap: 12px; }
  .who { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .who .f-icon { grid-row: span 3; }
  .who h3 { margin: 2px 0 4px; }
  .who p { margin: 0; }
  .who-link { margin-top: 10px; }
}

/* ---------------------------------------------------------------- split (kept for older markup) */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.feature-card .ficon { font-size: 26px; display: block; margin-bottom: 10px; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-xl); overflow: hidden; }
.mock-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.mock-body { padding: 20px; }

/* ---------------------------------------------------------------- pricing (partials/pricing.php, billing) */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 36px; align-items: stretch; }
.price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.price-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.price-card h3 { font-size: 16px; color: var(--text-2); margin-bottom: 6px; }
.price-card.featured { border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: 0 30px 70px -20px color-mix(in srgb, var(--iris) 45%, transparent); }
.price-card ul { list-style: none; padding: 0; margin: 18px 0 24px; flex: 1; font-size: 14px; color: var(--text-2); display: grid; gap: 9px; align-content: start; }
.price-card li { position: relative; padding-left: 26px; margin: 0; line-height: 1.45; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--iris-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5cff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
.price { font-family: var(--display); font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price span { font-size: 15px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.ribbon { position: absolute; top: -12px; left: 24px; background: var(--grad-btn); color: #fff; font-size: 12px; font-weight: 650; padding: 4px 11px; border-radius: var(--pill); box-shadow: 0 6px 16px -4px rgba(124,92,255,.6); }
#pricing > h2 { margin-bottom: 10px; }
/* /pricing: the hero already has the heading, so the plans come straight after it */
.marketing .bil-sec-compact { padding-top: 48px; }
.bil-sec-compact .bil-pricing { margin-top: 18px; }
.bil-lead-sm { margin: 0 auto; max-width: 620px; color: var(--muted); font-size: 15px; }
@media (max-width: 600px) { .marketing .bil-sec-compact { padding-top: 32px; } }

/* ---------------------------------------------------------------- FAQ */
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { padding: 2px 4px; }
.faq-list summary { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; padding: 18px 0; }
.faq-list summary:hover { color: var(--iris-600); }
.faq-list details p { font-size: 15.5px; color: var(--text-2); max-width: 660px; margin: -4px 0 20px; }

/* ---------------------------------------------------------------- final call to action */
.final-cta { --focus: #c9bcff; position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #fff; padding: 104px 0; border-top: 1px solid #1d1a3a; }
.final-cta::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -260px; width: 900px; height: 560px; transform: translateX(-50%); background: var(--grad); filter: blur(140px); opacity: .42; border-radius: 50%; }
.final-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%); }
.final-cta .wrap { position: relative; }
.final-cta h2 { color: #fff; max-width: 19ch; margin: 22px auto 16px; font-size: clamp(32px, 4.6vw, 54px); }
.final-cta p { color: var(--on-dark-2); font-size: 18px; margin: 0 auto 30px; }
.final-cta .final-alt { font-size: 14.5px; margin: 20px 0 0; color: var(--on-dark-3); }
.final-cta a:not(.btn) { color: #cbbfff; }
@media (max-width: 600px) { .final-cta { padding: 72px 0; } }

/* ---------------------------------------------------------------- dark call-to-action box (teardown page, modules) */
.cta-box { --focus: #c9bcff; position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--radius-xl); padding: 36px; margin-top: 32px; border: 1px solid #262247; box-shadow: var(--shadow-lg); }
.cta-box::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -160px; width: 520px; height: 360px; background: var(--grad); filter: blur(90px); opacity: .5; border-radius: 50%; }
.cta-box h2 { font-size: clamp(22px, 2.6vw, 28px); color: #fff; letter-spacing: -.03em; }
.cta-box p { color: var(--on-dark-2); max-width: 620px; margin: 0; }
.cta-box a:not(.btn) { color: #cbbfff; }
.cta-box form { margin: 0; }
@media (max-width: 600px) { .cta-box { padding: 26px 22px; border-radius: var(--radius-lg); } .cta-box .btn { width: 100%; } .cta-box form { width: 100%; } }

/* ---- assets/src/35-pages.css ---- */
/* Single pages: sign up / log in / password reset, error pages, the hosted feedback form, privacy and terms. */

/* ---------------------------------------------------------------- shared field layout */
.field { display: grid; gap: 7px; min-width: 0; }
.field > label { margin: 0; }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-top a { font-size: 13.5px; font-weight: 550; }
.opt { font-weight: 450; font-size: 12.5px; color: var(--muted); margin-left: 4px; }
.field .hint { margin-top: 0; }

/* password with a show/hide button (the button only appears with JavaScript) */
.pw-field { position: relative; }
.pw-field input { padding-right: 88px; }
.pw-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.pw-toggle:hover { background: var(--surface-3); color: var(--text); }
.pw-toggle .ico { width: 17px; height: 17px; }
.pw-toggle[aria-pressed="true"] { color: var(--iris-600); }
.pw-toggle[hidden] { display: none; }

/* ---------------------------------------------------------------- auth: sign up, log in, forgot, reset */
.auth { position: relative; isolation: isolate; padding: 56px 0 80px; }
.auth::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 520px; pointer-events: none;
  background: radial-gradient(600px 300px at 18% 0%, color-mix(in srgb, var(--iris) 13%, transparent), transparent 70%), radial-gradient(520px 280px at 92% 10%, color-mix(in srgb, var(--coral) 9%, transparent), transparent 70%); }
.auth-wrap { display: grid; justify-items: center; }
.auth-split .auth-wrap { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); justify-content: center; align-items: center; gap: 64px; max-width: 1120px; }
.auth-main { width: 100%; max-width: 440px; }
.auth-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 34px 32px 28px; box-shadow: var(--shadow-lg); }
.auth-card > * { order: 2; }
.auth-card > .eyebrow, .auth-card > .auth-ic, .auth-card > h1, .auth-card > .auth-sub, .auth-card > .auth-error { order: 0; }
.auth-card > .bil-invite { order: 1; margin: 0 0 20px; border: 1px solid var(--iris-100); }
.auth-card .eyebrow { align-self: flex-start; }
.auth-card h1 { font-size: clamp(26px, 3vw, 31px); letter-spacing: -.024em; line-height: 1.15; margin: 0 0 8px; }
.auth-sub { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 0 0 24px; }
.auth-ic { align-self: flex-start; display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; margin-bottom: 18px; color: var(--iris-600); background: var(--iris-50); border: 1px solid var(--iris-100); }
.auth-ic .ico { width: 24px; height: 24px; }
.auth-ic-ok { color: var(--pos); background: var(--pos-bg); border-color: var(--pos-line); }
.auth-ic-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.auth-error { margin: -8px 0 20px; animation: none; box-shadow: none; }
.auth-form { display: grid; gap: 18px; margin: 0; }
.auth-form .btn-lg { margin-top: 4px; }
.auth-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--iris-50); border: 1px solid var(--iris-100); color: var(--text-2); font-size: 14px; line-height: 1.5; }
.auth-note .ico { color: var(--iris-600); margin-top: 2px; }
.auth-actions { display: grid; gap: 10px; }
.auth-alt { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 14.5px; }
.auth-alt a { font-weight: 600; }
.auth-fine { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.auth-fine a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); }
.auth-fine a:hover { color: var(--text); }

.auth-side { width: 100%; min-width: 0; }
.auth-side-in { position: relative; overflow: hidden; isolation: isolate; padding: 44px 44px 40px; border-radius: var(--radius-xl); border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--iris) 9%, var(--surface)), var(--surface-2) 62%); }
.auth-side-in::after { content: ""; position: absolute; z-index: -1; right: -120px; top: -140px; width: 340px; height: 340px; border-radius: 50%; background: var(--grad); opacity: .14; filter: blur(30px); pointer-events: none; }
.auth-side h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.026em; line-height: 1.12; margin: 0 0 26px; max-width: 19ch; }
.auth-side-p { color: var(--text-2); font-size: 16px; margin: -12px 0 22px; max-width: 46ch; }
.auth-gets { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; }
.auth-gets li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.auth-gets b { display: block; color: var(--text); font-weight: 650; }
.ag-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--iris-600); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.ag-ic .ico { width: 19px; height: 19px; }
.auth-demo { display: grid; gap: 11px; padding: 16px 18px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ad-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 650; color: var(--text); }
.ad-head em { font-style: normal; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-3); padding: 1px 8px; border-radius: var(--pill); }
.ad-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 130px) 26px; gap: 12px; align-items: center; font-size: 13.5px; color: var(--text-2); }
.ad-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .ad-row { grid-template-columns: minmax(0, 1fr) 64px 24px; gap: 10px; } }
.ad-row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 650; }
.ad-bar { position: relative; display: block; height: 8px; border-radius: var(--pill); background: var(--track); overflow: hidden; }
.ad-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; transform-origin: left; animation: grow-x 1s var(--ease) both .3s; }
.ad-neg::after { background: linear-gradient(90deg, var(--coral), var(--neg)); }
.ad-want::after { background: var(--grad); }
.ad-pos::after { background: linear-gradient(90deg, var(--mint), var(--pos)); }
.auth-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; font-size: 13.5px; color: var(--muted); }
.auth-trust li { display: inline-flex; align-items: center; gap: 6px; }
.auth-trust .ico { width: 16px; height: 16px; color: var(--pos); }
.auth-td { margin: 0; max-width: none; padding: 6px; border-radius: 16px; }
.auth-td input { height: 48px; }
.auth-td .btn { min-height: 48px; padding: 0 18px; }

@media (max-width: 960px) {
  .auth-split .auth-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .auth-side { max-width: 560px; }
  .auth-side-in { padding: 32px 28px; }
}
@media (max-width: 600px) {
  .auth { padding: 20px 0 48px; }
  .auth-card { padding: 26px 20px 22px; border-radius: var(--radius-lg); }
  .auth-side-in { padding: 26px 20px; border-radius: var(--radius-lg); }
  .auth-side h2 { font-size: 24px; margin-bottom: 20px; }
  .auth-td { flex-wrap: nowrap; }
  .auth-td .td-input { flex-basis: auto; }
  .auth-td .btn { flex: none; }
}

/* ---------------------------------------------------------------- error pages (404, 419, 500) */
.err { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0 96px; text-align: center; }
.err::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -220px; width: 900px; height: 520px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--iris) 16%, transparent), transparent); pointer-events: none; }
.err-wrap { max-width: 780px; }
.err-code { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: clamp(96px, 16vw, 168px); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, color-mix(in srgb, var(--iris) 55%, var(--paper)), color-mix(in srgb, var(--iris) 8%, var(--paper))); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.err h1 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.028em; line-height: 1.1; margin: 0 auto 14px; max-width: 20ch; }
.err-lead { max-width: 560px; margin: 0 auto; color: var(--muted); }
.err-form { margin: 30px auto 0; max-width: 640px; text-align: left; }
.err .cta-row { margin-top: 28px; }
.err-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 44px auto 0; text-align: left; }
.err-link { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); color: var(--text); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.err-link:hover { text-decoration: none; color: var(--text); border-color: var(--iris-200); transform: translateY(-2px); box-shadow: var(--shadow); }
.err-link > span:nth-child(2) { display: grid; min-width: 0; }
.err-link strong { font-size: 15px; font-weight: 650; }
.err-link small { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.err-link .f-icon { flex: none; width: 40px; height: 40px; border-radius: 11px; }
.err-go { margin-left: auto; flex: none; width: 18px; height: 18px; color: var(--faint); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.err-link:hover .err-go { transform: translateX(3px); color: var(--iris-600); }
@media (max-width: 600px) {
  .err { padding: 40px 0 64px; }
  .err-links { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
}

/* ---------------------------------------------------------------- hosted feedback form (layout_bare, synthiya.ai/f/KEY) */
body.bare { background: var(--paper-2); }
.pf { --pf-c: var(--iris); --pf-btn: var(--btn-bg); --focus: var(--pf-c);
  min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 40px 16px calc(28px + env(safe-area-inset-bottom));
  background: radial-gradient(700px 360px at 50% -10%, color-mix(in srgb, var(--pf-c) 16%, transparent), transparent 70%); }
.pf-card { position: relative; width: min(520px, calc(100vw - 32px)); padding: 32px 32px 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: fade-up var(--t-slow) var(--ease) both; }
.pf-mark { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--pf-btn); color: #fff; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; box-shadow: 0 8px 20px -8px var(--pf-c), inset 0 1px 0 rgba(255,255,255,.2); }
.pf-kicker { margin: 0 0 4px; font-size: 13.5px; font-weight: 650; color: var(--muted); overflow-wrap: anywhere; }
.pf-card h1 { font-size: clamp(25px, 6vw, 30px); letter-spacing: -.024em; line-height: 1.15; margin: 0 0 6px; }
.pf-sub { margin: 0 0 24px; color: var(--muted); }
.pf-form { display: grid; gap: 18px; margin: 0; }
.pf-err { display: flex; align-items: flex-start; gap: 10px; margin: -8px 0 20px; padding: 11px 14px; border-radius: 12px; background: var(--neg-bg); border: 1px solid var(--neg-line); color: var(--neg); font-size: 14.5px; font-weight: 550; }
.pf-err .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.pf-form input:focus, .pf-form textarea:focus { border-color: var(--pf-c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-c) 22%, transparent); }
.pf-form textarea { min-height: 128px; }
.pf-rate legend { font-size: 14px; font-weight: 550; margin-bottom: 8px; }
.pf-opt { font-weight: 450; font-size: 12.5px; color: var(--muted); margin-left: 4px; }
.pf-stars { display: flex; align-items: center; gap: 4px; }
.pf-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pf-stars label { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 12px; cursor: pointer; color: var(--faint); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background-color var(--t) var(--ease); }
/* Empty stars are outlines in a color with 3:1 contrast or more; chosen stars fill with amber. */
.pf-stars label svg { width: 32px; height: 32px; fill: transparent; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transition: fill var(--t-fast) var(--ease); }
.pf-stars label:hover { transform: scale(1.08); }
.pf-stars label:active { transform: scale(.94); }
/* Light every star up to the chosen one (or the one under the pointer). */
.pf-stars:has(:checked) label { color: var(--star-line); }
.pf-stars:has(:checked) label svg { fill: var(--amber); }
.pf-stars :checked + label ~ label { color: var(--faint); }
.pf-stars :checked + label ~ label svg { fill: transparent; }
.pf-stars:has(label:hover) > input + label { color: var(--star-line); }
.pf-stars:has(label:hover) > input + label svg { fill: var(--amber); }
.pf-stars > label:hover ~ label { color: var(--faint); }
.pf-stars > label:hover ~ label svg { fill: transparent; }
.pf-stars input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 1px; background: color-mix(in srgb, var(--pf-c) 10%, transparent); }
.pf-say { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); min-width: 5em; }
.pf-stars:has(#r1:checked) .pf-say::after { content: "Very bad"; }
.pf-stars:has(#r2:checked) .pf-say::after { content: "Bad"; }
.pf-stars:has(#r3:checked) .pf-say::after { content: "Okay"; }
.pf-stars:has(#r4:checked) .pf-say::after { content: "Good"; }
.pf-stars:has(#r5:checked) .pf-say::after { content: "Great"; }
.pf-stars:has(label[for="r1"]:hover) .pf-say::after { content: "Very bad"; }
.pf-stars:has(label[for="r2"]:hover) .pf-say::after { content: "Bad"; }
.pf-stars:has(label[for="r3"]:hover) .pf-say::after { content: "Okay"; }
.pf-stars:has(label[for="r4"]:hover) .pf-say::after { content: "Good"; }
.pf-stars:has(label[for="r5"]:hover) .pf-say::after { content: "Great"; }
.pf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-hint { margin: -10px 0 0; font-size: 13px; color: var(--muted); }
.pf-send { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 2px; padding: 12px 20px; border: 0; border-radius: 14px; background: var(--pf-btn); color: #fff; font: inherit; font-size: 16px; font-weight: 650; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -10px var(--pf-c); transition: filter var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.pf-send:hover { filter: brightness(1.08); }
.pf-send:active { transform: translateY(1px); }
.pf-send:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pf-send:disabled { opacity: .7; cursor: progress; }
.pf-send .ico { width: 18px; height: 18px; }
.pf-done { text-align: center; padding: 6px 0 4px; }
.pf-card:has(.pf-done) .pf-mark { display: none; }
.pf-check { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; color: #fff; background: var(--pf-btn); box-shadow: 0 0 0 8px color-mix(in srgb, var(--pf-c) 16%, transparent); animation: fade-up var(--t-slow) var(--ease) both; }
.pf-check .ico { width: 30px; height: 30px; stroke-width: 2.4; }
.pf-done p { color: var(--muted); max-width: 36ch; margin: 0 auto 18px; }
.pf-again { font-weight: 600; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pf-again:hover { color: var(--text); }
.pf-powered { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pf-powered a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-weight: 600; }
.pf-powered img { display: block; }
@media (max-width: 520px) {
  .pf { place-content: start center; padding-top: 16px; }
  .pf-card { padding: 24px 20px 22px; border-radius: 20px; }
  .pf-row { grid-template-columns: minmax(0, 1fr); }
  .pf-stars label { width: 46px; height: 46px; }
}

/* ---------------------------------------------------------------- privacy and terms */
.lg-head { padding: 36px 0 32px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--iris) 7%, var(--paper)), var(--paper)); }
.lg-head-inner { max-width: 1100px; }
.lg-crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 18px; padding: 0; font-size: 13px; color: var(--muted); }
.lg-crumbs li + li::before { content: "/"; margin: 0 8px; opacity: .6; }
.lg-crumbs a { color: var(--muted); }
.lg-crumbs a:hover { color: var(--iris-600); }
.lg-head h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -.03em; line-height: 1.08; margin: 0 0 12px; }
.lg-dek { font-size: 18.5px; line-height: 1.5; color: var(--muted); max-width: 680px; margin: 0 0 14px; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 14px; color: var(--muted); }
.lg-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lg-meta .ico { width: 15px; height: 15px; }
.lg-layout { display: grid; grid-template-columns: 232px minmax(0, 728px); grid-template-areas: "side summary" "side article"; column-gap: 56px; max-width: 1100px; padding-top: 36px; padding-bottom: 72px; align-items: start; }
.lg-side { grid-area: side; align-self: stretch; }
.lg-summary { grid-area: summary; }
.lg-article { grid-area: article; }
.lg-toc { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lg-toc-h { font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.lg-toc ol { list-style: none; margin: 12px 0 0; padding: 0; border-left: 2px solid var(--line); counter-reset: lg; }
.lg-toc li { counter-increment: lg; }
.lg-toc a { display: flex; gap: 8px; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; line-height: 1.35; }
.lg-toc a::before { content: counter(lg); min-width: 1.3em; color: var(--faint); font-variant-numeric: tabular-nums; font-size: 13px; }
.lg-toc a:hover { color: var(--text); text-decoration: none; border-left-color: var(--muted); }
.lg-toc a:focus-visible { outline-offset: -2px; }
.lg-toc a[aria-current] { color: var(--iris-600); border-left-color: var(--iris); font-weight: 600; }
.lg-toc a[aria-current]::before { color: var(--iris-600); }
.lg-other { margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--muted); }
.lg-other a { font-weight: 600; }
.lg-article { min-width: 0; font-size: 16.5px; line-height: 1.7; color: var(--text-2); }
.lg-summary { margin: 0 0 40px; padding: 22px 24px 20px; border-radius: 18px; background: color-mix(in srgb, var(--iris) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--iris) 24%, var(--line)); color: var(--text); }
.lg-summary h2 { display: flex; align-items: center; gap: 10px; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--iris-600); margin: 0 0 10px; }
.lg-summary h2 .ico { width: 18px; height: 18px; }
.lg-summary ul { list-style: none; margin: 0; padding: 0; }
.lg-summary li { position: relative; padding: 7px 0 7px 32px; line-height: 1.55; font-size: 16px; }
.lg-summary li + li { border-top: 1px dashed color-mix(in srgb, var(--iris) 20%, var(--line)); }
.lg-summary li::before { content: ""; position: absolute; left: 0; top: 9px; width: 21px; height: 21px; border-radius: 50%; background: color-mix(in srgb, var(--iris) 16%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5cff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lg-sec { padding-top: 6px; }
.lg-sec + .lg-sec { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.lg-sec h2 { display: flex; align-items: baseline; gap: 12px; font-size: 23px; letter-spacing: -.02em; color: var(--text); margin: 0 0 12px; scroll-margin-top: 88px; }
.lg-n { flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--iris-600); background: var(--iris-50); border: 1px solid var(--iris-100); transform: translateY(-3px); }
.lg-sec h3 { font-size: 16.5px; color: var(--text); margin: 20px 0 6px; }
.lg-sec p, .lg-sec ul { margin: 0 0 14px; }
.lg-sec ul { padding-left: 1.3em; }
.lg-sec li { margin: 6px 0; padding-left: .2em; }
.lg-sec li::marker { color: var(--iris-600); }
.lg-sec strong { color: var(--text); font-weight: 650; }
.lg-sec a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--iris) 40%, transparent); text-underline-offset: 3px; }
.lg-sec a:hover { text-decoration-color: currentColor; }
.lg-table { overflow-x: auto; margin: 6px 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lg-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.lg-table th, .lg-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lg-table tr:last-child > * { border-bottom: 0; }
.lg-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.lg-table td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.lg-table code { white-space: nowrap; }
.lg-contact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.lg-contact p { margin: 0; flex: 1 1 260px; }
@media (max-width: 880px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "side" "article"; padding-top: 24px; }
  .lg-summary { margin-bottom: 20px; }
  .lg-side { margin-bottom: 32px; }
  .lg-toc { position: static; max-height: none; padding: 16px 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .lg-toc ol { border-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin-top: 8px; }
  .lg-toc a { padding: 7px 0; margin: 0; border: 0; font-size: 14px; }
  .lg-other { display: none; }
}
@media (max-width: 600px) {
  .lg-head { padding: 24px 0 24px; }
  .lg-dek { font-size: 17px; }
  .lg-article { font-size: 16px; }
  .lg-summary { padding: 18px 16px 14px; }
  .lg-sec h2 { font-size: 20px; }
}

/* ---- assets/src/40-teardown.css ---- */
/* Teardowns: cards (modules use .td-grid / .td-card / .td-card-head), the teardown page, the directory and app search. */

/* ---------------------------------------------------------------- cards */
.td-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 28px; }
.td-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--text); box-shadow: var(--shadow-xs); transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); min-width: 0; }
a.td-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--iris-200); box-shadow: var(--shadow); color: var(--text); }
.td-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.td-card-head img { width: 44px; height: 44px; border-radius: 11px; flex: none; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.td-card-head strong { font-size: 15px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.td-card p { font-size: 14px; color: var(--text-2); margin: 0; line-height: 1.5; }
.td-card small, .td-card .muted { font-size: 12.5px; }
.tdc-title { display: grid; min-width: 0; flex: 1; }
/* names wrap to two lines before they are cut, so "Habitly: Habit Tracker" stays readable in four columns */
.tdc-title strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; text-wrap: balance; }
.tdc-title small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.tdc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }
.tdc-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.tdc-go { margin-left: auto; color: var(--faint); width: 18px; height: 18px; transition: transform var(--t) var(--ease), color var(--t); }
a.td-card:hover .tdc-go { transform: translateX(3px); color: var(--iris-600); }
.td-card-rich p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.score-pill { flex: none; display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 9px; font-family: var(--display); font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; border: 1px solid; }
.sp-good { color: var(--pos); background: var(--pos-bg); border-color: var(--pos-line); }
.sp-mid { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.sp-bad { color: var(--neg); background: var(--neg-bg); border-color: var(--neg-line); }

/* ---------------------------------------------------------------- teardown hero */
.td-hero { --focus: #c9bcff; position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #fff; padding: 28px 0 40px; border-bottom: 1px solid #1d1a3a; }
.td-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(640px 340px at 88% -10%, rgba(124,92,255,.42), transparent 70%), radial-gradient(520px 300px at -5% 110%, rgba(255,106,136,.22), transparent 70%), radial-gradient(400px 240px at 50% 120%, rgba(45,212,167,.10), transparent 70%); }
.td-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.td-hero a:not(.btn) { color: #cbbfff; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--on-dark-3); margin-bottom: 26px; }
.crumbs a { color: var(--on-dark-2) !important; }
.crumbs a:hover { color: #fff !important; }
.crumbs .ico { width: 14px; height: 14px; opacity: .6; }
.crumbs [aria-current] { color: var(--on-dark-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
.td-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.td-icon { --av-s: 88px; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 18px 40px -10px rgba(0,0,0,.6); }
.td-icon.av { font-size: 42px; }
.td-title { flex: 1; min-width: 240px; }
.td-kicker { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #c9bcff; margin-bottom: 6px; }
.td-title h1 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 8px; color: #fff; }
.td-sub { margin: 0; color: var(--on-dark-2); font-size: 15px; }
.td-store { margin: 6px 0 0; color: var(--on-dark-3); font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-store b { color: #fff; }
.td-hero .stars5 > span { background: linear-gradient(90deg, var(--amber) var(--fill), rgba(255,255,255,.2) var(--fill)); -webkit-background-clip: text; background-clip: text; }
.td-score { display: grid; justify-items: center; gap: 2px; text-align: center; }
.td-score .ring2-track { stroke: rgba(255,255,255,.1); }
.td-score .ring2-num { color: #fff; }
.td-mood { font-family: var(--display); font-size: 16px; letter-spacing: -.01em; margin-top: 8px; }
.td-mood.tone-good { color: #7ef0c9; } .td-mood.tone-mid { color: #ffd08a; } .td-mood.tone-bad { color: #ff9aac; }
.td-score small { font-size: 11.5px; color: var(--on-dark-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.verdict { position: relative; font-family: var(--display); font-size: clamp(22px, 3vw, 34px); font-weight: 700; letter-spacing: -.025em; line-height: 1.22; margin: 30px 0 0; padding: 0 0 0 52px; border: 0; background: none; color: #fff; font-style: normal; max-width: 980px; border-radius: 0; text-wrap: balance; }
.verdict-q { position: absolute; left: 0; top: .1em; width: 36px; height: 36px; color: #a993ff; opacity: .9; }
.td-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.td-facts li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--pill); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--on-dark-2); }
.td-facts b { color: #fff; font-weight: 700; }
.td-facts .ico { width: 14px; height: 14px; opacity: .8; }
.share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.copy-inline { display: inline-flex; gap: 6px; align-items: center; }
.copy-inline input { width: 230px; min-height: 34px; height: 34px; margin: 0; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 10px; }
.copy-inline input:focus { border-color: rgba(201,188,255,.7); box-shadow: 0 0 0 3px rgba(124,92,255,.3); }
@media (max-width: 720px) {
  .td-hero { padding: 20px 0 30px; }
  .crumbs { margin-bottom: 18px; }
  .td-head { gap: 16px; }
  .td-icon { --av-s: 64px !important; width: 64px; height: 64px; border-radius: 16px; }
  .td-icon.av { font-size: 30px; }
  .td-title { min-width: 0; flex-basis: calc(100% - 84px); }
  .td-score { grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 14px; width: 100%; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); text-align: left; }
  .td-score .ring2 { --ring-s: 72px !important; grid-row: span 2; }
  .td-mood { margin: 0; align-self: end; font-size: 18px; }
  .td-score small { align-self: start; }
  .verdict { margin-top: 22px; padding-left: 36px; }
  .verdict-q { width: 26px; height: 26px; }
  .share .copy-inline input { display: none; }
}

/* ---------------------------------------------------------------- insights */
.td-main { padding-top: 40px; }
.td-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.td-col { --c: var(--iris); --c-text: var(--iris-600); position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 20px 8px; box-shadow: var(--shadow-sm); overflow: hidden; }
.td-col::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); }
.td-love { --c: linear-gradient(90deg, var(--mint), #12b886); --c-text: var(--pos); --c-bg: var(--pos-bg); }
.td-hate { --c: linear-gradient(90deg, var(--coral), var(--rose)); --c-text: var(--neg); --c-bg: var(--neg-bg); }
.td-requests { --c: var(--grad); --c-text: var(--iris-600); --c-bg: var(--iris-50); }
.td-col-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.td-col-h h2 { font-size: 17.5px; margin: 0; flex: 1; }
.td-col-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c-bg); color: var(--c-text); flex: none; }
.td-col-ic .ico { width: 18px; height: 18px; }
.td-col-n { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-3); border-radius: var(--pill); padding: 1px 8px; }
.td-items { list-style: none; margin: 0; padding: 0; }
.td-item { padding: 14px 0; border-top: 1px solid var(--line); }
.td-item:first-child { border-top: 0; }
.td-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.td-item-top strong { font-size: 15px; line-height: 1.4; font-weight: 650; }
.td-item q { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.5; padding-left: 12px; border-left: 2px solid var(--line-2); }
.td-meter { display: block; height: 5px; border-radius: 5px; background: var(--track); margin-top: 8px; overflow: hidden; }
.td-meter i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--c); }
.td-none { color: var(--muted); font-size: 14px; padding: 12px 0 14px; margin: 0; }
.mentions { flex: none; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: var(--pill); background: var(--c-bg, var(--iris-50)); color: var(--c-text, var(--iris-600)); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .td-cols { grid-template-columns: 1fr; } }

.td-callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.td-callouts .callout { margin: 0; box-shadow: var(--shadow-sm); }
.callout-fix { border-left-color: var(--neg); background: linear-gradient(135deg, var(--neg-bg), var(--surface) 70%); border-color: var(--neg-line); border-left-color: var(--neg); }
.callout-fix .callout-label { color: var(--neg); }
.callout-opp { background: linear-gradient(135deg, var(--warn-bg), var(--surface) 70%); border-color: var(--warn-line); border-left-color: var(--amber); }
.callout-opp .callout-label { color: var(--warn); }
.callout-churn { border-left-color: var(--coral); }
.callout-churn .callout-label { color: var(--text-2); }
.churn { margin: 10px 0 0; padding-left: 18px; }
.churn li { margin: 6px 0; font-weight: 500; }
.churn li::marker { color: var(--coral); }

/* ---------------------------------------------------------------- charts */
.td-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.td-chart { margin: 0; }
.mood-split { display: grid; gap: 10px; margin-bottom: 16px; }
.ms-bar { display: flex; height: 12px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--track); }
.ms-bar i { display: block; height: 100%; }
.ms-pos { background: var(--pos); } .ms-neu { background: var(--neu); } .ms-neg { background: var(--neg); }
.ms-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.ms-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ms-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.ms-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.dist { margin-bottom: 14px; }
.dist-row { display: grid; grid-template-columns: 30px 1fr 40px 40px; gap: 10px; align-items: center; font-size: 13.5px; padding: 5px 0; }
.dist-row > span:first-child { color: var(--muted); font-weight: 600; }
.dist-row b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dist-row em { text-align: right; font-style: normal; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dist-row .bar { height: 10px; }
.ver-chart { position: relative; height: 210px; padding: 8px 0 26px 34px; }
.ver-grid { position: absolute; inset: 8px 0 26px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.ver-grid span { position: relative; font-size: 11px; color: var(--faint); line-height: 0; }
.ver-grid span::after { content: ""; position: absolute; left: 30px; right: 0; top: 0; border-top: 1px dashed var(--line); }
.ver-cols { position: relative; display: flex; align-items: flex-end; gap: 12px; height: 100%; }
.ver { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.ver-bar { width: 100%; max-width: 56px; border-radius: 8px 8px 3px 3px; position: relative; }
.ver-bar.pos { background: linear-gradient(180deg, color-mix(in srgb, var(--pos) 70%, var(--mint)), var(--pos)); }
.ver-bar.neu { background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 80%, #fff), var(--amber)); }
.ver-bar.neg { background: linear-gradient(180deg, var(--coral), var(--neg)); }
.ver-bar em { position: absolute; top: -21px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ver small { position: absolute; bottom: -22px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.empty-sm { padding: 28px 12px; }
@media (max-width: 880px) { .td-charts { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- after the insights */
.td-again { text-align: center; margin: 56px auto 0; max-width: 760px; }
.td-again h2 { margin-bottom: 6px; }
.td-again .td-form { margin-top: 18px; }
.td-related { margin-top: 64px; }
/* wider cards where the full app name should fit on one or two lines without cutting words */
.td-related .td-grid, #td-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.td-explore { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.td-explore a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; font-weight: 550; }
.td-explore a:hover { border-color: var(--iris-200); color: var(--text); text-decoration: none; }
.td-explore .ico { width: 16px; height: 16px; color: var(--iris-600); }

/* ---------------------------------------------------------------- sticky share bar (phones) */
.td-sharebar { display: none; }
@media (max-width: 720px) {
  .td-sharebar { position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); animation: fade-up var(--t-slow) var(--ease) both .4s; }
  .td-sharebar > *, .td-sharebar .copy-inline { flex: 1; }
  .td-sharebar .btn { width: 100%; padding: 6px 8px; min-height: 40px; }
  .td-sharebar .copy-inline .btn { flex: 1; }
  .td-sharebar [hidden] { display: none; }
  .marketing main:has(.td-sharebar) { padding-bottom: 76px; }
}

/* ---------------------------------------------------------------- directory */
.dir-hero { padding-bottom: 64px; }
.dir-bar { position: sticky; top: 64px; z-index: 30; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.dir-bar-inner { display: flex; gap: 12px; align-items: center; padding-top: 12px; padding-bottom: 12px; }
.dir-search { flex: 0 1 340px; margin: 0; }
.dir-search input { margin: 0; min-height: 40px; }
.dir-genres { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.dir-genres::-webkit-scrollbar { display: none; }
.dir-genres .chip { margin: 0; white-space: nowrap; padding: 6px 12px; font-size: 13px; background: var(--surface); color: var(--text-2); border-color: var(--line); }
.dir-genres .chip:hover { border-color: var(--iris-200); color: var(--text); }
.dir-genres .chip[aria-current="page"] { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.dir-head { margin-bottom: 18px; align-items: flex-end; }
.dir-head p { margin: 0; }
.dir-empty { text-align: center; padding: 48px 16px; }
.fresh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.fresh-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--text); }
.fresh-list a:hover { background: var(--surface); text-decoration: none; box-shadow: var(--shadow-xs); }
.fresh-list .fl-name { flex: 1; min-width: 0; display: grid; }
.fresh-list .fl-name strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fresh-list .fl-name small { color: var(--muted); font-size: 12.5px; }
.cat-links { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) {
  .dir-bar { top: 64px; }
  .dir-bar-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .dir-search { flex-basis: auto; }
}

/* ---------------------------------------------------------------- app search ("Which app did you mean?") */
.pick-list { display: grid; gap: 10px; margin-top: 24px; }
.pick { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 12px 12px; color: var(--text); box-shadow: var(--shadow-xs); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.pick:hover { text-decoration: none; border-color: var(--iris-200); transform: translateY(-1px); box-shadow: var(--shadow); color: var(--text); }
.pick img { border-radius: 13px; }
.pick > span:not(.av) { min-width: 0; flex: 1; }
.pick strong { display: block; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick em { margin-left: auto; font-style: normal; color: var(--iris-600); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.pick em .ico { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.pick:hover em .ico { transform: translateX(3px); }
@media (max-width: 520px) { .pick em span { display: none; } }

.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 550; color: var(--muted); margin-bottom: 18px; }
.back-link:hover { color: var(--text); text-decoration: none; }
.back-link .ico { width: 16px; height: 16px; }
.pick-note { text-align: center; margin-top: 22px; }
.pick-page .empty .td-form { margin-top: 20px; text-align: left; }

/* ---- assets/src/50-app.css ---- */
/* The logged-in app: project header and tabs, page headers, overview, feedback, reports, collect, settings, account,
   projects, and print. Only app screens use these classes. Module screens are refined at the end, scoped to .in-app.
   Colors come from the design tokens in base.css, so light and dark both work. */

/* ---------------------------------------------------------------- app tokens
   --neg-text: red for small text on the pale red background (--neg-bg). The shared --neg is a little light for that
   in the light theme (4.4:1); this one passes 4.5:1. Dark mode keeps --neg, which already passes. */
.in-app { --neg-text: #c2264a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .in-app { --neg-text: var(--neg); } }
:root[data-theme="dark"] .in-app { --neg-text: var(--neg); }
.in-app .delta-bad, .in-app .lvl-high, .in-app .sent-neg, .in-app .pj-st-bad { color: var(--neg-text); }
.in-app .b-bug, .in-app .b-churn_risk, .in-app .b-urgent, .in-app .b-neg { --b-c: var(--neg-text); }

/* ---------------------------------------------------------------- app chrome: footer, flashes */
.in-app .footer { margin-top: 40px; padding: 0 0 20px; background: transparent; border-top: 0; }
.in-app .footer-bottom { margin-top: 0; padding-top: 18px; }
.in-app .flashes { max-width: var(--wrap); }

/* ---------------------------------------------------------------- project header */
.proj-head { background: var(--surface); border-bottom: 1px solid var(--line); padding-top: 22px; }
.proj-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 10px; }
.proj-id { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 320px; }
.proj-av { box-shadow: 0 0 0 1px var(--line), 0 6px 16px -6px rgba(48,30,130,.35); }
.proj-name { min-width: 0; }
.proj-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.proj-title h1 { font-size: 24px; letter-spacing: -.028em; margin: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-all { margin-left: 8px; white-space: nowrap; }
.proj-switch { width: auto; font-family: var(--display); font-size: 22px; font-weight: 800; border: 0; padding-left: 0; background-color: transparent; }
.proj-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.proj-src { display: inline-flex; align-items: center; gap: 6px; }
.proj-src .ico { width: 14px; height: 14px; }
.proj-src .live { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(45,212,167,.2); }
.proj-src-off { color: var(--iris-600); font-weight: 550; }
a.badge.proj-plan:hover { text-decoration: none; filter: brightness(.97); }

/* project switcher (a <details> menu; app.js closes it on Escape or an outside click) */
.proj-menu { position: relative; border: 0; padding: 0; flex: none; }
.proj-menu > summary { list-style: none; width: 32px; height: 32px; padding: 0; justify-content: center; }
.proj-menu > summary::-webkit-details-marker { display: none; }
.proj-menu > summary::after { display: none; }
.proj-menu > summary .ico { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.proj-menu[open] > summary .ico { transform: rotate(180deg); }
.proj-menu-panel { position: absolute; left: -8px; top: calc(100% + 8px); z-index: 60; width: min(300px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; animation: fade-up var(--t) var(--ease) both; }
.proj-menu-h { margin: 0; padding: 8px 10px 6px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.proj-menu-panel a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--text); font-size: 14px; font-weight: 500; }
.proj-menu-panel a:hover { background: var(--surface-3); text-decoration: none; }
.proj-menu-panel a span:not(.av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-menu-panel a > .ico { width: 16px; height: 16px; color: var(--iris-600); }
.proj-menu-panel a[aria-current="page"] { background: var(--iris-50); }
.proj-menu-panel .av { flex: none; --av-s: 24px; border-radius: 7px; font-size: 12px; }

/* usage meter */
.proj-usage { display: grid; gap: 6px; width: 260px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.proj-usage:hover { text-decoration: none; border-color: var(--iris-200); color: var(--text-2); }
.proj-usage-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.proj-usage-top b { color: var(--text); font-weight: 650; white-space: nowrap; }
.proj-usage-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--iris-600); font-weight: 600; }
.proj-usage-cta .ico { width: 14px; height: 14px; }
.umeter { display: block; height: 6px; border-radius: var(--pill); background: var(--track); overflow: hidden; }
.umeter i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.umeter-high i { background: linear-gradient(90deg, var(--amber), #ff8a5c); }
.umeter-full i { background: var(--neg); }

/* tabs: scroll sideways on small screens, with soft edge shadows that only show when there is more to see */
.proj-tabs { margin: 0 -8px; padding: 0 8px;
  background:
    linear-gradient(90deg, var(--surface) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 16%, transparent), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 16%, transparent), transparent) right / 12px 100% no-repeat scroll;
}
.proj-tabs a { padding: 11px 12px 13px; font-size: 14px; }
.proj-tabs a .ico { width: 16px; height: 16px; color: var(--faint); transition: color var(--t) var(--ease); }
.proj-tabs a:hover .ico, .proj-tabs a[aria-current="page"] .ico { color: var(--iris-600); }

@media (max-width: 600px) {
  .proj-usage:not(.is-high) { display: none; }
  .proj-head { padding-top: 16px; }
  .proj-id { gap: 12px; flex-basis: 100%; }
  .proj-av { --av-s: 38px !important; width: 38px; height: 38px; }
  .proj-title h1 { font-size: 20px; }
  .proj-usage { width: 100%; padding: 8px 12px; }
  .proj-bar { margin-bottom: 6px; gap: 12px; }
  .proj-tabs a { padding: 10px 10px 12px; font-size: 13.5px; gap: 6px; }
  /* the switcher drops below the whole title row so it never runs off the right edge */
  .proj-id { position: relative; }
  .proj-menu { position: static; }
  .proj-menu-panel { left: 0; right: 0; width: auto; top: calc(100% + 6px); }
}

/* ---------------------------------------------------------------- page headers (core pages, and modules' titles) */
.app-page { padding-top: 28px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.page-title, .in-app .ins-title, .in-app .act-title { font-size: 22px; font-weight: 750; letter-spacing: -.026em; margin: 0 0 4px; line-height: 1.2; }
.page-sub { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 640px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-title .count { font-family: var(--font); font-size: 14px; font-weight: 550; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
@media (max-width: 600px) {
  .app-page { padding-top: 20px; }
  .page-title, .in-app .ins-title, .in-app .act-title { font-size: 20px; }
  .page-head { margin-bottom: 16px; }
}

/* card titles with icons */
.card-head h2 { display: flex; align-items: center; gap: 8px; font-size: 16.5px; letter-spacing: -.018em; }
.card-head h2 > .ico { width: 18px; height: 18px; color: var(--iris-600); }

/* notices in the app */
.in-app .notice .push { margin-left: auto; }
.in-app .notice > span { flex: 1 1 220px; min-width: 0; }
.in-app .notice > .ico { flex: none; }
.in-app .notice form { margin: 0; }

/* ---------------------------------------------------------------- overview: KPIs */
.ov-kpis .kpi { padding: 16px 18px 14px; overflow: hidden; }
.ov-kpis .kpi-label .ico { width: 15px; height: 15px; color: var(--faint); }
.ov-kpis .kpi strong { font-size: 32px; margin-top: 6px; }
.kpi-unit { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ov-kpis .kpi-foot { margin-top: 4px; }
.kpi-spark { position: absolute; right: 16px; top: 18px; display: flex; align-items: flex-end; gap: 2px; width: 74px; height: 30px; }
.kpi-spark i { flex: 1; border-radius: 2px 2px 0 0; background: var(--iris-200); }
.kpi-spark i:nth-last-child(-n+7) { background: var(--iris); }
.kpi-spark i.z { background: var(--track); }
.kpi-mix { position: absolute; right: 16px; top: 22px; display: flex; gap: 2px; width: 74px; height: 6px; }
.kpi-mix i { display: block; border-radius: 3px; min-width: 3px; }
.ov-kpis .kpi { container-type: inline-size; display: flex; flex-direction: column; }
.kpi-stars { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: auto; padding-top: 12px; }
.kpi-stars .stars5 { font-size: 15px; }
.kpi-stars .small { white-space: nowrap; }
.kpi-link, .kpi-ok { display: inline-flex; align-items: baseline; gap: 5px; line-height: 1.35; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 550; }
.kpi-link .ico, .kpi-ok .ico { width: 14px; height: 14px; flex: none; align-self: flex-start; margin-top: calc((1.35em - 14px) / 2); }
.kpi-ok { color: var(--pos); }
@container (max-width: 250px) {
  .kpi-spark { position: static; width: 100%; height: 22px; margin-top: 12px; }
  .kpi-mix { position: static; width: 100%; margin-top: 14px; }
}

/* ---------------------------------------------------------------- overview: grids and lists */
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.ov-grid > .card { margin-bottom: 0; }
.ov-grid-wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 960px) { .ov-grid, .ov-grid-wide { grid-template-columns: minmax(0, 1fr); } }

.ov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ov-li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--text-2); }
.ov-li:first-child { border-top: 0; padding-top: 2px; }
.ov-li strong { color: var(--text); font-weight: 600; }
.ov-li-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--iris-50); color: var(--iris-600); }
.ov-li-icon .ico { width: 16px; height: 16px; }
.ov-bad .ov-li-icon { background: var(--neg-bg); color: var(--neg); }
.ov-good .ov-li-icon { background: var(--pos-bg); color: var(--pos); }
.ov-li-text { padding-top: 3px; min-width: 0; }
.ov-li-text a { font-weight: 550; white-space: nowrap; }

.ov-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ov-act { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.ov-act-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--iris-600); border: 1px solid var(--line); }
.ov-act-icon .ico { width: 17px; height: 17px; }
.ov-act-bad .ov-act-icon { color: var(--neg); background: var(--neg-bg); border-color: var(--neg-line); }
.ov-act-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ov-act-body strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; }
.ov-act-body .small { line-height: 1.45; }
.ov-act form { margin: 0; flex: none; }
.ov-act .btn { flex: none; }
@media (max-width: 480px) {
  .ov-act { flex-wrap: wrap; align-items: flex-start; }
  .ov-act-body { flex-basis: calc(100% - 50px); }
  .ov-act > .btn, .ov-act > form { margin-left: 46px; }
}

.ov-clear { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0; }
.ov-clear p { margin: 0; }
.ov-clear-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pos-bg); color: var(--pos); }
.ov-clear-icon .ico { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- overview: daily chart (HTML + CSS columns) */
.vchart { --vc-h: 168px; position: relative; padding-top: 22px; }
.vchart-plot { position: relative; height: var(--vc-h); margin-left: 26px; }
.vchart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.vchart-grid span { position: relative; height: 0; border-top: 1px solid var(--line); }
.vchart-grid span::before { content: attr(data-v); position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vchart-week { position: absolute; top: -22px; bottom: -4px; right: -4px; width: calc(7 / var(--vc-n) * 100% + 4px); border-radius: 8px; background: color-mix(in srgb, var(--iris) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--iris) 30%, transparent); pointer-events: none; }
.vchart-week span { position: absolute; top: 3px; left: 0; right: 0; text-align: center; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--iris-600); }
.vchart-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 0; }
.vchart-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.vchart-stack { display: flex; flex-direction: column-reverse; gap: 2px; width: min(64%, 16px); min-height: 0; }
.vchart-stack i { display: block; min-height: 3px; flex-basis: 0; }
.vchart-stack i:last-child { border-radius: 4px 4px 0 0; }
.vc-pos { background: color-mix(in srgb, var(--pos) 78%, var(--mint)); } .vc-neu { background: color-mix(in srgb, var(--neu) 70%, var(--surface)); } .vc-neg { background: color-mix(in srgb, var(--neg) 85%, var(--coral)); }
.vchart-legend .vc-pos, .vchart-stack .vc-pos { background: color-mix(in srgb, var(--pos) 78%, var(--mint)); }
.vc-wait { background: var(--iris-200); }
.vchart-col:hover .vchart-stack { filter: brightness(1.08) saturate(1.1); }
.vchart-col::after { content: none; position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5; transform: translateX(-50%); width: max-content; max-width: 210px; padding: 7px 10px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; box-shadow: var(--shadow-lg); pointer-events: none; white-space: normal; text-align: left; animation: fade-in var(--t-fast) var(--ease) both; }
.vchart-col:hover::after { content: attr(data-tip); }
:root[data-theme="dark"] .vchart-col::after { background: #2a2552; border: 1px solid var(--line-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vchart-col::after { background: #2a2552; border: 1px solid var(--line-2); } }
.vchart-col:nth-child(-n+10)::after { left: 0; transform: none; }
.vchart-col:nth-last-child(-n+10)::after { left: auto; right: 0; transform: none; }
.vchart-col:hover { background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 6px; }
.vchart-x { display: flex; justify-content: space-between; margin: 8px 0 0 26px; font-size: 11.5px; color: var(--muted); }
.vchart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.vchart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vchart-legend i { width: 10px; height: 10px; border-radius: 3px; }
.vchart-table { border: 0; padding: 0; margin-top: 6px; }
.vchart-table > summary { padding: 6px 0; font-size: 13px; font-weight: 550; color: var(--iris-600); justify-content: flex-start; }
.vchart-table > summary::after { width: 18px; height: 18px; background-size: 10px; }
.vchart-table .table-wrap { max-height: 280px; overflow-y: auto; margin: 6px 0 0; }
.vchart-table .table { font-variant-numeric: tabular-nums; }
.vchart-table .table th, .vchart-table .table td { padding: 7px 12px; font-size: 13px; }

/* ---------------------------------------------------------------- overview: mood, categories, themes */
.sentbar { display: flex; gap: 2px; height: 12px; border-radius: var(--pill); overflow: hidden; background: var(--track); }
.sentbar i { display: block; height: 100%; }
.sentbar i.neu, .ov-mix-legend i.neu, .kpi-mix i.neu { background: color-mix(in srgb, var(--neu) 70%, var(--surface)); }
.ov-mix-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.ov-mix-legend a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 9px; color: var(--text-2); font-size: 14px; }
.ov-mix-legend a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.ov-mix-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ov-mix-legend b { margin-left: auto; color: var(--text); font-weight: 650; }
.ov-mix-legend .small { width: 34px; text-align: right; }
.ov-sub { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-family: var(--font); margin: 20px 0 6px; }
.ov-cats { list-style: none; margin: 0; padding: 0; }
.cat-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 28px; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 9px; color: var(--text-2); font-size: 14px; }
.cat-row:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.cat-row .bar { height: 6px; }
.cat-row .bar i { background: var(--iris-200); }
.cat-row:hover .bar i { background: var(--iris); }
.cat-row b { text-align: right; color: var(--text); font-weight: 600; }

.theme-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 44px 48px; gap: 12px; padding: 0 8px 8px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); }
.theme-head span:nth-child(n+3) { text-align: right; }
.theme-list { list-style: none; margin: 4px 0 0; padding: 0; }
.theme-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 44px 48px; gap: 12px; align-items: center; padding: 9px 8px; border-radius: 10px; color: var(--text); font-size: 14px; }
.theme-row:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.theme-name { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 550; }
.theme-name > span:not(.sr-only) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tdot.neu { background: var(--neu); }
.theme-count { text-align: right; font-weight: 650; }
.trend { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trend.up, .trend.down { color: var(--text-2); }
.trend.good { color: var(--pos); } .trend.bad { color: var(--neg); }
.theme-row .bar { height: 6px; }
@media (max-width: 600px) {
  .theme-head, .theme-row { grid-template-columns: minmax(0, 1fr) 64px 32px 36px; gap: 8px; }
}

/* small feedback rows (urgent list) */
.fb-mini-list { list-style: none; margin: 0; padding: 0; }
.fb-mini { position: relative; display: grid; gap: 4px; padding: 10px 0 10px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.fb-mini:first-child { border-top: 0; }
.fb-mini::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--neu); }
.fb-mini.s-negative::before { background: var(--neg); } .fb-mini.s-positive::before { background: var(--pos); }
.fb-mini-top { display: flex; align-items: center; gap: 8px; }
.fb-mini-text { color: var(--text); line-height: 1.5; }

/* ---------------------------------------------------------------- overview: first run */
.ov-start { margin: 8px 0 16px; }
.ov-start-head { text-align: center; max-width: 560px; margin: 8px auto 24px; }
.ov-start-head h2 { font-size: 24px; letter-spacing: -.026em; }
.ov-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ov-way { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 22px; }
.ov-way h3 { margin: 6px 0 0; font-size: 16px; }
.ov-way p { margin: 0 0 6px; flex: 1; }
.ov-way label { font-size: 13px; }
.ov-way input { margin-top: -2px; }
.ov-way .btn { align-self: flex-start; margin-top: 4px; }
.ov-way:first-child { border-color: var(--iris-200); box-shadow: 0 0 0 3px var(--iris-50), var(--shadow-sm); }
.ov-way-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--iris-50); color: var(--iris-600); border: 1px solid var(--iris-100); }
.ov-way-icon .ico { width: 21px; height: 21px; }
.ov-ghost { position: relative; margin-top: 24px; padding: 22px; border: 1px dashed var(--line-2); border-radius: var(--radius); text-align: center; color: var(--muted); font-size: 14px; }
.ov-ghost-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ov-ghost-kpis span { height: 64px; border-radius: 12px; background: linear-gradient(180deg, var(--surface-3), transparent); }
.ov-ghost p { max-width: 520px; margin: 0 auto; }
@media (max-width: 880px) { .ov-ways { grid-template-columns: minmax(0, 1fr); } .ov-ghost-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* fallback setup checklist (when the insights module is off) */
.ov-setup .umeter { margin-bottom: 8px; }
.ov-steps { list-style: none; margin: 0; padding: 0; }
.ov-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.ov-steps li:first-child { border-top: 0; }
.ov-step-tick { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-2); font-size: 12px; font-weight: 650; color: var(--muted); }
.ov-steps .is-done .ov-step-tick { background: var(--pos); border-color: var(--pos); color: #fff; }
.ov-step-tick .ico { width: 14px; height: 14px; }
.ov-step-body { flex: 1; min-width: 0; display: grid; }
.ov-steps .is-done strong { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* ---------------------------------------------------------------- feedback: add box */
.add-box { padding: 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.add-box > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 0; }
.add-box > summary:hover { background: var(--surface-2); }
.add-box > summary:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.add-box-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--iris-50); color: var(--iris-600); border: 1px solid var(--iris-100); flex: none; }
.add-box-icon .ico { width: 17px; height: 17px; }
.add-box-label { display: grid; flex: 1; line-height: 1.35; }
.add-box[open] > summary { border-bottom: 1px solid var(--line); }
.add-box-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; margin: 0 !important; color: var(--text); }
.add-form { padding: 20px; margin: 0; }
.add-form > label { margin-bottom: -6px; }
.add-csv { border-left: 1px solid var(--line); background: var(--surface-2); }
.add-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.add-row label { margin-bottom: 7px; }
.add-form p { margin: 0; }
@media (max-width: 760px) {
  .add-box-body { grid-template-columns: minmax(0, 1fr); }
  .add-csv { border-left: 0; border-top: 1px solid var(--line); }
  .add-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- feedback: quick views, filters */
.fb-views { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 12px; padding: 2px; }
.fb-views::-webkit-scrollbar { display: none; }
.fb-views a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 13.5px; font-weight: 550; white-space: nowrap; box-shadow: var(--shadow-xs); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.fb-views a:hover { text-decoration: none; border-color: var(--iris-200); color: var(--text); }
.fb-views a .ico { width: 15px; height: 15px; color: var(--faint); }
.fb-views a[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--paper); }
.fb-views a[aria-current="page"] .ico { color: inherit; }
.fb-views-n { font-size: 12px; font-weight: 600; padding: 0 7px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); line-height: 1.6; }
.fb-views a[aria-current="page"] .fb-views-n { background: color-mix(in srgb, var(--paper) 22%, transparent); color: var(--paper); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.filters select { width: auto; min-width: 0; max-width: 100%; }
.filters input { max-width: 260px; }
.fb-search { flex: 1 1 240px; }
.fb-search input { max-width: none; padding-right: 36px; }
.fb-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.fb-search input:focus ~ .fb-kbd, .fb-search input:not(:placeholder-shown) ~ .fb-kbd { display: none; }
.fb-urgent { font-size: 14px; padding: 0 6px; white-space: nowrap; }
.filters .fb-filter-btn { min-height: 46px; padding-left: 14px; padding-right: 16px; }
.fb-active { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: -2px 0 10px; }
.fb-active .chip { margin: 0; }
.chip-x .ico { width: 13px; height: 13px; opacity: .7; }
.chip-x:hover .ico { opacity: 1; }
.fb-clear { margin-left: 6px; }
.fb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 2px 10px; }
.fb-bar b { color: var(--text); font-weight: 600; }
.fb-keys kbd { font-size: 10.5px; }
@media (max-width: 600px) {
  .filters select { flex: 1 1 calc(50% - 4px); }
  .js .fb-filter-btn { display: none; }
  .fb-keys { display: none; }
}
@media (hover: none) { .fb-keys, .fb-kbd { display: none; } }

/* ---------------------------------------------------------------- feedback: items */
.fb-list { display: grid; gap: 10px; }
.fb-list > * + * { margin-top: 0; }
.fb { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px 20px; box-shadow: var(--shadow-xs); min-width: 0; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.fb::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--line-2); }
.fb-pos::before { background: var(--pos); } .fb-neg::before { background: var(--neg); } .fb-neu::before { background: var(--neu); } .fb-none::before { background: var(--iris-200); }
.fb:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.fb:focus-visible, .fb:target { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 14px; }
.fb-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.fb-sent { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; flex: none; }
.fb-sent .ico { width: 15px; height: 15px; }
.fb-sent-pos { color: var(--pos); background: var(--pos-bg); }
.fb-sent-neg { color: var(--neg); background: var(--neg-bg); }
.fb-sent-neu { color: var(--muted); background: var(--surface-3); }
.fb-sent-none { color: var(--iris-600); background: var(--iris-50); }
.fb-src { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-weight: 550; }
.fb-src .ico { width: 14px; height: 14px; color: var(--faint); }
.fb-who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-who::before, .fb-when::before { content: "·"; margin-right: 10px; color: var(--faint); }
.fb-stars { margin-left: auto; }
.fb-title { font-family: var(--font); font-size: 15px; font-weight: 650; letter-spacing: -.008em; margin: 10px 0 2px; line-height: 1.4; }
.fb-text { margin: 6px 0 0; overflow-wrap: anywhere; color: var(--text); font-size: 15px; line-height: 1.6; max-width: 76ch; }
.fb-title + .fb-text { margin-top: 2px; color: var(--text-2); }
.fb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; }
.fb-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fb-tags .chip { margin: 0; font-size: 12px; padding: 2px 9px 2px 7px; gap: 3px; }
.fb-tags .chip .ico { width: 12px; height: 12px; opacity: .65; }
.fb-tags .chip[aria-current="true"] { border-color: var(--iris-200); }
.fb-tags .badge .ico { width: 11px; height: 11px; }
.fb-meta { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-left: auto; }
.fb-meta .push { margin-left: 0; }
.fb-del { margin: 0; }
.fb-del .icon-btn { width: 32px; height: 32px; color: var(--faint); }
.fb-del .icon-btn:hover { color: var(--neg); background: var(--neg-bg); }
.fb-del .icon-btn .ico { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .fb { padding: 12px 12px 8px 16px; }
  .fb-meta { flex-basis: 100%; margin-left: 0; padding-top: 8px; border-top: 1px dashed var(--line); }
  .fb-meta .push { margin-left: auto; }
  .fb-stars { margin-left: 0; flex-basis: 100%; }
  .fb-who { max-width: 140px; }
}

/* new since your last visit (app.js) */
.fb-new { display: inline-flex; align-items: center; padding: 0 7px; border-radius: var(--pill); background: var(--iris-50); color: var(--iris-600); border: 1px solid var(--iris-100); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.6; }
.fb.is-new { border-color: var(--iris-200); }
.fb-newcount { color: var(--iris-600); font-weight: 600; }

/* the actions module's status pill, made compact inside feedback items */
.in-app .fb-meta select.act-pill { min-height: 30px; padding: 3px 28px 3px 11px; background-position: right 9px center; background-size: 13px; font-size: 12.5px; }
.in-app .fb-meta .act-link { font-size: 13px; }

/* ---------------------------------------------------------------- reports list */
.rp-new { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: 22px 24px; background: linear-gradient(135deg, var(--surface) 55%, color-mix(in srgb, var(--iris) 7%, var(--surface))); }
.rp-new-text { display: flex; gap: 16px; align-items: flex-start; flex: 1 1 380px; min-width: 0; }
.rp-new-text h3 { margin: 2px 0 4px; font-size: 17px; }
.rp-new-text p { margin: 0 0 12px; max-width: 520px; }
.rp-new-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: var(--grad-btn); box-shadow: 0 8px 20px -8px rgba(100,64,245,.6); }
.rp-new-icon .ico { width: 22px; height: 22px; }
.rp-quota { display: grid; gap: 6px; max-width: 280px; color: var(--text-2); }
.rp-quota b { color: var(--text); }
.rp-new-form { flex: 0 1 360px; display: grid; gap: 6px; margin: 0; }
.rp-new-form label { font-size: 13px; }
.rp-new-form .input-group select { width: auto; flex: 1; min-width: 0; }
.rp-new-form p { margin: 0; }
.rp-digest { display: flex; align-items: center; gap: 8px; margin: -4px 4px 28px; }
.rp-digest .ico { width: 16px; height: 16px; color: var(--faint); }
.rp-list-h { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-family: var(--font); margin: 0 0 10px; }
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rp-item { display: flex; align-items: center; gap: 18px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-xs); color: var(--text); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.rp-item:hover { text-decoration: none; border-color: var(--iris-200); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--text); }
.rp-date { flex: none; display: grid; place-items: center; align-content: center; width: 54px; height: 58px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); line-height: 1.1; }
.rp-date b { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--iris-600); }
.rp-date span { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.is-latest .rp-date { background: var(--iris-50); border-color: var(--iris-100); }
.rp-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rp-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-headline { font-family: var(--display); font-size: 16.5px; font-weight: 700; letter-spacing: -.016em; line-height: 1.35; }
.rp-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rp-themes .chip { margin: 0; font-size: 12px; }
.rp-mood { flex: none; display: grid; gap: 6px; width: 132px; font-size: 12.5px; color: var(--muted); }
.rp-mood b { color: var(--text); font-weight: 650; }
.rp-mood .sentbar { height: 6px; }
.rp-digest > span { min-width: 0; }
.rp-go { flex: none; color: var(--faint); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.rp-item:hover .rp-go { color: var(--iris-600); transform: translateX(2px); }
@media (max-width: 600px) {
  .rp-new { padding: 18px; }
  .rp-new-text { flex-basis: 100%; }
  .rp-new-icon { width: 38px; height: 38px; }
  .rp-new-form { flex-basis: 100%; }
  .rp-new-form .input-group { flex-direction: column; }
  .rp-new-form .input-group select { width: 100%; }
  .rp-item { gap: 12px; padding: 14px; align-items: flex-start; }
  .rp-date { width: 46px; height: 50px; }
  .rp-date span { font-size: 19px; }
  .rp-go { display: none; }
  .rp-mood { display: none; }
}

/* ---------------------------------------------------------------- one report: an editorial page you can print */
.rpt { max-width: 860px; }
.rpt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rpt-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 550; }
.rpt-back .ico { width: 16px; height: 16px; }
.rpt-doc { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 48px 56px 36px; overflow: hidden; position: relative; }
.rpt-doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.rpt-head { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.rpt-kicker { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0 0 18px; font-size: 12.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rpt-kicker span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--iris-600); }
.rpt-kicker .ico { width: 15px; height: 15px; }
.rpt-title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.032em; line-height: 1.12; margin: 0 0 14px; max-width: 26ch; text-wrap: balance; }
.rpt-for { margin: 0; color: var(--muted); font-size: 14px; }
.rpt-for strong { color: var(--text); font-weight: 600; }
.rpt-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin: 24px 0 0; }
.rpt-stats div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.rpt-stats dt { font-size: 12px; color: var(--muted); font-weight: 550; }
.rpt-stats dd { margin: 2px 0 0; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.rpt-sec { padding: 30px 0; border-bottom: 1px solid var(--line); }
.rpt-sec:last-of-type { border-bottom: 0; }
.rpt-h { display: flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 16px; }
.rpt-h .ico { width: 16px; height: 16px; }
.rpt-lead { font-size: 18.5px; line-height: 1.65; color: var(--text); margin: 0; font-weight: 450; letter-spacing: -.005em; }
.rpt-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.rpt-actions li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.rpt-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--grad-btn); color: #fff; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.rpt-act-text { font-weight: 600; font-size: 15.5px; line-height: 1.45; }
.rpt-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lvl-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.lvl-k { font-weight: 500; color: var(--muted); }
.lvl-high { background: var(--neg-bg); color: var(--neg); }
.lvl-medium { background: var(--warn-bg); color: var(--warn); }
.lvl-low { background: var(--surface-3); color: var(--text-2); }
.lvl-pill.lvl-effort { background: transparent; border: 1px solid var(--line-2); }
@media (max-width: 600px) {
  .rpt-actions li { grid-template-columns: 28px minmax(0, 1fr); }
  .rpt-num { width: 28px; height: 28px; font-size: 13px; }
  .rpt-pills { grid-column: 2; justify-content: flex-start; }
}

.rpt-bars { list-style: none; margin: 0 0 12px; padding: 0; }
.rpt-bars a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 34px; gap: 14px; align-items: center; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; color: var(--text); font-size: 14.5px; }
.rpt-bars a:hover { background: var(--surface-2); text-decoration: none; }
.rpt-bar-name { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 550; }
.rpt-bar-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-bar-n { text-align: right; font-weight: 650; }
.rpt-bars .bar { height: 8px; }
.rpt-bars .bar i.mix { background: var(--amber); }
.rpt-bars .bar i.neu { background: var(--neu); }
.tdot.mix { background: var(--amber); }
.rpt-theme { padding: 26px 0 4px; border-top: 1px dashed var(--line); margin-top: 20px; break-inside: avoid; }
.rpt-theme-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.rpt-theme-head h4 { display: flex; align-items: baseline; gap: 12px; font-size: 21px; letter-spacing: -.024em; margin: 0; }
.rpt-theme-n { font-size: 13px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rpt-theme-meta { display: flex; align-items: center; gap: 10px; }
.sent-pill { font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); }
.sent-neg { background: var(--neg-bg); color: var(--neg); } .sent-pos { background: var(--pos-bg); color: var(--pos); } .sent-mix { background: var(--warn-bg); color: var(--warn); }
.rpt-insight { font-size: 16px; color: var(--text-2); margin: 0 0 14px; line-height: 1.65; }
.rpt-quote { position: relative; margin: 10px 0; padding: 12px 18px 12px 44px; background: var(--surface-2); border: 1px solid var(--line); border-left: 0; border-radius: 12px; font-size: 15.5px; line-height: 1.55; color: var(--text); font-style: italic; }
.rpt-quote::before { content: "“"; position: absolute; left: 14px; top: 2px; font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: 1; color: var(--iris); font-style: normal; }
.rpt-quote q { quotes: none; }
.rpt-rec { margin: 14px 0 6px; padding: 14px 16px; border-radius: 12px; background: var(--iris-50); border: 1px solid var(--iris-100); }
.rpt-rec-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--iris-600); }
.rpt-rec-k .ico { width: 15px; height: 15px; }
.rpt-rec p { margin: 4px 0 0; font-weight: 550; color: var(--text); }
.rpt-see { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 550; }
.rpt-see .ico { width: 14px; height: 14px; }
.rpt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rpt-col { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); }
.rpt-col ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.rpt-col li::marker { color: var(--faint); }
.rpt-wins { background: color-mix(in srgb, var(--pos-bg) 60%, var(--surface)); border-color: var(--pos-line); }
.rpt-wins .rpt-h { color: var(--pos); }
.rpt-risks { background: color-mix(in srgb, var(--neg-bg) 60%, var(--surface)); border-color: var(--neg-line); }
.rpt-risks .rpt-h { color: var(--neg); }
.rpt-foot { display: flex; align-items: center; gap: 10px; padding-top: 22px; margin-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.rpt-foot img { flex: none; }
@media (max-width: 700px) {
  .rpt-doc { padding: 28px 20px 24px; border-radius: 18px; }
  .rpt-stats { gap: 6px; }
  .rpt-stats div { padding: 9px 10px; border-radius: 10px; }
  .rpt-stats dt { font-size: 11.5px; line-height: 1.3; }
  .rpt-stats dd { font-size: 20px; }
  .rpt-lead { font-size: 17px; }
  .rpt-two { grid-template-columns: minmax(0, 1fr); }
  .rpt-bars a { grid-template-columns: minmax(0, 1fr) 80px 28px; gap: 10px; }
  .rpt-theme-head h4 { font-size: 18px; }
}

/* ---------------------------------------------------------------- feedback: compact filters, results bar */
.fb-selects { display: contents; }
.fb-bar-end { display: inline-flex; align-items: center; gap: 12px; }
.fb-export { min-height: 30px; padding: 4px 10px; font-size: 13px; color: var(--text-2); }
.fb-export .ico { width: 15px; height: 15px; }
@media (max-width: 600px) {
  .fb-search { flex-basis: 100%; }
  .fb-selects { display: flex; gap: 8px; width: calc(100% + 4px); overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; -webkit-overflow-scrolling: touch; }
  .fb-selects::-webkit-scrollbar { display: none; }
  .filters .fb-selects select { flex: none; width: auto; min-height: 38px; padding: 6px 32px 6px 12px; font-size: 14px; background-position: right 10px center; }
  .fb-selects .fb-urgent { flex: none; padding: 0 4px; }
  .fb-bar { margin-bottom: 8px; flex-wrap: nowrap; }
  .fb-bar > .small { min-width: 0; }
  .fb-export-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------------------------------------------------------------- report: mood bar */
.rpt-mood { margin-top: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.rpt-mood-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.rpt-mood-k { font-size: 12px; color: var(--muted); font-weight: 550; }
.rpt-mood-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; color: var(--text-2); }
.rpt-mood-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rpt-mood-legend i { width: 10px; height: 10px; border-radius: 3px; }
.rpt-mood-legend i.neu { background: color-mix(in srgb, var(--neu) 70%, var(--surface)); }
.rpt-mood-legend b { color: var(--text); font-weight: 650; }

/* ---------------------------------------------------------------- projects (/app) */
.pj-title { font-size: 26px; }
.pj-quota { display: grid; gap: 6px; width: 240px; max-width: 100%; color: var(--text-2); }
.pj-quota b { color: var(--text); }
.pj-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pj-grid > li { display: flex; min-width: 0; }
.pj-card { position: relative; flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
article.pj-card:hover { border-color: var(--iris-200); box-shadow: var(--shadow); transform: translateY(-2px); }
.pj-top { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pj-av { box-shadow: 0 0 0 1px var(--line), 0 6px 14px -6px rgba(48,30,130,.35); }
.pj-name { flex: 1 1 140px; min-width: 0; }
.pj-name h2 { font-size: 16.5px; letter-spacing: -.016em; margin: 1px 0 0; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pj-link { color: var(--text); }
.pj-link:hover { color: var(--text); text-decoration: none; }
.pj-link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--radius); }
.pj-link:focus-visible { outline: none; }
.pj-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.pj-src { display: block; margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pj-src .ico { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.pj-name .pj-status { margin-top: 8px; }
.pj-status { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.5; padding: 3px 10px; border-radius: var(--pill); background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.pj-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pj-st-bad { background: var(--neg-bg); color: var(--neg); }
.pj-st-good { background: var(--pos-bg); color: var(--pos); }
.pj-st-info, .pj-st-new { background: var(--iris-50); color: var(--iris-600); }
.pj-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pj-nums dt { font-size: 12px; color: var(--muted); font-weight: 500; }
.pj-nums dd { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pj-nums dd .num { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.pj-nums .delta { font-size: 11px; padding: 1px 6px; }
.pj-viz { display: grid; gap: 8px; }
.pj-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.pj-spark i { flex: 1; border-radius: 2px 2px 0 0; background: var(--iris-200); }
.pj-spark i:nth-last-child(-n+7) { background: var(--iris); }
.pj-spark i.z { background: var(--track); }
.pj-mix { display: flex; gap: 2px; height: 6px; border-radius: var(--pill); overflow: hidden; }
.pj-mix i { display: block; min-width: 2px; }
.pj-mix i.neu { background: color-mix(in srgb, var(--neu) 70%, var(--surface)); }
.pj-empty { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pj-slot { position: relative; z-index: 1; font-size: 13.5px; }
.pj-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.pj-sub { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-weight: 550; min-width: 0; }
.pj-sub .ico { width: 15px; height: 15px; flex: none; }
.pj-go { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 550; white-space: nowrap; }
.pj-go .ico { width: 15px; height: 15px; transition: transform var(--t) var(--ease); }
article.pj-card:hover .pj-go { color: var(--iris-600); }
article.pj-card:hover .pj-go .ico { transform: translateX(2px); }
.pj-new { gap: 8px; border-style: dashed; border-color: var(--line-2); background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: none; }
.pj-new:focus-within { border-style: solid; border-color: var(--iris-200); background: var(--surface); }
.pj-new h2 { font-size: 16.5px; margin: 4px 0 0; }
.pj-new p { margin: 0 0 6px; }
.pj-new label { font-size: 13px; margin-top: 4px; }
.pj-new .btn { align-self: flex-start; margin-top: 8px; }
.pj-new-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--iris-50); color: var(--iris-600); border: 1px solid var(--iris-100); }
.pj-new-icon .ico { width: 20px; height: 20px; }
.pj-opt { font-weight: 400; }
@media (max-width: 600px) {
  .pj-title { font-size: 22px; }
  .pj-quota { width: 100%; }
  .pj-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pj-card { padding: 16px; }
}

/* ---------------------------------------------------------------- copy fields (collect, settings) */
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; }
.copy-field label { font-size: 13.5px; }
.copy-field .hint { margin: 0; }
.copy-field .copy-row { align-items: stretch; }
.copy-field input, .copy-field textarea { background: var(--surface-2); color: var(--text); }
.copy-field textarea { resize: none; min-height: 0; font-size: 12.5px; line-height: 1.6; padding: 10px 12px; }
.copy-field .btn { min-height: 42px; }
.copy-row .btn.is-copied { color: var(--pos); border-color: var(--pos-line); background: var(--pos-bg); }
.copy-field-multi textarea { field-sizing: content; width: 100%; min-width: 0; max-height: 260px; }
@media (max-width: 600px) {
  .copy-field-multi .copy-row { flex-direction: column; }
  .copy-field-multi textarea { min-height: 150px; }
  .copy-field-multi .btn { align-self: flex-start; min-height: 38px; }
}

/* ---------------------------------------------------------------- collect */
.cl-summary { display: grid; gap: 6px; width: 220px; max-width: 100%; color: var(--text-2); }
.cl-summary b { color: var(--text); }
.cl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cl-grid > .card { margin: 0; }
.cl-wide { grid-column: 1 / -1; }
.cl-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; min-width: 0; }
.cl-head { display: flex; gap: 12px; align-items: center; }
.cl-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--iris-50); color: var(--iris-600); border: 1px solid var(--iris-100); }
.cl-icon .ico { width: 20px; height: 20px; }
.cl-title { display: grid; gap: 1px; min-width: 0; }
.cl-title h3 { margin: 0; font-size: 16.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.cl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; }
.cl-status.is-on { color: var(--pos); font-weight: 550; }
.cl-status.is-on .cl-dot { background: var(--mint); box-shadow: 0 0 0 3px rgba(45,212,167,.2); }
.cl-text { margin: 0; color: var(--text-2); font-size: 14.5px; }
.cl-note { margin: 0; }
.cl-app { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.cl-app-name { flex: 1; min-width: 0; display: grid; }
.cl-app-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-app form { margin: 0; }
.cl-connect { display: grid; gap: 7px; max-width: 680px; margin: 0; }
.cl-connect label { font-size: 13.5px; }
.cl-more { margin: -4px 0 0; }
.cl-more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }
.cl-more .ico { width: 15px; height: 15px; }
.cl-preview { position: relative; height: 92px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); overflow: hidden; }
.cl-preview-page { position: absolute; left: 16px; top: 16px; right: 45%; display: grid; gap: 8px; }
.cl-preview-page i { display: block; height: 8px; border-radius: 4px; background: var(--track); }
.cl-preview-page i:nth-child(2) { width: 80%; }
.cl-preview-page i:nth-child(3) { width: 55%; }
.cl-preview-btn { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--pill); font-size: 13px; font-weight: 650; box-shadow: 0 8px 20px -6px rgba(0,0,0,.35); }
.cl-preview-btn .ico { width: 15px; height: 15px; }
.cl-preview + .cl-note { margin-top: -6px; }
.cl-locked { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 12px; border: 1px dashed var(--line-2); background: var(--surface-2); }
.cl-locked p { margin: 0; flex: 1; min-width: 180px; }
.cl-locked > .ico { color: var(--muted); width: 18px; height: 18px; }
.cl-list { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 2px; }
.cl-list li::marker { color: var(--faint); }
.cl-card > .btn { align-self: flex-start; }
.cl-key { display: flex; align-items: center; gap: 8px; margin: 18px 4px 0; }
.cl-key .ico { width: 16px; height: 16px; color: var(--faint); flex: none; }
@media (max-width: 760px) {
  .cl-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cl-summary { width: 100%; }
  .cl-card { padding: 18px; }
}
@media (max-width: 480px) {
  .cl-app { flex-wrap: wrap; }
  .cl-app form { flex-basis: 100%; }
  .cl-app form .btn { width: 100%; }
  .cl-connect .input-group { flex-direction: column; }
}

/* ---------------------------------------------------------------- settings and account */
.set-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.set-main { min-width: 0; max-width: 760px; width: 100%; display: grid; gap: 16px; }
.set-main > * { margin: 0 !important; }
.set-nav { display: none; }
@media (min-width: 961px) {
  .set-layout:has(.set-nav.is-ready) { grid-template-columns: 188px minmax(0, 760px); gap: 40px; }
  .set-nav.is-ready { display: block; position: sticky; top: 88px; }
}
.set-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; border-left: 1px solid var(--line); }
.set-nav a { display: block; margin-left: -1px; padding: 6px 12px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.4; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.set-nav a:hover { color: var(--text); text-decoration: none; border-left-color: var(--line-2); }
.set-nav a[aria-current] { color: var(--text); font-weight: 600; border-left-color: var(--iris); }
.set-nav a.is-danger { color: var(--neg); }
.set-nav a.is-danger[aria-current] { border-left-color: var(--neg); }
.set-main .card { padding: 22px 24px; }
.set-main .card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; letter-spacing: -.018em; margin: 0 0 14px; }
.set-main .card.stack > h2 { margin-bottom: 0; }
.set-field { display: grid; gap: 7px; margin-bottom: 16px; min-width: 0; }
.set-field:last-of-type { margin-bottom: 0; }
.set-field > label:not(.check) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-field > label .ico { width: 16px; height: 16px; color: var(--muted); }
.set-field .hint { margin: 0; }
.set-sep { padding-top: 16px; border-top: 1px solid var(--line); }
.set-main .card-foot { margin: 20px -24px -22px; padding: 12px 24px; }
.card-foot .btn { margin-left: auto; }
.set-color { display: flex; align-items: center; gap: 10px; }
.set-color code { font-size: 13px; }
.set-app { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.set-app-name { flex: 1; min-width: 0; display: grid; }
.set-app-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-app-name .live { width: 7px; height: 7px; margin: 0 3px 0 1px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(45,212,167,.2); }
.set-app form { margin: 0; }
.set-inline { display: grid; gap: 7px; margin: 12px 0 0; }
.set-inline label { font-size: 14px; }
.set-inline .hint { margin: 0; }
.set-disconnect { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.set-disconnect .linkbtn { color: var(--neg); font-weight: 550; }
.set-danger { border-color: var(--neg-line); }
.set-main .set-danger h2 { color: var(--neg); }
.set-danger h2 .ico { width: 18px; height: 18px; }
.set-danger > p { color: var(--text-2); }
.set-main .set-danger .card-foot { background: color-mix(in srgb, var(--neg-bg) 55%, var(--surface)); border-top-color: var(--neg-line); }
.set-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
.set-two .set-field { margin-bottom: 0; }
.set-check { align-items: flex-start; }
.set-check input { margin-top: 2px; }
.set-check .badge { margin-left: 6px; }
.set-check-hint { margin-left: 28px !important; }
.btn-danger:disabled, .btn-danger[aria-disabled="true"] { opacity: .45; }
/* module cards inside settings and account (actions, insights, billing): the same rhythm as the core cards.
   Their save button sits in a footer strip like .card-foot (only where :has() works; elsewhere it stays inline). */
.set-main .act-settings, .set-main .ins-settings, .set-main .bil-acc { gap: 14px; }
.set-main .card > .stack > * + *, .set-main .card.stack > * + * { margin-top: 12px; }
.set-main .card.stack > input[type="hidden"] + h2 { margin-top: 0; }
.set-main .card > h2 + p { margin-top: -4px; }
.set-main .bil-acc > p:not(.bil-acc-more) { font-size: 14px; color: var(--text-2); }
.set-main .bil-acc .bil-copy input { background: var(--surface-2); }
.set-main .bil-acc .bil-copy .btn { min-height: 42px; }
@supports selector(:has(*)) {
  .set-main form.card.stack:has(> .btn:last-child) { position: relative; padding-bottom: 79px; }
  .set-main form.card.stack:has(> .btn:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 59px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); }
  .set-main form.card.stack > .btn:last-child { position: absolute; z-index: 1; right: 24px; bottom: 12px; margin: 0; min-height: 34px; padding: 6px 12px; font-size: 13.5px; border-radius: 10px; }
}
@media (max-width: 600px) {
  .set-main form.card.stack > .btn:last-child { right: 18px; }
}

.acc-id { display: flex; align-items: center; gap: 14px; }
.acc-av { border-radius: 50%; }
.acc-id .page-sub { overflow-wrap: anywhere; }
.acc-plan { display: grid; justify-items: end; gap: 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs); color: var(--text-2); transition: border-color var(--t) var(--ease); }
.acc-plan:hover { border-color: var(--iris-200); text-decoration: none; }
.acc-plan .small { display: inline-flex; align-items: center; gap: 4px; color: var(--iris-600); font-weight: 550; }
.acc-plan .ico { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .set-main .card { padding: 18px; }
  .set-main .card-foot { margin: 18px -18px -18px; padding: 12px 18px; }
  .set-two { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .set-app { flex-wrap: wrap; }
  .set-app form { flex-basis: 100%; }
  .set-app form .btn { width: 100%; }
  .acc-plan { justify-items: start; width: 100%; }
  .acc-av { --av-s: 44px !important; width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------- print: reports and every app page save cleanly as PDF */
@media print {
  @page { margin: 16mm 14mm; }
  /* Paper is always light, even when the screen is in dark mode. :not(#_) lifts these above the dark theme rules. */
  :root:not(#_), :root:not(#_) .in-app {
    color-scheme: light;
    --paper: #fff; --paper-2: #f7f6fb; --surface: #fff; --surface-2: #f7f6fb; --surface-3: #efedf6;
    --text: #111; --text-2: #333; --muted: #555; --faint: #777; --line: #ddd; --line-2: #ccc;
    --iris-600: #6440f5; --iris-700: #4f2fd8; --iris-50: #f3f0ff; --iris-100: #e7e1ff; --iris-200: #cfc3ff;
    --pos: #0a7f5a; --neu: #8e8ba8; --neg: #d12c4c; --warn: #995a00; --neg-text: #c2264a;
    --pos-bg: #e6f7f0; --neg-bg: #fdecef; --warn-bg: #fff5e2; --pos-line: #b9ead6; --neg-line: #f8c6d0; --warn-line: #fbdca5;
    --track: #efedf7; --field: #fff; --field-line: #d6d2e8;
  }
  html, body { background: #fff !important; color: #111; }
  .topbar, .proj-head, .footer, .flashes, .skip, .page-actions, .rpt-bar, .rpt-see, [data-print], .busy-overlay, .vchart-table, .fb-meta, .filters, .fb-views, .add-box, .pager { display: none !important; }
  .section, .app-page { padding: 0 !important; }
  .rpt { max-width: none; }
  .rpt-doc { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  .rpt-doc::before { display: none; }
  .card, .kpi, .fb, .rpt-actions li, .rpt-quote, .rpt-rec, .rpt-col, .rpt-stats div { box-shadow: none !important; break-inside: avoid; }
  .rpt-sec, .rpt-theme { break-inside: auto; }
  .rpt-h, .rpt-theme-head { break-after: avoid; }
  .rpt-num, .rp-new-icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bar i, .sentbar i, .rpt-mood-legend i, .lvl-pill, .sent-pill, .tdot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
  .rpt-title { max-width: none; font-size: 28pt; }
  .rpt-lead { font-size: 13pt; }
}

/* ---------------------------------------------------------------- module screens inside the app (look only)
   Actions, insights and billing own their markup. These scoped rules line their pages up with the core ones:
   the same top spacing under the tabs, the same intro text size, and tighter counters on phones. */
.in-app .proj-head + .section { padding-top: 28px; }
.in-app .act-draft > h2 + p { margin: 4px 0 16px; font-size: 14.5px; }
.in-app .act-review .act-meta:first-child { margin-top: 0; }
.in-app .act-page .page-actions .act-tag { margin: 0; }
.in-app .bil-after-plans { margin: 28px 0 20px; }
.in-app .bil-ref-page .bil-ref-hero { margin-bottom: 24px; }
.in-app .act-kpis .kpi strong { font-size: 28px; }
.in-app .grid-main > .card, .in-app .grid-main > div > .card { margin-bottom: 0; }
.in-app .grid-main > div > .card + .card { margin-top: 16px; }
.in-app .card > input[type=hidden] + h2 { margin-top: 0; }
.in-app .act-page .card .meter { width: 100%; }
.in-app .ov-pastdue > .ico { color: var(--neg); }
@media (max-width: 600px) {
  .in-app .proj-head + .section { padding-top: 20px; }
  .in-app .act-kpis { gap: 8px; }
  .in-app .act-kpis .kpi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px; }
  .in-app .act-kpis .kpi > span:first-child { font-size: 13px; white-space: nowrap; }
  .in-app .act-kpis .kpi strong { font-size: 22px; margin: 0; }
}

/* ---- src/modules/actions/style.css ---- */
/* actions module: reply drafts, statuses, close the loop, public roadmap. Colors come from design tokens only. */
.act-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* status colors */
.act-s-open { --act-c: var(--neu); }
.act-s-planned { --act-c: var(--iris); }
.act-s-in_progress { --act-c: var(--amber); }
.act-s-done { --act-c: var(--pos); }
.act-s-wont_fix { --act-c: var(--neg); }
.act-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--act-c, var(--neu)); flex: none; vertical-align: middle; }
.act-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; color: var(--text);
  background: color-mix(in srgb, var(--act-c) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--act-c) 40%, var(--surface)); white-space: nowrap; }

/* feedback item row: status pill + links */
.act-item { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.act-status-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
select.act-pill { width: auto; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 4px 8px 4px 10px; border-radius: 999px; color: var(--text); cursor: pointer;
  background-color: color-mix(in srgb, var(--act-c) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--act-c) 45%, var(--surface)); }
select.act-pill:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.act-link { font-size: 13px; font-weight: 600; white-space: nowrap; }
.act-told { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* shared bits */
.act-title { font-size: 26px; margin-bottom: 4px; }
.act-intro { align-items: flex-start; margin-bottom: 18px; }
.act-intro p { margin: 0; }
.act-back { margin: 0 0 14px; font-size: 14px; }
.act-h3 { margin-top: 18px; font-size: 14px; }
.act-hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.act-narrow { max-width: 620px; }
.act-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.act-fieldset legend { padding: 0; margin-bottom: 8px; font-weight: 500; font-size: 14px; }
.act-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.act-seg label { position: relative; font-weight: 500; }
.act-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.act-seg label > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; cursor: pointer; background: var(--surface); color: var(--text); transition: border-color .15s, background .15s; }
.act-seg label > span:hover { border-color: var(--iris); }
.act-seg input:checked + span { border-color: var(--iris); background: var(--iris-50); color: var(--iris-600); font-weight: 600; box-shadow: 0 0 0 1px var(--iris) inset; }
.act-seg input:focus-visible + span { outline: 2px solid var(--iris); outline-offset: 2px; }

/* reply page */
.act-review .act-meta { margin: 6px 0 12px; }
.act-quote { border-left: 3px solid var(--iris); background: var(--iris-50); border-radius: 0 12px 12px 0; padding: 12px 16px; margin-bottom: 10px; overflow-wrap: anywhere; }
.act-quote p { margin: 4px 0 0; }
.act-quote strong { display: block; }
.act-draft h2 { margin: 0; }
.act-draft h2 label { font: inherit; }
.act-next { margin: 12px 0 0; }
.act-copybox { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; }
.act-copybox textarea { grid-column: 1 / -1; font-size: 15px; line-height: 1.6; min-height: 220px; max-height: 70vh; resize: vertical; field-sizing: content; }
.act-count { margin: 0; text-align: right; }
.act-warn { color: var(--neg); }
.act-hint { margin: 10px 0 0; }
.act-gen-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.act-gen-row label { min-width: 150px; }
.act-gen-row .act-grow { flex: 1 1 260px; }
.act-upsell { background: var(--iris-50); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.act-upsell p { margin: 6px 0 12px; }
.act-post .btn-block { margin: 4px 0 10px; }
.act-done-line { color: var(--pos); font-weight: 600; margin-bottom: 4px; }
.act-history { list-style: none; padding: 0; margin: 0; }
.act-history li + li { border-top: 1px solid var(--line); }
.act-history a { display: block; padding: 9px 8px; border-radius: 10px; color: var(--text); }
.act-history a:hover, .act-history a[aria-current] { background: var(--iris-50); text-decoration: none; }
.act-history-top { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.act-history-text { display: block; font-size: 13px; }

/* board */
.act-kpis .kpi span { display: flex; align-items: center; gap: 7px; }
.act-themes { list-style: none; margin: 4px 0 0; padding: 0; }
.act-theme { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--line); }
.act-theme-main { flex: 1; min-width: 0; }
.act-theme-name { display: block; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.act-theme-form { display: flex; align-items: center; gap: 6px; flex: none; margin: 0; }
.act-ov-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.act-ov-text { min-width: 0; overflow-wrap: anywhere; }
.act-ov-item .btn { flex: none; }
.act-sends { list-style: none; padding: 0; margin: 0; }
.act-sends li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.act-loopcta { border-color: color-mix(in srgb, var(--pos) 45%, var(--line)); background: color-mix(in srgb, var(--pos) 7%, var(--surface)); }

/* theme page */
.act-titems { list-style: none; margin: 0; padding: 0; }
.act-titem { padding: 12px 0; border-top: 1px solid var(--line); }
.act-titem-text { margin: 0 0 6px; overflow-wrap: anywhere; }

/* overview card */
.act-ov-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; margin-top: 6px; }
.act-ov-grid h3 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.act-ov-counts { list-style: none; padding: 0; margin: 6px 0 12px; }
.act-ov-counts li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.act-ov-counts b { margin-left: auto; }
.act-ov-wait { background: color-mix(in srgb, var(--pos) 9%, var(--surface)); border-radius: 10px; padding: 10px 12px; }

/* close the loop */
.act-preview { border-color: var(--iris); }
/* The preview shows the email the way mail apps do: on white paper, in light and dark mode alike. */
.act-email { background: #fff; color: #1f2937; color-scheme: light; border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin: 10px 0 16px; overflow-wrap: anywhere; max-height: 560px; overflow: auto; }
.act-sendrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.act-people { list-style: none; padding: 0; margin: 8px 0; }
.act-people li { padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; font-size: 14px; }
.act-people .small { display: block; }

/* settings */
.act-copyrow { margin-top: 6px; }
.act-copyrow input { flex: 1; min-width: 0; }

/* public pages: roadmap and unsubscribe */
.act-public { background: var(--paper); min-height: 100vh; }
.act-flash { max-width: 680px; margin: 16px auto 0; }
.act-rm { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
.act-rm-head { text-align: center; padding: 28px 0 30px; }
.act-rm-kicker { display: inline-block; font-size: 13px; font-weight: 600; color: var(--iris-600); background: var(--iris-50); padding: 4px 12px; border-radius: 999px; margin: 0 0 12px; }
.act-rm-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 8px; overflow-wrap: anywhere; }
.act-rm-intro { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto 18px; }
.act-rm-cols { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.act-rm-col { background: color-mix(in srgb, var(--act-c) 6%, var(--paper)); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.act-rm-col h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 2px 2px 4px; }
.act-rm-n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.act-rm-empty { color: var(--muted); font-size: 14px; margin: 10px 2px 4px; }
.act-rm-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 10px; box-shadow: var(--shadow); scroll-margin-top: 16px; }
.act-rm-card:target { border-color: var(--iris); }
.act-rm-vote { margin: 0; flex: none; }
.act-rm-votebtn, .act-rm-shipped { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 50px; min-height: 54px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; flex: none; }
.act-rm-votebtn { cursor: pointer; transition: border-color .15s, background .15s, transform .08s; }
.act-rm-votebtn:hover { border-color: var(--iris); }
.act-rm-votebtn:active { transform: translateY(1px); }
.act-rm-votebtn:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; }
.act-rm-votebtn[aria-pressed="true"] { border-color: var(--iris); background: var(--iris-50); color: var(--iris-600); }
.act-rm-shipped { font-size: 18px; color: var(--pos); background: color-mix(in srgb, var(--pos) 10%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 35%, var(--line)); }
.act-rm-body { min-width: 0; }
.act-rm-body h3 { font-size: 16px; margin: 3px 0 4px; overflow-wrap: anywhere; }
.act-rm-body p { margin: 0 0 4px; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.act-rm-body .act-rm-meta { color: var(--muted); font-size: 13px; }
.act-rm-foot { text-align: center; margin-top: 36px; }
.act-rm-powered { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
.act-rm-powered:hover { text-decoration: none; border-color: var(--iris); color: var(--text); }
.act-rm-powered strong { color: var(--text); }
.act-unsub { max-width: 460px; margin: 0 auto; padding: 72px 16px; }
.act-unsub h1 { font-size: 26px; }
.act-unsub-foot { text-align: center; }

@media (min-width: 820px) {
  .act-rm-cols { grid-template-columns: repeat(3, 1fr); }
  .act-rm-head h1 { font-size: 44px; }
}
@media (max-width: 880px) {
  .act-ov-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .act-theme { flex-wrap: wrap; }
  .act-theme-form { width: 100%; }
  .act-theme-form select { flex: 1; }
  .act-title { font-size: 22px; }
  .act-copybox { grid-template-columns: auto auto; }
  .act-count { grid-column: 1 / -1; text-align: left; }
  .act-intro .btn { width: 100%; }
}
.act-unsub-foot a { text-decoration: underline; }
@media (max-width: 880px) {
  .act-side-first > :last-child { order: -1; }
}

/* ---- src/modules/billing/style.css ---- */
/* billing module: pricing cards + monthly/yearly switch, comparison table, billing page, referrals, nudges.
   Colors come from the design tokens only, so dark mode works when the tokens change. */
.bil-u a, a.bil-u { text-decoration: underline; text-underline-offset: 2px; }
.bil-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* pricing section */
.bil-head { max-width: 720px; margin: 0 auto; }
.bil-lead { color: var(--muted); margin: 0 auto; }
.bil-pricing { position: relative; margin-top: 28px; }
.bil-radio { position: absolute; top: 0; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.bil-toggle { display: flex; width: max-content; max-width: 100%; margin: 0 auto 30px; padding: 5px; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.bil-toggle label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
.bil-toggle label:hover { color: var(--text); }
.bil-r-m:checked ~ * .bil-l-m, .bil-r-y:checked ~ * .bil-l-y { background: var(--text); color: var(--surface); }
.bil-r-m:focus-visible ~ * .bil-l-m, .bil-r-y:focus-visible ~ * .bil-l-y { outline: 3px solid var(--iris); outline-offset: 2px; }
.bil-save { font-size: 11px; font-weight: 700; letter-spacing: .01em; padding: 2px 8px; border-radius: 999px; background: var(--mint); color: var(--ink); }
.bil-pricing .bil-y { display: none; }
.bil-pricing .bil-r-y:checked ~ * .bil-y { display: block; }
.bil-pricing .bil-r-y:checked ~ * .bil-m { display: none; }
.bil-pricing .bil-r-y:checked ~ * .bil-cta.bil-y { display: flex; }

.bil-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.bil-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bil-card { position: relative; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 20px; padding: 26px 22px 22px; box-shadow: var(--shadow); }
.bil-hot { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: 0 24px 60px rgba(124, 92, 255, .2); }
.bil-current { border-color: var(--iris); }
.bil-ribbon { position: absolute; top: -12px; left: 20px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.bil-name { font-size: 19px; margin: 0 0 2px; }
.bil-tag { color: var(--muted); font-size: 14px; margin: 0 0 14px; min-height: 3.2em; }
.bil-price { font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.bil-price span { font-family: Inter, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.bil-card .bil-note { font-size: 13px; color: var(--muted); margin: 6px 0 16px; min-height: 2.9em; }
.bil-note-save { color: var(--iris-600); font-weight: 600; }
.bil-card .btn { margin-top: auto; }
.bil-card form { margin: auto 0 0; }
.bil-card .bil-cta + .bil-cta, .bil-card form + form { margin-top: 0; }
.bil-feats { list-style: none; padding: 0; margin: 18px 0 0; font-size: 14px; flex: 1; }
.bil-feats li { position: relative; padding: 7px 0 7px 28px; border-top: 1px dashed var(--line); }
.bil-feats li:first-child { border-top: 0; }
.bil-feats li::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 19px; height: 19px; border-radius: 50%; background: var(--iris-50); color: var(--iris-600); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.bil-feats strong { font-weight: 700; }
.bil-foot { margin-top: 24px; }
.bil-card-order { order: -1; }

/* /pricing page */
.bil-hero h1 { font-size: 52px; }
.bil-hero .lead-dark { margin-bottom: 18px; }
.bil-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; list-style: none; padding: 0; margin: 0; color: #d9d2ff; font-size: 14px; }
.bil-points li::before { content: "✓ "; color: var(--mint); font-weight: 800; }
.bil-incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 20px 0 0; }
.bil-incl li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; color: var(--text); }
.bil-incl strong { display: block; margin-bottom: 2px; }
.bil-incl span { color: var(--muted); font-size: 14px; }
.bil-table-wrap { position: relative; overflow-x: auto; margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.bil-table-wrap:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; }
.bil-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--text); }
.bil-table th, .bil-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.bil-table thead th { font-family: var(--display); font-size: 16px; font-weight: 800; background: var(--surface); }
.bil-table thead small { display: block; font-family: Inter, -apple-system, Segoe UI, Roboto, sans-serif; font-weight: 500; font-size: 12px; color: var(--muted); }
.bil-table tbody th { text-align: left; font-weight: 500; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 180px; }
.bil-table tr:last-child th, .bil-table tr:last-child td { border-bottom: 0; }
.bil-table .bil-group th { background: var(--paper); color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-top: 16px; }
.bil-table .bil-col-hot { background: var(--iris-50); }
.bil-yes { color: var(--iris-600); font-weight: 800; }
.bil-no { color: var(--muted); }
.bil-swipe { display: none; text-align: center; font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.bil-faq { margin-top: 12px; }
.bil-faq details p { color: var(--muted); margin: 10px 0 2px; }

/* billing page */
.bil-status { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.bil-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; }
.bil-plan { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 8px; }
.bil-badge { font-family: Inter, -apple-system, Segoe UI, Roboto, sans-serif; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0; padding: 4px 10px; border-radius: 999px; background: var(--iris-50); color: var(--iris-600); }
.bil-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bil-badge-ok::before { background: var(--pos); }
.bil-badge-warn::before { background: var(--neg); }
.bil-badge-trial::before { background: var(--amber); }
.bil-facts { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.bil-facts li { padding: 5px 0; color: var(--muted); }
.bil-facts strong { color: var(--text); font-weight: 600; }
.bil-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bil-usage > * + * { margin-top: 16px; }
.bil-usage-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.bil-usage-row span { color: var(--muted); }
.bil-meter { display: block; height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bil-meter i { display: block; height: 100%; border-radius: 99px; background: var(--grad); min-width: 4px; }
.bil-meter.is-high i { background: var(--amber); }
.bil-meter.is-full i { background: var(--neg); }
.bil-alert { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--line); border-left: 4px solid var(--neg); background: var(--surface); color: var(--text); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.bil-alert-info { border-left-color: var(--iris); }
.bil-alert p { margin: 0; }
.bil-upsell { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: linear-gradient(120deg, var(--iris-50), var(--surface) 70%); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; color: var(--text); }
.bil-upsell h2 { margin: 0 0 4px; font-size: 18px; }
.bil-upsell p { margin: 0; color: var(--muted); }
.bil-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 32px 0 6px; }
.bil-section-head h2 { margin: 0; }
.bil-section-head .bil-toggle { margin: 0; }
.bil-ref-card { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bil-ref-card h2 { margin: 0 0 4px; }
.bil-ref-card p { margin: 0; color: var(--muted); }

/* overview nudge */
.bil-nudge { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.bil-nudge.is-full { border-left-color: var(--neg); }
.bil-nudge.is-intent { border-left-color: var(--iris); }
.bil-nudge-body { flex: 1 1 300px; }
.bil-nudge-body p { margin: 0; }
.bil-nudge-body .muted { font-size: 14px; margin-top: 2px; }
.bil-nudge .bil-meter { margin-top: 10px; max-width: 420px; height: 8px; }
.bil-nudge-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* referrals */
.bil-ref-hero { text-align: center; padding: 36px 24px; }
.bil-ref-hero h2 { font-size: 30px; margin: 0 0 8px; letter-spacing: -.02em; }
.bil-ref-hero .lead { color: var(--muted); max-width: 560px; margin: 0 auto 22px; }
.bil-copy { display: flex; gap: 8px; max-width: 560px; margin: 0 auto; }
.bil-copy input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: var(--paper); color: var(--text); border-color: var(--line); }
.bil-copy .btn { flex: none; }
.bil-share { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.bil-steps { counter-reset: bil; list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bil-steps li { counter-increment: bil; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.bil-steps li::before { content: counter(bil); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; margin-bottom: 10px; }
.bil-steps strong { display: block; margin-bottom: 4px; }
.bil-steps span { color: var(--muted); font-size: 14px; }
.bil-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.bil-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--text); }
.bil-kpi span { display: block; font-size: 13px; color: var(--muted); }
.bil-kpi strong { font-family: var(--display); font-size: 28px; font-weight: 800; }
.bil-list { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text); }
.bil-list th, .bil-list td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.bil-list th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bil-list tr:last-child td { border-bottom: 0; }
.bil-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--iris-50); color: var(--iris-600); }
.bil-fine { font-size: 13px; color: var(--muted); }

/* account + signup */
.bil-acc .bil-copy { margin: 12px 0 0; max-width: none; }
.bil-acc h2 { margin-bottom: 6px; }
.bil-acc p { color: var(--muted); margin: 0; }
.bil-invite { background: var(--iris-50); color: var(--text); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-top: 16px; }
.bil-invite p { margin: 0; }

@media (max-width: 1060px) {
  .bil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bil-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .bil-grid-3, .bil-status, .bil-incl, .bil-steps { grid-template-columns: 1fr; }
  .bil-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bil-hero h1 { font-size: 36px; }
}
@media (max-width: 640px) {
  .bil-grid { grid-template-columns: 1fr; }
  .bil-tag, .bil-card .bil-note { min-height: 0; }
  .bil-toggle label { padding: 9px 14px; }
  .bil-copy { flex-direction: column; }
  .bil-ref-hero { padding: 26px 18px; }
  .bil-ref-hero h2 { font-size: 24px; }
  .bil-plan { font-size: 26px; }
  .bil-table { min-width: 540px; font-size: 13px; }
  .bil-table th, .bil-table td { padding: 10px 8px; }
  .bil-table tbody th { min-width: 128px; max-width: 150px; padding-left: 12px; }
  .bil-table thead th { font-size: 14px; }
  .bil-swipe { display: block; }
}
.bil-acc-more { margin-top: 10px !important; }

/* ---- src/modules/compare/style.css ---- */
/* compare module: /compare, /compare/a-vs-b, /apps, /apps/<genre>, /alternatives/<slug>, teardown links.
   Colors come from the design tokens so dark mode works. The dark heroes (td-hero, hero-dark) stay dark in both themes. */
.cmp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cmp-h2 { margin: 40px 0 14px; }
.cmp-h3 { margin: 24px 0 10px; }

/* app avatars: icon or a colored letter tile */
.cmp-av { width: 44px; height: 44px; border-radius: 11px; flex: none; display: inline-grid; place-items: center; object-fit: cover; color: #fff; background: var(--btn-bg); font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1; }
.cmp-av-lg { width: 76px; height: 76px; border-radius: 18px; font-size: 34px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.cmp-av-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.cmp-av-xs { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.cmp-av-0 { background: #6440f5; } .cmp-av-1 { background: #c2255c; } .cmp-av-2 { background: #0b7a5e; } .cmp-av-3 { background: #1c64d1; }
.cmp-av-4 { background: #9c36b5; } .cmp-av-5 { background: #c2410c; } .cmp-av-6 { background: #5c4dcc; } .cmp-av-7 { background: #0c7489; }

/* score chips: the number stays in the text color, the tint carries the tone */
.cmp-t-pos, .cmp-t-neu, .cmp-t-neg { color: var(--text); }
.cmp-match-score b, .cmp-mini b, .cmp-kpis b.cmp-t-pos, .cmp-kpis b.cmp-t-neu, .cmp-kpis b.cmp-t-neg { border-radius: 999px; }
.cmp-match-score b.cmp-t-pos, .cmp-mini b.cmp-t-pos { background: var(--iris-50); background: color-mix(in srgb, var(--pos) 20%, transparent); }
.cmp-match-score b.cmp-t-neu, .cmp-mini b.cmp-t-neu { background: var(--iris-50); background: color-mix(in srgb, var(--amber) 26%, transparent); }
.cmp-match-score b.cmp-t-neg, .cmp-mini b.cmp-t-neg { background: var(--iris-50); background: color-mix(in srgb, var(--neg) 18%, transparent); }

/* keys for app A (iris) and app B (coral) */
.cmp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cmp-dot-a, .cmp-fill-a { background: var(--iris); }
.cmp-dot-b, .cmp-fill-b { background: var(--coral); }
.cmp-key { display: inline-flex; align-items: center; gap: 6px; }

/* ---- compare page hero ---- */
.cmp-hero { padding: 44px 0 40px; }
.cmp-hero-center { text-align: center; }
.cmp-h1 { font-size: 46px; font-weight: 800; letter-spacing: -.03em; margin: 14px 0 8px; overflow-wrap: anywhere; }
.cmp-h1-vs { color: #a9a3d6; font-weight: 600; font-size: .58em; margin: 0 .12em; vertical-align: .12em; }
.cmp-headline { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.cmp-duo { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 12px; align-items: center; max-width: 860px; margin: 30px auto 0; }
.cmp-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px 20px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); height: 100%; }
.cmp-side.is-pick { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 20px 50px rgba(45,212,167,.12); }
.cmp-pick-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--mint); color: #0b0a1a; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.cmp-side-name { font-size: 19px; margin: 8px 0 0; }
.cmp-side-name a { color: #fff; }
.cmp-dev { margin: 0; color: #a9a3d6; font-size: 13px; }
.cmp-ring { margin: 8px 0 4px; }
.cmp-side-meta { margin: 0; color: #c6c1e6; font-size: 13px; }
.cmp-vs { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: var(--grad); color: #fff; font-family: var(--display); font-weight: 800; font-size: 17px; box-shadow: 0 0 0 6px rgba(255,255,255,.06), 0 10px 30px rgba(176,92,255,.45); }
.cmp-share { justify-content: center; margin-top: 26px; }

/* ---- who wins + pick ---- */
.cmp-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp-table th, .cmp-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.cmp-table thead th + th { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 13px; font-weight: 700; }
.cmp-table tbody th { font-weight: 600; }
.cmp-table tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.cmp-table td { font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-table td.cmp-won { background: var(--iris-50); background: color-mix(in srgb, var(--pos) 10%, transparent); }
.cmp-win-tag, .cmp-tie { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; vertical-align: 1px; color: var(--text); }
.cmp-win-tag { background: color-mix(in srgb, var(--pos) 24%, transparent); }
.cmp-tie { background: var(--iris-50); }
.cmp-tally { margin: 12px 0 0; }
.cmp-pick p { margin: 0 0 12px; }
.cmp-pick p:last-child { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.cmp-pick q, .cmp-faq q { font-style: italic; }

/* ---- rating mix ---- */
.cmp-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.cmp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.cmp-mix-row { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.cmp-mix-star { font-weight: 700; font-size: 14px; }
.cmp-mix-bars { display: grid; gap: 4px; }
.cmp-mix-bar { display: grid; grid-template-columns: 1fr 42px; gap: 8px; align-items: center; }
.cmp-mix-bar .bar { background: var(--line); height: 9px; }
.cmp-mix-bar .bar i.cmp-fill-a { background: var(--iris); }
.cmp-mix-bar .bar i.cmp-fill-b { background: var(--coral); }
.grid2:has(> .cmp-mix) { align-items: start; }
.cmp-mix-bar b { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- shared complaints ---- */
.cmp-shared-row { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.cmp-shared-row h3 { margin: 0 0 8px; }
.cmp-shared-item { margin-bottom: 10px; }
.cmp-shared-item strong { display: block; margin-top: 2px; }
.cmp-shared-item q, .cmp-points q, .cmp-row-q, .cmp-theme-list q { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; font-style: italic; }

/* ---- love / hate / want columns ---- */
.cmp-lhw .card { margin-bottom: 0; }
.cmp-lhw { margin-bottom: 8px; }
.cmp-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 16px; }
.cmp-points { list-style: none; padding: 0; margin: 0; }
.cmp-points li { padding: 12px 0; border-top: 1px solid var(--line); }
.cmp-churn-h { margin: 14px 0 4px; }

/* ---- FAQ, links, chips ---- */
.cmp-faq { margin: 44px auto 0; padding: 0; }
.cmp-faq details p { color: var(--text); }
.cmp-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cmp-link { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; }
.cmp-link strong, .cmp-link small { display: block; }
.cmp-link small { color: var(--muted); font-size: 13px; }
.cmp-link-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--iris-50); color: var(--iris-600); font-weight: 800; }
.cmp-chips, .cmp-gchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 500; }
.cmp-chip .cmp-av + .cmp-av { margin-left: -5px; box-shadow: 0 0 0 2px var(--surface); }
.cmp-chip:hover, .cmp-gchip:hover { text-decoration: none; border-color: var(--iris); }
.cmp-gchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 14px; }
.cmp-gchip span { font-size: 12px; background: var(--iris-50); color: var(--iris-600); padding: 1px 8px; border-radius: 999px; }
.cmp-again { margin-top: 24px; }
/* Phones: the two app fields share a row and the button goes full width below, so "Second app" is not cut off. */
@media (max-width: 520px) {
  .cmp-again input { flex: 1 1 40%; }
  .cmp-again .btn { flex: 1 1 100%; }
}
.cmp-foot-links { margin-top: 18px; text-align: center; }

.cmp-match:focus-visible, .cmp-chip:focus-visible, .cmp-gchip:focus-visible, .cmp-link:focus-visible, .cmp-genre-card:focus-visible, .cmp-side-name a:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; }

/* ---- hub ---- */
.cmp-hub-hero h1 { font-size: 48px; }
.cmp-picker { position: relative; display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: end; max-width: 820px; margin: 0 auto; padding: 12px; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; backdrop-filter: blur(6px); }
.cmp-picker label { color: #d9d2ff; font-size: 13px; font-weight: 600; margin: 0 0 6px 4px; }
.cmp-picker input { background: var(--surface); color: var(--text); border: 0; font-size: 16px; padding: 14px 16px; border-radius: 12px; }
.cmp-picker-vs { align-self: center; margin-top: 22px; color: #a9a3d6; font-family: var(--display); font-weight: 800; font-size: 15px; }
.cmp-picker .btn { white-space: nowrap; height: 50px; }
.cmp-picker-msg p { max-width: 820px; margin: 14px auto 0; padding: 10px 14px; border-radius: 12px; background: rgba(255,84,112,.16); border: 1px solid rgba(255,84,112,.45); color: #fff; font-size: 15px; }
.cmp-picker-msg a { color: #fff; text-decoration: underline; font-weight: 600; }
.cmp-picker-help { margin: 14px auto 0; }
.cmp-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 16px; }
.cmp-match { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: transform .15s, border-color .15s; }
.cmp-match:hover { text-decoration: none; border-color: var(--iris); transform: translateY(-2px); }
.cmp-match-avs { display: inline-flex; flex: none; }
.cmp-match-avs .cmp-av { width: 40px; height: 40px; font-size: 17px; }
.cmp-match-avs .cmp-av + .cmp-av { margin-left: -6px; box-shadow: 0 0 0 3px var(--surface); }
.cmp-match-text { flex: 1; min-width: 0; }
.cmp-match-text strong, .cmp-match-text small { display: block; }
.cmp-match-text small { color: var(--muted); font-size: 13px; }
.cmp-vs-sm { color: var(--muted); font-weight: 500; font-size: 13px; }
.cmp-match-score { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.cmp-match-score b, .cmp-mini b { font-size: 13px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.cmp-match-score i { color: var(--muted); font-style: normal; }
.cmp-steps .card { margin: 0; }
.cmp-steps p { margin: 0; color: var(--muted); }
.cmp-step { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; margin-bottom: 10px; }
.cmp-cta { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: center; margin-top: 36px; }
.cmp-cta h2 { margin-bottom: 4px; }
.cmp-cta p { margin: 0; }
.cmp-cta .td-form-light { margin: 0; max-width: none; }

/* ---- categories ---- */
.cmp-genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.cmp-genre-card { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cmp-genre-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.cmp-mini { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cmp-mini li { display: grid; grid-template-columns: 16px 22px 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.cmp-mini-n { color: var(--muted); font-weight: 700; font-size: 13px; }
.cmp-mini-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-more { color: var(--iris-600); font-weight: 600; font-size: 14px; margin-top: auto; }
.cmp-note { margin-top: 32px; border-left: 4px solid var(--iris); }
.cmp-note p { font-size: 15px; font-weight: 400; }

/* ---- leaderboard / alternatives rows ---- */
.cmp-genre-hero h1 { font-size: 46px; max-width: 900px; }
.cmp-lead-left { margin: 0; max-width: 720px; }
.cmp-answer { border-left: 4px solid var(--iris); }
.cmp-answer p { font-size: 17px; }
.cmp-board { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cmp-row { display: grid; grid-template-columns: 36px 44px 1fr 132px; grid-template-areas: "rank av main score"; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cmp-row.is-top { border-color: var(--iris); box-shadow: 0 0 0 1px var(--iris), var(--shadow); }
.cmp-rank { grid-area: rank; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--muted); padding-top: 6px; text-align: center; }
.cmp-row.is-top .cmp-rank { color: var(--iris-600); }
.cmp-row > .cmp-av { grid-area: av; }
.cmp-row-main { grid-area: main; min-width: 0; }
.cmp-row-main h3 { margin: 2px 0 2px; font-size: 17px; }
.cmp-row-main h3 a { color: var(--text); }
.cmp-row-meta { margin: 0; font-size: 13px; color: var(--muted); }
.cmp-row-verdict { margin: 8px 0 0; font-weight: 500; }
.cmp-row-love { margin: 6px 0 0; font-size: 14px; }
.cmp-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; margin-right: 4px; color: var(--text); background: var(--iris-50); background: color-mix(in srgb, var(--mint) 22%, transparent); }
.cmp-row-links { margin: 10px 0 0; font-size: 14px; }
.cmp-row-score { grid-area: score; text-align: right; }
.cmp-row-score b { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; }
.cmp-row-score small { color: var(--muted); font-size: 13px; }
.cmp-row-score .bar { margin-top: 8px; height: 6px; background: var(--line); }
.cmp-bar-pos { background: var(--pos); } .cmp-bar-neu { background: var(--amber); } .cmp-bar-neg { background: var(--neg); }
.cmp-diff { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--text); background: var(--iris-50); }
.cmp-diff-up { background: color-mix(in srgb, var(--pos) 20%, transparent); }
.cmp-diff-down { background: color-mix(in srgb, var(--neg) 16%, transparent); }
.cmp-themes { margin-top: 36px; }
.cmp-themes .card { margin-bottom: 0; }
.cmp-theme-list { list-style: none; padding: 0; margin: 0; counter-reset: cmpt; }
.cmp-theme-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.cmp-theme-apps { margin: 2px 0 2px; }
.cmp-theme-apps .chip:hover { text-decoration: none; background: var(--iris-100); }
.cmp-sub-h { margin: 14px 0 0; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.cmp-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.cmp-kpis div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cmp-kpis span { display: block; color: var(--muted); font-size: 12px; }
.cmp-kpis b { font-family: var(--display); font-size: 24px; font-weight: 800; }
.cmp-kpis b small { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---- teardown page block ---- */
.cmp-td { margin-top: 32px; }
.cmp-td h2 { margin: 0; }
.cmp-td-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; margin: 14px 0; }
.cmp-td-grid .cmp-match { background: var(--paper); }
.cmp-td-grid .cmp-match-avs .cmp-av + .cmp-av { box-shadow: 0 0 0 3px var(--paper); }

@media (max-width: 880px) {
  .cmp-top, .cmp-cta { grid-template-columns: 1fr; }
  .cmp-h1, .cmp-hub-hero h1, .cmp-genre-hero h1 { font-size: 34px; }
  .cmp-picker { grid-template-columns: 1fr; }
  .cmp-picker-vs { margin: 0 auto; }
  .cmp-picker .btn { width: 100%; }
}
@media (max-width: 600px) {
  .cmp-hero { padding: 32px 0 30px; }
  .cmp-h1, .cmp-hub-hero h1, .cmp-genre-hero h1 { font-size: 30px; }
  .cmp-headline { font-size: 18px; }
  .cmp-duo { grid-template-columns: 1fr 34px 1fr; gap: 6px; margin-top: 24px; }
  .cmp-side { padding: 22px 8px 14px; border-radius: 18px; }
  .cmp-side .cmp-av-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 26px; }
  .cmp-side-name { font-size: 15px; overflow-wrap: anywhere; }
  .cmp-dev, .cmp-side-meta { font-size: 12px; }
  .cmp-ring { width: 96px; height: 96px; }
  .cmp-ring span { font-size: 28px; }
  .cmp-ring small { font-size: 7.5px; letter-spacing: .02em; }
  .cmp-vs { width: 34px; height: 34px; font-size: 12px; box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
  .cmp-pick-badge { font-size: 10px; padding: 3px 9px; }
  .cmp-table th, .cmp-table td { padding: 9px 5px; }
  .cmp-table { font-size: 13px; }
  .cmp-win-tag { display: table; margin-top: 3px; }
  .cmp-row { grid-template-columns: 22px 40px 1fr; grid-template-areas: "rank av score" "main main main"; gap: 10px 12px; padding: 14px 16px; align-items: center; }
  .cmp-row > .cmp-av { width: 40px; height: 40px; }
  .cmp-rank { font-size: 18px; padding-top: 0; text-align: left; }
  .cmp-row-score { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 6px; }
  .cmp-row-score b { font-size: 24px; }
  .cmp-row-score .bar { flex-basis: 100%; max-width: 160px; margin: 2px 0 0 auto; }
  .cmp-row-score .cmp-diff { margin-top: 0; }
  .cmp-alt-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cmp-alt-head .cmp-av-lg { width: 60px; height: 60px; border-radius: 15px; font-size: 28px; }
  .cmp-alt-head .td-title h1 { font-size: 28px; }
  .cmp-alt-ring { display: none; }
  .cmp-match-grid, .cmp-td-grid, .cmp-links { grid-template-columns: 1fr; }
  .cmp-match { gap: 10px; padding: 12px; }
  .cmp-match-avs .cmp-av { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
  .cmp-match-avs .cmp-av + .cmp-av { margin-left: -5px; }
  .cmp-match-text strong { font-size: 14px; }
  .cmp-match-text small { font-size: 12px; }
  .cmp-match-score b { padding: 2px 6px; }
  .cmp-td { padding: 18px; }
  .copy-inline input { width: 150px; }
}

/* ---- src/modules/engage/style.css ---- */
/* engage: follow, newsletter, badge, roast mode, social proof. Colors come from the design tokens. */
.eng-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eng-gap { margin-top: 18px; }
.eng-panel p a, .eng-roast-how a, .eng-news-form p a { text-decoration: underline; text-underline-offset: 2px; }

/* social proof strip under the home hero */
.eng-proof { background: var(--surface); border-bottom: 1px solid var(--line); }
.eng-proof-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 auto; padding-top: 14px; padding-bottom: 14px; font-size: 14px; color: var(--muted); text-align: center; }
.eng-proof strong { color: var(--text); font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-right: 2px; }
.eng-proof .live { flex: none; margin-right: 2px; }
.eng-dot { opacity: .5; }

/* hero buttons on the teardown page */
.eng-act span { font-size: 13px; }

/* newsletter box */
.eng-news { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; padding: 28px 30px; margin: 32px 0 0;
  background: linear-gradient(135deg, var(--iris-50), var(--surface) 70%); position: relative; overflow: hidden; }
.eng-news::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -110px; border-radius: 50%; background: var(--grad); opacity: .12; pointer-events: none; }
.eng-news .eyebrow { margin-bottom: 10px; background: var(--surface); }
.eng-news h2 { font-size: 24px; margin-bottom: 6px; }
.eng-news-copy p { margin: 0; color: var(--muted); }
.eng-news-form { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.eng-news-form input[type=email] { flex: 1 1 160px; min-width: 0; }
.eng-news-form .btn { flex: none; }
.eng-news-form p { flex-basis: 100%; margin: 4px 0 0; }
.eng-news-wrap { padding-bottom: 48px; }

/* badge box on the teardown page */
.eng-badge { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; margin-top: 32px; padding: 26px 28px; }
.eng-badge h2 { font-size: 22px; }
.eng-badge-intro p { margin: 0 0 14px; }
.eng-badge-preview { display: inline-flex; align-items: center; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 12px; background: var(--paper); }
.eng-badge-preview img { display: block; height: 20px; width: auto; }
.eng-copy { position: relative; margin-top: 14px; }
.eng-copy:first-child { margin-top: 0; }
.eng-copy label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.eng-copy textarea { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; resize: vertical; min-height: 66px; padding-right: 84px; background: var(--paper); color: var(--text); border-color: var(--line); }
.eng-copy .btn { position: absolute; right: 8px; top: 34px; }

/* small centered pages: follow, check inbox, confirm, unsubscribe */
.eng-panel { padding: 34px; margin-bottom: 18px; }
.eng-panel h1 { font-size: 30px; margin: 4px 0 8px; }
.eng-panel .lead { margin: 0 0 12px; }
.eng-panel .eyebrow { margin-bottom: 6px; }
.eng-app { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.eng-app img { border-radius: 14px; flex: none; box-shadow: var(--shadow); }
.eng-ticks { margin: 16px 0 22px; }
.eng-form { margin-bottom: 14px; }
.eng-big-icon { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.eng-next { margin-top: 8px; }
.eng-next .td-form { margin-top: 14px; max-width: none; }

/* newsletter page */
.eng-hero-form { margin-top: 8px; max-width: 560px; }
.eng-hero-note { margin-top: 14px; }
.eng-hero-flash { max-width: 560px; margin: 0 auto 14px; }
.eng-ficon { font-size: 28px; display: block; margin-bottom: 10px; }
.eng-h3 { font-size: 18px; }
.eng-picks-head { margin-top: 40px; margin-bottom: 14px; }
.eng-picks-head h2 { margin: 0; }
.eng-faq { margin: 40px auto 0; }
.eng-hero-done { display: inline-block; margin: 4px auto 0; padding: 12px 18px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; }

/* roast page */
.eng-roast-hero .td-title h1 { font-size: 44px; }
.eng-roast-lines { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; counter-reset: roast; }
.eng-roast-line { counter-increment: roast; display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); }
.eng-roast-line::before { content: counter(roast, decimal-leading-zero); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--grad); color: #fff; font-family: var(--display); font-weight: 800; font-size: 15px; }
.eng-roast-line p { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.eng-honest { border-left: 5px solid var(--mint); padding: 22px 26px; }
.eng-honest .callout-label { color: var(--text); }
.eng-honest p { font-family: var(--display); font-size: 21px; font-weight: 600; margin: 6px 0 0; line-height: 1.35; }
.eng-share-card h2 { font-size: 18px; }
.eng-share-card .eng-copy { margin-top: 18px; }
.eng-share-card textarea { font-family: inherit; font-size: 14px; }
.eng-roast-back { margin: 12px 0 0; font-size: 14px; }
.eng-roast-back a { color: #d9d2ff; }
.eng-btn-li { background: #0a66c2; box-shadow: none; }
.eng-btn-li:hover { background: #084f96; }
.eng-link-card { display: flex; gap: 14px; align-items: flex-start; }
.eng-link-icon { font-size: 26px; line-height: 1.2; }
.eng-roast-how { max-width: 760px; margin: 4px 0 0; }
.eng-roast-card p { font-style: italic; }

@media (max-width: 880px) {
  .eng-news, .eng-badge { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .eng-news h2 { font-size: 21px; }
  .eng-panel { padding: 24px 20px; }
  .eng-panel h1 { font-size: 26px; }
  .eng-roast-hero .td-title h1 { font-size: 32px; }
  .eng-roast-line { grid-template-columns: 38px 1fr; gap: 12px; padding: 16px; }
  .eng-roast-line::before { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
  .eng-roast-line p, .eng-honest p { font-size: 18px; }
  .eng-proof-inner { font-size: 13px; gap: 2px 10px; }
  .eng-proof strong { font-size: 15px; }
}
@media (max-width: 520px) {
  .eng-dot { display: none; }
  .eng-proof-inner { gap: 2px 16px; }
}
@media print {
  .eng-news, .eng-badge, .eng-share-card { display: none; }
}

/* ---- src/modules/guides/style.css ---- */
/* guides module: /guides, /guides/<slug>, /glossary, /glossary/<term>. Colors come from design tokens only (dark-mode ready). */
.gd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* page head */
.gd-head { padding: 36px 0 30px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--iris) 7%, var(--paper)), var(--paper)); }
.gd-head-inner { max-width: 1100px; }
.gd-head h1 { font-size: clamp(31px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; max-width: 860px; margin: 0 0 14px; }
.gd-head .eyebrow { margin-bottom: 12px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 22%, transparent); }
.gd-dek { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 720px; margin: 0 0 18px; }
.gd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 14px; color: var(--muted); margin: 0 0 0 -22px; clip-path: inset(0 0 0 22px); }
.gd-meta > span { position: relative; padding-left: 22px; }
.gd-meta > span::before { content: ""; position: absolute; left: 9px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor; opacity: .5; }
.gd-by { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.gd-aka { color: var(--muted); margin: 0; }

.gd-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; padding: 0; margin: 0 0 20px; font-size: 13px; color: var(--muted); }
.gd-crumbs li { display: inline-flex; min-width: 0; max-width: 100%; }
.gd-crumbs li + li::before { content: "/"; margin: 0 8px; opacity: .6; }
.gd-crumbs a { color: var(--muted); }
.gd-crumbs a:hover { color: var(--iris-600); }
.gd-crumbs span[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }

/* two-column reading layout: article + sticky table of contents */
.gd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-template-areas: "main side"; gap: 56px; max-width: 1100px; padding-top: 36px; padding-bottom: 24px; align-items: start; }
.gd-article { grid-area: main; max-width: 70ch; font-size: 17px; line-height: 1.72; min-width: 0; }
.gd-side { grid-area: side; position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; padding-bottom: 8px; }
.gd-toc summary { list-style: none; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); cursor: default; }
.gd-toc summary::-webkit-details-marker { display: none; }
.gd-toc summary::after { display: none; }
.gd-toc summary { padding: 0 0 2px; }
.gd-toc { border: 0; padding: 0; }
.gd-toc ol { list-style: none; margin: 10px 0 0; padding: 0; border-left: 2px solid var(--line); }
.gd-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; line-height: 1.35; }
.gd-toc a:hover { color: var(--text); text-decoration: none; border-left-color: var(--muted); }
.gd-toc a[aria-current] { color: var(--iris-600); border-left-color: var(--iris); font-weight: 600; }
.gd-side-card { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.gd-side-card p { margin: 0 0 10px; }
.gd-side-title { font-weight: 700; font-family: var(--display); }
.gd-side-btn { background: var(--btn-bg); color: var(--btn-text); }
.gd-side-btn:hover { background: var(--btn-bg-hover); color: var(--btn-text); }

/* key takeaways */
.gd-takeaways { background: color-mix(in srgb, var(--iris) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--iris) 24%, var(--line)); border-radius: 18px; padding: 22px 24px 18px; margin: 0 0 36px; }
.gd-takeaways h2 { display: flex; align-items: center; gap: 10px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--iris-600); margin: 0 0 10px; scroll-margin-top: 88px; }
.gd-takeaways h2::before { content: ""; width: 22px; height: 22px; border-radius: 7px; background: var(--grad); flex: none; }
.gd-takeaways ul { list-style: none; margin: 0; padding: 0; }
.gd-takeaways li { position: relative; padding: 7px 0 7px 32px; line-height: 1.55; }
.gd-takeaways li + li { border-top: 1px dashed color-mix(in srgb, var(--iris) 20%, var(--line)); }
.gd-takeaways li::before { content: "✓"; position: absolute; left: 0; top: 9px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--iris-600); background: color-mix(in srgb, var(--iris) 16%, var(--surface)); }

/* prose */
.gd-prose > :first-child { margin-top: 0; }
.gd-prose p, .gd-prose ul, .gd-prose ol { margin: 0 0 1.05em; }
.gd-prose h2 { font-size: 27px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin: 1.9em 0 .55em; scroll-margin-top: 88px; }
.gd-prose h3 { font-size: 19px; font-weight: 700; margin: 1.6em 0 .45em; scroll-margin-top: 88px; }
.gd-prose h4 { font-size: 16px; margin: 1.4em 0 .4em; }
.gd-prose ul, .gd-prose ol { padding-left: 1.35em; }
.gd-prose li { margin: .35em 0; padding-left: .2em; }
.gd-prose li::marker { color: var(--iris-600); font-weight: 700; }
.gd-prose a, .gd-faq a, .gd-def a { color: var(--iris-600); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--iris) 40%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.gd-prose a:hover, .gd-faq a:hover, .gd-def a:hover { text-decoration-color: currentColor; }
.gd-prose strong { font-weight: 650; }
.gd-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.gd-prose blockquote { font-style: normal; margin: 1.3em 0; padding: 12px 18px; }
.gd-prose blockquote p:last-child { margin-bottom: 0; }
.gd-prose code { font-size: .86em; }
.gd-code { background: var(--ink, #0b0a1a); color: #e4e1f7; padding: 16px 18px; border-radius: 14px; overflow-x: auto; font-size: 14px; line-height: 1.55; margin: 1.2em 0 1.4em; }
.gd-code code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* checklists */
.gd-prose .gd-checklist { list-style: none; padding-left: 0; }
.gd-checklist li { position: relative; padding-left: 32px; }
.gd-box { position: absolute; left: 0; top: .32em; width: 19px; height: 19px; border-radius: 6px; border: 2px solid color-mix(in srgb, var(--iris) 55%, var(--line)); background: var(--surface); }
.gd-box-on { background: var(--iris); border-color: var(--iris); }

/* callouts: > [!TIP] ... */
.gd-callout { --gd-c: var(--iris); margin: 1.5em 0; padding: 14px 18px 4px; border-radius: 14px; background: color-mix(in srgb, var(--gd-c) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gd-c) 30%, var(--line)); }
.gd-callout-tip { --gd-c: var(--pos); }
.gd-callout-warning { --gd-c: var(--amber); }
.gd-callout-example { --gd-c: var(--coral); }
.gd-callout-apple { --gd-c: var(--muted); }
.gd-callout-label { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 4px !important; color: color-mix(in srgb, var(--gd-c) 50%, var(--text)); }
.gd-callout p, .gd-callout ul, .gd-callout ol { margin-bottom: .7em; }

/* tables */
.gd-table { overflow-x: auto; margin: 1.4em 0 1.6em; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.gd-table:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; }
.gd-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.gd-table th, .gd-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.gd-table tr:last-child > * { border-bottom: 0; }
.gd-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--iris) 6%, var(--surface)); white-space: nowrap; }
.gd-table tbody th { font-weight: 650; min-width: 120px; }
.gd-table .gd-right { text-align: right; } .gd-table .gd-center { text-align: center; }

/* copy-paste templates: ```template Title */
.gd-template { position: relative; margin: 1.1em 0 1.5em; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.gd-prose h3.gd-template-title { font-size: 15px; font-weight: 700; line-height: 1.3; min-height: 32px; display: flex; align-items: center; margin: 0 84px 10px 0; }
.gd-template textarea { display: block; width: 100%; margin: 0; resize: vertical; font: inherit; font-size: 15px; line-height: 1.6; padding: 12px 14px; color: var(--text); background: var(--paper); border: 1px dashed color-mix(in srgb, var(--iris) 30%, var(--line)); border-radius: 12px; field-sizing: content; min-height: 4.5em; }
.gd-template textarea:focus { border-style: solid; }
.gd-copy { position: absolute; top: 13px; right: 14px; }

/* sources (after the FAQ) */
.gd-sources { margin-top: 40px; font-size: 15px; }
.gd-prose.gd-sources h2 { font-size: 13px; font-family: inherit; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.gd-sources ul { margin: 0; }

/* FAQ */
.gd-faq { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--line); }
.gd-faq > h2 { font-size: 27px; font-weight: 800; letter-spacing: -.025em; scroll-margin-top: 88px; }
.gd-qa { padding: 16px 0 6px; border-bottom: 1px dashed var(--line); }
.gd-qa:last-child { border-bottom: 0; }
.gd-qa h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.gd-qa p { margin: 0 0 10px; }

.gd-terms { margin-top: 36px; }
.gd-mini-h { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gd-chips .chip { margin: 0; font-size: 13px; padding: 5px 12px; }
.gd-chips .chip:hover { text-decoration: none; background: color-mix(in srgb, var(--iris) 18%, var(--surface)); }
.gd-foot { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--line); line-height: 1.6; }
.gd-foot a { text-decoration: underline; text-underline-offset: 2px; }

/* cards (hub, related) */
.gd-more { max-width: 1100px; margin-top: 56px; }
.gd-more h2 { font-size: 22px; }
.gd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 14px; }
.gd-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.gd-card:hover { border-color: var(--iris); transform: translateY(-2px); }
.gd-card h3 { font-size: 18px; line-height: 1.3; margin: 8px 0 8px; }
.gd-card h3 a { color: var(--text); }
.gd-card h3 a:hover { text-decoration: none; }
.gd-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.gd-card .gd-card-meta { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--iris-600); }
.gd-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gd-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gd-stretch:focus { outline: none; }
.gd-stretch:focus-visible::after { outline: 3px solid var(--iris); outline-offset: 2px; }
.gd-td-grid { margin-top: 14px; }
.gd-td-grid .td-card { background: var(--surface); }
.gd-td-verdict { display: block; font-size: 14px; color: var(--muted); margin-top: 10px; }
.gd-cta-wrap { max-width: 1100px; margin-top: 56px; margin-bottom: 72px; }
.gd-cta-narrow { max-width: 760px; }
.gd-cta { margin-top: 0; }
.gd-cta > div:first-child { flex: 1 1 420px; }
.gd-cta-form { margin: 20px 0 0; max-width: 600px; }
.gd-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* hub */
.gd-hub-hero h1 { margin-top: 14px; }
.gd-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.gd-jump a { color: #fff; font-size: 14px; font-weight: 500; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
.gd-jump a:hover { text-decoration: none; background: rgba(255, 255, 255, .16); }
.gd-letters a { min-width: 40px; text-align: center; padding: 7px 10px; }
.gd-hub { max-width: 1100px; }
.gd-hub-group { margin-bottom: 56px; scroll-margin-top: 88px; }
.gd-hub-group > h2, .gd-hub-group .row-between h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0; scroll-margin-top: 88px; }
.gd-hub-group > p { margin: 6px 0 14px; }
.gd-quick { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.gd-quick li { border-bottom: 1px solid var(--line); }
.gd-quick a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; color: var(--text); font-weight: 500; }
.gd-quick a::after { content: "→"; color: var(--iris-600); }
.gd-quick a:hover { color: var(--iris-600); text-decoration: none; }

/* glossary */
.gd-gloss { max-width: 1100px; }
.gd-letter { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.gd-letter:first-child { border-top: 0; padding-top: 0; }
.gd-letter-h { font-size: 40px; font-weight: 800; line-height: 1; margin: 6px 0 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; scroll-margin-top: 88px; }
.gd-defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.gd-def-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; transition: border-color .15s; }
.gd-def-card:hover { border-color: var(--iris); }
.gd-def-card h3 { font-size: 17px; margin: 0 0 6px; }
.gd-def-card h3 a { color: var(--text); }
.gd-def-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.gd-gloss .gd-hub-group { margin-top: 48px; }

/* term page */
.gd-term-head { max-width: 760px; }
.gd-term { max-width: 760px; padding-top: 32px; }
.gd-term .gd-article { max-width: none; }
.gd-def { margin: 0 0 30px; padding: 18px 22px 20px; border-left: 4px solid var(--iris); border-radius: 0 16px 16px 0; background: color-mix(in srgb, var(--iris) 7%, var(--surface)); }
.gd-def-label { font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--iris-600); margin: 0 0 6px; }
.gd-def-text { font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.42; letter-spacing: -.01em; margin: 0; }
.gd-rel { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.gd-rel li { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 15px; line-height: 1.45; }
.gd-rel a { font-weight: 650; }
.gd-rel span { color: var(--muted); font-size: 14px; margin-top: 2px; }
.gd-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.gd-pn a { display: flex; flex-direction: column; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-weight: 600; font-size: 15px; background: var(--surface); }
.gd-pn a:hover { border-color: var(--iris); text-decoration: none; }
.gd-pn span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.gd-pn-next { text-align: right; grid-column: 2; }

/* small block on teardown pages */
.gd-tdl { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.gd-tdl ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.gd-tdl li { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 15px; }
.gd-tdl a { font-weight: 600; }
.gd-tdl span { font-size: 13px; color: var(--muted); }

@media (max-width: 1100px) {
  .gd-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .gd-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; gap: 22px; padding-top: 22px; }
  .gd-article { max-width: none; }
  .gd-side { position: static; max-height: none; overflow: visible; }
  .gd-toc { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 13px 16px; }
  .gd-toc summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text); font-size: 13px; }
  .gd-toc summary { padding: 4px 0; }
  .gd-toc summary::after { display: block; }
  .gd-toc summary:focus-visible { outline: 3px solid var(--iris); outline-offset: 4px; border-radius: 6px; }
  .gd-side-card { display: none; }
  .gd-quick { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .gd-head { padding: 24px 0 22px; }
  .gd-dek { font-size: 17px; }
  .gd-article { font-size: 16.5px; line-height: 1.68; }
  .gd-prose h2, .gd-faq > h2 { font-size: 23px; }
  .gd-takeaways { padding: 18px 18px 14px; border-radius: 16px; }
  .gd-crumbs span[aria-current] { max-width: 22ch; }
  .gd-letter { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gd-letter-h { font-size: 32px; }
  .gd-def-text { font-size: 19px; }
  .gd-table table { font-size: 14px; }
  .gd-template { padding: 12px 12px 14px; }
  .gd-template textarea { padding: 10px 12px; font-size: 15px; }
  .gd-copy { top: 12px; right: 12px; }
  .gd-cta-form .btn { flex: 1 1 100%; }
  .gd-cta-wrap { margin-bottom: 48px; }
  .gd-pn { grid-template-columns: minmax(0, 1fr); }
  .gd-pn-next { grid-column: auto; }
  .gd-cards-4 { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .gd-side, .gd-cta-wrap, .gd-more, .gd-copy { display: none; }
  .gd-layout { display: block; }
  .gd-article { max-width: none; }
}

/* ---- src/modules/insights/style.css ---- */
/* insights: health score, setup checklist, competitor board. Tokens only, so dark mode follows the theme. */
:root {
  --ins-good: var(--pos); --ins-ok: var(--amber); --ins-bad: var(--neg);
  --ins-good-t: color-mix(in srgb, var(--pos) 62%, var(--text));
  --ins-ok-t: color-mix(in srgb, var(--amber) 50%, var(--text));
  --ins-bad-t: color-mix(in srgb, var(--neg) 72%, var(--text));
  --ins-tint: color-mix(in srgb, var(--iris) 7%, var(--surface));
}
.ins-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* AA contrast inside insights blocks: links in running text are underlined, solid buttons use the darker iris. */
:is(.ins-top, .ins-snap, .ins-page, .ins-settings, .ins-unsub) :is(p, small, li, td) a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
:is(.ins-top, .ins-snap, .ins-page, .ins-settings, .ins-unsub) .btn:not(.btn-ghost):not(.btn-danger) { background: color-mix(in srgb, var(--iris) 84%, #000); color: #fff; }
:is(.ins-top, .ins-snap, .ins-page, .ins-settings, .ins-unsub) .btn:not(.btn-ghost):not(.btn-danger):hover { background: color-mix(in srgb, var(--iris) 72%, #000); }
.ins-t-good { color: var(--ins-good-t); } .ins-t-ok { color: var(--ins-ok-t); } .ins-t-bad { color: var(--ins-bad-t); }
.ins-bar-good { background: var(--ins-good); } .ins-bar-ok { background: var(--ins-ok); } .ins-bar-bad { background: var(--ins-bad); } .ins-bar-none { background: var(--neu); }

/* overview top: score card + checklist */
.ins-top { display: grid; gap: 16px; margin-bottom: 16px; align-items: start; }
.ins-top-2 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.ins-top > .card { margin-bottom: 0; }
.ins-kicker { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.ins-score { position: relative; overflow: hidden; }
.ins-score::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad); opacity: .9; }
.ins-score-empty p { margin: 6px 0 0; }
.ins-score-empty .ins-span { grid-column: 2 / -1; }
.ins-none .ins-ring-num { color: var(--muted); }
.ins-score-head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(140px, 1.15fr); gap: 20px; align-items: center; }
.ins-ring { position: relative; width: 112px; height: 112px; flex: none; }
.ins-ring svg { width: 100%; height: 100%; display: block; }
.ins-ring circle { fill: none; stroke-width: 11; }
.ins-ring-track { stroke: var(--line); }
.ins-ring-val { stroke: currentColor; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dasharray .6s ease; }
.ins-good .ins-ring, .ins-good .ins-spark { color: var(--ins-good); }
.ins-ok .ins-ring, .ins-ok .ins-spark { color: var(--ins-ok); }
.ins-bad .ins-ring, .ins-bad .ins-spark { color: var(--ins-bad); }
.ins-ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 38px; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.ins-label { display: block; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ins-good .ins-label { color: var(--ins-good-t); } .ins-ok .ins-label { color: var(--ins-ok-t); } .ins-bad .ins-label { color: var(--ins-bad-t); }
.ins-deltas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ins-delta { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.ins-d-up { color: var(--ins-good-t); background: color-mix(in srgb, var(--pos) 12%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 30%, var(--surface)); }
.ins-d-down { color: var(--ins-bad-t); background: color-mix(in srgb, var(--neg) 10%, var(--surface)); border-color: color-mix(in srgb, var(--neg) 28%, var(--surface)); }
.ins-trend { margin: 0; min-width: 0; }
.ins-spark { display: block; width: 100%; height: 64px; overflow: visible; }
.ins-trend figcaption { text-align: right; margin-top: 2px; }
.ins-moved-h { font-size: 14px; margin: 20px 0 6px; }
.ins-moves { list-style: none; margin: 0; padding: 0; }
.ins-moves li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.ins-moves li:first-child { border-top: 0; }
.ins-arrow { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; transform: translateY(-1px); background: var(--paper); color: var(--muted); }
.ins-m-up .ins-arrow { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); color: var(--ins-good-t); }
.ins-m-down .ins-arrow { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); color: var(--ins-bad-t); }
.ins-moves a { font-weight: 600; white-space: nowrap; }
.ins-how { border: 0; padding: 10px 0 0; margin-top: 6px; border-top: 1px solid var(--line); }
.ins-how summary { font-size: 13px; font-weight: 600; color: var(--iris-600); }
.ins-how summary:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; border-radius: 4px; }
.ins-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.ins-part { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; }
.ins-part-name { font-size: 12px; color: var(--muted); line-height: 1.3; }
.ins-part b { font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; text-align: right; }
.ins-part .bar { grid-column: 1 / -1; height: 5px; margin-top: 4px; background: var(--line); }
.ins-how p { margin: 8px 0 0; }

/* checklist */
.ins-check-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ins-check-head h2 { margin: 0; }
.ins-hide { color: var(--muted); padding: 4px 6px; border-radius: 6px; }
.ins-hide:hover, .ins-hide:focus-visible { color: var(--text); }
.ins-check > p { margin: 4px 0 10px; }
.ins-progress { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ins-progress i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .4s ease; }
.ins-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.ins-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ins-step:first-child { border-top: 0; }
.ins-tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 2px solid var(--line); color: var(--muted); background: var(--surface); }
.ins-step.is-done .ins-tick { border-color: transparent; background: var(--pos); color: #fff; }
.ins-step-body strong { font-size: 14px; }
.ins-step.is-done .ins-step-body strong { color: var(--muted); font-weight: 600; }
.ins-step-text { display: block; margin-top: 1px; }
.ins-step-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.ins-step-cta .btn { white-space: nowrap; }

/* overview bottom: competitor snapshot */
.ins-snap h2 { margin: 0; }
.ins-snap-empty { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.ins-snap-empty p { margin: 0; flex: 1 1 320px; }
.ins-snap-list { list-style: none; padding: 0; margin: 10px 0 0; }
.ins-snap-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 76px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.ins-snap-list li:first-child { border-top: 0; }
.ins-snap-you { background: var(--ins-tint); margin: 0 -10px; padding: 9px 10px !important; border-radius: 12px; border-top: 0 !important; }
.ins-snap-name { min-width: 0; display: flex; flex-direction: column; }
.ins-snap-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-snap-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-pill { min-width: 40px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 15px; padding: 3px 8px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.ins-pill.ins-good { color: var(--ins-good-t); background: color-mix(in srgb, var(--pos) 12%, var(--surface)); border-color: transparent; }
.ins-pill.ins-ok { color: var(--ins-ok-t); background: color-mix(in srgb, var(--amber) 16%, var(--surface)); border-color: transparent; }
.ins-pill.ins-bad { color: var(--ins-bad-t); background: color-mix(in srgb, var(--neg) 11%, var(--surface)); border-color: transparent; }
.ins-vs { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.ins-teaser { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--surface)); font-size: 14px; }
.ins-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.ins-tag-opp { color: var(--ins-ok-t); background: color-mix(in srgb, var(--amber) 20%, var(--surface)); }
.ins-tag-threat { color: var(--ins-bad-t); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); }

/* app icons and letter tiles */
.ins-icon { width: 36px; height: 36px; border-radius: 9px; flex: none; display: block; background: var(--line); }
.ins-av { width: 36px; height: 36px; border-radius: 9px; flex: none; display: inline-grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 16px; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 255) 62% 50%), hsl(calc(var(--h, 255) + 30) 58% 38%)); }
.ins-av-you { background: var(--grad); }
.ins-pick .ins-icon, .ins-pick .ins-av { width: 44px; height: 44px; border-radius: 11px; font-size: 19px; }

/* competitors page */
.ins-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ins-intro p { margin: 0; max-width: 640px; }
.ins-title { font-size: 26px; margin-bottom: 4px; }
.ins-count { font-weight: 600; margin: 4px 0 0; }
.ins-limit { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--iris) 35%, var(--line)); background: var(--ins-tint); }
.ins-limit p { margin: 4px 0 0; }
.ins-add h2 { margin-bottom: 12px; }
.ins-add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ins-add-row .ins-grow { flex: 1 1 320px; }
.ins-add-row .ins-country { flex: 0 1 200px; }
.ins-add-row input, .ins-add-row select { height: 44px; }
.ins-add-row .btn { white-space: nowrap; height: 44px; }
.ins-add > p { margin: 10px 0 0; }
.ins-pick-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.ins-sugg { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ins-pick { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.ins-pick-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ins-pick-name strong, .ins-pick-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-pick form { margin: 0; flex: none; }
.ins-pick .chip { margin: 0; flex: none; }

.ins-board h2 { margin: 0; }
.ins-board-empty { padding: 20px 0 4px; }
.ins-board-empty p { margin: 0 0 6px; }
.ins-table-wrap { margin-top: 12px; }
.ins-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ins-table th, .ins-table td { padding: 12px 10px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); }
.ins-table thead th { border-top: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 6px; padding-bottom: 8px; white-space: nowrap; }
.ins-table tbody th { font-weight: 600; }
.ins-app-cell { min-width: 150px; }
.ins-app-cell { display: table-cell; }
.ins-app-cell > * { vertical-align: middle; }
.ins-app-cell .ins-icon, .ins-app-cell .ins-av { display: inline-grid; margin-right: 10px; }
.ins-app-cell img.ins-icon { display: inline-block; }
.ins-app-cell a { color: var(--text); }
.ins-app-cell a:hover { color: var(--iris-600); }
.ins-app-cell > span:last-child { display: inline-flex; flex-direction: column; vertical-align: middle; }
.ins-you-row > * { background: var(--ins-tint); }
.ins-you-row > :first-child { border-radius: 12px 0 0 12px; }
.ins-you-row > :last-child { border-radius: 0 12px 12px 0; }
.ins-you-row + tr > * { border-top-color: transparent; }
.ins-you-row > * { border-top: 0; }
.ins-you-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--iris-600); }
.ins-sat { display: inline-flex; align-items: center; gap: 8px; }
.ins-sat b { font-family: var(--display); font-size: 18px; min-width: 24px; font-variant-numeric: tabular-nums; }
.ins-meter { display: inline-block; width: 54px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ins-meter i { display: block; height: 100%; border-radius: 99px; }
.ins-vs-cell { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.ins-vs-more { color: var(--ins-bad-t); } .ins-vs-less { color: var(--ins-good-t); }
.ins-star { color: var(--amber); margin-left: 1px; }
.ins-text { min-width: 140px; max-width: 220px; line-height: 1.4; }
.ins-wide { color: var(--muted); }
.ins-wide form { margin-left: 8px; }
.ins-actions { text-align: right; white-space: nowrap; }
.ins-actions form { margin: 0; }
.ins-foot { margin: 12px 0 0; }

.ins-ot { margin-bottom: 16px; }
.ins-ot > .card { margin-bottom: 0; }
.ins-ot h2 { margin: 8px 0 4px; }
.ins-ot > .card > p { margin: 0 0 8px; }
.ins-opps { border-top: 4px solid var(--amber); }
.ins-threats { border-top: 4px solid var(--rose); }
.ins-list { list-style: none; padding: 0; margin: 0; }
.ins-list li { padding: 11px 0; border-top: 1px solid var(--line); }
.ins-li-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.ins-app { font-size: 12px; font-weight: 700; color: var(--iris-600); background: var(--iris-50); padding: 2px 8px; border-radius: 999px; }
.ins-list q { display: block; color: var(--muted); font-size: 13px; font-style: italic; margin-top: 4px; }
.ins-flag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: auto; }
.ins-flag-only { color: var(--ins-bad-t); background: color-mix(in srgb, var(--neg) 10%, var(--surface)); }
.ins-flag-shared { color: var(--muted); background: var(--paper); border: 1px solid var(--line); }

.ins-alert-list { list-style: none; padding: 0; margin: 0; }
.ins-alert-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.ins-alert-list li:first-child { border-top: 0; }
.ins-alert-list .ins-tag { flex: none; margin-top: 2px; min-width: 118px; text-align: center; }
.ins-alert-body { display: flex; flex-direction: column; min-width: 0; }
.ins-alert-note { margin: 10px 0 0; }

.ins-unsub { margin-top: 24px; }
.ins-unsub h1 { font-size: 26px; }
.ins-unsub form { margin-top: 12px; }

@media (max-width: 960px) {
  .ins-table thead { display: none; }
  .ins-table, .ins-table tbody { display: block; }
  .ins-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 14px 0; border-top: 1px solid var(--line); }
  .ins-table tr.ins-you-row { padding: 14px 12px; border-radius: 14px; border-top: 0; background: var(--ins-tint); }
  .ins-table tr.ins-you-row > * { background: none; }
  .ins-table th, .ins-table td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; }
  .ins-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
  .ins-table .ins-app-cell, .ins-table .ins-text, .ins-table .ins-wide { grid-column: 1 / -1; }
  .ins-table .ins-actions { text-align: right; align-self: end; }
  .ins-table td:empty { display: none; }
  .ins-wide form { margin: 8px 0 0; display: block; }
}
@media (max-width: 880px) {
  .ins-top-2 { grid-template-columns: 1fr; }
  .ins-score-head { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .ins-trend { grid-column: 1 / -1; }
  .ins-ring { width: 96px; height: 96px; }
  .ins-ring-num { font-size: 32px; }
  .ins-label { font-size: 22px; }
  .ins-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-snap-list li { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .ins-snap-list .ins-vs { grid-column: 2 / -1; text-align: left; margin-top: -6px; }
  .ins-snap-list .ins-vs:empty { display: none; }
  .ins-step { grid-template-columns: 26px minmax(0, 1fr); }
  .ins-step-cta { grid-column: 2; flex-direction: row; align-items: center; gap: 12px; justify-content: flex-start; }
  .ins-add-row .ins-country { flex: 1 1 140px; }
  .ins-add-row .btn { flex: 1 1 120px; }
  .ins-alert-list li { flex-direction: column; gap: 4px; }
  .ins-alert-list .ins-tag { min-width: 0; }
}
@media (max-width: 560px) {
  .ins-score-empty .ins-ring { width: 64px; height: 64px; align-self: start; }
  .ins-score-empty .ins-ring-num { font-size: 24px; }
  .ins-score-empty .ins-score-meta p:not(.small) { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ins-ring-val, .ins-progress i { transition: none; }
}
@media print {
  .ins-check, .ins-add, .ins-actions, .ins-how { display: none; }
}

/* teardown page: "Track as competitor" (sits on the dark hero) */
.ins-track { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.ins-track-select { width: auto; max-width: 180px; padding: 6px 10px; font-size: 13px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.15); }
.ins-track-select option { color: #14122b; background: #fff; }

/* ---- src/modules/seo/style.css ---- */
/* Module seo: teardown quick answers + key stats, /about, /methodology. Colors come from design tokens only. */

/* ---- teardown page: quick answers, key stats, how we made this */
.seo-td { margin-top: 8px; }
.seo-td-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.seo-side > .card:last-child { margin-bottom: 0; }
.seo-qa h2, .seo-stats h2, .seo-how h2 { font-size: 18px; margin-bottom: 6px; }
.seo-q { padding: 14px 0 2px; border-top: 1px solid var(--line); }
.seo-qa h2 + .seo-q { border-top: 0; padding-top: 8px; }
.seo-q h3 { font-size: 15px; margin: 0 0 4px; color: var(--text); }
.seo-q p { margin: 0 0 12px; color: var(--muted); line-height: 1.6; }
.seo-q q { color: var(--text); font-weight: 600; font-style: normal; }

.seo-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.seo-stat { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.seo-stat dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.seo-stat dd { margin: 0; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.seo-stat dd small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 1px; }
.seo-stat .seo-dd-text { font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.seo-wide { grid-column: 1 / -1; }

.seo-how p { color: var(--muted); font-size: 14px; margin: 6px 0 10px; }
.seo-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seo-links span { color: var(--muted); }
.seo-cite { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.seo-cite label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.seo-cite-row { display: flex; gap: 6px; }
.seo-cite-row input { flex: 1; min-width: 0; font-size: 13px; padding: 7px 10px; background: var(--paper); color: var(--text); border: 1px solid var(--line); border-radius: 10px; }
.seo-cite-row .btn { flex: none; }

/* ---- /about and /methodology */
.seo-page .narrow { margin-left: auto; margin-right: auto; }
.seo-prose { font-size: 16px; line-height: 1.7; }
.seo-prose h2 { font-size: 24px; margin: 36px 0 12px; }
.seo-prose > h2:first-child, .seo-sec:first-child h2 { margin-top: 0; }
.seo-prose p { margin: 0 0 14px; }
.seo-prose .ticks { margin: 8px 0 18px; }
.seo-h-gap { margin: 48px 0 18px; font-size: 24px; }
.seo-aud { margin-bottom: 48px; }
.seo-aud .card { margin-bottom: 0; }
.seo-aud p { margin: 0; color: var(--muted); }

.seo-facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto 40px; }
.seo-fact { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.seo-fact strong { font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--iris-600); }
.seo-fact span { font-size: 14px; color: var(--muted); }

.seo-method { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1000px; margin: 0 auto; }
.seo-toc { position: sticky; top: 88px; font-size: 14px; }
.seo-toc-h { font-family: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.seo-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.seo-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); }
.seo-toc a:hover, .seo-toc a:focus-visible { color: var(--iris-600); border-left-color: var(--iris); text-decoration: none; }
.seo-sec { scroll-margin-top: 84px; padding-bottom: 8px; }
.seo-sec + .seo-sec { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 16px; }
.seo-sec h2 { margin-top: 0; }
.seo-terms { margin: 4px 0 16px; display: grid; gap: 10px; }
.seo-terms > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.seo-terms dt { font-weight: 700; color: var(--text); font-size: 15px; }
.seo-terms dd { margin: 2px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.seo-cta { max-width: 780px; margin: 48px auto 0; text-align: center; padding: 28px; }
.seo-cta h2 { font-size: 24px; }
.seo-cta p { color: var(--muted); margin: 0 0 4px; }
.seo-cta .td-form { margin-top: 16px; }
.seo-cta .btn:not(.btn-ghost) { background: var(--btn-bg); color: var(--btn-text); } /* solid buttons use --btn-bg: white text passes AA in both themes */
.seo-cta .btn:not(.btn-ghost):hover { background: var(--btn-bg-hover); }

.seo-page a:focus-visible, .seo-td a:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 880px) {
  .seo-td-grid { grid-template-columns: 1fr; }
  .seo-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; }
  .seo-fact { padding: 14px; }
  .seo-fact strong { font-size: 28px; }
  .seo-method { grid-template-columns: 1fr; gap: 20px; }
  .seo-toc { position: static; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
  .seo-prose { font-size: 15px; }
  .seo-prose h2 { font-size: 21px; }
  .seo-h-gap { margin-top: 36px; font-size: 21px; }
  .seo-aud { margin-bottom: 36px; gap: 12px; }
  .seo-cta { padding: 22px 18px; }
}
@media print {
  .seo-cite, .seo-toc { display: none; }
}

/* ---- src/modules/tools/style.css ---- */
/* Module "tools": free tools hub, calculators, reply generator, feedback analyzer, /ideas.
   Colors come from the design tokens only, so dark mode works when the tokens change.
   Hard-coded light colors appear only on the always-dark hero and on brand-filled buttons. */

.tl-ico { width: 24px; height: 24px; flex: none; }
.tl-ico-sm { width: 16px; height: 16px; vertical-align: -3px; }
.tl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html:not(.tl-js) .tl-js-only { display: none !important; }

/* hero */
.tl-hero { padding: 36px 0 104px; border-bottom: 0; }
/* The cards overlap the hero's bottom edge: fade the purple glow out before that edge, so no line shows behind them. */
.tl-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--ink) 85%); }
.tl-hero-inner { position: relative; }
.tl-hero h1 { font-size: 48px; margin: 16px 0 12px; }
.tl-hero .lead-dark { margin: 0; max-width: 680px; font-size: 18px; }
.tl-hero-center { text-align: center; }
.tl-hero-center .lead-dark { margin: 0 auto; }
.tl-hero-center h1 { margin-left: auto; margin-right: auto; }
.tl-hero-center .tl-crumbs ol, .tl-hero-center .tl-share { justify-content: center; }
.tl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: 13px; color: #a9a3d6; }
.tl-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .55; }
.tl-crumbs a { color: #d9d2ff; }
.tl-crumbs a:focus-visible, .tl-hero a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.tl-share { margin-top: 22px; }
.tl-share .btn-reddit { background: #cc3700; } /* #ff4500 fails AA contrast with white text */

/* the tool card, pulled up over the hero */
.tl-stage { position: relative; z-index: 1; margin-top: -72px; }
.tl-tool { padding: 28px; margin-bottom: 0; box-shadow: 0 1px 2px rgba(20, 18, 43, .05), 0 30px 60px rgba(20, 18, 43, .14); }
.tl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
.tl-form > * + * { margin-top: 14px; }
.tl-form-h { font-size: 18px; margin: 0; }
.tl-form-h label { font: inherit; }
.tl-form-top { align-items: baseline; }
.tl-form textarea { resize: vertical; line-height: 1.5; }
.tl-help { font-size: 13px; color: var(--muted); margin-bottom: 0; }
label + .tl-help { margin-top: 6px; }
.tl-opt { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 4px; }
.tl-fs { border: 0; padding: 0; margin-inline: 0; margin-bottom: 0; min-width: 0; }
.tl-row2 .tl-fs { margin-top: 0; }
.tl-fs legend { font-weight: 500; font-size: 14px; padding: 0; margin-bottom: 8px; }
.tl-row2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; }
.tl-grid-tight { gap: 14px; }

/* segmented radio buttons */
.tl-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-seg label { position: relative; font-weight: 500; }
.tl-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.tl-seg label > span { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 14px; transition: border-color .15s, background .15s; }
.tl-seg label:hover > span { border-color: var(--iris); }
.tl-seg input:checked + span { background: var(--iris-50); border-color: var(--iris); box-shadow: inset 0 0 0 1px var(--iris); color: var(--text); font-weight: 700; }
.tl-seg input:focus-visible + span { outline: 2px solid var(--iris); outline-offset: 2px; }
.tl-seg-stars [aria-hidden] { color: var(--amber); }

/* result panel (calculators) */
.tl-result { background: var(--iris-50); border: 1px solid var(--line); border-radius: 14px; padding: 22px; min-height: 100%; scroll-margin-top: 80px; }
.tl-result > :last-child { margin-bottom: 0; }
.tl-res-tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--iris-600); margin: 0 0 10px; }
.tl-big { display: flex; flex-direction: column; margin: 0 0 10px; }
.tl-big strong { font-family: var(--display); font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--iris-600); }
.tl-big span { font-weight: 600; font-size: 16px; margin-top: 8px; }
.tl-big-ok strong { font-size: 40px; color: var(--text); }
.tl-cost { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.tl-cost h3 { font-size: 15px; margin: 0 0 4px; }
.tl-cost p { margin: 0; }
.tl-mini { margin: 18px 0 0; background: var(--surface); }
.tl-mini caption { caption-side: top; text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 0 8px; }
.tl-mini td:last-child, .tl-mini th:last-child { text-align: right; }
.tl-ok { color: var(--text); font-weight: 600; }
.tl-ok::before { content: "✓ "; color: var(--pos); }
.tl-err { border-left: 3px solid var(--neg); background: var(--surface); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 0 0 8px; }
.tl-err p { margin: 0; }
.tl-err p + p { margin-top: 6px; }
.tl-formula { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; overflow-wrap: anywhere; }
.tl-next { font-weight: 500; }

/* NPS */
.tl-nps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tl-band { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); white-space: nowrap; }
.tl-band::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--neu); }
.tl-band-below::before { background: var(--neg); } .tl-band-low::before { background: var(--amber); }
.tl-band-mid::before { background: var(--iris); } .tl-band-high::before { background: var(--pos); }
.tl-gauge { position: relative; height: 10px; border-radius: 99px; margin: 20px 0 6px; background: linear-gradient(90deg, var(--neg) 0 50%, var(--amber) 50% 65%, var(--iris) 65% 85%, var(--pos) 85% 100%); }
.tl-gauge i { position: absolute; top: -6px; width: 6px; height: 22px; border-radius: 3px; background: var(--text); transform: translateX(-50%); box-shadow: 0 0 0 2px var(--surface); transition: left .25s ease; }
.tl-gauge-scale { position: relative; height: 18px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.tl-gauge-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.tl-gauge-scale span:nth-child(1) { left: 0; transform: none; }
.tl-gauge-scale span:nth-child(2) { left: 50%; }
.tl-gauge-scale span:nth-child(3) { left: 65%; }
.tl-gauge-scale span:nth-child(4) { left: 85%; }
.tl-gauge-scale span:nth-child(5) { right: 0; transform: none; }
.tl-counts { display: grid; gap: 12px; }
.tl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.tl-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.tl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.tl-legend b { margin-left: 4px; }
.tl-legend-stack { flex-direction: column; margin: 14px 0; }

/* results under the form (reply generator, feedback analyzer) */
.tl-out-wrap { scroll-margin-top: 80px; }
.tl-out-wrap[aria-busy="true"] { opacity: .55; transition: opacity .2s; }
.tl-out { margin: 20px 0 0; padding: 26px; }
.tl-out h2 { margin: 0; }
.tl-out h2:focus { outline: none; }
.tl-src { text-transform: none; letter-spacing: 0; font-size: 12px; background: var(--iris-50); color: var(--iris-600); }
.tl-replies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.tl-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.tl-reply label, .tl-reply textarea { grid-column: 1 / -1; }
.tl-reply textarea { margin: 0; font-size: 14px; line-height: 1.55; resize: vertical; min-height: 240px; }
.tl-quota { margin: 16px 0 0; }
.tl-inline-cta { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--iris-50); border: 1px solid var(--line); }
.tl-inline-cta p { margin: 0; flex: 1 1 320px; font-size: 14px; }
.tl-summary { font-size: 17px; margin: 10px 0 0; }
.tl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.tl-kpi { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tl-kpi span { display: block; font-size: 12px; color: var(--muted); }
.tl-kpi strong { font-family: var(--display); font-size: 26px; }
.tl-kpi-pos { border-top: 3px solid var(--pos); } .tl-kpi-neg { border-top: 3px solid var(--neg); }
.tl-out-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tl-panel { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface); min-width: 0; }
.tl-panel h3 { margin: 0 0 10px; }
.tl-mt { margin-top: 22px !important; }
.tl-sentbar { height: 16px; }
.tl-bars { list-style: none; padding: 0; margin: 0; }
.tl-bars li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: 14px; padding: 5px 0; }
.tl-bars b { text-align: right; }
.tl-bar-name { overflow-wrap: anywhere; }
.tl-bar-fill { background: var(--grad); }
.tl-urgent { margin: 0; padding-left: 20px; }
.tl-urgent li { margin-bottom: 14px; font-size: 14px; }
.tl-urgent q { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.tl-words { margin: 0; }
.tl-words b { margin-left: 3px; }

/* busy button */
.btn.tl-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .8s linear infinite; }

/* below the tool: how it works, FAQ, related guides, CTA */
.tl-after { padding-top: 56px; padding-bottom: 72px; }
.tl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.tl-block + .tl-block { margin-top: 44px; }
.tl-block h2 { font-size: 26px; }
.tl-steps { counter-reset: tl-step; list-style: none; padding: 0; margin: 0; }
.tl-steps li { counter-increment: tl-step; position: relative; padding: 4px 0 14px 46px; }
.tl-steps li::before { content: counter(tl-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--iris-50); color: var(--iris-600); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.tl-example { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--iris); border-radius: 14px; padding: 18px 22px; }
.tl-example h3 { margin: 0 0 6px; }
.tl-example p { margin: 10px 0; }
.tl-example blockquote { font-style: normal; }
.tl-pre { white-space: pre-line; }
.tl-quote-list { margin: 8px 0; padding-left: 20px; font-size: 14px; }
.tl-faq details:first-of-type { border-top: 1px solid var(--line); }
.tl-faq details p { margin: 10px 0 0; color: var(--text); }
.tl-col-side { position: sticky; top: 84px; }
.tl-side-card h2 { font-size: 16px; }
.tl-links { list-style: none; padding: 0; margin: 0 0 10px; }
.tl-links li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tl-links li:last-child { border-bottom: 0; }
.tl-links-tools a { display: flex; gap: 10px; align-items: center; }
.tl-links-tools .tl-ico { color: var(--iris-600); }
.tl-cta { margin-top: 56px; }
.tl-hub-cta { padding-top: 40px; }
.tl-hub-cta .tl-cta { margin-top: 0; }

/* hub */
.tl-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tl-hub-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; margin: 0; }
.tl-hub-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--grad); color: #fff; margin-bottom: 10px; box-shadow: 0 8px 20px rgba(124, 92, 255, .3); }
.tl-hub-card h2 { font-size: 19px; margin: 0; }
.tl-hub-card p { color: var(--muted); margin: 0 0 10px; flex: 1; }
.tl-go { display: inline-flex; align-items: center; gap: 6px; color: var(--iris-600); font-weight: 600; }
.tl-hub-why { padding-top: 56px; }
.tl-hub-why h2 { font-size: 18px; }

/* ideas */
.tl-ideas { position: relative; z-index: 1; margin-top: -56px; }
.tl-genres { display: flex; flex-wrap: wrap; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.tl-genres a { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 500; }
.tl-genres a:hover { text-decoration: none; border-color: var(--iris); }
.tl-genres a span { color: var(--muted); font-size: 12px; margin-left: 3px; }
.tl-genres a[aria-current] { background: var(--iris-50); border-color: var(--iris); box-shadow: inset 0 0 0 1px var(--iris); font-weight: 700; }
.tl-genre-head { margin-top: 28px; }
.tl-genre-head h2 { font-size: 22px; margin: 0; }
.tl-genre-head p { margin: 0; }
.tl-top { margin: 24px 0 0; }
.tl-top-list { margin: 0; padding-left: 22px; columns: 2; column-gap: 40px; }
.tl-top-list li { break-inside: avoid; padding: 6px 0; }
.tl-top-list .small { display: block; }
.tl-genre { margin-top: 44px; }
.tl-genre h2 { font-size: 24px; margin: 0; }
.tl-idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 16px; }
.tl-idea { display: flex; flex-direction: column; margin: 0; padding: 18px; }
.tl-idea-head { display: flex; gap: 12px; align-items: center; }
.tl-idea-head img, .tl-idea-ph { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.tl-idea-ph { display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; }
.tl-idea-head h3 { margin: 0; font-size: 16px; }
.tl-idea-head h3 a { color: var(--text); }
.tl-idea-head p { margin: 2px 0 0; }
.tl-idea-body { flex: 1; margin-top: 12px; }
.tl-idea h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 4px; }
.tl-opp { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--paper); border-left: 3px solid var(--amber); font-size: 14px; }
.tl-tag { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.tl-req, .tl-pain { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.tl-req li, .tl-pain li { position: relative; padding: 3px 0 3px 18px; }
.tl-req li::before { content: "+"; position: absolute; left: 0; color: var(--iris-600); font-weight: 700; }
.tl-pain li::before { content: "–"; position: absolute; left: 0; color: var(--neg); font-weight: 700; }
.tl-idea-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.tl-add { margin: 44px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: center; }
.tl-add h2 { margin-bottom: 4px; }
.tl-add p { margin: 0; }
.tl-add .td-form { margin: 0; max-width: none; }

@media (max-width: 1100px) {
  .tl-replies { grid-template-columns: 1fr; }
  .tl-reply textarea { min-height: 170px; }
}
@media (max-width: 880px) {
  .tl-hero { padding: 24px 0 92px; }
  .tl-hero h1 { font-size: 34px; }
  .tl-hero .lead-dark { font-size: 16px; }
  .tl-tool, .tl-out { padding: 18px; }
  .tl-split, .tl-cols, .tl-out-grid, .tl-row2, .tl-add, .tl-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-split { gap: 22px; }
  .tl-col-side { position: static; }
  .tl-top-list { columns: 1; }
  .tl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-big strong { font-size: 46px; }
  .tl-block h2 { font-size: 22px; }
  .tl-after { padding-top: 40px; }
  .tl-genres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding: 10px; }
  .tl-genres a { white-space: nowrap; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-gauge i, .btn.tl-busy::before { transition: none; animation: none; }
}
@media print {
  .tl-hero .tl-share, .tl-form, .tl-col-side, .tl-cta, .tl-inline-cta { display: none; }
}