/* ================= the reset the public pages never had =================
   app.css has had `* { box-sizing: border-box }` since the beginning. These
   stylesheets never did, and only two rules in this file opt in one field at a
   time. So anything at width 100% with padding overflows its container by
   exactly its padding plus its border, which is what made the columns of the
   brief's tables sit on top of one another (5.136.4).

   Added here rather than scoped to one page, because the fault is not in one
   page. It makes elements narrower, never wider, so where a layout was already
   correct it stays correct and where something was overflowing it stops.
   Board PLT-06. */
*, *::before, *::after { box-sizing: border-box; }

/* Public pages of the Revenue Autopilot: prices, audit, book, seminar, join. Enterprise Slate tokens. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans,system-ui,sans-serif);font-size:17px;line-height:1.55}
.pub-top{background:var(--card);border-bottom:1px solid var(--line)}
.pub-top-in{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px}
.pub-top img{height:30px}
.pub-top .brand-text{font-weight:700}
.pub-top .spacer{flex:1}
.pub-top a{color:var(--ink-dim);text-decoration:none;font-size:14px}
.pub-flag{display:inline-flex;padding:0;line-height:0;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(20,24,30,.15);opacity:.85}
.pub-flag:hover{opacity:1;box-shadow:0 0 0 1px var(--accent)}
.pub-hero{background:linear-gradient(180deg,#FFF6E8 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.pub-hero-in{max-width:1080px;margin:0 auto;padding:44px 20px 32px}
.pub-hero h1{font-size:36px;line-height:1.15;margin:0 0 10px;letter-spacing:-.01em}
.pub-hero p{font-size:18px;color:var(--ink-dim);margin:0;max-width:720px}
.pub-wrap{max-width:1080px;margin:0 auto;padding:28px 20px 56px}
.pub-note{font-size:14px;color:var(--ink-dim)}
.pub-err{background:#FDECEC;color:#B42318;border:1px solid #F5C2C0;border-radius:12px;padding:12px 14px;font-weight:600;margin:12px 0}
.pub-ok{background:#E7F4EC;color:#1F7A44;border:1px solid #CBE7D6;border-radius:12px;padding:14px;font-weight:600;margin:12px 0}
.pub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.pub-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(20,24,30,.04)}
.pub-card-head{padding:18px 20px 12px;border-top:4px solid var(--accent)}
.pub-card-head h2{margin:0 0 4px;font-size:21px}
.pub-card-head .sub{font-size:14px;color:var(--ink-dim)}
.pub-price{padding:6px 20px 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pub-price .amt{font-family:var(--font-mono);font-size:30px;font-weight:700;letter-spacing:-.02em}
.pub-price .per{color:var(--ink-dim);font-size:15px}
.pub-price .vat{font-size:13px;color:var(--ink-dim);width:100%}
.pub-inc{list-style:none;margin:0;padding:8px 20px 14px;flex:1}
.pub-inc li{padding:5px 0 5px 26px;position:relative;font-size:15px}
.pub-inc li::before{content:"";position:absolute;left:0;top:10px;width:16px;height:16px;border-radius:50%;background:#E7F4EC;border:1px solid #CBE7D6}
.pub-inc li::after{content:"";position:absolute;left:5px;top:13px;width:6px;height:9px;border:solid #1F7A44;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pub-buy{padding:14px 20px 20px;background:var(--well);border-top:1px solid var(--line)}
.pub-buy form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pub-buy input{box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:var(--card)}
.pub-buy button,.pub-btn{grid-column:1/-1;padding:13px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent,#1a1a1a);font:inherit;font-size:16px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;display:block}
.pub-buy button:hover,.pub-btn:hover{filter:brightness(.96)}
.pub-buy input[type=email]{grid-column:1/-1}
.pub-buy .sub{grid-column:1/-1;font-size:13px;color:var(--ink-dim);text-align:center}
.pub-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:32px 0 0}
.pub-trust div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px}
.pub-trust strong{display:block;font-size:16px;margin-bottom:2px}
.pub-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:760px}
.pub-form .row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.pub-form label.f{display:block;margin-top:14px;font-size:14px;color:var(--ink-dim)}
.pub-form input,.pub-form select,.pub-form textarea{box-sizing:border-box;width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;background:var(--card);color:var(--ink)}
.pub-form input:focus,.pub-form select:focus,.pub-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,146,9,.2)}
.pub-form .go{margin-top:18px;width:100%;padding:15px;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent,#1a1a1a);font:inherit;font-size:18px;font-weight:700;cursor:pointer}
.pub-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:6px}
.pub-choice{display:block;position:relative;padding:14px 14px 14px 16px;border:2px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.pub-choice input{position:absolute;opacity:0;pointer-events:none}
.pub-choice strong{display:block;font-size:15px}
.pub-choice span{display:block;font-size:13px;color:var(--ink-dim);margin-top:3px}
.pub-choice:has(input:checked){border-color:var(--accent);background:#FFF6E8}
.pub-two{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.pub-side{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.pub-side h3{margin:0 0 8px;font-size:18px}
.pub-side ul{margin:0;padding-left:18px;font-size:15px}
.pub-side li{margin:6px 0}
.hp{position:absolute;left:-9999px}
.pub-foot{max-width:1080px;margin:0 auto;padding:18px 20px 36px;font-size:13px;color:var(--ink-dim)}
@media(max-width:760px){.pub-hero h1{font-size:28px}.pub-two{grid-template-columns:1fr}.pub-form .row{grid-template-columns:1fr}.pub-buy form{grid-template-columns:1fr}}

/* The customer's own logo, on their questionnaire (logo step B, 2026-09-18).
   Here as well as in app.css because the customer's page loads this stylesheet and not that one: the first
   version of this styled it only in app.css and the box had no border and no spacing on the one page it is
   really for. The tokens themselves come from tokens.css, which both pages load. */
