/* ==================================== ARTICLE BASELINE ==================================== */
/* Base text */
.article--structure .article-body {
   font-size: 16px;
   line-height: 1.6em;
   color: #0B0F1E;

}

/* h2: big pink section heading */
.article-body h2 {
   font-size: 34px;
   color: #FF22B1;
   letter-spacing: -0.2px;
   margin: 28px 0 12px;
   /* cap before + small gap after */
}

/* h3: purple subheading */
.article-body h3 {
   font-size: 22px;
   color: #895EF7;
   letter-spacing: -0.1px;
   margin: 22px 0 8px;

}

/* --- Headings → first block gap (small, consistent) --- */
:root {
  --head-next-gap: 0.45rem;   /* tweak: 0.35–0.6rem */
}

/* Reduce bottom margin on headings so spacing is controlled by the next block */
.article-body :is(h2, h3, h4, h5, h6) {
  margin-bottom: 0.15rem;   /* keep tiny cap under the heading */
}

/* Add a small top margin to the very next element after a heading */
.article-body :is(h2, h3, h4, h5, h6) + :not(.callout-banner, .callout, .intro-table-label) {
  margin-top: var(--head-next-gap);
}

/* If the next thing is a list, keep it a touch tighter than paragraphs */
.article-body :is(h2, h3, h4, h5, h6) + :is(ul, ol) {
  margin-top: calc(var(--head-next-gap) - 0.1rem);
}

/* If an image or figure follows immediately, don’t add extra space (handled elsewhere) */
.article-body :is(h2, h3, h4, h5, h6) + :is(img, figure, .screenshot-wrap) {
  margin-top: 0;
}

/* Mobile: nudge down slightly for readability */
@media (max-width: 640px) {
  :root { --head-next-gap: 0.5rem; }
}


/* --- Global knobs --- */
:root {
  /* small, even gap after any heading */
  --head-next-gap: 0.45rem;
  /* gap between a larger heading immediately followed by a smaller heading */
  --head-subhead-gap: var(--head-next-gap); /* keep same; change if you want a different feel */
}

/* Keep headings’ own bottom margin tiny so the next-sibling controls spacing */
.article-body :is(h2, h3, h4, h5, h6) {
  margin-bottom: 0.15rem;
}

/* 1) Heading → first block (paragraph, div, list, etc.) */
.article-body :is(h2, h3, h4, h5, h6)
  + :not(.callout-banner, .callout, .intro-table-label) {
  margin-top: var(--head-next-gap);
}

/* Lists right after a heading: a hair tighter */
.article-body :is(h2, h3, h4, h5, h6) + :is(ul, ol) {
  margin-top: calc(var(--head-next-gap) - 0.1rem);
}

/* 2) Bigger heading → smaller heading (e.g., h2 followed by h3/h4…) */
.article-body :is(h2, h3, h4, h5) + :is(h3, h4, h5, h6) {
  margin-top: var(--head-subhead-gap);
}

/* If an image/figure follows, don't add extra space (your image rules take over) */
.article-body :is(h2, h3, h4, h5, h6) + :is(img, figure, .screenshot-wrap) {
  margin-top: 0;
}

/* Mobile nudge */
@media (max-width: 640px) {
  :root { --head-next-gap: 0.5rem; }
}

/* ===== Headings → first content (p/ul/ol) ===== */
.article-body :is(h1, h2, h3) + :is(p, ul, ol) {
  margin-top: 10px;           /* small lead-in after any heading */
}

/* Bigger → smaller heading immediately after (e.g., H2 then H3) */
.article-body h2 + h3,
.article-body h1 + h2 {
  margin-top: 12px;           /* keep them visually connected */
}

/* Default heading margins to anchor vertical rhythm */
.article-body h1 {
  margin: 32px 0 14px;        /* section open + lead-in handled above */
}
.article-body h2 {
  margin: 28px 0 12px;
}
.article-body h3 {
  margin: 22px 0 10px;
}

/* ===== Procedure lists (OL) with sub-points ===== */
/* Lead-in when a list directly follows an intro sentence */
.article-body p + ol,
.article-body p + ul {
  margin-top: 10px;
}

/* Nested lists inside a step: small top nudge, no tail puff */
.article-body li > :is(ul, ol) {
  margin-top: 6px;            /* was ~8–12px in many themes */
  margin-bottom: 0;           /* prevent extra gap after last sub-sub point */
}

/* Remove trailing gap on the final item of any list */
.article-body :is(ul, ol) > li:last-child {
  margin-bottom: 0;
}

/* Even out step list rhythm (outer OL only) */
.article-body :is(ol, ul) > li {
  margin-bottom: 0.45em;      /* light cadence between top-level bullets */
}

/* Keep “definition-style” bullets tight when using a bold label + sentence */
.article-body li > b + :is(span, em, i) {
  margin-left: 0;             /* no accidental indent */
}

/* ===== “Step X: …” subhead breathing room ===== */
.article-body h3[id^="step-"] {
  margin-top: 22px;           /* not too far from preceding H2 paragraph */
  margin-bottom: 10px;        /* let the first bullet sit close */
}

/* ===== Callouts near lists (for your Tips block alignment) ===== */
.article-body .callout {
  margin: 18px 0;             /* consistent section gap */
}
.article-body .callout .styled-list,
.article-body .callout ul {
  margin-top: 6px;            /* subtle space under the callout title */
}

/* ===== Mobile tweaks (keeps scan-ability on small screens) ===== */
@media (max-width: 640px) {
  .article-body h1 { margin: 28px 0 12px; }
  .article-body h2 { margin: 24px 0 10px; }
  .article-body h3 { margin: 20px 0 8px; }

  .article-body :is(h1, h2, h3) + :is(p, ul, ol) { margin-top: 8px; }
  .article-body li > :is(ul, ol) { margin-top: 5px; }
  .article-body :is(ol, ul) > li { margin-bottom: 0.4em; }
}


/* Callout gaps */

/* Gating banner → Feature overview label spacing */
.callout-banner + .intro-table-label {
   margin-top: 0;

}
 /* label has its own margin */
.callout-banner {
   margin-bottom: 16px;

}
 /* desktop gap */
@media (max-width: 640px) {
   .callout-banner {
     margin-bottom: 14px;

  }
   /* mobile gap */
}

/* Gating banner → Feature overview label spacing (tuned) */
.article-body .callout-banner + .intro-table-label {
   margin-top: 8px;
   /* small breath above the label */
}

.article-body .callout-banner {
   margin-bottom: 20px;
   /* more space below the banner */
}

@media (max-width: 640px) {
   .article-body .callout-banner {
     margin-bottom: 16px;

  }

}

/* Modern spacer handling */
.article-body div:has(> br) + h3 {
   margin-top: 16px;

}

/* When h3 follows h2 */
.article-body h2 + h3 {
   margin-top: 12px;

}

/* Prevent anchored headings from hiding under the sticky header */
.article-body [id] {
   scroll-margin-top: 88px;

}

@media (max-width: 640px) {

  .article-body [id] {
     scroll-margin-top: 72px;

  }

  .article-body h2 {
     margin: 24px 0 10px;

  }

  .article-body h3 {
     margin: 18px 0 8px;

  }

  .article-body :is(p, ul, ol, table, .callout, .content-table-wrapper, .intro-table-wrapper, .responsive-table) + h3 {
     margin-top: 26px;

  }

}

/* Helper kept */
ul + h3, div + h3 {
   margin-top: 14px;

}

/* ==================================== INTRO TABLE — final replacement ==================================== */

/* Wrapper: no scroll by default (desktop/laptop) */
.intro-table-wrapper {
   overflow: visible;
   -webkit-overflow-scrolling: touch;
   /* harmless when not scrolling */
}

/* Label above the table */
.intro-table-label {
   font-size: 17px;
   font-weight: 500;
   color: #666;
   margin: 10px 0 6px 0;
   letter-spacing: 0.2px;

}

.intro-table-label-icon {
   font-size: 14px;
   opacity: .6;
   margin-right: 4px;

}

/* Base table — wrap by default */
.intro-table {
   width: 100%;
   table-layout: auto;
   /* allow wrapping on wider screens */ min-width: 0;
   /* don't force scroll at laptop widths */ border-collapse: collapse;
   border-spacing: 0;
   border: 0;
   margin: 0 0 22px 0;

}

