:root{
  --ink:#1a1d21; --accent:#e2763a; --deep:#2f3a44; --paper:#f6f4f1;
  --bg:#f6f4f1; --fg:#1a1d21; --card:#ffffff; --line:color-mix(in srgb,#1a1d21 13%,transparent);
  --muted:color-mix(in srgb,#1a1d21 58%,transparent);
  --on-accent:#f6f4f1;
  --display:ui-sans-serif, 'Inter', 'Segoe UI', system-ui, sans-serif; --body:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:16px; --gutter:20px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:color-mix(in srgb,#1a1d21 92%,#000); --fg:#f6f4f1; --card:color-mix(in srgb,#1a1d21 80%,#000);
    --line:color-mix(in srgb,#f6f4f1 16%,transparent); --muted:color-mix(in srgb,#f6f4f1 62%,transparent);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-inline:var(--gutter)}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:0}

/* chat-panel awareness -----------------------------------------------------
   The platform's embed panel is a fixed ~420px column on desktop (full-screen
   below this breakpoint, where it needs no help). The shared opener
   (_shared/ui/open-chat.js) toggles .bm-chat-open on the html element whenever
   the panel's iframe is present in the DOM, so the page can make room instead
   of letting the panel cover the hero column (busymate-devtools#3416). body
   already has no horizontal padding, so this never causes overflow; removing
   the class (panel closed) restores the layout with no shift. */
@media (min-width:1100px){
  html.bm-chat-open body{padding-right:420px}
}

/* header ------------------------------------------------------------------ */
header.site{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:12px;min-height:62px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;text-decoration:none;margin-right:auto}
.logo img{width:30px;height:30px;border-radius:9px}
.site nav{display:none;gap:18px}
.site nav a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap}
.site nav a:hover{color:var(--fg)}
@media (min-width:860px){ .site nav{display:flex} }

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);border:0;border-radius:11px;padding:12px 18px;font:inherit;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;min-height:44px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.small{padding:9px 14px;font-size:13px;min-height:40px}

/* hero -------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(170deg,color-mix(in srgb,var(--ink) 82%,transparent) 0%,color-mix(in srgb,var(--ink) 66%,transparent) 60%,color-mix(in srgb,var(--ink) 84%,transparent) 100%)}
.hero .wrap{padding-block:72px 64px;color:#f6f4f1}
.hero h1{font-size:clamp(30px,8vw,56px);line-height:1.05;margin:14px 0 14px;font-weight:700}
.hero p.lead{font-size:clamp(16px,4vw,19px);color:color-mix(in srgb,#f6f4f1 82%,transparent);margin:0;max-width:34ch}
.hero .eyebrow{color:color-mix(in srgb,#e2763a 70%,#f6f4f1)}
.hero .cta{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.hero .btn.ghost{color:#f6f4f1;border-color:color-mix(in srgb,#f6f4f1 34%,transparent)}
@media (min-width:640px){ .hero .cta{flex-direction:row;flex-wrap:wrap} .hero p.lead{max-width:46ch} }
@media (min-width:860px){ .hero .wrap{padding-block:116px 104px} }

/* sections ---------------------------------------------------------------- */
section{padding-block:44px;border-top:1px solid var(--line)}
section > .wrap > h2{font-size:clamp(22px,5vw,30px);margin-bottom:8px}
section > .wrap > p.sub{color:var(--muted);margin:0 0 22px;max-width:62ch}
@media (min-width:860px){ section{padding-block:66px} }

.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){ .grid.two,.grid.three,.grid.four{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .grid.three{grid-template-columns:repeat(3,1fr)} .grid.four{grid-template-columns:repeat(4,1fr)} }

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px}
.card h3{font-size:16px;font-weight:700}
.card p{margin:0;font-size:14px;color:var(--muted)}
.card .meta{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:12px;min-width:0}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted)}
/* A pill held on one line is a horizontal scrollbar waiting for a long value:
   a catalogue row's plan value is free text, and at 390px one sentence in a
   nowrap pill pushed the whole page to 444px wide (measured live, #3416). */