.bq-logo { margin-top: var(--sp-3); padding: var(--sp-4); border: 1px dashed var(--line); border-radius: var(--radius); }
.bq-logo-now { margin-bottom: var(--sp-3); }
.bq-logo-has { color: var(--accent-ink, var(--accent)); font-weight: 600; }
.bq-logo .pr-actions { margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* A message as it is shown keeps the line height of its own size (13 October 2026), as the email itself does. Georgios:
   "this fix should apply to every page that text is written". The customer's ticket page showed every message at the reading
   size's line height, so a ten pixel signature or disclaimer stood a full line apart here even when the email that
   went out did not. A line whose words carry a size takes the height the sent email gives that size (Mailer::lineFor),
   for every size a stored message may carry: pixels 8 to 32 and the usual small point sizes, written with or without
   the space after the colon (the editor writes one, the cleaner keeps a received message's as it came). Listed
   smallest first, so the largest on a line wins. A div or a cell that only wraps other blocks is a wrapper and is not
   given a line height of its own. editor_line_height_test.php holds these to Mailer::lineFor. */
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:8px"], [style*="font-size: 8px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:8px"], [style*="font-size: 8px"]) { line-height: 13px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:6pt"], [style*="font-size: 6pt"], [style*="font-size:6.0pt"], [style*="font-size: 6.0pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:6pt"], [style*="font-size: 6pt"], [style*="font-size:6.0pt"], [style*="font-size: 6.0pt"]) { line-height: 13px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:6.5pt"], [style*="font-size: 6.5pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:6.5pt"], [style*="font-size: 6.5pt"]) { line-height: 14px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:9px"], [style*="font-size: 9px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:9px"], [style*="font-size: 9px"]) { line-height: 14px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:7pt"], [style*="font-size: 7pt"], [style*="font-size:7.0pt"], [style*="font-size: 7.0pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:7pt"], [style*="font-size: 7pt"], [style*="font-size:7.0pt"], [style*="font-size: 7.0pt"]) { line-height: 14px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:10px"], [style*="font-size: 10px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:10px"], [style*="font-size: 10px"]) { line-height: 16px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:7.5pt"], [style*="font-size: 7.5pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:7.5pt"], [style*="font-size: 7.5pt"]) { line-height: 16px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:8pt"], [style*="font-size: 8pt"], [style*="font-size:8.0pt"], [style*="font-size: 8.0pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:8pt"], [style*="font-size: 8pt"], [style*="font-size:8.0pt"], [style*="font-size: 8.0pt"]) { line-height: 18px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:11px"], [style*="font-size: 11px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:11px"], [style*="font-size: 11px"]) { line-height: 18px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:8.5pt"], [style*="font-size: 8.5pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:8.5pt"], [style*="font-size: 8.5pt"]) { line-height: 18px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:12px"], [style*="font-size: 12px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:12px"], [style*="font-size: 12px"]) { line-height: 19px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:9pt"], [style*="font-size: 9pt"], [style*="font-size:9.0pt"], [style*="font-size: 9.0pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:9pt"], [style*="font-size: 9pt"], [style*="font-size:9.0pt"], [style*="font-size: 9.0pt"]) { line-height: 19px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:9.5pt"], [style*="font-size: 9.5pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:9.5pt"], [style*="font-size: 9.5pt"]) { line-height: 21px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:13px"], [style*="font-size: 13px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:13px"], [style*="font-size: 13px"]) { line-height: 21px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:10pt"], [style*="font-size: 10pt"], [style*="font-size:10.0pt"], [style*="font-size: 10.0pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:10pt"], [style*="font-size: 10pt"], [style*="font-size:10.0pt"], [style*="font-size: 10.0pt"]) { line-height: 21px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:14px"], [style*="font-size: 14px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:14px"], [style*="font-size: 14px"]) { line-height: 22px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:10.5pt"], [style*="font-size: 10.5pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:10.5pt"], [style*="font-size: 10.5pt"]) { line-height: 22px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:11pt"], [style*="font-size: 11pt"], [style*="font-size:11.0pt"], [style*="font-size: 11.0pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:11pt"], [style*="font-size: 11pt"], [style*="font-size:11.0pt"], [style*="font-size: 11.0pt"]) { line-height: 24px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:15px"], [style*="font-size: 15px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:15px"], [style*="font-size: 15px"]) { line-height: 24px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:11.5pt"], [style*="font-size: 11.5pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:11.5pt"], [style*="font-size: 11.5pt"]) { line-height: 24px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:16px"], [style*="font-size: 16px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:16px"], [style*="font-size: 16px"]) { line-height: 26px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:12pt"], [style*="font-size: 12pt"], [style*="font-size:12.0pt"], [style*="font-size: 12.0pt"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:12pt"], [style*="font-size: 12pt"], [style*="font-size:12.0pt"], [style*="font-size: 12.0pt"]) { line-height: 26px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:17px"], [style*="font-size: 17px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:17px"], [style*="font-size: 17px"]) { line-height: 27px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:18px"], [style*="font-size: 18px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:18px"], [style*="font-size: 18px"]) { line-height: 29px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:19px"], [style*="font-size: 19px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:19px"], [style*="font-size: 19px"]) { line-height: 30px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:20px"], [style*="font-size: 20px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:20px"], [style*="font-size: 20px"]) { line-height: 32px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:21px"], [style*="font-size: 21px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:21px"], [style*="font-size: 21px"]) { line-height: 34px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:22px"], [style*="font-size: 22px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:22px"], [style*="font-size: 22px"]) { line-height: 35px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:23px"], [style*="font-size: 23px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:23px"], [style*="font-size: 23px"]) { line-height: 37px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:24px"], [style*="font-size: 24px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:24px"], [style*="font-size: 24px"]) { line-height: 38px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:25px"], [style*="font-size: 25px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:25px"], [style*="font-size: 25px"]) { line-height: 40px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:26px"], [style*="font-size: 26px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:26px"], [style*="font-size: 26px"]) { line-height: 42px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:27px"], [style*="font-size: 27px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:27px"], [style*="font-size: 27px"]) { line-height: 43px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:28px"], [style*="font-size: 28px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:28px"], [style*="font-size: 28px"]) { line-height: 45px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:29px"], [style*="font-size: 29px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:29px"], [style*="font-size: 29px"]) { line-height: 46px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:30px"], [style*="font-size: 30px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:30px"], [style*="font-size: 30px"]) { line-height: 48px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:31px"], [style*="font-size: 31px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:31px"], [style*="font-size: 31px"]) { line-height: 50px; }
.msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):is([style*="font-size:32px"], [style*="font-size: 32px"]), .msg-body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td:not(:has(p, div, li, table)), th, div:not(:has(p, div, li, table, blockquote))):has([style*="font-size:32px"], [style*="font-size: 32px"]) { line-height: 51px; }

