/* Self-hosted fonts. Sources and licenses: priv/static/fonts/SOURCES.md. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/CormorantGaramond-Variable.woff2") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2"); font-style: italic; font-weight: 300 700; font-display: swap; }
/* ButlerCRM public site. Night ground, a thread of light, serif italic for the
   words that matter. Loaded by page_html/home.html.heex, and by the status page
   for its fonts and chrome (the .bt-doc rules near the end).

   Rhythm: every section breathes by --space; the hero hands over to the
   statement through the window's fade, so the statement starts closer.
   Motion: arrivals, the thread and the two demos' state changes only; nothing
   loops but the knot, the typing dots and the dial's slow orbit. All of it
   stops under prefers-reduced-motion. */

:root {
  color-scheme: dark;
  --ground: #06090e;
  --ground-2: #0a1018;
  --panel: #0d141d;
  --ink: #f2f2ee;
  --ink-strong: #eef4f3;
  --ink-2: #b0bcc6;
  --ink-3: #8fa3b3;
  --line: rgba(255, 255, 255, .07);
  --ice: #b3e4e9;
  --warm: #e6b09a;
  --warm-2: #ecc4b2;
  --button: #dcebe8;
  --button-ink: #0b1a1f;
  --paper: #efeadf;
  --paper-ink: #0f1a2a;
  --paper-accent: #2d6f78;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(20px, 4vw, 48px);
  --space: clamp(80px, 8.5vw, 120px);
  --header: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: #d4e8ea; text-decoration: none; }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ice); outline-offset: 4px; }
::selection { background: rgba(230, 176, 154, .9); color: #0b0f15; }
em { font-style: italic; }
time, kbd, .bt-mono { font-variant-numeric: tabular-nums; }
.bt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* overflow: clip keeps the sticky header working; hidden is the old-browser fallback. */
.bt-page { position: relative; overflow: hidden; overflow: clip; }
.bt-grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; }
.bt-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.bt-skip { position: fixed; top: 12px; left: 24px; z-index: 100; padding: 12px 20px; border-radius: 10px; background: var(--ice); color: #09111b; font-weight: 600; transform: translateY(calc(-100% - 24px)); transition: transform .2s var(--ease); }
.bt-skip:focus { transform: none; color: #09111b; }

/* Type */
.bt-kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); font-variant-numeric: tabular-nums; }
.bt-kicker--warm { color: var(--warm); }
.bt-display { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 5.6vw, 84px); line-height: .96; letter-spacing: -.03em; }
.bt-display em { color: var(--ice); }
.bt-display--warm em { color: var(--warm-2); }
.bt-lede { font-size: 17px; font-weight: 300; color: var(--ink-2); text-wrap: pretty; }
.bt-mono { font-family: var(--mono); }

/* Buttons */
.bt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--button); color: var(--button-ink); font: 600 16px var(--sans); cursor: pointer; white-space: nowrap; box-shadow: 0 0 0 6px rgba(179, 228, 233, .07), 0 18px 50px rgba(0, 0, 0, .45), 0 0 50px rgba(179, 228, 233, .15); transition: background-color .25s ease, transform .25s var(--ease), box-shadow .25s ease; }
.bt-btn:hover { background: #fff; color: var(--button-ink); transform: translateY(-2px); box-shadow: 0 0 0 8px rgba(179, 228, 233, .1), 0 20px 50px rgba(0, 0, 0, .5), 0 0 60px rgba(179, 228, 233, .25); }
.bt-btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.bt-btn--arrow::after { content: "→"; transition: transform .25s var(--ease); }
.bt-btn--arrow:hover::after { transform: translateX(3px); }
.bt-btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; box-shadow: none; }
.bt-btn--sm:hover { box-shadow: 0 0 0 5px rgba(179, 228, 233, .08); }
.bt-btn--md { min-height: 48px; padding: 0 22px; font-size: 15px; box-shadow: none; }
.bt-btn--md:hover { box-shadow: 0 0 0 5px rgba(179, 228, 233, .1), 0 0 30px rgba(179, 228, 233, .18); }
.bt-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 26px; border: 1px solid rgba(179, 228, 233, .22); border-radius: 999px; background: transparent; color: #d6e4e8; font: 500 16px var(--sans); cursor: pointer; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s var(--ease); }
.bt-ghost:hover { border-color: rgba(179, 228, 233, .6); background: rgba(179, 228, 233, .07); color: #fff; }
.bt-ghost:active { transform: scale(.98); transition-duration: .08s; }
.bt-ghost--md { min-height: 48px; padding: 0 20px; font-size: 15px; }
.bt-ghost--warm { border-color: rgba(232, 200, 186, .3); color: #eddcd3; }
.bt-ghost--warm:hover { border-color: rgba(232, 200, 186, .62); background: rgba(230, 176, 154, .08); color: #fff; }
.bt-textbtn { min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #c5b4aa; font: 500 15px var(--sans); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(197, 180, 170, .45); text-underline-offset: 5px; transition: color .2s ease, text-decoration-color .2s ease; }
.bt-textbtn:hover { color: #f2e6df; text-decoration-color: currentColor; }

/* Header: static without JavaScript; the script makes it sticky and gives it a
   translucent ground once the page moves. Its height never changes. */
.bt-header { position: relative; z-index: 30; border-bottom: 1px solid transparent; transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease; }
.bt-header.is-live { position: sticky; top: 0; }
body:has(#demo-banner) .bt-header.is-live { top: 1.5rem; }
.bt-header.is-scrolled { background: rgba(6, 9, 14, .8); border-bottom-color: rgba(255, 255, 255, .06); -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bt-header.is-scrolled { background: rgba(6, 9, 14, .95); } }
.bt-header .bt-wrap { min-height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; }
.bt-brand { display: flex; align-items: center; gap: 12px; min-width: 0; border-radius: 12px; color: var(--ink); }
.bt-brand:hover { color: var(--ink); }
.bt-brand .bt-mark { flex: none; transition: filter .3s ease; }
.bt-brand:hover .bt-mark { filter: drop-shadow(0 0 12px rgba(179, 228, 233, .35)); }
.bt-wordmark { display: flex; align-items: baseline; gap: 8px; }
.bt-wordmark b { font-family: var(--serif); font-weight: 600; font-size: 29px; letter-spacing: -.01em; line-height: 1; }
.bt-wordmark span { font-size: 11px; font-weight: 600; letter-spacing: .22em; color: #9fb1bd; }
.bt-nav { display: flex; gap: 4px; padding: 5px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(14, 21, 31, .6); font-size: 14px; }
.bt-nav a { padding: 9px 18px; border-radius: 999px; color: #b9c5ce; transition: background-color .25s ease, color .25s ease; }
.bt-nav a:hover { background: rgba(179, 228, 233, .08); color: #fff; }
.bt-nav a.is-active { background: rgba(179, 228, 233, .12); color: #f2f8f8; }
.bt-nav a:focus-visible { outline-offset: 1px; }
.bt-header-actions { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.bt-header-actions .bt-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: #c7d3db; transition: color .2s ease; }
.bt-header-actions .bt-signin:hover { color: #fff; }

/* Phone menu: a disclosure, so it opens without JavaScript; the script closes
   it after a jump, on Escape and on an outside tap. */
.bt-menu { position: relative; display: none; }
.bt-menu summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(179, 228, 233, .22); color: #d6e4e8; cursor: pointer; list-style: none; transition: border-color .2s ease, background-color .2s ease; }
.bt-menu summary::-webkit-details-marker { display: none; }
.bt-menu summary:hover, .bt-menu[open] summary { border-color: rgba(179, 228, 233, .55); background: rgba(179, 228, 233, .07); }
.bt-menu-icon, .bt-menu-icon::before { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease); }
.bt-menu-icon { position: relative; transform: translateY(-3px); }
.bt-menu-icon::before { content: ""; position: absolute; left: 0; top: 6px; }
.bt-menu[open] .bt-menu-icon { transform: translateY(0) rotate(45deg); }
.bt-menu[open] .bt-menu-icon::before { transform: translateY(-6px) rotate(-90deg); }
.bt-menu-panel { position: absolute; top: calc(100% + 12px); right: 0; width: min(280px, calc(100vw - 2 * var(--gutter))); display: flex; flex-direction: column; padding: 8px; border-radius: 18px; border: 1px solid rgba(200, 225, 240, .12); border-top-color: rgba(225, 242, 250, .22); background: rgba(13, 20, 29, .97); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.bt-menu[open] .bt-menu-panel { animation: bt-drop .22s var(--ease) both; }
.bt-menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 12px; font-size: 16px; color: #d6e1e7; }
.bt-menu-panel a:hover { background: rgba(179, 228, 233, .07); color: #fff; }
.bt-menu-panel a:focus-visible { outline-offset: -2px; }
.bt-menu-panel .bt-menu-signin { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .07); border-radius: 0 0 12px 12px; color: var(--ice); }

/* Hero */
.bt-hero { position: relative; z-index: 1; isolation: isolate; padding: clamp(40px, 6vw, 88px) 0 0; text-align: center; }
.bt-hero-glow { position: absolute; left: 50%; top: -300px; width: 1600px; height: 1200px; transform: translateX(-50%); z-index: -1; background: radial-gradient(closest-side, rgba(46, 92, 122, .6), rgba(20, 44, 64, .25) 45%, transparent 75%); pointer-events: none; }
.bt-hero-copy { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.bt-pill { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid rgba(230, 176, 154, .22); background: rgba(230, 176, 154, .06); font-size: 13px; line-height: 1.45; color: #f0d3c5; text-wrap: balance; }
.bt-knot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warm); }
/* Capped so "Keep the thread." stays on one line inside the 1320px wrap. */
.bt-hero h1 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: clamp(80px, 14.6vw, 210px); line-height: .9; letter-spacing: -.045em; color: var(--ink-strong); }
.bt-hero h1 em { font-weight: 500; padding-right: .06em; background: linear-gradient(180deg, #fff 10%, var(--ice) 70%, #8fc6cd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bt-hero .bt-lede { max-width: 640px; text-wrap: balance; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: #b4c0ca; }
.bt-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 18px; }

/* The scene: three threads meet at the knot on the window. The chips ride the
   side threads (agent on the ice thread, person on the warm one), so they
   never cover the window's chrome. Their tops follow the curves in the 170px
   tall SVG; the SVG stretches only in width, its strokes do not scale. */
.bt-scene { position: relative; margin-top: 4px; }
.bt-thread { display: block; width: 100%; height: 170px; }
.bt-stage { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 40px); }
.bt-stage-knot { position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--warm); z-index: 3; }
.bt-chip { position: absolute; z-index: 4; translate: -50% -50%; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(18, 28, 39, .94); border: 1px solid rgba(179, 228, 233, .22); border-top-color: rgba(179, 228, 233, .36); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); text-align: left; line-height: 1.35; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bt-chip--left { left: max(19%, 50% - 500px); top: 80px; }
.bt-chip--right { left: min(81%, 50% + 500px); top: 103px; background: rgba(39, 30, 30, .94); border-color: rgba(230, 176, 154, .28); border-top-color: rgba(236, 196, 178, .42); }
.bt-chip-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #0b131c; border: 1px solid rgba(179, 228, 233, .3); }
.bt-chip-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #2a3550; color: #cdd8f3; font-size: 13px; font-weight: 600; }
.bt-chip strong { display: block; font-size: 13px; font-weight: 400; color: #e6eef1; }
.bt-chip small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9fb1bd; font-variant-numeric: tabular-nums; }
.bt-chip--right small { color: #c4ada1; }
.bt-typing { display: inline-flex; gap: 3px; }
.bt-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--ice); }

/* Product window. The fade covers only the last rows (a second item in
   motion and the padding), never the three that need you. */
.bt-window-tilt { --fade: 150px; transform: perspective(2200px) rotateX(9deg); transform-origin: 50% 0; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), rgba(0, 0, 0, .5) calc(100% - var(--fade) * .55), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), rgba(0, 0, 0, .5) calc(100% - var(--fade) * .55), transparent); }
.bt-window { text-align: left; border-radius: 20px; border: 1px solid rgba(200, 225, 240, .14); border-top-color: rgba(225, 242, 250, .32); background: #0b1119; box-shadow: 0 -20px 120px rgba(90, 170, 210, .14), 0 60px 140px rgba(0, 0, 0, .7); overflow: hidden; }
.bt-window-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .06); background: #0a0f16; }
.bt-window-dots { flex: 1 1 0; display: flex; gap: 7px; }
.bt-window-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a3441; }
.bt-window-url { flex: none; display: flex; justify-content: center; }
.bt-window-url span { padding: 5px 18px; border-radius: 8px; background: #121a24; font-size: 12px; color: #8fa1af; }
.bt-sample { flex: 1 1 0; text-align: right; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7f909e; }
.bt-window-body { display: flex; }
.bt-side { flex: 0 0 220px; padding: 22px 16px; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid rgba(255, 255, 255, .05); background: #080d13; }
.bt-side-org { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 14px; color: #dfe7eb; font-weight: 500; }
.bt-side-group { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.bt-side-group > b { padding: 0 10px 6px; font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: #75889a; }
.bt-side-group > span { display: flex; justify-content: space-between; padding: 7px 10px; color: #a9b7c2; }
.bt-side-group > span.is-current { border-radius: 8px; background: rgba(179, 228, 233, .09); color: #eef6f6; }
.bt-side-group em { font-style: normal; font-family: var(--mono); font-size: 12px; color: #f0c9b8; font-variant-numeric: tabular-nums; }
.bt-main { flex: 1; min-width: 0; padding: 26px clamp(18px, 3vw, 36px) 72px; background: radial-gradient(80% 50% at 30% 0%, rgba(40, 80, 105, .25), transparent 70%), var(--panel); }
.bt-main-top { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; font-size: 13px; color: #8295a5; }
.bt-search { flex: 1; max-width: 460px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08); background: #0a1017; font-size: 13px; color: #7f909e; }
.bt-search kbd { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .1); }
.bt-avatar-sm { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(140, 170, 230, .2); color: #c9d6f5; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.bt-main-title { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink-strong); text-wrap: balance; }
.bt-main-title em { color: var(--ice); }
.bt-ledger { margin: 12px 0 28px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bt-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px 40px; }
.bt-group-title { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: #dfe7eb; font-weight: 500; }
.bt-group-title + .bt-group-title, .bt-row + .bt-group-title { margin-top: 22px; }
.bt-row { display: grid; grid-template-columns: 3px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.bt-row:last-of-type { border-bottom: 0; }
.bt-row > i { align-self: stretch; border-radius: 3px; background: var(--warm); }
.bt-row > i.is-late { background: #c9727c; }
.bt-row p { font-size: 14px; color: #e5ecef; }
.bt-row small { display: block; font-size: 12px; color: #8597a6; font-variant-numeric: tabular-nums; }
.bt-row .bt-review { font-size: 12px; padding: 5px 12px; border-radius: 999px; background: var(--button); color: var(--button-ink); font-weight: 600; }
.bt-row .bt-link { font-size: 12px; color: var(--ice); }
.bt-row .bt-late { font-size: 12px; color: #e8a3ab; }
.bt-progress { display: flex; flex-direction: column; gap: 8px; padding: 13px 0; }
.bt-progress + .bt-progress { border-top: 1px solid rgba(255, 255, 255, .05); }
.bt-progress div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #e5ecef; }
.bt-progress div span { flex: none; font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bt-progress > i { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bt-progress > i::after { content: ""; display: block; width: var(--p, 60%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6fb9c3, var(--ice)); }
.bt-funnel { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; font-size: 13px; }
.bt-funnel div { display: grid; grid-template-columns: 96px 1fr 40px; gap: 12px; align-items: center; color: #a9b7c2; }
.bt-funnel i { height: 10px; border-radius: 3px; width: var(--w); background: var(--c); }
.bt-funnel b { font-family: var(--mono); font-weight: 400; color: #c9d4db; text-align: right; font-variant-numeric: tabular-nums; }
.bt-nudge { margin-top: 24px; padding: 14px 16px; border-radius: 12px; background: rgba(179, 228, 233, .05); border: 1px solid rgba(179, 228, 233, .12); font-size: 13px; color: #b9cad2; text-wrap: pretty; }
.bt-nudge span { color: var(--ice); white-space: nowrap; }

/* Statement */
.bt-statement { position: relative; z-index: 1; padding: clamp(48px, 6vw, 88px) 0 var(--space); }
.bt-statement p { max-width: 1084px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.6vw, 66px); line-height: 1.14; letter-spacing: -.02em; color: #5f7282; text-wrap: pretty; }
.bt-statement span { color: var(--ink-strong); }
.bt-statement em { color: var(--ice); }

/* Day and night. The dial sits on the seam: in the middle from 1280px, below
   the two halves down to 821px, between them when they stack. */
.bt-split { position: relative; z-index: 1; --dial: clamp(400px, 33vw, 520px); }
.bt-split-row { display: flex; flex-wrap: wrap; }
.bt-half { flex: 1 1 520px; min-width: 0; display: flex; padding-top: var(--space); padding-bottom: var(--space); }
.bt-half > div { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 24px; }
.bt-half--day { justify-content: flex-end; padding-left: clamp(20px, 5vw, 80px); padding-right: calc(var(--dial) / 2 + 40px); background: radial-gradient(70% 60% at 30% 10%, #fbf8f0, var(--paper) 70%); color: var(--paper-ink); }
.bt-half--night { padding-right: clamp(20px, 5vw, 80px); padding-left: calc(var(--dial) / 2 + 40px); background: radial-gradient(70% 60% at 70% 10%, rgba(110, 72, 58, .35), transparent 70%), #070b11; }
.bt-half .bt-kicker { display: flex; align-items: center; gap: 10px; }
.bt-half--day .bt-kicker { color: var(--paper-accent); }
.bt-half h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 6vw, 96px); line-height: .9; letter-spacing: -.035em; }
.bt-half h2 em { white-space: nowrap; }
.bt-half--day h2 em { color: var(--paper-accent); }
.bt-half--night h2 em { color: var(--warm-2); }
.bt-half--day .bt-lede { color: #3d4a57; font-weight: 400; }
.bt-half--day ::selection { background: rgba(45, 111, 120, .9); color: #fbf8f0; }
.bt-times { display: flex; flex-direction: column; margin-top: 4px; padding: 0; list-style: none; }
.bt-times li { display: grid; grid-template-columns: 58px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .09); font-size: 15px; line-height: 1.5; color: #d3dde3; text-wrap: pretty; }
.bt-times li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.bt-times time { font-family: var(--mono); color: var(--warm); }
.bt-half--day .bt-times li { border-color: rgba(15, 26, 42, .14); color: var(--paper-ink); }
.bt-half--day .bt-times time { color: var(--paper-accent); }
.bt-dial { position: absolute; left: 50%; top: 50%; width: var(--dial); height: var(--dial); transform: translate(-50%, -50%); border-radius: 50%; background: var(--ground-2); box-shadow: 0 0 0 1px rgba(179, 228, 233, .16), 0 36px 90px -24px rgba(5, 10, 16, .6), 0 0 130px rgba(90, 170, 210, .16); z-index: 2; }
/* A hairline groove around the dial, one half tinted for paper, one for night. */
.bt-dial::before, .bt-dial::after { content: ""; position: absolute; inset: -15px; border-radius: 50%; border: 1px solid; pointer-events: none; }
.bt-dial::before { border-color: rgba(15, 26, 42, .2); clip-path: inset(0 50% 0 0); }
.bt-dial::after { border-color: rgba(179, 228, 233, .16); clip-path: inset(0 0 0 50%); }
.bt-dial svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
/* SVG text sizes are in dial units (600 across), set here so phones can grow them. */
.bt-dial text { fill: #8fa3b3; font-family: var(--sans); }
.bt-dial .bt-dial-num { font-family: var(--mono); }
.bt-dial .bt-dial-big { fill: #eef4f3; font-family: var(--serif); font-style: italic; }
.bt-dial .bt-dial-sub { fill: #a9b7c2; }
.bt-dial .bt-dial-tag { fill: #b3e4e9; letter-spacing: 2px; }
.bt-dial .bt-dial-tag--warm { fill: #e6b09a; }
.bt-dial-cap { font-size: 13px; letter-spacing: 2px; }
.bt-dial-num { font-size: 13px; }
.bt-dial-big { font-size: 66px; }
.bt-dial-sub { font-size: 14px; }
.bt-dial-tag { font-size: 12px; }
.bt-orbit { transform-origin: 300px 300px; }

/* Roster and the leash */
.bt-section { position: relative; z-index: 1; padding: var(--space) 0; }
.bt-section--ruled { border-top: 1px solid rgba(255, 255, 255, .06); }
.bt-section--warm { background: radial-gradient(50% 60% at 25% 55%, rgba(110, 72, 58, .28), transparent 70%); }
.bt-stack { display: flex; flex-direction: column; gap: 56px; }
.bt-headrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 56px; }
.bt-headrow > div:first-child { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.bt-headrow > div:last-child, .bt-headrow > p { display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.bt-roster { display: flex; align-items: center; }
.bt-roster > span { width: 46px; height: 46px; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.bt-person { border-radius: 50%; border: 3px solid var(--ground); }
.bt-person + .bt-person { margin-left: -10px; }
.bt-person--a { background: #2a3550; color: #cdd8f3; }
.bt-person--s { background: #4a3530; color: #f0cdbd; }
.bt-person--j { background: #2f4136; color: #c9e4d0; }
.bt-roster > i { width: 1px; height: 30px; margin: 0 14px; background: rgba(255, 255, 255, .14); }
.bt-agent { border-radius: 14px; background: #101b26; border: 1px solid rgba(179, 228, 233, .3); }
.bt-agent + .bt-agent { margin-left: 8px; }

.bt-leash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); border-radius: 24px; border: 1px solid rgba(200, 225, 240, .12); border-top-color: rgba(225, 242, 250, .24); background: linear-gradient(160deg, #111a25, var(--ground-2)); box-shadow: 0 40px 100px rgba(0, 0, 0, .5); overflow: hidden; }
.bt-leash-tools, .bt-leash-out { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.bt-leash-tools { border-right: 1px solid rgba(255, 255, 255, .06); }
.bt-leash-out { gap: 28px; container-type: inline-size; }
.bt-label { margin-bottom: 2px; font-size: 13px; color: var(--ink-3); }
.bt-leash-out .bt-label { margin-bottom: 14px; }
.bt-tool { position: relative; text-align: left; min-height: 56px; padding: 0 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: transparent; color: #b9c5ce; font: 400 16px var(--sans); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .2s var(--ease); }
.bt-tool::after { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 12px var(--ice); opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .3s var(--ease); }
.bt-tool:hover { border-color: rgba(179, 228, 233, .22); background: rgba(179, 228, 233, .03); color: #e6eef1; }
.bt-tool:active { transform: scale(.99); transition-duration: .08s; }
.bt-tool[aria-pressed="true"] { border-color: rgba(179, 228, 233, .45); background: rgba(179, 228, 233, .09); color: #f2f8f8; }
.bt-tool[aria-pressed="true"]::after { opacity: 1; transform: none; }
.bt-tool:focus-visible { outline-offset: 3px; }
.bt-leash-foot { margin-top: auto; padding-top: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.bt-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 16px; background: #080d13; border: 1px solid rgba(255, 255, 255, .06); }
.bt-level { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 8px; border: 0; border-radius: 11px; background: transparent; color: #a9b7c2; font: 500 14px var(--sans); cursor: pointer; transition: background-color .28s ease, color .28s ease, box-shadow .28s ease; }
.bt-level:hover { background: rgba(255, 255, 255, .05); color: #e6eef1; }
.bt-level:focus-visible { outline-offset: 2px; }
.bt-level[aria-checked="true"] { background: var(--level, var(--ice)); color: var(--button-ink); font-weight: 600; box-shadow: 0 0 30px rgba(179, 228, 233, .18); }
@container (min-width: 500px) { .bt-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* A tool whose floor needs approval: Autonomous stays pickable, so the page can
   say why, but it reads as locked and never fills. */
.bt-level-lock { display: none; }
.bt-level.is-locked { color: #7f909e; }
.bt-level.is-locked .bt-level-lock { display: inline-flex; }
.bt-level.is-locked:hover { color: #c5d0d8; }
.bt-level.is-locked[aria-checked="true"] { background: rgba(230, 176, 154, .08); color: #f0d3c5; box-shadow: inset 0 0 0 1px rgba(230, 176, 154, .5); }
.bt-outcome { --tone: var(--warm); flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 200px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .07); }
.bt-outcome-label { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tone); transition: color .3s ease; }
.bt-outcome-label::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.bt-outcome-text { font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); line-height: 1.12; letter-spacing: -.01em; color: var(--ink-strong); text-wrap: pretty; }
.bt-outcome.is-locked .bt-outcome-text { color: #e9ddd6; }
.is-fresh { animation: bt-settle .38s var(--ease) both; }
.bt-outcome-text.is-fresh { animation-delay: .04s; }

/* Sample inbox */
/* The copy comes first in the document (heading before demo); side by side,
   the demo takes the left column. Stacked, the demo sits under the lede and
   the four promises follow it. */
.bt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); align-items: start; }
.bt-two > .bt-inbox { order: -1; }
.bt-two-copy { display: flex; flex-direction: column; gap: 26px; max-width: 540px; }
.bt-inbox { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 560px; width: 100%; }
.bt-inbox-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 26px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #c9ab9c; }
.bt-inbox-head span:last-child { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); letter-spacing: 0; text-transform: none; color: #f0c9b8; font-variant-numeric: tabular-nums; }
.bt-inbox-head span:last-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 10px rgba(230, 176, 154, .7); transition: background-color .3s ease, box-shadow .3s ease; }
.bt-inbox.is-clear .bt-inbox-head span:last-child { color: var(--ice); }
.bt-inbox.is-clear .bt-inbox-head span:last-child::before { background: var(--ice); box-shadow: 0 0 10px rgba(179, 228, 233, .6); }
/* The card and the done panel share one cell, so finishing never moves the page. */
.bt-inbox-stage { display: grid; }
.bt-inbox-stage > * { grid-area: 1 / 1; min-width: 0; }
.bt-inbox-stage > .is-off { visibility: hidden; opacity: 0; pointer-events: none; }
.bt-deck { position: relative; }
.bt-deck::before, .bt-deck::after { content: ""; position: absolute; height: 40px; border-radius: 20px; transition: opacity .35s ease, transform .35s var(--ease); }
.bt-deck::before { left: 24px; right: 24px; bottom: -14px; background: #1b1a1e; border: 1px solid rgba(201, 178, 164, .12); }
.bt-deck::after { left: 12px; right: 12px; bottom: -7px; background: #211e22; border: 1px solid rgba(201, 178, 164, .15); }
.bt-deck[data-left="2"]::before, .bt-deck[data-left="1"]::before { opacity: 0; transform: translateY(-7px); }
.bt-deck[data-left="1"]::after { opacity: 0; transform: translateY(-7px); }
.bt-request { position: relative; z-index: 1; border-radius: 22px; background: linear-gradient(150deg, #29232a, #15191f 62%); border: 1px solid rgba(201, 178, 164, .22); border-top-color: rgba(232, 200, 186, .38); box-shadow: 0 40px 90px rgba(0, 0, 0, .55); padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; transition: opacity .22s ease, transform .22s ease; }
.bt-request.is-leaving { opacity: 0; transform: translateY(-10px) scale(.985); }
.bt-request.is-entering { animation: bt-deal .42s var(--ease) both; }
.bt-request-who { display: flex; align-items: center; gap: 12px; }
.bt-request-who > span { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #101b26; border: 1px solid rgba(179, 228, 233, .3); }
.bt-request-who p { font-size: 14px; color: #ece3de; }
.bt-request-who small { display: block; font-size: 13px; color: #b19f95; }
.bt-request-title { font-family: var(--serif); font-weight: 600; font-size: 32px; line-height: 1.1; color: #f4ece7; }
.bt-request-body { min-height: calc(3 * 1.7em + 32px); padding: 16px 18px; border-radius: 14px; background: rgba(6, 9, 14, .5); border: 1px solid rgba(255, 255, 255, .06); font-size: 15px; line-height: 1.7; color: #d4cbc5; text-wrap: pretty; }
.bt-request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.bt-done { border-radius: 22px; border: 1px solid rgba(179, 228, 233, .25); background: radial-gradient(80% 100% at 50% 0%, rgba(60, 110, 130, .35), transparent 70%), #0c141c; padding: 44px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.bt-done[hidden], .bt-deck[hidden] { display: none; }
.bt-done.is-on { animation: bt-deal .5s var(--ease) both; }
.bt-done p:first-of-type { font-family: var(--serif); font-size: clamp(44px, 4.4vw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--ink-strong); text-wrap: balance; }
.bt-done p:first-of-type em { color: var(--ice); }
.bt-done p + p { font-size: 15px; color: #a9b7c2; }
.bt-done .bt-knot { width: 14px; height: 14px; margin-bottom: 6px; }
.bt-done .bt-ghost { margin-top: 10px; }
.bt-receipts { margin-top: 18px; }
.bt-receipts-empty { padding: 12px 0; border-top: 1px dashed rgba(255, 255, 255, .1); font-size: 14px; color: #8597a6; }
.bt-receipts-empty[hidden] { display: none; }
.bt-log { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.bt-log li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 14px; color: #c9d4db; animation: bt-settle .4s var(--ease) both; }
.bt-log li span { display: flex; align-items: baseline; gap: 10px; text-wrap: pretty; }
.bt-log li span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ice); transform: translateY(-1px); }
.bt-log li[data-kind="changes"] span::before { background: var(--warm); }
.bt-log li[data-kind="no"] span::before { background: #6b7c8a; }
.bt-log time { font-family: var(--mono); color: var(--ink-3); }
.bt-promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 32px; }
.bt-promises div { padding: 18px 0; border-top: 1px solid rgba(230, 176, 154, .35); }
.bt-promises p { font-size: 16px; color: #ecebe7; }
.bt-promises p + p { margin-top: 4px; font-size: 14px; color: #a0adb9; text-wrap: pretty; }

/* Index. Rows are not links, so hover only warms the row; it moves nothing. */
.bt-index-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.bt-index-list li { position: relative; isolation: isolate; display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 24px; align-items: baseline; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.bt-index-list li::before { content: ""; position: absolute; inset: -1px 0 0; z-index: -1; background: linear-gradient(90deg, rgba(179, 228, 233, .06), transparent 70%); opacity: 0; transition: opacity .35s ease; }
.bt-index-list span { font-family: var(--mono); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.bt-index-list h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -.01em; color: var(--ink-strong); transition: transform .4s var(--ease); }
.bt-index-list h3 em { color: var(--warm-2); }
.bt-index-list p { max-width: 560px; font-size: 17px; color: #a9b7c2; text-wrap: pretty; }
@media (hover: hover) {
  .bt-index-list li:hover::before { opacity: 1; }
  .bt-index-list li:hover span { color: var(--ice); }
  .bt-index-list li:hover h3 { transform: translateX(10px); }
}

/* Closing: the thread drops from the rule into the mark. */
.bt-closing { --drop: clamp(96px, 11vw, 160px); position: relative; z-index: 1; isolation: isolate; overflow: hidden; padding: var(--drop) 0 clamp(88px, 9vw, 136px); text-align: center; border-top: 1px solid rgba(255, 255, 255, .06); }
.bt-closing::before { content: ""; position: absolute; left: 50%; bottom: -520px; width: 1400px; height: 1000px; transform: translateX(-50%); z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(230, 176, 154, .2), rgba(60, 100, 120, .18) 45%, transparent 75%); }
.bt-closing::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: var(--drop); margin-left: -.5px; background: linear-gradient(180deg, transparent, rgba(179, 228, 233, .65)); z-index: -1; }
.bt-closing .bt-wrap { max-width: 1100px; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.bt-closing .bt-mark { filter: drop-shadow(0 0 40px rgba(179, 228, 233, .25)); }
.bt-closing h2 { margin-bottom: 8px; font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 9vw, 140px); line-height: .92; letter-spacing: -.04em; }
.bt-closing h2 em { display: block; color: var(--warm-2); }
.bt-note { font-size: 14px; color: #8d9cab; text-wrap: balance; }

/* Footer */
.bt-footer { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .06); background: #05070b; }
.bt-footer .bt-wrap { padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; font-size: 13px; color: #8d9cab; }
.bt-footer-brand { display: flex; align-items: center; gap: 10px; }
.bt-footer-brand b { font-family: var(--serif); font-weight: 600; font-size: 21px; color: #e8eeee; }
.bt-footer-brand span { padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .1); }
.bt-footer nav { display: flex; gap: 8px; }
.bt-footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #a9b6c1; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color .2s ease, text-decoration-color .2s ease; }
.bt-footer nav a:hover { color: #fff; text-decoration-color: rgba(179, 228, 233, .5); }
.bt-footer-year { font-variant-numeric: tabular-nums; }

/* Document pages (/status; the legal pages once their shell adds .bt-doc):
   the site's ground, brand lockup and display serif over status.css. */
body.bt-doc { background: radial-gradient(1000px 520px at 50% -160px, rgba(46, 92, 122, .38), transparent 70%) no-repeat, var(--ground); }
.bt-doc .status-header { position: relative; z-index: 2; border-bottom-color: rgba(255, 255, 255, .06); }
.bt-doc .status-navigation { min-height: 80px; }
.bt-doc .bt-brand .bt-mark { width: 36px; height: 36px; }
.bt-doc .bt-wordmark b { font-size: 27px; }
.bt-doc .status-home { border-radius: 999px; transition: color .2s ease; }
.bt-doc .status-home:hover { color: #fff; }
.bt-doc .status-eyebrow { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.bt-doc .status-introduction h1 { margin: 18px 0 22px; font-family: var(--serif); font-weight: 500; font-size: clamp(52px, 7.4vw, 88px); line-height: .94; letter-spacing: -.035em; color: var(--ink-strong); }
.bt-doc .status-introduction h1 em { font-family: var(--serif); font-size: 1em; color: var(--ice); }
.bt-doc .status-introduction > p:last-child { font-weight: 300; font-size: 17px; color: var(--ink-2); text-wrap: balance; }
.bt-doc .status-page h2, .bt-doc h2 { text-wrap: balance; }
.bt-doc .status-footer { align-items: center; border-top-color: rgba(255, 255, 255, .06); }
.bt-doc .status-footer a { margin-top: 0; color: #a9b6c1; }
.bt-doc .status-footer a:hover { color: #fff; }
.bt-doc-sign { display: inline-flex; align-items: center; gap: 10px; }

/* Motion */
@keyframes bt-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 176, 154, .6), 0 0 22px rgba(230, 176, 154, .7); } 50% { box-shadow: 0 0 0 10px rgba(230, 176, 154, 0), 0 0 34px rgba(230, 176, 154, .9); } }
@keyframes bt-draw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes bt-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bt-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bt-deal { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes bt-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes bt-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes bt-spin { to { transform: rotate(360deg); } }
.bt-knot, .bt-stage-knot { animation: bt-breathe 3.2s ease-in-out infinite; }
.bt-draw { stroke-dasharray: 1600; animation: bt-draw 3.4s cubic-bezier(.6, .1, .2, 1) .2s both; }
.bt-hero-copy { animation: bt-rise 1s var(--ease) both; }
.bt-chip { animation: bt-rise 1s var(--ease) 1.6s both; }
.bt-chip--right { animation-delay: 2s; }
.bt-typing i { animation: bt-dot 1.2s ease-in-out infinite; }
.bt-typing i:nth-child(2) { animation-delay: .15s; }
.bt-typing i:nth-child(3) { animation-delay: .3s; }
.bt-orbit { animation: bt-spin 120s linear infinite; }

@media (max-width: 1279px) {
  /* The dial moves below the halves, still on the seam. */
  .bt-split { --dial: 420px; padding-bottom: 72px; background: linear-gradient(90deg, var(--paper) 50%, #070b11 50%); }
  .bt-half { flex-basis: 380px; padding-bottom: 56px; }
  .bt-half--day { justify-content: flex-start; padding-right: var(--gutter); }
  .bt-half--night { padding-left: var(--gutter); }
  .bt-dial { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
}
@media (max-width: 960px) {
  .bt-nav { display: none; }
  .bt-menu { display: block; }
}
@media (max-width: 960px) {
  .bt-two { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bt-two-copy { display: contents; }
  .bt-two > *, .bt-two-copy > * { max-width: 620px; }
  .bt-two > .bt-inbox { order: 0; margin-top: 14px; }
  .bt-two .bt-promises { order: 1; margin-top: 40px; }
}
@media (max-width: 820px) {
  :root { --header: 68px; }
  .bt-dial::before { clip-path: inset(0 0 50% 0); }
  .bt-dial::after { clip-path: inset(50% 0 0 0); }
  .bt-side, .bt-hide-sm, .bt-chip--right { display: none; }
  .bt-header .bt-wrap { gap: 12px; }
  .bt-header-actions { gap: 8px; }
  /* The agent chip becomes a bead on the centre thread. */
  .bt-chip--left { left: 50%; top: 84px; }
  /* Stacked: the dial sits on the seam between day and night. */
  .bt-split { --dial: min(340px, calc(100vw - 72px)); display: flex; flex-direction: column; padding-bottom: 0; background: none; }
  .bt-split-row { display: contents; }
  .bt-half { flex: none; }
  .bt-half--day { order: 1; padding-bottom: calc(var(--dial) / 2 + 48px); }
  .bt-dial { order: 2; flex: none; margin-block: calc(var(--dial) / -2); }
  .bt-half--night { order: 3; padding-top: calc(var(--dial) / 2 + 48px); }
  /* Larger labels: the dial is drawn at a third of its desktop size. */
  .bt-dial-cap, .bt-dial-num { font-size: 20px; }
  .bt-dial-tag { font-size: 18px; }
  .bt-dial-sub { font-size: 20px; }
  .bt-dial-big { font-size: 76px; }
  .bt-leash-tools { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .bt-index-list li { grid-template-columns: 40px minmax(0, 1fr); }
  .bt-index-list li p { grid-column: 2; }
}
@media (max-width: 600px) {
  .bt-header-actions .bt-signin { display: none; }
  .bt-pipeline { display: none; }
  .bt-main { padding-bottom: 64px; }
  .bt-pill { display: inline-block; padding: 8px 16px; font-size: 12.5px; border-radius: 20px; text-align: center; }
  .bt-pill .bt-knot { margin-right: 8px; vertical-align: 1px; }
  .bt-hero-copy { gap: 28px; }
  .bt-actions .bt-btn, .bt-actions .bt-ghost { min-width: min(280px, 100%); }
  .bt-display { font-size: clamp(40px, 11.4vw, 46px); }
  .bt-display em { display: block; }
  .bt-request { padding: 22px 20px; }
  .bt-request-title { font-size: 28px; }
  .bt-footer .bt-wrap { justify-content: flex-start; }
  .bt-footer nav { margin-left: -10px; }
}
@media (max-width: 420px) {
  .bt-wordmark span { display: none; }
  .bt-brand { gap: 10px; }
  .bt-brand .bt-mark { width: 36px; height: 36px; }
  .bt-header .bt-btn--sm { padding: 0 16px; }
  .bt-footer-brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bt-draw { stroke-dasharray: none; }
}