/* Butla web design system: tokens and primitives shared by every page. Root class `bt` on the page's outermost element (or on a shared block's own root).
   Source of truth for the home page too (its section styles override where they differ). */
.bt {
  --bt-paper: #ffffff;
  --bt-soft: #fafafa;
  --bt-soft-2: #f5f5f5;
  --bt-ink: #0a0a0a;
  --bt-ink-1: #171717;
  --bt-ink-2: #262626;
  --bt-ink-3: #404040;
  --bt-ink-4: #525252;
  --bt-grey: #737373;
  --bt-grey-2: #a3a3a3;
  --bt-line: #737373;        /* every 1px frame, pill and card border */
  --bt-line-soft: #e5e5e5;   /* floating glow cards */
  --bt-line-2: #d4d4d4;
  --bt-line-dark: #222222;   /* use-case illustration frame */
  --bt-purple-950: #3b0764;
  --bt-purple-800: #6b21a8;
  --bt-purple-700: #7e22ce;
  --bt-purple-500: #a855f7;
  --bt-purple-200: #e9d5ff;
  --bt-purple-100: #f3e8ff;
  --bt-purple-50: #faf5ff;
  --bt-green: #34d399;
  --bt-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --bt-sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --bt-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bt-w-light: 320;   /* stands in for Reckless Neue Light */
  --bt-w-regular: 420; /* stands in for Reckless Neue Regular */

  background: var(--bt-paper);
  color: var(--bt-ink-1);
  font-family: var(--bt-sans);
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bt *, .bt *::before, .bt *::after { box-sizing: border-box; }
/* the global stylesheet forces Satoshi on headings and Element UI forces blue anchors */
.bt h1, .bt h2, .bt h3, .bt h4, .bt h5, .bt h6 { font-family: var(--bt-serif) !important; margin: 0; }
.bt p { margin: 0; }
.bt a { color: inherit !important; text-decoration: none; }
.bt button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.bt button.bt-btn { padding: 2px; }
.bt img, .bt video { display: block; max-width: 100%; }
.bt ul, .bt ol { list-style: none; margin: 0; padding: 0; }

/* ─── Column ─── */
.bt-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: 120px; padding-right: 120px; }
@media (max-width: 1199.98px) { .bt-wrap { padding-left: 64px; padding-right: 64px; } }
@media (max-width: 809.98px) { .bt-wrap { padding-left: 24px; padding-right: 24px; } }

/* ─── Type ─── */
.bt-h1 { font-family: var(--bt-serif); font-weight: var(--bt-w-light); font-size: 64px; line-height: 64px; letter-spacing: -4.5px; color: var(--bt-ink-1); }
.bt-h2 { font-family: var(--bt-serif); font-weight: var(--bt-w-light); font-size: 51px; line-height: 51px; letter-spacing: -1.5px; color: var(--bt-ink-1); }
.bt-h4 { font-family: var(--bt-serif); font-weight: var(--bt-w-light); font-size: 28px; line-height: 30.8px; letter-spacing: -1.5px; color: var(--bt-ink); }
.bt-h5 { font-family: var(--bt-serif); font-weight: var(--bt-w-regular); font-size: 20px; line-height: 20px; letter-spacing: -0.5px; color: var(--bt-ink-1); }
.bt-stat { font-family: var(--bt-serif); font-weight: var(--bt-w-light); font-size: 84px; line-height: 58.8px; letter-spacing: -2.52px; color: var(--bt-ink); }
.bt-p { font-family: var(--bt-sans); font-size: 16px; line-height: 22.4px; color: var(--bt-ink-2); }
.bt-p-sm { font-family: var(--bt-sans); font-size: 14px; line-height: 16.8px; letter-spacing: 0.5px; color: var(--bt-ink-2); }
.bt-mono-xs { font-family: var(--bt-mono); font-weight: 300; font-size: 10px; line-height: 10px; text-transform: uppercase; }

/* ─── Section pill ─── */
.bt-tag { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.bt-pill {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 24px; border-radius: 103px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--bt-mono); font-weight: 300; font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--bt-ink-1);
  white-space: nowrap;
}
.bt-pill::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--bt-line); border-radius: inherit; pointer-events: none; }
/* hero variant: square, 12px text, purple dot */
.bt-pill--dot { border-radius: 0; font-size: 12px; line-height: 12px; text-transform: none; background: rgba(255, 255, 255, 0.2); }
.bt-pill--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bt-purple-500); box-shadow: 0 0 0 3px var(--bt-purple-200); flex-shrink: 0; }