/* Divider under every row */
.intro-table tr {
   border-bottom: 1px solid #CFD4F3;

}

/* Global cell styles */
.intro-table th, .intro-table td {
   padding: 12px 10px;
   vertical-align: top;
   font-size: 16px;
   color: #0B0F1E;
   line-height: 1.55;
   background: transparent;
   border: 0 !important;
   white-space: normal;
   word-break: normal;
   overflow-wrap: anywhere;

}

/* Label column (left) */
.intro-table th[scope="row"], .intro-table td:first-child {
   font-size: 20px;
   font-weight: 600;
   color: #895EF7;
   white-space: nowrap;
   width: 18%;
   min-width: 80px;
   max-width: 100px;
   vertical-align: top;
   padding-top: 12px;
   padding-right: 8px;
   padding-left: 10px;
   line-height: 1.3;

}

/* Content column (right) */
.intro-table th[scope="row"] + td, .intro-table td:last-child {
   width: 82%;
   word-wrap: break-word;
   padding: 12px 10px 12px 0;

}

/* Lists inside INTRO table cells */
.intro-table td ul, .intro-table td ol {
   margin: 0;
   padding-left: 20px;
   list-style-position: outside;

}

.intro-table td li {
   margin-bottom: .30em;
   line-height: 1.5;

}

.intro-table td li:last-child {
   margin-bottom: 0 !important;

}

.intro-table td li > br {
   display: none !important;

}

/* Robust sublist handling + sibling UL quirk */
.intro-table td :is(li, p, div) + ul, .intro-table td ul ul, .intro-table td ol ul, .intro-table td ul ol, .intro-table td ol ol {
   padding-left: 24px !important;
   margin-top: .28em !important;
   list-style: circle outside;

}

.intro-table td :is(li, p, div) + ul > li, .intro-table td ul ul > li, .intro-table td ol ul > li, .intro-table td ul ol > li, .intro-table td ol ol > li {
   margin: .12em 0 !important;
   line-height: 1.38;

}

/* Hover state for rows */
.intro-table tr:hover {
   background-color: #f9f9fb;

}

/* Scroll helper text — hidden by default */
.scroll-helper-text {
   display: none;
   text-align: center;
   font-size: 13px;
   color: #666;
   margin-top: 6px;
   font-style: italic;

}

/* Intro tables: enable scroll and show helper at ≤860px */
@media (max-width: 860px) {

  .intro-table-wrapper {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-gutter: stable both-edges;
     /* prevent yo-yo reflow */
  }

  .intro-table {
     table-layout: fixed;
     /* stable columns while scrolled */ min-width: 700px;
     /* guarantees a reason to scroll */
  }

  /* Show helper whether it's inside OR immediately after the wrapper */
  .intro-table-wrapper .scroll-helper-text, .intro-table-wrapper + .scroll-helper-text {
     display: block !important;

  }

}

/* Optional tighter floor for very small phones */
@media (max-width: 480px) {
   .intro-table {
     min-width: 620px;

  }

}

/* --- Trim trailing gaps & editor spacers (incl. WHO last sub-point) --- */
.intro-table td > :last-child {
   margin-bottom: 0 !important;

}

.intro-table td > :last-child > :last-child {
   margin-bottom: 0 !important;

}

.intro-table td :is(ul, ol) > li:last-child {
   margin-bottom: 0 !important;

}

.intro-table td :is(p, div, li) > br:last-child {
   display: none !important;

}

.intro-table td ul + ul:last-child {
   margin-bottom: 0 !important;

}

.intro-table td ul + ul:last-child > li:last-child {
   margin-bottom: 0 !important;

}

/* Use this and add class="spacer" to real spacer divs in the editor */
.intro-table td > .spacer:last-child {
   display: none !important;

}

/* 2) Reduce “yo-yo” layout when scrollbars appear/disappear */
.intro-table-wrapper, .content-table-wrapper {
   scrollbar-gutter: stable both-edges;
   overscroll-behavior-x: contain;

}

/* Optional: subtle edge-fade hint when scrolled */
@media (max-width: 860px) {
   .intro-table-wrapper {
     position: relative;
     -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
     mask-image: linear-gradient(to right, #000 92%, transparent);

  }

}

/* WHO row: remove spacing after the last sub-point */
.intro-table td :is(ul, ol):last-child {
   margin-bottom: 0 !important;

}

.intro-table td :is(ul, ol):last-child > li:last-child {
   margin-bottom: 0 !important;

}

/* If the editor wraps list text in <p> or <div>, trim those too */
.intro-table td li > p {
   margin: 0 !important;

}

.intro-table td li > :last-child {
   margin-bottom: 0 !important;

}

/* Belt-and-braces: hide trailing spacers/brs if any slipped in */
.intro-table td :is(p, div, li) > br:last-child {
   display: none !important;

}

.intro-table td div:empty:last-child {
   display: none !important;

}

/* --- Schedule doc: small helpers --- */
.cell-subnote {
  margin-top:4px
}

.cell-subnote sub,.cell-subnote small {
  font-size:85%;
  opacity:.9
}

.intro-table li,.content-table li {
  margin-bottom:6px
}

.intro-table li:last-child,.content-table li:last-child {
  margin-bottom:0
}

.responsive-table {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch
}

.intro-table th,.intro-table td,.content-table th,.content-table td {
  vertical-align:top
}

.align-center {
  text-align:center
}

.scroll-helper-text {
  font-size:12px;
  opacity:.7
}

.spacer {
  height:16px
}

/* ================== TABLE CELLS THAT END WITH AN IMAGE (+ trailing <br/>) ================== */
/* Works for BOTH .content-table and .intro-table. Put this at the very end of your CSS. */

/* Case A: bare <img> is actually last child */
.intro-table td > img:last-child,
.content-table td > img:last-child {

  display:block !important;

  margin:8px 0 0 !important;
     /* space above, none below */
}

/* Case B: wrapper (div/span/figure) is last, first child is <img>, then <br/> */
.intro-table td > :is(div,span,figure):last-child > img:first-child,
.content-table td > :is(div,span,figure):last-child > img:first-child {

  display:block !important;

  margin:8px 0 0 !important;

}

/* Hide the trailing spacer br when it follows that first image and is itself last */
.intro-table td > :is(div,span,figure):last-child > img:first-child + br:last-child,
.content-table td > :is(div,span,figure):last-child > img:first-child + br:last-child {

  display:none !important;

}

/* Same logic when this happens inside list items within table cells */
.intro-table td li > :is(div,span,figure):last-child > img:first-child + br:last-child,
.content-table td li > :is(div,span,figure):last-child > img:first-child + br:last-child {

  display:none !important;

}

.intro-table td li > :is(div,span,figure):last-child > img:first-child,
.content-table td li > :is(div,span,figure):last-child > img:first-child {

  display:block !important;

  margin:8px 0 0 !important;

}

/* Finally, if the cell literally ends with a stray <br>, kill it */
.intro-table td > br:last-child,
.content-table td > br:last-child {

  display:none !important;

}

/* ===== Recommended TOC — Softer Card + Compact Hover ===== */
:root {

  --toc-bg: #FAF9FF;
   /* soft, subtle background */
  --toc-border: #EDEBFF;
   /* faint border */
  --toc-title: #6E5ACF;
   /* quiet brand accent */
  --toc-link: #6E5ACF;
   /* muted link */
  --toc-link-hover: #5A48C7;
   /* darker hover */
  --toc-text: #0B0F1E;

  --toc-radius: 10px;

  --toc-pad-y: 6px;

  --toc-pad-x: 16px;

  --toc-item-gap: -25px;

  --toc-title-gap: 12px;

  --toc-bottom-gap: -30px;

}

.toc {
   background: var(--toc-bg);
   border: 1px solid var(--toc-border);
   border-radius: var(--toc-radius);
   padding: var(--toc-pad-y) var(--toc-pad-x);
   color: var(--toc-text);
   margin: 16px 0 var(--toc-bottom-gap);

}

.toc .toc-title {
   margin: 0 0 var(--toc-title-gap);
   font-weight: 600;
   color: var(--toc-title);
   line-height: 1.25;
   font-size: 13px;
   letter-spacing: .02em;

}

.toc .toc-list {
   list-style: none;
   margin: 0;
   padding-left: 1.25rem;

}

.toc .toc-list li + li {
   margin-top: var(--toc-item-gap);

}

.toc .toc-list a {
   display: block;
   color: var(--toc-link);
   text-decoration: none;
   font-weight: 500;
   border-radius: 6px;
   padding: 2px 4px;
   transition: background .15s ease, color .15s ease;
   padding-bottom:0px;

}

.toc .toc-list a:hover {
   background: rgba(11,15,30,.04);
   color: var(--toc-link-hover);
   text-decoration: none;

}

.toc .toc-list a:focus-visible {
   outline: 2px solid var(--toc-link);
   outline-offset: 2px;
   border-radius: 4px;

}

/* --- Copy-link button: left gutter, no heading indent (latest fix) --- */

/* ensure headings are positioning contexts and not clipped */
.article-body h2,
.article-body h3 {

  position: relative !important;

  overflow: visible;

}

/* DO NOT indent headings */
.article-body h2,
.article-body h3 {

  padding-left: 0;

}

/* place button in the left gutter without shifting text */
.heading-copy {

  position: absolute;

  left: -28px;
                /* sits in the gutter */
  top: 50%;

  transform: translateY(calc(-50% + var(--hl-badge-nudge)));

  width: 24px;

  height: 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(11,15,30,.12);

  border-radius: 6px;

  background: #fff;

  font-family: inherit;

  line-height: 1;

  cursor: pointer;

  opacity: 0;
                 /* hidden until hover/focus */
  transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease;

  z-index: 1;

  pointer-events: auto;

}

/* hash/confirm glyphs */
.heading-copy::before {

  content: "#";

  font-size: 13px;

  font-weight: 700;

}

/* reveal on hover/focus of heading or button */
.article-body h2:hover .heading-copy,
.article-body h3:hover .heading-copy,
.heading-copy:focus-visible {

  opacity: 1;

}

/* feedback */
.heading-copy.is-copied::before {

  content: "✓";

}

.heading-copy:hover,
.heading-copy:focus-visible {

  border-color: rgba(11,15,30,.28);

  box-shadow: 0 1px 3px rgba(11,15,30,.08);

}

/* tighter on small screens — drive sizes via variables */
@media (max-width: 640px) {

  :root {

    --hl-badge-left: -24px;

    --hl-badge-size: 22px;

    /* keep the same nudge unless you want it different on mobile */
    --hl-badge-nudge: 1px;

  }

}

/* === Copy-link badge: rock-solid vertical centering + tiny nudges === */
:root {

  /* quick knobs if you ever need them */
  --hl-badge-left: -28px;
     /* gutter position (matches your current) */
  --hl-badge-size: 24px;
      /* matches your current */
  --hl-badge-nudge: 1px;
      /* +down / -up;
   adjust to taste (0–2px usually) */
}

.article-body .heading-copy {

  /* use variables but keep your look/feel */
  left: var(--hl-badge-left);

  width: var(--hl-badge-size);

  height: var(--hl-badge-size);


  /* true vertical centering with a gentle nudge */
  top: 50%;

  transform: translateY(calc(-50% + var(--hl-badge-nudge)));

  display: grid;
              /* centers the glyph perfectly inside the box */
  place-items: center;

  line-height: 1;
             /* kill baseline influence from fonts */
}

/* Safari renders ~1px higher;
 keep it level there as well */
@supports (-webkit-hyphens: none) {

  .article-body .heading-copy {

    transform: translateY(calc(-50% + var(--hl-badge-nudge)));

  }

}

/* If an H2 wraps to two+ lines, this keeps the badge centered on the whole block. */

/* ==================================== CONTENT TABLE (non-intro) ==================================== */

/* Default: wrap text, no forced horizontal scroll */
.content-table-wrapper {
   overflow: visible;

}

.content-table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
   margin-bottom: 22px;
   table-layout: auto;
   /* better wrapping */ color: #0B0F1E;

}

