/* docuinked public site. Loaded after app.css on site pages only.
   White page, one amber band, light display type, warm tinted panels holding real screenshots.
   Ink for text and the primary button, cobalt for links, dark panels only for code. */
:root {
  --s-ink: #0C0E12; --s-text: #3D3A33; --s-soft: #6B665C; --s-line: #E7E2D6;
  --s-cream: #FFF6E0; --s-paper: #F4F1EA; --s-amber: #FFB224; --s-cobalt: #2B44E8;
  --s-wide: 1200px; --s-gutter: 28px; --s-radius: 24px;
}
body.site { background: #fff; color: var(--s-text); font: 400 17px/1.6 var(--sans); }
body.site h1, body.site h2, body.site h3 { color: var(--s-ink); }
body.site a { text-decoration-color: rgba(43, 68, 232, .35); }
body.site .primary { background: var(--s-ink); color: #fff; }
body.site .primary:hover { background: #2A2D33; }
body.site code { background: var(--s-paper); border-color: var(--s-line); color: var(--s-ink); }
body.site pre { background: var(--s-ink); border-color: var(--s-ink); color: #D4D8DF; border-radius: 14px; padding: 20px 22px; font-size: 12.5px; }
body.site pre code { background: none; border: 0; color: inherit; }
body.site p code, body.site li code, body.site td code { overflow-wrap: anywhere; }

/* Utility bar and header */
.site-utility { background: var(--s-cream); color: var(--s-ink); font-size: 13.5px; }
.site-utility .inner { max-width: var(--s-wide); margin: 0 auto; padding: 7px var(--s-gutter); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.site-utility p { margin: 0; }
.site-utility nav { display: flex; gap: 20px; }
.site-utility a { text-decoration: none; }
.site-utility a:hover { text-decoration: underline; }
.site-top { display: flex; align-items: center; gap: 36px; max-width: var(--s-wide); margin: 0 auto; padding: 18px var(--s-gutter); flex-wrap: wrap; row-gap: 12px; }
.site-top .logo span { font-weight: 700; letter-spacing: -.03em; }
.site-top nav { display: flex; gap: 26px; flex: 1; flex-wrap: wrap; }
.site-top nav a { text-decoration: none; color: var(--s-ink); font-weight: 600; font-size: 15.5px; }
.site-top nav a:hover, .site-top nav a[aria-current] { color: var(--s-cobalt); }
.site-account { display: flex; align-items: center; gap: 20px; }
.site-account a:not(.button) { text-decoration: none; font-weight: 600; color: var(--s-ink); font-size: 15.5px; }
.site-account .button { padding: 10px 18px; font-size: 15px; border-radius: 8px; }

/* Main column for article pages; story pages run edge to edge */
.site-main { padding: 0 0 40px; }
.site-main > .crumbs, .site-main > div:not(.story):not(.story-faq), .site-main > article { max-width: var(--s-wide); margin-left: auto; margin-right: auto; padding-left: var(--s-gutter); padding-right: var(--s-gutter); }
.crumbs { font: 500 12px var(--mono); font-stretch: 87%; color: var(--s-soft); padding-top: 26px; }
.crumbs a { text-decoration: none; }
.site-main > div > .prose, .site-main > .prose { padding-top: 26px; }
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; margin-bottom: .4em; }
.prose h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.015em; margin-top: 1.9em; }
.prose h3 { font-size: 1.12rem; font-weight: 700; margin-top: 1.5em; }
.prose .lede, .lede { color: var(--s-text); font-size: 1.2rem; line-height: 1.55; }
.prose .quiet { margin-top: -.3em; color: var(--s-soft); }
.prose a, .story a { color: var(--s-cobalt); }
.prose table, .story table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 14px 0 22px; }
.prose th, .story th { text-align: left; font-weight: 700; color: var(--s-ink); }
.prose th, .prose td, .story th, .story td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--s-line); vertical-align: top; }
.prose li { margin-bottom: .45em; }
.prose blockquote { margin: 18px 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--s-amber); }
.table { overflow-x: auto; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px; padding: 30px 0; border-top: 1px solid var(--s-line); }
.cols h2, .cols h3 { margin-top: 0; }
.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; }
.docs-nav { display: grid; gap: 9px; align-content: start; padding-top: 34px; position: sticky; top: 16px; font-size: .94rem; }
.docs-nav a { text-decoration: none; color: var(--s-soft); }
.docs-nav a[aria-current] { color: var(--s-ink); font-weight: 700; }
.index { list-style: none; padding: 0; margin: 12px 0 0; }
.index li { padding: 16px 0; margin: 0; border-top: 1px solid var(--s-line); }
.index a { font-weight: 700; text-decoration: none; color: var(--s-ink); }
.index a:hover { text-decoration: underline; }
.index p { margin: 4px 0 0; color: var(--s-soft); }
.related { padding-left: 18px; }
.next { margin-top: 56px; padding: 36px 40px; background: var(--s-cream); border-radius: var(--s-radius); }
.next h2 { margin-top: 0; font-weight: 300; font-size: 2rem; letter-spacing: -.02em; }
.drop { border: 1px dashed #D5CEBF; border-radius: 14px; padding: 34px; text-align: center; margin: 16px 0; background: var(--s-paper); }
.drop input[type=file] { max-width: 340px; margin: 12px auto 0; }
#verify-result span { display: block; overflow-wrap: anywhere; }
#verify-result span:first-child { font-weight: 700; }

/* Chevron links: "Explore the API >" */
.more { color: var(--s-cobalt); font-weight: 650; text-decoration: none; white-space: nowrap; }
p.more { margin: 14px 0 0; }
p.more a { color: var(--s-cobalt); font-weight: 650; text-decoration: none; white-space: normal; }
a.more::after, p.more a::after { content: ""; display: inline-block; width: .42em; height: .42em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); margin: 0 0 .1em .45em; vertical-align: middle; transition: transform .15s; }
a.more:hover::after, p.more a:hover::after { transform: translateX(3px) rotate(45deg); }
p.more a:hover, a.more:hover { text-decoration: underline; }

