/* The docs' base stylesheet: the chrome and type the site's pages share.
   Was the one-pager's inline <style>; extracted 2026-09-20 when that page was retired. */
    :root {
      /* The brand blue (dai-icons4colors/blue), the same as the console and the
         generated pages; the neutrals are its blue-greys. */
      --ink: #0b111a;
      --ink-2: #56606e;
      --paper: #fafbfd;
      --paper-2: #eef1f5;
      --line: #e1e6ed;
      --accent: #0b5fbf;
      --accent-ink: #0a4f9e;
      --accent-tint: #dce9f9;
      --max: 1080px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; }
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

    header {
      position: sticky; top: 0; z-index: 10;
      background: rgba(250, 251, 253, 0.92);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--line);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
    .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; }
    .logo svg { width: 28px; height: 28px; }
    .nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
    .nav ul a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
    .nav ul a:hover { color: var(--ink); }
    .btn {
      display: inline-block; padding: 10px 18px; border-radius: 8px;
      text-decoration: none; font-weight: 600; font-size: 15px;
      border: 1px solid var(--ink); color: var(--ink); background: transparent;
    }
    .btn:hover { background: var(--ink); color: var(--paper); }
    .btn--solid { background: var(--ink); color: var(--paper); }
    .btn--solid:hover { background: #1b2533; }
    .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
    .btn--accent:hover { background: #094e9e; border-color: #094e9e; color: #fff; }

    .hero { padding: 88px 0 56px; }
    /* One line, the whole sentence: it needs ~21px of width per px of font, so 46px fits the
       1032px column with room for a wider fallback font; 4.3vw keeps it on one line down to
       ~760px, and below that it wraps (balanced) rather than overflowing a phone. */
    .hero h1 { font-size: clamp(28px, 4.3vw, 46px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; }
    .hero h1 em { font-style: normal; color: var(--accent-ink); background: linear-gradient(transparent 62%, var(--accent-tint) 62%); }
    .hero p.lead { font-size: 21px; color: var(--ink-2); max-width: 56ch; margin: 0 0 32px; }
    .hero .cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
    .hero .cta small { color: var(--ink-2); font-size: 14px; }

    .say {
      margin: 56px 0 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px;
      background: #fff; box-shadow: 0 20px 60px -40px rgba(11, 17, 26, 0.45);
      display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
    }
    .say h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); }
    .say blockquote { margin: 0; font-size: 20px; line-height: 1.4; }
    .say ol { margin: 0; padding-left: 22px; color: var(--ink-2); }
    .say ol li { margin: 6px 0; }
    .say ol li::marker { color: var(--accent-ink); font-weight: 700; }

    section { padding: 72px 0; }
    section + section { border-top: 1px solid var(--line); }
    h2 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.02em; margin: 0 0 12px; max-width: 24ch; }
    /* Headings that read as one sentence keep to one line where there is room;
       the 24ch default would break them mid-thought. They still wrap on a phone. */
    #how h2 { max-width: none; text-wrap: balance; }
    .sub { color: var(--ink-2); font-size: 18px; max-width: 60ch; margin: 0 0 40px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    /* The four promises read two-up, not three-and-a-stray: two rows of two,
       one-up on a phone (below). */
    #why .grid { grid-template-columns: repeat(2, 1fr); }
    .card { padding: 26px; border-radius: 16px; background: var(--paper-2); }
    .card .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 700; margin-bottom: 14px; }
    .card h3 { margin: 0 0 8px; font-size: 20px; }
    .card p { margin: 0; color: var(--ink-2); }

    .quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .quotes figure { margin: 0; padding: 22px 24px; border-left: 4px solid var(--accent); background: #fff; border-radius: 0 14px 14px 0; }
    .quotes blockquote { margin: 0; font-size: 19px; line-height: 1.4; }
    .quotes figcaption { margin-top: 10px; color: var(--ink-2); font-size: 14px; }

    .promise .card { background: #fff; border: 1px solid var(--line); }

    .early { background: var(--ink); color: var(--paper); border-top: 0; }
    .early h2 { color: #fff; }
    .early .sub { color: #c3cdd9; }
    .early .cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
    .early .btn { border-color: #fff; color: #fff; }
    .early .btn:hover { background: #fff; color: var(--ink); }

    footer { padding: 28px 0 40px; color: var(--ink-2); font-size: 14px; }
    footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    footer a { text-decoration: none; }
    footer a:hover { text-decoration: underline; }

    @media (max-width: 760px) {
      .nav ul { display: none; }
      .say, .grid, .quotes { grid-template-columns: 1fr; }
      #why .grid { grid-template-columns: 1fr; }
      .hero { padding-top: 56px; }
      section { padding: 56px 0; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  

/* --- the docs, three columns (owner, 2026-10-29: "truely professional website"): sections on the
   left, the article, what is on this page on the right; Ductile AI's ink and blue, no orange. --- */
/* Both colours on every page, at rest (owner, 2026-10-29): the red main button, the black one beside it. */
header .btn { background: #ff3621; color: #fff; border-color: #ff3621; }
header .btn:hover { background: #e5290f; border-color: #e5290f; color: #fff; text-decoration: none; }
.copypage { background: #1b3139 !important; color: #fff !important; border-color: #1b3139 !important; }
.copypage:hover { background: #24414b !important; }
header nav a[aria-current="page"] { color: #0b5fbf; box-shadow: inset 0 -2px 0 #0b5fbf; }
/* The site's header, size for size (owner, 2026-10-30: "some font size width not correct",
   "maintaine same font size"): site.css .nav, .brand, .nav__link and .btn--sm. */
header .nav { height: 56px; }
header .logo { font-size: 16px; letter-spacing: -0.02em; }
header .nav ul a { font-size: 13.5px; font-weight: 500; }
header .btn { padding: 7px 14px; font-size: 14px; line-height: 1.2; }
.doc .wrap { max-width: 1280px; }
.docgrid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 200px; gap: 44px; align-items: start; }
.docside { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; font-size: .92rem; }
.docside__group { margin: 18px 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #56606e; }
.docside__group:first-child { margin-top: 0; }
.docside ul { list-style: none; margin: 0; padding: 0; }
.docside a { display: block; padding: 6px 10px; border-radius: 8px; color: #1b2533; text-decoration: none; }
.docside a:hover { background: #f4f8fe; }
.docside a[aria-current="page"] { background: #eef4fc; color: #0b5fbf; font-weight: 600; }
.docmain { min-width: 0; max-width: 820px; }
.doceyebrow { margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: #0b5fbf; }
.dochead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dochead h1 { margin: 0 0 .4em; }
.copypage { flex: none; margin-top: 6px; padding: 6px 12px; border: 1px solid #d2d8e0; border-radius: 8px; background: #fff; font: inherit; font-size: .86rem; cursor: pointer; }
.copypage:hover { border-color: #0b111a; }
.doctoc { position: sticky; top: 84px; font-size: .86rem; }
.doctoc__title { margin-bottom: 8px; font-weight: 700; color: #0b111a; }
.doctoc a { display: block; padding: 4px 0 4px 10px; border-left: 2px solid #e6e9ee; color: #56606e; text-decoration: none; }
.doctoc a:hover { color: #0b5fbf; border-left-color: #0b5fbf; }
.updated { margin-top: 40px; font-size: .85rem; color: #69737f; }
.linkcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: .8em 0 1.6em; }
.linkcard { padding: 18px 20px 10px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(10,15,25,.04), 0 6px 18px rgba(10,15,25,.05); }
.linkcard h3 { margin: 0 0 4px; font-size: 1.08rem; }
.linkcard p { margin: 0 0 8px; color: #56606e; font-size: .93rem; }
.linkcard a { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid #eef0f3; color: #0b111a; font-weight: 600; text-decoration: none; }
.linkcard a::after { content: "\2192"; color: #0b5fbf; }
.linkcard a:hover { color: #0b5fbf; }
.shot { margin: 1.2em 0 1.6em; }
/* A screenshot at its own size, smaller only when the column is narrower - never enlarged (owner,
   2026-10-29: "screenshot too big"): a small one stretched to the column is big and blurred. */
.shot img { display: block; width: auto; max-width: 100%; height: auto; border: 1px solid #e6e9ee; border-radius: 10px; box-shadow: 0 6px 22px rgba(10,15,25,.08); }
.shot a { width: fit-content; max-width: 100%; }
.shot figcaption { margin-top: 8px; font-size: .86rem; color: #56606e; }
.shot a { display: block; cursor: zoom-in; }
.shot__zoom { color: #8a93a0; }
.doc table.facts { width: 100%; margin: .4em 0 1.2em; border: 1px solid #e6e9ee; border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.doc table.facts th { width: 110px; background: #eef4fc; }
.doc .note { padding: 12px 16px; border: 1px solid #dce9f9; border-left: 3px solid #0b5fbf; border-radius: 8px; background: #f6f9fe; }
@media (max-width: 1100px) { .docgrid { grid-template-columns: 210px minmax(0, 1fr); } .doctoc { display: none; } }
@media (max-width: 760px) { .docgrid { grid-template-columns: 1fr; } .docside { position: static; max-height: none; } .linkcards { grid-template-columns: 1fr; } }
/* --- documentation ------------------------------------------------------- */
.logo .dev { font-weight: 400; opacity: .7; margin-left: .35em; }
nav a[aria-current="page"] { color: var(--ink, #0b111a); font-weight: 600; }
.doc { padding: 40px 0 64px; }
/* The band: a soft blue-to-lavender tint with a faint dot grid, slim, the part's name over nothing
   but its line. Not sticky - the header is. */
.docband {
  border-bottom: 1px solid #d3ddec;
  background:
    radial-gradient(circle at 1px 1px, rgba(11, 95, 191, 0.13) 1px, transparent 1.4px) 0 0 / 16px 16px,
    linear-gradient(90deg, #dde9fb 0%, #e7e5fa 55%, #f5e8f0 100%);
}
.docband__in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 52px; padding: 8px 24px; }
.docband__name { position: relative; padding-left: 14px; font-size: 14px; font-weight: 600; color: #0b111a; }
.docband__name::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #0b5fbf; box-shadow: 0 0 0 3px rgba(11, 95, 191, 0.16); }
.docband__line { font-size: 14px; color: #3e4856; }
.docband + .doc { padding-top: 28px; }
.doc .wrap { max-width: 860px; }
.doc h1 { font-size: 2rem; margin: 0 0 .35em; }
.doc h2 { font-size: 1.35rem; letter-spacing: 0; margin: 2em 0 .5em; max-width: none; }
.doc h3 { font-size: 1.05rem; margin: 1.6em 0 .4em; }
.doc p, .doc li { line-height: 1.6; }
.doc .lead { font-size: 1.1rem; opacity: .85; margin-bottom: 1.5em; }
.doc pre { background: #14172b; color: #e8e9f0; padding: 14px 16px; border-radius: 10px; overflow-x: auto; font-size: .88rem; line-height: 1.5; }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.doc p code, .doc li code, .doc td code { background: rgba(27,31,58,.07); padding: .1em .35em; border-radius: 4px; }
.doc table { border-collapse: collapse; width: 100%; margin: .8em 0 1.4em; font-size: .93rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(27,31,58,.12); }
.doc th { font-weight: 600; }
.doc .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.2em 0; }
.doc .card { padding: 16px; border: 1px solid rgba(27,31,58,.12); border-radius: 12px; }
.doc .card h3 { margin-top: 0; }
.doc .card a { font-weight: 600; }
.doc .note { border-left: 3px solid #0b5fbf; padding: 8px 14px; background: rgba(11,95,191,.06); border-radius: 0 8px 8px 0; margin: 1em 0; }
.foot-links a { color: inherit; }

/* Full width, last so nothing earlier caps it (owner, 2026-10-29: "use full width"): the header, the
   three columns and the footer share one wide frame. */
.wrap, .doc .wrap, header .wrap, footer .wrap { max-width: 1440px; padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }
.docgrid { grid-template-columns: 250px minmax(0, 1fr) 220px; gap: 48px; }
.docmain { max-width: none; }
.docmain p, .docmain li { max-width: 78ch; }
.linkcards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 1100px) { .docgrid { grid-template-columns: 220px minmax(0, 1fr); } }
@media (max-width: 760px) { .wrap, .doc .wrap, header .wrap, footer .wrap { padding-left: 16px; padding-right: 16px; } .docgrid { grid-template-columns: 1fr; } }

/* The site's font and type scale in the docs too (owner, 2026-10-29: "use uniform fonts across"). */
@font-face { font-family: 'Inter'; src: url('fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
body, button, input { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { font-size: 15px; }
header nav a { font-size: 13.5px; }
.doc h1 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.02em; }
.doc h2 { font-size: 26px; letter-spacing: -0.01em; }
.doc h3 { font-size: 17px; }
.doc p, .doc li, .doc .note { font-size: 15px; }
.doc .lead { font-size: 17px; }
.doc table, .shot figcaption, .updated { font-size: 13.5px; }
.docside, .doctoc { font-size: 13.5px; }
.docside__group, .doceyebrow { font-size: 12px; }
.linkcard h3 { font-size: 17px; } .linkcard p { font-size: 13.5px; } .linkcard a { font-size: 15px; }
footer { font-size: 13.5px; }
/* ONE COMPACT SCALE (owner, 2026-10-29: "need to have consistent and compact font and font size"):
   .doc li set every list item to 15px, the sidebar's and the table of contents' too, so the menu read
   larger than the tables beside it. Article 15, lead 16, tables, sidebar and contents 14, captions 13,
   headings 30 / 21 / 16 - and the same face throughout. */
.docmain p, .docmain li, .docmain .note { font-size: 15px; line-height: 1.6; }
.doc .lead { font-size: 16px; line-height: 1.6; margin-bottom: 1.2em; }
.doc h1 { font-size: 30px; line-height: 1.2; }
.doc h2 { font-size: 21px; margin: 1.7em 0 .45em; }
.doc h3 { font-size: 16px; }
.doc table, .doc table th, .doc table td { font-size: 14px; }
.doc table th, .doc table td { padding: 8px 10px; line-height: 1.45; }
.docside, .docside li, .docside a, .doctoc, .doctoc li, .doctoc a { font-size: 14px; line-height: 1.4; }
.docside a { padding: 5px 10px; }
.docside__group, .doceyebrow { font-size: 11.5px; }
.shot figcaption, .updated { font-size: 13px; }
.copypage { padding: 7px 14px; font-size: 14px; font-weight: 600; line-height: 1.2; }
.linkcard h3 { font-size: 15px; } .linkcard p { font-size: 13.5px; } .linkcard a { font-size: 14px; }
header nav a { font-size: 13.5px; }