/* Header cells */
.content-table thead th {
   background-color: #f5f6fc;
   color: #2a2953;
   padding: 10px;
   border-bottom: 1px solid #CFD4F3;
   vertical-align: top;
   font-weight: 700;
   text-align: left;

}

/* Optional helper if you center some headers */
.content-table thead th.align-center, .content-table tbody td.align-center {
   text-align: center;

}

/* Body cells */
.content-table td {
   padding: 10px;
   border-bottom: 1px solid #CFD4F3;
   vertical-align: top;
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;
   /* wrap nicely on desktop */ hyphens: none;

}

/* True row headers when you intentionally use <th scope="row"> */
.content-table tbody th[scope="row"] {
   background-color: #f5f6fc;
   color: #2a2953;
   font-weight: 500;
   text-align: left;
   padding: 10px;
   border-bottom: 1px solid #CFD4F3;
   vertical-align: top;

}

/* Lists inside table cells: slightly tighter */
.content-table td ul, .content-table td ol {
   margin: 6px 0 0 18px;

}

/* Remove any generic first-column styling */
.content-table tbody td:first-child {
   background: transparent;
   color: inherit;

}

/* Feature access table tweaks */
.content-table.feature-access thead th {
   text-align: center;

}

.content-table.feature-access thead th:first-child {
   text-align: left;

}

.plan-head {
   font-weight: 700;

}

.plan-sub  {
   display:block;
   font-size: 12.5px;
   line-height: 1.2;
   opacity:.85;
   white-space: nowrap;

}

/* Swipe helper: hidden by default;
 shown when scroll is active below */
.content-table-wrapper .scroll-helper-text {
   display: none;

}

/* Glossary-specific safeguards (no HTML change needed) */
#schedule-glossary + .content-table-wrapper .content-table td:first-child, #schedule-glossary + .content-table-wrapper .content-table th:first-child {
   white-space: nowrap;

}

@media (max-width: 360px) {
   #schedule-glossary + .content-table-wrapper .content-table td:first-child, #schedule-glossary + .content-table-wrapper .content-table th:first-child {
     white-space: normal;

  }

}

/* Content tables: enable scroll earlier (≤1024px) and show helper */
@media (max-width: 1024px) {

  .content-table-wrapper {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-gutter: stable both-edges;

  }

  .content-table {
     table-layout: fixed;
     min-width: 800px;
     /* trigger horizontal scroll sooner */
  }

  .content-table-wrapper + .scroll-helper-text, .content-table-wrapper .scroll-helper-text {
     display: block !important;

  }

}

