/* Inter + JetBrains Mono, SELF-HOSTED (assets/fonts/, SIL OFL 1.1 — see the
   README there). They used to come from fonts.googleapis.com, which put a
   render-blocking stylesheet on a third-party origin in front of first paint:
   a DNS lookup + TLS handshake to fonts.googleapis.com, then a second pair to
   fonts.gstatic.com for the files themselves, before any text could be drawn.
   The page's own CSS is already inline, so that was the last third-party
   round-trip on the critical path (issue #617).
   Variable fonts, one file per subset: `unicode-range` means the latin-ext file
   is fetched only by a page that actually needs an accented glyph. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root {
    --ink: #152b21;
    --bg: #f7f7f8;
    --bg2: #f0f0f2;
    --card: #ffffff;
    --panel: #ffffff;
    --panel2: #f7f7f8;
    --panel3: #ededf0;
    --line: #e8e8ea;
    --line-strong: #d6d6da;
    --text: #152b21;
    --ink-2: #474a51;
    --muted: #6b6f76;
    --dim: #989ba1;
    --green: #60c860;
    --green2: #60c860;
    --green-ink: #2e7d32;
    --green-action: #3f8f3f;
    --green-bg: rgba(96,200,96,.16);
    --green-border: rgba(46,125,50,.24);
    --green-grad: #63c967;
    --jasper: #2f6df0;     /* console blue = dev/data */
    --jasper2: #2f6df0;
    --jasper-ink: #1f56c7;
    --jasper-bg: #e7eefe;
    --jasper-border: #bcd0fb;
    --claude: #d97757;     /* Claude clay — integration accent */
    --claude-ink: #b8552f;
    --claude-bg: #fbeee7;
    --claude-border: #edcab8;
    --amber: #a9740c; --amber-bg: #fbf1d6; --amber-border: #ecd9a3;
    --red: #d6433f;
    --sh-btn: 0 1px 2px rgba(23,31,26,.08);
    --sh-card: 0 1px 1px rgba(30,20,10,.04), 0 10px 26px -20px rgba(40,60,90,.25);
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

    /* ---------- fluid layout system ----------
       Every clamp() below tops out at the original desktop value, so the
       desktop rendering is unchanged; only narrow viewports scale down.
       Breakpoint ladder used throughout: 1024 / 900 / 720 / 560 / 420. */
    --gut: clamp(16px, 4vw, 32px);        /* page gutter */
    --sec-y: clamp(52px, 8vw, 92px);      /* section vertical rhythm */
    --h2: clamp(27px, 3.2vw, 36px);       /* section heading */
    --lead: clamp(16px, 2vw, 19px);       /* section lead paragraph */
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans);
    font-size: 17px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  /* Wide content (diagrams, terminals, code) scrolls INSIDE its own container.
     The page itself must never scroll sideways — and we fix the causes rather
     than masking them with overflow-x:hidden on body. */
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gut); }
  a { color: inherit; text-decoration: none; }
  .mono { font-family: var(--mono); }
  .kicker { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; color: var(--green-ink); }

  /* ---------- buttons ---------- */
  .btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9px;
    font-size: 15px; font-weight: 600; font-family: var(--sans); border: 1px solid var(--line); cursor: pointer;
    white-space: nowrap; transition: background .12s, border-color .12s, filter .12s; }
  .btn svg { width: 16px; height: 16px; }
  .btn.pri { background: var(--green-action); color: #fff; border-color: transparent; }
  .btn.pri:hover { filter: brightness(1.07); }
  .btn.gh { background: #fff; color: var(--ink); }
  .btn.gh:hover { background: var(--panel2); border-color: var(--line-strong); }
  .btn.sm { height: 32px; padding: 0 13px; font-size: 13.5px; border-radius: 8px; }
  .btn.lg { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 10px; }


  h2 { font-size: clamp(28px,3.4vw,40px); line-height: 1.16; letter-spacing: -.04em; margin: 0 0 18px; }
  h3 { line-height: 1.3; letter-spacing: -.025em; }
  p { text-wrap: pretty; }
  main { display: block; }
  .text-link { color: #28623c; font-weight: 650; text-decoration: underline; text-underline-offset: 5px; }
  .section { padding: clamp(48px,7vw,80px) 0; }
  .section-head { max-width: 640px; margin-bottom: 32px; }
  .section-head p, .muted { color: #496258; }
  .eyebrow { display: block; margin-bottom: 16px; color: #32723d; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
  .split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(28px,5vw,72px); }
  .split > *, .resource-grid > * { min-width: 0; }
  .benefits { margin: 0; padding: 0; list-style: none; }
  .benefits li { padding: 19px 0; border-top: 1px solid #d8e1d4; }
  .benefits b { display: block; font-size: 19px; margin-bottom: 4px; }
  .benefits p { color: #496258; margin: 0; font-size: 15px; }
  .start-panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 38px; padding: clamp(28px,5vw,60px); background: #183b2a; border-radius: 26px; color: #f5f8ef; }
  .start-panel p { color: #cfddce; max-width: 530px; }
  .start-panel .eyebrow { color: #b9dca6; }
  .start-panel .btn { background: #d9efbe; color: #193c29; border: 0; }
  .start-panel .text-link { color: #e6f1df; }
  .setup-list { list-style: none; padding: 0; margin: 0; }
  .setup-list li { border-bottom: 1px solid #ffffff24; padding: 16px 0; }
  .setup-list li:first-child { padding-top: 0; }
  .setup-list span { display: block; color: #c2d1c2; font-size: 14px; }
  .subtle-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-bottom: 1px solid #d8e1d4; }
  .subtle-link p { margin: 4px 0 0; color: #496258; font-size: 15px; }
  .subtle-link b { font-size: 19px; }
  .page-hero { padding: 64px 0 44px; }
  .page-hero h1 { max-width: 850px; font-size: clamp(42px,6vw,72px); line-height: 1.05; letter-spacing: -.055em; margin: 0; }
  .page-hero .intro { max-width: 650px; margin: 24px 0 0; color: #496258; font-size: 20px; }
  .breadcrumb { color: #496258; font-size: 14px; display: inline-block; margin-bottom: 34px; }
  .resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .resource { padding: 28px; border: 1px solid #dce5d6; border-radius: 20px; background: var(--card); }
  /* A resource card's heading rank depends on whether its section has a
     heading of its own (h3 under a section h2, h2 when the card IS the
     section) — the look is the same either way. */
  .resource h2, .resource h3 { font-size: 21px; margin: 0 0 12px; font-weight: 700; letter-spacing: -.01em; }
  .resource p { font-size: 15px; color: #496258; }
  .faq-list { max-width: 780px; }
  .faq-item { padding: 28px 0; border-top: 1px solid #d8e1d4; }
  .faq-item:last-child { border-bottom: 1px solid #d8e1d4; }
  .faq-item h3 { margin: 0 0 12px; font-size: clamp(20px,2.5vw,24px); }
  .faq-item p { margin: 0 0 14px; color: #496258; font-size: 16px; line-height: 1.75; }
  .faq-item .text-link { font-size: 14px; }
  .guide { max-width: 850px; margin: auto; list-style: none; padding: 0; counter-reset: guide; }
  .guide li { counter-increment: guide; display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid #d8e1d4; }
  .guide li::before { content: counter(guide,decimal-leading-zero); color: #347042; font-size: 17px; font-weight: 700; padding-top: 4px; }
  .guide h3 { font-size: 25px; margin: 0 0 12px; }
  .guide p { margin: 0 0 15px; color: #496258; }
  .note { padding: 18px 22px; background: var(--bg2); border-left: 3px solid #74a36b; border-radius: 0 10px 10px 0; font-size: 15px; }
  .code-block { padding: 26px; border-radius: 18px; background: #19382b; color: #e1efd8; font: 14px/1.8 var(--mono); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
  .sec { padding: 48px 0; }
  .sec-head { max-width: 700px; margin: 0 auto 34px; text-align: center; }
  .sec-head p { color: #496258; }
  a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid #359d43; outline-offset: 5px; }
  section[id] { scroll-margin-top: 86px; }
  @media(max-width: 720px) {
    .split, .start-panel, .resource-grid { grid-template-columns: 1fr; }
    .page-hero { padding-top: 32px; }
    .live-console-top { align-items: flex-start; gap: 11px; }
    .lc-window-controls { display: none; }
    .lc-meta { grid-template-columns: 1fr 1fr; gap: 8px 13px; }
    .lc-mi:nth-child(5) { display: none; }
    .live-console-body { grid-template-columns: 1fr; }
    .lc-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid var(--line); border-left: 0; }
    .lc-tabs { grid-column: 1 / -1; }
    .lc-steer { display: none; }
    .lc-connection, .lc-agent { margin-top: 0; padding-top: 0; border-top: 0; }
  }
  @media(max-width: 420px) {
    .btn.sm { font-size: 13px; padding-inline: 10px; }
    .cta { flex-direction: column; }
    .cta .btn { justify-content: center; }
    .guide li { grid-template-columns: 28px 1fr; gap: 12px; }
    .subtle-link { align-items: flex-start; }
  }
  @media(pointer: coarse) { .btn.sm { height: 44px; } }
  @media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }