/* ==========================================================================
   SnapRender site layer (Oct 2026 redesign): the look of the homepage and /ai-agents for every public page.
   Loaded by views/partials/theme-head.ejs on the site surface, and by the homepage and /ai-agents directly.

   - Tokens use the same names as public-immutable/agents/vf.css (tests/site-system.test.ts keeps them equal):
     dark at :root, light under html[data-theme="light"].
   - Classes are prefixed sr- and nothing here resets global elements, so Tailwind utilities keep working inside.
   - Tailwind colours follow the site palette in theme.css; this file adds the chrome and the shared components.

   Cached for a year under a content hash (/css/theme/site.css?v=...): never reference it without the hash.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --sc-canvas: #08090c;
  --sc-surface: #11131a;
  --sc-ink: #eef0f6;
  --sc-ink-soft: #b2b8c6;
  --sc-accent: #9aa2ff;
  --sc-accent-ink: #08090c;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 13%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 24%, transparent);
  --vf-brand: #4f46e5;
  --vf-brand-hover: #5a52f0;
  --vf-raised: #171a23;
  --vf-ok: #4fd1a5;
  --vf-warn: #f5b454;
  --vf-tint: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  --vf-code-bg: #0a0b10;
  --vf-code-ink: #e9ebf2;
  --vf-code-soft: #9ba2b3;
  --vf-code-line: rgb(255 255 255 / 0.1);
  --sc-font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --sc-font-text: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --sr-bar-h: 64px;
  --sr-maxw: 80rem;
  --sr-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --sr-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --sr-shadow: 0 18px 44px rgb(0 0 0 / 0.38), 0 2px 6px rgb(0 0 0 / 0.25);
}
html[data-theme="light"] {
  --sc-canvas: #f5f6f8;
  --sc-surface: #ffffff;
  --sc-ink: #0d0f14;
  --sc-ink-soft: #4a5060;
  --sc-accent: #4f46e5;
  --sc-accent-ink: #ffffff;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 11%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 20%, transparent);
  --vf-brand: #4f46e5;
  --vf-brand-hover: #4338ca;
  --vf-raised: #ffffff;
  --vf-ok: #08754f;
  --vf-warn: #b45309;
  --vf-tint: color-mix(in oklab, var(--sc-ink) 4%, transparent);
  --vf-code-bg: #11131a;
  --sr-shadow: 0 18px 44px rgb(30 35 60 / 0.14), 0 2px 6px rgb(30 35 60 / 0.08);
}

/* --------------------------------------------------------------- base */
body.sr {
  overflow-x: clip;
  background-color: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.sr :is(h1, h2) { font-stretch: 112%; letter-spacing: -0.03em; }
body.sr h1 { font-weight: 720; }
body.sr h2 { font-weight: 680; }
body.sr h3 { font-stretch: 106%; letter-spacing: -0.01em; }
body.sr :is(code, kbd, pre, samp) { font-family: var(--sc-font-mono); }
body.sr ::selection { background: color-mix(in oklab, var(--sc-accent) 38%, transparent); color: var(--sc-ink); }
body.sr :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { scroll-padding-top: calc(var(--sr-bar-h) + 0.75rem); }

/* A headline phrase in the brand colour (gradient on dark, flat indigo on light). */
.sr-hl { color: var(--sc-accent); }
html:not([data-theme="light"]) .sr-hl { background: linear-gradient(100deg, #b3b9ff, #8b8cff 60%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------- buttons */
.sr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 46px; padding: 0 1.25rem; border-radius: 999px; border: 1px solid transparent;
  font: 620 0.95rem/1 var(--sc-font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--sr-ease), border-color 160ms, color 160ms, transform 160ms var(--sr-ease);
}
.sr-btn:active { transform: translateY(1px) scale(0.985); }
.sr-btn--primary { background: var(--vf-brand); color: #fff; box-shadow: 0 6px 18px rgb(79 70 229 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.18); }
.sr-btn--primary:hover { background: var(--vf-brand-hover); color: #fff; }
.sr-btn--ghost { border-color: var(--sc-hairline-strong); color: var(--sc-ink); background: color-mix(in oklab, var(--sc-surface) 50%, transparent); }
.sr-btn--ghost:hover { border-color: color-mix(in oklab, var(--sc-ink) 45%, transparent); }
.sr-btn--lg { min-height: 52px; padding: 0 1.6rem; font-size: 1rem; }

/* ================================================================ nav (partials/nav.ejs) */
.sr-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--sr-bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 max(var(--sr-gutter), calc((100vw - var(--sr-maxw)) / 2 + var(--sr-gutter)));
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-text);
  color: var(--sc-ink);
}
.sr-bar__mark { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; text-decoration: none; color: var(--sc-ink); font-weight: 700; font-size: 1.08rem; font-stretch: 108%; letter-spacing: -0.01em; }
.sr-bar__mark svg { width: 28px; height: 28px; flex: none; }
.sr-bar__nav { display: flex; align-items: center; gap: 0.25rem; }
.sr-bar__links { display: flex; align-items: center; gap: 0.05rem; margin-right: 0.35rem; }
.sr-bar__link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.7rem; border: 0; border-radius: 8px; background: none; color: color-mix(in oklab, var(--sc-ink) 80%, var(--sc-ink-soft)); text-decoration: none; font: 540 0.92rem/1 var(--sc-font-text); cursor: pointer; white-space: nowrap; }
.sr-bar__link:hover { color: var(--sc-ink); }
.sr-bar .sr-btn { min-height: 38px; padding: 0 1rem; margin-left: 0.3rem; gap: 0.28em; font-size: 0.9rem; }
.sr-bar .sr-theme-toggle { color: var(--sc-ink-soft); }
.sr-bar .sr-theme-toggle:hover { color: var(--sc-ink); background: var(--vf-tint); }
.sr-bar__menu { display: none; position: relative; width: 40px; height: 40px; border: 0; background: none; color: var(--sc-ink); border-radius: 10px; cursor: pointer; order: 3; }
.sr-bar__menu i { position: absolute; left: 11px; right: 11px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform 220ms var(--sr-ease), top 220ms var(--sr-ease); }
.sr-bar__menu i:first-of-type { top: 15px; }
.sr-bar__menu i:last-of-type { top: 23px; }
.sr-bar__menu[aria-expanded="true"] i:first-of-type { top: 19px; transform: rotate(45deg); }
.sr-bar__menu[aria-expanded="true"] i:last-of-type { top: 19px; transform: rotate(-45deg); }
.sr-bar__nav > .sr-bar__links { order: 0; }
.sr-bar__nav > .sr-theme-toggle { order: 1; }
.sr-bar__nav > .sr-bar__cta { order: 2; }

/* The panel hangs from the bar, centred on the page, so a wide menu never runs off either edge. */
.sr-dd { position: static; }
.sr-dd__btn svg { width: 12px; height: 12px; opacity: 0.6; transition: transform 200ms var(--sr-ease); }
.sr-dd__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sr-dd__panel {
  position: absolute; left: 50%; top: calc(100% + 0.3rem); width: min(54rem, calc(100vw - 2 * var(--sr-gutter))); padding: 0.75rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 0.75rem;
  border-radius: 16px; border: 1px solid var(--sc-hairline-strong);
  background: var(--sc-surface); box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity 180ms, transform 220ms var(--sr-ease), visibility 0s linear 220ms;
}
.sr-dd__panel--2.sr-dd__panel--spot { width: min(60rem, calc(100vw - 2 * var(--sr-gutter))); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 14rem; }
.sr-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -1.9rem; height: 1.9rem; }
.sr-dd.is-open .sr-dd__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 180ms, transform 220ms var(--sr-ease), visibility 0s; }
.sr-dd__group { min-width: 0; }
.sr-dd__label { margin: 0.35rem 0.65rem 0.3rem; font-size: 0.76rem; font-weight: 600; color: var(--sc-ink-soft); }
.sr-dd__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.05rem; }
.sr-dd__item { display: flex; gap: 0.7rem; align-items: center; padding: 0.5rem 0.65rem; border-radius: 11px; text-decoration: none; color: var(--sc-ink); transition: background-color 150ms; }
.sr-dd__item:hover, .sr-dd__item:focus-visible { background: var(--vf-tint); }
.sr-dd__item > span:last-child { min-width: 0; }
.sr-dd__item b { display: block; font-size: 0.88rem; font-weight: 640; }
.sr-dd__item small { display: block; margin-top: 0.12rem; font-size: 0.77rem; line-height: 1.35; color: var(--sc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-dd__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(140deg, #6366f1, #4338ca); box-shadow: 0 4px 12px rgb(79 70 229 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.sr-dd__item:hover .sr-dd__ic { background: linear-gradient(140deg, #818cf8, #4f46e5); }
.sr-dd__ic svg, .sr-ic { width: 18px; height: 18px; }
.sr-dd__spot { align-self: start; margin-top: 0.35rem; display: grid; align-content: start; gap: 0.35rem; padding: 0.6rem; border-radius: 12px; background: var(--vf-code-bg); color: #e9ebf2; text-decoration: none; transition: transform 200ms var(--sr-ease); }
.sr-dd__spot:hover { transform: translateY(-2px); }
.sr-dd__spot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; margin-bottom: 0.3rem; }
.sr-dd__spot b { font-size: 0.9rem; color: #fff; }
.sr-dd__spot small { font-size: 0.76rem; line-height: 1.4; color: #9ba2b3; }

@media (max-width: 1000px) {
  .sr-bar__menu { display: inline-block; }
  .sr-bar__links {
    position: fixed; inset: var(--sr-bar-h) 0 auto 0; margin: 0; padding: 0.5rem var(--sr-gutter) 1.25rem;
    display: grid; align-content: start; gap: 0; height: calc(100svh - var(--sr-bar-h)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--sc-canvas); border-bottom: 1px solid var(--sc-hairline);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 200ms, transform 200ms var(--sr-ease), visibility 0s linear 200ms;
  }
  .sr-bar__links.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms, transform 200ms var(--sr-ease), visibility 0s; }
  .sr-bar__links > .sr-bar__link, .sr-dd__btn { width: 100%; justify-content: space-between; padding: 0.85rem 0.25rem; font-size: 1rem; border-bottom: 1px solid var(--sc-hairline); border-radius: 0; }
  .sr-dd__panel, .sr-dd__panel--2.sr-dd__panel--spot { position: static; width: auto; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0.3rem 0 0.6rem; grid-template-columns: minmax(0, 1fr); }
  .sr-dd__panel::before { display: none; }
  .sr-dd.is-open .sr-dd__panel { display: grid; transform: none; }
  .sr-dd__spot { display: none; }
}
@media (max-width: 520px) { .sr-wide { display: none; } .sr-bar .sr-btn { padding: 0 0.85rem; min-height: 36px; margin-left: 0.15rem; } }
@media (max-width: 360px) { .sr-bar__mark span { display: none; } }

/* ================================================================ footer (partials/footer.ejs) */
.sr-foot { position: relative; z-index: 2; background: var(--sc-canvas); border-top: 1px solid var(--sc-hairline); color: var(--sc-ink); font-family: var(--sc-font-text); padding: clamp(3rem, 6vw, 5rem) var(--sr-gutter) 4rem; }
.sr-foot > div { max-width: var(--sr-maxw); margin: 0 auto; padding: 0; }
.sr-foot > div > div:first-child { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem; }
.sr-foot h4 { margin: 0 0 1rem; font-size: 0.84rem; font-weight: 650; color: var(--sc-ink); }
.sr-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.sr-foot ul > * + * { margin-top: 0 !important; }
.sr-foot li a { color: var(--sc-ink-soft); text-decoration: none; font-size: 0.86rem; }
.sr-foot li a:hover { color: var(--sc-ink); }
.sr-foot > div > div:last-child { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--sc-hairline); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; color: var(--sc-ink-soft); font-size: 0.82rem; }
.sr-foot > div > div:last-child > div { display: flex; align-items: center; gap: 0.6rem; }
.sr-foot > div > div:last-child svg { width: 22px; height: 22px; }
.sr-foot > div > div:last-child span { color: var(--sc-ink); font-weight: 650; }
.sr-foot > div > div:last-child p { margin: 0; }
@media (max-width: 960px) { .sr-foot > div > div:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sr-foot > div > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================ shared components (views/partials/site/) */
.sr-wrap { width: 100%; max-width: var(--sr-maxw); margin: 0 auto; padding: 0 var(--sr-gutter); }

/* Hero: text first, an aside (picture, code) on wide screens. */
.sr-hero { position: relative; overflow: clip; padding: calc(var(--sr-bar-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem)) 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.sr-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.sr-hero__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 54rem; }
.sr-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.1rem; padding: 0.38rem 0.8rem; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); color: var(--sc-accent); font-size: 0.82rem; font-weight: 620; }
.sr-hero__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sr-hero h1 { margin: 0; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.4rem); line-height: 1.0; letter-spacing: -0.04em; text-wrap: balance; color: var(--sc-ink); }
.sr-hero__lede { margin: 1.25rem 0 0; max-width: 38rem; color: var(--sc-ink-soft); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem); line-height: 1.6; }
.sr-hero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.65rem; }
.sr-hero__trust { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; color: var(--sc-ink-soft); font-size: 0.86rem; }
.sr-hero__trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.sr-hero__trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sc-accent); }
.sr-hero__aside { position: relative; min-width: 0; }
@media (max-width: 960px) { .sr-hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* Section head. */
.sr-section { padding: clamp(3rem, 2rem + 3vw, 5.5rem) 0; }
.sr-section--band { background: color-mix(in oklab, var(--sc-surface) 55%, var(--sc-canvas)); border-block: 1px solid var(--sc-hairline); }
.sr-head { display: grid; gap: 0.9rem; max-width: 52rem; margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); }
.sr-head h2 { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.04; color: var(--sc-ink); text-wrap: balance; }
.sr-head p { margin: 0; color: var(--sc-ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 46rem; }
.sr-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* Cards with an icon badge. */
.sr-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sr-card { position: relative; display: grid; align-content: start; gap: 0.55rem; padding: 1.25rem 1.25rem 1.35rem; border-radius: 18px; border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); color: var(--sc-ink); text-decoration: none; transition: border-color 200ms, transform 300ms var(--sr-ease); }
a.sr-card:hover { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); transform: translateY(-3px); }
.sr-card h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.2; }
.sr-card p { margin: 0; color: var(--sc-ink-soft); font-size: 0.93rem; line-height: 1.55; }
.sr-list { margin: 0.3rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; color: var(--sc-ink-soft); font-size: 0.92rem; }
.sr-list li { display: flex; gap: 0.55rem; }
.sr-list li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.55em; border-radius: 50%; background: var(--sc-accent); }
.sr-badge { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: linear-gradient(140deg, #6366f1, #4338ca); box-shadow: 0 6px 16px rgb(79 70 229 / 0.35); }
.sr-badge svg { width: 18px; height: 18px; }
.sr-tile { color: #fff; background: linear-gradient(140deg, #6366f1, #4338ca); box-shadow: 0 6px 16px rgb(79 70 229 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.22); }
@media (max-width: 1000px) { .sr-cards { --cols: 2 !important; } }
@media (max-width: 640px) { .sr-cards { --cols: 1 !important; } }

/* Picture cards: a real capture above the text. */
.sr-pic { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; border: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-canvas) 60%, var(--sc-surface)); }
.sr-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Picture link cards (tools, use cases, features): the capture on top, the text below. --cols sets the columns;
   .sr-pcard--wide takes the whole row, picture beside the text. */
.sr-pcards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.sr-pcard { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); color: var(--sc-ink); text-decoration: none; transition: border-color 200ms, transform 300ms var(--sr-ease), box-shadow 300ms var(--sr-ease); }
a.sr-pcard:hover { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); transform: translateY(-3px); box-shadow: var(--sr-shadow); }
.sr-pcard__pic { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0c11; border-bottom: 1px solid var(--sc-hairline); }
.sr-pcard__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 700ms var(--sr-ease); }
a.sr-pcard:hover .sr-pcard__pic img { transform: scale(1.03); }
.sr-pcard__body { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.3rem 1.3rem; }
.sr-pcard :is(h2, h3) { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: var(--sc-ink); }
.sr-pcard p { margin: 0; color: var(--sc-ink-soft); font-size: 0.94rem; line-height: 1.55; }
.sr-pcard__kicker { font-size: 0.78rem; font-weight: 640; color: var(--sc-accent); }
.sr-pcard__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }
.sr-pcard__tags li { padding: 0.24rem 0.6rem; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); font-size: 0.74rem; font-weight: 560; color: var(--sc-ink-soft); }
.sr-pcard__go { margin-top: auto; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--sc-accent); font-weight: 640; font-size: 0.9rem; }
.sr-pcard__go::after { content: ""; width: 0.42em; height: 0.42em; border: solid currentColor; border-width: 1.7px 1.7px 0 0; transform: rotate(45deg); transition: transform 200ms var(--sr-ease); }
a.sr-pcard:hover .sr-pcard__go::after { transform: translateX(3px) rotate(45deg); }
.sr-pcards > li { display: flex; min-width: 0; }
.sr-pcards > li > .sr-pcard { flex: 1; }
.sr-pcard--wide, .sr-pcards > li:has(> .sr-pcard--wide) { grid-column: 1 / -1; }
.sr-pcard--wide { flex-direction: row; }
.sr-pcard--wide .sr-pcard__pic { width: 60%; border-bottom: 0; border-right: 1px solid var(--sc-hairline); }
.sr-pcard--wide .sr-pcard__body { justify-content: center; gap: 0.7rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); }
.sr-pcard--wide :is(h2, h3) { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.08; }
.sr-pcard--wide p { font-size: 1.02rem; }
.sr-pcard--wide .sr-pcard__go { margin-top: 0.5rem; }
.sr-post .sr-pcard__pic { aspect-ratio: 1200 / 630; }
.sr-post.sr-pcard--wide .sr-pcard__pic { aspect-ratio: 1200 / 630; }
.sr-post__meta { display: flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; color: var(--sc-ink-soft); }
.sr-post__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sr-post time { margin-top: auto; padding-top: 0.4rem; font-size: 0.78rem; color: var(--sc-ink-soft); }
.sr-pcards--mini .sr-pcard__body { padding: 0.9rem 1rem 1rem; gap: 0.35rem; }
.sr-pcards--mini .sr-pcard :is(h2, h3) { font-size: 1.02rem; }
.sr-pcards--mini .sr-pcard p { font-size: 0.86rem; }
@media (max-width: 1000px) { .sr-pcards { --cols: 2 !important; } }
@media (max-width: 760px) { .sr-pcard--wide { flex-direction: column; } .sr-pcard--wide .sr-pcard__pic { width: auto; border-right: 0; border-bottom: 1px solid var(--sc-hairline); } }
@media (max-width: 640px) { .sr-pcards { --cols: 1 !important; } }