.pill{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);max-width:100%;overflow-wrap:anywhere}
.card.lit{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

.split{display:grid;gap:18px;grid-template-columns:1fr;align-items:center}
@media (min-width:860px){ .split{grid-template-columns:1.05fr .95fr;gap:28px} }
.split figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.split figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.split ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px;font-size:14px;color:var(--muted)}
.split li{display:flex;gap:10px}
.split li strong{color:var(--fg);font-weight:600;flex:0 0 118px}

/* plans ------------------------------------------------------------------- */
.plan .price{font-family:var(--display);font-size:26px;font-weight:700}
.plan .price small{font-size:13px;font-weight:500;color:var(--muted)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
.plan li::before{content:"✓ ";color:var(--accent);font-weight:700}

/* records ----------------------------------------------------------------- */
.rec{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.rec:last-child{border-bottom:0}
.rec .top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.rec .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:13px}
.rec .sum{font-size:14.5px}
.rec .why{font-size:13px;color:var(--muted)}
.state{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:2px 8px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--muted)}
.state.open,.state.confirmed{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}

/* honesty panel ----------------------------------------------------------- */
.honesty{background:color-mix(in srgb,var(--accent) 7%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:var(--radius);padding:18px}
.honesty h2{font-size:18px;margin-bottom:6px}
.honesty .cols{display:grid;gap:14px;grid-template-columns:1fr;margin-top:14px}
@media (min-width:640px){ .honesty .cols{grid-template-columns:1fr 1fr} }
.honesty h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.honesty ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:14px}
.honesty .note{margin:14px 0 0;font-size:14px}

/* try cards --------------------------------------------------------------- */
.try{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.try q{font-family:var(--display);font-size:17px;line-height:1.35;display:block}
.try p{margin:0;font-size:13.5px;color:var(--muted)}
.try .btn{align-self:flex-start}

/* connect story ----------------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:12px;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:14.5px}
.steps li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:700;font-size:13px}

/* faq --------------------------------------------------------------------- */
details.faq{border-bottom:1px solid var(--line);padding:14px 0}
details.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--accent);font-weight:700}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:10px 0 0;color:var(--muted);font-size:14.5px;max-width:70ch}

/* identity + footer ------------------------------------------------------- */
.who{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.who .dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.who.on .dot{background:var(--accent)}
footer.site{border-top:1px solid var(--line);padding-block:30px;font-size:13.5px;color:var(--muted)}
footer.site .cols{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){ footer.site .cols{grid-template-columns:repeat(3,1fr)} }
footer.site a{color:var(--muted)}
footer.site h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg);margin-bottom:8px}
footer.site ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}

