/* Pages you read rather than meet in. The room's palette, a document's rhythm. */
body.doc{overflow:auto;height:auto;background:var(--bg);
  background-image:radial-gradient(900px 520px at 78% -12%, rgba(91,46,242,.20), transparent 62%),
                   radial-gradient(760px 460px at 8% 4%, rgba(7,148,252,.14), transparent 60%);
  background-attachment:fixed}
body.doc a{color:var(--blue);text-decoration:none}
body.doc a:hover{text-decoration:underline}

.docnav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13px 22px;background:var(--panel);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
/* rgba(5,8,23,.82) was a dark bar hardcoded into both themes — in light mode its
   dark-inked links were black-on-near-black. The bar follows the theme like every
   other surface; the wordmark is white artwork, so in light it swaps to the mark. */
/* The wordmark is 942×63 artwork. At height:21px with no width cap it lays out 314px
   wide, and 314 + the padding + the 135px "Start a meeting" button is 479px inside a
   390px phone — which is why every page with this nav scrolled sideways by exactly
   47px. Three things are needed and only the first is obvious:
     · a width cap, so it can be asked to be narrower;
     · min-width:0 on the ANCHOR, because an <img> will not shrink below its intrinsic
       width while its flex parent is sitting at min-content;
     · object-fit, so capping the width scales it instead of squashing it.
   Measured at 320/360/390/414/700: zero overflow. */
.docnav .lockup{min-width:0;flex:0 1 auto;display:block}
.docnav .lockup img{height:21px;width:auto;max-width:100%;object-fit:contain;display:block}
:root[data-theme="light"] .docnav .lockup img,
:root:not([data-theme="dark"]) .docnav .lockup img{filter:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .docnav .footwm-invert{filter:invert(1)}
}
:root[data-theme="light"] .docnav img[src*="wordmark-white"],
:root[data-theme="light"] .docfoot img[src*="wordmark-white"]{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .docnav img[src*="wordmark-white"],
  :root:not([data-theme="dark"]) .docfoot img[src*="wordmark-white"]{filter:invert(1) hue-rotate(180deg)}
}
.docnav-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.docnav-right a{font-size:13.5px;color:var(--mid)}
.docnav-right a:hover{color:var(--ink);text-decoration:none}
.docnav-right .btn.go{color:#fff;padding:8px 15px;border-radius:10px;background:var(--grad);font-size:13px;font-weight:600}

.docmain{max-width:830px;margin:0 auto;padding:0 22px 90px}
.dochero{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  font-weight:600;margin:0 0 14px}
.dochero h1{font-family:var(--display);font-size:clamp(31px,5.2vw,46px);line-height:1.08;
  margin:0 0 22px;letter-spacing:-.02em;font-weight:700}
.lede{font-size:16.5px;line-height:1.68;color:var(--mid);margin:0 0 16px;max-width:66ch}
.herobtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn.big{padding:13px 22px;border-radius:12px;font-size:14.5px;font-weight:600;display:inline-block}
.btn.go.big{background:var(--grad);color:#fff}
.btn.ghost.big{border:1px solid var(--line);color:var(--ink);background:var(--panel)}
.btn.ghost.big:hover{border-color:var(--blue);text-decoration:none}

.docmain section{padding:46px 0;border-bottom:1px solid var(--line)}
.docmain section:last-of-type{border-bottom:0}
.docmain h2{font-family:var(--display);font-size:26px;font-weight:600;margin:0 0 16px;letter-spacing:-.01em}
.docmain h3{font-family:var(--display);font-size:17px;font-weight:600;margin:32px 0 11px;color:var(--ink)}
.docmain p{margin:0 0 15px;color:var(--mid);line-height:1.68;max-width:70ch}
.docmain p.note{font-size:13.5px;color:var(--dim)}
.docmain ul{margin:0 0 16px;padding-left:20px;color:var(--mid);line-height:1.68;max-width:70ch}
.docmain li{margin-bottom:9px}
.docmain b{color:var(--ink);font-weight:600}
ul.cannot{list-style:none;padding-left:0}
ul.cannot li{padding-left:19px;position:relative}
ul.cannot li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;
  background:var(--grad)}

pre{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  overflow-x:auto;margin:0 0 17px}
/* Code is inked in tokens, not literals. #D8E0FF was pale lavender chosen against a
   dark panel — in light mode that is white-on-white, which is the screenshot Jack
   sent. The rule that keeps this from returning: a colour written as a hex literal in
   a component stylesheet is a colour that is wrong in one theme. */
/* Not the inline-code pill: on code inside a block that pill was drawn once per line,
   a shaded bar behind every line of every example (/connect, 30 October). */
pre code{font-family:var(--mono);font-size:12.8px;line-height:1.65;color:var(--ink);white-space:pre;
  background:none;border:0;border-radius:0;padding:0}
code{font-family:var(--mono);font-size:.92em;background:var(--panel2);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;color:var(--ink)}
pre code .c{color:var(--dim)}

table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px;display:block;overflow-x:auto}
table thead th{text-align:left;font-weight:600;color:var(--ink);padding:10px 13px;
  border-bottom:1px solid var(--line);font-size:13px;white-space:nowrap}
