/* The website's own pages (public/lp: features, Brigg, pricing, support), docs/landing-pages.md.
   The home page's look (dark ink, Archivo headings, IBM Plex text, blue and amber), written once
   for every page that links it. The home and ad pages keep their own copy inline. */

:root { --gut: max(16px, 4vw); }
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: #070B12; color: #F4F6FB; font: 16px/1.5 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; }
.site { container-type: inline-size; --gut: max(16px, 4cqi); overflow-x: clip; }
.wrap { width: 100%; max-width: calc(1240px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.ico { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid #F2A93B; outline-offset: 3px; }
[id] { scroll-margin-top: 88px; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: #FFFFFF; color: #0E1420; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.eye { margin: 0; font: 500 12px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--eye, #F2A93B); }
.h1 { margin: 0; font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 75%; font-weight: 800; font-size: clamp(36px, 4.6cqi, 62px); line-height: .95; letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.h2 { margin: 0; font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 80%; font-weight: 800; font-size: clamp(28px, 2.9cqi, 40px); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.h3 { margin: 0; font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 90%; font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--tx); }
.lead { margin: 0; max-width: 62ch; font-size: clamp(16px, 1.2cqi, 18px); line-height: 1.6; color: var(--tx2); }
.copy { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tx3); }
.src { font-size: 12.5px; line-height: 1.5; color: var(--mono); font-style: normal; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.sec-head { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.sec-head.center { margin-inline: auto; align-items: center; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 10px; background: #2563EB; color: #FFFFFF; font: 600 16px/1.2 'IBM Plex Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background .15s; }
.btn:hover { background: #1D4ED8; }
.btn.lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.btn.sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn.white { background: #FFFFFF; color: #1D4ED8; font-weight: 700; }
.btn.white:hover { background: #EEF3FF; }
.btn.line { background: transparent; color: var(--tx, #F4F6FB); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.btn.line:hover { background: rgba(255,255,255,.06); }
.btn .ico { transition: transform .2s; }
.btn:hover .ico { transform: translateX(3px); }
.tlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--tx, #F4F6FB); font-weight: 600; text-decoration: none; }
.tlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.tlink .ico { width: 16px; height: 16px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.note { margin: 0; font-size: 14px; color: #B7C1D1; }
.note b { color: #F2A93B; font-weight: 600; }

/* ---------- logo and header ---------- */
.logo { display: flex; align-items: center; gap: 11px; color: #F4F6FB; text-decoration: none; }
.logo-mark { width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px; background: #2563EB; color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.logo-mark svg { width: 22px; height: 18px; }
.logo-word { font: 700 21px/1 Archivo, 'Arial Narrow', sans-serif; letter-spacing: -.01em; }
.logo-word b { font-weight: 700; color: #8FB0FF; }
.hdr { position: sticky; top: 0; z-index: 30; background: rgba(7,11,18,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); }
.hdr > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.nav { display: none; }
.nav a { position: relative; color: #B7C1D1; text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: #FFFFFF; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -23px; height: 2px; border-radius: 2px; background: #2563EB; }
.hdr-r { display: flex; align-items: center; gap: 10px 20px; }
.signin { display: none; color: #F4F6FB; text-decoration: none; font-size: 15px; font-weight: 500; }
.signin:hover { color: #8FB0FF; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #F4F6FB; cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn .m-close, .menu-btn[aria-expanded="true"] .m-open { display: none; }
.menu-btn[aria-expanded="true"] .m-close { display: inline; }
.menu { border-top: 1px solid rgba(255,255,255,.08); background: #070B12; }
.menu .wrap { display: flex; flex-direction: column; padding-block: 6px 16px; }
.menu a { padding: 13px 0; color: #F4F6FB; text-decoration: none; font-size: 17px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.06); }
.menu a[aria-current="page"] { color: #8FB0FF; }
.menu a:last-child { border-bottom: 0; }
.hdr .btn.sm { white-space: nowrap; }
.hdr .btn .short { display: none; }
@container (max-width: 420px) { .hdr .btn .long { display: none; } .hdr .btn .short { display: inline; } .hdr .btn.sm { padding: 0 14px; } .logo-word { font-size: 19px; } .logo { gap: 9px; } }
@container (min-width: 640px) { .signin { display: inline; } .signin.book-link { display: none; } }
@container (min-width: 760px) { .signin.book-link { display: inline; } }
@container (min-width: 1080px) { .nav { display: flex; gap: 30px; } .menu-btn { display: none; } .menu { display: none !important; } }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(56px, 6.4cqi, 92px); background: var(--bg); color: var(--tx); }
.dk { --bg: #0B111B; --tx: #F4F6FB; --tx2: #B7C1D1; --tx3: #9AA6B8; --mono: #8A97AB; --line: rgba(255,255,255,.10); --card: #0F1724; --cardb: rgba(255,255,255,.08); --eye: #F2A93B; }
.ink0 { --bg: #070B12; }
.ink3 { --bg: #111A28; --card: #0B111B; }
.lt { --bg: #F5F3EE; --tx: #0E1420; --tx2: #3F4A5A; --tx3: #3F4A5A; --mono: #5B6475; --line: #DDD6CA; --card: #FFFFFF; --cardb: #E2DDD3; --eye: #1D4ED8; }
.wh { --bg: #FFFFFF; --card: #F7F5F0; }
.sec + .sec.lt, .sec.lt + .sec { border-top: 1px solid var(--line); }
.grid-bg { background-image: linear-gradient(rgba(143,176,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(143,176,255,.045) 1px, transparent 1px); background-size: 56px 56px; }
.rings { position: absolute; z-index: 0; top: -300px; right: -260px; width: 820px; height: 820px; max-width: none; fill: none; stroke: rgba(143,176,255,.10); stroke-width: 1; pointer-events: none; }
.rings .blip { fill: #F2A93B; stroke: none; }
@container (max-width: 999px) { .rings .blip { display: none; } }

/* ---------- page hero (a feature, Brigg, pricing, support) ---------- */
.phero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(28px, 3.6cqi, 56px) clamp(48px, 5cqi, 80px); background: #070B12; color: #F4F6FB; --tx: #F4F6FB; --tx2: #B7C1D1; --tx3: #9AA6B8; --mono: #8A97AB; --eye: #F2A93B; }
.phero > .wrap { position: relative; z-index: 1; }
.phero-grid { display: grid; gap: 40px 56px; align-items: center; }
.phero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font: 500 12.5px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; color: #8A97AB; }
.crumbs a { color: #B7C1D1; text-decoration: none; }
.crumbs a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.crumbs .ico { width: 13px; height: 13px; stroke-width: 2.5; }
.kicker { display: flex; align-items: center; gap: 12px; }
.kicker-ic { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: #2563EB; color: #FFFFFF; }
.kicker-ic .ico { width: 20px; height: 20px; stroke-width: 2; }
.kicker-ic.brigg { background: #0E1830; border: 1px solid rgba(143,176,255,.35); }
.kicker-ic.brigg img { width: 30px; height: 30px; object-fit: contain; }
.instead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; color: #8A97AB; }
.instead > span { margin-right: 2px; font: 500 11.5px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.instead b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font-size: 13px; font-weight: 500; color: #D5DCE7; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.9); text-decoration-thickness: 1.5px; }
@container (min-width: 960px) { .phero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }

/* the portrait phone pictures (App Store panels without their words) */
.shot-phone { position: relative; justify-self: center; width: min(100%, 400px); margin: 0; overflow: hidden; border-radius: 26px; border: 1px solid rgba(143,176,255,.18); background: #05070C; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); }
.shot-phone img { display: block; width: 100%; height: auto; }
.shot-phone::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(5,7,12,.85)); pointer-events: none; }
.shot-phone.sm { width: min(100%, 340px); }
@container (max-width: 520px) { .shot-phone { width: min(100%, 330px); border-radius: 20px; } }

/* landscape product pictures (the home page's cards) */
.shot { position: relative; margin: 0; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: #0D1522; }
.shot > img { display: block; width: 100%; height: auto; }
.map-credit { position: absolute; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; line-height: 1; color: rgba(255,255,255,.8); text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.map-credit img { width: 56px; height: auto; opacity: .85; }

/* ---------- highlights strip under a hero ---------- */
.hl { padding-block: 26px 30px; background: #070B12; border-block: 1px solid rgba(255,255,255,.08); }
.hl .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.hl-i { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 2px solid rgba(255,255,255,.14); }
.hl-i:first-child { border-top-color: #F2A93B; }
.hl-i:last-child { border-top-color: #2563EB; }
.hl-i strong { font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 80%; font-weight: 800; font-size: clamp(22px, 2.1cqi, 30px); line-height: 1.05; color: #FFFFFF; }
.hl-i span { font-size: 14px; line-height: 1.5; color: #9AA6B8; }
@container (min-width: 900px) { .hl .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- capability cards ---------- */
.caps { margin-top: 40px; display: grid; gap: 16px; }
.cap { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.2cqi, 28px); border-radius: 18px; background: var(--card); border: 1px solid var(--cardb); }
.cap-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(37,99,235,.16); color: #8FB0FF; }
.lt .cap-ic { background: #E8EEFC; color: #1D4ED8; }
.cap-ic .ico { width: 21px; height: 21px; stroke-width: 2; }
.cap p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tx3); }
.cap p b { color: var(--tx); font-weight: 600; }
@container (min-width: 640px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .caps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- picture beside words ---------- */
.split { display: grid; gap: 32px 64px; align-items: center; }
.split + .split { margin-top: clamp(56px, 6cqi, 88px); }
.split-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ticks { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--tx2); }
.ticks li b { color: var(--tx); font-weight: 600; }
.trial-ticks { margin-top: 6px; }
.ticks .ico { width: 20px; height: 20px; margin-top: 2px; stroke: #F2A93B; stroke-width: 2.5; }
.lt .ticks .ico { stroke: #1D4ED8; }
.split .shot-phone { width: min(100%, 360px); }
.pair { display: grid; gap: 16px; }
@container (min-width: 640px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.rev > :first-child { order: 2; }
  .split.wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .split.wide.rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}

/* ---------- facts with a source ---------- */
.facts { margin-top: 40px; display: grid; gap: 16px; }
.fact { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.2cqi, 28px); border-radius: 18px; background: var(--card); border: 1px solid var(--cardb); }
.fact strong { font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 80%; font-weight: 800; font-size: clamp(42px, 4.4cqi, 58px); line-height: .9; color: var(--tx); }
.fact strong i { font-style: normal; color: #F2A93B; }
.lt .fact strong i { color: #1D4ED8; }
.fact p { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--tx); }
@container (min-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the other features, one property file ---------- */
.more { margin-top: 36px; display: grid; gap: 12px; }
.more a { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--cardb); text-decoration: none; transition: border-color .2s, transform .2s; }
.more a:hover { border-color: rgba(143,176,255,.5); transform: translateY(-2px); }
.lt .more a:hover { border-color: #2563EB; }
.more-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #2563EB; color: #FFFFFF; }
.more-ic .ico { width: 19px; height: 19px; stroke-width: 2; }
.more-ic img { width: 34px; height: 34px; object-fit: contain; }
.more-ic.brigg { background: #0E1830; border: 1px solid rgba(143,176,255,.3); }
.more-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.more-t b { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--tx); }
.more-t span { font-size: 13.5px; line-height: 1.4; color: var(--tx3); }
.more a > .ico { width: 18px; height: 18px; color: var(--tx3); }
@container (min-width: 700px) { .more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1080px) { .more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- questions ---------- */
.faq { margin-top: 36px; display: grid; column-gap: 56px; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 20px 40px 20px 0; font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 90%; font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--tx); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.faq details p { margin: -6px 0 20px; max-width: 70ch; font-size: 15.5px; line-height: 1.65; color: var(--tx2); }
.faq details p a { color: var(--link, #1D4ED8); font-weight: 600; }
.dk .faq details p a { --link: #8FB0FF; }
@container (min-width: 960px) { .faq.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faq.two details:nth-child(2) { border-top: 1px solid var(--line); } }

/* small print under a section */
.fine { margin: 28px 0 0; max-width: 90ch; font-size: 12.5px; line-height: 1.55; color: var(--mono); }

/* ---------- the closing band ---------- */
.final { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(60px, 6.4cqi, 96px); background: #2563EB; color: #FFFFFF; }
.final .rings { top: -170px; right: -300px; width: 900px; height: 900px; stroke: rgba(255,255,255,.16); }
.final .wrap { position: relative; z-index: 1; }
.final h2 { margin: 0; max-width: 18ch; font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 75%; font-weight: 800; font-size: clamp(32px, 4cqi, 56px); line-height: .94; letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.final p { margin: 20px 0 0; max-width: 640px; font-size: clamp(16px, 1.2cqi, 18px); line-height: 1.6; color: #E8EEFF; }
.final .cta-row { margin-top: 30px; }
.final .tlink { color: #FFFFFF; }
.final .final-note { margin-top: 22px; font-size: 14.5px; color: #DCE6FF; }
.final .final-note b { color: #FFFFFF; font-weight: 600; }

/* ---------- footer ---------- */
.foot { padding-block: 52px 28px; background: #070B12; color: #FFFFFF; }
.foot-top { display: grid; gap: 36px 48px; }
.foot-brand { display: flex; flex-direction: column; gap: 12px; }
.foot-brand span { font-size: 15px; color: #FFFFFF; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col p { margin: 0 0 4px; font: 500 11.5px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8FB0FF; }
.foot-col a { color: #FFFFFF; text-decoration: none; font-size: 15px; font-weight: 500; }
.foot-col a:hover { color: #8FB0FF; }
.foot-col a.cta { color: #8FB0FF; font-weight: 600; }
.foot-col a.cta:hover { color: #FFFFFF; }
.foot-bot { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(143,176,255,.16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: #8FB0FF; }
.foot-bot a { color: #8FB0FF; text-decoration: none; }
.foot-bot a:hover { color: #FFFFFF; }
@container (min-width: 760px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .foot-top { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); } }

/* ---------- the features page: the CoContractor card, each row a feature page ---------- */
.ccard { position: relative; width: 100%; max-width: 440px; justify-self: center; overflow: hidden; border-radius: 20px; border: 1.5px solid #2563EB; background: #0E1830; box-shadow: 0 28px 70px rgba(0,0,0,.5); }
.ccard-top { display: flex; align-items: center; gap: 10px; padding: 15px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ccard-top .logo-mark { width: 30px; height: 30px; }
.ccard-top .logo-mark svg { width: 18px; height: 15px; }
.ccard-top .logo-word { font-size: 18px; color: #F4F6FB; }
.ccard-n { margin-left: auto; font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; color: #8A97AB; }
.ccard-n b { font-weight: 500; color: #F4F6FB; }
.ccard ul { margin: 0; padding: 8px 10px 10px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ccard a { display: grid; grid-template-columns: 38px minmax(0, 1fr) 26px; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; text-decoration: none; transition: background .2s; }
.ccard a:hover { background: rgba(143,176,255,.08); }
.ccard-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #2563EB; color: #FFFFFF; }
.ccard-ic .ico { width: 19px; height: 19px; stroke-width: 2; }
.ccard-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ccard-t b { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: #F4F6FB; }
.ccard-t span { font-size: 12.5px; line-height: 1.35; color: #8A97AB; }
.ccard-ok { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid #F2A93B; background: rgba(242,169,59,.14); color: #F2A93B; transition: background .2s, border-color .2s, color .2s; }
.ccard-ok .ico { width: 14px; height: 14px; stroke-width: 2.75; }
.ccard-ok .go { display: none; }
.ccard a:hover .ccard-ok { border-color: #8FB0FF; background: rgba(143,176,255,.14); color: #8FB0FF; }
.ccard a:hover .ccard-ok .ok { display: none; }
.ccard a:hover .ccard-ok .go { display: block; }
.ccard-brigg { display: flex; align-items: center; gap: 12px; margin: 0 10px 10px; padding: 11px 12px; border-radius: 12px; background: rgba(37,99,235,.12); border: 1px solid rgba(143,176,255,.22); text-decoration: none; }
.ccard-brigg:hover { border-color: rgba(143,176,255,.5); }
.ccard-brigg img { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; }
.ccard-brigg span { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; line-height: 1.35; color: #B7C8F5; }
.ccard-brigg b { font-size: 14.5px; font-weight: 600; color: #FFFFFF; }

/* one feature per row on the features page */
.frow { display: grid; gap: 28px 64px; align-items: center; padding-block: clamp(36px, 4cqi, 56px); border-top: 1px solid var(--line); }
.frows > .frow:first-child { border-top: 0; }
.frow-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.frow-copy .eye { display: flex; align-items: center; gap: 10px; }
.frow-copy .eye i { font-style: normal; color: var(--tx3); }
.frow .shot-phone { width: min(100%, 320px); }
.frow-pics { display: flex; justify-content: center; }
@container (min-width: 960px) { .frow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .frows > .frow:nth-child(even) .frow-pics { order: -1; } }

/* "also in the app" chips */
.also { margin-top: 36px; display: grid; gap: 12px; }
.also-i { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--cardb); }
.also-i .cap-ic { flex-shrink: 0; width: 38px; height: 38px; }
.also-i .cap-ic .ico { width: 19px; height: 19px; }
.also-i div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.also-i b { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--tx); }
.also-i span { font-size: 14px; line-height: 1.5; color: var(--tx3); }
@container (min-width: 640px) { .also { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .also { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- the features page: a claim's paperwork, read into the estimate ---------- */
.claim-viz { position: relative; justify-self: center; width: min(100%, 470px); margin: 0; padding-top: 64px; }
.claim-paper { position: absolute; z-index: 0; top: 0; left: 0; width: min(62%, 260px); aspect-ratio: 8.5 / 11; overflow: hidden; padding: 18px 16px; border-radius: 6px; background: #FFFFFF; border: 1px solid #E2DDD3; box-shadow: 0 24px 50px -28px rgba(14,20,32,.45); transform: rotate(-5deg); transform-origin: 30% 20%; color: #3F4A5A; }
.cp-co { margin: 0 0 3px; font: 600 8.5px/1.2 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #5B6475; }
.cp-t { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: #0E1420; }
.cp-ln { display: block; height: 5px; margin: 0 0 6px; border-radius: 3px; background: #ECE7DE; }
.cp-sum { margin: 12px 0; display: grid; gap: 6px; }
.cp-sum div { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; line-height: 1.3; }
.cp-sum dt, .cp-sum dd { margin: 0; }
.cp-sum dd { font-variant-numeric: tabular-nums; }
.cp-sum .b { font-weight: 700; color: #0E1420; }
.cp-scan { position: absolute; left: 0; right: 0; top: -40px; height: 40px; border-bottom: 2px solid #F2A93B; background: linear-gradient(180deg, rgba(242,169,59,0), rgba(242,169,59,.16)); opacity: 0; pointer-events: none; }
.claim-viz .mock { z-index: 1; width: min(calc(100% - 44px), 330px); margin-left: auto; }
.cl-top { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 16px 10px; }
.cl-top .ico { width: 18px; height: 18px; color: #FFFFFF; transform: rotate(180deg); }
.cl-top div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-top b { font-size: 15px; font-weight: 600; color: #FFFFFF; }
.cl-top span { font-size: 12px; color: #8A97AB; }
.cl-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 16px 14px; }
.cl-steps i { height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); }
.cl-steps i.on { background: #3B82F6; }
.cl-body { display: flex; flex-direction: column; gap: 14px; padding: 0 12px 12px; }
.cl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 4px 6px; font-size: 12.5px; font-weight: 600; color: #B7C1D1; }
.cl-act { color: #8FB0FF; }
.cl-card { border-radius: 14px; background: #121A28; border: 1px solid rgba(255,255,255,.07); }
.cl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.3; color: #DCE3EE; border-top: 1px solid rgba(255,255,255,.06); }
.cl-row:first-child { border-top: 0; }
.cl-row b { font-weight: 600; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-row em { font-style: normal; font-size: 12.5px; color: #8A97AB; white-space: nowrap; }
.cl-claim { flex-direction: column; align-items: flex-start; gap: 2px; }
.cl-claim span { font-size: 12px; color: #8A97AB; }
.cl-net b { font-size: 15px; }
.cl-note { margin: 8px 4px 0; font-size: 12px; color: #8A97AB; }
.cl-foot { padding: 2px 12px 16px; }
.cl-btn { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 12px; background: #2563EB; font-size: 14px; font-weight: 600; color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .claim-viz .cl-fill { opacity: 0; }
  .reveal-on .claim-viz.in .cp-scan { animation: cp-scan 1.5s ease-in-out .5s both; }
  .reveal-on .claim-viz.in .cl-fill { animation: cl-fill .45s ease-out both; animation-delay: calc(1.1s + var(--i, 0) * .13s); }
}
@keyframes cp-scan { 0% { top: -40px; opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes cl-fill { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- a phone drawn in HTML (team updates) ---------- */
.mock { position: relative; justify-self: center; width: min(100%, 380px); padding: 12px; border-radius: 46px; background: linear-gradient(160deg, #2A3242, #11161F 40%, #1B2230); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.mock-scr { position: relative; overflow: hidden; border-radius: 36px; background: #0A0E16; }
.mock-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px 6px; font: 600 14px/1 'IBM Plex Sans', system-ui, sans-serif; color: #FFFFFF; }
.mock-bar i { width: 96px; height: 26px; border-radius: 999px; background: #000000; }
.mock-bar span:last-child { display: inline-flex; gap: 4px; align-items: center; }
.mock-bar span:last-child b { display: inline-block; width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid rgba(255,255,255,.8); position: relative; }
.mock-bar span:last-child b::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1px; background: #FFFFFF; }
.mchat-top { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.mchat-top .ico { width: 18px; height: 18px; color: #8FB0FF; }
.mchat-top div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mchat-top b { font-size: 15.5px; font-weight: 600; color: #FFFFFF; }
.mchat-top span { font-size: 12px; color: #8A97AB; }
.mchat { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 10px; }
.mmsg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
.mav { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; font: 700 11px/1 'IBM Plex Sans', system-ui, sans-serif; color: #FFFFFF; }
.mmsg-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mmsg-h { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: #8A97AB; }
.mmsg-h b { font-size: 13.5px; font-weight: 600; color: #FFFFFF; }
.mmsg-t { margin: 0; font-size: 13.5px; line-height: 1.45; color: #DCE3EE; }
.mmsg-t .at { color: #8FB0FF; font-weight: 600; }
.mmsg-pic { display: block; width: 72%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
.mmsg-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: rgba(37,99,235,.16); font-size: 12px; font-weight: 500; color: #B7C8F5; }
.mmsg-tag .ico { width: 13px; height: 13px; }
.mcompose { display: flex; align-items: center; gap: 8px; margin: 0 12px 14px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #121A28; border: 1px solid rgba(255,255,255,.08); font-size: 13.5px; color: #6F7C90; }
.mcompose span { flex: 1 1 auto; }
.mcompose i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #1C2738; color: #8A97AB; }
.mcompose .ico { width: 15px; height: 15px; }
.mpush { position: absolute; z-index: 2; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; width: min(300px, 82%); padding: 11px 12px; border-radius: 18px; background: rgba(34,38,48,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.55); }
.mpush .logo-mark { width: 34px; height: 34px; border-radius: 9px; }
.mpush .logo-mark svg { width: 20px; height: 16px; }
.mpush div { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: #DCE3EE; }
.mpush b { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: #FFFFFF; }
.mpush b small { font-size: 11.5px; font-weight: 400; color: #9AA6B8; }
.mpush.one { top: 66px; right: -22px; }
.mpush.two { bottom: 92px; left: -22px; }
.mock.sm { width: min(100%, 330px); }
.mock.sm .mpush.one { right: -12px; }
.mock.sm .mpush.two { left: -12px; }
@container (max-width: 520px) { .mpush.one { right: -6px; } .mpush.two { left: -6px; } .mock { border-radius: 40px; padding: 10px; } .mock-scr { border-radius: 31px; } }

/* a property's activity (team updates) */
.feed-card { width: 100%; max-width: 460px; justify-self: center; padding: 8px 18px; border-radius: 20px; background: #0B111B; border: 1px solid rgba(143,176,255,.18); box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.feed { position: relative; margin: 0; padding: 0; list-style: none; }
.feed li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.feed li:last-child { border-bottom: 0; }
.feed-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.feed-ic .ico { width: 16px; height: 16px; stroke-width: 2.25; }
.feed li > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14.5px; line-height: 1.45; color: #C3CEE2; }
.feed b { font-weight: 600; color: #FFFFFF; }
.feed i { margin-left: auto; font-style: normal; font: 500 11.5px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; color: #8A97AB; }

/* ---------- Brigg's chat and cards (the home page's trial panel, played by shared/brigg-chat.js) ---------- */
.bchat { container-type: inline-size; display: flex; flex-direction: column; border-radius: 18px; background: rgba(7,12,22,.9); border: 1px solid rgba(143,176,255,.18); box-shadow: 0 24px 50px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); }
.bchat-top { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.bchat-av { flex-shrink: 0; width: 40px; height: 40px; }
.bchat-av img, .bmsg-av { display: block; object-fit: contain; }
.bchat-av img { width: 100%; height: 100%; }
.bchat-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.bchat-who b { font-size: 15px; font-weight: 600; line-height: 1.2; color: #FFFFFF; }
.bchat-who span { font-size: 12.5px; line-height: 1.2; color: #8A97AB; }
.bchat-pause { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.04); color: #B7C1D1; cursor: pointer; }
.bchat-pause[hidden] { display: none; }
.bchat-pause:hover { border-color: rgba(143,176,255,.45); color: #FFFFFF; }
.bchat-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.bchat-pause .bp-play { display: none; fill: currentColor; stroke: none; }
.bchat.is-paused .bp-pause { display: none; }
.bchat.is-paused .bp-play { display: inline; }
.bchat-body { display: grid; padding: 14px 12px 12px; }
.bconv { grid-area: 1 / 1; align-self: end; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bchat:not(.is-live) .bconv + .bconv { visibility: hidden; }
.bmsg { margin: 0; font-size: 14px; line-height: 1.45; }
.bmsg.me { align-self: flex-end; max-width: 86%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: #2563EB; color: #FFFFFF; }
.bmsg.brigg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.bmsg-av { width: 28px; height: 28px; margin-top: 4px; }
.bmsg-col { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.bmsg-txt { margin: 0; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: #172238; color: #E6EBF3; }
.bdots { display: none; }
.bcard { align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: #0F192C; border: 1px solid rgba(143,176,255,.2); box-shadow: 0 14px 30px -18px rgba(0,0,0,.8); }
.bcard-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.bcard-map { width: 68px; height: 51px; flex-shrink: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); }
.bcard-map .road { fill: none; stroke: rgba(255,255,255,.11); stroke-width: 1; }
.bcard-map .mod, .bcard-map .sev, .bcard-map .maj { stroke-width: 1.1; stroke-linejoin: round; }
.bcard-map .mod { fill: rgba(251,191,36,.3); stroke: rgba(251,191,36,.9); stroke-dasharray: 3 2; }
.bcard-map .sev { fill: rgba(249,115,22,.5); stroke: #F97316; stroke-dasharray: 3 2; }
.bcard-map .maj { fill: rgba(239,68,68,.8); stroke: #EF4444; }
.bcard-ic { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: rgba(37,99,235,.2); color: #8FB0FF; transition: background .3s, color .3s; }
.bcard-ic .ico { width: 19px; height: 19px; }
.bcard-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bcard-t b { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: #FFFFFF; }
.bcard-t span { font-size: 12.5px; line-height: 1.35; color: #9AA6B8; }
.bcard-line { margin: 0; font-size: 13px; line-height: 1.4; color: #C3CEE2; }
.bsev { display: flex; height: 6px; overflow: hidden; border-radius: 3px; }
.bsev i { flex: var(--w) 1 0; }
.bleg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; line-height: 1.3; color: #9AA6B8; }
.bleg > span { display: inline-flex; align-items: center; gap: 5px; }
.bleg b { font-weight: 600; color: #E6EBF3; }
.bleg i { width: 7px; height: 7px; border-radius: 999px; }
.bdur { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; color: #9AA6B8; }
.bdur .ico { width: 13px; height: 13px; stroke-width: 2; }
.bcard-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; }
.btap, .bbtn { position: relative; display: inline-grid; place-items: center; min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 9px; background: #2563EB; color: #FFFFFF; font-size: 14px; font-weight: 600; transition: background .25s, border-color .25s, color .25s, transform .15s; }
.btap.ghost { background: transparent; border-color: rgba(255,255,255,.18); color: #E6EBF3; }
.btap > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: opacity .2s, transform .25s; }
.btap-done { opacity: 0; transform: translateY(6px); }
.btap-done .ico { width: 15px; height: 15px; stroke-width: 3; }
.btap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px; background: rgba(255,255,255,.55); opacity: 0; pointer-events: none; }
.bcancel { font-size: 13.5px; font-weight: 500; color: #8A97AB; transition: opacity .2s; }
.bt-done { display: none; }
.bcard-t b span { font: inherit; color: inherit; }
.bconv.s5 .btap { transform: scale(.95); }
.bconv.s5 .btap::after { animation: btap-ring .5s ease-out; }
.bconv.s6 .btap { background: #16A34A; transform: none; }
.bconv.s6 .btap.ghost { background: transparent; border-color: rgba(74,222,128,.5); color: #4ADE80; }
.bconv.s6 .btap-go { opacity: 0; transform: translateY(-6px); }
.bconv.s6 .btap-done { opacity: 1; transform: none; }
.bconv.s6 .bcancel { opacity: 0; }
.bconv.s6 .bt-go { display: none; }
.bconv.s6 .bt-done { display: inline; }
.bconv.s6 .bcard-ic:has(.bt-done) { background: rgba(22,163,74,.2); color: #4ADE80; }
.bdraft { margin: 0; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 13px; line-height: 1.45; color: #E6EBF3; }
.bdl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; font-size: 13px; line-height: 1.45; }
.bdl dt { color: #8A97AB; }
.bdl dd { margin: 0; min-width: 0; color: #E6EBF3; }
.bnum { gap: 8px; }
.bnum-k { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8A97AB; }
.bnum-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bnum-big { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; color: #9AA6B8; }
.bnum-big > span { white-space: nowrap; }
.bnum-big b { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.bnum-big i, .bnum-ch i { font-style: normal; font-size: 12px; color: #8A97AB; }
.bnum-ch { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.bnum-ch b { font-size: 13px; font-weight: 600; color: #4ADE80; }
.bnum-lines { margin: 0; padding: 8px 0 0; list-style: none; display: grid; gap: 4px; border-top: 1px solid rgba(255,255,255,.08); }
.bnum-lines li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.45; color: #E6EBF3; }
.bnum-lines b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bnum-lines i { font-style: normal; font-size: 12px; color: #8A97AB; }
.bnum-lines em { flex-shrink: 0; font-style: normal; font-size: 12.5px; font-weight: 600; color: #4ADE80; }
@container (max-width: 360px) {
  .bnum-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bnum-ch { flex-direction: row; align-items: baseline; gap: 6px; }
  .bnum-lines i { display: none; }
}
.brep-bars { display: grid; gap: 7px; }
.brep-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 58px; align-items: center; gap: 8px; font-size: 12px; color: #C3CEE2; }
.brep-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brep-row i { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.brep-row i::before { content: ""; display: block; width: calc(var(--s) * 100%); height: 100%; border-radius: inherit; background: #2563EB; transform-origin: left; transition: transform .7s cubic-bezier(.2,.7,.2,1) .25s; }
.brep-row b { text-align: right; font-weight: 600; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.bchat-input { display: flex; align-items: center; gap: 8px; margin: 0 10px 10px; padding: 5px 5px 5px 14px; border-radius: 999px; background: #0E1728; border: 1px solid rgba(255,255,255,.10); transition: border-color .2s, box-shadow .2s; }
.bchat.is-typing .bchat-input { border-color: rgba(143,176,255,.45); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.bchat-field { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 14px; line-height: 22px; color: #FFFFFF; }
.bchat-ph { color: #6F7C90; }
.bchat.is-typing .bchat-ph { display: none; }
.bchat.is-typing .bchat-typed::after { content: ""; display: inline-block; width: 2px; height: 16px; margin-left: 1px; vertical-align: -3px; background: #8FB0FF; animation: bcaret .9s steps(1) infinite; }
.bchat-send { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; background: #1C2738; color: #8A97AB; transition: background .2s, color .2s, transform .15s; }
.bchat-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bchat.is-typing .bchat-send { background: #2563EB; color: #FFFFFF; }
.bchat.is-send .bchat-send { transform: scale(.86); }
.bchat.is-live .bconv { visibility: hidden; transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s; }
.bchat.is-live .bconv.on { visibility: visible; transition-delay: 0s; }
.bchat.is-live .bconv.out { opacity: 0; transform: translateY(-14px); }
.bchat.is-live .bconv .me, .bchat.is-live .bconv .brigg, .bchat.is-live .bconv .bmsg-txt, .bchat.is-live .bconv .bcard { opacity: 0; transform: translateY(8px); transition: opacity .35s ease-out, transform .35s ease-out; }
.bchat.is-live .bconv.on .me, .bchat.is-live .bconv.s2 .brigg, .bchat.is-live .bconv.s3 .bmsg-txt, .bchat.is-live .bconv.s4 .bcard { opacity: 1; transform: none; }
.bchat.is-live .bconv.on .me { transition-delay: .25s; }
.bchat.is-live .bconv:not(.s4) .brep-row i::before { transform: scaleX(0); }
.bchat.is-live .bdots { position: absolute; left: 0; top: 0; display: inline-flex; gap: 4px; padding: 14px 14px 13px; border-radius: 16px 16px 16px 4px; background: #172238; opacity: 0; transition: opacity .2s; }
.bchat.is-live .bconv.s2:not(.s3) .bdots { opacity: 1; }
.bdots i { width: 6px; height: 6px; border-radius: 999px; background: #8FB0FF; animation: bdot 1s ease-in-out infinite; }
.bdots i:nth-child(2) { animation-delay: .15s; }
.bdots i:nth-child(3) { animation-delay: .3s; }
@keyframes bdot { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes bcaret { 50% { opacity: 0; } }
@keyframes btap-ring { 0% { opacity: .7; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } }

/* ---------- the Brigg page ---------- */
.ask-stage { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 32px 56px; align-items: center; padding: clamp(20px, 3cqi, 44px); border-radius: 24px; border: 1px solid rgba(143,176,255,.24); background: linear-gradient(180deg, #0F1A30, #0A101B); box-shadow: 0 30px 70px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.ask-stage .bchat { width: 100%; max-width: 460px; justify-self: center; }
.ask-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ask-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgba(28,41,64,.85); font-size: 14.5px; line-height: 1.45; color: #E6EBF3; }
.ask-list li .ico { width: 16px; height: 16px; margin-top: 3px; color: #8FB0FF; }
@container (min-width: 960px) { .ask-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.acts { margin-top: 40px; display: grid; column-gap: 16px; }
.act { grid-area: auto; align-self: stretch; display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: 20px; background: #0B111B; border: 1px solid rgba(255,255,255,.08); }
.act-q { align-self: flex-end; max-width: 92%; margin: 0; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: #2563EB; color: #FFFFFF; font-size: 14px; line-height: 1.45; }
.act > .bmsg { flex: 1 1 auto; }
.act.solo { width: 100%; max-width: 440px; justify-self: center; }
/* The Brigg page's row of four: every column spans the same rows (question, reply, card, caption),
   so the cards come out one height with their buttons on one line, and the captions start level. */
.act-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 28px; }
.act-col > .act { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 12px; }
.act-col .act-q { justify-self: end; align-self: start; }
.act-reply { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; align-self: start; }
.act-reply .bmsg-txt { justify-self: start; }
.act-card { display: flex; padding-left: 36px; }
.act-card .bcard { flex: 1 1 auto; }
.act-card .bcard-acts { margin-top: auto; }
.act-cap { grid-row: 4; display: flex; flex-direction: column; gap: 5px; padding: 18px 6px 0; }
.act-cap b { font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 90%; font-size: 19px; font-weight: 700; line-height: 1.25; color: #FFFFFF; }
.act-cap span { font-size: 15px; line-height: 1.55; color: #9AA6B8; }
@container (min-width: 700px) { .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1160px) { .acts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.knows { margin-top: 40px; display: grid; gap: 16px; }
.know { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.2cqi, 26px); border-radius: 18px; background: var(--card); border: 1px solid var(--cardb); }
.know-h { display: flex; align-items: center; gap: 12px; }
.know .q { margin: 0; align-self: flex-start; max-width: 100%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #EEF3FF; color: #1E2D4A; font-size: 14px; line-height: 1.45; }
.dk .know .q { background: #1C2940; color: #E6EBF3; }
@container (min-width: 700px) { .knows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1080px) { .knows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tuts { width: 100%; max-width: 420px; justify-self: center; overflow: hidden; border-radius: 20px; background: #0B111B; border: 1px solid rgba(143,176,255,.2); box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.tuts-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tuts-top img { width: 34px; height: 34px; object-fit: contain; }
.tuts-top b { font-size: 16px; font-weight: 600; color: #FFFFFF; }
.tuts-top span { margin-left: auto; font-size: 13px; font-weight: 600; color: #8FB0FF; }
.tuts ol { margin: 0; padding: 8px 10px 12px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.tuts-g { padding: 10px 8px 4px; font: 500 11px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A97AB; }
.tuts-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; }
.tuts-r:nth-child(2) { background: rgba(143,176,255,.07); }
.tuts-r .cap-ic { width: 34px; height: 34px; border-radius: 10px; }
.tuts-r .cap-ic .ico { width: 17px; height: 17px; }
.tuts-r div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tuts-r b { font-size: 14.5px; font-weight: 600; color: #FFFFFF; }
.tuts-r span { font-size: 12.5px; color: #9AA6B8; }
.tuts-r > .ico { width: 16px; height: 16px; color: #6F7C90; }
.promise { display: grid; gap: 14px; margin-top: 36px; }
.promise div { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--cardb); }
.promise .ico { width: 22px; height: 22px; margin-top: 1px; color: #1D4ED8; stroke-width: 2; }
.dk .promise .ico { color: #8FB0FF; }
.promise p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tx2); }
.promise p b { display: block; margin-bottom: 2px; font-size: 16px; color: var(--tx); }
@container (min-width: 900px) { .promise { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- the pricing page ---------- */
.plan { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 480px; justify-self: center; padding: clamp(22px, 2.8cqi, 34px); border-radius: 24px; border: 1px solid rgba(143,176,255,.3); background: linear-gradient(180deg, #0F1A30, #0A101B); box-shadow: 0 30px 70px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.plan-name { font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 85%; font-weight: 800; font-size: 26px; line-height: 1; color: #FFFFFF; }
.price-stack { display: flex; flex-direction: column; gap: 8px; }
.price-was { margin: 0; font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 85%; font-size: 20px; font-weight: 700; line-height: 1; color: #8A97AB; text-decoration: line-through; text-decoration-color: #FFFFFF; text-decoration-thickness: 2px; }
.price-now { margin: 0; display: flex; align-items: baseline; gap: 4px; font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 80%; color: #FFFFFF; }
.price-now b { font-size: clamp(64px, 7cqi, 88px); font-weight: 800; line-height: .9; letter-spacing: -.02em; }
.price-now span { font-size: 20px; font-weight: 600; color: #B7C1D1; }
.sale-tag { padding: 6px 11px; border-radius: 999px; background: #F2A93B; color: #1A1206; font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.plan-seats { margin: -6px 0 0; font-size: 15.5px; line-height: 1.5; color: #C3CEE2; }
.plan-seats b { color: #FFFFFF; font-weight: 600; }
.plan .btn { width: 100%; }
.plan-fine { margin: -6px 0 0; text-align: center; font-size: 13.5px; line-height: 1.5; color: #9AA6B8; }
.plan-list { margin: 0; padding: 18px 0 0; list-style: none; display: grid; gap: 10px; border-top: 1px solid rgba(255,255,255,.10); }
.plan-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; color: #D5DCE7; }
.plan-list .ico { width: 18px; height: 18px; margin-top: 2px; stroke: #F2A93B; stroke-width: 2.75; }
.seats { display: grid; gap: 28px 48px; align-items: center; padding: clamp(22px, 3cqi, 40px); border-radius: 22px; background: #FFFFFF; border: 1px solid #E2DDD3; }
.seat-pick { display: flex; flex-direction: column; gap: 14px; }
.seat-pick label { font-size: 15px; font-weight: 600; color: #0E1420; }
.stepper { display: inline-flex; align-items: center; gap: 0; align-self: flex-start; border-radius: 14px; border: 1px solid #CFC8BB; background: #FFFFFF; overflow: hidden; }
.stepper button { display: grid; place-items: center; width: 52px; height: 56px; padding: 0; border: 0; background: #F5F3EE; color: #0E1420; cursor: pointer; }
.stepper button:hover { background: #ECE8DF; }
.stepper button:disabled { color: #A9A398; cursor: default; background: #F5F3EE; }
.stepper button .ico { width: 20px; height: 20px; stroke-width: 2.5; }
.stepper input { width: 84px; height: 56px; padding: 0; border: 0; border-inline: 1px solid #CFC8BB; background: #FFFFFF; color: #0E1420; text-align: center; font: 700 24px/1 Archivo, 'Arial Narrow', sans-serif; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: 2px solid rgba(37,99,235,.35); outline-offset: -2px; }
.seat-range { width: 100%; accent-color: #2563EB; }
.seat-total { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4cqi, 28px); border-radius: 18px; background: #0B111B; color: #F4F6FB; }
.seat-total .eye { color: #8FB0FF; }
.seat-total strong { font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 80%; font-weight: 800; font-size: clamp(48px, 5cqi, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.seat-total strong .per { margin-left: 4px; font-size: 20px; font-weight: 600; color: #B7C1D1; }
.seat-total p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #B7C1D1; }
@container (min-width: 900px) { .seats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.office { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 28px; padding: clamp(20px, 2.4cqi, 28px); border-radius: 18px; background: var(--card); border: 1px solid var(--cardb); }
.office div { display: flex; flex-direction: column; gap: 6px; max-width: 60ch; }
.office b { font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 85%; font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--tx); }
.office span { font-size: 15px; line-height: 1.55; color: var(--tx2); }

/* ---------- the support page ---------- */
.helps { display: grid; gap: 16px; }
.help { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4cqi, 28px); border-radius: 20px; background: #0F1724; border: 1px solid rgba(255,255,255,.09); }
.help.lit { border-color: rgba(143,176,255,.4); background: #0F1A30; }
.help-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(37,99,235,.18); color: #8FB0FF; }
.help-ic img { width: 40px; height: 40px; object-fit: contain; }
.help-ic .ico { width: 22px; height: 22px; stroke-width: 2; }
.help h2 { margin: 0; font-family: Archivo, 'Arial Narrow', sans-serif; font-stretch: 85%; font-weight: 800; font-size: 24px; line-height: 1.1; color: #FFFFFF; }
.help p { margin: 0; font-size: 15px; line-height: 1.6; color: #B7C1D1; }
.help .where { margin-top: auto; padding-top: 6px; font: 500 12.5px/1.45 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; color: #8FB0FF; }
.help .tlink { margin-top: auto; color: #FFFFFF; }
@container (min-width: 700px) { .helps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .helps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps { margin: 36px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--cardb); counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #2563EB; color: #FFFFFF; font: 800 18px/1 Archivo, 'Arial Narrow', sans-serif; }
.steps div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.steps b { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--tx); }
.steps span { font-size: 14.5px; line-height: 1.55; color: var(--tx2); }
.steps a { color: #1D4ED8; font-weight: 600; }
@container (min-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1160px) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } .steps li { grid-template-columns: 1fr; } }
.topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.topics a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cardb); background: var(--card); color: var(--tx); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.topics a:hover { border-color: #2563EB; color: #1D4ED8; }
.ftopic { margin-top: 48px; }
.ftopic:first-of-type { margin-top: 36px; }
.ftopic > .eye { display: flex; align-items: center; gap: 10px; }
.ftopic > .eye .ico { width: 16px; height: 16px; stroke-width: 2.25; }
.ftopic .faq { margin-top: 12px; }

/* ---------- scroll-in (only once site.js marks the page; without it everything shows) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease-out var(--d, 0s), transform .6s ease-out var(--d, 0s); }
  .reveal-on [data-reveal].in { opacity: 1; transform: none; }
}