/* Optional: subtle edge-fade hint when scrolled */
@media (max-width: 1024px) {
   .content-table-wrapper {
     position: relative;
     -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
     mask-image: linear-gradient(to right, #000 92%, transparent);

  }

}

/* Tighten last-bullet and trailing-space cleanup inside tables */
.content-table td :is(ul,ol)>li:last-child {
  margin-bottom:0
}

.content-table td> :last-child {
  margin-bottom:0!important
}

.content-table td> :last-child> :last-child {
  margin-bottom:0!important
}

.content-table td li> :last-child {
  margin-bottom:0!important
}

.content-table td li>br:last-child,
.content-table td>br:last-child {
  display:none!important
}

.content-table td div:empty:last-child {
  display:none!important
}

/* ==== Content-table: tidy spacing when an image is the last child ==== */

/* 1) A naked <img> as the final node in the cell */
.content-table td > img:last-child {

  display: block;
               /* avoid inline baseline gaps */
  max-width: 100%;

  height: auto;

  margin-top: 8px;
              /* breathing room above */
  margin-bottom: 0;
             /* no extra tail space */
}

/* 2) A wrapper <div> that only contains an <img>, and that wrapper is last */
.content-table td > div:last-child > img:only-child,
.content-table td > span:last-child > img:only-child,
.content-table td > figure:last-child > img:only-child {

  display: block;

  max-width: 100%;

  height: auto;

  margin-top: 8px;

  margin-bottom: 0;

}

/* 3) Same cleanup inside list items living in table cells */
.content-table td li > img:last-child,
.content-table td li > div:last-child > img:only-child,
.content-table td li > span:last-child > img:only-child,
.content-table td li > figure:last-child > img:only-child {

  display: block;

  max-width: 100%;

  height: auto;

  margin-top: 8px;

  margin-bottom: 0;

}

/* 4) Hide stray spacers that stop the image being the true last node */
.content-table td > br:last-child,
.content-table td li > br:last-child,
.content-table td > div:empty:last-child,
.content-table td li > div:empty:last-child {
   display: none !important;

}

/* Only affect 2nd-level bullets inside the intro table */
.intro-table td ul ul {
   margin: .35em 0 .25em 18px;
   padding-left: 0;

}

.intro-table td ul ul li {
   margin-bottom: .22em;

}

.intro-table td ul ul li:last-child {
   margin-bottom: 0;

}

/* Reduce the gap between the lead-in line and its nested list */
.intro-table td :is(p, div) + ul {
   margin-top: .45em;

}

/* If a list follows a main-body image (or <figure>), don't auto add a gap. */
.article-body > img + ul, .article-body > img + ol, .article-body > figure + ul, .article-body > figure + ol {
   margin-top: 0 !important;

}

/* Neutralize left-drag offsets the editor may inject */
.article-body img.ui-draggable, .article-body img[style*="margin-left"] {
   margin-left: 0 !important;

}

/* Make a screenshot right after a list look the same as a screenshot inside a list item */
.article-body ul + img, .article-body ul + div > img, .article-body ul + p > img, .article-body ol + img, .article-body ol + div > img, .article-body ol + p > img {
   margin: .8em 0 1.1em !important;
   box-shadow: 0 1px 2px rgba(11, 15, 30, .06);

}

/* === Images inside nested bullets (UL inside an OL step) === */
.article-body ol li ul li > img, .article-body ol li ul li > div > img, .article-body ol li ul li > p > img, .article-body ul li > img, .article-body ul li > div > img, .article-body ul li > p > img {
   display: block;
   margin: 0.7em 0 1.0em !important;

}

/* The editor often adds a <br/> after the image — hide it */
.article-body li img + br {
   display: none;

}

/* If an image is immediately followed by another list, keep a small nudge */
.article-body li > img + ul, .article-body li > img + ol, .article-body li > div > img + ul, .article-body li > div > img + ol, .article-body li > p > img + ul, .article-body li > p > img + ol {
   margin-top: 0.25em !important;

}

/* List rhythm override */
.article-body :is(ul, ol) > li {

  margin-bottom: .5em;
      /* was .4em */
  line-height: 1.5;

}

/* ==================== LIST TEST SPACING SUB POINTS ==================== */
/* Step 1 only: the OL immediately after the H3 */
#step-1-create-quote + ol .styled-list {

  /* kill the big tail gap after nested lists */
  margin-bottom: 0 !important;

}

/* compact the bullets within each nested list */
#step-1-create-quote + ol .styled-list > li {

  margin-bottom: 0.3em !important;
     /* tweak if you want tighter/looser */
}

#step-1-create-quote + ol .styled-list > li:last-child {

  margin-bottom: 0 !important;
         /* no extra space after the last sub-point */
}

/* remove stray <br> nodes that add “mystery” space */
#step-1-create-quote + ol li > br:last-child,
#step-1-create-quote + ol li > *:last-child > br:last-child,
#step-1-create-quote + ol .styled-list > li > br:last-child {

  display: none !important;

}

/* optional: if you want the intro lines ("Create from:", "Pricing:", "Apply tax:")
   tight to the nested list beneath them */
#step-1-create-quote + ol li > div:has(> b) {

  margin-bottom: 0.25em;
                /* keeps the label close to its bullets */
}

#step-1-create-quote + ol li > ul.styled-list:last-of-type {

  margin-bottom: 0.15em;

}

#step-1-create-quote + ol > li > ul + b {

  margin-top: 0.3em;

}

#step-1-create-quote + ol li br:last-child {
   display: none;

}

/* ==================== END LIST TEST SPACING SUB POINTS ==================== */

/* ==================== Gating chips / pills (single-hyphen) ==================== */

/* Small inline badge (inside sentences/lists) */
.inline-gate {

  display:inline-flex;
   align-items:center;
   gap:6px;

  font-size:12px;
   opacity:.9;
   margin:0 0 6px 0;

}

.inline-gate .ic {
   display:inline-block;
   line-height:1;
   font-size:14px;

}

/* Linked chip and static pill */
.gate-chip,
.pill {

  display:inline-flex;
   align-items:center;
   gap:6px;

  padding:3px 8px;
   border-radius:999px;
   font-size:12.5px;
   line-height:1.2;

  font-weight:600;
   white-space:nowrap;
   vertical-align:baseline;

  border:1px solid #E9ECF8;
   background:#F7F8FD;
   color:#5D4DB1;
   text-decoration:none;

}

.gate-chip:hover, .gate-chip:focus {
   background:#F0F2FC;
   color:#5D4DB1;
   text-decoration:none;

}

.gate-chip .ic, .pill .ic {
   display:inline-block;
   line-height:1;
   font-size:16px;

}

/* Larger variant placed under headings */
.gate-chip-lg, .pill-lg {
   font-size:16px;
   padding:8px 14px;

}

.gate-under-title {
   display:block;
   margin:6px 0 10px;

}

/* Headings that include an inline pill/chip */
.h-inline {
   display:inline-flex;
   align-items:baseline;
   gap:.42rem;
   margin:1.25rem 0 .5rem;

}

.h-inline .h-title {
   color:inherit;
   font:inherit;

}

.h-inline .pill {

  padding:.26rem .58rem;
   border:1px solid #E2E8F0;
   border-radius:999px;

  background:#F8FAFC;
   color:#334155;
   font:500 11.5px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  vertical-align:baseline;

}

.h-inline .pill .ic {
   line-height:1;

}

/* Heading + CTA row */
.section-head {

  display:flex;

  align-items:center;
            /* aligns text and button nicely */
  justify-content:space-between;

  flex-wrap:wrap;

  gap:10px 12px;
                 /* small breathing room when it wraps */
  margin: 0 0 8px;

}

.section-head h2 {

  margin:0;
                      /* use global h3 color/size */
  flex: 1 1 auto;
                /* lets the title claim space first */
}

.section-head .pendobtn {

  margin-left:auto;
              /* hug the right edge */
  line-height:1;
                 /* crisp vertical rhythm */
  white-space:nowrap;
            /* prevent awkward two-line CTA */
  padding: 8px 14px;
             /* slightly slimmer button */
  font-size: 15px;
               /* matches body scale */
  border-radius: 999px;
          /* fully pill-shaped (visually matches your shot) */
}

/* Mobile: stack cleanly with a gentle nudge */
@media (max-width: 640px) {

  .section-head {

    align-items:flex-start;
        /* heading top-aligns with CTA below */
  }

  .section-head .pendobtn {

    margin-left:0;

  }

}

/* Slightly reduce space between this block and following content */
.section-head + * {
   margin-top: 6px;

}

/* If a copy-link badge sits on the h3, keep it centered */
.section-head h2 {
   position: relative;

}

/* Table placement (left term column) */
.content-table tbody td.term-cell {

  width:25%;
   white-space:nowrap;
   vertical-align:top;
   color:#2a2953;
   font-weight:400;

}

@media (max-width:360px) {
   .content-table tbody td.term-cell {
     white-space:normal;

  }

}

.content-table .term-cell .gate-chip,
.content-table .term-cell .pill {
   align-items:center;
   line-height:1.2;

}

.content-table .term-cell .gate-chip .ic,
.content-table .term-cell .pill .ic {
   font-size:16px;
   line-height:1;

}

/* Wrap-friendly heading chips on small screens */
@media (max-width:640px) {

  .h-inline {
     flex-wrap:wrap;

  }

  .h-inline .pill {
     order:2;
     margin-top:.35rem;
     white-space:normal;

  }

}

/* ==================================== CALLOUTS ==================================== */

/* Base wrapper for ALL non-gating callouts */
.callout {
   display: flex;
   align-items: flex-start;
   border-radius: 6px;
   padding: 12px 16px;
   margin: 24px 0;
   color: #0B0F1E;

}

/* Content hygiene inside callouts */
.callout :is(ul, ol) {
   margin-bottom: 0;

}

.callout .styled-list li:last-child {
   margin-bottom: 0;

}

.callout .styled-list > li { 
   margin-bottom: 0.4em; 
}

.callout .styled-list > li:last-child { 
   margin-bottom: 0; 
}


.callout > :last-child > :last-child {
   margin-bottom: 0;

}

.callout :is(p, li, div) > br:last-child {
   display: none;

}

/* Shared icon + content for non-gating */
.callout .callout-icon {
   font-size: 20px;
   line-height: 1;
   display: flex;
   align-items: flex-start;
   margin-top: 2px;
   padding-right: 10px;

}

