/* ResearchMaxer look: the Leesearch design (bright, rounded, chunky 3D buttons, Nunito) and its colors.
   The wordmark keeps the ReadyMaxer shape: "Research" + "Maxer" in a rounded rectangle. */
@font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(/fonts/nunito-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(/fonts/nunito-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: italic; font-display: swap; font-weight: 200 1000; src: url(/fonts/nunito-latin-ext-wght-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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: 'Nunito'; font-style: italic; font-display: swap; font-weight: 200 1000; src: url(/fonts/nunito-latin-wght-italic.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* Leesearch tokens */
  --bg: #ffffff;
  --sand: #f7f7f7;          /* Leesearch surface-2 */
  --card: #ffffff;
  --ink: #3c3c3c;
  --ink-soft: #4b4b4b;      /* Leesearch ink-2 */
  --ink-faint: #777777;     /* Leesearch muted */
  --hairline: #e5e5e5;      /* Leesearch line: borders are 2px */
  --hairline-2: #e5e5e5;
  --green: #58cc02;
  --green-d: #58a700;
  --blue: #1cb0f6;
  --blue-d: #1899d6;
  --blue-wash: #e8f7fe;     /* blue at 10% on white, the "selected" fill */
  --red: #ff4b4b;
  --red-d: #ea2b2b;
  --yellow: #ffc800;
  --yellow-deep: #e5a500;
  --yellow-wash: #fff4b8;   /* Leesearch highlight */
  --ok: #58cc02;
  --ok-text: #3f9a00;
  --ok-wash: #e5f8d6;
  --warn-text: #8a5a00;
  --warn-wash: #fff4d6;
  --warn-line: #f1cf7a;
  --bad: #ff4b4b;
  --bad-text: #ea2b2b;
  --bad-wash: #ffe9e9;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: none;
  --shadow-md: none;
  --font: 'Nunito', system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Nunito', system-ui, 'Segoe UI', sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 16px/1.5 var(--font); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.4px; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Wordmark: ReadyMaxer shape, Leesearch green */
.logo { display: inline-flex; align-items: center; gap: 3px; font-weight: 900; font-size: 20px; letter-spacing: -0.3px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.logo b { background: var(--green); color: #fff; padding: 1px 8px 2px; border-radius: 9px; border-bottom: 3px solid var(--green-d); font-weight: 900; }

/* Chunky 3D buttons. The raised edge is a shadow, so pressing does not move the page. */
.btn { --edge: var(--hairline); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--hairline); box-shadow: 0 2px 0 var(--edge); background: var(--card); color: var(--ink-faint); border-radius: var(--r-md); padding: 8px 14px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--sand); color: var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: 0 2px 0 var(--edge); }
.btn.primary { --edge: var(--green-d); background: var(--green); border-color: var(--green-d); color: #fff; }
.btn.primary:hover { background: var(--green); color: #fff; filter: brightness(1.04); }
.btn.small { padding: 4px 10px; font-size: 12px; border-radius: 11px; }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-d); }
.hl { background: linear-gradient(transparent 60%, var(--yellow) 60%); padding: 0 2px; }
mark { background: var(--yellow-wash); color: inherit; border-bottom: 3px solid var(--yellow); padding: 1px 3px; border-radius: 3px; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.card { background: var(--card); border: 2px solid var(--hairline); border-radius: var(--r-lg); }
input[type="text"], input[type="email"], input[type="number"], input[type="search"], select, textarea { border: 2px solid var(--hairline); border-radius: var(--r-sm); padding: 8px 12px; background: var(--sand); width: 100%; font-weight: 600; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.chip.ok { background: var(--ok-wash); color: var(--ok-text); }
.chip.warn { background: var(--warn-wash); color: var(--warn-text); }
.chip.bad { background: var(--bad-wash); color: var(--bad-text); }
.chip.plain { background: var(--sand); color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--hairline); }
/* The support rating next to a verdict (app and home page example): a short bar and the percent. */
.score { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; }
.score .bar { width: 46px; height: 7px; border-radius: 99px; background: var(--hairline); overflow: hidden; flex: none; }
.score .bar i { display: block; height: 100%; border-radius: 99px; }
.score.hi { color: var(--ok-text); } .score.hi .bar i { background: var(--ok); }
.score.mid { color: var(--warn-text); } .score.mid .bar i { background: #ffb020; }
.score.lo { color: var(--bad-text); } .score.lo .bar i { background: var(--bad); }
/* What to do about a citation the source does not fully back. */
.todo { font-size: 14px; font-weight: 600; background: var(--warn-wash); border-left: 4px solid var(--warn-line); border-radius: 8px; padding: 8px 11px; margin: 0; }
.todo b { font-weight: 900; }

/* Plan cards and the monthly/annual switch: used by the pricing page and by Plan and billing in the app. */
.toggle { display: inline-flex; background: var(--sand); border: 2px solid var(--hairline); border-radius: 14px; padding: 3px; margin-top: 18px; }
.toggle button { border: 0; background: none; padding: 6px 14px; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--ink-faint); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--card); color: var(--blue-d); box-shadow: 0 0 0 2px var(--blue) inset; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; align-items: stretch; }
.plan { padding: 22px; display: flex; flex-direction: column; gap: 10px; position: relative; border-bottom-width: 6px; border-radius: var(--r-xl); }
.plan.pop { border-color: var(--blue); }
.plan .tag { position: absolute; top: -13px; left: 20px; background: var(--blue); color: #fff; border-bottom: 3px solid var(--blue-d); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 10px; border-radius: 10px; }
.plan h3 { font-size: 22px; }
.plan .price { font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 16px; font-weight: 700; color: var(--ink-faint); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; flex: 1; font-weight: 600; }
.plan li { padding-left: 24px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; color: var(--green-d); }
.plan li.soon { color: var(--ink-faint); }
.plan li.soon::before { content: "·"; color: var(--ink-faint); }
.plan .btn { margin-top: 10px; padding: 11px 14px; font-size: 14px; }