/* Classic Source — long-form company pages (about, terms, privacy).
   Loaded AFTER styles.css, so every colour, radius, shadow and font here comes from the
   variables the product already uses. This file adds only what long text needs: readable
   measure, heading rhythm, a notice box and a nav for the header. Nothing is redefined. */

/* ---- header: brand becomes a link home, plus a page nav ---- */
.brand-link { text-decoration: none; color: inherit; }
.brand-link:hover .brand-name { color: var(--amber-bright); }
.page-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 2px; }
.page-nav a {
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: 7px 12px; border-radius: 999px; transition: background .18s var(--ease), color .18s var(--ease);
}
.page-nav a:hover { color: var(--ink); background: var(--surface-2); }
.page-nav a[aria-current="page"] { color: var(--amber-bright); background: var(--amber-bg); }

/* ---- page shell ---- */
.page { max-width: 760px; }
.page-head { padding: 34px 0 4px; }
.page-kicker {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber-bright);
}
.page-title { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.8px; font-weight: 800; color: var(--ink); }
.page-lede { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.page-stamp { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
@media (min-width: 640px) { .page-title { font-size: 38px; } }

/* ---- the notice at the top of terms + privacy ---- */
.notice {
  margin: 22px 0 6px; padding: 14px 16px;
  background: var(--amber-bg); border: 1px solid var(--line-strong); border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm); box-shadow: var(--e1);
}
.notice h2 { margin: 0 0 6px; font-size: 14px; font-weight: 800; letter-spacing: -.1px; color: var(--amber-deep); }
.notice p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.notice p + p { margin-top: 8px; }

/* ---- prose ---- */
.prose { padding-bottom: 12px; }
.prose h2 {
  margin: 34px 0 0; padding-top: 20px; border-top: 1px solid var(--line-soft);
  font-size: 20px; line-height: 1.25; letter-spacing: -.4px; font-weight: 800; color: var(--ink);
}
.prose > h2:first-child { border-top: none; padding-top: 0; margin-top: 26px; }
.prose h3 { margin: 22px 0 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.1px; color: var(--ink); }
.prose p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 700; }
.prose ul { margin: 12px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.prose ul li {
  position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft);
}
.prose ul li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
}
.prose code {
  font-family: var(--mono); font-size: .88em; color: var(--amber-bright);
  background: var(--amber-bg); border-radius: 5px; padding: 1px 6px;
}
.prose a { color: var(--amber-bright); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.prose a:hover { border-bottom-color: var(--amber); }

/* ---- fact rows: the "who operates this" block a reviewer reads first ---- */
.facts { margin: 16px 0 0; display: grid; gap: 0; }
.fact {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px;
}
.fact:last-child { border-bottom: none; }
.fact dt { color: var(--muted); font-size: 13px; font-weight: 600; padding-top: 1px; }
.fact dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) {
  .fact { grid-template-columns: 1fr; gap: 3px; }
  .fact dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
}

/* ---- a quietly emphasised block, used for "we do not sell parts" ---- */
.callout {
  margin: 18px 0 0; padding: 15px 17px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--e2);
}
.callout p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.callout p + p { margin-top: 10px; }
.callout p:first-child strong { color: var(--ink); }

/* ---- contact block at the end of every page ---- */
.contact-card { margin: 30px 0 6px; padding: 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--e2); }
.contact-card h2 { margin: 0 0 8px; padding: 0; border: none; font-size: 16px; font-weight: 800; color: var(--ink); }
.contact-card p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.contact-card a { color: var(--amber-bright); font-weight: 700; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

/* ---- footer ---- */
.page-foot { display: flex; flex-direction: column; gap: 9px; align-items: center; }
.page-foot p { margin: 0; }
.foot-entity { color: var(--ink-soft); font-size: 12.5px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.foot-links a:hover { color: var(--amber-bright); }
.foot-note { max-width: 560px; line-height: 1.5; }