/* Shared styles for the pages around the landing page: pricing, about, contact, terms,
   privacy.

   The landing page keeps its own inlined CSS. That was a deliberate call for a single
   page with one job, and unpicking it to share a stylesheet would risk a design nobody
   asked me to touch. Six content pages are a different problem: inlining the same tokens
   six times is a maintenance trap, and these pages are read rather than performed, so one
   cached request costs nothing.

   Tokens are copied from the landing page rather than imported, so the two cannot drift
   apart silently. If a colour changes there it has to change here, and that is on purpose:
   a shared file that the landing page does not use would look authoritative and be wrong. */

:root {
  --paper: #f8f9f5;
  --white: #fff;
  --ink: #173f33;
  --text: #263d34;
  --muted: #67756e;
  --line: #dce2da;
  --mint: #e8eee5;
  --yellow: #eef4a3;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 48px)); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link. Six pages of prose behind a nav is exactly where a keyboard user needs one. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ header */

.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(248, 249, 245, .92);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 21px; font-weight: 600; color: var(--ink);
  letter-spacing: -.3px;
}
.brand:hover { text-decoration: none; }
.brand-mark { display: block; }
.nav nav { display: flex; gap: 24px; margin-left: 14px; }
.nav nav a { font-size: 14.5px; color: var(--muted); font-weight: 450; }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.nav nav a[aria-current="page"] { font-weight: 550; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.signin { font-size: 14.5px; color: var(--muted); }

.button {
  display: inline-flex; gap: 14px; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; padding: 15px 22px;
  border: 1px solid var(--ink); border-radius: 5px;
  font-size: 15px; font-weight: 550;
  transition: background .25s, transform .25s;
}
.button:hover { background: #0f2c24; text-decoration: none; }
.button.small { padding: 11px 16px; font-size: 14px; gap: 10px; }
.button.ghost { background: var(--white); color: var(--ink); }
.button.ghost:hover { background: var(--mint); }

/* -------------------------------------------------------------- page head */

.page-head { padding-block: 72px 44px; text-align: center; }
.eyebrow {
  font-size: 12px; letter-spacing: 1.7px; font-weight: 600; color: #46634f;
  display: flex; gap: 13px; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.page-head h1 {
  font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1.04;
  margin: 22px 0 16px; color: var(--ink); letter-spacing: -.5px;
}
.page-head h1 em { font-style: italic; }
.page-head .lede { color: var(--muted); font-size: 17px; margin: 0 auto; max-width: 620px; }

/* ------------------------------------------------------------------ prose */

.prose { padding-bottom: 80px; }
.prose h2 {
  font-family: var(--serif); font-weight: 400; font-size: 31px; line-height: 1.2;
  color: var(--ink); margin: 46px 0 14px; letter-spacing: -.2px;
}
.prose h3 {
  font-size: 17px; font-weight: 600; color: var(--ink); margin: 30px 0 8px;
}
.prose p, .prose li { font-size: 15.5px; line-height: 1.68; }
.prose ul, .prose ol { padding-left: 22px; margin: 12px 0; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose .updated {
  font-size: 13px; color: var(--muted); padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
/* A summary in the author's own words above each legal section. The page is still the
   agreement; this is so somebody can find the clause they actually care about without
   reading all of it. */
.plain {
  background: var(--mint); border-radius: 8px; padding: 14px 18px; margin: 14px 0 18px;
  font-size: 14.5px; color: var(--text);
}
.plain strong { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: .8px;
  text-transform: uppercase; color: #46634f; }

.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--ink);
  border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 22px 0;
  background: var(--white); font-size: 15px;
}

/* ------------------------------------------------------------------ footer */

.footer { background: var(--ink); color: #c8d5c4; padding-block: 56px 30px; }
.footer a { color: #e6ece2; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.footer .brand { color: #fff; }
.footer-blurb { font-size: 14px; margin: 14px 0 0; max-width: 260px; color: #a8bba4; }
.footer-col h3 {
  font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase;
  color: #8fa78b; margin: 0 0 14px; font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-col a { font-size: 14.5px; }
.footer-legal { padding: 26px 0 18px; font-size: 12.5px; color: #93a790; max-width: 900px; }
.footer-legal p { margin: 0 0 9px; line-height: 1.6; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 12px; color: #8fa78b; letter-spacing: .4px;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 940px) {
  .wrap { width: calc(100% - 48px); }
  .page-head h1 { font-size: 46px; }
  .faq-head h2 { font-size: 38px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - 36px); }
  .nav { height: 62px; gap: 10px; }
  /* At 375px the brand, the sign-in link and the trial button came to more than the row
     could hold: the button wrapped onto two lines and grew taller than the header itself.
     The arrows are decoration and go first, then the button is told not to wrap. */
  .brand { font-size: 18px; gap: 8px; }
  .brand-mark { width: 28px; height: 28px; }
  .nav-actions { gap: 10px; }
  .nav-actions .button span[aria-hidden], .signin span[aria-hidden] { display: none; }
  .button { white-space: nowrap; }
  .button.small { padding: 9px 13px; font-size: 13px; }
  .signin { font-size: 13.5px; }
  /* The in-page nav goes; the footer carries every link, so nothing becomes unreachable. */
  .nav nav { display: none; }
  .page-head { padding-block: 48px 32px; }
  .page-head h1 { font-size: 36px; }
  .faq-head h2 { font-size: 30px; }
  .faq-item summary { font-size: 16px; padding: 18px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .button { padding: 12px 16px; font-size: 14px; }
}