/* TicketDM marketing site, shared stylesheet (v2). Served immutable: bump the filename when you change it.

   Visual system: Onest (300/400/500/600/700/800) + JetBrains Mono from Google Fonts (<link> in each page head),
   white ground, ink #121212, muted #555B66, hairlines #E6E6E6, input borders #D9D9D9, soft fill #F3F3F3,
   accent #2F5BFF, yellow #FFD84D only for the homepage highlighter and progress fills. No shadows on cards,
   no gradients, no coloured left borders, no emoji.

   CLASS INDEX (what other pages reuse)
   Chrome       .tdm-skip  .tdm-wrap  header > .tdm-wrap > .tdm-nav > .tdm-logo + .tdm-navlinks (.tdm-link, .tdm-hide-sm,
                .tdm-btn.tdm-btn-dark; current page: aria-current="page")  footer > .tdm-wrap > .tdm-foot
                (.tdm-logo, .tdm-flinks > .tdm-flink, .tdm-eu)   Copy the header/footer markup from index.html.
   Buttons      .tdm-btn + .tdm-btn-accent | .tdm-btn-dark | .tdm-btn-ghost ; size .tdm-btn-big ; row .tdm-cta
   Type         .tdm-h1 (.tdm-h1-md for inner pages)  .tdm-h2  .tdm-h3  .tdm-sub  .tdm-fineprint  .eyebrow  .lede  .meta
   Sections     .tdm-secin (hairline + padding)  .tdm-pagehead (inner-page title block)  .tdm-narrow  .tdm-cols  .tdm-center
   Long-form    .prose (headings, lists, links, inline code, pre, blockquote, hr, kbd, img)  .callout  .table-scroll
                (wrap every <table>)  .page-next
   Docs layout  .doc-layout > nav.doc-nav (h2 + ul > li > a, aria-current="page") + article.prose ; the nav stacks
                above the article as wrapped pills at <= 860px
   FAQ          .faq > details > summary + div
   Pricing      .plans > .plan (.main) with .tag .price ul ; buttons inside use .tdm-btn
*/

:root {
  --ink: #121212;
  --muted: #555B66;
  --line: #E6E6E6;
  --line-input: #D9D9D9;
  --ground-alt: #FAFAFA;
  --fill: #F3F3F3;
  --accent: #2F5BFF;
  --accent-soft: #EEF2FF;
  --yellow: #FFD84D;
  --ok: #0F7A47;
  --ok-soft: #E3F5EA;
  --warn: #8F5500;
  --warn-soft: #FFF3D1;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --font: 'Onest', 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, p, ol, ul, pre, figure, blockquote, dl, dd) { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

.tdm-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px;
  background: var(--ink); color: #FFFFFF; border-radius: 10px; font-weight: 700; font-size: 16px;
}
.tdm-skip:focus { left: 8px; }

.tdm-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 479px) {
  .tdm-wrap { padding-inline: 16px; }
}

/* ---------- nav ---------- */
.tdm-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 88px; }
.tdm-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none; }
.tdm-logo img { display: block; width: 36px; height: 36px; }
.tdm-wordmark { font-weight: 800; font-size: 22px; letter-spacing: -0.04em; line-height: 1; }
.tdm-navlinks { display: flex; align-items: center; gap: 4px; }
.tdm-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 16px; font-weight: 500; border-radius: 10px; white-space: nowrap;
  transition: background-color 220ms ease-out;
}
.tdm-link:hover { background: var(--fill); }
.tdm-link[aria-current="page"] { background: var(--fill); font-weight: 700; }
.tdm-navlinks .tdm-btn { margin-left: 8px; }
@media (max-width: 560px) {
  .tdm-hide-sm { display: none; }
}
@media (max-width: 400px) {
  .tdm-nav { gap: 8px; }
  .tdm-logo { gap: 8px; }
  .tdm-logo img { width: 32px; height: 32px; }
  .tdm-wordmark { font-size: 20px; }
  .tdm-link { padding: 0 10px; }
  .tdm-navlinks .tdm-btn { margin-left: 4px; padding: 0 16px; }
}
@media (max-width: 349px) {
  /* Very small phones: "Start free" goes to the same sign-in page, and the footer keeps a Sign in link. */
  .tdm-navlinks .tdm-link { display: none; }
}

