/* Galley marketing site. Shares the Paper/Ink tokens with the app so the two
   read as one product; layout here is editorial rather than form-driven. */
:root {
  --paper: #f7f4ed;
  --ink: #0E111A;
  --ink-dim: #575149;
  --ink-faint: #6b6355;
  --rule: #ddd6c6;
  --field: #fffdf8;
  --field-border: #c2b9a6;
  --accent: #f15b40;
  --pass: #2f7d4f;
  --fail: #b8362b;
  --warn: #8f6a12;
  --s-control: #8d857a;
  --s-a: #f15b40;
  --s-b: #8f6a12;
  --edge: color-mix(in srgb, var(--accent) 50%, transparent);

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}
:root[data-theme="ink"] {
  --paper: #0E111A;
  --ink: #f2eee4;
  --ink-dim: #a49c8e;
  --ink-faint: #9a9182;
  --rule: #2e2b25;
  --field: #090B13;
  --field-border: #121319;
  --accent: #ff7357;
  --pass: #5fbf85;
  --fail: #e0655a;
  --warn: #d5a442;
  --s-control: #8d857a;
  --s-a: #ff7357;
  --s-b: #d5a442;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .2s ease, color .2s ease;
}
a { color: inherit; }
img, svg { max-width: 100%; }

.doc { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .doc { padding: 0 40px; } }

/* Masthead */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; padding: 22px 0 14px; border-bottom: 2px solid var(--ink);
}
/* Logo spans both rows, wordmark above its tagline. Grid rather than nesting so
   the tagline can drop out on narrow screens without touching the markup. This
   mirrors how the app's masthead is built, so the two read as one product. */
.mast-brand {
  display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "logo title" "logo tagline";
  align-items: center; column-gap: 10px; row-gap: 2px;
  text-decoration: none;
}
.mast-brand .logo { grid-area: logo; }
.mast-title { grid-area: title; align-self: end; }
.mast-tagline { grid-area: tagline; align-self: start; }
.logo { width: 28px; height: 28px; flex: 0 0 auto; display: block; color: var(--accent); }
.mast-title { font: 400 25px/1 var(--serif); letter-spacing: -.2px; }
/* Hidden on phones: the masthead row is already carrying a logo, a theme toggle
   and a menu button, and this is the one item that is decorative. */
.mast-tagline { display: none; }
@media (min-width: 700px) {
  .mast-tagline {
    display: block;
    font: 500 9.5px var(--mono); color: var(--ink-faint);
    letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap;
  }
}
.mast-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.mast-right .btn-outline, .mast-right .theme-toggle { white-space: nowrap; flex: 0 0 auto; }
/* Below 860px the links and the app button move into a menu. Wrapping them onto
   their own rows put three bands of chrome above the content on a phone. */
.nav-links { display: none; gap: 22px; margin-right: 6px; }
.mast-right .btn-outline { display: none; }
.nav-toggle {
  display: grid; place-items: center; width: 34px; height: 30px; padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-dim); cursor: pointer;
}
.nav-toggle svg { width: 17px; height: 17px; }
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

.mobile-nav {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 0 16px; border-bottom: 1px solid var(--rule);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  font: 500 13px var(--mono); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; padding: 11px 0; width: 100%;
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--accent); }
.mobile-nav .mobile-cta {
  width: auto; margin-top: 10px; color: #fff; text-transform: none;
  font: 600 13.5px var(--sans); letter-spacing: .2px; padding: 12px 26px;
}
.mobile-nav .mobile-cta:hover { color: #fff; }

@media (min-width: 860px) {
  .nav-links { display: flex; }
  .mast-right .btn-outline { display: inline-block; }
  .nav-toggle { display: none; }
  /* The menu can be left open, then the viewport widened. */
  .mobile-nav { display: none !important; }
}
.nav-links a {
  font: 500 10.5px var(--mono); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.theme-toggle {
  font: 500 10px var(--mono); letter-spacing: .8px;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: 6px 9px; color: var(--ink-dim); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink-dim); }

/* Buttons */
.btn-primary {
  display: inline-block; text-decoration: none;
  font: 600 13.5px var(--sans); background: var(--accent); color: #fff;
  border: none; border-radius: 2px; padding: 13px 30px; cursor: pointer; letter-spacing: .2px;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline {
  display: inline-block; text-decoration: none;
  font: 500 12.5px var(--sans); background: none; color: var(--ink-dim);
  border: 1px solid var(--edge); border-radius: 2px; padding: 12px 20px; cursor: pointer;
  transition: border-color .13s ease, color .13s ease;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 8px 14px; font-size: 11.5px; }

/* Section furniture */
.sec { padding: 56px 0; border-top: 1px solid var(--rule); }
.sec:first-of-type { border-top: 0; }
@media (min-width: 760px) { .sec { padding: 78px 0; } }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sec-num {
  font: 600 12px var(--mono); color: var(--accent); letter-spacing: .5px;
  border: 1px solid var(--accent); border-radius: 2px; padding: 2px 7px;
}
.sec-label {
  font: 600 14px var(--sans); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink);
}
.sec h2 {
  font: 400 clamp(28px, 5vw, 42px)/1.15 var(--serif);
  letter-spacing: -.4px; margin: 0 0 14px; max-width: 20ch;
}
.lede { font: 400 clamp(15px, 2vw, 17px)/1.65 var(--sans); color: var(--ink-dim); max-width: 62ch; margin: 0 0 18px; }
.sec p { max-width: 66ch; }

/* Hero */
.hero { padding: 54px 0 44px; }
@media (min-width: 760px) { .hero { padding: 88px 0 68px; } }
.hero-kicker {
  font: 500 10.5px var(--mono); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 20px;
}
.hero h1 {
  font: 400 clamp(38px, 8vw, 76px)/1.05 var(--serif);
  letter-spacing: -1.4px; margin: 0 0 22px; max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { font: 400 clamp(16px, 2.2vw, 19px)/1.6 var(--sans); color: var(--ink-dim); max-width: 56ch; margin: 0 0 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font: 400 11.5px var(--mono); color: var(--ink-faint); margin-top: 18px; letter-spacing: .3px; }

/* Hero splits once there is room for the chart to be legible beside the copy. */
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 54px; } }
.hero-copy h1 { max-width: 14ch; }