.callout .callout-content {
   line-height: 1.6;

}

/* Type variants (non-gating) */
.callout-tip {
   border-left: 4px solid #895EF7;
   background: #F5F4FB;

}

.callout-permissions {
   border-left: 4px solid #C5C9D6;
   background: #F6F7F9;

}

.callout-user {
   border-left: 4px solid #4A90E2;
   background: #E8F0FA;

}

.callout-restricted {
   border-left: 4px solid #F45721;
   background: #FFF4EE;

}

.callout-beta {
   border-left: 4px solid #895EF7;
   background: #F5F4FB;

}

.callout-note {
   border-left: 4px solid #4A90E2;
   background: #EEF4FF;

}

.callout-caution {
   border-left: 4px solid #FFB300;
   background: #FFF8E1;

}

.callout-warning {
   border-left: 4px solid #E53935;
   background: #FDECEA;

}

.callout-privacy {
   border-left: 4px solid #B0BEC5;
   background: #F5F7F8;

}

.callout-scenario {
   border-left: 4px solid #4A90E2;
   background: #F9F9F9;

}

/* Experience variation / account differences */
.callout-variation {
   background:#F9FAFB;
   border-top:3px solid #C5C9D6;

}

/* Insight (neutral-positive info) */
.callout-insight {
   border-left: 4px solid #0288D1;
   background: #E3F2FD;

}

/* Inline/one-liner formulas */
.callout-formula {
   display: inline-block;
   border: 1px solid #E0E0E0;
   background: #FAFAFA;
   border-radius: 4px;
   margin: 6px 0;
   padding: 6px 10px;
   font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
   line-height: 1.4;
   max-width: 100%;
   overflow-wrap: anywhere;
   white-space: normal;

}

.callout-formula.block {
   display: block;
   padding: 8px 12px;
   margin: 8px 0;

}

.callout-formula.center {
   text-align: center;

}

.callout-formula .op {
   white-space: nowrap;

}

.callout-learn {
   border-left: 4px solid #1E857C;
   background-color: #E6F4F3;
   padding: 12px 16px;
   margin: 24px 0;
   border-radius: 4px;
   font-size: 15px;
   color: #0B0F1E;
   display: flex;
   align-items: flex-start;

}

/* ============ */
/* Banner callouts (top-of-article) */
/* ============ */

/* Shared banner layout */
.callout-banner {
   display: flex;
   align-items: baseline;
   padding: 12px 16px;
   margin-bottom: 10px;
   border-radius: 0 0 6px 6px;
   color: #0B0F1E;

}

/* Text block */
.callout-banner .callout-text {
   line-height: 1.5;

}

/* Icon: fixed box + baseline alignment */
.callout-banner .callout-icon {
   width: 20px;
   height: 20px;
   font-size: 18px;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 10px;
   flex-shrink: 0;
   transform: translateY(1px);

}

.callout-banner + .crosslink {
   margin-top: 4px;

}

/* Theme colors unchanged */
.callout-gating {
   background: #F9F9FB;
   border-top: 3px solid #5D4DB1;

}

.callout-gating .callout-text a {
   color: #5D4DB1;
   text-decoration: underline;

}

.callout-deprecation {
   background: #FFF8E1;
   border-top: 3px solid #FF9800;

}

.callout-deprecation .callout-text a {
   color: #F57C00;
   text-decoration: underline;

}

.callout-deprecation .callout-text strong:first-child {
   display: block;
   margin-bottom: 4px;

}

.callout-legacy {
   font-size: 13px;
   color: #555;

}

/* --- Safari-specific tiny nudge (emoji sit a bit higher there) --- */
@supports (-webkit-hyphens: none) {

  .callout-banner .callout-icon {
     transform: translateY(2px);

  }

  .callout-deprecation .callout-icon {
     transform: translateY(3px);

  }

  .callout-gating .callout-icon {
     transform: translateY(2px);

  }

}

/* If CTA sits on its own line, add breathing room */
.callout-banner .callout-text br + a {
   margin-top: 4px;

}

.callout-banner .callout-text a:hover, .callout-banner .callout-text a:focus {
   text-decoration: none;

}

/* Themes (duplicates kept intentionally for legacy selectors) */
.callout-gating {
   background-color: #F9F9FB;
   border-top: 3px solid #5D4DB1;

}

.callout-gating .callout-text a {
   color: #5D4DB1;

}

.callout-deprecation {
   background-color: #FFF8E1;
   border-top: 3px solid #FF9800;

}

.callout-deprecation .callout-text a {
   color: #F57C00;
   font-weight: 500;

}

.callout-deprecation .callout-text strong:first-child {
   display: block;
   margin-bottom: 4px;

}

/* Accessible helper */
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;

}

/* Banner → Crosslink spacing */
.callout-banner + .crosslink {
   margin-top: 4px;

}

/* Cross-link pill */
.crosslink {
   display: inline-flex;
   align-items: center;
   gap: 6px 10px;
   background: #F7F8FD;
   border: 1px solid #E9ECF8;
   border-radius: 9999px;
   padding: 5px 10px;
   font-size: 14px;
   line-height: 1.4;
   color: #0B0F1E;
   margin: 8px 0 10px;
   gap: 6px 10px;

}

.crosslink__label {
   color: #767C90;
   font-weight: 500;

}

.crosslink a {
   text-decoration: none;

}

.crosslink a:hover {
   text-decoration: underline;

}

.crosslink a:focus-visible {
   outline: 2px solid #895EF7;
   outline-offset: 2px;
   border-radius: 9999px;

}

/* Don’t rely on <br/> for spacing */
.crosslink br {
   display: none !important;

}

/* Keep some space before the “Feature overview” label */
.crosslink + .intro-table-label {
   margin-top: 12px;

}

/* Optional: slightly smaller pill on very small screens */
@media (max-width: 480px) {
   .crosslink {
     font-size: 13px;
     line-height: 1.35;
     padding: 5px 9px;

  }

}

/* ==== Utilities ==== */
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;

}

/* Base text */
body {
   color: #0B0F1E;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

}

a {
   color: inherit;

}

/* ==== 1) Subtle inline link ==== */
.learn-inline a {
   text-decoration: underline;

}

.learn-inline a:hover, .learn-inline a:focus {
   text-decoration: none;

}

/* ==== 2) Eyebrow link with icon ==== */
.learn-eyebrow {
   margin: 12px 0;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;

}

.learn-eyebrow a {
   text-decoration: underline;
   color: #1E857C;
   font-weight: 500;

}

.learn-eyebrow a:hover, .learn-eyebrow a:focus {
   text-decoration: none;

}

/* ==== 3) Ghost button CTA ==== */
.learn-ghost {
   display: inline-block;
   padding: 8px 12px;
   border: 1px solid #1E857C;
   border-radius: 6px;
   color: #1E857C;
   text-decoration: none;
   font-weight: 500;
   background: transparent;

}

.learn-ghost:hover, .learn-ghost:focus {
   background: #E6F4F3;

}

/* ==== 4) Compact chip/pill ==== */
.learn-chip {
   display: inline-block;
   padding: 4px 10px;
   border-radius: 999px;
   background: #F1F7F6;
   color: #1E857C;
   text-decoration: none;
   font-weight: 500;
   border: 1px solid #D2EAE7;

}

.learn-chip:hover, .learn-chip:focus {
   background: #E6F4F3;

}

/* ==== 5) Right-aligned utility link ==== */
.learn-utility {
   display: flex;
   justify-content: flex-end;
   margin: 8px 0 16px;

}

.learn-utility a {
   color: #1E857C;
   text-decoration: underline;
   font-weight: 500;

}

.learn-utility a:hover, .learn-utility a:focus {
   text-decoration: none;

}

/* ==== 6) Slim divider card ==== */
.learn-row {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   border: 1px solid #EEF1F4;
   border-radius: 8px;
   background: #F9FAFB;
   margin: 16px 0;
   font-size: 15px;

}

.learn-row a {
   color: #1E857C;
   text-decoration: underline;
   font-weight: 500;

}

.learn-row a:hover, .learn-row a:focus {
   text-decoration: none;

}

.lr-ic {
   width: 18px;
   height: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;

}

/* ==== 7) Footer strip ==== */
.learn-footer {
   border-top: 1px solid #EEF1F4;
   margin-top: 32px;
   padding-top: 12px;

}