/* ---------- buttons ---------- */
.tdm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 12px;
  font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1;
  color: #FFFFFF; border: 0; cursor: pointer; white-space: nowrap;
  transition: filter 220ms ease-out, transform 220ms ease-out, background-color 220ms ease-out;
}
.tdm-btn:hover { filter: brightness(0.92); }
.tdm-btn:active { transform: translateY(1px); }
.tdm-btn-accent { background: var(--accent); }
.tdm-btn-dark { background: var(--ink); }
.tdm-btn-dark:hover { filter: brightness(1.5); }
.tdm-btn-ghost { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line-input); }
.tdm-btn-ghost:hover { background: var(--fill); filter: none; }
.tdm-btn-big { min-height: 56px; padding: 0 34px; font-size: 19px; }
.tdm-cta { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- hero ---------- */
.tdm-hero { text-align: center; padding: 40px 0 56px; }
.tdm-h1 {
  font-weight: 800;
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -0.035em;
  line-height: 1.0;
  text-wrap: balance;
}
.tdm-h1-md { font-size: clamp(36px, 5.2vw, 64px); }
.tdm-ln { display: block; white-space: nowrap; }
.tdm-hl { position: relative; display: inline-block; z-index: 0; padding: 0 0.04em; }
.tdm-hl::before {
  content: '';
  position: absolute; z-index: -1;
  left: -0.1em; right: -0.12em; top: 0.32em; bottom: 0.02em;
  background: var(--yellow);
  transform: skewX(-8deg) rotate(-0.8deg);
  transform-origin: 0 100%;
  animation: tdm-swipe 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 350ms both;
}
@keyframes tdm-swipe {
  from { transform: skewX(-8deg) rotate(-0.8deg) scaleX(0); }
  to { transform: skewX(-8deg) rotate(-0.8deg) scaleX(1); }
}
.tdm-sub { max-width: 52ch; margin: 28px auto 0; color: var(--muted); text-wrap: balance; }
.tdm-fineprint { margin-top: 14px; font-size: 16px; color: var(--muted); }

/* ---------- stage (cqw-scaled hero animation) ---------- */
.tdm-stagewrap { max-width: 1100px; margin: 0 auto; }
.tdm-stage {
  position: relative; width: 100%; max-width: 1100px; margin: 0 auto;
  aspect-ratio: 1100 / 500; container-type: inline-size;
  --u: 1cqw; /* the stage's design unit; phone layout overrides it per component */
}

.tdm-browser {
  position: absolute; left: 0; top: 3%; width: 58%; height: 94%; z-index: 1;
  background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: calc(1.4 * var(--u));
  box-shadow: 0 calc(1.4 * var(--u)) calc(3.6 * var(--u)) rgba(18, 18, 18, 0.08);
  overflow: hidden; display: flex; flex-direction: column;
}
.tdm-chrome {
  flex: none; height: calc(4.4 * var(--u)); display: flex; align-items: center; gap: calc(0.7 * var(--u));
  padding: 0 calc(1.4 * var(--u)); background: #FAFAFA; border-bottom: 1px solid #E6E6E6;
}
.tdm-dot { display: block; width: calc(0.9 * var(--u)); height: calc(0.9 * var(--u)); border-radius: 50%; background: #D4D4D4; }
.tdm-url {
  margin-left: calc(1.2 * var(--u)); flex: 0 1 46%; height: calc(2.6 * var(--u)); border-radius: calc(1.3 * var(--u));
  background: #EFEFEF; color: #555B66; font-size: calc(1.2 * var(--u)); font-weight: 500;
  display: flex; align-items: center; padding: 0 calc(1.2 * var(--u)); line-height: 1;
}
.tdm-content { position: relative; flex: 1; background: #FFFFFF; }

/* faux product page: neutral blocks */
.tdm-fp-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 11%; border-bottom: 1px solid #EFEFEF;
  display: flex; align-items: center; justify-content: space-between; padding: 0 5%;
}
.tdm-fp-brand { display: flex; align-items: center; gap: calc(0.8 * var(--u)); }
.tdm-fp-logo { display: block; width: calc(1.7 * var(--u)); height: calc(1.7 * var(--u)); background: #121212; border-radius: calc(0.4 * var(--u)); }
.tdm-fp-name { font-size: calc(1.4 * var(--u)); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.tdm-fp-links { display: flex; gap: calc(1.6 * var(--u)); }
.tdm-fp-link { display: block; width: calc(4.4 * var(--u)); height: calc(0.8 * var(--u)); background: #E6E6E6; border-radius: calc(0.4 * var(--u)); }
.tdm-fp-img { position: absolute; left: 5%; top: 19%; width: 30%; height: 62%; background: #EFEFEF; border-radius: calc(0.8 * var(--u)); }
.tdm-fp-img span { position: absolute; left: 25%; top: 24%; width: 50%; height: 48%; background: #E2E2E2; border-radius: calc(1 * var(--u)); }
.tdm-fp-info { position: absolute; left: 40%; top: 19%; width: 18%; display: flex; flex-direction: column; gap: calc(1.1 * var(--u)); }
.tdm-fp-l1 { display: block; height: calc(2.2 * var(--u)); background: #DCDCDC; border-radius: calc(0.5 * var(--u)); }
.tdm-fp-l2 { display: block; width: 66%; height: calc(2.2 * var(--u)); background: #DCDCDC; border-radius: calc(0.5 * var(--u)); }
.tdm-fp-l3 { display: block; width: 38%; height: calc(1.8 * var(--u)); background: #C4C4C4; border-radius: calc(0.5 * var(--u)); }
.tdm-fp-t1 { display: block; height: calc(0.9 * var(--u)); margin-top: calc(0.8 * var(--u)); background: #EDEDED; border-radius: calc(0.45 * var(--u)); }
.tdm-fp-t2 { display: block; width: 92%; height: calc(0.9 * var(--u)); background: #EDEDED; border-radius: calc(0.45 * var(--u)); }
.tdm-fp-t3 { display: block; width: 70%; height: calc(0.9 * var(--u)); background: #EDEDED; border-radius: calc(0.45 * var(--u)); }
.tdm-fp-cta {
  display: flex; align-items: center; justify-content: center; height: calc(4 * var(--u)); margin-top: calc(1.6 * var(--u));
  background: #121212; border-radius: calc(0.9 * var(--u));
}
.tdm-fp-cta span { display: block; width: 40%; height: calc(0.9 * var(--u)); background: #FFFFFF; opacity: 0.8; border-radius: calc(0.45 * var(--u)); }

.tdm-launcher { position: absolute; right: 4%; bottom: 5%; transition: opacity 240ms ease-out; }
.tdm-launcher.is-gone { opacity: 0; transition: opacity 160ms ease-out 240ms; }
.tdm-launcher-btn {
  display: flex; align-items: center; justify-content: center;
  width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-radius: 50%; background: var(--accent);
}
.tdm-launcher-btn svg { display: block; width: 48%; height: 48%; }
.tdm-launcher.is-tap .tdm-launcher-btn { animation: tdm-tap 240ms ease-out both; }
@keyframes tdm-tap {
  0% { transform: scale(1); }
  45% { transform: scale(0.86); }
  100% { transform: scale(1); }
}

.tdm-widget {
  position: absolute; right: 4%; bottom: 5%; width: 36%; height: 78%;
  background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: calc(1.4 * var(--u)); overflow: hidden;
  display: flex; flex-direction: column;
  transform-origin: 100% 100%;
  opacity: 0; transform: translateY(calc(1.6 * var(--u))) scale(0.92);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}
.tdm-widget.is-open {
  opacity: 1; transform: none;
  transition: opacity 240ms ease-out 240ms, transform 300ms cubic-bezier(0.2, 0.8, 0.25, 1) 240ms;
}
.tdm-wh { flex: none; padding: calc(1.3 * var(--u)) calc(1.5 * var(--u)); display: flex; flex-direction: column; gap: calc(0.2 * var(--u)); color: #FFFFFF; background: var(--accent); }
.tdm-wh-t { font-size: calc(1.4 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.tdm-wh-s { font-size: calc(1.05 * var(--u)); font-weight: 400; line-height: 1.2; }
.tdm-wb {
  position: relative; flex: 1; padding: calc(1.3 * var(--u)); display: flex; flex-direction: column; gap: calc(1 * var(--u)); overflow: hidden;
}
.tdm-b {
  align-self: flex-end; max-width: 84%; padding: calc(0.9 * var(--u)) calc(1.2 * var(--u));
  border-radius: calc(1.3 * var(--u)) calc(1.3 * var(--u)) calc(0.3 * var(--u)) calc(1.3 * var(--u));
  font-size: calc(1.2 * var(--u)); line-height: 1.35; color: #FFFFFF; background: var(--accent);
  transform-origin: 100% 100%;
  opacity: 0; transform: translateY(calc(0.8 * var(--u))) scale(0.96);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.tdm-b.is-on {
  opacity: 1; transform: none;
  transition: opacity 260ms ease-out 1200ms, transform 300ms cubic-bezier(0.22, 0.9, 0.3, 1) 1200ms;
}
.tdm-dots {
  position: absolute; top: calc(1.3 * var(--u)); right: calc(1.3 * var(--u));
  display: flex; align-items: center; gap: calc(0.5 * var(--u)); padding: calc(1 * var(--u)) calc(1.3 * var(--u));
  border-radius: calc(1.3 * var(--u)) calc(1.3 * var(--u)) calc(0.3 * var(--u)) calc(1.3 * var(--u)); opacity: 0; background: var(--accent);
}
.tdm-dots i { display: block; width: calc(0.6 * var(--u)); height: calc(0.6 * var(--u)); border-radius: 50%; background: #FFFFFF; opacity: 0.5; }
.tdm-dots.is-on { animation: tdm-dots-life 640ms ease-out 650ms both; }
.tdm-dots.is-on i { animation: tdm-pulse 300ms ease-in-out 650ms 2 both; }
.tdm-dots.is-on i:nth-child(2) { animation-delay: 740ms; }
.tdm-dots.is-on i:nth-child(3) { animation-delay: 830ms; }
@keyframes tdm-dots-life {
  0% { opacity: 0; transform: translateY(calc(0.5 * var(--u))); }
  15% { opacity: 1; transform: none; }
  85% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes tdm-pulse {
  0% { opacity: 0.45; }
  50% { opacity: 1; }
  100% { opacity: 0.45; }
}
.tdm-ag {
  align-self: flex-start; max-width: 84%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(0.35 * var(--u));
  transform-origin: 0 100%;
  opacity: 0; transform: translateY(calc(0.8 * var(--u))) scale(0.96);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.tdm-ag.is-on {
  opacity: 1; transform: none;
  transition: opacity 260ms ease-out 1050ms, transform 300ms cubic-bezier(0.22, 0.9, 0.3, 1) 1050ms;
}
.tdm-ag-name { font-size: calc(1 * var(--u)); font-weight: 500; line-height: 1.2; color: #555B66; padding-left: calc(0.4 * var(--u)); }
.tdm-ag-bubble {
  padding: calc(0.9 * var(--u)) calc(1.2 * var(--u)); border-radius: calc(1.3 * var(--u)) calc(1.3 * var(--u)) calc(1.3 * var(--u)) calc(0.3 * var(--u));
  background: #F1F2F4; color: #121212; font-size: calc(1.2 * var(--u)); line-height: 1.35;
}
.tdm-seen {
  font-size: calc(1 * var(--u)); line-height: 1.2; color: #555B66; padding-left: calc(0.4 * var(--u));
  opacity: 0; transition: opacity 160ms ease-out;
}
.tdm-seen.is-on { opacity: 1; transition: opacity 260ms ease-out 1750ms; }
.tdm-wc {
  flex: none; display: flex; align-items: center; gap: calc(0.8 * var(--u));
  padding: calc(1 * var(--u)) calc(1.2 * var(--u)); border-top: 1px solid #E6E6E6;
}
.tdm-wc-in {
  flex: 1; height: calc(2.8 * var(--u)); border-radius: calc(1.4 * var(--u)); background: #F1F2F4; color: #555B66;
  font-size: calc(1.05 * var(--u)); display: flex; align-items: center; padding: 0 calc(1.2 * var(--u)); line-height: 1;
}
.tdm-ic-send { display: block; flex: none; width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tdm-flight { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }

.tdm-phone {
  position: absolute; left: 75.5%; top: 2%; width: 23.5%; height: 96%; z-index: 3;
  background: #121212; border-radius: calc(4 * var(--u)); padding: calc(0.9 * var(--u));
  box-shadow: 0 calc(1.4 * var(--u)) calc(3.6 * var(--u)) rgba(18, 18, 18, 0.14);
}
.tdm-phone.is-shake { animation: tdm-shake 440ms ease-out 1050ms both; }
@keyframes tdm-shake {
  0% { transform: none; }
  15% { transform: translateX(calc(-0.5 * var(--u))) rotate(-0.8deg); }
  32% { transform: translateX(calc(0.5 * var(--u))) rotate(0.8deg); }
  50% { transform: translateX(calc(-0.35 * var(--u))) rotate(-0.55deg); }
  68% { transform: translateX(calc(0.25 * var(--u))) rotate(0.35deg); }
  85% { transform: translateX(calc(-0.1 * var(--u))) rotate(-0.15deg); }
  100% { transform: none; }
}
.tdm-screen { position: relative; width: 100%; height: 100%; border-radius: calc(3.2 * var(--u)); background: #1B1D22; overflow: hidden; }

.tdm-notif {
  position: absolute; left: 3.5%; right: 3.5%; top: 3.2%;
  background: #F4F5F7; border-radius: calc(2.2 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.4 * var(--u));
  display: flex; flex-direction: column; gap: calc(0.5 * var(--u));
  opacity: 0; transform: translateY(-140%);
  transition: transform 240ms ease-in, opacity 200ms ease-in;
}
.tdm-notif.is-on {
  opacity: 1; transform: none;
  transition: transform 400ms cubic-bezier(0.3, 1.45, 0.5, 1) 1050ms, opacity 160ms ease-out 1050ms;
}
.tdm-notif-app { display: flex; align-items: center; gap: calc(0.7 * var(--u)); font-size: calc(1.05 * var(--u)); font-weight: 500; color: #555B66; line-height: 1; }
.tdm-notif-icon {
  display: flex; align-items: center; justify-content: center;
  width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); border-radius: calc(0.6 * var(--u)); background: #2AABEE;
}
.tdm-notif-icon svg { display: block; width: 62%; height: 62%; }
.tdm-notif-now { margin-left: auto; }
.tdm-notif-t { font-size: calc(1.3 * var(--u)); font-weight: 700; line-height: 1.25; color: #121212; }
.tdm-notif-b { font-size: calc(1.2 * var(--u)); line-height: 1.3; color: #2A2D33; }

.tdm-thread {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: #E4EBF2;
  opacity: 0; transition: opacity 240ms ease-in;
}
.tdm-thread.is-on { opacity: 1; transition: opacity 300ms ease-out; }
.tdm-th { flex: none; display: flex; align-items: center; gap: calc(0.9 * var(--u)); padding: calc(3 * var(--u)) calc(1.4 * var(--u)) calc(1.4 * var(--u)); background: #1E78C2; color: #FFFFFF; }
.tdm-th-back { display: block; flex: none; width: calc(1.9 * var(--u)); height: calc(1.9 * var(--u)); fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tdm-th-text { display: flex; flex-direction: column; gap: calc(0.2 * var(--u)); }
.tdm-th-t { font-size: calc(1.35 * var(--u)); font-weight: 700; line-height: 1.2; }
.tdm-th-s { font-size: calc(1.05 * var(--u)); font-weight: 400; line-height: 1.2; }
.tdm-tm { flex: 1; padding: calc(1.4 * var(--u)); display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.tdm-tb {
  max-width: 82%; padding: calc(0.9 * var(--u)) calc(1.2 * var(--u)); font-size: calc(1.25 * var(--u)); line-height: 1.35;
  border-radius: calc(1.3 * var(--u));
}
.tdm-tb-in { align-self: flex-start; background: #FFFFFF; color: #121212; border-bottom-left-radius: calc(0.3 * var(--u)); }
.tdm-tb-out {
  align-self: flex-end; background: #1E78C2; color: #FFFFFF; border-bottom-right-radius: calc(0.3 * var(--u));
  transform-origin: 100% 100%;
  opacity: 0; transform: translateY(calc(0.8 * var(--u))) scale(0.96);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.tdm-tb-out.is-on {
  opacity: 1; transform: none;
  transition: opacity 260ms ease-out 1750ms, transform 300ms cubic-bezier(0.22, 0.9, 0.3, 1) 1750ms;
}
.tdm-tc { flex: none; display: flex; align-items: center; gap: calc(0.8 * var(--u)); padding: calc(1 * var(--u)) calc(1.2 * var(--u)) calc(1.4 * var(--u)); background: #FFFFFF; }
.tdm-tc-in {
  flex: 1; min-height: calc(4.6 * var(--u)); border-radius: calc(1.4 * var(--u)); background: #F1F2F4; color: #121212;
  font-size: calc(1.2 * var(--u)); line-height: 1.25; padding: calc(0.8 * var(--u)) calc(1.2 * var(--u)); display: flex; align-items: center;
}
.tdm-ic-tsend { display: block; flex: none; width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); fill: none; stroke: #1E78C2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tdm-typed { display: block; }
.tdm-w { display: inline-block; margin-right: 0.3em; opacity: 0; }
.tdm-typed.is-on { animation: tdm-clear 140ms ease-out 1700ms forwards; }
.tdm-typed.is-on .tdm-w { animation: tdm-word 140ms ease-out both; }
@keyframes tdm-word {
  from { opacity: 0; transform: translateY(calc(0.3 * var(--u))); }
  to { opacity: 1; transform: none; }
}
@keyframes tdm-clear {
  from { opacity: 1; }
  to { opacity: 0; }
}

.tdm-plane { position: absolute; left: 0; top: 0; width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); margin: calc(-1.7 * var(--u)) 0 0 calc(-1.7 * var(--u)); z-index: 6; pointer-events: none; opacity: 0; }
.tdm-plane svg { display: block; width: 100%; height: 100%; }
.tdm-plane .tdm-pl-a { fill: var(--accent); }
.tdm-plane .tdm-pl-b { fill: var(--accent); }
.tdm-plane .tdm-pl-shade { fill: #000000; fill-opacity: 0.22; }
.tdm-plane.is-out { animation: tdm-fly-out 1000ms linear 100ms both; }
.tdm-plane.is-back { animation: tdm-fly-back 1000ms linear 60ms both; }
@keyframes tdm-fly-out {
  0% { transform: translate(55.64cqw, 22.18cqw) rotate(-72.16deg) scale(0.6, 0.6); opacity: 0; }
  5.56% { transform: translate(55.75cqw, 21.82cqw) rotate(-71.74deg) scale(0.75, 0.75); opacity: 0.56; }
  11.11% { transform: translate(56.11cqw, 20.79cqw) rotate(-70.46deg) scale(0.9, 0.9); opacity: 1; }
  16.67% { transform: translate(56.71cqw, 19.18cqw) rotate(-68.27deg) scale(1, 1); opacity: 1; }
  22.22% { transform: translate(57.58cqw, 17.16cqw) rotate(-65.1deg) scale(1, 1); opacity: 1; }
  27.78% { transform: translate(58.72cqw, 14.92cqw) rotate(-60.82deg) scale(1, 1); opacity: 1; }
  33.33% { transform: translate(60.12cqw, 12.67cqw) rotate(-55.31deg) scale(1, 1); opacity: 1; }
  38.89% { transform: translate(61.74cqw, 10.59cqw) rotate(-48.45deg) scale(1, 1); opacity: 1; }
  44.44% { transform: translate(63.54cqw, 8.83cqw) rotate(-40.16deg) scale(1, 1); opacity: 1; }
  50% { transform: translate(65.43cqw, 7.48cqw) rotate(-30.54deg) scale(1, 1); opacity: 1; }
  55.56% { transform: translate(67.34cqw, 6.57cqw) rotate(-19.9deg) scale(1, 1); opacity: 1; }
  61.11% { transform: translate(69.17cqw, 6.1cqw) rotate(-8.83deg) scale(1, 1); opacity: 1; }
  66.67% { transform: translate(70.85cqw, 6cqw) rotate(1.96deg) scale(1, 1); opacity: 1; }
  72.22% { transform: translate(72.31cqw, 6.17cqw) rotate(11.78deg) scale(1, 1); opacity: 1; }
  77.78% { transform: translate(73.52cqw, 6.52cqw) rotate(20.13deg) scale(1, 1); opacity: 1; }
  83.33% { transform: translate(74.46cqw, 6.92cqw) rotate(26.76deg) scale(1, 1); opacity: 1; }
  88.89% { transform: translate(75.12cqw, 7.29cqw) rotate(31.53deg) scale(0.95, 0.95); opacity: 0.93; }
  94.44% { transform: translate(75.51cqw, 7.55cqw) rotate(34.4deg) scale(0.87, 0.87); opacity: 0.46; }
  100% { transform: translate(75.64cqw, 7.64cqw) rotate(35.36deg) scale(0.8, 0.8); opacity: 0; }
}
@keyframes tdm-fly-back {
  0% { transform: translate(75.64cqw, 7.64cqw) rotate(215.36deg) scale(0.6, -0.6); opacity: 0; }
  5.56% { transform: translate(75.51cqw, 7.55cqw) rotate(214.4deg) scale(0.75, -0.75); opacity: 0.56; }
  11.11% { transform: translate(75.12cqw, 7.29cqw) rotate(211.53deg) scale(0.9, -0.9); opacity: 1; }
  16.67% { transform: translate(74.46cqw, 6.92cqw) rotate(206.76deg) scale(1, -1); opacity: 1; }
  22.22% { transform: translate(73.52cqw, 6.52cqw) rotate(200.13deg) scale(1, -1); opacity: 1; }
  27.78% { transform: translate(72.31cqw, 6.17cqw) rotate(191.78deg) scale(1, -1); opacity: 1; }
  33.33% { transform: translate(70.85cqw, 6cqw) rotate(181.96deg) scale(1, -1); opacity: 1; }
  38.89% { transform: translate(69.17cqw, 6.1cqw) rotate(171.17deg) scale(1, -1); opacity: 1; }
  44.44% { transform: translate(67.34cqw, 6.57cqw) rotate(160.1deg) scale(1, -1); opacity: 1; }
  50% { transform: translate(65.43cqw, 7.48cqw) rotate(149.46deg) scale(1, -1); opacity: 1; }
  55.56% { transform: translate(63.54cqw, 8.83cqw) rotate(139.84deg) scale(1, -1); opacity: 1; }
  61.11% { transform: translate(61.74cqw, 10.59cqw) rotate(131.55deg) scale(1, -1); opacity: 1; }
  66.67% { transform: translate(60.12cqw, 12.67cqw) rotate(124.69deg) scale(1, -1); opacity: 1; }
  72.22% { transform: translate(58.72cqw, 14.92cqw) rotate(119.18deg) scale(1, -1); opacity: 1; }
  77.78% { transform: translate(57.58cqw, 17.16cqw) rotate(114.9deg) scale(1, -1); opacity: 1; }
  83.33% { transform: translate(56.71cqw, 19.18cqw) rotate(111.73deg) scale(1, -1); opacity: 1; }
  88.89% { transform: translate(56.11cqw, 20.79cqw) rotate(109.54deg) scale(0.95, -0.95); opacity: 0.93; }
  94.44% { transform: translate(55.75cqw, 21.82cqw) rotate(108.26deg) scale(0.87, -0.87); opacity: 0.46; }
  100% { transform: translate(55.64cqw, 22.18cqw) rotate(107.84deg) scale(0.8, -0.8); opacity: 0; }
}

/* ---------- phone layout (< 640px): a taller stage, the browser cropped so the chat widget is large,
   the phone overlapping lower right. Every inner size scales with --u, set per component. Desktop is untouched. ---------- */
.tdm-flight-m { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
@media (max-width: 639px) {
  .tdm-stage { aspect-ratio: 100 / 122; }
  .tdm-flight { display: none; }
  .tdm-flight-m { display: block; }

  /* browser: bleeds off the left edge, only its right part is on screen */
  .tdm-browser { --u: 2.4cqw; left: -42cqw; top: 2cqw; width: 106cqw; height: 106cqw; }
  .tdm-chrome { padding-left: 44cqw; }
  .tdm-url { flex: 0 0 auto; width: 34cqw; }
  .tdm-launcher { right: 9%; }
  .tdm-fp-info { left: 44%; }

  /* chat widget: large and readable */
  .tdm-widget { --u: 2.85cqw; width: 58cqw; height: 88cqw; transform-origin: 80% 100%; }
  .tdm-widget .tdm-b, .tdm-widget .tdm-ag { max-width: 90%; }

  /* phone: bigger, overlapping the browser's lower right */
  .tdm-phone { --u: 2.2cqw; left: 58cqw; top: 44cqw; width: 41cqw; height: 78cqw; }
  .tdm-tm { padding-bottom: calc(0.6 * var(--u)); }
  .tdm-tc-in { min-width: 0; min-height: calc(3.6 * var(--u)); }
  .tdm-typed { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
  .tdm-th-t { font-size: calc(1.08 * var(--u)); white-space: nowrap; }
  .tdm-th-s { font-size: calc(0.95 * var(--u)); white-space: nowrap; }
  .tdm-notif-t { font-size: calc(1.08 * var(--u)); white-space: nowrap; }

  /* paper plane: short hop over the empty top right */
  .tdm-plane { --u: 2cqw; }
  .tdm-plane.is-out { animation-name: tdm-fly-out-m; }
  .tdm-plane.is-back { animation-name: tdm-fly-back-m; }
}
@keyframes tdm-fly-out-m {
  0.0% { transform: translate(60.20cqw, 29.00cqw) rotate(-86.19deg) scale(0.6, 0.6); opacity: 0; }
  5.56% { transform: translate(60.76cqw, 24.77cqw) rotate(-78.53deg) scale(0.73, 0.73); opacity: 0.5; }
  11.11% { transform: translate(61.78cqw, 21.09cqw) rotate(-70.12deg) scale(0.87, 0.87); opacity: 1; }
  16.67% { transform: translate(63.19cqw, 17.98cqw) rotate(-60.81deg) scale(1.0, 1.0); opacity: 1; }
  22.22% { transform: translate(64.91cqw, 15.44cqw) rotate(-50.42deg) scale(1.0, 1.0); opacity: 1; }
  27.78% { transform: translate(66.87cqw, 13.50cqw) rotate(-38.69deg) scale(1.0, 1.0); opacity: 1; }
  33.33% { transform: translate(68.99cqw, 12.17cqw) rotate(-25.34deg) scale(1.0, 1.0); opacity: 1; }
  38.89% { transform: translate(71.18cqw, 11.45cqw) rotate(-10.25deg) scale(1.0, 1.0); opacity: 1; }
  44.44% { transform: translate(73.39cqw, 11.37cqw) rotate(6.29deg) scale(1.0, 1.0); opacity: 1; }
  50.0% { transform: translate(75.53cqw, 11.94cqw) rotate(23.35deg) scale(1.0, 1.0); opacity: 1; }
  55.56% { transform: translate(77.51cqw, 13.17cqw) rotate(39.61deg) scale(1.0, 1.0); opacity: 1; }
  61.11% { transform: translate(79.28cqw, 15.07cqw) rotate(54.06deg) scale(1.0, 1.0); opacity: 1; }
  66.67% { transform: translate(80.75cqw, 17.67cqw) rotate(66.30deg) scale(1.0, 1.0); opacity: 1; }
  72.22% { transform: translate(81.84cqw, 20.97cqw) rotate(76.48deg) scale(1.0, 1.0); opacity: 1; }
  77.78% { transform: translate(82.48cqw, 24.98cqw) rotate(84.92deg) scale(1.0, 1.0); opacity: 1; }
  83.33% { transform: translate(82.59cqw, 29.73cqw) rotate(91.98deg) scale(1.0, 1.0); opacity: 1; }
  88.89% { transform: translate(82.10cqw, 35.22cqw) rotate(97.95deg) scale(0.93, 0.93); opacity: 1; }
  94.44% { transform: translate(80.93cqw, 41.47cqw) rotate(103.05deg) scale(0.87, 0.87); opacity: 0.5; }
  100.0% { transform: translate(79.00cqw, 48.50cqw) rotate(107.46deg) scale(0.8, 0.8); opacity: 0; }
}
@keyframes tdm-fly-back-m {
  0.0% { transform: translate(79.00cqw, 48.50cqw) rotate(287.46deg) scale(0.6, -0.6); opacity: 0; }
  5.56% { transform: translate(80.93cqw, 41.47cqw) rotate(283.05deg) scale(0.73, -0.73); opacity: 0.5; }
  11.11% { transform: translate(82.10cqw, 35.22cqw) rotate(277.95deg) scale(0.87, -0.87); opacity: 1; }
  16.67% { transform: translate(82.59cqw, 29.73cqw) rotate(271.98deg) scale(1.0, -1.0); opacity: 1; }
  22.22% { transform: translate(82.48cqw, 24.98cqw) rotate(264.92deg) scale(1.0, -1.0); opacity: 1; }
  27.78% { transform: translate(81.84cqw, 20.97cqw) rotate(256.48deg) scale(1.0, -1.0); opacity: 1; }
  33.33% { transform: translate(80.75cqw, 17.67cqw) rotate(246.30deg) scale(1.0, -1.0); opacity: 1; }
  38.89% { transform: translate(79.28cqw, 15.07cqw) rotate(234.06deg) scale(1.0, -1.0); opacity: 1; }
  44.44% { transform: translate(77.51cqw, 13.17cqw) rotate(219.61deg) scale(1.0, -1.0); opacity: 1; }
  50.0% { transform: translate(75.53cqw, 11.94cqw) rotate(203.35deg) scale(1.0, -1.0); opacity: 1; }
  55.56% { transform: translate(73.39cqw, 11.37cqw) rotate(186.29deg) scale(1.0, -1.0); opacity: 1; }
  61.11% { transform: translate(71.18cqw, 11.45cqw) rotate(169.75deg) scale(1.0, -1.0); opacity: 1; }
  66.67% { transform: translate(68.99cqw, 12.17cqw) rotate(154.66deg) scale(1.0, -1.0); opacity: 1; }
  72.22% { transform: translate(66.87cqw, 13.50cqw) rotate(141.31deg) scale(1.0, -1.0); opacity: 1; }
  77.78% { transform: translate(64.91cqw, 15.44cqw) rotate(129.58deg) scale(1.0, -1.0); opacity: 1; }
  83.33% { transform: translate(63.19cqw, 17.98cqw) rotate(119.19deg) scale(1.0, -1.0); opacity: 1; }
  88.89% { transform: translate(61.78cqw, 21.09cqw) rotate(109.88deg) scale(0.93, -0.93); opacity: 1; }
  94.44% { transform: translate(60.76cqw, 24.77cqw) rotate(101.47deg) scale(0.87, -0.87); opacity: 0.5; }
  100.0% { transform: translate(60.20cqw, 29.00cqw) rotate(93.81deg) scale(0.8, -0.8); opacity: 0; }
}

/* ---------- step captions ---------- */
.tdm-steps {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 20px;
}
.tdm-cap {
  position: relative; padding-top: 16px; display: flex; flex-direction: column; gap: 2px;
  color: var(--muted); transition: color 220ms ease-out;
}
.tdm-cap.is-on { color: var(--ink); }
.tdm-track { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #E6E6E6; border-radius: 2px; overflow: hidden; }
.tdm-fill { display: block; height: 100%; width: 0; background: var(--yellow); }
.tdm-fill.is-on { width: 100%; animation: tdm-fill 2400ms linear both; }
.tdm-fill.is-on.tdm-d2 { animation-duration: 2800ms; }
.tdm-fill.is-on.tdm-d3 { animation-duration: 2600ms; }
.tdm-fill.is-on.tdm-d4 { animation-duration: 3000ms; }
@keyframes tdm-fill {
  from { width: 0; }
  to { width: 100%; }
}
.tdm-capnum { font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.tdm-caplabel { font-size: 18px; font-weight: 500; line-height: 1.35; }

/* ---------- sections ---------- */
.tdm-secin { border-top: 1px solid var(--line); padding: 88px 0 96px; }
.tdm-secin-first { margin-top: 88px; }
.tdm-h2 { font-weight: 800; font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.tdm-cols { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 48px 40px; }
.tdm-num { font-size: 64px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.tdm-h3 { margin-top: 20px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.tdm-body { margin-top: 8px; color: var(--muted); text-wrap: pretty; }
.tdm-snip {
  margin-top: 64px; display: flex; align-items: center; gap: 16px;
  padding: 12px 12px 12px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--ground-alt);
}
.tdm-code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: var(--mono);
  font-size: 15px; line-height: 1.6; color: var(--ink);
}
.tdm-copy {
  flex: none; min-height: 44px; min-width: 84px; padding: 0 20px; border-radius: 10px;
  border: 1px solid var(--line-input); background: #FFFFFF; color: var(--ink);
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background-color 220ms ease-out;
}
.tdm-copy:hover { background: var(--fill); }

.tdm-feats { list-style: none; padding: 0; margin: 40px 0 0; border-bottom: 1px solid var(--line); }
.tdm-feat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px; padding: 22px 0; border-top: 1px solid var(--line); }
.tdm-fname { flex: 1 1 280px; min-width: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.tdm-fdesc { flex: 2 1 320px; min-width: 0; color: var(--muted); }

.tdm-closing { padding: 112px 0 120px; }
.tdm-big { max-width: 18ch; font-weight: 800; font-size: clamp(44px, 7vw, 100px); letter-spacing: -0.035em; line-height: 1.0; text-wrap: balance; }
.tdm-closing .tdm-btn { margin-top: 44px; }

.tdm-narrow { max-width: 760px; }
.tdm-center { text-align: center; }

/* inner-page title block (pricing, etc.) */
.tdm-pagehead { padding: 48px 0 40px; }
.tdm-pagehead .lede { margin-top: 20px; }

/* inner pages */
.tdm-article { padding-top: 40px; padding-bottom: 96px; }
.tdm-gap-top { margin-top: 28px; }
.tdm-secin-tight { margin-top: 72px; padding-top: 72px; padding-bottom: 72px; }
.tdm-closing-sm { padding: 88px 0 104px; }
.tdm-closing-sm .lede { margin-top: 16px; }
.tdm-closing-sm .tdm-btn { margin-top: 32px; }

/* ---------- eyebrow / lede / meta ---------- */
.eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.tdm-center .lede { margin-left: auto; margin-right: auto; }
.meta { font-size: 16px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 44px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: none; width: 28px; text-align: center;
  font-size: 30px; font-weight: 300; line-height: 1; color: var(--muted);
  transition: transform 220ms ease-out;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 52px 24px 0; color: var(--muted); max-width: 70ch; }
.faq details > div p + p { margin-top: 12px; }
.faq details > div a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.faq details > div a:hover { text-decoration-thickness: 2px; }
.faq code { font-family: var(--mono); font-size: 0.88em; background: var(--fill); border-radius: 6px; padding: 0.12em 0.4em; overflow-wrap: anywhere; }

/* ---------- long-form (docs, legal) ---------- */
.prose { min-width: 0; max-width: 760px; font-size: 18px; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose h1 { margin: 0 0 20px; font-weight: 800; font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.prose h2 {
  margin: 56px 0 16px; padding-top: 40px; border-top: 1px solid var(--line);
  font-weight: 700; font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance;
}
.prose h3 { margin: 36px 0 10px; font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; }
.prose h4 { margin: 28px 0 8px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; }
.prose :is(h1, h2, h3, h4)[id] { scroll-margin-top: 24px; }
.prose p, .prose ul, .prose ol, .prose pre, .prose blockquote, .prose .table-scroll, .prose .callout { margin: 0 0 20px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0 0 8px; padding-left: 0.2em; }
.prose li::marker { color: var(--muted); }
.prose li > ul, .prose li > ol { margin: 8px 0 0; }
.prose strong { font-weight: 700; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose code, .prose kbd { font-family: var(--mono); font-size: 0.88em; }
.prose :not(pre) > code { background: var(--fill); border-radius: 6px; padding: 0.12em 0.4em; overflow-wrap: anywhere; }
.prose pre {
  font-family: var(--mono); font-size: 15px; line-height: 1.6; tab-size: 2;
  background: var(--ground-alt); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; overflow-x: auto;
}
.prose pre code { background: none; padding: 0; font-size: inherit; white-space: pre; overflow-wrap: normal; }
.prose kbd { border: 1px solid var(--line-input); border-bottom-width: 2px; border-radius: 6px; padding: 0.1em 0.4em; background: #FFFFFF; }
.prose blockquote { padding: 0 0 0 20px; border-left: 1px solid var(--line-input); color: var(--muted); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose img { display: block; height: auto; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 20px; }
.prose .lede { margin: 0 0 8px; }

.callout { border: 1px solid var(--line); background: var(--ground-alt); border-radius: 12px; padding: 16px 20px; font-size: 17px; line-height: 1.55; }
.callout > :last-child { margin-bottom: 0; }
.callout p + p { margin-top: 10px; }
.callout-warn { background: var(--warn-soft); border-color: transparent; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 16px; line-height: 1.45; }
.table-scroll th {
  text-align: left; padding: 12px 16px; background: var(--ground-alt); border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.table-scroll td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-scroll tr:last-child td { border-bottom: 0; }
.table-scroll td:first-child { white-space: nowrap; }

.page-next {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
}
.prose .page-next a, .page-next a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.prose .page-next a:hover, .page-next a:hover { text-decoration: underline; }

/* docs layout: left nav, stacks on phones */
.doc-layout { max-width: 1200px; margin: 0 auto; padding: 40px 24px 96px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.doc-nav { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
.doc-nav h2 { margin: 0 0 8px; padding: 0 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.doc-nav ul { list-style: none; margin: 0; padding: 0; }
.doc-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 16px; font-weight: 500; transition: background-color 220ms ease-out; }
.doc-nav a:hover { background: var(--fill); }
.doc-nav a[aria-current="page"] { background: var(--fill); font-weight: 700; }
@media (max-width: 860px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 16px; padding-bottom: 72px; }
  .doc-nav { position: static; max-height: none; overflow: visible; }
  .doc-nav h2 { padding: 0; }
  .doc-nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .doc-nav a { border: 1px solid var(--line-input); padding: 0 16px; }
  .doc-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
}
@media (max-width: 479px) {
  .doc-layout { padding-inline: 16px; }
}

/* ---------- pricing primitives ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; margin-top: 8px; }
.plan { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line-input); border-radius: 12px; padding: 32px; }
.plan.main { border-color: var(--ink); }
.plan h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 14px 0 0; }
.plan p { margin: 8px 0 0; color: var(--muted); }
.plan .tag { align-self: flex-start; display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 700; line-height: 1.4; }
.plan .price { margin: 16px 0 0; font-size: 48px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.plan .price small { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan ul { list-style: none; margin: 24px 0 28px; padding: 0; }
.plan li { position: relative; padding: 6px 0 6px 28px; }
.plan li::before {
  content: ''; position: absolute; left: 7px; top: 11px; width: 6px; height: 11px;
  border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.plan.soon li::before { border-color: var(--muted); }
.plan > .tdm-btn { margin-top: auto; align-self: flex-start; }

/* ---------- footer ---------- */
.tdm-foot { border-top: 1px solid var(--line); padding: 40px 0 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.tdm-flinks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tdm-flink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 16px; font-weight: 500; }
.tdm-flink:hover { text-decoration: underline; }
.tdm-eu { font-size: 16px; color: var(--muted); }

/* ---------- 404 ---------- */
.tdm-nf { padding: 72px 0 120px; }

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  body { font-size: 17px; }
  .tdm-secin { padding: 64px 0 72px; }
  .tdm-secin-first { margin-top: 64px; }
  .tdm-closing { padding: 72px 0 88px; }
  .tdm-num { font-size: 52px; }
  .tdm-snip { margin-top: 48px; padding-left: 16px; gap: 12px; }
  .tdm-copy { padding: 0 16px; min-width: 76px; }
  .faq summary, .tdm-fname { font-size: 20px; }
  .faq details > div { padding-right: 0; }
  .plan { padding: 24px; }
  .tdm-article { padding-bottom: 72px; }
  .tdm-secin-tight { margin-top: 56px; padding-top: 56px; padding-bottom: 56px; }
  .tdm-closing-sm { padding: 64px 0 80px; }
  .prose { font-size: 17px; }
  .prose pre { padding: 14px 16px; font-size: 14px; }
  .tdm-foot { padding: 32px 0 40px; }
}

/* Tables become stacked cards on phones (no sideways scrolling to read a row). */
@media (max-width: 560px) {
  .table-scroll { overflow: visible; border: 0; border-radius: 0; }
  .table-scroll table { display: block; min-width: 0; }
  .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-scroll tbody { display: block; }
  .table-scroll tr { display: block; margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
  .table-scroll tr:last-child { margin-bottom: 0; }
  .table-scroll td { display: block; padding: 0; border: 0; }
  .table-scroll td + td { margin-top: 4px; }
  .table-scroll td:first-child { white-space: normal; font-weight: 600; }
  .table-scroll td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); font-weight: 500; }
}

/* ---------- reduced motion backstop ---------- */
.tdm-stage.is-still *, .tdm-stage.is-still *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}