/* Line spacing (18 October 2026): a blank line in a message is half a line of its own size. line_spacing_test.php. */
.msg-body p:has(> br:only-child) { font-size: 50%; }

/* ---- Booking pages (5.464.0) ------------------------------------------------------------------------------------
   The public booking pages: a person's page /meet/{page} (M1), a meeting type /meet/{page}/{type} with its month,
   times and form (M2 to M4, and the same page moving a booking), a booking /meet/booking/{token} (M5, M6) and the one
   page for every wrong address. DOCS/booking/mockups.html is the drawing. Every class starts mt-, never mt-list,
   mt-item, mt-check, mt-bar or mt-prog (ixxo-site.css has those) nor mt- and a digit (app.css spacing). Colours come
   from the tokens only; the accent marks what is pressed, chosen or focused. One width for phones: 720px. */
.mt-main { background: var(--bg-alt); padding: 40px 16px 56px; color: var(--slate-700); }
.mt-main [hidden] { display: none !important; }
.mt-main svg.icon { flex: none; }
.mt-c1 { --mt-mc: var(--tone-1-ink); } .mt-c2 { --mt-mc: var(--tone-2-ink); } .mt-c3 { --mt-mc: var(--tone-3-ink); }
.mt-c4 { --mt-mc: var(--tone-4-ink); } .mt-c5 { --mt-mc: var(--tone-5-ink); } .mt-c6 { --mt-mc: var(--tone-6-ink); }
.mt-c7 { --mt-mc: var(--warn); } .mt-c8 { --mt-mc: var(--gray-600); }
.mt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mt-muted { color: var(--slate-500); }
.mt-av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy-800); color: var(--white); font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .02em; flex: none; }
.mt-av-lg { width: 72px; height: 72px; font-size: 24px; }

