/* The site's visual layer, loaded after every other stylesheet: warm paper, ink, one cobalt accent, a serif for
   headings, ruled lines for structure. Heroes sit on the paper like the rest of the page; the only dark surfaces are
   flat ink bands (call to action, footer). No glow, no grid backgrounds, no labels above headings. */

@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial");
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --paper: #faf7f2;
  --paper-2: #f2ede4;
  --paper-3: #e9e2d6;

  /* Ink replaces navy as the dark colour; every token mixed from --navy follows it. */
  --navy: #14161a;
  --navy-rgb: 20 22 26;

  --ground: var(--paper);
  --soft: var(--paper-2);
  --card: #fffdf9;
  --tint: color-mix(in srgb, var(--cobalt) 6%, var(--paper));
  --tint-2: color-mix(in srgb, var(--cobalt) 11%, var(--paper));
  --tint-3: color-mix(in srgb, var(--cobalt) 18%, var(--paper));
  --cobalt-deep: color-mix(in srgb, var(--cobalt) 78%, var(--navy));
  --action-hover: var(--cobalt-deep);

  --font-body: "Public Sans", "Public Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Source Serif 4", "Source Serif Fallback", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgb(var(--navy-rgb) / 0.05), 0 14px 32px -22px rgb(var(--navy-rgb) / 0.3);
  --shadow-dark: 0 18px 40px -24px rgb(var(--navy-rgb) / 0.45);

  accent-color: var(--cobalt);
  scrollbar-color: color-mix(in srgb, var(--navy) 30%, var(--paper)) var(--paper);
}

body {
  background: var(--paper);
  caret-color: var(--cobalt);
}

::selection {
  background: color-mix(in srgb, var(--cobalt) 20%, var(--paper));
  color: var(--navy);
}

h1,
h2,
h3 {
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.1;
}

h1 {
  line-height: 1.04;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

table {
  font-variant-numeric: tabular-nums;
}

/* A heading carries its own weight: the small labels that used to sit above them are gone. */
.eyebrow,
.eyebrow-pill,
.cs-eyebrow,
.cs-kicker,
.blog-kicker,
.kicker {
  display: none !important;
}

/* Header: paper, one ruled line. */
.site-header {
  border-bottom-color: var(--line-2);
  background: var(--paper);
}

.btn {
  border-radius: var(--radius-sm);
}

.btn-secondary {
  background: var(--card);
}

.btn-ghost:hover {
  background: var(--paper-2);
}

.block-soft {
  border-color: var(--line);
}

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.block-demo {
  background: var(--paper-2);
}

/* ---------- Heroes on paper ---------- */

.hero,
.cs-hero,
.hm-hero.cs-hero,
.blog-hero,
.post > .page-head {
  border-bottom: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  --focus: var(--cobalt);
}

.hero::before,
.cs-hero::before,
.hm-hero.cs-hero::before,
.blog-hero::before,
.post > .page-head::before,
.cta-band::before {
  content: none;
}

.hero h1,
.cs-hero h1,
.blog-hero h1,
.post > .page-head h1,
.cs-stats strong,
.hm-proof strong,
.blog-stats dd {
  color: var(--ink);
}

.hero h1 .accent,
.blog-hero h1 span {
  color: var(--cobalt);
}

.hero-sub,
.hero-notes,
.hero .frame figcaption,
.cs-hero-sub,
.cs-stats span,
.cs-panel-bar p,
.cs-panel-foot,
.hm-hero-alt,
.hm-hero-trust,
.hm-proof span,
.hm-bench figcaption,
.blog-hero-lead,
.blog-stats dt,
.blog-hero-links a,
.post > .page-head .lead,
.post > .page-head .post-meta,
.post > .page-head .crumbs,
.post > .page-head .crumbs a,
.cs-hero .crumbs ol,
.cs-hero .lang-switch a {
  color: var(--ink-2);
}

.hero-notes .icon {
  color: var(--cobalt);
}

.cs-hero .crumbs a {
  color: var(--ink);
}

.hm-hero-alt:hover,
.blog-hero-links a:hover,
.post > .page-head .crumbs a:hover,
.post > .page-head .post-meta a,
.cs-hero .crumbs a:hover {
  color: var(--cobalt);
}

.blog-hero-links a {
  text-decoration-color: var(--line-2);
}

.cs-stats,
.hm-proof {
  border-top-color: var(--line-2);
}

.blog-stats div + div {
  border-left-color: var(--line-2);
}

.cs-hero .label-review {
  border-color: var(--navy);
  color: var(--navy);
}

.cs-hero .label-soon {
  border-color: var(--line-2);
  color: var(--ink-3);
}

/* Hero buttons were drawn for a dark ground; on paper they take the site's primary and secondary forms. */
.cs-hero .btn-light,
.hero .btn-light {
  background: var(--action);
  color: #fff;
}

.cs-hero .btn-light:hover,
.hero .btn-light:hover {
  background: var(--action-hover);
  color: #fff;
  translate: none;
}

.cs-hero .btn-outline-light,
.hero .btn-outline-light {
  border-color: var(--line-2);
  background: var(--card);
  color: var(--ink);
}

.cs-hero .btn-outline-light:hover,
.hero .btn-outline-light:hover {
  border-color: var(--ink);
  background: var(--card);
  color: var(--ink);
}

.cs-hero .btn-link,
.hero .btn-link {
  color: var(--ink);
}

.cs-hero .btn-link:hover,
.hero .btn-link:hover {
  color: var(--cobalt);
}

/* The panel beside the hero copy: a sheet on the desk, not a lit glass box. */
.cs-hero-panel {
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}

.cs-panel-bar {
  border-bottom: 1px solid var(--line);
}

.cs-panel-bar span {
  background: var(--line-2);
}

.cs-panel-bar p {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: none;
}

.cs-app-list {
  border-radius: 0;
}

.cs-panel-foot {
  padding-inline: 14px;
}

.hm-label,
.hm-sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 1px 2px rgb(var(--navy-rgb) / 0.06), 0 22px 44px -26px rgb(var(--navy-rgb) / 0.4);
}