/* Amber band: the hero and the closing call */
.band { background: var(--s-amber); color: var(--s-ink); text-align: center; }
.band-inner { max-width: 980px; margin: 0 auto; padding: 84px var(--s-gutter) 76px; }
.band .crumbs { padding: 0 0 22px; color: rgba(12, 14, 18, .7); }
.band h1 { font-size: clamp(2.6rem, 6.4vw, 5.1rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.02; margin: 0 auto 22px; max-width: 16em; }
.band .lede { font-size: 1.25rem; color: var(--s-ink); max-width: 40em; margin: 0 auto 30px; }
.band .lede a { color: inherit; }
.start { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.start input:not([type=checkbox]) { margin: 0; flex: 1; min-width: 0; font-size: 16px; padding: 14px 16px; border-radius: 8px; background: #fff; color: var(--s-ink); border: 1px solid rgba(12, 14, 18, .25); }
.start input:focus { border-color: var(--s-ink); }
.start button { padding: 14px 22px; font-size: 16px; border-radius: 8px; white-space: nowrap; }
.band .micro { font-size: 14px; margin: 14px 0 0; color: rgba(12, 14, 18, .78); }
.band .lead { margin: 22px 0 0; font-size: 15.5px; }
.band .more { color: var(--s-ink); text-decoration: underline; text-decoration-color: rgba(12, 14, 18, .35); }
.band.close .band-inner { padding: 80px var(--s-gutter); }
.band.close h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 300; letter-spacing: -.02em; margin: 0 0 28px; }
.site-main > .band.close { margin-top: 96px; }

/* Story sections */
.story > * { max-width: var(--s-wide); margin-left: auto; margin-right: auto; padding-left: var(--s-gutter); padding-right: var(--s-gutter); }
.story { padding-top: 8px; }
.story > p.more { text-align: center; margin-top: 36px; }
.story h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 18px; }
.story h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; }
.story img { display: block; max-width: 100%; height: auto; }
.center { text-align: center; margin-top: 112px; }
.story .center > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.center p { font-size: 1.12rem; }