/* M1, the landing page: one card per meeting type, two columns, a last card alone takes the row. */
.mt-landing { max-width: 960px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.mt-lp-head { text-align: center; padding: 30px 40px 24px; border-bottom: 1px solid var(--border); }
.mt-lp-head .mt-av { margin: 0 auto 14px; }
.mt-lp-head h1 { font-size: 1.75rem; overflow-wrap: anywhere; }
.mt-lp-head p { max-width: 58ch; margin: 8px auto 0; color: var(--slate-500); font-size: 1rem; }
.mt-lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 26px 32px 32px; }
.mt-empty { padding: 28px 32px 32px; text-align: center; color: var(--slate-500); }
.mt-type { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-top: 4px solid var(--mt-mc, var(--border-strong)); border-radius: var(--radius-lg); background: var(--card); color: inherit; text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.mt-type:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); border-top-color: var(--mt-mc, var(--border-strong)); }
.mt-type:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.mt-type-wide { grid-column: 1 / -1; }
.mt-type-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt-type-name { font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.mt-type-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .875rem; color: var(--slate-500); }
.mt-type-meta svg.icon { width: 15px; height: 15px; }
.mt-sep { width: 3px; height: 3px; margin: 0 3px; border-radius: 50%; background: var(--slate-400); flex: none; }
.mt-type-desc { font-size: .875rem; color: var(--slate-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-type-go { width: 20px; height: 20px; color: var(--slate-400); }

/* M2 to M6, the card: the meeting on the left, the month, the times or the form on the right. 900px for the month,
   1060px once a day shows its times, 1000px for the form and for a booking. */
.mt-book { display: flex; width: 100%; max-width: 900px; min-height: 560px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.mt-book.mt-wide { max-width: 1060px; }
.mt-book[data-step="form"], .mt-book.mt-manage { max-width: 1000px; }
.mt-book.mt-manage { min-height: 0; }
.mt-left { width: 340px; flex: none; min-width: 0; padding: 24px 28px 28px; border-right: 1px solid var(--border); }
.mt-back { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--card); color: var(--navy-700); cursor: pointer; }
.mt-back:hover { background: var(--bg-alt); }
.mt-back svg.icon { width: 18px; height: 18px; }
.mt-host { margin-top: 14px; font-size: .95rem; font-weight: 600; color: var(--slate-500); overflow-wrap: anywhere; }
.mt-title { margin-top: 2px; font-size: 1.6rem; overflow-wrap: anywhere; }
.mt-facts { margin-top: 18px; display: grid; gap: 12px; }
.mt-fact { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: .95rem; font-weight: 600; line-height: 1.4; color: var(--slate-700); }
.mt-fact > span { min-width: 0; overflow-wrap: anywhere; }
.mt-fact svg.icon { width: 20px; height: 20px; color: var(--slate-500); }
.mt-fact small { display: block; margin-top: 1px; font-weight: 400; font-size: .85rem; color: var(--slate-500); }
.mt-fact-on { color: var(--ink); }
.mt-fact-on svg.icon { color: var(--accent-dark); }
.mt-struck > span, .mt-struck small { text-decoration: line-through; color: var(--slate-400); }
.mt-former s { color: var(--slate-400); }
.mt-hint { margin-top: -4px; padding-left: 30px; font-size: .85rem; color: var(--slate-500); }
.mt-desc { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .95rem; line-height: 1.6; color: var(--slate-700); overflow-wrap: anywhere; }
.mt-desc p + p, .mt-desc ul, .mt-desc ol { margin-top: 8px; }
.mt-desc ul, .mt-desc ol { padding-left: 20px; }
.mt-desc a { color: var(--accent-dark); text-decoration: underline; }
.mt-right { flex: 1; min-width: 0; padding: 26px 32px 30px; }
.mt-right h2 { margin-bottom: 18px; font-size: 1.25rem; }
.mt-right h2[tabindex="-1"]:focus { outline: none; }
.mt-split { display: flex; align-items: flex-start; gap: 28px; }
.mt-calcol { width: 400px; max-width: 100%; flex: none; }
.mt-alert { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--danger); border-radius: var(--radius); background: var(--danger-wash); color: var(--danger); font-size: .9rem; font-weight: 600; }
.mt-alert:focus { outline: none; }

/* the month: free days washed, the chosen one solid, a dot under today */
.mt-cal { min-height: 330px; }
.mt-cal > .mt-muted { padding: 24px 0; text-align: center; }
.mt-cal-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; }
.mt-cal-month { min-width: 150px; text-align: center; font-size: 1rem; font-weight: 500; color: var(--ink); }
.mt-cal-nav { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); cursor: pointer; }
.mt-cal-nav:disabled { background: transparent; color: var(--border-strong); cursor: default; }
.mt-cal-nav svg.icon { width: 18px; height: 18px; }
.mt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; }
.mt-cal-wd { padding: 4px 0 6px; text-align: center; font-size: .7rem; font-weight: 600; letter-spacing: .08em; color: var(--slate-500); }
.mt-cal-d { position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; font: inherit; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--slate-400); cursor: default; }
.mt-cal-d.mt-free { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; cursor: pointer; }
.mt-cal-d.mt-free:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.mt-cal-d.mt-sel { background: var(--accent); color: var(--on-accent); }
.mt-cal-d.mt-today::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.mt-cal-blank { visibility: hidden; }
.mt-cal-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 12px; text-align: center; font-size: .9rem; }

