/* Weftline — the page of the filament-stream world. The field is drawn in the canvas behind the page; the product's
   panels are panes of the field over the empty slots here (core/ui-surface.js). Nothing in the page paints a ground
   of its own under words: they read on the field, which calms where they stand (world.js, the plate grade).
   Type: Anybody (display, OFL) and Public Sans (text, OFL); Azeret Mono (OFL) only inside the panels, lower case. */
:root {
  --gutter: clamp(20px, 3vw, 44px);
  --face: 'Anybody', 'Public Sans', sans-serif;
  --text: 'Public Sans', system-ui, sans-serif;
  --mono: 'Azeret Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
  --bg: #07061A; --ink: #EEEAFF; --soft: #B9B3D9; --accent: #FF5FAE; --accent-ink: #1A0716; --line: rgba(238, 234, 255, 0.16);
  --edge-ink: var(--ink); --edge-accent: var(--accent); --edge-accent-ink: var(--accent-ink); --edge-face: var(--face); --edge-text: var(--text);
  --edge-backdrop: rgba(7, 6, 26, 0.55); --edge-line: rgba(238, 234, 255, 0.16);
  --edge-sheet-bg: #0C0A26; --edge-sheet-ink: var(--ink); --edge-foot-bg: transparent; --edge-foot-ink: var(--ink); --edge-radius: 12px;
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #F2F0F8; --ink: #16123A; --soft: #4A4570; --accent: #3B2EA0; --accent-ink: #FFFFFF; --line: rgba(22, 18, 58, 0.16);
  --edge-backdrop: rgba(242, 240, 248, 0.62); --edge-line: rgba(22, 18, 58, 0.16); --edge-sheet-bg: #E9E6F4;
}
html { background: var(--bg); transition: background-color 0.6s; }
body { margin: 0; color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: color 0.6s; }
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
main { position: relative; z-index: 2; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* the loader: a thread drawn across the screen while the field is prepared (no numbers) */
.loader { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--bg); transition: opacity 0.7s var(--ease), visibility 0.7s; }
.loader__line { width: min(320px, 60vw); height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform-origin: left; animation: thread 1.4s var(--ease) infinite; }
@keyframes thread { from { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

/* ---------------- type ---------------- */
.display { font-family: var(--face); font-weight: 600; letter-spacing: -0.03em; line-height: 0.95; margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(46px, 8.2vw, 132px); }
.h2 { font-size: clamp(38px, 4.6vw, 74px); }
.line { display: block; white-space: nowrap; }
.line > span { display: inline-block; }
.lede { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: var(--soft); max-width: 34ch; margin: 0; }
.body { color: var(--soft); max-width: 38ch; margin: 0; }
.note { font-size: 14px; color: var(--soft); margin: 0; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.points li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: baseline; }
.points li::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--accent); transform: translateY(-4px); }

/* ---------------- controls ---------------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 12px; font: 600 15px/1 var(--text); text-decoration: none; cursor: pointer; border: 1px solid var(--line); color: var(--ink); background: none; }
.btn--go { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn--go:hover { filter: brightness(1.08); }
.btn:not(.btn--go):hover { border-color: var(--ink); }
.btn svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.btn:hover svg { transform: translate3d(4px, 0, 0); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------------- sections ---------------- */
.sec { position: relative; padding: 0 var(--gutter); }
.hero { min-height: 100svh; padding-top: calc(var(--edge-h) + clamp(28px, 8vh, 96px)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start; }
.hero__title { grid-column: 1 / -1; }
.hero__copy { grid-column: 1 / span 4; display: grid; gap: 26px; align-content: start; margin-top: clamp(32px, 6vh, 72px); }
.slot { position: relative; }
.hero .slot { grid-column: 6 / -1; margin-top: clamp(20px, 3.5vh, 40px); height: clamp(420px, 60vh, 580px); }

.feat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; min-height: 100svh; padding-top: 12vh; padding-bottom: 12vh; box-sizing: border-box; }
.feat__copy { display: grid; gap: 22px; align-content: center; }
.feat--left .feat__copy { grid-column: 1 / span 4; grid-row: 1; }
.feat--left .slot { grid-column: 6 / -1; grid-row: 1; }
.feat--right .feat__copy { grid-column: 9 / -1; grid-row: 1; }
.feat--right .slot { grid-column: 1 / span 7; grid-row: 1; }
.feat .slot { height: clamp(380px, 58vh, 520px); }