/* Works-with row: names set in type, one calm grey */
.works { text-align: center; padding-top: 44px; padding-bottom: 36px; }
.works p { margin: 0; color: var(--s-soft); font-size: 15px; }
.works p:first-child { color: var(--s-ink); font-size: 16px; }
.works p:first-child strong { font-weight: 650; }
.works ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 38px; padding: 0; margin: 22px auto; }
.works li { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: #8A857A; }

/* Proof row: standards, not customers */
ul.proof { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding-top: 0; padding-bottom: 0; border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
ul.proof li { padding: 26px 18px 26px 0; display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; align-content: start; }
ul.proof svg { color: var(--s-ink); grid-row: span 2; margin-top: 3px; }
ul.proof span { font-weight: 700; color: var(--s-ink); font-size: 15px; line-height: 1.35; }
ul.proof small { color: var(--s-soft); font-size: 14px; line-height: 1.4; }

/* Tabs */
.tabset { margin-top: 112px; }
.tabset > h2 { text-align: center; }
.tab-row { display: flex; justify-content: center; gap: 6px; margin: 30px auto 28px; border-bottom: 1px solid var(--s-line); overflow-x: auto; }
.tab-row button { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 14px 18px; font: 650 16.5px var(--sans); color: var(--s-soft); margin-bottom: -1px; white-space: nowrap; }
.tab-row button[aria-selected=true] { color: var(--s-ink); border-bottom-color: var(--s-ink); }
.tab-row button:hover { color: var(--s-ink); }
.tab-panel { background: var(--s-cream); border-radius: var(--s-radius); overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); column-gap: 48px; padding: 56px 0 0 56px; margin-top: 24px; }
.tab-panel > :not(img) { grid-column: 1; }
.tab-panel > h3 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.015em; }
.tab-panel > p { font-size: 1.08rem; }
.tab-panel > img { grid-column: 2; grid-row: 1 / span 6; align-self: end; border-radius: 12px 0 0 0; box-shadow: 0 1px 0 var(--s-line), 0 12px 40px rgba(12, 14, 18, .10); }
.is-tabbed .tab-panel > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Steps: numbered, each with its real screen in a panel */
.steps { margin-top: 112px; }
.steps > h2 { text-align: center; margin-bottom: 40px; }
.steps ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: block; font-size: 3rem; font-weight: 300; line-height: 1; color: var(--s-ink); margin-bottom: 12px; }
.steps li h3 { font-size: 1.35rem; }
.steps li img { margin-top: 18px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 16px; background: var(--s-paper); border: 10px solid var(--s-paper); }
.steps li img[width="390"], .steps li img[width="350"] { object-fit: contain; object-position: center; }
.steps li img[width="612"] { object-fit: cover; object-position: top center; }

/* Value grid: thin rules, no boxes */
.grid { margin-top: 112px; }
.grid > h2 { text-align: center; margin-bottom: 36px; }
.grid ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; }
.grid li { border-top: 1px solid var(--s-line); padding: 26px 0 34px; }
.grid li p { margin: 0; }

/* Honest comparison */
.compare { margin-top: 112px; }
.compare > h2 { text-align: center; }
.compare .table { max-width: 900px; margin: 30px auto 0; }
.compare td:first-child { font-weight: 650; color: var(--s-ink); }
.compare td:nth-child(2) { color: var(--s-ink); font-weight: 650; }
.compare > p { max-width: 900px; margin: 18px auto 0; font-size: 15px; color: var(--s-soft); }

/* Split: copy on one side, the real thing on the other */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; margin-top: 112px; }
.split.flip .copy { order: 2; }
.split .copy > :last-child { margin-bottom: 0; }
.split .copy ul { padding-left: 20px; }
.split .copy li { margin-bottom: .5em; }
.split .media { min-width: 0; }
.split .media pre { margin: 0 0 14px; }
.split .media:has(img) { background: var(--s-cream); border-radius: var(--s-radius); padding: 40px 0 0 40px; overflow: hidden; display: flex; gap: 20px; align-items: flex-end; }
.split.flip .media:has(img) { background: var(--s-paper); }
.split .media:has(img) img { border-radius: 12px 0 0 0; box-shadow: 0 12px 40px rgba(12, 14, 18, .10); min-width: 0; }
.split .media:has(img[width="390"]) { padding: 40px 40px 0; justify-content: center; }
.split .media img[width="390"] { width: calc(50% - 10px); max-width: 300px; border-radius: 14px 14px 0 0; }
.split .media img[width="612"] { border-radius: 12px 12px 0 0; margin-right: 40px; }

