/* docs.scriben.ai design system — shared by every page on this site.
   Extracted from index.html when the Zapier guide became a second page.
   Two pages inlining their own copy is how a second interpretation of the
   same brand starts, which is the thing the tokens comment below forbids. */
  /* Design system is mcp.scriben.ai's, unchanged. Two sites, one brand: the
     tokens and hairline grids are lifted verbatim rather than re-derived,
     because a second interpretation of the same brand is how two pages start
     looking like two products. */
  :root{
    --ink:#231f18;          /* warm near-black — the dark field */
    --cream:#fbf3e2;
    --paper:#fffdf8;
    --line:#e8dcc2;         /* hairline on cream */
    --gold:#b07d1e;         /* gold on cream */
    --gold-lit:#d9a94a;     /* gold on ink — lifted for contrast */
    --soft:#6b6459;         /* body text on cream */
    --soft-ink:#a49a89;     /* body text on ink */
    --rule-ink:rgba(251,243,226,.10);
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font:16px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1060px;margin:0 auto;padding:0 36px}
  a{color:inherit}

  /* ============ navigation ============
     The bar is independent from the document grid so it stays pinned over a
     long reference page without either rail affecting its width. */
  nav.top{position:sticky;top:0;z-index:20;background:var(--ink);border-bottom:1px solid var(--rule-ink)}
  .nav-in{max-width:1060px;margin:0 auto;padding:0 36px;height:62px;display:flex;align-items:center;gap:11px}
  /* Vera carries her own circular frame, so no border box around her. */
  .mark{width:30px;height:30px;border-radius:50%;flex:none;display:block}
  .brand{font-size:14.5px;font-weight:600;letter-spacing:-.008em;color:var(--cream)}
  .brand span{color:var(--soft-ink);font-weight:400}
  .nav-end{margin-left:auto;display:flex;gap:26px;font-size:13.5px;align-items:center}
  .nav-end a{color:var(--soft-ink);text-decoration:none;transition:color .15s}
  .nav-end a:hover,.nav-end a.on{color:var(--gold-lit)}
  /* The only call to action on the page, so it is the only thing with a frame. */
  .nav-key{border:1px solid rgba(251,243,226,.2);border-radius:7px;padding:7px 13px;font-size:13px}
  .nav-key:hover{border-color:var(--gold-lit)}

  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
  .hero-copy{min-width:0}
  .tag{font:11.5px/1 var(--mono);letter-spacing:.16em;color:var(--gold);margin:0 0 20px}
  h1{font-size:56px;line-height:1.06;letter-spacing:-.035em;font-weight:600;margin:0 0 22px;
     max-width:15ch;text-wrap:balance}
  .lede{font-size:19px;line-height:1.6;color:var(--soft);margin:0 0 42px;max-width:52ch;text-wrap:pretty}

  .cmd{display:flex;align-items:center;gap:14px;max-width:500px;
       background:var(--ink);border:1px solid var(--ink);
       border-radius:9px;padding:14px 14px 14px 18px}
  .cmd code{font:14.5px/1.45 var(--mono);color:var(--cream);flex:1;white-space:normal}
  .cmd code .p{color:var(--soft-ink)}
  .cmd code .host,.cmd code .path{white-space:nowrap}
  .copy{border:1px solid rgba(251,243,226,.18);background:transparent;color:var(--soft-ink);
        border-radius:6px;padding:7px 13px;font:500 12.5px/1 inherit;cursor:pointer;flex:none;
        transition:color .15s,border-color .15s}
  .copy:hover,.copy[data-done="1"]{color:var(--gold-lit);border-color:var(--gold-lit)}
  .req{font:11.5px/1 var(--mono);color:var(--soft);letter-spacing:.11em;margin:20px 0 0}

  /* Response sample sits in the hero where the MCP page puts its video: the
     highest-signal thing an API page can show is a real request and its answer. */
  .sample{border:1px solid var(--ink);border-radius:12px;background:var(--ink);overflow:hidden}
  .sample-bar{display:flex;align-items:center;gap:9px;padding:12px 17px;border-bottom:1px solid rgba(251,243,226,.08);
              font:11.5px/1 var(--mono);letter-spacing:.05em;color:rgba(251,243,226,.34)}
  .sample-bar b{color:var(--gold-lit);font-weight:500}
  .sample pre{margin:0;padding:20px 22px 24px;overflow-x:auto;font:12.5px/1.75 var(--mono);color:#c9c0af}


  /* ============ cream field ============ */
  section{padding:78px 0;border-top:1px solid var(--line);scroll-margin-top:62px}
  section:first-of-type{border-top:0}
  .label{font:11.5px/1 var(--mono);letter-spacing:.16em;color:var(--gold);margin:0 0 28px;text-transform:uppercase}
  h2{font-size:29px;line-height:1.22;letter-spacing:-.024em;font-weight:600;margin:0 0 14px;text-wrap:balance}
  .sub{color:var(--soft);margin:0 0 42px;max-width:60ch;font-size:16.5px;text-wrap:pretty}
  p{color:var(--soft);max-width:68ch;text-wrap:pretty}
  code{font:13.5px var(--mono);color:#5c4a22}
  h3{font-size:16px;font-weight:600;margin:0 0 7px;letter-spacing:-.012em;color:var(--ink)}
  .gold{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(176,125,30,.32)}
  .gold:hover{border-bottom-color:var(--gold)}

  /* Grids whose GAP is the hairline: one border around the whole thing, never
     one per cell. Boxed cards would read as unrelated tiles. */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
         border:1px solid var(--line);border-radius:11px;overflow:hidden}
  .step{background:var(--paper);padding:27px 25px 29px}
  .step .n{font:11px/1 var(--mono);letter-spacing:.13em;color:var(--gold);margin-bottom:17px}
  .step p{margin:0;font-size:14.5px;line-height:1.55}
  .step code{font-size:12.5px;color:var(--gold)}

  .bounds{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
          border:1px solid var(--line);border-radius:11px;overflow:hidden}
  .bound{background:var(--paper);padding:25px 25px 27px}
  .bound p{margin:0;font-size:14.5px;line-height:1.58}

  /* One container, hairline rows. Seven bordered cards would be seven objects
     on the page; this is one object with seven lines in it. */
  .rows{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--paper)}
  .row{display:flex;gap:24px;padding:15px 22px;border-bottom:1px solid var(--line);align-items:baseline}
  .row:last-child{border-bottom:0}
  .row code{font:13.5px/1.5 var(--mono);color:var(--gold);flex:none;width:238px}
  .row span{color:var(--soft);font-size:15px;min-width:0}
  .verb{color:var(--soft-ink);font-weight:500}

  .term{margin-top:34px;background:var(--ink);border-radius:11px;overflow:hidden}
  .term-bar{display:flex;align-items:center;gap:7px;padding:12px 17px;border-bottom:1px solid rgba(251,243,226,.08)}
  .dot{width:9px;height:9px;border-radius:50%;background:rgba(251,243,226,.14)}
  .term-t{margin-left:7px;font:11.5px/1 var(--mono);color:rgba(251,243,226,.34);letter-spacing:.05em}
  .term pre{margin:0;padding:22px 24px 26px;overflow-x:auto;font:13px/1.78 var(--mono);color:#c9c0af}
  .term .u{color:#8b8273}
  .term .g{color:var(--gold-lit)}
  .term .w{color:var(--cream);font-weight:500}

  /* Language switch. Labels on the terminal's own title bar rather than a
     separate control strip — the tabs belong to the block they change. */
  .tabs{margin-left:auto;display:flex;gap:20px}
  .tabs button{background:none;border:0;padding:0;cursor:pointer;
               font:11.5px/1 var(--mono);letter-spacing:.09em;color:rgba(251,243,226,.34);
               transition:color .15s}
  .tabs button:hover{color:var(--soft-ink)}
  .tabs button.on{color:var(--gold-lit)}
  .pane{display:none}
  .pane.on{display:block}

  .prose-h{margin:44px 0 10px;font-size:16px;font-weight:600;letter-spacing:-.012em}
  .prose-h:first-child{margin-top:0}

  table{border-collapse:collapse;width:100%;margin:34px 0 0;font-size:14.5px}
  th,td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--soft)}
  th{font:11.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:400;padding-bottom:14px}
  td:first-child{white-space:nowrap;font-family:var(--mono);font-size:13px;color:var(--gold);padding-right:28px}
  tr:last-child td{border-bottom:0}
  .scroll{overflow-x:auto}

  footer{border-top:1px solid var(--line);padding:30px 0 48px;display:flex;justify-content:space-between;
         gap:16px;flex-wrap:wrap;font:12px/1 var(--mono);letter-spacing:.08em;color:var(--soft)}
  footer a{color:var(--soft);text-decoration:none}
  footer a:hover{color:var(--gold)}
  footer nav{border:0;display:flex;gap:22px;flex-wrap:wrap}

  /* ============ documentation layout ============
     A sidebar and an on-this-page rail, which is what every reference site
     converges on for a reason: a long document read out of order needs a map
     that does not scroll away. Both pages use the same grid from their first
     visible row onward. */
  /* WIDER THAN .wrap ON PURPOSE. .wrap caps at 1060px, which is right for a
     single column of prose and badly wrong once two rails are taking 400px of
     it — the content column came out at ~556px and the three-up card grids
     collapsed into ribbons of two-word lines. The rails are furniture; the
     document keeps roughly the measure it had before they existed. */
  /* ============ overview ============
     This is the first section of a document, not a marketing panel. Its copy
     and example sit directly on paper in the same two-column rhythm as the
     rails. The command and response keep their own ink surfaces, so neither
     relies on a dark ancestor for contrast. */
  .intro{background:var(--paper);color:var(--ink)}
  .intro .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:start}
  .intro h1{font-size:46px;max-width:15ch;margin-bottom:18px}
  .intro .lede{font-size:17px;margin-bottom:32px;max-width:52ch}
  .intro .req{margin-top:16px}

  .doc{max-width:1520px;display:grid;grid-template-columns:230px minmax(0,1fr) 210px;
       gap:60px;align-items:start}
  .doc > main{min-width:0}
  .side,.toc{position:sticky;top:96px;font-size:13.5px;line-height:1.5}
  .side h4,.toc h4{font:11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
                   color:var(--gold);margin:0 0 14px;font-weight:400}
  .side h4:not(:first-child),.toc h4:not(:first-child){margin-top:30px}
  .side a,.toc a{display:block;color:var(--soft);text-decoration:none;padding:6px 0;
                 border-left:1px solid var(--line);padding-left:14px;margin-left:-1px;transition:color .15s,border-color .15s}
  .side a:hover,.toc a:hover{color:var(--ink);border-left-color:var(--gold)}
  .side a.on,.toc a.on{color:var(--ink);border-left-color:var(--gold)}
  /* 33px below the 63px bar puts every document's first row on the rails' 96px
     baseline. The API overview only needs its tighter bottom spacing. */
  .doc main > section:first-of-type{padding-top:33px}
  .doc main > section.intro{padding-bottom:70px}

  /* The on-this-page rail is the first thing to go: it is a convenience, and
     the content column keeping its width matters more. */
  @media (max-width:1400px){
    .doc{max-width:1180px;grid-template-columns:220px minmax(0,1fr);gap:52px}
    .toc{display:none}
  }
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;gap:44px}
    .intro .hero-grid{grid-template-columns:1fr;gap:44px}
    .lede,h1{max-width:none}
    .nav-end a:not(.nav-key){display:none}
  }
  @media (max-width:860px){
    .doc{grid-template-columns:1fr;gap:0}
    .side{position:static;display:flex;gap:20px;overflow-x:auto;margin:0;padding:18px 0 17px;
          border-bottom:1px solid var(--line);scrollbar-width:none}
    .side::-webkit-scrollbar{display:none}
    .side h4{display:none}
    .side a{flex:none;border:0;padding:0;margin:0}
    h1{font-size:40px}
    .intro h1{font-size:40px}
    .hero{padding-block:72px 80px}
    .steps,.bounds{grid-template-columns:1fr}
    .row{flex-direction:column;gap:5px}
    .row code{width:auto}
    .wrap,.nav-in{padding:0 22px}
    section{padding:56px 0}
    .doc main > section:first-of-type{padding-top:42px}
    .doc main > section.intro{padding-bottom:58px}
  }
  @media (max-width:560px){
    .intro h1{font-size:36px;letter-spacing:-.028em}
    .intro .lede{font-size:16.5px}
  }