table td{padding:11px 13px;border-bottom:1px solid var(--line);color:var(--mid);vertical-align:top;line-height:1.55}
table td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}
table.api td:first-child{width:1%}
table.cmp td:nth-child(2){color:var(--dim)}
table.cmp td:last-child{color:var(--ink)}

.docfoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:36px 0 0;
  border-top:1px solid var(--line);margin-top:20px;color:var(--dim);font-size:13px}
.docfoot .footwm{height:16px;opacity:.65}
/* A footer written after </main> rather than inside it (agents, book, booking, connect)
   ran the full width of the window, the wordmark against its left edge. It takes the
   column the page's text is in instead. */
body > .docfoot{box-sizing:border-box;width:calc(100% - 44px);max-width:786px;margin:20px auto 0;padding:36px 0 48px}
.docfoot nav{display:flex;gap:17px;flex:1;flex-wrap:wrap}
.docfoot nav a{color:var(--dim)}
.docfoot nav a:hover{color:var(--ink)}

@media (max-width:700px){
  .docnav{padding:11px 15px;gap:10px}
  .docnav .lockup img{height:18px}
  /* Start a meeting + Sign in + Sign up + the theme switch is wider than a phone;
     the taste pass saw the wordmark squeezed off the left of every doc page. */
  .docnav .lockup{flex:0 0 auto}
  /* A 314px wordmark has no business on a 360px phone: squeezed, it was a smear
     five pixels tall. The mark stands in for it, the way an app icon stands in
     for a name — it is the brand at a size the brand can survive. */
  .docnav .lockup img{content:url(/brand/mark.svg);height:30px;width:30px;filter:none !important}
  /* The buttons keep their width and the wordmark gives way (down to 72px) — the
     other way round wrapped the buttons under each other on every phone. */
  .docnav-right{gap:8px;min-width:0;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
  .docnav-right a:not(.btn){display:none}
  /* Start a meeting is the product; the door is a word. Two blue buttons and a
     wordmark do not fit on a phone, so Sign up gives way to a quiet Sign in — the
     same panel behind both. */
  .docnav-right .signup-btn{display:none}
  .docnav-right .signin-btn{display:inline-block;margin-left:0;padding:7px 8px}
  .docnav-right .btn.go{padding:8px 10px;white-space:nowrap}
  .docnav-right #themeBtn{padding:7px 8px !important}
  .docmain{padding:0 15px 60px}
  body > .docfoot{width:calc(100% - 30px);padding-bottom:36px}
  .dochero{padding:38px 0 30px}
  .docmain section{padding:34px 0}
  pre code{font-size:12px}
}
/* On the narrowest phones the theme switch is the thing that goes. */
@media (max-width:340px){
  .docnav-right #themeBtn{display:none !important}
}

/* ───────── blog ───────── */
.postlist{border-bottom:0;padding-top:34px}
.postcard{padding:24px 0;border-bottom:1px solid var(--line)}
.postcard:last-child{border-bottom:0}
.related{margin:44px 0 0;padding-top:8px;border-top:1px solid var(--line)}
.related h3{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:22px 0 0}
.related .postcard h2{font-size:19px}
.postcard a{text-decoration:none}
.postcard h2{font-family:var(--display);font-size:22px;font-weight:600;margin:0 0 9px;
  color:var(--ink);letter-spacing:-.01em;line-height:1.28}
.postcard a:hover h2{color:var(--blue)}
.postcard p{margin:0 0 8px;color:var(--mid);font-size:15px;line-height:1.62}
.meta{font-size:12.5px;color:var(--dim);letter-spacing:.01em}
.post .dochero{border-bottom:1px solid var(--line);padding-bottom:26px}
.post .dochero h1{max-width:20ch;font-size:clamp(28px,4.6vw,40px)}

.prose{padding:34px 0 10px;font-size:16.5px;line-height:1.72}
.prose p{margin:0 0 19px;color:#C3CCE6;max-width:68ch}
.prose h2{font-family:var(--display);font-size:24px;font-weight:600;margin:40px 0 14px;
  letter-spacing:-.01em;color:var(--ink);max-width:32ch;line-height:1.24}
.prose h3{font-family:var(--display);font-size:18px;font-weight:600;margin:30px 0 11px;color:var(--ink)}
.prose ul,.prose ol{max-width:68ch;color:#C3CCE6;margin:0 0 19px;padding-left:22px}
.prose li{margin-bottom:11px;line-height:1.68}
.prose li p{margin:9px 0}
.prose blockquote{margin:0 0 20px;padding:2px 0 2px 18px;border-left:3px solid var(--blue);max-width:66ch}
.prose blockquote p{color:var(--ink);font-size:16px;margin:0 0 8px;font-style:italic}
.prose blockquote p:last-child{margin-bottom:0}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2.5px;
  text-decoration-color:rgba(7,148,252,.42)}
.prose a:hover{text-decoration-color:var(--blue)}
.prose b{color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose table{font-size:14px;margin:6px 0 24px}
.prose pre{margin:0 0 22px}
.prose code{font-size:.88em}

.postcta{margin:44px 0 0;padding:26px 26px 28px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(150deg,rgba(7,148,252,.09),rgba(91,46,242,.09))}
.postcta h3{font-family:var(--display);font-size:18px;font-weight:600;margin:0 0 10px;color:var(--ink)}
.postcta p{color:var(--mid);margin:0 0 15px;font-size:15px;max-width:62ch}
.postcta .btn{margin-right:9px}
.backlink{margin:30px 0 0;font-size:14px}
.backlink a{color:var(--mid);text-decoration:none}
.backlink a:hover{color:var(--ink)}
@media (max-width:700px){
  .prose{font-size:16px}
  .prose h2{font-size:21px}
  .postcta{padding:20px}
}

/* ───────── the thesis line and the four doors ───────── */
.thesis{font-size:18px;line-height:1.6;color:var(--ink);margin:0 0 20px;max-width:62ch;
  padding-left:16px;border-left:3px solid;border-image:var(--grad) 1}
.thesis b{font-weight:500}
.doorlead{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);
  margin:34px 0 14px;letter-spacing:-.005em}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px;margin:0 0 6px}
.door{display:flex;flex-direction:column;gap:7px;padding:16px 17px 15px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);text-decoration:none;
  transition:border-color .16s,transform .16s,background .16s}