.numbers { padding-top: 16vh; padding-bottom: 12vh; display: grid; gap: clamp(40px, 8vh, 88px); }
.numbers__head { display: grid; gap: 18px; max-width: 760px; }
.nums { display: grid; grid-template-columns: repeat(var(--nums, 3), minmax(0, 1fr)); gap: 24px; margin: 0; }
.nums__item { display: grid; gap: 12px; align-content: start; }
.nums dt { order: 2; color: var(--soft); max-width: 22ch; }
.nums dd { order: 1; margin: 0; font-family: var(--face); font-weight: 600; letter-spacing: -0.035em; line-height: 0.9; font-size: clamp(56px, 7.4vw, 120px); }

.pricing { padding-top: 14vh; padding-bottom: 14vh; display: grid; gap: clamp(36px, 7vh, 72px); }
.pricing__head { display: grid; gap: 18px; max-width: 760px; }
.plans { display: grid; grid-template-columns: repeat(var(--plans, 3), minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.plan { display: grid; gap: 16px; align-content: start; }
.plan__name { font: 600 20px/1.2 var(--text); margin: 0; }
.plan__price { font-family: var(--face); font-weight: 600; letter-spacing: -0.035em; line-height: 0.9; font-size: clamp(52px, 5.4vw, 88px); margin: 0; }
.plan__per { color: var(--soft); margin: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--soft); }
.plan .btn { justify-self: start; margin-top: 8px; }
.plan--pick .plan__price { color: var(--accent); }

.start { min-height: 120svh; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; padding-top: 14vh; padding-bottom: 10vh; box-sizing: border-box; }
.start__title { max-width: 14ch; }
.start__knot { height: clamp(220px, 40vh, 420px); width: 100%; }
.start__go { display: grid; gap: 22px; justify-items: center; }
.start__go .body { text-align: center; }
.cmd { display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 8px 0 20px; border-radius: 12px; border: 1px solid var(--line); font: 500 15px/1 var(--mono); }
.cmd code { font: inherit; }
.cmd button { height: 36px; padding: 0 14px; border-radius: 8px; border: 0; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); font: 600 13px/1 var(--text); cursor: pointer; }
.cmd button:hover { background: color-mix(in srgb, var(--ink) 18%, transparent); }

