/* Weft marketing site. Same palette and type as the console
   (controller/ui/src/index.css) -- Loom Navy, Weft Teal, Deep Teal, Signal
   Amber, Mist, Fabric Ivory. THERE IS NO RED. */

@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/fonts/IBMPlexMono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/fonts/IBMPlexSans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/fonts/IBMPlexSans-600.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url(/fonts/SpaceGrotesk-500.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url(/fonts/SpaceGrotesk-700.woff2) format("woff2"); }

:root {
  --navy: #0B1F33; --teal: #1FB2A6; --deep: #0F766E; --amber: #F2A93B; --mist: #C9D3DC; --ivory: #F4F1EA;
  --bg: var(--ivory); --fg: #1B2733; --head: var(--navy); --muted: #3D4C5A; --cap: #5B6B7A;
  --card: #fff; --line: var(--mist); --accent: var(--deep);
  --btn: var(--navy); --btn-fg: var(--ivory);
  --band: var(--navy); --band-fg: var(--ivory); --band-mut: var(--mist);
  --pill: #E2F5F2; --pill-fg: var(--deep);
  --code: #edeae1;
  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Space Grotesk", var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #081724; --fg: #dfe6ec; --head: var(--ivory); --muted: #a9b9c7; --cap: #92a6b8;
    --card: #0f2436; --line: #20394f; --accent: var(--teal);
    --btn: var(--teal); --btn-fg: #06202b;
    --band: #0d2940; --pill: #0d3b3a; --pill-fg: var(--teal); --code: #0b1e2e;
    color-scheme: dark; }
}
:root[data-theme="dark"] {
    --bg: #081724; --fg: #dfe6ec; --head: var(--ivory); --muted: #a9b9c7; --cap: #92a6b8;
    --card: #0f2436; --line: #20394f; --accent: var(--teal);
    --btn: var(--teal); --btn-fg: #06202b;
    --band: #0d2940; --pill: #0d3b3a; --pill-fg: var(--teal); --code: #0b1e2e;
    color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--font-head); color: var(--head); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; height: auto; }
code, kbd { font: 14px var(--font-mono); background: var(--code); padding: 2px 6px; border-radius: 6px; }
.small { font-size: 14px; color: var(--cap); }
.eyebrow { font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.lede { font-size: 20px; color: var(--muted); max-width: 40em; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--card); padding: 8px 12px; }

/* ---- header ------------------------------------------------------------ */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 22px var(--font-head); color: var(--head); letter-spacing: -0.03em; }
.brand img { border-radius: 8px; }
.nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; }
.nav a { color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: 8px; font-size: 15px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--head); background: color-mix(in srgb, var(--mist) 40%, transparent); }
@media (max-width: 860px) {
  /* padding-block only: .bar is also .wrap, whose side gutter must survive */
  .bar { flex-wrap: wrap; gap: 8px; padding-block: 8px; }
  .nav { order: 3; width: 100%; margin: 0; }
  .nav a { padding: 10px 10px; }
  .nav a:first-child { padding-left: 0; }
  .small-btn { margin-left: auto; }
}
/* Phones: six links do not fit one row, so the nav wraps (no JS, no hidden
   links, nothing to scroll sideways). The taller header then stops being
   sticky, so it does not take a fifth of the screen while reading. */
@media (max-width: 600px) {
  .top { position: static; }
  html { scroll-padding-top: 0; }
  .bar { gap: 4px 8px; }
  .nav { flex-wrap: wrap; overflow: visible; gap: 0 2px; margin-left: -8px; width: calc(100% + 8px); }
  .nav a, .nav a:first-child { padding: 8px; min-height: 40px; display: inline-flex; align-items: center; }
}
.brand { min-height: 44px; }