/* ─── Buttons (nested layers: glow ring > edge > body > hover + label) ───
   glow:  <a class="bt-btn bt-btn--glow"><span class="bt-btn__glow"><i></i></span><span class="bt-btn__edge"><i class="bt-btn__edge-glow"></i><span class="bt-btn__body"><i class="bt-btn__hover"></i><span class="bt-btn__label">Book a demo</span></span></span></a>
   line:  <a class="bt-btn bt-btn--line"><span class="bt-btn__edge"><span class="bt-btn__body"><i class="bt-btn__hover"></i><span class="bt-btn__label">See how it works</span></span></span></a> */
.bt-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 2px; border-radius: 234px; cursor: pointer; text-decoration: none; }
.bt-btn__glow { position: absolute; inset: 0; border-radius: 114px; opacity: 0.5; overflow: clip; pointer-events: none; filter: blur(6px); }
/* the spinning squares are button width + 39px so the ring covers any label */
.bt-btn__glow i { position: absolute; left: 50%; top: 50%; width: calc(100% + 39px); aspect-ratio: 1 / 1; translate: -50% -50%; background: linear-gradient(270deg, var(--bt-purple-800) 7%, var(--bt-purple-200) 91%); animation: bt-spin 6s linear infinite; }
.bt-btn__edge { position: relative; display: flex; align-items: center; justify-content: center; padding: 1px; border-radius: 231px; overflow: clip; background: var(--bt-ink); }
.bt-btn--glow .bt-btn__edge { background: transparent; }
.bt-btn__edge-glow { position: absolute; left: 50%; top: 50%; width: calc(100% + 39px); aspect-ratio: 1 / 1; translate: -50% -50%; background: linear-gradient(270deg, var(--bt-purple-800) 7%, var(--bt-purple-200) 84%); animation: bt-spin 6s linear infinite; }
.bt-btn__body { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border-radius: 88px; background: linear-gradient(270deg, #ffffff 0%, #fafafa 100%); }
.bt-btn--glow .bt-btn__body { box-shadow: inset 0 0 11px 0 var(--bt-purple-200); }
.bt-btn__hover { position: absolute; inset: 0; border-radius: 238px; background: linear-gradient(270deg, var(--bt-purple-950) 0%, var(--bt-purple-800) 100%); opacity: 0; transition: opacity 0.25s ease; }
.bt-btn__label { position: relative; font-family: var(--bt-mono); font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: -0.16px; text-transform: uppercase; color: var(--bt-ink); white-space: nowrap; transition: color 0.25s ease; }
.bt-btn--glow .bt-btn__label { color: var(--bt-purple-950); }
.bt-btn:hover .bt-btn__hover { opacity: 1; }
.bt-btn:hover .bt-btn__label { color: #ffffff; }
.bt-btn--line:hover .bt-btn__hover { background: var(--bt-ink); }
@keyframes bt-spin { to { transform: rotate(360deg); } }
/* dark-band variants: white ring, white label; the body must stay dark or the 60% white edge fills the pill */
.bt-btn--on-dark.bt-btn--line .bt-btn__edge { background: rgba(255, 255, 255, 0.6); }
.bt-btn--on-dark.bt-btn--line .bt-btn__body { background: rgba(10, 10, 10, 0.6); }
.bt-btn--on-dark.bt-btn--line .bt-btn__label { color: #ffffff; }

/* ─── Phone type presets (after every desktop definition of the same selectors) ─── */
@media (max-width: 809.98px) {
  .bt-h1 { font-size: 32px; line-height: 32px; letter-spacing: -1.2px; }
  .bt-h2 { font-size: 26px; line-height: 26px; letter-spacing: -1.3px; }
  .bt-h4 { font-size: 22px; line-height: 24.2px; letter-spacing: -0.6px; }
  .bt-h5 { font-size: 18px; line-height: 18px; letter-spacing: -1px; }
  .bt-stat { font-size: 45px; line-height: 31.5px; letter-spacing: -1.35px; }
  .bt-p { font-size: 12px; line-height: 15.6px; }
  .bt-p-sm { font-size: 12px; line-height: 14.4px; }
  .bt-pill { font-size: 10px; line-height: 10px; }
  .bt-pill--dot { font-size: 12px; line-height: 12px; }
  .bt-btn__label { font-size: 10px; line-height: 10px; letter-spacing: -0.1px; }
}

/* ─── Carousel arrows (46px squares) ─── */
.bt-arrows { display: flex; align-items: center; gap: 12px; }
.bt-arrow { position: relative; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 8px; }
/* the .bt button reset (0,1,1) outranks .bt-arrow, so colour and ground carry the same weight */
.bt .bt-arrow { background: #ffffff; color: var(--bt-grey); }
.bt .bt-arrow:hover { color: var(--bt-ink); }
.bt-arrow::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--bt-line-2); pointer-events: none; }

/* ─── 1px frames around soft panels (cards, bento cells, CTA box) ─── */
.bt-frame { position: relative; padding: 16px; background: rgba(255, 255, 255, 0.2); }
.bt-frame::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--bt-line); pointer-events: none; }
.bt-frame__in { position: relative; border-radius: 16px; background: var(--bt-soft); overflow: hidden; }
.bt-frame__in--r20 { border-radius: 20px; }

/* ─── Floating glow card (use-case art, why media) ─── */
.bt-glow-card {
  --glow: rgb(168, 85, 247);
  position: relative; display: flex; flex-direction: column; gap: 25px; padding: 12px 16px; border-radius: 16px;
  background: #ffffff; box-shadow: 0 0 15px 2px var(--glow);
  font-family: var(--bt-sans); font-size: 14px; line-height: 16.8px; font-weight: 500; color: var(--bt-ink-1);
}
.bt-glow-card::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--bt-line-soft); border-radius: 16px; pointer-events: none; }
.bt-glow-card__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bt-glow-card__title { display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-glow-card__tag { font-size: 10px; line-height: 12px; font-weight: 400; padding: 2px 8px; border-radius: 100px; white-space: nowrap; }

/* ─── Frosted glass (chips, tiles, floating cards); stays after .bt-glow-card, which sets its own background ─── */
.bt-glass { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ─── Icon square (results / how / why icons) ─── */
.bt-ico { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; color: var(--bt-purple-800); position: relative; }
.bt-ico::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--bt-line-2); border-radius: inherit; pointer-events: none; }
.bt-ico i { font-size: 20px; line-height: 1; }