/* Questions */
.story-faq { max-width: 820px; margin: 112px auto 0; padding: 0 var(--s-gutter); }
.story-faq h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 300; letter-spacing: -.02em; text-align: center; margin: 0 0 24px; }
.story-faq h3 { font-size: 1.12rem; font-weight: 700; margin: 0; padding-top: 22px; border-top: 1px solid var(--s-line); }
.story-faq h3 + * { margin-top: 8px; }
.story-faq p { margin-bottom: 22px; }

/* Install line on the home band */
.install { display: inline-flex; max-width: 100%; background: var(--s-ink); color: #D4D8DF; border-radius: 8px; padding: 12px 16px; font-size: 12.5px; margin-top: 26px; overflow-x: auto; white-space: nowrap; }
.install b { color: #8A857A; font-weight: 400; }

/* Footer */
.site-foot { background: var(--s-paper); margin-top: 0; }
.site-main + .site-foot { margin-top: 0; }
.site-foot div.inner { max-width: var(--s-wide); margin: 0 auto; padding: 48px var(--s-gutter) 36px; display: flex; gap: 56px; flex-wrap: wrap; font-size: .94rem; }
.site-foot nav { display: grid; gap: 8px; min-width: 150px; align-content: start; }
.site-foot a { text-decoration: none; color: var(--s-text); }
.site-foot a:hover { color: var(--s-cobalt); }
.site-foot strong { color: var(--s-ink); font-weight: 700; font-size: .94rem; margin-bottom: 4px; }
.site-line { max-width: var(--s-wide); margin: 0 auto; padding: 0 var(--s-gutter) 40px; font-size: .88rem; color: var(--s-soft); }

@media (max-width: 1000px) {
  ul.proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-panel { grid-template-columns: minmax(0, 1fr); padding: 36px 0 0 32px; }
  .tab-panel > :not(img) { padding-right: 32px; }
  .tab-panel > img { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split.flip .copy { order: 0; }
}
@media (max-width: 760px) {
  :root { --s-gutter: 16px; }
  body.site { font-size: 16px; }
  .site-utility .inner { font-size: 12.5px; }
  .site-utility p { display: none; }
  .site-utility nav { margin-left: auto; }
  .site-top { gap: 12px 20px; padding-top: 14px; padding-bottom: 14px; }
  .site-top nav { order: 3; flex-basis: 100%; gap: 8px 18px; }
  .site-top nav a { font-size: 15px; }
  .site-account { margin-left: auto; }
  .site-account a:not(.button) { display: none; }
  .band-inner { padding: 52px var(--s-gutter) 48px; }
  .band .lede { font-size: 1.08rem; }
  .start { flex-direction: column; }
  .center, .tabset, .steps, .grid, .compare, .split, .story-faq { margin-top: 72px; }
  ul.proof, .grid ul, .steps ol { grid-template-columns: minmax(0, 1fr); }
  ul.proof li { padding: 16px 0; }
  .tab-row { justify-content: flex-start; flex-wrap: wrap; overflow: visible; gap: 0 4px; }
  .tab-row button { padding: 10px 8px; font-size: 15px; }
  .tab-panel { padding: 28px 0 0 20px; }
  .tab-panel > :not(img) { padding-right: 20px; }
  .split .media:has(img) { padding: 24px 0 0 20px; }
  .split .media:has(img[width="390"]) { padding: 24px 16px 0; }
  .split .media img[width="612"] { margin-right: 20px; }
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 16px; }
  .next { padding: 26px 22px; }
  .site-foot div.inner { gap: 28px; padding-top: 32px; }
  .site-main > .band.close { margin-top: 64px; }
}