/* Plans (pricing): one joined table of clickable tiles, the same as the homepage pricing. */
.sr-plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; max-width: 76rem; margin: 0 auto; background: var(--sc-hairline-strong); border: 1px solid var(--sc-hairline-strong); border-radius: 20px; }
.sr-plan { position: relative; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.4rem 1.2rem 1.25rem; background: var(--sc-surface); color: var(--sc-ink); text-decoration: none; transition: background-color 200ms, transform 200ms var(--sr-ease), box-shadow 200ms; }
.sr-plan:first-child { border-radius: 19px 0 0 19px; }
.sr-plan:last-child { border-radius: 0 19px 19px 0; }
.sr-plan:hover { z-index: 1; background: color-mix(in oklab, var(--vf-brand) 14%, var(--sc-surface)); transform: translateY(-3px); box-shadow: 0 0 0 1px var(--sc-accent), 0 18px 40px color-mix(in oklab, var(--vf-brand) 25%, transparent); }
.sr-plan:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -2px; }
.sr-plan--free { background: color-mix(in oklab, var(--vf-brand) 10%, var(--sc-surface)); }
.sr-plan--pop { background: color-mix(in oklab, var(--vf-brand) 6%, var(--sc-surface)); box-shadow: inset 0 3px 0 var(--vf-brand); }
.sr-plan__name { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.95rem; font-weight: 660; color: var(--sc-accent); }
.sr-plan__name em { font-style: normal; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--vf-brand); color: #fff; font-size: 0.68rem; font-weight: 650; white-space: nowrap; }
.sr-plan__price { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); font-weight: 720; font-stretch: 108%; letter-spacing: -0.03em; line-height: 1.05; }
.sr-plan__price small { font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--sc-ink-soft); }
.sr-plan__qty { font-size: 0.9rem; color: var(--sc-ink); }
.sr-plan__each { font: 600 0.78rem/1.3 var(--sc-font-mono); color: var(--sc-ink-soft); }
.sr-plan__list, .sr-plan__limits { display: grid; gap: 0.4rem; margin-top: 0.7rem; padding-top: 0.8rem; border-top: 1px solid var(--sc-hairline); font-size: 0.84rem; line-height: 1.35; color: var(--sc-ink-soft); }
.sr-plan__list span { display: flex; gap: 0.45rem; align-items: flex-start; }
.sr-plan__list svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--sc-accent); }
.sr-plan__limits b { color: var(--sc-ink); font-weight: 650; }
.sr-plan__go { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 40px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent); font-size: 0.86rem; font-weight: 640; color: var(--sc-ink); transition: background-color 200ms, color 200ms; }
.sr-plan__limits + .sr-plan__go { margin-top: 1.1rem; }
.sr-plan__go::after { content: ""; width: 0.4em; height: 0.4em; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.sr-plan:hover .sr-plan__go, .sr-plan--free .sr-plan__go, .sr-plan--pop .sr-plan__go { background: var(--vf-brand); border-color: var(--vf-brand); color: #fff; }
#interval-toggle [aria-pressed="true"] .sr-save { color: #d1fae5; }
@media (max-width: 1100px) {
  .sr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
  .sr-plan:first-child, .sr-plan:last-child { border-radius: 0; }
  .sr-plan--free { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .sr-plans { grid-template-columns: minmax(0, 1fr); } }

/* Tables: price comparisons and plan facts. */
.sr-table-wrap { overflow-x: auto; border: 1px solid var(--sc-hairline-strong); border-radius: 18px; background: var(--sc-surface); }
.sr-table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.92rem; }
.sr-table th, .sr-table td { padding: 0.8rem 1rem; text-align: right; border-bottom: 1px solid var(--sc-hairline); white-space: nowrap; }
.sr-table thead th { font-size: 0.82rem; font-weight: 600; color: var(--sc-ink-soft); }
.sr-table th[scope="row"], .sr-table thead th:first-child { text-align: left; }
.sr-table tbody th { font-weight: 600; color: var(--sc-ink); }
.sr-table td { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.sr-table td.is-low { color: var(--sc-ink); font-weight: 700; }
.sr-table tr:last-child th, .sr-table tr:last-child td { border-bottom: 0; }
.sr-table tr.is-us { background: color-mix(in oklab, var(--vf-brand) 12%, transparent); }
.sr-table tr.is-us th { color: var(--sc-accent); }
.sr-table tr.is-us td { color: var(--sc-ink); font-weight: 650; }
.sr-note { margin: 0.8rem 0 0; max-width: 72ch; font-size: 0.8rem; line-height: 1.55; color: var(--sc-ink-soft); }
.sr-note a { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .sr-table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--sc-surface); } }

/* "Works with" brand tiles (partials/home-works.ejs, shared with the homepage). */
.sr-works { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.sr-works--center { justify-content: center; text-align: center; }
.sr-works .hm-works__label { margin: 0; font-size: 0.84rem; color: var(--sc-ink-soft); white-space: nowrap; }
.sr-works .hm-works__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sr-works--center .hm-works__list { justify-content: center; }
.sr-works .hm-works__list a { display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 0.75rem 0 0.55rem; border-radius: 10px; border: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-surface) 80%, transparent); color: var(--sc-ink); text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: border-color 160ms, transform 160ms var(--sr-ease); }
.sr-works .hm-works__list a:hover { border-color: color-mix(in oklab, var(--sc-accent) 60%, transparent); transform: translateY(-1px); }
.sr-works .hm-works__list svg, .sr-works .hm-works__list img { flex: none; width: 18px; height: 18px; display: block; }
.sr-works .hm-works__list img { border-radius: 4px; }
.sr-works .hm-works__cut { fill: var(--sc-surface); }