.learn-footer a {
   color: #1E857C;
   text-decoration: underline;
   font-weight: 500;

}

.learn-footer a:hover, .learn-footer a:focus {
   text-decoration: none;

}

/* ==================================== IMAGES ==================================== */

/* Standalone images in the main body */
.article-body img {
   display: block;
   max-width: 100%;
   height: auto;
   margin: 0;
   border-radius: 6px;
   box-shadow: 0 1px 2px rgba(11, 15, 30, .06);

}

/* Absolute overflow guard — fights any inline width attr from the CMS */
.article-body img {

  max-width: 100% !important;

  height: auto;

}

/* Make screenshots read naturally next to body text — cap to column, not viewport */
.article-body img[alt*="Screenshot"],
.article-body img[src*="Screenshot"],
.article-body img[alt*="screenshot"],
.article-body img[src*="screenshot"] {

  display:block;

  margin-inline:auto;

  /* never overflow the column, but don't exceed our intended large size */
  max-inline-size: min(100%, 980px);

  /* keep natural aspect */
  height:auto;

  box-shadow: 0 1px 2px rgba(11,15,30,.06);

  border-radius: 6px;

}

/* Slightly tighter cap when screenshots live inside list steps */
.article-body ol li > :is(img, div > img) {

  max-inline-size: min(100%, 900px);

}

/* --- Gentle gap when a paragraph/intro is followed by a list --- */
/* Scope to the article only so it doesn't leak into nav/footers */
.article-body :is(p, div, .lead, .intro) + :is(ul, ol) {
  /* small, responsive nudge; tweak the middle value to taste */
  margin-top: clamp(0.35rem, 0.6vw, 0.6rem);
}

/* If the list is the very first thing in a section, keep it tight */
.article-body :is(ul, ol):first-child {
  margin-top: 0;
}

/* Don’t affect nested lists */
.article-body :is(ul, ol) :is(ul, ol) {
  margin-top: 0;
}

.article-body li > b {
  display: inline-block;
  margin-top: 0.2em;
}

/* Optional: a hair less gap on small screens */
@media (max-width: 640px) {
  .article-body :is(p, div, .lead, .intro) + :is(ul, ol) {
    margin-top: 0.4rem;
  }
}


/* eliminate any stray gap */
.media-card {

  margin: 1.5rem 0 2rem;

  line-height: 0;

}

.media-img {

  display: block;

  width: 100%;

  height: auto;

  margin: 0 !important;

  border-radius: 12px 12px 0 0;

  /* lighter shadow to avoid a visible “lip” above the caption */
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);

  background: #f7f8fa;

}

/* caption flush to image, no seam */
.media-caption {

  line-height: 1.35;

  padding: .75rem 1rem;

  font-size: .9rem;

  color: #374151;

  background: #f2f4f7;

  border: 1px solid #e5e7eb;

  border-top: 0;

  border-radius: 0 0 12px 12px;

  box-shadow: 0 1px 3px rgba(0,0,0,.03);

  margin-top: -1px;
   /* closes the 1px seam */
}

/* ==================================== AVAILABILITY ICONS ==================================== */ :root {
   --tw-purple: #895EF7;
   --tw-pink: #FF22B1;

}
 .content-table td.availability-cell {
   padding-top: 8px;
   padding-bottom: 8px;

}
 .icon-available, .icon-unavailable {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: clamp(18px, 1.25vw, 20px);
   font-weight: 800;
   line-height: 1;
   min-width: 1.4em;
   min-height: 1.2em;

}
 .icon-available::before {
   content: "✔";
   color: var(--tw-purple);

}
 .icon-unavailable::before {
   content: "✘";
   color: var(--tw-pink);

}

/* WYSIWYG wrappers — keep tight */
.article-body p > img, .article-body div > img, .article-body figure, .article-body figure > img {
   margin: 0;

}

/* ✅ List-item images: give screenshots block spacing anywhere in the <li>
   (no :has/@supports). Icons stay inline. */
.article-body li > img:not(.icon-inline, .icon-inline-text, .icon-inline-tight, .icon-inline-flush),
.article-body li > p:only-child > img:only-child,
.article-body li > div:only-child > img:only-child,
.article-body li > figure:only-child > img:only-child {

  display: block !important;

  margin: .8em 0 1.1em !important;

  box-shadow: 0 1px 2px rgba(11, 15, 30, .06);

  border-radius: 6px;

}

/* Keep mid-sentence icons tight */
.article-body li img.icon-inline,
.article-body li img.icon-inline-text,
.article-body li img.icon-inline-tight,
.article-body li img.icon-inline-flush {

  display: inline-block !important;

  margin: 0 4px !important;
     /* -tight/-flush can zero this */
  vertical-align: -0.12em !important;

  box-shadow: none !important;

  border-radius: 0 !important;

}

/* Old pages heuristic where icons lack classes */
.article-body li img[src*="icon"],
.article-body li img[alt*="icon"] {

  display: inline-block !important;

  margin: 0 4px !important;

  vertical-align: -0.12em !important;

  box-shadow: none !important;

  border-radius: 0 !important;

}

/* ✅ NEW: inline icons inside list steps never get block margins */
.article-body li img.icon-inline,
.article-body li img.icon-inline-text,
.article-body li img.icon-inline-tight,
.article-body li img.icon-inline-flush {

  display: inline-block !important;

  margin: 0 4px !important;
   /* -tight/-flush will zero/adjust as needed */
  vertical-align: -0.12em !important;

  box-shadow: none !important;

  border-radius: 0 !important;

}

/* ✅ NEW: optional heuristic for old pages with 'icon' in src/alt */
.article-body li img[src*="icon"],
.article-body li img[alt*="icon"] {

  display: inline-block !important;

  margin: 0 4px !important;

  vertical-align: -0.12em !important;

  box-shadow: none !important;

  border-radius: 0 !important;

}

/* ✅ Screenshots inside list items—block spacing even when wrapped */
.article-body li img:not(.icon-inline, .icon-inline-text, .icon-inline-tight, .icon-inline-flush) {

  display: block !important;

  margin: .8em 0 1.1em !important;
     /* space above & below */
  box-shadow: 0 1px 2px rgba(11, 15, 30, .06);

  border-radius: 6px;

}

/* Keep mid-sentence icons tight (no block spacing) */
.article-body li img.icon-inline,
.article-body li img.icon-inline-text,
.article-body li img.icon-inline-tight,
.article-body li img.icon-inline-flush {

  display: inline-block !important;

  margin: 0 4px !important;
     /* -tight/-flush may zero this */
  vertical-align: -0.12em !important;

  box-shadow: none !important;

  border-radius: 0 !important;

}

/* Old pages heuristic where icons lack classes */
.article-body li img[src*="icon"],
.article-body li img[alt*="icon"] {

  display: inline-block !important;

  margin: 0 4px !important;

  vertical-align: -0.12em !important;

  box-shadow: none !important;

  border-radius: 0 !important;

}

/* Images inside tables */
.intro-table td img, .content-table td img {
   margin: .5em 0 !important;
   border-radius: 6px;
   box-shadow: 0 1px 2px rgba(11, 15, 30, .06);

}

/* ================== content-table: cells that end with an image ================== */

/* 1) Bare <img> as the true last child */
.content-table td > img:last-child {

  display:block !important;
                   /* avoid inline baseline gap */
  margin: 8px 0 0 !important;
                 /* space above, none below */
}

/* 2) Wrapper (div/span/figure) is last and contains only an <img> */
.content-table td > div:last-child > img:only-child,
.content-table td > span:last-child > img:only-child,
.content-table td > figure:last-child > img:only-child {

  display:block !important;

  margin: 8px 0 0 !important;

}

/* 3) Same logic inside list items within table cells */
.content-table td li > img:last-child,
.content-table td li > div:last-child > img:only-child,
.content-table td li > span:last-child > img:only-child,
.content-table td li > figure:last-child > img:only-child {

  display:block !important;

  margin: 8px 0 0 !important;

}

/* 4) Hide stray spacers that stop the image being the true last node */
.content-table td > br:last-child,
.content-table td li > br:last-child,
.content-table td > div:empty:last-child,
.content-table td li > div:empty:last-child {
   display: none !important;

}

/* Only affect 2nd-level bullets inside the intro table */
.intro-table td ul ul {
   margin: .35em 0 .25em 18px;
   padding-left: 0;

}