/* ---- buttons ----------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 10px; background: var(--btn); color: var(--btn-fg); font: 600 16px var(--font-ui); text-decoration: none; border: 1px solid var(--btn); }
.btn:hover { filter: brightness(1.12); }
.btn.ghost { background: transparent; color: var(--head); border-color: var(--line); }
.btn.on-dark { background: var(--teal); border-color: var(--teal); color: #06202b; }
.btn.ghost.on-dark { background: transparent; color: var(--ivory); border-color: #2e4f6b; }
.small-btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

/* ---- sections ---------------------------------------------------------- */
section { padding: 72px 0; }
.band { background: var(--band); color: var(--band-fg); }
.band h1, .band h2, .band h3 { color: var(--ivory); }
.band .lede, .band p { color: var(--band-mut); }
.band .eyebrow { color: var(--teal); }
.hero { padding: 88px 0 72px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.hero .note { font-size: 14px; color: var(--band-mut); margin: 14px 0 0; }
.page-head { padding: 72px 0 40px; }
.page-head .lede { margin-bottom: 0; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.card h3 { margin-top: 4px; }
.card p:last-child { margin-bottom: 0; }
a.card { text-decoration: none; color: var(--fg); display: block; transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--deep); transform: translateY(-2px); }
a.card .more { color: var(--accent); font-weight: 600; font-size: 15px; }
.icon { width: 40px; height: 40px; border-radius: 10px; background: var(--pill); color: var(--pill-fg); display: grid; place-items: center; margin-bottom: 14px; }
.icon svg { width: 22px; height: 22px; }

.split { display: grid; gap: 40px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }
.prose { max-width: 44em; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }

.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 16px; }
.steps li { counter-increment: s; position: relative; padding: 20px 20px 20px 68px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.steps li::before { content: counter(s); position: absolute; left: 20px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--pill); color: var(--pill-fg); font: 700 16px/32px var(--font-head); text-align: center; }
.steps b { display: block; font-family: var(--font-head); color: var(--head); font-weight: 500; font-size: 19px; }

.ticks { list-style: none; padding: 0; margin: 0 0 20px; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.pills li { background: var(--pill); color: var(--pill-fg); font: 500 13px var(--font-mono); padding: 6px 12px; border-radius: 999px; }

.callout { border-left: 4px solid var(--amber); background: var(--card); border-radius: 0 14px 14px 0; padding: 18px 22px; }
.callout p:last-child { margin: 0; }

/* ---- pricing ------------------------------------------------------------ */
.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-bottom: 20px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--teal); }
.plan h2 { font-size: 22px; font-weight: 500; }
.plan .price { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; color: var(--muted); }
.plan .price b { font: 700 36px var(--font-head); color: var(--head); letter-spacing: -0.02em; }
.plan .plan-lede { color: var(--muted); }
.plan .btn { margin-top: auto; }

/* ---- faq ---------------------------------------------------------------- */
.qa { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 500 26px var(--font-head); color: var(--accent); }
.qa[open] summary::after { content: "–"; }
.qa summary h2 { margin: 0; font-size: 19px; font-weight: 500; }
.qa div { padding: 0 0 12px; color: var(--muted); }

/* ---- footer ------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding: 48px 0 56px; margin-top: 24px; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.foot nav a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; font-size: 15px; }
.foot nav a:hover { color: var(--accent); }
.foot h2 { font-size: 12px; }
@media (max-width: 600px) { .foot nav a { padding: 8px 0; } }

/* ---- diagram ------------------------------------------------------------ */
.fabric { width: 100%; }
.fabric .thread { fill: none; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .fabric .pulse { stroke-dasharray: 6 14; animation: flow 3s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -40; } }
}

