:root{
  --ink:#14232b; --accent:#12a3a0; --deep:#1d4450; --paper:#f7faf9;
  --bg:#f7faf9; --fg:#14232b; --card:#ffffff; --line:color-mix(in srgb,#14232b 13%,transparent);
  --muted:color-mix(in srgb,#14232b 58%,transparent);
  --on-accent:#f7faf9;
  --display:ui-sans-serif, 'Avenir Next', '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,#14232b 92%,#000); --fg:#f7faf9; --card:color-mix(in srgb,#14232b 80%,#000);
    --line:color-mix(in srgb,#f7faf9 16%,transparent); --muted:color-mix(in srgb,#f7faf9 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:#f7faf9}
.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,#f7faf9 82%,transparent);margin:0;max-width:34ch}
.hero .eyebrow{color:color-mix(in srgb,#12a3a0 70%,#f7faf9)}
.hero .cta{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.hero .btn.ghost{color:#f7faf9;border-color:color-mix(in srgb,#f7faf9 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.
   ═══════════════════════════════════════════════════════════════════════ */

/* SMS — 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="sms"]{
  --ch-header-bg:#f2f2f7; --ch-header-fg:#1c1c1e; --ch-header-line:#d1d1d6;
  --ch-ground:#ffffff;
  --ch-in-bg:#e9e9eb; --ch-in-fg:#1c1c1e;
  --ch-out-bg:#34c759; --ch-out-fg:#ffffff;
  --ch-radius:18px; --ch-tail-in:4px; --ch-tail-out:4px;
  --ch-composer-bg:#f2f2f7; --ch-composer-fg:#8e8e93; --ch-composer-radius:18px;
  --ch-chip:#e9e9eb; --ch-chip-fg:#1c1c1e; --ch-send:#34c759;
  --ch-accent:#34c759;
}
@media (prefers-color-scheme: dark){
  .ch-device[data-surface="sms"]{ --ch-ground:#0b0b0d; }
}

/* 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,#14232b 34%,transparent);
  box-shadow:0 26px 60px -22px color-mix(in srgb,#14232b 78%,transparent), 0 0 0 7px color-mix(in srgb,#14232b 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,#12a3a0,#1d4450);color:#f7faf9;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,#12a3a0,#1d4450);color:#f7faf9;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,#f7faf9 74%,transparent);max-width:36ch}
.ch-stage-note a{color:#f7faf9}
/* 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,#f7faf9 76%,transparent)}
.hero .who .dot{background:color-mix(in srgb,#f7faf9 34%,transparent)}
.hero .who.on .dot{background:#12a3a0}
/* 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}
}