/* a list you type into: the time zone, a dropdown question, a phone's country code (M2b) */
.mt-tz { margin-top: 20px; }
.mt-tz-l { margin-bottom: 6px; font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--ink); }
.mt-combo { position: relative; min-width: 0; }
.mt-combo-box { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card); font: inherit; font-size: .9rem; color: var(--ink); text-align: left; cursor: pointer; }
.mt-combo-box svg.icon { width: 16px; height: 16px; color: var(--slate-500); }
.mt-combo-box.mt-open { border-color: var(--accent); box-shadow: var(--ring); cursor: text; }
.mt-combo-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-combo-val.mt-muted { color: var(--slate-400); }
.mt-combo-side { color: var(--slate-500); font-variant-numeric: tabular-nums; }
.mt-combo-in { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; font: inherit; color: var(--ink); }
.mt-combo-in:focus, .mt-combo-in:focus-visible { outline: none; }
.mt-combo-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.mt-combo-grp { padding: 8px 12px 4px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); }
.mt-combo-it { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 35px; font-size: .875rem; color: var(--ink); cursor: pointer; }
.mt-combo-it svg.icon { width: 15px; height: 15px; margin-left: -23px; color: var(--accent-dark); }
.mt-combo-it.mt-sel { font-weight: 600; }
.mt-combo-it.mt-act { background: var(--accent-soft); }
.mt-combo-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mt-combo-t { margin-left: auto; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.mt-combo-none { padding: 10px 12px; font-size: .875rem; color: var(--slate-500); }
.mt-combo-box.mt-tz-locked { min-height: 42px; padding: 9px 12px; background: var(--bg-alt); cursor: default; }
.mt-tz-locked .mt-combo-val { white-space: normal; }

/* M3, the times of the chosen day: a pressed time splits into itself and Next */
.mt-times { width: 228px; flex: none; }
.mt-times-day { display: flex; align-items: center; min-height: 38px; margin-bottom: 10px; font-size: 1rem; font-weight: 500; color: var(--ink); }
.mt-tlist { display: grid; gap: 10px; max-height: 440px; margin: -4px; padding: 4px; overflow-y: auto; }
.mt-tbtn { display: grid; place-items: center; width: 100%; height: 50px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card); font: inherit; font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.mt-tbtn:hover { border-color: var(--navy-700); }
.mt-tsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-tbtn-on, .mt-tbtn-on:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.mt-tnext { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mt-tnext:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.mt-tnext:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }

/* M4, the form */
.mt-form { max-width: 600px; }
.mt-chosen { display: none; }
.mt-fields { display: grid; gap: 16px; }
.mt-field { min-width: 0; }
.mt-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.mt-fs > legend { padding: 0; }
.mt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mt-l { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; color: var(--ink); }
.mt-l-opt { font-weight: 400; color: var(--slate-500); }
.mt-req { margin-left: 2px; color: var(--danger); }
.mt-in { display: block; width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card); font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ink); }
textarea.mt-in { min-height: 84px; line-height: 1.5; resize: vertical; }
.mt-in::placeholder { color: var(--slate-400); }
.mt-in:focus, .mt-in:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.mt-in[aria-invalid="true"] { border-color: var(--danger); }
.mt-ferr { margin-top: 6px; font-size: .85rem; font-weight: 600; color: var(--danger); }
.mt-field .mt-combo-box { min-height: 44px; font-size: 1rem; }
.mt-opts { display: grid; gap: 8px; }
.mt-opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card); cursor: pointer; }
.mt-opt.mt-on { border-color: var(--accent); background: var(--accent-tint); }
.mt-opt:has(:focus-visible) { box-shadow: var(--ring); }
.mt-opt > svg.icon { width: 18px; height: 18px; color: var(--slate-500); }
.mt-opt b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.35; color: var(--ink); }
.mt-opt small { display: block; font-size: .85rem; line-height: 1.35; color: var(--slate-500); }
.mt-rd, .mt-tick { -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0; flex: none; border: 1.5px solid var(--border-strong); background: var(--card); cursor: pointer; }
.mt-rd { border-radius: 50%; }
.mt-rd:checked { border: 5px solid var(--accent); }
.mt-tick { border-radius: 3px; }
.mt-tick:checked { background: var(--accent); border-color: var(--accent); }
.mt-tick:checked::after { content: ""; width: 5px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.mt-rd:focus-visible, .mt-tick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-choices { display: grid; gap: 8px; }
.mt-choice { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--slate-700); cursor: pointer; }
.mt-phone { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.mt-phone .mt-combo-pop { right: auto; width: 300px; max-width: 80vw; }
.mt-foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; }