.door:hover{border-color:var(--blue);transform:translateY(-2px);background:var(--panel2);
  text-decoration:none}
.door .dn{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.door .dd{font-size:13.5px;line-height:1.55;color:var(--mid);flex:1}
.door .dgo{font-size:12.5px;font-weight:600;color:var(--blue);letter-spacing:.01em}
@media (max-width:700px){ .thesis{font-size:16.5px} .doors{grid-template-columns:1fr} }

/* ───────── signing in ───────── */
.signin-btn{all:unset;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--mid);
  padding:8px 14px;border-radius:10px;border:1px solid var(--line);transition:.15s;white-space:nowrap}
.signin-btn:hover{color:var(--ink);border-color:var(--blue)}

.acct{position:relative}
.acct-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;
  border-radius:999px;border:1px solid var(--line);transition:.15s}
.acct-btn:hover{border-color:var(--blue)}
.acct-btn img{width:26px;height:26px;border-radius:50%;display:block}
.acct-btn .initial{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:600}
.acct-btn span:last-child{font-size:13.5px;color:var(--ink);max-width:12ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:224px;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.8)}
.acct-menu[hidden]{display:none}
.acct-who{padding:13px 15px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.acct-who b{font-size:13.5px;color:var(--ink)}
.acct-who span{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;padding:11px 15px;
  font-size:13.5px;color:var(--mid);text-decoration:none;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13.5px}
.acct-menu a:hover,.acct-menu button:hover{background:var(--panel2);color:var(--ink);text-decoration:none}
.acct-menu button{border-top:1px solid var(--line);color:var(--dim)}

/* the panel */
.tm-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(3,5,16,.76);backdrop-filter:blur(8px);overflow-y:auto}
.tm-modal[hidden]{display:none}
body.tm-modal-open{overflow:hidden}
.tm-card{position:relative;width:min(440px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:30px 28px 24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.tm-x{position:absolute;right:14px;top:12px;all:unset;cursor:pointer;font-size:22px;line-height:1;
  color:var(--dim);padding:6px 10px;border-radius:9px}
.tm-x:hover{color:var(--ink)}
.tm-card h2{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.015em;
  margin:0 0 18px;color:var(--ink);max-width:16ch;line-height:1.25}
ul.tm-reasons{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:13px}
ul.tm-reasons li{display:flex;flex-direction:column;gap:2px;padding-left:20px;position:relative}
ul.tm-reasons li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;
  border-radius:2px;background:var(--grad)}
ul.tm-reasons b{font-size:14px;color:var(--ink);font-weight:600;line-height:1.35}
ul.tm-reasons span{font-size:13px;color:var(--mid);line-height:1.5}
.tm-gbtn{display:flex;justify-content:center;min-height:44px}
.tm-fine{font-size:12.5px;color:var(--dim);margin:14px 0 0;text-align:center;line-height:1.5}
.tm-note{font-size:11.5px;color:var(--dim);margin:16px 0 0;text-align:center;line-height:1.55;
  padding-top:15px;border-top:1px solid var(--line)}
.tm-note a{color:var(--dim);text-decoration:underline}
.tm-note a:hover{color:var(--blue)}
@media (max-width:520px){ .tm-card{padding:26px 20px 20px} .tm-card h2{font-size:20px} }
/* On a phone the footer links take their own row: `flex:1` with a zero basis let them sit
   beside the wordmark in a column one word wide. */
@media (max-width:620px){ .docfoot nav{flex:1 1 100%;gap:10px 16px} }