/* Product shot under a hero (feature and use-case pages): a real-capture scene in a frame. */
.sr-shot { position: relative; width: min(60rem, calc(100% - 2 * var(--sr-gutter))); margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--sc-hairline-strong); background: #0b0c11; box-shadow: var(--sr-shadow); }
.sr-shot img { display: block; width: 100%; height: auto; }

/* Pills: links that look like links. */
.sr-pills { margin: 1.4rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sr-pills a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent); background: color-mix(in oklab, var(--vf-brand) 10%, transparent); color: var(--sc-ink); text-decoration: none; font-size: 0.86rem; font-weight: 580; transition: border-color 160ms, background-color 160ms; }
.sr-pills a::after { content: ""; width: 0.38em; height: 0.38em; border: solid var(--sc-accent); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.sr-pills a:hover { background: color-mix(in oklab, var(--vf-brand) 22%, transparent); border-color: var(--sc-accent); }

/* Code panel: dark in both themes, with tabs and a copy button. */
.sr-code { border-radius: 16px; overflow: hidden; background: var(--vf-code-bg); border: 1px solid rgb(255 255 255 / 0.1); color: var(--vf-code-ink); box-shadow: var(--sr-shadow); }
.sr-code__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.55rem 0.5rem 0.9rem; border-bottom: 1px solid var(--vf-code-line); }
.sr-code__tabs { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.sr-code__tabs button { padding: 0.4rem 0.6rem; border: 0; border-radius: 7px; background: none; color: var(--vf-code-soft); font: 560 0.78rem/1 var(--sc-font-text); cursor: pointer; }
.sr-code__tabs button:hover { color: #fff; }
.sr-code__tabs button[aria-selected="true"] { background: rgb(255 255 255 / 0.08); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); }
.sr-code pre { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; font: 0.82rem/1.7 var(--sc-font-mono); color: var(--vf-code-ink); background: none; }
.sr-code pre[hidden] { display: none; }
.sr-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 32px; padding: 0 0.8rem; border-radius: 8px; border: 1px solid rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.08); color: #fff; font: 600 0.76rem/1 var(--sc-font-text); cursor: pointer; }
.sr-copy:hover { background: rgb(255 255 255 / 0.14); }
.sr-copy[data-copied] { color: #34d399; }

/* FAQ: two dense columns on wide screens. */
.sr-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.sr-faq details { border-top: 1px solid var(--sc-hairline); align-self: start; }
.sr-faq summary { list-style: none; cursor: pointer; position: relative; padding: 0.95rem 2.2rem 0.95rem 0; font-weight: 620; font-size: 1rem; color: var(--sc-ink); }
.sr-faq summary::-webkit-details-marker { display: none; }
.sr-faq summary::after { content: "+"; position: absolute; right: 0.3rem; top: 0.85rem; color: var(--sc-accent); font: 500 1.2rem/1 var(--sc-font-mono); transition: transform 160ms var(--sr-ease); }
.sr-faq details[open] summary::after { transform: rotate(45deg); }
.sr-faq details > :not(summary) { margin: 0 0 1rem; color: var(--sc-ink-soft); line-height: 1.65; font-size: 0.95rem; }
.sr-faq details a { color: var(--sc-accent); }
@media (max-width: 900px) { .sr-faq { grid-template-columns: minmax(0, 1fr); } }

/* Breadcrumbs. */
.sr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: 0.82rem; color: var(--sc-ink-soft); }
.sr-crumbs a { color: var(--sc-ink-soft); text-decoration: none; }
.sr-crumbs a:hover { color: var(--sc-ink); }
.sr-crumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }

/* Closing band (partials/site/close.ejs): black in both themes, the cropped brand mark on the right. */
.sr-close { position: relative; overflow: clip; display: grid; align-items: center; min-height: min(40rem, 80vh); background: #050608; color: #eef0f6; padding: clamp(4.5rem, 3rem + 5vw, 7.5rem) 0; border-top: 1px solid rgb(255 255 255 / 0.08); }
.sr-close__mark { position: absolute; right: max(-14vw, -16rem); top: 50%; width: min(64vh, 50vw, 38rem); aspect-ratio: 1; transform: translateY(-50%); }
.sr-close__mark svg { width: 100%; height: 100%; display: block; }
.sr-close__inner { position: relative; display: grid; gap: 1.25rem; }
.sr-close h2 { margin: 0; max-width: 14ch; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.5rem); line-height: 0.98; color: #fff; text-wrap: balance; }
.sr-close h2 .sr-hl, .sr-close h2 .gradient-text { background: linear-gradient(100deg, #b3b9ff, #8b8cff 60%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.sr-close__lede { margin: 0; max-width: 36rem; font-size: clamp(1.08rem, 1rem + 0.45vw, 1.35rem); font-weight: 600; line-height: 1.45; color: #fff; }
.sr-close__proof { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; color: #b2b8c6; font-size: 0.95rem; }
.sr-close__proof b { color: #fff; font-weight: 700; margin-right: 0.25rem; }
.sr-close__proof a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(255 255 255 / 0.3); }
.sr-close__proof a:hover { color: #fff; text-decoration-color: #9aa2ff; }
.sr-close__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.4rem; }
.sr-close .sr-btn--ghost { color: #eef0f6; border-color: rgb(255 255 255 / 0.25); background: rgb(255 255 255 / 0.04); }
main > :not(.sr-section, .sr-hero) + .sr-close { margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
@media (max-width: 860px) { .sr-close__mark { right: -45vw; width: 100vw; opacity: 0.28; } }

/* Free tools: the aperture closes and opens while a capture renders (partials/site/shutter.ejs), and the result
   opens out of it (.sr-develop on the result card, played each time the card is shown). */
.sr-shutter { display: inline-block; width: 56px; height: 56px; color: var(--vf-brand); filter: drop-shadow(0 8px 22px rgb(79 70 229 / 0.45)); }
.sr-shutter__blades, .sr-shutter__hole { transform-box: view-box; transform-origin: 16px 16px; animation: sr-shutter 1.5s var(--sr-ease) infinite; }
.sr-shutter__hole { animation-name: sr-shutter-hole; }
@keyframes sr-shutter { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-58deg); } }
@keyframes sr-shutter-hole { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.22); } }
.sr-develop:not(.hidden) { animation: sr-develop 760ms var(--sr-ease) both; }
@keyframes sr-develop { from { clip-path: circle(0% at 50% 40%); opacity: 0.4; } to { clip-path: circle(110% at 50% 40%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sr-shutter__blades, .sr-shutter__hole { animation: none; }
  .sr-develop:not(.hidden) { animation: none; }
}

/* Inline conversion box (partials/cta-inline.ejs): a quiet surface card with one button. */
.sr-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.4rem 1.5rem; border-radius: 18px; border: 1px solid var(--sc-hairline-strong); background: linear-gradient(120deg, color-mix(in oklab, var(--vf-brand) 12%, var(--sc-surface)), var(--sc-surface) 60%); font-family: var(--sc-font-text); }
.sr-inline__text { flex: 1 1 22rem; min-width: 0; }
.sr-inline p { margin: 0; }
.sr-inline__head { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-weight: 700; font-stretch: 106%; letter-spacing: -0.015em; color: var(--sc-ink); }
.sr-inline__sub { margin-top: 0.35rem !important; color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.55; }
.sr-inline__proof { margin-top: 0.5rem !important; color: var(--sc-ink-soft); font-size: 0.82rem; }
.sr-inline .sr-btn { flex: none; }

/* Sticky sign-up bar (partials/cta-sticky.ejs): a floating dark pill, the same in both themes. */
.sr-sticky { position: fixed; z-index: 40; left: 50%; bottom: 1rem; width: min(44rem, calc(100% - 1.5rem)); transform: translateX(-50%); padding: 0.5rem 0.5rem 0.5rem 1.1rem; border-radius: 16px; background: rgb(14 16 22 / 0.92); border: 1px solid rgb(255 255 255 / 0.14); box-shadow: 0 18px 44px rgb(0 0 0 / 0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #eef0f6; font-family: var(--sc-font-text); transition: transform 320ms var(--sr-ease); }
.sr-sticky.translate-y-full { transform: translate(-50%, calc(100% + 2rem)); }
.sr-sticky p { margin: 0; font-size: 0.9rem; color: #c9cede; }
.sr-sticky .sr-btn { min-height: 38px; padding: 0 1rem; font-size: 0.88rem; }
.sr-sticky__x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: #9ba2b3; cursor: pointer; }
.sr-sticky__x:hover { color: #fff; background: rgb(255 255 255 / 0.08); }

/* Scroll reveal: settled by default; only animates when site.js marks the page. */
html.sr-reveal-on .sr-reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--sr-ease), transform 600ms var(--sr-ease); }
html.sr-reveal-on .sr-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.sr-reveal-on .sr-reveal { opacity: 1; transform: none; transition: none; } }

/* One accent. Older pages tinted every card a different hue; on the site those decorative hues all resolve to the
   brand ramp. Semantic colours keep their meaning: green and emerald (success), red (errors), amber and yellow
   (warnings). The hued elements repeat the mapping so it also holds inside dark islands (solid fills keep the light
   ramp there). */
html body.sr:not(.sr-own),
html body.sr:not(.sr-own) :is([class*="violet-"], [class*="purple-"], [class*="indigo-"], [class*="sky-"], [class*="blue-"], [class*="cyan-"], [class*="teal-"], [class*="pink-"], [class*="rose-"], [class*="fuchsia-"], [class*="orange-"], [class*="lime-"]) {
  --c-violet-50: var(--c-brand-50); --c-violet-100: var(--c-brand-100); --c-violet-200: var(--c-brand-200); --c-violet-300: var(--c-brand-300); --c-violet-400: var(--c-brand-400); --c-violet-500: var(--c-brand-500);
  --c-violet-600: var(--c-brand-600); --c-violet-700: var(--c-brand-700); --c-violet-800: var(--c-brand-800); --c-violet-900: var(--c-brand-900); --c-violet-950: var(--c-brand-900); --c-purple-50: var(--c-brand-50);
  --c-purple-100: var(--c-brand-100); --c-purple-200: var(--c-brand-200); --c-purple-300: var(--c-brand-300); --c-purple-400: var(--c-brand-400); --c-purple-500: var(--c-brand-500); --c-purple-600: var(--c-brand-600);
  --c-purple-700: var(--c-brand-700); --c-purple-800: var(--c-brand-800); --c-purple-900: var(--c-brand-900); --c-purple-950: var(--c-brand-900); --c-indigo-50: var(--c-brand-50); --c-indigo-100: var(--c-brand-100);
  --c-indigo-200: var(--c-brand-200); --c-indigo-300: var(--c-brand-300); --c-indigo-400: var(--c-brand-400); --c-indigo-500: var(--c-brand-500); --c-indigo-600: var(--c-brand-600); --c-indigo-700: var(--c-brand-700);
  --c-indigo-800: var(--c-brand-800); --c-indigo-900: var(--c-brand-900); --c-indigo-950: var(--c-brand-900); --c-sky-50: var(--c-brand-50); --c-sky-100: var(--c-brand-100); --c-sky-200: var(--c-brand-200);
  --c-sky-300: var(--c-brand-300); --c-sky-400: var(--c-brand-400); --c-sky-500: var(--c-brand-500); --c-sky-600: var(--c-brand-600); --c-sky-700: var(--c-brand-700); --c-sky-800: var(--c-brand-800);
  --c-sky-900: var(--c-brand-900); --c-sky-950: var(--c-brand-900); --c-blue-50: var(--c-brand-50); --c-blue-100: var(--c-brand-100); --c-blue-200: var(--c-brand-200); --c-blue-300: var(--c-brand-300);
  --c-blue-400: var(--c-brand-400); --c-blue-500: var(--c-brand-500); --c-blue-600: var(--c-brand-600); --c-blue-700: var(--c-brand-700); --c-blue-800: var(--c-brand-800); --c-blue-900: var(--c-brand-900);
  --c-blue-950: var(--c-brand-900); --c-cyan-50: var(--c-brand-50); --c-cyan-100: var(--c-brand-100); --c-cyan-200: var(--c-brand-200); --c-cyan-300: var(--c-brand-300); --c-cyan-400: var(--c-brand-400);
  --c-cyan-500: var(--c-brand-500); --c-cyan-600: var(--c-brand-600); --c-cyan-700: var(--c-brand-700); --c-cyan-800: var(--c-brand-800); --c-cyan-900: var(--c-brand-900); --c-cyan-950: var(--c-brand-900);
  --c-teal-50: var(--c-brand-50); --c-teal-100: var(--c-brand-100); --c-teal-200: var(--c-brand-200); --c-teal-300: var(--c-brand-300); --c-teal-400: var(--c-brand-400); --c-teal-500: var(--c-brand-500);
  --c-teal-600: var(--c-brand-600); --c-teal-700: var(--c-brand-700); --c-teal-800: var(--c-brand-800); --c-teal-900: var(--c-brand-900); --c-teal-950: var(--c-brand-900); --c-pink-50: var(--c-brand-50);
  --c-pink-100: var(--c-brand-100); --c-pink-200: var(--c-brand-200); --c-pink-300: var(--c-brand-300); --c-pink-400: var(--c-brand-400); --c-pink-500: var(--c-brand-500); --c-pink-600: var(--c-brand-600);
  --c-pink-700: var(--c-brand-700); --c-pink-800: var(--c-brand-800); --c-pink-900: var(--c-brand-900); --c-pink-950: var(--c-brand-900); --c-rose-50: var(--c-brand-50); --c-rose-100: var(--c-brand-100);
  --c-rose-200: var(--c-brand-200); --c-rose-300: var(--c-brand-300); --c-rose-400: var(--c-brand-400); --c-rose-500: var(--c-brand-500); --c-rose-600: var(--c-brand-600); --c-rose-700: var(--c-brand-700);
  --c-rose-800: var(--c-brand-800); --c-rose-900: var(--c-brand-900); --c-rose-950: var(--c-brand-900); --c-fuchsia-50: var(--c-brand-50); --c-fuchsia-100: var(--c-brand-100); --c-fuchsia-200: var(--c-brand-200);
  --c-fuchsia-300: var(--c-brand-300); --c-fuchsia-400: var(--c-brand-400); --c-fuchsia-500: var(--c-brand-500); --c-fuchsia-600: var(--c-brand-600); --c-fuchsia-700: var(--c-brand-700); --c-fuchsia-800: var(--c-brand-800);
  --c-fuchsia-900: var(--c-brand-900); --c-fuchsia-950: var(--c-brand-900); --c-orange-50: var(--c-brand-50); --c-orange-100: var(--c-brand-100); --c-orange-200: var(--c-brand-200); --c-orange-300: var(--c-brand-300);
  --c-orange-400: var(--c-brand-400); --c-orange-500: var(--c-brand-500); --c-orange-600: var(--c-brand-600); --c-orange-700: var(--c-brand-700); --c-orange-800: var(--c-brand-800); --c-orange-900: var(--c-brand-900);
  --c-orange-950: var(--c-brand-900); --c-lime-50: var(--c-brand-50); --c-lime-100: var(--c-brand-100); --c-lime-200: var(--c-brand-200); --c-lime-300: var(--c-brand-300); --c-lime-400: var(--c-brand-400);
  --c-lime-500: var(--c-brand-500); --c-lime-600: var(--c-brand-600); --c-lime-700: var(--c-brand-700); --c-lime-800: var(--c-brand-800); --c-lime-900: var(--c-brand-900); --c-lime-950: var(--c-brand-900);
}

/* Code with a corner Copy button (button[onclick^="copyCode"] after the pre): keep the first line clear of it. */
body.sr .relative > pre:has(+ button[onclick^="copyCode"]) { padding-right: 4.5rem; }
body.sr .relative > pre:has(+ button[onclick^="copyCode"].bg-gray-800) { padding-top: 2.4rem; }

/* Older Tailwind link buttons take the shape of .sr-btn (pill, same weight); form buttons keep their own shape. */
body.sr a:is(.bg-brand-600, .bg-white, .bg-gray-900):is(.rounded-xl, .rounded-lg):is(.px-5, .px-6, .px-7, .px-8) { border-radius: 999px; font-weight: 620; }
body.sr a.bg-brand-600:is(.rounded-xl, .rounded-lg):is(.px-5, .px-6, .px-7, .px-8) { box-shadow: 0 6px 18px rgb(79 70 229 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.18); }
/* Near-black buttons and step dots would vanish on the dark canvas: invert them there. */
html.dark body.sr a.bg-gray-900:not(pre), html.dark body.sr button.bg-gray-900 { background: #eef0f6; color: #0d0f14; }
html.dark body.sr a.bg-gray-900:hover, html.dark body.sr button.bg-gray-900:hover { background: #fff; }
html.dark body.sr .rounded-full.bg-gray-900 { background: var(--vf-brand); color: #fff; }

/* FAQ accordions on older pages read as the shared FAQ rows (.sr-faq): hairline separators, no boxes. */
body.sr details.group:is(.border, .rounded-xl):not(.lg\:hidden) { border-width: 1px 0 0; border-color: var(--sc-hairline); border-radius: 0; background: none; box-shadow: none; padding: 0; margin-top: 0; }
body.sr details.group:is(.border, .rounded-xl):not(.lg\:hidden) > summary { padding: 0.95rem 0; font-size: 1rem; font-weight: 620; color: var(--sc-ink); }
body.sr details.group:is(.border, .rounded-xl):not(.lg\:hidden) > :not(summary) { padding-left: 0; padding-right: 0; }
body.sr details.group:is(.border, .rounded-xl):not(.lg\:hidden) > p { padding-bottom: 1rem; color: var(--sc-ink-soft); line-height: 1.65; }
body.sr .space-y-3 > details.group + details.group, body.sr .space-y-4 > details.group + details.group { margin-top: 0; }

/* Hero washes ("from-brand-50 via-white to-white") end in the page canvas, not white, so no seam shows below them. */
html body.sr .to-white { --tw-gradient-to: var(--sc-canvas) var(--tw-gradient-to-position); }
html body.sr .via-white { --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--sc-canvas) var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* Inline code in running text may break, so a long identifier never widens the page on a phone. */
body.sr :is(p, li, td) > code { overflow-wrap: anywhere; }

/* Form controls take the brand colour in light too (theme.css sets it for dark). */
html:not(.dark) body.sr :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--vf-brand); }
/* Code: no programming ligatures (=> and !== stay as typed), and hero ledes avoid one-word last lines. */
:is(body.sr, body.vf) :is(pre, code, kbd, samp) { font-variant-ligatures: none; }
body.sr :is(.sr-hero__lede, section > div > p.mt-4, section > div > p.mt-5, section > div > p.mt-6) { text-wrap: pretty; }

/* ------------------------------------------------- bridge: older Tailwind pages
   Pages built before the redesign each carried their own highlight gradient and hero glow. These rules give every
   one of them the homepage highlight and the brand glow. A page with its own accent (the Claude page) opts out
   with body.sr-own. */
html body.sr:not(.sr-own) .gradient-text { background: none; color: var(--sc-accent); -webkit-text-fill-color: currentColor; animation: none; filter: none; }
html:not([data-theme="light"]) body.sr:not(.sr-own) .gradient-text { background: linear-gradient(100deg, #b3b9ff, #8b8cff 60%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
html body.sr:not(.sr-own) .hero-glow::before { background: radial-gradient(ellipse at center, rgb(79 70 229 / 0.16), rgb(124 58 237 / 0.06) 40%, transparent 70%); }
html[data-theme="light"] body.sr:not(.sr-own) .hero-glow::before { background: radial-gradient(ellipse at center, rgb(79 70 229 / 0.09), rgb(124 58 237 / 0.03) 40%, transparent 70%); }

/* ================================================================ feature pages (Oct 2026 value pass) */
/* Text beside a product picture. --flip puts the picture first on wide screens. */
.sr-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.sr-split--flip > :first-child { order: 2; }
.sr-split__pic { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--sc-hairline-strong); background: #0b0c11; box-shadow: var(--sr-shadow); }
.sr-split__pic img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .sr-split { grid-template-columns: minmax(0, 1fr); } .sr-split--flip > :first-child { order: 0; } }
/* A real sequence: numbered steps. */
.sr-steps { margin: 0; padding: 0; list-style: none; counter-reset: sr-step; display: grid; gap: 1.1rem; }
.sr-steps li { counter-increment: sr-step; position: relative; padding-left: 3.1rem; }
.sr-steps li::before { content: counter(sr-step); position: absolute; left: 0; top: -0.1rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: #fff; background: linear-gradient(140deg, #6366f1, #4338ca); box-shadow: 0 6px 16px rgb(79 70 229 / 0.35); }
.sr-steps b { display: block; font-size: 1.05rem; color: var(--sc-ink); margin-bottom: 0.25rem; }
.sr-steps p { margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.6; }
.sr-steps :not(pre) > code, .sr-ways :not(pre) > code { font-family: var(--sc-font-mono); font-size: 0.86em; padding: 0.08em 0.35em; border-radius: 6px; background: color-mix(in oklab, var(--vf-brand) 12%, transparent); color: var(--sc-ink); }
/* Two ways to do the same thing (no code / code). */
.sr-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.sr-ways > * { min-width: 0; }
.sr-way { display: grid; align-content: start; gap: 0.75rem; padding: 1.4rem; border-radius: 18px; border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); }
.sr-way h3 { margin: 0; font-size: 1.15rem; color: var(--sc-ink); }
.sr-way > p { margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.6; }
.sr-way .sr-code { box-shadow: none; }
@media (max-width: 900px) { .sr-ways { grid-template-columns: minmax(0, 1fr); } }
/* Feature pages, value pass 2 (content extraction, batch, PDF, webhooks, signed URLs, SDKs, thumbnails, previews). */
/* Text tables: left-aligned cells that wrap (a type or plan, then a sentence). */
.sr-table--text { min-width: 0; }
.sr-table--text :is(th, td) { text-align: left; white-space: normal; vertical-align: top; line-height: 1.5; }
.sr-table--text th[scope="row"] { width: 1%; white-space: nowrap; }
@media (max-width: 640px) {
  .sr-table--text thead { display: none; }
  .sr-table--text tr { display: block; padding: 0.85rem 1rem; border-bottom: 1px solid var(--sc-hairline); }
  .sr-table--text tr:last-child { border-bottom: 0; }
  .sr-table--text :is(th, td) { display: block; width: auto; padding: 0; border: 0; white-space: normal; }
  .sr-table--text th[scope="row"] { position: static; background: none; margin-bottom: 0.3rem; }
  .sr-table--text td + td { margin-top: 0.3rem; }
}
/* A whole-card link inside a card list fills its cell. */
.sr-cards > li:has(> a.sr-card) { display: flex; }
.sr-cards > li > a.sr-card { flex: 1; }
/* Inline code in running copy reads as a chip, as it does in steps. */
:is(.sr-card, .sr-head, .sr-table, .sr-faq, .sr-note, .sr-hero__lede) :not(pre) > code { font-family: var(--sc-font-mono); font-size: 0.86em; padding: 0.08em 0.35em; border-radius: 6px; background: color-mix(in oklab, var(--vf-brand) 12%, transparent); color: var(--sc-ink); }
/* Links inside running copy take the accent and an underline. */
:is(.sr-head, .sr-card, .sr-way) p a:not(.sr-btn), .sr-table td a:not(.sr-btn) { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 3px; }
.sr-way h3 { font-weight: 700; }