/* Chart carousel */
.carousel {
  border: 1px solid var(--rule); border-radius: 3px; background: var(--field);
  padding: 18px 18px 16px; min-width: 0;
}
@media (min-width: 760px) { .carousel { padding: 22px 24px 18px; } }
.carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.car-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.car-label {
  font: 600 10px var(--mono); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-faint);
}
.car-nav { display: flex; gap: 6px; }
.car-arrow {
  width: 26px; height: 26px; display: grid; place-items: center;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-dim); cursor: pointer; padding: 0;
  transition: border-color .13s ease, color .13s ease;
}
.car-arrow svg { width: 14px; height: 14px; }
.car-arrow:hover { border-color: var(--accent); color: var(--accent); }
.car-track { position: relative; height: 240px; }
@media (min-width: 760px) { .car-track { height: 268px; } }
/* Slides crossfade in place. visibility rather than display:none keeps the
   canvas measurable, so Chart.js sizes it correctly while it is still hidden. */
.car-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.car-slide.on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s ease, transform .5s ease, visibility 0s;
}
.car-slide canvas { width: 100% !important; height: 100% !important; }
/* Height is fixed rather than min so a longer caption cannot grow the card and
   shunt the rest of the page down mid-rotation. */
.car-note {
  font: 400 13px/1.65 var(--sans); color: var(--ink-dim);
  margin: 14px 0 0; height: 9em; max-width: 54ch; overflow: hidden;
  transition: opacity .28s ease;
}
@media (min-width: 560px) { .car-note { height: 7em; } }
.car-label { transition: opacity .28s ease; }
.carousel[data-swapping="true"] .car-note,
.carousel[data-swapping="true"] .car-label { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .car-slide, .car-slide.on, .car-note, .car-label { transition: none; transform: none; }
}
.car-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 12px;
}
.car-dots { display: flex; gap: 7px; }
.car-dot {
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  background: none; border: 1px solid var(--edge); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.car-dot.on { background: var(--accent); border-color: var(--accent); }
.car-dot:hover { border-color: var(--accent); }
.car-src { font: 400 9.5px var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--ink-faint); }

/* Verdict specimen */
.specimen {
  border: 1px solid var(--rule); border-radius: 3px; background: var(--field);
  padding: 22px; margin-top: 44px;
}
@media (min-width: 760px) { .specimen { padding: 30px 34px; } }
.specimen-tag {
  font: 600 10px var(--mono); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 14px;
}
.specimen-verdict { font: 400 clamp(18px, 2.6vw, 24px)/1.45 var(--serif); margin: 0 0 20px; letter-spacing: -.2px; }
.specimen-verdict strong { font-weight: 400; color: var(--fail); }
.specimen-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; border-top: 1px solid var(--rule); padding-top: 18px; }
@media (min-width: 620px) { .specimen-stats { grid-template-columns: repeat(4, 1fr); } }
.stat-k { font: 500 9.5px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.stat-v { font: 400 22px var(--mono); letter-spacing: -.5px; }
.stat-v.down { color: var(--fail); }
.stat-v.up { color: var(--pass); }

/* Copy beside a figure. Stacks until there is room for the chart to stay legible. */
.split { display: grid; gap: 34px; align-items: start; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 54px; } }
.split-copy p:last-child { margin-bottom: 0; }
@media (min-width: 1000px) { .split .figure { margin-top: 0; } }

