/* /hi-otter: the marketing page for the Hi Otter chat helper. Builds on the /support page styles (support.css). */
.ho-hero{display:grid;gap:22px;align-items:start}
.ho-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:6px 0 0}
.ho-open img{width:26px;height:26px;border-radius:50%;border:2px solid var(--navy);background:#fff}
.ho-open{display:none}
.so-chat-on .ho-open{display:inline-flex}
.so-chat-on .ho-soon{display:none}
.ho-soon{font:600 14.5px/1.45 var(--body);color:var(--navy2)}
.ho-demo{display:flex;flex-direction:column;gap:9px;padding:16px;background:var(--cream);border:2px solid var(--navy);border-radius:18px;box-shadow:5px 5px 0 var(--mustard)}
.ho-demo p{margin:0;max-width:88%;padding:9px 12px;border-radius:14px;font-size:15px;line-height:1.45}
.ho-demo .me{align-self:flex-end;background:var(--navy);color:var(--cream);border-bottom-right-radius:4px}
.ho-demo .ot{align-self:flex-start;background:#fff;border:1.5px solid var(--line);border-bottom-left-radius:4px}
.ho-demo .ho-note{max-width:none;padding:0;background:none;font-size:12px;color:var(--muted)}
.ho-grid{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.ho-grid li{padding:14px 16px;background:var(--cream);border:2px solid var(--line);border-radius:14px}
.ho-grid b{display:block;margin-bottom:4px;font:800 16px var(--body);color:var(--navy)}
.ho-grid span{font-size:15px;color:var(--ink)}
.ho details{margin:8px 0;padding:10px 14px;background:var(--cream);border:2px solid var(--line);border-radius:12px}
.ho summary{font-weight:800;color:var(--navy);cursor:pointer}
.ho details p{margin:8px 0 2px}
@media (min-width:860px){
  .ho-hero{grid-template-columns:1.1fr 1fr;gap:36px}
  .ho-grid{grid-template-columns:repeat(3,1fr)}
}