.intro-table td ul ul li {
   margin-bottom: .22em;

}

.intro-table td ul ul li:last-child {
   margin-bottom: 0;

}

/* Reduce the gap between the lead-in line and its nested list */
.intro-table td :is(p, div) + ul {
   margin-top: .45em;

}

/* If a list follows a main-body image (or <figure>), don't auto add a gap. */
.article-body > img + ul, .article-body > img + ol, .article-body > figure + ul, .article-body > figure + ol {
   margin-top: 0 !important;

}

/* Neutralize left-drag offsets the editor may inject */
.article-body img.ui-draggable, .article-body img[style*="margin-left"] {
   margin-left: 0 !important;

}

/* Make a screenshot right after a list look the same as a screenshot inside a list item */
.article-body ul + img, .article-body ul + div > img, .article-body ul + p > img, .article-body ol + img, .article-body ol + div > img, .article-body ol + p > img {
   margin: .8em 0 1.1em !important;
   box-shadow: 0 1px 2px rgba(11, 15, 30, .06);

}

/* === Images inside nested bullets (UL inside an OL step) === */
.article-body ol li ul li > img, .article-body ol li ul li > div > img, .article-body ol li ul li > p > img, .article-body ul li > img, .article-body ul li > div > img, .article-body ul li > p > img {
   display: block;
   margin: 0.7em 0 1.0em !important;

}

/* The editor often adds a <br/> after the image — hide it */
.article-body li img + br {
   display: none;

}

/* If an image is immediately followed by another list, keep a small nudge */
.article-body li > img + ul, .article-body li > img + ol, .article-body li > div > img + ul, .article-body li > div > img + ol, .article-body li > p > img + ul, .article-body li > p > img + ol {
   margin-top: 0.25em !important;

}

/* ==================================== VIDEOS ==================================== */

.video-embed {
   width: 100%;
   max-width: 960px;
   margin-inline: auto;
   aspect-ratio: 16/9;
   border-radius: 16px;
   overflow: hidden;
   background: #f5f6fc;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
   position: relative;

}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {

  .video-embed {
     padding-bottom: 56.25%;
     height: 0;

  }

  .video-embed > iframe, .video-embed > img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;

  }

}

/* When the iframe is in, it just fills the box */
.video-embed iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;

}

/* Caption */
.video-caption {
   margin-top: 8px;
   font-size: .9rem;
   line-height: 1.4;
   color: #6b7280;

}

@media print {
   .video-embed iframe {
     display: none !important;

  }
   .video-caption, .video-caption a {
     display: inline !important;

  }

}

/* Thumbnail behavior */
.video-embed-thumb img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   /* prevents cropping */ background: #f5f6fc;
   /* shows behind any letterboxing */
}

/* If you ever want edge-to-edge crop instead, add .fit-cover */
.video-embed.fit-cover img {
   object-fit: cover;

}

/* Subtle scrim so the badge always reads;
 stronger on hover */
.video-embed-thumb::after {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient( ellipse at center, rgba(11, 15, 30, .06) 0%, rgba(11, 15, 30, .22) 100% );
   opacity: .22;
   transition: opacity .18s ease-out;
   pointer-events: none;

}

.video-embed-thumb:hover::after {
   opacity: .36;

}

/* TEAMWORK-BRANDED PLAY BADGE */
:root {
   --tw-purple: #895EF7;
   --tw-pink: #FF22B1;

}

.video-play, .video-thumb__play {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: clamp(56px, 9vw, 96px);
   height: clamp(56px, 9vw, 96px);
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: radial-gradient(120% 120% at 30% 30%, var(--tw-pink) 0%, var(--tw-purple) 65%);
   box-shadow: 0 8px 24px rgba(137, 94, 247, .35), 0 3px 10px rgba(11, 15, 30, .18), inset 0 0 0 6px rgba(255, 255, 255, .75);
   font-size: 0;
   line-height: 0;
   color: transparent;
   transition: transform .12s ease-out, box-shadow .12s ease-out;

}

/* Crisp white triangle */
.video-play::before, .video-thumb__play::before {
   content: "";
   width: 0;
   height: 0;
   border-left: clamp(16px, 2.4vw, 24px) solid #fff;
   border-top: clamp(10px, 1.6vw, 14px) solid transparent;
   border-bottom: clamp(10px, 1.6vw, 14px) solid transparent;
   transform: translateX(2px);

}

.video-embed-thumb:hover .video-play, .video-embed-thumb:hover .video-thumb__play {
   transform: translate(-50%, -50%) scale(1.06);

}

/* Keyboard focus ring for a11y if the thumb is focusable */
.video-embed-thumb:focus-visible {
   outline: 2px solid (var(--tw-purple));
   outline-offset: 4px;
   border-radius: 16px;

}

/* Small screens: grow badge slightly so it still pops */
@media (max-width: 640px) {
   .video-play, .video-thumb__play {
     width: clamp(64px, 14vw, 104px);
     height: clamp(64px, 14vw, 104px);

  }

}

/* ==================================== END — Your remaining site/header styles follow unchanged ==================================== */

.search-inner {
   background: transparent url('https://s3.amazonaws.com/tw-helpdocs/others/Head-bg.jpg') center top repeat-x;

}

.search--row {
   padding: 100px 0;

}

.search--row, .site--header {
   background: #1d1c39;

}

.site--header .row {
   box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);

}

.search--row.search-inner {
   padding: 90px 0;

}

.custom-site-header-color {
   height: 60px;
   background: transparent;
   margin-bottom: -60px;

}

.search--row {
   padding-top: 160px;

}

.search--row .row-title a, .search-inner h1, .history-path a {
   color: #fff !important;

}

.search--row.search-inner .search_input {
   border: none;

}

.header--nav a {
   color: #fff !important;
   padding: 0 15px;
   border: 1px solid #fff;
   border-radius: 4px;

}

.container {
   margin: 0 auto;
   padding: 0 50px;

}

.note {
   padding: 20px;
   text-align: left;
   border-radius: 3px;
   background-color: #EEF1F6;
   color: #005C6F;

}

/* Category images (kept) */
.category-img-463 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/projects/just-signed-icon.svg) no-repeat center;

}

.category-img-465 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/projects/Projects-settings.svg) no-repeat center;

}

.category-img-3672 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/projects/timeicon_homepagev3_fill.svg) no-repeat center;

}

.category-img-475 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/projects/projects-overview.svg) no-repeat center;

}

.category-img-467 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/projects/integrations.svg) no-repeat center;

}

.category-img-1146 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/projects/projects-tips.svg) no-repeat center;

}

.category-img-486 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/projects/advanced-settings.svg) no-repeat center;

}

.category-img-1141 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/projects/Working-as-a-team.svg) no-repeat center;

}

.category-img-1145 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/projects/pricing-and-billing.svg) no-repeat center;

}