/* ─── Chat input (hero + CTA) ─── */
.bt-input { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; padding: 6px 6px 6px 24px; border-radius: 234px; background: #ffffff; }
.bt-input::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--bt-line); border-radius: inherit; pointer-events: none; }
.bt-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--bt-sans); font-size: 16px; line-height: 22.4px; color: var(--bt-ink-1); padding: 10px 0; text-overflow: ellipsis; }
.bt-input input::placeholder { color: var(--bt-grey); }
.bt-input button { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: var(--bt-ink); color: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bt-input button i { font-size: 22px; line-height: 1; }
.bt-input button:hover { background: var(--bt-purple-950); }

/* ─── Marquee helper ─── */
@keyframes bt-marquee { to { transform: translateX(-50%); } }
.bt-marquee { display: flex; width: max-content; animation: bt-marquee 40s linear infinite; }
.bt-marquee:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .bt-marquee, .bt-btn__glow i, .bt-btn__edge-glow { animation: none; }
}

/* ─── Page-level helpers used by the inner pages ─── */
.bt-section { padding: clamp(72px, 8.5vw, 120px) 0; }
.bt .bt-section--soft { background: var(--bt-soft); }
.bt .bt-band { background: var(--bt-ink); color: #ffffff; }
.bt-band .bt-h1, .bt-band .bt-h2, .bt-band .bt-h4, .bt-band .bt-h5, .bt-band .bt-p, .bt-band .bt-p-sm { color: #ffffff; }
.bt-band .bt-p, .bt-band .bt-p-sm { color: rgba(255, 255, 255, 0.72); }
.bt-band .bt-pill { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.bt-band .bt-pill::after { border-color: rgba(255, 255, 255, 0.6); }
.bt-band .bt-frame { background: rgba(255, 255, 255, 0.04); }
.bt-band .bt-frame::after { border-color: rgba(255, 255, 255, 0.7); }
.bt-band .bt-frame__in { background: rgba(255, 255, 255, 0.04); }
/* corner handles on a framed figure (dark bands) */
.bt-handles { position: relative; border: 1px solid rgba(255, 255, 255, 0.7); }
.bt-handles::before, .bt-handles::after, .bt-handles > .bt-hd::before, .bt-handles > .bt-hd::after { content: ''; position: absolute; width: 9px; height: 9px; background: #d4d4d4; z-index: 2; }
.bt-handles::before { left: -5px; top: -5px; } .bt-handles::after { right: -5px; top: -5px; }
.bt-handles > .bt-hd { position: absolute; inset: 0; pointer-events: none; }
.bt-handles > .bt-hd::before { left: -5px; bottom: -5px; } .bt-handles > .bt-hd::after { right: -5px; bottom: -5px; }
/* the coloured pixel strip that closes a dark band */
.bt-pixels { height: 15px; background: repeating-linear-gradient(90deg, #e8d5b5 0 15px, #b98cff 15px 30px, #ff8a5c 30px 45px, #bfd3e6 45px 60px, #f5f5f5 60px 75px, #371a5b 75px 90px, #ead9ff 90px 105px, #4a6b94 105px 120px); }
.bt-pixels--mini { width: 105px; height: 9px; margin: 0 auto; background: repeating-linear-gradient(90deg, #e8d5b5 0 9px, #b98cff 9px 18px, #ff8a5c 18px 27px, #bfd3e6 27px 36px, #f5f5f5 36px 45px, #371a5b 45px 54px, #ead9ff 54px 63px, #4a6b94 63px 72px); }
/* mono text link with an arrow */
.bt a.bt-link, .bt-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bt-mono); font-weight: 300; font-size: 12px; line-height: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bt-purple-800) !important; text-decoration: none; }
.bt-link i { font-size: 16px; line-height: 1; transition: transform 0.2s ease; }
.bt-link:hover i { transform: translateX(3px); }
/* list item with an icon disc (the marketplace list idiom) */
.bt-list { display: flex; flex-direction: column; gap: 24px; }
.bt-list__item { display: flex; align-items: flex-start; gap: 16px; }
.bt-list__ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 90px; background: var(--bt-soft); color: var(--bt-ink-4); }
.bt-list__ico i { font-size: 14px; line-height: 1; }
.bt-list__body { display: flex; flex-direction: column; gap: 8px; }
/* form fields (contact, create-butler) */
.bt-field { display: flex; flex-direction: column; gap: 8px; }
.bt-field label { font-family: var(--bt-mono); font-weight: 300; font-size: 10.5px; line-height: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bt-grey); }
.bt-field input, .bt-field select, .bt-field textarea { width: 100%; font-family: var(--bt-sans); font-size: 15px; line-height: 22px; color: var(--bt-ink-1); background: var(--bt-soft); border: 1px solid var(--bt-line-2); border-radius: 10px; padding: 12px 14px; outline: 0; appearance: none; transition: border-color 0.15s ease, box-shadow 0.2s ease, background 0.15s ease; }
.bt-field input::placeholder, .bt-field textarea::placeholder { color: var(--bt-grey-2); }
.bt-field input:focus, .bt-field select:focus, .bt-field textarea:focus { background: #ffffff; border-color: var(--bt-purple-500); box-shadow: 0 0 0 3px var(--bt-purple-100); }
.bt-field textarea { resize: vertical; min-height: 110px; }
/* mono meta line (dates, captions) */
.bt-meta { font-family: var(--bt-mono); font-weight: 300; font-size: 10.5px; line-height: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bt-grey); }
/* photo inside a frame panel */
.bt-frame__media { display: block; width: 100%; object-fit: cover; border-radius: 16px; }

/* ═══════════════════════════════════════════════════════════════
   SECTION PATTERNS
   The home page's composite blocks, available to every page. Markup
   for each is in scratchpad/PATTERNS.md; sizes match the home page.
   ═══════════════════════════════════════════════════════════════ */

/* Bento: a 6-column grid of framed cells; each cell is a frame whose
   art layer fills the panel and whose copy sits at the bottom over a
   fade. Cell widths: --2 --3 --4 --6 (spans). */
.bt-bento__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 465px; gap: 20px; }
.bt-bento__cell { display: flex; min-width: 0; }
.bt-bento__cell--2 { grid-column: span 2; }
.bt-bento__cell--3 { grid-column: span 3; }
.bt-bento__cell--4 { grid-column: span 4; }
.bt-bento__cell--6 { grid-column: span 6; }
.bt-bento__cell--tight { padding: 8px; }
.bt-bento__panel { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-width: 0; }
.bt-bento__panel--pt50 { padding-top: 50px; }
.bt-bento__art { position: relative; flex: 1; min-height: 0; overflow: hidden; font-family: var(--bt-sans); color: var(--bt-ink-2); }
.bt-bento__text { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, var(--bt-soft) 36%); }
.bt-bento__dots { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--bt-purple-200) 0.75px, transparent 1.25px); background-size: 12px 12px; background-position: 4px 1px; -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 14%, #000 100%); mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 14%, #000 100%); pointer-events: none; }
.bt-bento__chip { --glow: #d4d4d4; position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 6px; border-radius: 8px; box-shadow: 0 3px 11px 1px var(--glow); font-size: 12px; line-height: 14.4px; font-weight: 500; color: var(--bt-ink-2); white-space: nowrap; }
.bt-bento__chip--glow { box-shadow: 0 0 15px 2px var(--glow); color: var(--bt-ink-1); }
.bt-bento__chip--green { --glow: rgb(16, 185, 129); }
.bt-bento__chip--orange { --glow: rgb(249, 115, 22); }
.bt-bento__chip-ico { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 90px; background: var(--bt-soft-2); color: var(--bt-ink-4); flex-shrink: 0; }
.bt-bento__chip-ico i { font-size: 15px; line-height: 1; }
.bt-bento__chip--green .bt-bento__chip-ico { background: #ecfdf5; color: #065f46; }
.bt-bento__chip-ico--blue { background: #eff6ff; color: #1e3a8a; }
.bt-bento__chip--orange .bt-bento__chip-ico { background: #fff7ed; color: #9a3412; }
.bt-bento__bar { display: block; height: 5px; border-radius: 145px; background: var(--bt-soft-2); flex: 1 0 0; }
.bt-bento__bar--mint { flex: none; width: 21px; background: #d1fae5; }
.bt-bento__bar--m55 { max-width: 55%; }
.bt-bento__bar--m65 { max-width: 65%; }
.bt-bento__bar--m39 { max-width: 39%; }
.bt-bento__bar--w62 { width: 62%; }
.bt-bento__bar--w71 { width: 71%; }
.bt-bento__bar--w75 { width: 75%; }
.bt-bento__bar--w80 { width: 80%; }
.bt-bento__bar--w85 { width: 85%; }
.bt-bento__orb { --orb-a: #eab308; --orb-b: #fde047; --orb-glow: rgba(234, 179, 8, 0.45); position: relative; flex-shrink: 0; width: 41px; height: 41px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff 0%, rgba(255, 255, 255, 0.75) 16%, rgba(255, 255, 255, 0) 48%), linear-gradient(165deg, var(--orb-b) 0%, var(--orb-a) 100%); box-shadow: 0 2px 10px var(--orb-glow), 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 3px rgba(255, 255, 255, 0.5); }
.bt-bento__orb--green { --orb-a: #059669; --orb-b: #6ee7b7; --orb-glow: rgba(5, 150, 105, 0.45); }
.bt-bento__art--rings { position: absolute; inset: 0; z-index: 1; }
.bt-bento__rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; padding-bottom: 70px; }
.bt-bento__ring { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 244px; height: 244px; border-radius: 50%; background: linear-gradient(120deg, var(--bt-line-soft) 44%, #fff 94%); box-shadow: 5px 6px 17px 2px rgba(0, 0, 0, 0.1); }
.bt-bento__ring--side { transform: scale(0.75); opacity: 0.5; }
.bt-bento__ring-in { position: absolute; inset: 32px; border-radius: 50%; background: #fff; }
.bt-bento__ring-label { position: relative; font-size: 31px; line-height: 37.2px; color: var(--bt-ink-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; white-space: nowrap; }
.bt-bento__ring--side .bt-bento__ring-label { position: absolute; top: 50%; max-width: 126px; transform: translateY(-50%); white-space: normal; }
.bt-bento__ring--side:first-child .bt-bento__ring-label { right: 40px; text-align: right; }
.bt-bento__ring--side:last-child .bt-bento__ring-label { left: 40px; text-align: left; }
.bt-bento__art--flow { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 90px; }
.bt-bento__mini { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; min-width: 179px; padding: 12px 16px; border-radius: 8px; box-shadow: 0 3px 11px 1px var(--bt-line-2); }
.bt-bento__mini-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 14.4px; font-weight: 500; color: var(--bt-ink-3); white-space: nowrap; }
.bt-bento__mini-head b { font-size: 10px; line-height: 12px; font-weight: 500; color: var(--bt-green); white-space: nowrap; }
.bt-bento__mini-rows { display: flex; flex-direction: column; gap: 8px; }
.bt-bento__mini-rows span { display: flex; align-items: center; justify-content: space-between; }
.bt-bento__art--journal { display: flex; align-items: center; justify-content: center; gap: 236px; padding-top: 20px; }
.bt-bento__art--sim { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 16px; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 25%, #000 75%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 25%, #000 75%, rgba(0, 0, 0, 0) 100%); }
.bt-bento__art--sim .bt-bento__dots { inset: -131px -150px -132px; }
.bt-bento__art--voice { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 84px 32px 0; }
.bt-bento__wave { display: flex; align-items: center; gap: 2px; height: 32px; overflow: hidden; }
.bt-bento__wave i { flex: none; width: 2px; border-radius: 1px; }
.bt-bento__art--planner { display: flex; align-items: center; justify-content: center; }
.bt-bento__tile { --glow: var(--bt-line-soft); position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 59px; height: 59px; border-radius: 16px; box-shadow: 0 3px 11px 1px var(--glow); }
.bt-bento__tile--violet { --glow: rgb(168, 85, 247); height: 57px; }
.bt-bento__tile--orange { --glow: rgb(249, 115, 22); }
.bt-bento__tile img { width: 27px; height: 27px; object-fit: contain; }
.bt-bento__chip-txt { min-width: 0; }
.bt-bento__art--apps { display: flex; align-items: center; padding: 90px 0 120px; }

/* Card rail: framed cards that scroll horizontally under a head with arrows (home: the day cards) */
.bt-rail__tag { flex: 0.5 0 0; min-width: 0; overflow: clip; }
.bt-rail__stats { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 64px; }
.bt-rail__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
/* the soft ground and the panel fill are the same grey, so a card on a soft section keeps a white panel */
.bt .bt-section--soft .bt-rail__panel, .bt .bt-section--soft .bt-bento__panel { background: #ffffff; }
.bt-rail__arrows { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.bt-rail__arrow { margin: 1px; }
.bt-rail__arrow::after { inset: -1px; border-color: var(--bt-line); }
.bt-rail__arrow svg { width: 26px; height: 26px; display: block; }
.bt-rail__bot { display: flex; width: calc(100% + 120px); }
.bt-rail__rail { display: flex; align-items: stretch; gap: 32px; width: 100%; padding-right: 120px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.bt-rail__rail::-webkit-scrollbar { display: none; }
.bt-rail__card { flex: 0 0 405px; width: 405px; height: 419px; display: flex; flex-direction: column; scroll-snap-align: start; }
.bt-rail__panel { flex: 1 0 0; display: flex; padding: 32px; }
.bt-rail__content { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; min-width: 0; }
.bt-rail__ico { flex-shrink: 0; border-radius: 16px; background: #ffffff; color: var(--bt-purple-700); }
.bt-rail__ico::after { border-color: var(--bt-line); }
.bt-rail__ico i { font-size: 16px; }
.bt-rail__label { color: var(--bt-grey); }

/* Tilted deck: 3D carousel of framed cards (home: the butler profiles) */
.bt-deck__head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 1200px; padding: 0 120px; text-align: center; }
.bt-deck__stage { --bt-news-step: 472px; position: relative; width: 440px; height: 570px; perspective: 1200px; }
.bt-deck__rail { display: flex; align-items: center; gap: 32px; width: 440px; height: 570px; transform-style: preserve-3d; transform: translateX(calc(-1 * var(--bt-news-i, 0) * var(--bt-news-step))); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bt-deck__slot { display: flex; align-items: center; flex: 0 0 auto; width: 440px; height: 570px; transform-origin: center center; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform-origin 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bt-deck__card { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 440px; overflow: clip; }
.bt-deck__img { width: 100%; height: 335px; border-radius: 16px; overflow: clip; flex: 0 0 auto; }
.bt-deck__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.bt-deck__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 32px; width: 100%; padding: 8px 0; overflow: clip; }
.bt-deck__top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.bt-deck__tag { position: relative; display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 32px; background: var(--bt-purple-200); font-family: var(--bt-mono); font-weight: 300; font-size: 10px; line-height: 10px; text-transform: uppercase; color: var(--bt-purple-800); white-space: nowrap; }
.bt-deck__tag::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--bt-purple-800); border-radius: inherit; pointer-events: none; }
.bt-deck__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-deck__chip { position: relative; padding: 4px 10px; border-radius: 32px; font-family: var(--bt-mono); font-weight: 300; font-size: 10px; line-height: 10px; text-transform: uppercase; color: var(--bt-ink-4); white-space: nowrap; }
.bt-deck__chip::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--bt-line-2); border-radius: inherit; pointer-events: none; }
.bt-deck__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; width: 100%; min-height: 25px; }
.bt-deck__arrows { position: absolute; top: 626px; left: 0; right: 0; justify-content: center; gap: 16px; }
.bt-deck__arrow { width: 40px; height: 40px; padding: 0; }
.bt-deck__arrow::after { border-color: var(--bt-grey); }
.bt-deck__arrow svg { display: block; }

/* Ring box: the closing call to action (home: the CTA frame) */
.bt-ringbox__box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; width: 1100px; max-width: 100%; min-height: 585px; padding: 32px; background: transparent; }
.bt-ringbox__panel { position: absolute; inset: 16px; border-radius: 16px; background: var(--bt-soft); overflow: clip; pointer-events: none; }
.bt-ringbox__rings { position: absolute; top: -381.219px; left: -537.133px; width: 1711px; height: 1469px; transform: rotate(-54deg);
  background-image:
    radial-gradient(circle at 1202px 734.953px, transparent 582.25px, #f3e8ff 582.75px, #f3e8ff 583.25px, transparent 583.75px),
    radial-gradient(circle at 1127.5px 791.258px, transparent 540.75px, #f3e8ff 541.25px, #f3e8ff 541.75px, transparent 542.25px),
    radial-gradient(circle at 1052px 855px, transparent 499.25px, #f3e8ff 499.75px, #f3e8ff 500.25px, transparent 500.75px),
    radial-gradient(circle at 978px 911px, transparent 457.25px, #f3e8ff 457.75px, #f3e8ff 458.25px, transparent 458.75px),
    radial-gradient(circle at 903.094px 966.5px, transparent 415.75px, #f3e8ff 416.25px, #f3e8ff 416.75px, transparent 417.25px),
    radial-gradient(circle at 827.242px 1022px, transparent 374.25px, #f3e8ff 374.75px, #f3e8ff 375.25px, transparent 375.75px),
    radial-gradient(circle at 753.5px 1077.5px, transparent 332.75px, #f3e8ff 333.25px, #f3e8ff 333.75px, transparent 334.25px),
    radial-gradient(circle at 678.5px 1133.5px, transparent 290.75px, #f3e8ff 291.25px, #f3e8ff 291.75px, transparent 292.25px),
    radial-gradient(circle at 583px 1192px, transparent 249.25px, #f3e8ff 249.75px, #f3e8ff 250.25px, transparent 250.75px),
    radial-gradient(circle at 508.5px 1247.5px, transparent 207.75px, #f3e8ff 208.25px, #f3e8ff 208.75px, transparent 209.25px),
    radial-gradient(circle at 412.5px 1306.5px, transparent 165.75px, #f3e8ff 166.25px, #f3e8ff 166.75px, transparent 167.25px),
    radial-gradient(circle at 338px 1362px, transparent 124.25px, #f3e8ff 124.75px, #f3e8ff 125.25px, transparent 125.75px),
    radial-gradient(circle at 263.5px 1417.5px, transparent 82.75px, #f3e8ff 83.25px, #f3e8ff 83.75px, transparent 84.25px); }
.bt-ringbox__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 1036px; max-width: 100%; padding: 0 80px; }
.bt-ringbox__p { color: var(--bt-ink-1); text-align: center; }

/* Stage: a framed illustration panel with concentric rings and a glass orb (home: the use-case art) */
.bt-stage__row { display: flex; align-items: center; gap: 96px; width: 100%; padding: 0 64px; }
.bt-stage__card { position: relative; flex: 0 0 594px; width: 594px; height: 545px; padding: 16px; }
.bt-stage__card::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--bt-line-dark); pointer-events: none; }
.bt-stage__panel { position: relative; width: 100%; height: 100%; border-radius: 10px; background: var(--bt-soft-2); overflow: hidden; }
.bt-stage__rings { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(80% 91% at 50% 50%, rgba(0, 0, 0, 0) 27.08%, #000 100%); mask-image: radial-gradient(80% 91% at 50% 50%, rgba(0, 0, 0, 0) 27.08%, #000 100%); }
.bt-stage__rings i { position: absolute; left: 281px; top: 256.5px; border-radius: 50%; background: var(--bt-usecases-ring); box-shadow: 0 0 35px 4px rgba(0, 0, 0, 0.1); transform: translate(-50%, -50%); transition: background 0.3s ease; }
.bt-stage__rings i:nth-child(1) { width: 300px; height: 300px; z-index: 6; }
.bt-stage__rings i:nth-child(2) { width: 400px; height: 400px; z-index: 5; }
.bt-stage__rings i:nth-child(3) { width: 500px; height: 500px; z-index: 4; }
.bt-stage__rings i:nth-child(4) { width: 600px; height: 600px; z-index: 3; }
.bt-stage__rings i:nth-child(5) { width: 700px; height: 700px; z-index: 2; }
.bt-stage__rings i:nth-child(6) { width: 800px; height: 800px; z-index: 1; }
.bt-stage__orb { position: absolute; left: 184px; top: 160px; width: 194px; height: 194px; border-radius: 50%; background: radial-gradient(75% 50% at 50% 100%, #ffffff 0%, #a6a6a6 100%); z-index: 3; }
.bt-stage__status { position: absolute; left: 0; right: 0; top: 387px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px; font-family: var(--bt-sans); font-size: 16px; line-height: 20.8px; letter-spacing: -0.16px; color: var(--bt-grey); text-align: center; }
.bt-stage__status > span:first-child { max-width: 440px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-stage__dots { min-width: 1.5em; text-align: left; }
.bt-stage__dots::after { content: '.'; animation: bt-usecases-dots 1.2s steps(1) infinite; }
.bt-stage__float { position: absolute; z-index: 4; justify-content: flex-start; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 15px 2px var(--bt-usecases-glow); overflow: clip; transition: box-shadow 0.3s ease; }
.bt-stage__float .bt-glow-card__head { width: 100%; }
.bt-stage__float .bt-glow-card__title { flex: 1 1 auto; min-width: 0; }
.bt-stage__float .bt-glow-card__tag { flex-shrink: 0; padding: 4px 12px; border-radius: 92px; background: var(--bt-usecases-tag); color: var(--bt-usecases-dark); }
.bt-stage__side { display: flex; align-items: flex-end; gap: 32px; width: 622px; flex: 0 0 auto; }
.bt-stage__tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 340px; flex-shrink: 0; }
.bt-stage__tab .bt-h4 { font-weight: var(--bt-w-light) !important; color: var(--bt-line-soft); white-space: nowrap; transition: color 0.25s ease; }
.bt-stage__tab.is-active .bt-h4 { color: var(--bt-ink); }
.bt-stage__tab button { display: flex; align-items: center; padding-left: 1px; letter-spacing: inherit; text-align: left; transition: padding-left 0.25s ease; }
.bt-stage__tab.is-active button { padding-left: 12px; }
.bt-stage__desc { width: 250px; flex-shrink: 0; animation: bt-usecases-fade 0.35s ease; }

@media (max-width: 1199.98px) {
  .bt-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 420px; }
  .bt-bento__cell--2, .bt-bento__cell--3, .bt-bento__cell--4, .bt-bento__cell--6 { grid-column: span 1; }
  .bt-bento__cell--6 { grid-column: span 2; }
  .bt-rail__card { flex: 0 0 340px; width: 340px; }
}
@media (max-width: 809.98px) {
  .bt-bento__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 380px; gap: 16px; }
  .bt-bento__cell--2, .bt-bento__cell--3, .bt-bento__cell--4, .bt-bento__cell--6 { grid-column: span 1; }
  .bt-rail__card { flex: 0 0 280px; width: 280px; height: 380px; }
  .bt-rail__panel { padding: 24px; }
  .bt-ringbox__box { min-height: 420px; }
  .bt-ringbox__head { padding: 0 20px; }
}