/* Figure: a standalone chart with its own caption */
.figure {
  margin: 40px 0 0; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--field); padding: 18px;
}
@media (min-width: 760px) { .figure { padding: 24px 28px; margin-top: 48px; } }
.figure-head { margin-bottom: 12px; }
.figure-tag {
  font: 600 10px var(--mono); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-faint);
}
.figure-plot { height: 260px; }
@media (min-width: 760px) { .figure-plot { height: 320px; } }
.figure-plot canvas { width: 100% !important; height: 100% !important; }
.figure-cap {
  font: 400 13px/1.7 var(--sans); color: var(--ink-dim);
  border-top: 1px solid var(--rule); margin: 16px 0 0; padding-top: 14px; max-width: 74ch;
}

/* Card grids */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin-top: 30px; }
@media (min-width: 700px) { .grid.g2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 700px) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--paper); padding: 26px 24px; }
.card-ico { width: 22px; height: 22px; color: var(--accent); margin-bottom: 14px; display: block; }
.card h3 { font: 600 14.5px var(--sans); margin: 0 0 8px; letter-spacing: .1px; }
.card p { font: 400 13.5px/1.65 var(--sans); color: var(--ink-dim); margin: 0; max-width: none; }

/* Under the hood: the engine behind the plain-language output */
.engine { margin-top: 56px; border-top: 2px solid var(--ink); padding-top: 32px; }
.engine-kicker {
  font: 500 10.5px var(--mono); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 14px;
}
.engine-h { font: 400 clamp(23px, 3.4vw, 32px)/1.2 var(--serif); letter-spacing: -.3px; margin: 0 0 14px; max-width: 24ch; }
.engine-split { display: grid; gap: 28px; margin-top: 32px; align-items: start; }
@media (min-width: 1000px) { .engine-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; } }

.engine-code { border: 1px solid var(--rule); border-radius: 3px; background: var(--field); overflow: hidden; }
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--rule);
}
.code-file { font: 500 10.5px var(--mono); color: var(--ink-dim); letter-spacing: .4px; }
.code-note {
  font: 500 9px var(--mono); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--edge); border-radius: 2px; padding: 2px 6px;
}
.engine-code pre { margin: 0; padding: 16px 14px; overflow-x: auto; }
.engine-code code {
  font: 400 12px/1.75 var(--mono); color: var(--ink-dim);
  white-space: pre; display: block;
}
.engine-code .k { color: var(--accent); }
.engine-code .fn { color: var(--ink); font-weight: 600; }
.engine-code .b { color: var(--warn); }
.engine-code .n { color: var(--pass); }
.code-cap {
  font: 400 12.5px/1.65 var(--sans); color: var(--ink-faint);
  margin: 0; padding: 12px 14px 14px; border-top: 1px solid var(--rule); max-width: none;
}

.engine-list-head {
  font: 600 10px var(--mono); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.tests { list-style: none; margin: 0; padding: 0; }
.tests li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--rule); padding: 11px 0;
}
.t-name { font: 400 13.5px/1.45 var(--sans); color: var(--ink); }
.t-lib {
  font: 500 9.5px var(--mono); letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-faint); flex: 0 0 auto;
}

.engine-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px;
  border-top: 1px solid var(--rule); margin-top: 32px; padding-top: 22px;
}
@media (min-width: 620px) { .engine-stats { grid-template-columns: repeat(4, 1fr); } }

/* Steps */
.steps { counter-reset: step; margin-top: 44px; display: grid; gap: 34px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 34px; } }
.step { position: relative; padding-top: 20px; border-top: 2px solid var(--ink); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font: 600 11px var(--mono); color: var(--accent); letter-spacing: 1px;
  position: absolute; top: -14px; left: 0;
}
.step h3 { font: 600 14.5px var(--sans); margin: 0 0 8px; }
.step p { font: 400 13.5px/1.65 var(--sans); color: var(--ink-dim); margin: 0; }

/* Platform list */
.plats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.plat {
  font: 500 11px var(--mono); letter-spacing: .6px; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 2px; padding: 7px 11px; color: var(--ink-dim);
}
.plat.verified { border-color: var(--edge); color: var(--ink); }