/* buttons and links */
.mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 20px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-family: var(--body); font-weight: 600; font-size: .875rem; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; }
.mt-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.mt-btn:disabled { opacity: .6; cursor: default; }
.mt-btn svg.icon { width: 17px; height: 17px; }
.mt-btn-lg { padding: 14px 26px; font-size: 1rem; }
.mt-btn-out { background: var(--card); border-color: var(--border-strong); color: var(--ink); }
.mt-btn-out:hover { background: var(--bg-alt); border-color: var(--navy-700); color: var(--ink); }
.mt-btn-x, .mt-btn-danger { background: var(--card); border-color: var(--danger); color: var(--danger); }
.mt-btn-x:hover, .mt-btn-danger:hover { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }
.mt-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: .95rem; color: var(--accent-dark); text-decoration: none; cursor: pointer; }
.mt-link:hover { text-decoration: underline; }
.mt-link svg.icon { width: 16px; height: 16px; }

/* M5, the confirmation, and the page for a wrong address */
.mt-done { max-width: 680px; margin: 0 auto; padding: 34px 44px 30px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: center; }
.mt-ok { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--c-green-bg); color: var(--success); }
.mt-ok svg.icon { width: 30px; height: 30px; }
.mt-done h1 { font-size: 1.75rem; }
.mt-lead { margin-top: 8px; font-size: 1rem; color: var(--slate-500); overflow-wrap: anywhere; }
.mt-sum { display: grid; gap: 12px; max-width: 520px; margin: 22px auto 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: left; }
.mt-sum-t { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--ink); overflow-wrap: anywhere; }
.mt-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--mt-mc, var(--slate-400)); flex: none; }
.mt-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 20px; }
.mt-gone { padding: 44px 44px 40px; }

/* M6, the manage page and its Cancel box */
.mt-state-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 6px; }
.mt-right .mt-state-row h2 { margin: 0; }
.mt-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; background: var(--c-green-bg); color: var(--success); font-size: .8rem; font-weight: 700; }
.mt-state svg.icon { width: 13px; height: 13px; }
.mt-p { font-size: .95rem; color: var(--slate-500); }
.mt-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mt-cancel { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-alt); }
.mt-right .mt-cancel h3 { margin-bottom: 12px; font-size: 1.05rem; }
.mt-cancel .mt-alert { margin: 12px 0 0; }
.mt-cancel-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; }
.mt-said { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--border-strong); background: var(--bg-alt); font-size: .95rem; }
.mt-said b { display: block; margin-bottom: 4px; color: var(--ink); }

/* Step 2 (5.465.0): the lengths to choose from, the guests, the code by email, the cancellation policy, and the links
   of a confirmation. The chosen length is the selection, so it takes the accent; once a time is chosen only it stays. */
.mt-durs { margin: 0; padding: 0; border: 0; }
.mt-dur-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-dur { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 14px; border: 1px solid var(--border-strong); border-radius: 17px; background: var(--card); font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.mt-dur input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.mt-dur:hover { border-color: var(--navy-700); }
.mt-dur.mt-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mt-dur:has(:focus-visible) { box-shadow: var(--ring); }
.mt-book[data-step="form"] .mt-dur:not(.mt-on), .mt-book[data-step="verify"] .mt-dur:not(.mt-on) { display: none; }
.mt-book[data-step="form"] .mt-dur.mt-on, .mt-book[data-step="verify"] .mt-dur.mt-on { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--slate-700); font-size: .95rem; cursor: default; }
.mt-fhint { margin-top: 6px; font-size: .85rem; color: var(--slate-500); }
.mt-guests-add { justify-self: start; }
.mt-book[data-step="verify"] { max-width: 1000px; }
.mt-verify { max-width: 520px; }
.mt-verify .mt-p { margin: -8px 0 18px; overflow-wrap: anywhere; }
.mt-code { max-width: 220px; font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: .3em; text-align: center; }
.mt-verify .mt-alert, .mt-note { margin: 14px 0 0; }
.mt-note { padding: 10px 12px; border: 1px solid var(--c-green-bd, var(--border)); border-radius: var(--radius); background: var(--c-green-bg); color: var(--success); font-size: .9rem; font-weight: 600; }
.mt-verify-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 20px; }
.mt-policy { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--border-strong); background: var(--bg-alt); font-size: .9rem; color: var(--slate-700); overflow-wrap: anywhere; }
.mt-policy b { display: block; margin-bottom: 4px; color: var(--ink); }
.mt-next { display: grid; gap: 10px; max-width: 520px; margin: 18px auto 0; }
.mt-next .mt-btn { justify-content: flex-start; white-space: normal; text-align: left; }
.mt-next .mt-btn span { min-width: 0; overflow-wrap: anywhere; }

