* { box-sizing: border-box; }
body { margin: 0; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--border-default);
  background: var(--solid-background-tertiary);
}
.logo {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.logo span {
  background: linear-gradient(90deg, var(--accent-default), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-nav { display: flex; gap: var(--space-6); font-size: 14px; }
.site-nav a { color: var(--text-secondary); }
.theme-toggle {
  background: var(--control-fill-default);
  border: 1px solid var(--control-stroke-default);
  border-radius: var(--radius-control);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
}

.site-footer {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  border-top: 1px solid var(--border-default);
}

/* ---------- Hero ---------- */
.hero {
  padding: var(--space-14) var(--space-8) var(--space-8);
  text-align: center;
  background:
    radial-gradient(circle at 15% 10%, rgba(0, 120, 212, 0.16), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(96, 205, 255, 0.20), transparent 40%);
}
.hero-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-default);
  background: var(--attention-background);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-5);
}
.hero h1 {
  font-size: var(--type-title-large-size);
  line-height: var(--type-title-large-line);
  font-weight: 700;
  max-width: 720px;
  margin: 0 auto var(--space-4);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent-default), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  font-size: var(--type-body-large-size);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto var(--space-6);
}
.hero-btnrow { display: flex; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-10); }

.btn-primary {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent-default), var(--accent-tertiary));
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-overlay);
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 95, 184, 0.28);
}
[data-theme="dark"] .btn-primary { box-shadow: 0 8px 24px rgba(96, 205, 255, 0.25); }
.btn-secondary {
  display: inline-block;
  background: var(--card-background-default);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-overlay);
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
}
.badge-coming-soon {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--subtle-secondary);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 8px 16px;
}

/* ---------- Video placeholder ---------- */
.video-placeholder {
  max-width: 720px;
  margin: 0 auto var(--space-10);
  border-radius: var(--radius-overlay);
  border: 1px solid var(--border-default);
  background: var(--card-background-secondary);
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
}
.video-placeholder .play-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-fill-default);
  color: var(--text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* ---------- Product sections ---------- */
.product-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-14) var(--space-8);
  border-top: 1px solid var(--border-default);
}
@media (max-width: 800px) {
  .product-section { grid-template-columns: 1fr; }
}
.product-copy h2 { margin-bottom: var(--space-3); }
.product-copy p { color: var(--text-secondary); margin-bottom: var(--space-4); }
.feature-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.feature-list li {
  padding-left: 22px;
  position: relative;
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: 14px;
}
.feature-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--success-default);
  font-weight: 700;
}
.product-shot {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(20, 40, 80, 0.18);
  border: 1px solid var(--border-default);
  transform: perspective(800px) rotateY(-2deg);
}
.product-shot img { display: block; width: 100%; height: auto; }
.product-shot--placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-background-secondary);
  color: var(--text-tertiary);
  font-size: 14px;
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: var(--space-10) auto;
  padding: 0 var(--space-8);
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
.pricing-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-overlay);
  background: var(--card-background-default);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.pricing-card h3 { margin-bottom: var(--space-2); }
.pricing-price { color: var(--text-secondary); margin-bottom: var(--space-4); }
.pricing-card .feature-list { flex: 1; }

/* ---------- Docs ---------- */
.learning-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-8);
}
@media (max-width: 800px) {
  .learning-layout { grid-template-columns: 1fr; }
}
.learning-nav ul { list-style: none; padding: 0; margin: 0; }
.learning-nav li { margin-bottom: var(--space-2); }
.learning-nav a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); color: var(--text-secondary); }
.learning-nav a.active { background: var(--subtle-secondary); color: var(--accent-default); font-weight: 600; }
.learning-body { max-width: 700px; }
/* ============================================================
   Added for the Trawler site: landing sections, guide chrome,
   legal pages, and the keyboard skip link.
   ============================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card-background-default);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-control);
  z-index: 100;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* The manual's H1 is the page title; the site header already names the site. */
.hero-lede {
  font-size: var(--type-body-large-size);
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto var(--space-6);
}

.feature-lead,
.feature-grid,
.closing {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}
.feature-lead h2,
.feature-grid h2,
.closing h2 {
  font-size: var(--type-subtitle-size, 20px);
  margin-bottom: var(--space-4);
}
.feature-lead p { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-4); }
.closing p { color: var(--text-secondary); line-height: 1.7; }

.feature-grid { max-width: 1040px; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.card {
  background: var(--card-background-default);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-overlay);
  padding: var(--space-5);
}
.card h3 { font-size: 15px; font-weight: 600; margin-bottom: var(--space-2); }
.card p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }

.learning-nav-home {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
/* marked renders no class, so the current page is marked with aria-current. */
.learning-nav a[aria-current="page"] {
  background: var(--subtle-secondary);
  color: var(--accent-default);
  font-weight: 600;
}
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

/* ---------- Long-form prose: /privacy and every guide page ----------
   ONE rule set for both containers. They render the same kind of document from the same markdown
   generator, and the two used to be styled separately -- which is how .learning-body ended up
   with a bordered table while .legal, generating the same markdown table, had no table rule at
   all, and how h2 got its spacing back twice while h3 got it in neither.

   Why any of this is needed: tokens.css sets `margin: 0` on h1-h4 and p by BARE ELEMENT
   SELECTOR, because it mirrors the WinUI app, where every block is positioned deliberately and a
   browser default would fight the layout. That is right for the landing page and wrong here --
   markdown emits an unstyled stream of headings, paragraphs, lists and tables and leans entirely
   on the default rhythm that reset removed. The symptom is a heading sitting flush on the
   paragraph above it with no gap at all.

   The scale: a heading's space ABOVE is larger than the space below it, so it binds to the text
   it introduces rather than floating between two blocks. Sizes step down with the heading level,
   which is what makes the hierarchy legible without reading a word. */
.legal,
.learning-body {
  line-height: 1.7;
}
.legal :is(p, ul, ol, table, blockquote, figure, pre),
.learning-body :is(p, ul, ol, table, blockquote, figure, pre) {
  margin: 0 0 var(--space-4);
}
.legal :is(h2, h3, h4),
.learning-body :is(h2, h3, h4) {
  color: var(--text-primary);
}
.legal h2, .learning-body h2 { margin: var(--space-10) 0 var(--space-3); }
.legal h3, .learning-body h3 { margin: var(--space-8) 0 var(--space-2); }
.legal h4, .learning-body h4 { margin: var(--space-6) 0 var(--space-2); }
.legal h1, .learning-body h1 { margin: 0 0 var(--space-4); }

/* A leading margin at the very top of the article pushes the whole page down for nothing, and
   `> *:first-child` alone misses the first heading after the /privacy draft notice. */
.legal > *:first-child,
.learning-body > *:first-child { margin-top: 0; }
.legal > *:last-child,
.learning-body > *:last-child { margin-bottom: 0; }

.legal p, .legal li,
.learning-body p, .learning-body li { color: var(--text-secondary); }

.legal ul, .legal ol,
.learning-body ul, .learning-body ol { padding-left: var(--space-6); }
.legal li, .learning-body li { margin-bottom: var(--space-2); }
/* A nested list is part of its parent item, so it takes the tighter gap, not a paragraph gap. */
.legal li > :is(ul, ol), .learning-body li > :is(ul, ol) { margin: var(--space-2) 0 0; }

.legal table, .learning-body table {
  border-collapse: collapse;
  width: 100%;
}
.legal :is(th, td),
.learning-body :is(th, td) {
  border: 1px solid var(--border-secondary);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: 14px;
  vertical-align: top;
}
.legal th, .learning-body th { color: var(--text-primary); background: var(--subtle-secondary); }

.legal blockquote, .learning-body blockquote {
  border-left: 3px solid var(--accent-default);
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
}
.legal img, .learning-body img { max-width: 100%; height: auto; border-radius: var(--radius-control); }
.legal code, .learning-body code {
  background: var(--subtle-secondary);
  padding: 2px 6px;
  border-radius: 4px;
}
/* A <pre> is a block and must not wear the inline chip's 2px padding. It scrolls rather than
   widening the page: the guide's code blocks are Windows paths and log lines, which do not wrap,
   and a long one would otherwise put a horizontal scrollbar on the whole document. */
.legal pre, .learning-body pre {
  background: var(--subtle-secondary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  overflow-x: auto;
}
.legal pre code, .learning-body pre code { background: none; padding: 0; }
/* An <hr> is the strongest break the document has; give it more room than a heading. */
.legal hr, .learning-body hr {
  border: 0;
  border-top: 1px solid var(--border-secondary);
  margin: var(--space-10) 0;
}

/* The /privacy draft notice and its "to be confirmed" tokens.
   Both appear ONLY while docs/legal/privacy-policy.md still carries [[...]] markers: build.mjs
   derives the banner and the tokens from the same list, so filling the markers removes both and
   these rules go quiet on their own.
   Deliberately NOT styled as an error. A red alarm panel at the top of a privacy policy reads as
   "this product has a problem", which is the opposite of what the page is for. It is a stated
   gap, not a fault. */
.legal-draft {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-secondary);
  border-left: 3px solid var(--accent-default);
  border-radius: var(--radius-overlay);
  background: var(--card-background-secondary);
  font-size: 14px;
  line-height: 1.65;
}
.legal-draft strong { color: var(--text-primary); }

.tbc {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--border-secondary);
  border-radius: var(--radius-circle);
  background: var(--card-background-secondary);
  color: var(--text-tertiary);
  font-size: 0.9em;
  font-style: italic;
  white-space: nowrap;
}