/* Base + shared components */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ds-bg); color: var(--ds-ink);
  font: 400 16px/1.55 var(--ds-font-sans);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: var(--ds-ink-2); text-decoration: none; transition: color var(--ds-fast) ease; }
a:hover { color: var(--ds-sage); }
::selection { background: var(--ds-sage); color: var(--ds-bg); }
:focus-visible { outline: 2px solid var(--ds-sage); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p, ul, ol, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; padding: 10px 14px; background: var(--ds-sage); color: var(--ds-bg); border-radius: 8px; }

.container { max-width: var(--ds-container); margin: 0 auto; padding-inline: var(--ds-gutter); }
@media (max-width: 640px) { :root { --ds-gutter: 20px; } }

/* Type helpers */
.eyebrow { font: 500 11.5px/1 var(--ds-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ds-sage); }
.label { font: 500 10.5px/1.2 var(--ds-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ds-ink-muted); }
.serif { font-family: var(--ds-font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--ds-sage); }
.h2 { font-size: var(--ds-fs-h2); font-weight: 600; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.lead { font-size: 17px; color: var(--ds-ink-3); text-wrap: pretty; max-width: 480px; }
.sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 820px; margin-bottom: 48px; }
.sec-head--split .sec-head { margin-bottom: 0; max-width: none; }
.sec-head--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; align-items: end; max-width: none; margin-bottom: 56px; }
.section { padding-block: 112px 64px; scroll-margin-top: 72px; }

/* Icons — mask so they inherit currentColor */
.icon { display: inline-block; width: 1.1em; height: 1.1em; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-arrow { --i: url(../icons/ds-arrow-right.svg); }
.i-ext   { --i: url(../icons/ds-external.svg); }
.i-check { --i: url(../icons/ds-check.svg); }
.i-plus  { --i: url(../icons/ds-plus.svg); }
.i-drag  { --i: url(../icons/ds-drag.svg); }
.i-menu  { --i: url(../icons/ds-menu.svg); }
.i-close { --i: url(../icons/ds-close.svg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 8px 26px;
  font: 600 16px/1.2 var(--ds-font-sans); text-align: center; text-wrap: balance; border-radius: var(--ds-r-pill); border: 0; cursor: pointer;
  transition: background var(--ds-fast) ease, border-color var(--ds-fast) ease, transform var(--ds-fast) ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { cursor: progress; opacity: .7; transform: none; }
.btn--light { background: var(--ds-ink); color: var(--ds-bg); }
.btn--light:hover { background: #fff; color: var(--ds-bg); }
.btn--sage { background: var(--ds-sage); color: var(--ds-bg); }
.btn--sage:hover { background: var(--ds-sage-hover); color: var(--ds-bg); }
.btn--ghost { background: transparent; color: var(--ds-ink); font-weight: 500; border: 1px solid var(--ds-line-3); }
.btn--ghost:hover { border-color: var(--ds-sage); background: var(--ds-surface-2); color: #fff; }
.btn--sm { min-height: 40px; padding: 6px 18px; font-size: 14px; }
.btn--md { min-height: 44px; padding: 6px 18px; font-size: 14.5px; }

/* Chips */
.chip { display: inline-flex; padding: 6px 12px; font: 400 12px/1.3 var(--ds-font-mono); color: var(--ds-ink);
  background: var(--ds-bg); border: 1px solid var(--ds-line-3); border-radius: var(--ds-r-pill); white-space: nowrap; }
.chip--solid { background: var(--ds-sage); color: var(--ds-bg); border-color: transparent; }
.chip--outline { background: transparent; font: 400 13.5px/1.3 var(--ds-font-sans); padding: 7px 13px; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__row { display: flex; justify-content: space-between; gap: 12px; }
.input { width: 100%; height: 52px; padding: 0 16px; font: 400 15.5px/1.5 var(--ds-font-sans); color: #fff;
  background: var(--ds-bg); border: 1px solid var(--ds-line-2); border-radius: var(--ds-r-md);
  transition: border-color var(--ds-fast) ease, box-shadow var(--ds-fast) ease; }
textarea.input { height: auto; padding: 14px 16px; resize: vertical; }
.input::placeholder { color: var(--ds-ink-faint); }
.input:focus { outline: none; border-color: var(--ds-sage); box-shadow: var(--ds-focus-ring); }
.input[aria-invalid="true"] { border-color: var(--ds-clay); }

@keyframes ds-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ds-pulse { 0% { box-shadow: 0 0 0 0 rgba(158,186,160,.55); } 100% { box-shadow: 0 0 0 10px rgba(158,186,160,0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}