/* phones: the meeting as a compact head over the month, the times under it, the form at full width */
@media (max-width: 720px) {
  .mt-main { padding: 12px 12px 20px; }
  .mt-lp-head { padding: 20px 16px 16px; }
  .mt-lp-head .mt-av { margin-bottom: 10px; }
  .mt-lp-head h1 { font-size: 1.35rem; }
  .mt-lp-head p { margin-top: 6px; font-size: .92rem; }
  .mt-lp-grid { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .mt-type { padding: 12px 14px; }
  .mt-type-name { font-size: 1rem; }
  .mt-book, .mt-book.mt-wide, .mt-book[data-step="form"], .mt-book.mt-manage { display: block; max-width: none; min-height: 0; box-shadow: var(--shadow-sm); }
  .mt-left { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; width: auto; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
  .mt-left > .mt-back, .mt-left > .mt-av { grid-column: 1; grid-row: 1 / span 4; }
  .mt-left > .mt-host, .mt-left > .mt-title, .mt-left > .mt-facts, .mt-left > .mt-desc { grid-column: 2; }
  .mt-left > .mt-back-link { display: none; }
  .mt-back { width: 34px; height: 34px; margin: 0; }
  .mt-av { width: 40px; height: 40px; font-size: 14px; }
  .mt-book[data-step="form"] .mt-left > .mt-av { display: none; }
  .mt-host { margin-top: 0; font-size: .85rem; line-height: 1.3; }
  .mt-title { margin-top: 1px; font-size: 1.2rem; }
  .mt-book:not(.mt-manage) .mt-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
  .mt-book:not(.mt-manage) .mt-fact { align-items: center; gap: 5px; font-size: .85rem; }
  .mt-book:not(.mt-manage) .mt-fact svg.icon { width: 15px; height: 15px; }
  .mt-book:not(.mt-manage) .mt-fact small, .mt-chosen-fact, .mt-zone-fact, .mt-hint { display: none; }
  .mt-book:not(.mt-manage) .mt-former small { display: inline; margin-left: 4px; }
  .mt-manage .mt-facts { gap: 10px; margin-top: 10px; }
  .mt-manage .mt-fact { font-size: .9rem; }
  .mt-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; padding-top: 8px; font-size: .9rem; cursor: pointer; }
  .mt-desc.mt-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .mt-book[data-step="form"] .mt-place, .mt-book[data-step="form"] .mt-desc { display: none; }
  .mt-right { padding: 14px 16px 18px; }
  .mt-right h2 { margin-bottom: 10px; font-size: 1.05rem; }
  .mt-form > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .mt-split { display: block; }
  .mt-calcol { width: auto; }
  .mt-cal { min-height: 0; }
  .mt-cal-head { margin-bottom: 6px; }
  .mt-cal-month { min-width: 0; }
  .mt-cal-d { width: 40px; height: 40px; font-size: .9rem; }
  .mt-times { width: auto; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); scroll-margin-top: 12px; }
  .mt-tlist { max-height: none; overflow: visible; }
  .mt-tbtn { height: 48px; }
  .mt-chosen { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--accent-soft); border-radius: var(--radius); background: var(--accent-tint); font-size: .9rem; font-weight: 600; color: var(--ink); }
  .mt-chosen svg.icon { width: 18px; height: 18px; color: var(--accent-dark); }
  .mt-chosen small { display: block; font-weight: 400; font-size: .8rem; color: var(--slate-500); }
  .mt-fields { gap: 14px; }
  .mt-row2 { gap: 10px; }
  .mt-foot { margin-top: 14px; }
  .mt-foot .mt-btn-lg { width: 100%; }
  .mt-done { padding: 24px 18px 22px; }
  .mt-done h1 { font-size: 1.4rem; }
  .mt-sum { padding: 14px 16px; }
  .mt-gone { padding: 32px 18px 28px; }
  .mt-book:not(.mt-manage) .mt-durs { flex-basis: 100%; }
  .mt-dur { min-height: 32px; padding: 4px 12px; font-size: .85rem; }
  .mt-book[data-step="verify"] { display: block; max-width: none; min-height: 0; }
  .mt-book[data-step="verify"] .mt-left > .mt-av, .mt-book[data-step="verify"] .mt-place, .mt-book[data-step="verify"] .mt-desc { display: none; }
  .mt-verify .mt-btn-lg { width: 100%; }
  .mt-code { max-width: none; }
}

/* ---- Booking step 6, a meeting poll (/meet/poll/{token}, meet/poll.php; Calendly F025) ----------------------------
   The booking card's two columns (.mt-book.mt-manage); on the right one block per proposed time with Yes, If needed and
   No as three pills, the accent on the one chosen; the counts and names under them when the host shows the votes. */