/* ---------------- footer: «status» — the close reads like the platform's status page ---------------- */
.edge-foot--status { padding-top: clamp(80px, 16vh, 180px); }
.ef-promise { display: grid; gap: 20px; }
.ef-promise .edge-foot__statement { max-width: 17ch; }
.ef-promise .edge-foot__text { max-width: 46ch; }
/* every region across the page: its name, its state, its latency, and the latency as a bar */
.ef-board { margin: clamp(56px, 10vh, 110px) 0 0; }
.ef-board__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ef-board__cell { display: grid; gap: 6px; padding: 18px 18px 20px; border-left: 1px solid var(--line); }
.ef-board__cell:first-child { border-left: 0; padding-left: 0; }
.ef-board__k { margin: 0; font: 600 18px/1.2 var(--face); }
.ef-board__state { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--soft); }
.ef-board__dot { width: 8px; height: 8px; border-radius: 50%; background: #3FD69A; box-shadow: 0 0 0 0 rgba(63, 214, 154, 0.5); animation: beat 2.4s infinite; animation-delay: calc(var(--i) * 0.4s); }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(63, 214, 154, 0.45); } 70% { box-shadow: 0 0 0 9px rgba(63, 214, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 214, 154, 0); } }
.ef-board__ms { margin: 10px 0 0; font-family: var(--face); }
.ef-board__ms b { font-weight: 600; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; letter-spacing: -0.03em; }
.ef-board__ms span { color: var(--soft); font-size: 14px; }
.ef-board__bar { display: block; height: 3px; width: calc(var(--ms) * 100%); background: var(--accent); border-radius: 2px; }
/* the parts of the page as stations on one stream: a rule across the page, a node a part */
.ef-stream { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: clamp(64px, 11vh, 120px) 0 0; }
.ef-stream::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1.5px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent)); }
.ef-stream__link { position: relative; display: grid; gap: 6px; padding-right: 20px; color: inherit; text-decoration: none; }
.ef-stream__node { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--accent); background: var(--bg); margin-bottom: 12px; transition: background-color 0.3s, transform 0.4s var(--ease); }
.ef-stream__label { font-family: var(--face); font-weight: 600; font-size: clamp(22px, 2.1vw, 32px); letter-spacing: -0.02em; transition: color 0.3s; }
.ef-stream__detail { font-size: 14px; color: var(--soft); }
.ef-stream__link:hover .ef-stream__node, .ef-stream__link:focus-visible .ef-stream__node { background: var(--accent); transform: scale(1.25); }
.ef-stream__link:hover .ef-stream__label, .ef-stream__link:focus-visible .ef-stream__label { color: var(--accent); }
/* the request typed as one line: the prompt, the two fields and the send */
.edge-form--tail { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 22px; align-items: end; margin-top: clamp(64px, 11vh, 120px); font-family: var(--mono); }
.edge-form--tail > .edge-foot__title { margin: 0; padding-bottom: 10px; font-size: 14px; opacity: 1; color: var(--accent); }
.edge-form--tail > .edge-foot__title::before { content: '› '; }
.edge-form--tail .edge-form__rows { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 22px; }
.edge-form--tail .edge-form__row label { font-size: 12px; text-transform: lowercase; }
.edge-form--tail .edge-form__row input, .edge-form--tail .edge-form__row textarea { box-sizing: border-box; height: 42px; overflow: hidden; font-family: var(--mono); font-size: 15px; }
.edge-form--tail .edge-cta { margin: 0; --edge-radius: 12px; font-family: var(--text); }
.edge-form--tail .edge-form__done { grid-column: 1 / -1; margin-top: 4px; }
.ef-tail__help { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 30px 0 clamp(20px, 4vh, 40px); font-size: 14px; }
.ef-tail__help a { color: var(--soft); }

/* ---------------- phones ---------------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .hero, .feat { grid-template-columns: minmax(0, 1fr); }
  .hero__title, .hero__copy, .hero .slot, .feat--left .feat__copy, .feat--right .feat__copy, .feat--left .slot, .feat--right .slot { grid-column: 1; grid-row: auto; }
  .hero .slot { margin-top: 44px; height: 440px; }
  .feat { min-height: 0; padding-top: 14vh; padding-bottom: 6vh; row-gap: 36px; }
  .feat .slot { height: 420px; }
  .nums, .plans { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .start { min-height: 100svh; padding-top: 10vh; padding-bottom: 15vh; }
  .start__knot { height: clamp(150px, 22vh, 200px); }
  .cmd { font-size: 13px; padding-left: 14px; }
  .ef-board__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-board__cell, .ef-board__cell:first-child { border-left: 0; padding: 16px 12px 18px 0; border-bottom: 1px solid var(--line); }
  .ef-stream { grid-auto-flow: row; gap: 18px; padding-left: 26px; }
  .ef-stream::before { left: 6px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent)); }
  .ef-stream__node { position: absolute; left: -26px; top: 8px; margin: 0; }
  .edge-form--tail { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .edge-form--tail .edge-form__rows { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .edge-form--tail .edge-cta { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .loader__line, .ef-board__dot { animation: none; } }

/* light: the glass is brighter than the paper and lifts off it with a soft shadow (dark glass needs none: the field lights its rim) */
:root[data-theme='light'] .ui-slot { border-radius: 18px; box-shadow: 0 34px 70px -34px rgba(22, 18, 58, 0.28), 0 12px 24px -16px rgba(22, 18, 58, 0.14); }
/* the live readout's label: the kit dims it to 0.6, under 4.5:1 on the light paper where the threads pass */
.edge-live__k { opacity: 0.78; }