/* the desk form ----------------------------------------------------------- */
form.desk{display:grid;gap:12px}
form.desk label{display:grid;gap:5px;font-size:13px;font-weight:600}
form.desk input,form.desk select,form.desk textarea{font:inherit;font-size:16px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);width:100%;min-height:44px}
form.desk textarea{min-height:96px;resize:vertical}
form.desk .row{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){ form.desk .row{grid-template-columns:1fr 1fr} }
.said{margin:0;font-size:14px;padding:12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.said[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   The channel half. Everything above is the shared design kit; everything
   below exists only because this page shows a messaging surface.
   ═══════════════════════════════════════════════════════════════════════ */

/* Phone — the token set. A per-surface difference is a VALUE here,
   never a rule of its own and never a second device component. */
.ch-device[data-surface="voice"]{
  --ch-header-bg:#10131a; --ch-header-fg:#f4f6fb; --ch-header-line:#242a36;
  --ch-ground:#151a23;
  --ch-in-bg:#232b38; --ch-in-fg:#e8edf6;
  --ch-out-bg:#3b82f6; --ch-out-fg:#ffffff;
  --ch-radius:14px; --ch-tail-in:14px; --ch-tail-out:14px;
  --ch-composer-bg:#1b2230; --ch-composer-fg:#93a0b5; --ch-composer-radius:999px;
  --ch-chip:#232b38; --ch-chip-fg:#e8edf6; --ch-send:#4ade80;
  --ch-accent:#4ade80;
}
@media (prefers-color-scheme: dark){
  .ch-device[data-surface="voice"]{ --ch-ground:#0a0d13; }
}

/* hero: copy first, device under it; side by side once there is room -------- */
.hero .ch-hero{display:grid;gap:26px;grid-template-columns:1fr;align-items:center}
.hero .ch-hero-copy{min-width:0}
.hero .ch-stage{display:flex;justify-content:center}
@media (min-width:980px){
  .hero .ch-hero{grid-template-columns:1.02fr .98fr;gap:40px}
  .hero .ch-stage{justify-content:flex-end}
}

/* the device --------------------------------------------------------------- */
.ch-device{
  width:100%;max-width:330px;display:flex;flex-direction:column;
  background:var(--ch-ground);color:var(--ch-in-fg);
  border-radius:34px;overflow:hidden;
  border:1px solid color-mix(in srgb,#1a1d21 34%,transparent);
  box-shadow:0 26px 60px -22px color-mix(in srgb,#1a1d21 78%,transparent), 0 0 0 7px color-mix(in srgb,#1a1d21 88%,transparent);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.ch-status{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 4px;background:var(--ch-header-bg);color:var(--ch-header-fg);font-size:11px;font-weight:600;letter-spacing:.01em}
.ch-status-app{opacity:.72}
.ch-status-glyphs{display:flex;align-items:flex-end;gap:2px;height:11px}
.ch-status-glyphs i{display:block;width:3px;background:currentColor;opacity:.55;border-radius:1px}
.ch-status-glyphs .b1{height:4px}.ch-status-glyphs .b2{height:7px}.ch-status-glyphs .b3{height:10px}
.ch-status-glyphs .batt{width:16px;height:9px;border-radius:2px;opacity:.4;margin-left:5px}

.ch-header{display:flex;align-items:center;gap:10px;padding:9px 13px 11px;background:var(--ch-header-bg);color:var(--ch-header-fg);border-bottom:1px solid var(--ch-header-line)}
.ch-back{width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.6;flex:0 0 auto}
.ch-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#e2763a,#2f3a44);color:#f6f4f1;font-weight:700;font-size:15px}
.ch-who{flex:1;min-width:0;line-height:1.25}
.ch-who b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-who span{display:block;font-size:11.5px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-badge{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;opacity:.85}
.ch-badge.round{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,currentColor 14%,transparent)}
.ch-mark{width:17px;height:17px;fill:currentColor}

/* the screen: the slot the LIVE assistant panel is positioned over ---------- */
.ch-screen{position:relative;height:470px;background:var(--ch-ground);overflow:hidden}
.ch-seed{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:14px 13px 16px}
.ch-divider{margin:0;text-align:center}
.ch-divider span{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--ch-in-fg) 52%,transparent);background:color-mix(in srgb,var(--ch-in-bg) 70%,transparent);border-radius:999px;padding:3px 10px}
.ch-bubble{margin:0;max-width:86%;font-size:13.5px;line-height:1.45;padding:9px 12px;background:var(--ch-in-bg);color:var(--ch-in-fg);border-radius:var(--ch-radius);border-bottom-left-radius:var(--ch-tail-in);align-self:flex-start}
.ch-bubble.out{background:var(--ch-out-bg);color:var(--ch-out-fg);align-self:flex-end;border-bottom-left-radius:var(--ch-radius);border-bottom-right-radius:var(--ch-tail-out)}
.ch-typing{margin:0;align-self:flex-start;display:flex;gap:4px;padding:10px 13px;background:var(--ch-in-bg);border-radius:var(--ch-radius);border-bottom-left-radius:var(--ch-tail-in)}
.ch-typing[hidden]{display:none}
.ch-typing i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ch-in-fg) 45%,transparent);animation:ch-dot 1.25s infinite ease-in-out}
.ch-typing i:nth-child(2){animation-delay:.18s}
.ch-typing i:nth-child(3){animation-delay:.36s}
@keyframes ch-dot{0%,60%,100%{opacity:.32;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* quick replies: real buttons, the surface's own chip shape.
   They WRAP rather than scroll: a row that scrolls hides its last reply behind
   the phone's edge, and a half-cut chip reads as a broken layout, not as an
   affordance. */
.ch-quick{display:flex;flex-wrap:wrap;gap:7px;padding:10px 12px;background:var(--ch-ground)}
.ch-chip{flex:0 1 auto;font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;padding:9px 13px;min-height:38px;border:0;border-radius:999px;background:var(--ch-chip);color:var(--ch-chip-fg);cursor:pointer}
.ch-chip:hover{filter:brightness(.96)}
.ch-chip:focus-visible{outline:2px solid var(--ch-accent);outline-offset:2px}

.ch-composer{display:flex;align-items:center;gap:9px;padding:9px 12px 14px;background:var(--ch-header-bg);border-top:1px solid var(--ch-header-line)}
.ch-input{flex:1;font-size:13px;color:var(--ch-composer-fg);background:var(--ch-composer-bg);border-radius:var(--ch-composer-radius);padding:9px 13px;border:1px solid var(--ch-header-line)}
.ch-send{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--ch-send);opacity:.9}

/* the call variant --------------------------------------------------------- */
.ch-device-call .ch-call-head{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px 18px;background:var(--ch-header-bg);color:var(--ch-header-fg);text-align:center}
.ch-device-call .ch-call-head b{font-size:19px;font-weight:600}
.ch-device-call .ch-call-head span[data-ch-presence]{font-size:12.5px;opacity:.7}
.ch-call-avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#e2763a,#2f3a44);color:#f6f4f1;font-size:30px;font-weight:700}
.ch-device-call .ch-badge{position:absolute;top:14px;right:14px}
.ch-screen-call{height:360px}
.ch-screen-call .ch-seed{justify-content:center;align-items:center;text-align:center;gap:16px}
.ch-caption{margin:0;font-size:13.5px;line-height:1.5;color:color-mix(in srgb,var(--ch-in-fg) 88%,transparent);max-width:90%}
.ch-wave{margin:0;display:flex;align-items:center;gap:3px;height:38px}
.ch-wave i{width:3px;height:9px;border-radius:2px;background:var(--ch-accent);opacity:.75;animation:ch-wave 1.15s infinite ease-in-out;animation-delay:calc(var(--i) * .055s)}
@keyframes ch-wave{0%,100%{height:8px;opacity:.45}50%{height:30px;opacity:1}}
.ch-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 22px 20px;background:var(--ch-header-bg)}
.ch-key{height:44px;border-radius:50%;background:color-mix(in srgb,var(--ch-header-fg) 12%,transparent)}
.ch-key.end{background:#e5484d}

@media (prefers-reduced-motion: reduce){
  .ch-typing i,.ch-wave i{animation:none}
  .ch-wave i{height:17px}
}

/* the state a visitor lands in, and the one a tap produces ------------------ */
.ch-stage-note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:color-mix(in srgb,#f6f4f1 74%,transparent);max-width:36ch}
.ch-stage-note a{color:#f6f4f1}
/* The base kit colours the identity line with --muted, which is the page ink —
   correct on a white section, invisible on this hero's dark photograph. */
.hero .who{color:color-mix(in srgb,#f6f4f1 76%,transparent)}
.hero .who .dot{background:color-mix(in srgb,#f6f4f1 34%,transparent)}
.hero .who.on .dot{background:#e2763a}
/* Once the live panel is mounted into the device, the seeded chrome inside the
   screen would sit UNDER it and show through any transparent edge. */
.ch-device.is-live .ch-seed{opacity:0;pointer-events:none}
.ch-device.is-live .ch-composer,.ch-device.is-live .ch-controls{display:none}
/* The captured panel brings its own composer, so the device's dimmed one below
   it read as a second, broken input. Hidden outright while live; the quick
   replies stay, because they still work and still belong to the surface. */

/* the channel facts -------------------------------------------------------- */
.ch-facts{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:860px){ .ch-facts{grid-template-columns:repeat(3,1fr)} }
.ch-facts .card h3{font-size:15px}

/* Base-kit override (see the file header): the 420 px gutter is for a panel at
   the edge of the page. Once this page has captured the panel INTO the device,
   the gutter would be an empty column, so it is reserved only until then. */
@media (min-width:1100px){
  html.bm-chat-open.ch-panel-captured body{padding-right:0}
}