.hm-sheet {
  border-top: 1px solid var(--line);
}

/* ---------- Ink bands ---------- */

.band,
.cta-band,
.block-dark,
.cs-final,
.cs-hire-main,
.post-cta,
.site-footer {
  background: var(--navy);
}

.cs-final,
.cs-hire-main,
.post-cta {
  box-shadow: none;
}

/* ---------- Cards: hairlines, flat ---------- */

.hm-page .rt-lead a:hover,
.hm-page .rt-main a:hover,
.hm-page .feat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.hm-page .feat-main {
  background: var(--paper-2);
}

.hm-page .final-cta h2 {
  letter-spacing: -0.015em;
}

/* ---------- Blog ---------- */

.blog-hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: 1;
}

.blog-start {
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: none;
}

.blog-start-label {
  border-radius: 0;
  background: transparent;
}

.blog-section-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--navy);
  font: 600 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem)/1.15 var(--font-head);
  letter-spacing: -0.01em;
}

.track {
  border-color: var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.track-head {
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.track-app {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.track-links .track-try {
  border-radius: var(--radius-sm);
}

@media (min-width: 900px) {
  .latest-lead {
    border: 1px solid var(--line-2);
    border-top: 2px solid var(--navy);
    border-radius: var(--radius-sm);
    background: var(--card);
  }
}

.topic-btn[aria-pressed="true"] {
  background: var(--navy);
}

.prose blockquote {
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  font-family: var(--font-head);
  font-size: 1.1875rem;
}

.prose > .post-callout {
  padding: 16px 0 0;
  border-top: 1px solid var(--line-2);
  border-left: 0;
}

.guide-preview {
  border-left: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--paper-2);
}

/* ---------- Help center (assets/help.css keeps its own tokens) ---------- */

.hc-hero {
  background: var(--hero);
}

.cs-status {
  margin-bottom: var(--s-4);
}

/* The post head already names the topic (breadcrumb) and the reading time (meta line). */
.post-kicker {
  display: none;
}

.blog-section-title {
  color: var(--ink);
  text-transform: none;
}

.hm-hero h1 {
  max-width: 19ch;
}

.block-dark a:not(.btn):hover,
.band a:not(.btn):hover,
.cs-final a:not(.btn):hover {
  color: var(--cyan);
}