/* One design for the site's public pages (owner, 2026-10-23: "make sure we have unified design language across all of
   those pages, with same size margin spaces fonts and all"). Every page of the Resources tab row (Overview, Help, Learn,
   Blocks, Showcases, Videos, Guides, Compare, Changelog, API) and How it works, Templates and Industries load it after
   their own styles. The page width and gutter, the space under the header or the tab row, the titles, the lede, sections,
   cards, chips and search boxes come from here: write a new public page with these tokens and classes (pg-*), never with
   numbers of its own. dev/unify.mjs (ci.sh unify) fails when a page drifts. Always light. ASCII only. */
:root{
  --pg-w:1160px;            /* the wrap, padding included: 1120 px of content, its left edge at 160 px on a 1440 px screen */
  --pg-gut:20px;            /* the side gutter, on a computer and a phone */
  --pg-top:22px;            /* from the bottom of the tab row (or of the header) to the first line of the page */
  --t-hub:44px;             /* the title of a page with a hero: a section's first page, a story, a comparison */
  --t-read:38px;            /* the title of a reading page: an article, an entry, a block, a template */
  --t-phone:27px;           /* every page title on a phone */
  --t-lede:19px;--t-lede-phone:15.5px;
  --t-h2:30px;--t-h2-phone:24px;
  --sec-gap:44px;           /* the space above each section */
  --card-pad:18px;--card-sh:0 1px 2px rgba(15,27,45,.06),0 10px 24px -12px rgba(15,27,45,.25);
  --ctl-h:38px;             /* buttons, fields, search boxes and chip rows */
  --pg-sans:'Avenir Next',Avenir,'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* the wrap */
.pg-wrap{max-width:var(--pg-w);margin:0 auto;padding:var(--pg-top) var(--pg-gut) 70px;box-sizing:border-box}
/* crumbs, eyebrow, title and lede: the same on every page */
.pg-crumbs,.bd-crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:400 13px/1.4 var(--sans,var(--pg-sans));color:var(--muted,#5C6B82);margin:0 0 18px}
.pg-crumbs a,.bd-crumbs a{color:var(--muted,#5C6B82);text-decoration:none;font-weight:400}
.pg-crumbs a:hover,.bd-crumbs a:hover{color:var(--accent,#233F99)}
.bd-crumbs svg{width:11px;height:11px;opacity:.7}
.pg-eyebrow,.in-eyebrow{display:block;width:fit-content;font:500 12px/1.4 var(--sans,var(--pg-sans));letter-spacing:.06em;text-transform:uppercase;color:var(--accent,#233F99);margin-bottom:10px}
.pg-hero{padding:8px 0 22px}
.pg-hero h1,.kb-hero h1,.in-hero h1,.hero h1,.hw-top h1,.pa-hero h1,.cm-hero h1{font-family:var(--sans,var(--pg-sans));font-size:var(--t-hub);line-height:1.1;letter-spacing:-.02em;font-weight:600;color:var(--ink,#0F1B2D);margin:0 0 14px;text-wrap:balance}
.pg-read h1,.kb-main h1,.bd-head h1,.tp-head h1{font-family:var(--sans,var(--pg-sans));font-size:var(--t-read);line-height:1.12;letter-spacing:-.02em;font-weight:600}
.pg-lede,.in-lede,.hero>p{font-family:var(--sans,var(--pg-sans));font-size:var(--t-lede);line-height:1.55;color:var(--ink-2,#3A4860);max-width:62ch;margin:0 0 22px}
.pg-hero .pg-lede:last-child,.hero>p:last-child{margin-bottom:0}
/* sections */
.pg-sec{padding:var(--sec-gap) 0 6px;scroll-margin-top:130px}
.pg-sec>h2,.in-sec>h2{font-family:var(--sans,var(--pg-sans));font-size:var(--t-h2);line-height:1.2;font-weight:600;letter-spacing:-.015em;color:var(--ink,#0F1B2D);margin:0 0 12px}
.pg-sec>p{font-size:16px;line-height:1.6;color:var(--ink-2,#3A4860);max-width:72ch;margin:0 0 16px}
/* a card */
.pg-card{background:#fff;border:1px solid var(--line,#D9E0EA);border-radius:var(--r,10px);padding:var(--card-pad);box-shadow:var(--card-sh)}
/* a search box: one height everywhere */
.pg-q,.in-q,.bk-search,.sc-search{display:flex;align-items:center;gap:8px;height:var(--ctl-h);box-sizing:border-box;padding:0 14px;background:#fff;border:1px solid var(--line,#D9E0EA);border-radius:var(--r,10px);color:var(--muted,#5C6B82)}
.pg-q:focus-within,.in-q:focus-within,.bk-search:focus-within,.sc-search:focus-within{border-color:var(--accent,#233F99);box-shadow:0 0 0 3px var(--accent-soft,#E3E9F7)}
.pg-q svg,.in-q svg,.bk-search svg,.sc-search svg{width:18px;height:18px;flex:none}
.pg-q input,.in-q input,.bk-search input,.sc-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink,#0F1B2D)}
/* chips: the chosen one a white pill on a grey track, never a solid fill */
.pg-chips,.sc-chips{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;background:var(--track,#EEF1F6);border-radius:var(--r,10px);box-sizing:border-box;min-height:var(--ctl-h)}
.pg-chips>button,.pg-chips>a,.sc-chip{height:30px;padding:0 12px;border:0;border-radius:var(--r,10px);background:none;font:500 13.5px var(--sans,var(--pg-sans));color:var(--ink-2,#3A4860);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.pg-chips>button:hover,.pg-chips>a:hover,.sc-chip:hover{color:var(--ink,#0F1B2D);background:rgba(255,255,255,.6)}
.pg-chips>.on,.sc-chip.on,.sc-chip.on:hover{background:#fff;color:var(--ink,#0F1B2D);box-shadow:inset 0 0 0 1px var(--line,#D9E0EA),0 1px 2px rgba(15,27,45,.06)}
.sc-chip span,.sc-chip.on span{color:var(--muted,#5C6B82);margin-left:5px;font-weight:500}
@media (max-width:760px){
  :root{--t-lede:var(--t-lede-phone);--t-h2:var(--t-h2-phone);--sec-gap:34px}
  .pg-hero h1,.kb-hero h1,.in-hero h1,.in-hero.has-film h1,.hero h1,.hw-top h1,.pa-hero h1,.cm-hero h1,.pg-read h1,.kb-main h1,.bd-head h1,.tp-head h1{font-size:var(--t-phone);line-height:1.16;letter-spacing:-.015em}
  .pg-chips,.sc-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .pg-chips::-webkit-scrollbar,.sc-chips::-webkit-scrollbar{display:none}
}
/* the page's ground, for pages that do not load the app's stylesheet (Guides, API) */
.pg-bg{background:radial-gradient(1100px 600px at 10% 0%,#F4F7FC 0,transparent 60%),radial-gradient(900px 600px at 100% 100%,#DCE4F4 0,transparent 60%),#EEF2F7;background-attachment:fixed;min-height:100vh}
/* the headings inside a reading page (an article, a block's page) */
:root{--t-h2-read:24px}
.kb-body h2,.bd-main h2{font-size:var(--t-h2-read)}
@media (max-width:760px){:root{--t-h2-read:21px}}