.category-img-3399 {
   background: url(https://s3.amazonaws.com/tw-helpdocs/svgs/agency-icon.svg) no-repeat center;

}

/* Lots of bubbles & badges — all retained */
.th-curriculum {
   color: #0390a5;

}

.kbd {
   background: #fff;
   border: 1px #b5b5b5 solid;
   border-radius: 4px;
   color: #808080;
   padding: 2px 6px;

}

.kbdslate {
   background: #1d1c39;
   border: 1px #b5b5b5 solid;
   border-radius: 4px;
   color: #fff;
   padding: 2px 6px;

}

.kbdgrey {
   background: #eaeaea;
   border-radius: 4px;
   padding: 2px 6px;
   color: #000;

}

.kbdindigo {
   background: #dbe2fb;
   border-radius: 4px;
   padding: 2px 6px;
   color: #000;

}

.kbdblue {
   background: #EDF0FB;
   border: 1px #48468f solid;
   border-radius: 4px;
   color: #48468f;
   padding: 2px 6px;

}

.hr {
   margin-top: 30px;
   margin-bottom: 30px;
   color: #CFD4F3;

}

.notebox {
   background-color: #eef0fb;
   padding: 15px;

}

.noteboxlight {
   background-color: #f5f6f6;
   padding: 10px;
   margin: auto;
   width: 80%;

}

.noteboxlightpurple {
   background-color: #f0f1f9;
   padding: 10px;
   margin: auto;
   width: 80%;

}

.gatingbannerfl {
   float: left;

}

.gatingbannerfr {
   float: right;
   font-size: 15px;

}

.highlightbubblefitcontent {
   background: #fff3d8;
   width: fit-content;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.standard {
   background: #98E9F0;
   width: fit-content;
   margin: 5px 0;
   padding: 5px 10px;
   border-radius: 15px;
   vertical-align: middle;

}

.client {
   background: #FF9EDD;
   width: fit-content;
   margin: 5px 0;
   padding: 5px 10px;
   border-radius: 15px;
   vertical-align: middle;

}

.collaborator {
   background: #FFA885;
   width: fit-content;
   margin: 5px 0;
   padding: 5px 10px;
   border-radius: 15px;
   vertical-align: middle;

}

.contact {
   background: #BEA3FF;
   width: fit-content;
   margin: 5px 0;
   padding: 5px 10px;
   border-radius: 15px;
   vertical-align: middle;

}

.gatingbubblefitcontent {
   background: #eef0fb;
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.gatingbubblemax {
   background: #eef0fb;
   width: 100%;
   padding: 10px 20px;
   border-radius: 25px;
   vertical-align: middle;

}

.gatingbubblemaxmobile {
   background: #eef0fb;
   width: 100%;
   padding: 10px 20px;
   border-radius: 25px;
   vertical-align: middle;

}

.gatingbubbletable {
   background: #eef0fb;
   width: 100%;
   margin: 10px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.bulbbubblefitcontent {
   background: #f3eefe;
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.bulbbubblemax {
   background: #f3eefe;
   width: 100%;
   margin: 10px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.warningbubblefitcontent {
   background: #fff3d8;
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.warningbubblemax {
   background: #fff3d8;
   width: 100%;
   margin: 10px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.keybubblefitcontent {
   background: #fff1ec;
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.keybubblemax {
   background: #fff1ec;
   width: 100%;
   margin: 10px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.pendobubblefitcontent {
   background: rgba(197, 242, 242, .5);
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.pendobubblemax {
   background: rgba(197, 242, 242, .5);
   width: 100%;
   padding: 10px 20px;
   border-radius: 25px;
   vertical-align: middle;

}

.learnbubblemax {
   background: rgba(197, 242, 242, .5);
   width: 100%;
   margin: 10px 0;
   padding: 5px 15px;
   border-radius: 15px;

}

.learnbubblefitcontent {
   background: rgba(197, 242, 242, .5);
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.formulabubblefitcontent {
   background: #ebebeb;
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.formulabubblemax {
   background: #ebebeb;
   width: 100%;
   margin: 10px 0;
   padding: 5px 15px;
   border-radius: 15px;
   vertical-align: middle;

}

.formulareports {
   background: #ebebeb;
   width: 100%;
   margin: 5px 0;
   padding: 10px 15px;
   border-radius: 15px;

}

.emailbubblefitcontent {
   background: #f5f5f5;
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;

}

.emailbubblemax {
   background: #f5f5f5;
   width: 100%;
   margin: 10px 0;
   padding: 5px 15px;
   border-radius: 15px;

}

.notebubblefitcontent {
   background: #e4f1fe;
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;

}

.notebubblemax {
   background: #e4f1fe;
   width: 100%;
   margin: 10px 0;
   padding: 5px 15px;
   border-radius: 15px;

}

.featurebubblefitcontent {
   background: #ebfbf2;
   width: fit-content;
   margin: 15px 0;
   padding: 5px 15px;
   border-radius: 15px;

}

.featurebubblemax {
   background: #ebfbf2;
   width: 100%;
   margin: 10px 0;
   padding: 5px 15px;
   border-radius: 15px;

}

.academybutton {
   background: #895EF7 !important;
   border: none;
   border-radius: 25px;
   color: #fff !important;
   padding: 10px 20px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   transition: .4s;

}

.academybuttonfr {
   background: #895EF7;
   float: right;
   border: none;
   border-radius: 25px;
   color: #fff;
   padding: 5px 15px;
   text-align: center;
   vertical-align: bottom;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   transition: .4s;

}

.pendobtn {
   margin-bottom: 0;
   background: #895EF7 !important;
   border: none;
   border-radius: 25px;
   color: #fff !important;
   padding: 5px 15px;
   text-align: center;
   vertical-align: bottom;
   text-decoration: none !important;
   display: inline-block;
   font-size: 16px;
   cursor: pointer;
   transition: .4s;

}

.academybtn {
   background: #895EF7;
   border: none;
   border-radius: 25px;
   color: #fff;
   padding: 10px 20px;
   text-align: center;
   vertical-align: bottom;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   transition: .4s;

}

.h3withbutton {
   width: 100%;
   height: auto;
   padding: 10px;
   padding-right: 5px;
   border-radius: 25px;
   display: table-cell;

}

.h3fl {
   margin-left: 0px;

}

.h3withbuttonmobile {
   height: auto;
   width: 100%;
   padding: 10px 20px;
   border-radius: 25px;
   vertical-align: middle;

}

.academybutton:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.12), 0 17px 50px 0 rgba(0, 0, 0, 0.12);

}

.float-container {
   border: 3px solid #fff;
   padding: 20px;

}

.float-child-right {
   width: 5%;
   float: left;
   padding: 20px;
   border: 2px solid red;

}

.float-child-right {
   width: 95%;
   float: right;
   padding: 20px;
   border: 2px solid red;

}

.codeno {
   background: #FDD6E0;
   border: none;
   border-radius: 4px;
   color: #F13063;
   padding: 2px 6px;

}

.codeyes {
   background: #DEF4EA;
   border: none;
   border-radius: 4px;
   color: #59C895;
   padding: 2px 6px;

}

.mention {
   background: #A3E0FC;
   border: 1px #1d1c39 solid;
   border-radius: 4px;
   color: #808080;
   padding: 2px 6px;

}

/* Responsive visibility helpers */
@media only screen and (max-width: 500px) {

  .table-bordered-rw {
     display: none;

  }

  .table-bordered-mobile-rw {
     display: block;
     overflow: scroll;

  }

  .gating-bubble-max {
     display: none;

  }

  .gating-bubble-max-mobile {
     display: block;

  }

}

@media only screen and (min-width: 500px) {

  .table-bordered-rw {
     display: block;

  }

  .table-bordered-rw-in-app {
     display: block;
     overflow: scroll;

  }

  .table-bordered-mobile-rw {
     display: none;

  }

  .gating-bubble-max {
     display: block;

  }

  .gating-bubble-max-mobile {
     display: none;

  }

}

.docs--sections .sections-links>li:hover {
   border: 2px #eaeaea solid;

}

.docs--sections .sections-links>li {
   border: 2px transparent solid;
   padding-bottom: 30px;
   border-radius: 4px;

}

.icon-images {
   height: 100%;
   width: 100%;

}

.docs--sections .sections-links .icon-hold:after {
   border: 0px;

}



/* Tabs */
.tab {
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;

}

.tab button {
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;
   font-size: 17px;

}

.tab button:hover {
   background-color: #ddd;

}

.tab button.active {
   background-color: #ccc;

}

.tabcontent {
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;

}

.testcolor {
   color: red !important;

}

.pubble-form-frame-poweredby {
   display: none !important;

}

.pubble-sb-clientbgcolor>* {
   display: block;

}

.pubble-sb-logo {
   background: #3b93f7 url('https://s3.amazonaws.com/tw-helpdocs/svgs/livechat.svg') center center no-repeat !important;
   background-size: auto auto;
   background-size: 30px !important;
   top: 0 !important;
   left: 0 !important;
   width: 60px !important;
   height: 60px !important;
   border-radius: 30px !important;
   z-index: 6;

}

.pubble-sb-clientbgcolor {
   background: #3b93f7 !important;

}

.pubble-form-frame-poweredby {
  display:none !important;

}

.pubble-sb-clientbgcolor > * {
  display:block;

}

.pubble-sb-logo {
   background: #3b93f7 url('https://s3.amazonaws.com/tw-helpdocs/svgs/livechat.svg') center center no-repeat !important;
   background-size: auto auto;
   background-size: 30px !important;
   top: 0 !important;
   left: 0 !important;
   width: 60px !important;
   height: 60px !important;
   border-radius: 30px !important;
   z-index:6;

}

.pubble-sb-clientbgcolor {
   background: #3b93f7 !important;

}