/* Tracely's site, from the Figma frame "Start" (New Tracely Website, node 34:1640):
   a cream frame with a slim sidebar of tools and pages, and one white page in
   it. Sizes, colours and spacing are the design's, so at 1440 px wide the page
   lays out as the frame does; below that it reflows (the sidebar becomes a
   drawer at 960 px and the columns stack). Inter throughout, sentence case, no
   bullet lists (owner's design rules). Finding colours mean findings only:
   red wrong, blue needs evidence, amber citation, grey still checking. */

:root {
  --ink: #141414;
  --body: #55555c;
  --faint: #8a8a90;
  --line: #eadfd2;
  --cream: #fff5ed;
  --sand: #f6efe7;
  --orange: #ff5900;
  --orange-ink: #e8461a;
  --red: #d93636;
  --blue: #2563eb;
  --amber: #ffb800;
  --grey: #9a9ba1;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Figma's "auto" line height for Inter (ascender + descender). Chrome's
     "normal" rounds each half to whole pixels, so 11 px text gets 14 px lines
     where Figma has 13.3; this keeps every line where the design puts it. */
  --lh: 1.21;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.02px; /* the browser's Inter sets a hair wider than Figma's; this keeps the design's line breaks */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.accent { color: var(--orange); }
.accent-2 { color: #ff6d22; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: var(--lh); white-space: nowrap;
  transition: background-color .15s ease, filter .15s ease;
}
.btn img { width: 16px; height: 16px; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-ink { background: #000; color: #fff; }
.btn-line { background: #fff; border: 1px solid rgba(0, 0, 0, .14); color: var(--ink); }
.btn-ghost { color: var(--ink); }
a.btn-orange:hover, button.btn-orange:hover { filter: brightness(1.06); }
button.btn-ink:hover { background: #262626; }
a.btn-line:hover, button.btn-line:hover, .btn-ghost:hover { background: rgba(20, 20, 20, .05); }

/* ── top bar ── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 24px 0 20px; background: var(--cream);
}
.topbar-left, .topbar-right { display: flex; align-items: center; }
.topbar-left { gap: 12px; }
.topbar-right { gap: 10px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 700; line-height: var(--lh); }
.brand img { width: 28px; height: 28px; }
.menu-btn { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; }
/* Signed in: the gear beside the name opens Settings (auth.js adds it) */
.top-gear { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -6px; border-radius: 10px; color: var(--ink); transition: background-color .15s ease, color .15s ease; }
.top-gear:hover { background: rgba(20, 20, 20, .05); }
.top-gear[aria-current="page"] { color: var(--orange-ink); }
/* ...and "Upgrade to Pro" beside it, soft so the solid orange stays Add to Chrome's */
.top-upgrade { background: rgba(255, 87, 34, .1); color: #c2410c; }
.top-upgrade:hover { background: rgba(255, 87, 34, .16); }
.top-upgrade[hidden] { display: none; }
.menu-btn:hover { background: rgba(20, 20, 20, .05); }

/* ── frame: sidebar and the white page ── */
.frame { display: flex; align-items: flex-start; }
.sidebar {
  position: sticky; top: 60px; z-index: 30;
  flex: 0 0 100px; width: 100px; height: calc(100vh - 60px);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 8px 12px; background: var(--cream);
  overflow-y: auto; scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.nav-item {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; padding: 7px 4px 6px; border-radius: 12px;
  color: var(--body); font-size: 11.5px; font-weight: 500; line-height: 14px; text-align: center;
  transition: background-color .15s ease;
}
.nav-item:hover { background: rgba(20, 20, 20, .05); color: var(--ink); }
.nav-item img { width: 20px; height: 20px; }
.nav-badge {
  position: absolute; top: 4px; right: 2px;
  padding: 1px 5px; border-radius: 999px; background: var(--orange);
  color: #fff; font-size: 9px; font-weight: 700; line-height: var(--lh);
}
.nav-divider { flex: none; width: 100%; padding: 6px 14px; }
.nav-divider::before { content: ""; display: block; height: 1px; background: var(--line); }
.nav-spacer { flex: 1 0 0; min-height: 12px; }
.nav-links {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; padding: 2px 0;
  color: var(--faint); font-size: 11px; font-weight: 500; line-height: 13px; white-space: nowrap; /* Figma's 11 px lines are 13 px */
}
.nav-links a:hover, .nav-links button:hover { color: var(--ink); }

.page {
  flex: 1; min-width: 0; min-height: calc(100vh - 60px);
  background: #fff;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-top-left-radius: 20px;
  box-shadow: -6px 0 6px -4px rgba(89, 46, 15, .08);
}
.wrap {
  display: flex; flex-direction: column;
  width: min(1244px, 100% - 64px); margin: 0 auto; padding: 28px 0 169px;
}

/* ── every page but the homepage (Figma frames Features to Evidence) ── */
body:not(.home) .page { border-top-left-radius: 22px; box-shadow: 0 0 12px rgba(89, 51, 20, .05); }
/* the page you are on: a white tile with an orange icon and label. Its 1 px
   border sits outside the padding, as most frames draw it, so the tile is
   2 px taller and a long label wraps sooner ("Research tips"). */
.nav-item.active {
  border: 1px solid var(--line); background: #fff; color: var(--orange-ink); font-weight: 600;
  box-shadow: 0 2px 3px rgba(77, 38, 13, .06);
}
.nav-item.active:hover { background: #fff; color: var(--orange-ink); }
.nav-item.active .nav-badge { top: 3px; right: 1px; }
.nav-links a.active { color: var(--orange-ink); font-weight: 600; }
.wrap-page {
  display: flex; flex-direction: column; gap: 24px;
  width: min(1243px, 100% - 64px); margin: 0 auto; padding: 32px 0 64px;
}

/* page header: title, line under it, buttons on the right */
.ph { display: flex; align-items: center; gap: 24px; }
.ph-title { display: flex; flex: 1 0 0; flex-direction: column; gap: 6px; min-width: 0; }
.ph h1 { font-size: 34px; font-weight: 700; line-height: var(--lh); letter-spacing: -1.19px; }
.ph-sub { color: var(--body); font-size: 15px; line-height: 1.5; }
.ph-actions { display: flex; flex: none; gap: 10px; }
.label-s { font-size: 15px; font-weight: 700; line-height: var(--lh); }

/* search, filter and view buttons */
.toolbar { display: flex; align-items: center; gap: 12px; }
.search {
  display: flex; flex: 1 0 0; align-items: center; gap: 10px; min-width: 0;
  height: 42px; padding: 0 16px; border: 1px solid #ded5c9; border-radius: 10px; background: #fff;
}
.search img { flex: none; width: 18px; height: 18px; }
.search input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: 400 14px/1.21 Inter, system-ui, sans-serif; letter-spacing: inherit;
}
.search input::placeholder { color: var(--faint); opacity: 1; }
.search:focus-within, .select:focus-within { border-color: #c9bba9; }
.select { position: relative; display: flex; flex: none; align-items: center; height: 42px; border: 1px solid #ded5c9; border-radius: 10px; background: #fff; }
.select select {
  height: 100%; padding: 0 56px 0 14px; border: 0; outline: 0; background: transparent; appearance: none; cursor: pointer;
  color: var(--ink); font: 400 14px/1.21 Inter, system-ui, sans-serif; letter-spacing: inherit;
}
.select img { position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; }
.view-btn { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; }
.view-btn:hover { background: #f6f0e8; }
.view-btn[aria-pressed="true"] { background: #efe7dc; }
.view-btn img { width: 18px; height: 18px; }

/* tables */
.tbl { border: 1px solid #e8e0d5; border-radius: 16px; background: #fff; overflow: hidden; }
.tbl-head, .tbl-row { display: flex; align-items: center; gap: 24px; padding: 15px 20px; }
.tbl-head { padding: 11px 20px; border-bottom: 1px solid #e8e0d5; background: #f7f2eb; color: var(--faint); font-size: 12px; font-weight: 600; line-height: 1.5; }
.tbl-row:not(:last-child) { border-bottom: 1px solid #e8e0d5; }
.chip-plan { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .12); color: var(--body); font-size: 12px; font-weight: 600; line-height: var(--lh); white-space: nowrap; }

/* small cards */
.cardlets { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 16px; }
.cardlet { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #e8e0d5; border-radius: 14px; background: #fff; }
.cardlet h3 { font-size: 15px; font-weight: 700; line-height: 1.35; }
.cardlet p { color: var(--body); font-size: 13px; line-height: 1.55; }
.cardlet .foot { margin-top: auto; padding-top: 10px; color: var(--faint); font-size: 12px; line-height: var(--lh); }

/* ── announcement ── */
.announce { display: flex; align-items: center; justify-content: center; gap: 14px; height: 31px; }
.announce .tag { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: var(--lh); white-space: nowrap; }
.announce .tag img { width: 16px; height: 16px; }
.announce .rule { width: 1px; height: 20px; background: var(--line); }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 31px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 500; line-height: var(--lh); white-space: nowrap;
  transition: background-color .15s ease;
}
.pill:hover { background: var(--cream); }
.pill img { width: 16px; height: 16px; }

/* ── opener ── */
.opener { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 11px; padding: 56px 0 8px; }
.h-hero {
  width: fit-content; max-width: 100%;
  font-size: 54px; font-weight: 700; line-height: 1.08; letter-spacing: -1.89px; text-align: center; white-space: nowrap;
  background: linear-gradient(90deg, #000, #666); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { width: 720px; max-width: 100%; color: var(--body); font-size: 19px; line-height: 1.5; text-align: center; }

.paste {
  width: 920px; max-width: 100%;
  padding: 6px 6px 10px; border: 1px solid var(--line); border-radius: 20px; background: #fbeee2;
  box-shadow: 0 8px 24px -4px rgba(89, 46, 15, .08);
}
.paste-area {
  display: flex; flex-direction: column; min-height: 156px;
  padding: 18px 14px 14px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.paste-area textarea {
  display: block; width: 100%; height: 82px; min-height: 82px; padding: 0; border: 0; outline: 0; resize: none;
  background: transparent; color: var(--ink); font: 400 16px/1.21 Inter, system-ui, sans-serif;
}
.paste-area textarea::placeholder { color: var(--faint); opacity: 1; }
.paste-controls { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.paste-plus { display: flex; width: 20px; height: 20px; border-radius: 6px; }
.paste-plus img { width: 20px; height: 20px; }
.send {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; background: #f3ebe2;
  transition: background-color .15s ease;
}
.send img { width: 18px; height: 18px; transition: filter .15s ease; }
.send.ready { background: var(--orange); }
.send.ready img { filter: brightness(0) invert(1); }
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.tool {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 500; line-height: var(--lh); white-space: nowrap;
  transition: background-color .15s ease;
}
.tool:hover { background: var(--cream); }
.tool img { width: 16px; height: 16px; }
.paste-note {
  display: none; margin: 10px 10px 0; padding: 10px 14px; border-radius: 12px; background: #fff;
  color: var(--body); font-size: 14px; line-height: 1.5; text-align: center;
}
.paste-note.show { display: block; animation: rise .22s var(--ease); }
.paste-note a { color: var(--orange-ink); font-weight: 600; text-decoration: underline; }

.ideas-title { color: var(--faint); font-size: 13px; line-height: var(--lh); }
.ideas { display: grid; grid-template-columns: repeat(3, 296px); gap: 16px; }
.idea {
  display: flex; flex-direction: column; gap: 4px; height: 90px; padding: 14px 15px 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left;
  transition: background-color .15s ease;
}
.idea:hover { background: var(--cream); }
.idea b { font-size: 15px; font-weight: 600; line-height: var(--lh); white-space: nowrap; }
.idea span { color: var(--body); font-size: 13px; line-height: 1.45; }
.fine { color: var(--faint); font-size: 12px; line-height: var(--lh); text-align: center; }
.fine a { text-decoration: underline; text-decoration-skip-ink: none; }
.fine a:hover { color: var(--ink); }

/* ── the belt ── */
.belt { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 107px; }
.belt-title { color: var(--faint); font-size: 14px; font-weight: 600; line-height: var(--lh); }
.lane { position: relative; width: 100%; height: 52px; overflow: hidden; }
.lane::before, .lane::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 160px; pointer-events: none; }
.lane::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.lane::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.track { position: absolute; top: 2px; left: -40px; display: flex; align-items: center; gap: 14px; width: max-content; animation: belt 60s linear infinite; }
.lane.rev .track { left: -200px; animation-name: belt-rev; }
.app {
  display: flex; flex: none; align-items: center; gap: 10px;
  padding: 12px 20px 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 600; line-height: var(--lh); white-space: nowrap;
}
.app > img { width: 24px; height: 24px; }
.app .logo-cover { object-fit: cover; }
.logo-word { position: relative; flex: none; width: 24px; height: 24px; overflow: hidden; }
.logo-word img { position: absolute; left: -14.1%; top: -14.1%; width: 128.21%; height: 128.21%; max-width: none; }
.logo-in {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px; background: #0a66c2;
  color: #fff; font-size: 20px; font-weight: 700; line-height: var(--lh);
}
@keyframes belt { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@keyframes belt-rev { from { transform: translateX(calc(-50% - 7px)); } to { transform: translateX(0); } }

/* ── sections ── */
.section { display: flex; flex-direction: column; margin-top: 107px; }
.h-section { font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -1.32px; text-align: center; }
.h-section + * { margin-top: 11px; }
/* "Every claim checked and cited" keeps the two-line block it has in the design */
.h-section.tall { min-height: 96.8px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff;
}
.step-pic { width: 100%; height: 200px; object-fit: cover; border-radius: 14px; }
.step-num { color: var(--orange-ink); font-size: 15px; font-weight: 600; line-height: var(--lh); }
.step h3 { font-size: 22px; font-weight: 700; line-height: var(--lh); letter-spacing: -0.33px; }
.step p { color: var(--body); font-size: 15px; line-height: 1.6; }

/* sources and citations */
.duo { display: grid; grid-template-columns: minmax(0, 611fr) minmax(0, 613fr); gap: 20px; }
.card-orange, .card-cream { padding: 32px; border-radius: 20px; overflow: hidden; }
.card-orange { background: linear-gradient(180deg, #ff5900, #ff8800); color: #fff; }
.card-cream { border: 1px solid var(--line); background: var(--cream); }
.card-orange h3, .card-cream h3 { font-size: 28px; font-weight: 700; line-height: var(--lh); letter-spacing: -0.56px; }
.card-orange > p, .card-cream > p { margin-top: 14px; font-size: 15px; line-height: 1.6; }
.card-orange > p { font-weight: 500; }
.card-cream > p { color: var(--body); }
.card-orange .mock, .card-cream .cite-mock { margin-top: 14px; }

.mock { border-radius: 14px; background: #fff; color: var(--ink); overflow: hidden; }
.mock-head { padding: 14px 16px 13px; border-bottom: 1px solid var(--line); }
.mock-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; line-height: var(--lh); }
.style-chip {
  display: inline-flex; align-items: center; height: 17px; padding: 0 8px; border-radius: 999px; background: var(--sand);
  color: var(--body); font-size: 11px; font-weight: 600;
}
.mock-sub { margin-top: 4px; color: var(--body); font-size: 12px; line-height: 1.45; }
.mock-src { padding: 11px 16px 12px; border-bottom: 1px solid var(--line); }
.mock-src .title { font-size: 13px; font-weight: 600; line-height: 1.4; }
.mock-src .meta { margin-top: 3px; color: var(--faint); font-size: 11px; font-weight: 500; line-height: var(--lh); }
.mock-src .says { margin-top: 3px; color: var(--body); font-size: 12px; line-height: 1.45; }
.cite-box { margin-top: 3px; padding: 7px 12px; border-radius: 10px; background: var(--sand); font-size: 12px; line-height: 1.5; }
.cite-box b { font-weight: 500; }
.mock-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mock-src .mock-actions { margin-top: 4px; }
.left-out {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 39px; padding: 0 16px; background: #fbf8f4;
  color: var(--body); font-size: 12px; font-weight: 500; line-height: var(--lh);
}
.left-out img { flex: none; width: 14px; height: 14px; }

.cite-mock { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.styles { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--sand); }
.styles button {
  height: 27px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px;
  color: var(--body); font-size: 12px; font-weight: 500; line-height: var(--lh); white-space: nowrap;
}
.styles button[aria-pressed="true"] { padding: 0 12px; border-color: var(--line); background: #fff; color: var(--ink); font-weight: 600; }
.cite-out { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--sand); font-size: 13px; line-height: 1.6; }
.in-text { margin-top: 12px; color: var(--body); font-size: 12px; font-weight: 500; line-height: var(--lh); }
.cite-mock .mock-actions { margin-top: 12px; }

/* flags */
.flags { display: grid; grid-template-columns: minmax(0, 676fr) minmax(0, 520fr); gap: 48px; }
.points { display: flex; flex-direction: column; gap: 32px; }
.point { display: grid; grid-template-columns: 66px minmax(0, 1fr); }
.point .n { color: var(--orange); font-size: 44px; font-weight: 700; line-height: var(--lh); letter-spacing: -1.32px; }
.point h3 { font-size: 22px; font-weight: 700; line-height: var(--lh); letter-spacing: -0.33px; }
.point p { margin-top: 6px; color: var(--body); font-size: 15px; line-height: 1.6; }
.example { padding: 28px 28px 27px; border: 1px solid var(--line); border-radius: 20px; background: var(--cream); }
.draft { min-height: 90px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.75; }
.u-red, .u-blue, .u-amber, .u-grey { text-decoration: underline 2px; text-decoration-skip-ink: none; }
.u-red { text-decoration-color: var(--red); }
.u-blue { text-decoration-color: var(--blue); }
.u-amber { text-decoration-color: var(--amber); }
.u-grey { text-decoration-color: var(--grey); }
.finding {
  position: relative; width: 434px; max-width: calc(100% - 16.5px); margin: -13.5px 0 0 16.5px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 10px 28px -4px rgba(77, 38, 13, .12);
}
.finding .kind { display: flex; align-items: center; gap: 7px; color: var(--red); font-size: 12px; font-weight: 700; line-height: var(--lh); }
.finding .kind img { width: 8px; height: 8px; }
.finding h4 { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: var(--lh); }
.finding p { margin-top: 8px; color: var(--body); font-size: 13px; line-height: 1.55; }
.finding .mock-actions { margin-top: 12px; }

/* real time and research */
.realtime { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 588fr); gap: 56px; align-items: start; }
.card-live { padding: 36px 36px 0; border-radius: 20px; background: linear-gradient(180deg, #ff5900, #ff9d00); overflow: hidden; }
.card-live h3 { color: #fff; font-size: 32px; font-weight: 700; line-height: var(--lh); letter-spacing: -0.8px; }
.page-mock { display: flex; flex-direction: column; min-height: 294px; margin-top: 22px; border-radius: 14px 14px 0 0; background: #fff; overflow: hidden; }
.page-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 40px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line);
  color: var(--faint); font-size: 11px; font-weight: 500; line-height: var(--lh); white-space: nowrap;
}
.page-bar .status {
  display: inline-flex; align-items: center; gap: 6px; height: 19px; padding: 0 9px 0 8px; border-radius: 999px;
  background: var(--sand); color: var(--body);
}
.page-bar .status img { width: 7px; height: 7px; animation: pulse 1.4s ease-in-out infinite; }
.page-text { padding: 20px 22px; }
.page-text h4 { font-size: 16px; font-weight: 700; line-height: var(--lh); }
.page-text p { margin-top: 12px; font-size: 13px; line-height: 1.75; letter-spacing: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; color: var(--body); font-size: 11px; font-weight: 500; line-height: var(--lh); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--c); }
.research h2 { font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -1.32px; }
.research > p { margin-top: 18px; color: var(--body); font-size: 17px; line-height: 1.6; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 286px)); gap: 14px; margin-top: 18px; }
.stat { display: flex; flex-direction: column; height: 81px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stat b { font-size: 22px; font-weight: 700; line-height: var(--lh); letter-spacing: -0.33px; }
.stat span { margin-top: 4px; color: var(--body); font-size: 13px; font-weight: 500; line-height: var(--lh); }

/* FAQ */
.faq { width: 920px; max-width: 100%; margin-left: auto; margin-right: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.faq details { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 19px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary img { flex: none; width: 18px; height: 18px; }
.faq .chev-open, .faq details[open] .chev-closed { display: none; }
.faq details[open] .chev-open { display: block; }
.faq .answer { max-width: 840px; margin-top: 7px; color: var(--body); font-size: 14px; line-height: 1.6; }
.faq details[open] .answer { animation: rise .2s var(--ease); }
.faq .answer a { color: var(--orange-ink); font-weight: 600; }

/* closing card */
.cta {
  display: grid; grid-template-columns: minmax(0, 702fr) minmax(0, 540fr); min-height: 400px;
  border: 1px solid var(--line); border-radius: 24px; background: var(--cream); overflow: hidden;
}
.cta-text { display: flex; flex-direction: column; justify-content: center; padding: 40px 56px; }
.cta h2 { font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -1.82px; }
.cta p { margin-top: 18px; color: var(--body); font-size: 17px; line-height: 1.55; }
.cta .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cta-pic { width: 100%; height: 100%; object-fit: cover; }

/* footer */
.footer {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-top: 83px; padding: 22px 0 28px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 13px; line-height: var(--lh);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--body); font-weight: 500; }
.footer nav a:hover { color: var(--ink); }

/* ── waitlist and toast ── */
.overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 20, 20, .32); }
.overlay.show { display: flex; animation: fade .2s ease; }
.dialog { width: 100%; max-width: 420px; padding: 28px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .3); animation: rise .28s var(--ease); }
.dialog h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.33px; }
.dialog p { margin-top: 10px; color: var(--body); font-size: 14.5px; line-height: 1.6; }
.dialog p:empty { display: none; }
.dialog .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dialog .err { margin-top: 12px; color: var(--red); font-size: 13px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 70; display: none;
  padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 500; transform: translateX(-50%);
}
.toast.show { display: block; animation: fade .2s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 50% { opacity: .35; } }

/* ── narrower screens ── */
@media (max-width: 1180px) {
  .h-hero { white-space: normal; }
  .ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 920px; max-width: 100%; }
  .idea { height: auto; }
  .idea b { white-space: normal; }
  .flags, .realtime { gap: 32px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .sidebar {
    position: fixed; top: 60px; left: 0; bottom: 0; height: auto;
    border-right: 1px solid var(--line);
    transform: translateX(-100%); transition: transform .25s var(--ease), box-shadow .25s ease;
  }
  .sidebar.open { transform: none; box-shadow: 12px 0 32px -12px rgba(89, 46, 15, .25); }
  .page { border-left: 0; border-top-left-radius: 0; box-shadow: none; }
  .wrap { width: min(1244px, 100% - 48px); }
  .h-hero { font-size: 44px; letter-spacing: -1.4px; }
  .h-section, .research h2 { font-size: 36px; letter-spacing: -1px; }
  .h-section.tall { min-height: 0; }
  .br-wide { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
  .duo, .flags, .realtime, .cta { grid-template-columns: minmax(0, 1fr); }
  .finding { width: auto; }
  body:not(.home) .page { border-top-left-radius: 0; box-shadow: none; }
  .wrap-page { width: min(1243px, 100% - 48px); }
  .ph { flex-wrap: wrap; }
  .cardlets { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbl-head { display: none; }
  .tbl-row { flex-wrap: wrap; gap: 6px 16px; }
  .cta-pic { height: 320px; }
  .cta-text { padding: 40px 32px; }
  .cta h2 { font-size: 44px; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 12px 0 8px; }
  .topbar-left { gap: 8px; }
  .top-signin { display: none; }
  .top-upgrade { display: none; } /* no room beside Add to Chrome; Settings has Upgrade */
  .wrap { width: calc(100% - 32px); padding-bottom: 64px; }
  .announce { flex-wrap: wrap; height: auto; gap: 10px; }
  .announce .rule { display: none; }
  .announce .tag { white-space: normal; }
  .opener { padding-top: 32px; }
  .h-hero { font-size: 34px; letter-spacing: -1px; }
  .lede { font-size: 17px; }
  .ideas { grid-template-columns: minmax(0, 1fr); }
  .belt, .section { margin-top: 72px; }
  .lane::before, .lane::after { width: 48px; }
  .h-section, .research h2 { font-size: 30px; letter-spacing: -0.8px; }
  .card-orange, .card-cream, .example { padding: 20px; }
  .cite-mock { padding: 14px; }
  .card-live { padding: 24px 20px 0; }
  .card-live h3 { font-size: 26px; }
  .page-bar { padding: 0 10px 0 12px; }
  .page-text { padding: 16px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .point { grid-template-columns: 48px minmax(0, 1fr); }
  .point .n { font-size: 36px; }
  .finding { margin-left: 8px; max-width: calc(100% - 8px); }
  .faq details { padding: 16px; }
  .cta-text { padding: 32px 20px; }
  .cta h2 { font-size: 36px; letter-spacing: -1.2px; }
  .cta-pic { height: 240px; }
  .footer { flex-direction: column; margin-top: 56px; }
  .wrap-page { width: calc(100% - 32px); padding: 24px 0 48px; }
  .ph h1 { font-size: 28px; letter-spacing: -0.9px; }
  .ph-actions { flex-wrap: wrap; }
  .toolbar { flex-wrap: wrap; }
  .search { flex-basis: 100%; }
  .cardlets { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .track, .page-bar .status img { animation: none; }
  .sidebar { transition: none; }
  .paste-note.show, .dialog, .overlay.show, .toast.show, .faq details[open] .answer { animation: none; }
}