.mt-poll-form { max-width: 640px; }
.mt-poll-zone, .mt-poll-final { display: flex; align-items: center; gap: 6px; }
.mt-poll-zone svg.icon, .mt-poll-final svg.icon { width: 16px; height: 16px; color: var(--slate-500); }
.mt-pt-list { display: grid; gap: 10px; margin: 16px 0 22px; }
.mt-pt { min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.mt-pt-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0; margin-bottom: 10px; }
.mt-pt-day { font-weight: 600; font-size: .95rem; color: var(--ink); }
.mt-pt-time { font-size: .95rem; color: var(--slate-700); }
.mt-pt-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-pt-opt { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--card); font-size: .9rem; font-weight: 600; color: var(--slate-700); cursor: pointer; }
.mt-pt-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mt-pt-opt:has(input:focus-visible) { box-shadow: var(--ring); }
.mt-pt-opt.mt-on, .mt-pt-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.mt-pt-no.mt-on, .mt-pt-no:has(input:checked) { border-color: var(--border-strong); background: var(--bg-alt); color: var(--slate-500); }
.mt-pt-votes { margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--slate-500); }
.mt-pt-votes small { display: block; margin-top: 2px; font-weight: 400; overflow-wrap: anywhere; }
.mt-right h2.mt-poll-h { margin-top: 6px; }
.mt-poll-final { margin-top: 14px; font-size: .85rem; }
.mt-poll-done, .mt-poll-closed { padding: 20px 0; text-align: center; }
.mt-poll-done:focus { outline: none; }
.mt-poll-closed h2, .mt-poll-done h2 { margin-bottom: 8px; }
@media (max-width: 720px) {
  .mt-poll-form > h2 { position: static; width: auto; height: auto; margin: 0 0 8px; overflow: visible; clip: auto; white-space: normal; }
  .mt-pt { padding: 10px 12px; }
  .mt-pt-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt-pt-opt { justify-content: center; padding: 8px 6px; text-align: center; }
  .mt-poll .mt-row2 { grid-template-columns: 1fr; }
}

/* Step 3: teams and company links (5.466.0, DOCS/BOOKING-PLAN-STEP3.md): the faces of several hosts in the place of the
   one avatar (meet/_hosts.php), a team's members on its landing page (meet/_team.php), and the visitor's own busy
   times among the start times (meet-teams.js), still bookable. From the tokens only, as the rules above. */
.mt-face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-800); color: var(--white); font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .02em; flex: none; }
.mt-faces { display: flex; align-items: center; }
.mt-faces .mt-face { border: 2px solid var(--card); }
.mt-faces .mt-face + .mt-face { margin-left: -10px; }
.mt-face-more { background: var(--bg-alt); color: var(--slate-700); font-family: inherit; font-size: 12px; }
.mt-team { margin-top: 18px; }
.mt-team-h { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); }
.mt-team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.mt-team-row .mt-face { width: 36px; height: 36px; font-size: 13px; cursor: default; }
.mt-busy-hint { margin: -2px 0 10px; font-size: .85rem; color: var(--slate-500); }
.mt-tbtn.mt-tbusy { align-content: center; gap: 1px; line-height: 1.15; border-style: dashed; color: var(--slate-500); }
.mt-tbtn.mt-tbusy:hover { border-style: solid; }
.mt-tbtn-on.mt-tbusy { color: var(--white); border-style: solid; }
.mt-tbusy-lab { font-size: .72rem; font-weight: 500; color: var(--warn); }
.mt-tbtn-on .mt-tbusy-lab { color: inherit; }

@media (max-width: 720px) {
  .mt-left > .mt-faces { grid-column: 1; grid-row: 1 / span 4; }
  .mt-left > .mt-faces .mt-face { width: 32px; height: 32px; font-size: 12px; }
  .mt-left > .mt-faces .mt-face:nth-child(n+3) { display: none; }
  .mt-book[data-step="form"] .mt-left > .mt-faces { display: none; }
  .mt-left:not(:has(> .mt-av, > .mt-faces, > .mt-back-form:not([hidden]))) { column-gap: 0; }
  .mt-team { margin-top: 12px; }
  .mt-team-row .mt-face { width: 32px; height: 32px; font-size: 12px; }
}

/* Step 8 joined with step 6: a paid type on a booking page inside another site (meet/pay.php drawn for a frame,
   meet.js payInFrame). The Pay button under the facts, then the line that says the payment is waited for, its icon
   turning unless the visitor asked for less motion. From the tokens only. */
.mt-pay-acts { margin-top: 20px; }
.mt-pay-wait { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: .9rem; color: var(--slate-500); }
.mt-pay-wait svg.icon { width: 16px; height: 16px; animation: mt-turn 1.2s linear infinite; }
@keyframes mt-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mt-pay-wait svg.icon { animation: none; }
}
@media (max-width: 720px) {
  .mt-pay-acts .mt-btn-lg { width: 100%; }
}