/* Searchpanel brand CSS v1.0 · https://brandidentity.searchpanelapp.com */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap");
:root {
  --sp-cobalt: #3355ff; /* The brand colour. Logo mark, primary buttons, links, eyebrows, serif emphasis words, score bars. */
  --sp-ink: #0e0f13; /* Headlines, body copy on light, dark buttons ("Run a free audit"), wordmark. */
  --sp-paper: #fafaf8; /* The page. A warm off-white, never pure grey. Every layout starts here. */
  --sp-white: #ffffff; /* Cards, answer panels, inputs, ghost buttons. Lifts content off Paper. */
  --sp-periwinkle: #5c77ff; /* Gradient start, score-bar fills, list bullets and the mark on dark backgrounds. */
  --sp-mist: #eef1ff; /* Soft accent fills: icon tiles, "New shelf" pill, highlighted rows. */
  --sp-pressed: #2443f0; /* Hover / pressed state of the Cobalt button only. */
  --sp-deep-cobalt: #1e2fb8; /* End stop of the Cobalt gradient (case-study panel, app icon). */
  --sp-haze: #8fa2ff; /* Eyebrows and numerals on Night panels. */
  --sp-night: #0d0f17; /* The one dark surface: platform section and closing CTA. Use at most once or twice per page. */
  --sp-graphite: #3b3f4a; /* Lead paragraphs, secondary text, nav links. */
  --sp-slate: #6b7080; /* Captions, meta, "by XENA" endorsement, ticks. */
  --sp-hairline: #e6e7ec; /* Every border and divider. */
  --sp-fog: #f4f5f8; /* Prompt bubbles and quiet fills. */
  --sp-recommended: #0f9f6e; /* Positive states: "Recommended", ticks, score up. Pair with #e7f7ef fill. */
  --sp-watch: #e08a00; /* Warnings and partial visibility. Never for text on white below 18 px. */
  --sp-not-found: #e5484d; /* Absent from the answer, score down. Pair with #fdecec fill. */
  --sp-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sp-font-serif: "Instrument Serif", Georgia, serif;
  --sp-radius: 18px; --sp-radius-btn: 12px; --sp-radius-pill: 99px;
  --sp-shadow: 0 30px 60px -30px rgba(20,24,60,.28), 0 2px 6px rgba(20,24,60,.05);
  --sp-shadow-btn: 0 6px 20px -6px rgba(51,85,255,.6);
  --sp-gradient: linear-gradient(150deg, #3355ff, #1e2fb8);
  --sp-max: 1180px;
}
body { background: var(--sp-paper); color: var(--sp-ink); font: 400 17px/1.6 var(--sp-font-sans); -webkit-font-smoothing: antialiased; }
h1 { font-weight: 800; letter-spacing: -.04em; line-height: 1.04; font-size: clamp(2.7rem, 6vw, 4.6rem); }
h2 { font-weight: 700; letter-spacing: -.025em; line-height: 1.08; font-size: clamp(2rem, 4.2vw, 3.2rem); }
.sp-serif { font-family: var(--sp-font-serif); font-style: italic; font-weight: 400; color: var(--sp-cobalt); letter-spacing: 0; }
.sp-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-cobalt); }
.sp-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1 var(--sp-font-sans); padding: .85rem 1.35rem; border-radius: var(--sp-radius-btn); border: 1px solid transparent; text-decoration: none; }
.sp-btn-primary { background: var(--sp-cobalt); color: #fff; box-shadow: var(--sp-shadow-btn); }
.sp-btn-primary:hover { background: var(--sp-pressed); }
.sp-btn-dark { background: var(--sp-ink); color: #fff; }
.sp-btn-ghost { background: #fff; color: var(--sp-ink); border-color: var(--sp-hairline); }
.sp-card { background: #fff; border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius); }
.sp-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--sp-hairline); border-radius: 99px; padding: 6px 14px 6px 6px; font-size: 13px; font-weight: 600; }
.sp-pill b { background: var(--sp-mist); color: var(--sp-cobalt); padding: 4px 10px; border-radius: 99px; }
.sp-tag-yes { background: #e7f7ef; color: var(--sp-recommended); }
.sp-tag-no { background: #fdecec; color: var(--sp-not-found); }