/* Logo wall. The marks are masks rather than <img>, because currentColor cannot
   reach inside an <img> document: the file supplies the shape and the page
   supplies the colour, so one file serves both themes and the hover state. */
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 38px; margin-top: 30px; }
@media (min-width: 760px) { .logos { gap: 30px 46px; } }
.logo-mark {
  /* Wordmarks share a cap height; the icon-only marks get a touch more so they
     do not read as smaller than the lettering beside them. */
  display: block; height: var(--h, 22px); width: var(--w, 100px);
  background-color: var(--ink-faint);
  -webkit-mask: var(--src) no-repeat center / contain;
  mask: var(--src) no-repeat center / contain;
  transition: background-color .15s ease;
}
.logos a:hover .logo-mark, .logo-mark:hover,
.logo-lockup:hover .logo-mark { background-color: var(--accent); }
/* Icon-only marks carry no wordmark of their own, so the name is set beside
   them in the page's own type rather than faked in the brand's lettering. */
.logo-lockup { display: inline-flex; align-items: center; gap: 9px; }
.logo-word {
  font: 600 16px/1 var(--sans); letter-spacing: -.1px;
  color: var(--ink-faint); transition: color .15s ease; white-space: nowrap;
}
.logo-lockup:hover .logo-word { color: var(--accent); }
/* max-width from the section rule would clamp the used width and let this sit
   back up on the logo row, so it is cleared here. */
.logos .logo-note {
  flex: 0 0 100%; max-width: none; margin: 6px 0 0;
  font: 400 11.5px/1.6 var(--sans); color: var(--ink-faint);
}

/* AI providers and key handling */
.providers { margin-top: 34px; }
.providers-head {
  font: 600 10px var(--mono); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-faint);
}
.providers .plats { margin-top: 12px; }

.keynote {
  margin-top: 34px; border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  border-radius: 3px; background: var(--field); padding: 20px;
}
@media (min-width: 760px) { .keynote { padding: 24px 28px; } }
.keynote-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.keynote-head svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }
.keynote-head span {
  font: 600 10.5px var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink);
}
.keylist { list-style: none; margin: 0; padding: 0; }
.keylist li {
  position: relative; padding-left: 18px; max-width: 72ch;
  font: 400 13.5px/1.7 var(--sans); color: var(--ink-dim); margin-bottom: 9px;
}
.keylist li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--edge);
}
.keynote-foot {
  font: 400 12.5px/1.65 var(--sans); color: var(--ink-faint);
  border-top: 1px solid var(--rule); margin: 16px 0 0; padding-top: 14px; max-width: 72ch;
}

/* Prose (about / faq) */
.prose { max-width: 68ch; }
.prose h2 { font: 400 clamp(24px, 3.6vw, 32px)/1.2 var(--serif); letter-spacing: -.3px; margin: 44px 0 12px; }
.prose h3 { font: 600 15px var(--sans); margin: 32px 0 8px; }
.prose p { font: 400 15px/1.75 var(--sans); color: var(--ink-dim); margin: 0 0 16px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { margin: 0 0 18px; padding-left: 20px; }
.prose li { font: 400 15px/1.75 var(--sans); color: var(--ink-dim); margin-bottom: 8px; }
.prose .pull {
  margin: 26px 0; padding: 0 0 0 20px; border-left: 2px solid var(--accent);
  font: 400 clamp(19px, 2.6vw, 23px)/1.45 var(--serif); color: var(--ink);
  letter-spacing: -.2px;
}
.prose-aside {
  border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 18px;
  font-size: 14px; color: var(--ink-faint);
}
.page-head { padding: 52px 0 8px; }
.page-head h1 { font: 400 clamp(34px, 6vw, 54px)/1.1 var(--serif); letter-spacing: -1px; margin: 0 0 14px; }

/* FAQ */
.faq { margin-top: 30px; border-top: 1px solid var(--rule); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative;
  font: 500 15.5px/1.45 var(--sans); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 26px;
  width: 9px; height: 9px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); transition: transform .16s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq summary:hover { color: var(--accent); }
.faq .ans { padding: 0 20px 22px 0; }
.faq .ans p { font: 400 14.5px/1.7 var(--sans); color: var(--ink-dim); margin: 0 0 14px; max-width: 68ch; }
.faq .ans p:last-child { margin-bottom: 0; }
.faq .ans ul { margin: 0 0 14px; padding-left: 20px; }
.faq .ans li { font: 400 14.5px/1.7 var(--sans); color: var(--ink-dim); margin-bottom: 6px; }

/* Closing CTA */
.cta-band { border-top: 2px solid var(--ink); padding: 56px 0 64px; text-align: center; }
.cta-band h2 { font: 400 clamp(26px, 4.4vw, 38px)/1.15 var(--serif); letter-spacing: -.5px; margin: 0 auto 14px; max-width: 22ch; }
.cta-band p { font: 400 15px/1.65 var(--sans); color: var(--ink-dim); margin: 0 auto 26px; max-width: 50ch; }

/* Footer */
.foot { border-top: 1px solid var(--rule); padding: 26px 0 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { font: 500 10.5px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-dim); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot-note { font: 400 10.5px var(--mono); color: var(--ink-faint); letter-spacing: .4px; }