/* ---- blog --------------------------------------------------------------- */
.post-list { display: grid; gap: 20px; max-width: 52em; }
.post-card h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: .4em; }
.post-card p:not(.eyebrow) { color: var(--muted); }
.eyebrow a { color: inherit; text-decoration: none; }
.byline { color: var(--cap); font-size: 15px; margin: 16px 0 0; }
.post-body { font-size: 18px; }
.post-body h2 { font-size: clamp(24px, 3vw, 30px); scroll-margin-top: 80px; }
.post-body h3 { margin-top: 1.4em; }
.post-body pre { background: var(--code); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font: 14px/1.55 var(--font-mono); margin: 0 0 1.2em; }
.post-body pre code { background: none; padding: 0; font-size: inherit; }
.post-body figure { margin: 1.6em 0; }
.post-body figure img { display: block; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.post-body figcaption { font-size: 14px; color: var(--cap); margin-top: 8px; }
.post-body .callout { margin: 1.4em 0; }
.post-body table, .compare table { border-collapse: collapse; width: 100%; font-size: 16px; margin: 0 0 1.2em; }
.post-body th, .post-body td, .compare th, .compare td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap { overflow-x: auto; }
.post-cta { max-width: 44em; margin-top: 48px; }
.post-cta h2 { font-size: 24px; }

/* ---- diagrams (src/diagrams/*.svg, inlined by build.mjs) ----------------- */
/* Drawn with the site's tokens, so they follow dark mode like everything else.
   Wider than a phone on purpose: they scroll sideways in their own box
   rather than shrinking the labels to nothing. */
.diagram { margin: 1.8em 0; overflow-x: auto; }
.diagram svg { display: block; width: 100%; min-width: 640px; height: auto; }
.diagram figcaption { font-size: 14px; color: var(--cap); margin-top: 8px; }
.dg-box { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.dg-weft { fill: var(--pill); stroke: var(--teal); stroke-width: 2; }
.dg-zone { fill: color-mix(in srgb, var(--mist) 14%, transparent); stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 6 5; }
.dg-cloud { fill: var(--code); stroke: var(--line); }
.dg-t { font: 600 15px var(--font-head); fill: var(--head); }
.dg-s { font: 12.5px var(--font-mono); fill: var(--muted); }
.dg-n { font: 12.5px var(--font-ui); fill: var(--cap); }
.dg-label { font: 500 11px var(--font-mono); letter-spacing: .12em; fill: var(--accent); }
.dg-wire { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.dg-lan { stroke: var(--muted); stroke-width: 3; fill: none; stroke-linecap: round; }
.dg-ctl { stroke: var(--cap); stroke-width: 1.5; stroke-dasharray: 2 5; fill: none; stroke-linecap: round; }
.dg-tunnel { stroke: var(--teal); stroke-width: 4; fill: none; stroke-linecap: round; }
.dg-tunnel-alt { stroke: var(--teal); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 9 7; }
.dg-tl { font: 600 12.5px var(--font-ui); fill: var(--deep); }
.dg-tl-alt { font: 600 12.5px var(--font-ui); fill: var(--deep); }
.dg-path { stroke: var(--amber); stroke-width: 2.5; fill: none; stroke-dasharray: 7 5; }
.dg-arrow { fill: var(--amber); }
.dg-path-local { stroke: var(--teal); stroke-width: 2.5; fill: none; stroke-dasharray: 7 5; }
.dg-arrow-local { fill: var(--teal); }
.dg-pl { font: 600 12.5px var(--font-ui); fill: var(--head); }
.dg-badge { fill: var(--teal); }
.dg-bt { font: 600 11px var(--font-mono); letter-spacing: .08em; fill: #06202b; }
.dg-badge-mut { fill: var(--card); stroke: var(--line); }
.dg-bt-mut { font: 600 11px var(--font-mono); letter-spacing: .08em; fill: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dg-tl, :root:not([data-theme="light"]) .dg-tl-alt { fill: var(--teal); } }
:root[data-theme="dark"] .dg-tl, :root[data-theme="dark"] .dg-tl-alt { fill: var(--teal); }
.dg-chip { fill: var(--bg); stroke: var(--teal); stroke-width: 1.5; }
.dg-ct { font: 600 13px var(--font-mono); fill: var(--head); }

/* ---- analytics consent (build.mjs consentBlock) ------------------------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; max-width: 40em; margin: 0 auto; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.consent[hidden] { display: none; }
.consent p { margin: 0 0 12px; font-size: 15px; }
.consent .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 0; }
.consent .short { display: none; }
/* While the banner is up, the page can still scroll its last lines clear of it. */
body:has(.consent:not([hidden])) { padding-bottom: 170px; }
/* Phones: one short sentence and both buttons side by side, equal in size and
   weight, so saying no is exactly as easy as saying yes. */
@media (max-width: 600px) {
  .consent { left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 12px; }
  .consent .long { display: none; }
  .consent .short { display: inline; }
  .consent p { font-size: 14px; line-height: 1.45; margin-bottom: 10px; }
  .consent .actions { flex-wrap: nowrap; gap: 8px; }
  .consent .btn { flex: 1 1 0; padding: 0 10px; font-size: 15px; }
  body:has(.consent:not([hidden])) { padding-bottom: 140px; }
}