/* ==================================== 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; }

/* 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;
}

/* ==================== 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 > :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; }

/* 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);
}

/* 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; }