/* ============================================================================
   TeacherStore X-Sellerator — the client's own stylesheet, scoped.

   Generated from their design file rather than rebuilt by eye, so the spacing,
   weights and colours are exactly what they approved. Every selector is
   prefixed with .tsmp-dashpages.tsmp-dashpages so nothing escapes into the theme; page-level rules
   (html, body, *) are folded onto the container itself.

   DO NOT HAND-EDIT. Regenerate with:
     node build-tool-css.js "<their design html>" tsmp-dash.css .tsmp-dashpages.tsmp-dashpages

   Source: teacherstore-dashboard-pages.html
   ========================================================================= */
:root {
--bg: #FCFCFA;
  --white: #FFFFFF;
  --ink: #1C1A18;
  --mascot: #BC886D;
  --mascot-light: #E6D7CE;
  --dust: #C4B9AE;
  --stone: #8C8278;
  --border: #D8D4CE;
  --cream: #FAF7F2;
  --ivory: #F3EDE3;
  --hallway: #F0EFEE;
  --fri-yay: #C25F4E;
  --fri-yay-light: #F5E8E2;
  --fri-yay-pale: #F7F3F0;
  --gold: #C9A96E;
  --gold-light: #F6EFE1;
  --sage: #7A9B8A;
  --sage-dark: #5F7A6C;
  --sage-light: #E4F0EA;
  --pop-quiz: #b8433a;
  /* Issue #301: every dashboard card is white on the cream page — that
     contrast is the point. It was #FAF9F8, which read as light gray next to
     the cream and made the cards disappear. One token, so the next change to
     the card fill is one line and not a hunt through three rules. */
  --card-fill: var(--white);
  /* Issue #304, the notice edge colors. --sage, --fri-yay and --gold above
     already match her values exactly. Denim was missing, and her notice tan is
     #B48970, a shade off the --mascot (#BC886D) used for button hovers, so it
     gets its own token rather than being approximated. */
  --denim: #738D9B;
  --notice-tan: #B48970;
  --ff-body: 'Inter', sans-serif;
  --ff-display: 'Playfair Display', serif;
  --ff-mono: 'IBM Plex Mono', monospace;
  --radius-card: 12px;
  --radius-btn: 4px;
  --radius-pill: 100px;
  --shadow-sm: 0 1px 3px rgba(28,26,24,0.04);
  --shadow-md: 0 4px 16px rgba(28,26,24,0.07);
  --shadow-lg: 0 12px 40px rgba(28,26,24,0.1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
.tsmp-dashpages.tsmp-dashpages *, .tsmp-dashpages.tsmp-dashpages *::before, .tsmp-dashpages.tsmp-dashpages *::after {
box-sizing: border-box; margin: 0; padding: 0;
}
.tsmp-dashpages.tsmp-dashpages {
scroll-behavior: smooth;
}
.tsmp-dashpages.tsmp-dashpages {
background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.tsmp-dashpages.tsmp-dashpages img {
display: block; max-width: 100%;
}
.tsmp-dashpages.tsmp-dashpages button {
font-family: inherit; cursor: pointer; background: none; border: none;
}
.tsmp-dashpages.tsmp-dashpages input, .tsmp-dashpages.tsmp-dashpages select, .tsmp-dashpages.tsmp-dashpages textarea {
font-family: inherit;
}
.tsmp-dashpages.tsmp-dashpages input:focus, .tsmp-dashpages.tsmp-dashpages select:focus, .tsmp-dashpages.tsmp-dashpages textarea:focus, .tsmp-dashpages.tsmp-dashpages button:focus-visible {
outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,26,24,0.08);
}
.tsmp-dashpages.tsmp-dashpages .svg-icon {
display: inline-block; vertical-align: middle;
}
/* ===== TOP NAV ===== */
.tsmp-dashpages.tsmp-dashpages .topnav {
height: 76px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.tsmp-dashpages.tsmp-dashpages .topnav-logo {
font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .topnav-links {
display: flex; gap: 32px; list-style: none;
}
.tsmp-dashpages.tsmp-dashpages .topnav-links a {
font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink); text-decoration: none; position: relative; padding-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-links a::after {
content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px;
  background: var(--ink); transition: width 0.2s var(--ease-out);
}
.tsmp-dashpages.tsmp-dashpages .topnav-links a:hover {
color: var(--ink); background: var(--border);
}
.tsmp-dashpages.tsmp-dashpages .topnav-links a:hover::after {
width: 100%;
}
/* ===== BUTTONS ===== */
.tsmp-dashpages.tsmp-dashpages .btn {
font-family: var(--ff-body); font-weight: 700; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; border-radius: var(--radius-btn); text-decoration: none;
  padding: 13px 32px; transition: all 0.2s var(--ease-out); display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .btn-primary {
background: var(--mascot); color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .btn-primary:hover {
background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .btn-primary.btn-glow:hover {
background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .btn-primary.btn-glow:active {
transform: scale(0.97); box-shadow: 0 0 8px 2px rgba(180,137,112,0.55);
}
.tsmp-dashpages.tsmp-dashpages .btn-primary:disabled {
background: var(--border); color: var(--stone); cursor: not-allowed;
}
.tsmp-dashpages.tsmp-dashpages .btn-approve {
background: var(--sage-dark); color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .btn-approve:hover {
background: var(--sage);
}
.tsmp-dashpages.tsmp-dashpages .btn-ghost {
background: var(--white); color: var(--ink); border: 1px solid var(--ink); padding: 12px 31px;
}
/* Issue #304, and now a rule in her CLAUDE.md: in the seller dashboard and the
   X-Sellerators a white outline button hovers to cream and KEEPS its black
   outline, never filling charcoal — so two black buttons never sit side by
   side (a notice's main button is already black). The public marketplace pages
   keep the charcoal hover, so the unscoped rule in tsmp.css is left alone. */
.tsmp-dashpages.tsmp-dashpages .btn-ghost:hover {
background: var(--cream); color: var(--ink); border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .btn-ghost.small, .tsmp-dashpages.tsmp-dashpages .btn.small {
padding: 6px 16px; font-size: 11px;
}
.tsmp-dashpages.tsmp-dashpages .btn-full {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .eyebrow {
font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mascot); display: block; margin-bottom: 12px;
}
/*
 * ⚠️ A MODIFIER CANNOT BEAT A BASE RULE IN A LATER SHEET.
 *
 * .eyebrow--ink is defined in tsmp-tool.css at (0,3,0); the base rule
 * above is also (0,3,0). Equal specificity, so load order decides — and
 * tsmp-dash is registered with tsmp-tool as a dependency, so it loads
 * SECOND and wins. The modifier existed, was emitted on the span, and
 * never once applied.
 *
 * Fahad, 13 Nov: "Upload Your Thumbnail Images its also black in the first
 * stage section 5" — her eyebrow there is ink; ours rendered Mascot.
 *
 * ⚠️ SO IT IS RESTATED HERE, in the sheet that owns the base. Fixing it
 * in tsmp-tool.css by raising specificity would work today and break the
 * next time either rule is touched; a modifier belongs beside the base it
 * modifies.
 */
.tsmp-dashpages.tsmp-dashpages .eyebrow--ink {
color: var(--ink);
}
/* ===== LAYOUT ===== */
.tsmp-dashpages.tsmp-dashpages .layout {
display: flex; min-height: calc(100vh - 76px);
}
.tsmp-dashpages.tsmp-dashpages .sidebar {
width: 280px; flex-shrink: 0; background: var(--white);
  border-right: 1px solid var(--border); position: sticky; top: 76px;
  height: calc(100vh - 76px); overflow-y: auto;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-label {
font-weight: 700; font-size: 15px; color: var(--ink); padding: 24px 16px 16px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav {
list-style: none;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li a {
display: flex; align-items: center; min-height: 44px; padding: 0 16px 0 19px;
  font-weight: 500; font-size: 14px; color: var(--ink); text-decoration: none;
  border-left: 3px solid transparent; transition: background 0.15s;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li a:hover {
background: var(--bg);
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.active a {
border-left-color: var(--ink); color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  font-weight: 700; background: #F6F5F4;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.has-sub > a {
justify-content: space-between;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .sub-nav {
list-style: none;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .sub-nav li a {
padding-left: 34px; font-size: 13px; min-height: 38px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-placeholder a {
color: var(--stone); cursor: default;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-placeholder a:hover {
background: none;
}
.tsmp-dashpages.tsmp-dashpages .main {
flex: 1; padding: 40px; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-section-card {
background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--ink); border-radius: var(--radius-card); padding: 32px 72px; margin: 0 auto 32px; width: 100%; max-width: 1200px; box-sizing: border-box; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .main-inner {
max-width: 1160px; margin: 0 auto;
}
.tsmp-dashpages.tsmp-dashpages .main-inner:has(> .dash-page[data-page="dashboard"]:not([hidden])) {
max-width: 1200px;
}
.tsmp-dashpages.tsmp-dashpages .main-inner:has(> .dash-page[data-page="products"]:not([hidden])) {
max-width: 1360px;
}
/* My Products has the Launch buttons on the far right, so the board is wider */
/* ===== PAGE HEADER ===== */
.tsmp-dashpages.tsmp-dashpages .page-header h1 {
font-weight: 700; font-size: 28px; color: var(--ink); margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .page-header p {
font-size: 15px; color: var(--ink);
}
/* ===== PROTOTYPE PAGE SWITCHER ===== */
.tsmp-dashpages.tsmp-dashpages .proto-switcher-wrap {
margin-bottom: 32px;
}
.tsmp-dashpages.tsmp-dashpages .proto-switcher-tag {
font-family: var(--ff-mono); font-size: 11px; color: var(--pop-quiz);
  text-align: center; display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .proto-switcher-tag::before, .tsmp-dashpages.tsmp-dashpages .proto-switcher-tag::after {
content: ''; flex: 1; height: 1px; background: var(--pop-quiz); opacity: 0.3;
}
.tsmp-dashpages.tsmp-dashpages .proto-switcher {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .proto-switcher button {
border: 1px solid var(--border); background: var(--white); color: var(--ink);
  font-size: 11px; font-weight: 500; padding: 7px 14px; border-radius: var(--radius-btn);
}
.tsmp-dashpages.tsmp-dashpages .proto-switcher a {
border: 1px solid var(--border); background: var(--white); color: var(--ink); font-size: 11px; font-weight: 500; padding: 7px 14px; border-radius: var(--radius-btn); text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .proto-switcher a:hover {
border-color: var(--mascot); color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .proto-switcher button:hover {
border-color: var(--mascot); color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .proto-switcher button.is-current {
background: var(--ink); color: var(--white); border-color: var(--ink);
}
/* Prototype tier switcher: Seller vs Pro look (add ?tier=seller or ?tier=pro to the URL) */
.tsmp-dashpages.tsmp-dashpages .proto-tier {
display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; font-size: 11px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .proto-tier button {
border: 1px solid var(--border); background: var(--white); color: var(--ink); font-size: 11px; font-weight: 600; padding: 7px 16px; border-radius: var(--radius-btn);
}
.tsmp-dashpages.tsmp-dashpages .proto-tier button:hover {
border-color: var(--mascot); color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .proto-tier button.is-current {
background: var(--ink); color: var(--white); border-color: var(--ink);
}
body.tier-pro .tsmp-dashpages.tsmp-dashpages .seller-only, body:not(.tier-pro) .tsmp-dashpages.tsmp-dashpages .pro-only {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .retired {
display: none !important;
}
/* old Seller-only landing page pieces; the Seller page is now the Pro page with one button */
/* Seller vs Pro only changes the dashboard landing page, so the tier switcher only shows there */
.tsmp-dashpages.tsmp-dashpages .main-inner:not(:has(> .dash-page[data-page="dashboard"]:not([hidden]))) .proto-tier {
display: none;
}
/* Dashboard home (Seller and Pro look the same; Seller has one button, Pro has two): optional brainstorm vs. required kit name */
body .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .dash-start-pro {
display: table; margin: 0 auto 10px;
}
body .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field > label {
font-size: 20px !important;
}
body .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field, body .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] #dashKitNameInput {
max-width: 572px !important; width: 100% !important;
}
/* = width of the two Pro buttons below */
.tsmp-dashpages.tsmp-dashpages .dash-page[hidden] {
display: none;
}
/* ===== FILTER / DATE CHIPS ===== */
.tsmp-dashpages.tsmp-dashpages .filter-chips {
display: flex; flex-wrap: wrap; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .filter-chips button {
font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 9px 18px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .filter-chips button:hover {
border-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .filter-chips button.active {
background: var(--mascot); border-color: var(--mascot); color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .filter-chips button.active:hover {
background: var(--mascot-light); border-color: var(--mascot); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .filter-chips.small button {
padding: 6px 14px; font-size: 11px;
}
.tsmp-dashpages.tsmp-dashpages .controls-row {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px;
}
/* ===== DATE RANGE PANEL ===== */
.tsmp-dashpages.tsmp-dashpages .daterange-panel {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md); padding: 24px; margin-top: 12px; max-width: 560px;
}
.tsmp-dashpages.tsmp-dashpages .daterange-panel[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .dp-tabs {
display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .dp-tabs button {
font-weight: 600; font-size: 13px; color: var(--stone); padding-bottom: 10px; border-bottom: 2px solid transparent;
}
.tsmp-dashpages.tsmp-dashpages .dp-tabs button.active {
color: var(--ink); border-bottom-color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .dp-presets {
list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .dp-presets li {
display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius-btn); font-size: 14px; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .dp-presets li:hover {
background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .dp-square {
width: 14px; height: 14px; border: 1.5px solid var(--border); border-radius: 3px; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .dp-presets li.selected .dp-square {
background: var(--fri-yay); border-color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .dp-presets li.selected {
font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .dp-current-range {
font-family: var(--ff-mono); font-size: 12px; color: var(--fri-yay); margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .dp-compare {
border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .dp-compare label {
display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .dp-compare select {
border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 8px 12px; font-size: 13px; color: var(--ink); width: 100%;
}
/* ===== STAT TILES ===== */
.tsmp-dashpages.tsmp-dashpages .stat-tiles {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 36px;
}
.tsmp-dashpages.tsmp-dashpages .stat-tile {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 24px; transition: box-shadow 0.2s var(--ease-out);
}
.tsmp-dashpages.tsmp-dashpages .stat-tile:hover {
box-shadow: var(--shadow-lg);
}
.tsmp-dashpages.tsmp-dashpages .st-label {
font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mascot); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .st-value {
font-weight: 700; font-size: 32px; color: var(--ink); margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .st-delta {
font-size: 12px; color: var(--stone); display: flex; align-items: center; gap: 4px;
}
.tsmp-dashpages.tsmp-dashpages .st-delta.up {
color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .st-delta.down {
color: var(--pop-quiz);
}
/* ===== CHARTS ===== */
.tsmp-dashpages.tsmp-dashpages .section-label {
font-weight: 700; font-size: 18px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .chart-controls {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .chart-icon-toggle {
display: flex; gap: 4px;
}
.tsmp-dashpages.tsmp-dashpages .chart-icon-toggle button {
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink); border-radius: var(--radius-btn);
}
.tsmp-dashpages.tsmp-dashpages .chart-icon-toggle button.active {
color: var(--mascot); background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .chart-menu-wrap {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .chart-menu-btn {
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink); border-radius: var(--radius-btn);
}
.tsmp-dashpages.tsmp-dashpages .chart-menu-btn:hover {
background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .chart-toggle-panel {
position: absolute; top: 38px; right: 0; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 16px; width: 220px; z-index: 20;
}
.tsmp-dashpages.tsmp-dashpages .chart-toggle-panel[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .ctp-row {
display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .toggle-switch {
display: inline-block; vertical-align: middle; cursor: pointer; width: 34px; height: 20px; border-radius: 100px; background: var(--border); position: relative; flex-shrink: 0; transition: background 0.15s;
}
.tsmp-dashpages.tsmp-dashpages .toggle-switch::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: left 0.15s;
}
.tsmp-dashpages.tsmp-dashpages .toggle-switch.on {
background: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .toggle-switch.on::after {
left: 16px;
}
.tsmp-dashpages.tsmp-dashpages .charts-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 36px;
}
.tsmp-dashpages.tsmp-dashpages .charts-row[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .chart-card {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px;
}
.tsmp-dashpages.tsmp-dashpages .chart-card h3 {
font-weight: 700; font-size: 15px; margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .chart-legend {
display: flex; gap: 20px; justify-content: center; margin-top: 12px;
}
.tsmp-dashpages.tsmp-dashpages .legend-item {
display: flex; align-items: center; gap: 6px; font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .legend-swatch {
width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .legend-swatch.current {
background: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .legend-swatch.compare {
background: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .legend-item.compare-label {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .chart-empty {
text-align: center; padding: 60px 20px; font-size: 15px; color: var(--stone);
}
/* ===== PRODUCTS PAGE ===== */
.tsmp-dashpages.tsmp-dashpages .tabs-filter {
display: flex; gap: 28px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .tabs-filter button {
font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--stone); padding-bottom: 12px; border-bottom: 2px solid transparent;
}
.tsmp-dashpages.tsmp-dashpages .tabs-filter button.active {
color: var(--fri-yay); border-bottom-color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .products-header-row {
display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
}
.tsmp-dashpages.tsmp-dashpages .filter-card {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .filter-card select {
border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 9px 12px; font-size: 13px; color: var(--ink); background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .search-pill {
flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 16px;
}
.tsmp-dashpages.tsmp-dashpages .search-pill input {
border: none; flex: 1; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .search-pill input::placeholder {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .filter-card .btn-ghost.small {
padding: 8px 18px;
}
.tsmp-dashpages.tsmp-dashpages .reset-link {
color: var(--fri-yay); font-weight: 600; font-size: 12px; text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .bulk-row {
display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 0 4px;
}
.tsmp-dashpages.tsmp-dashpages .bulk-row select {
border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 7px 12px; font-size: 12px; color: var(--ink); background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .bulk-row input[type=checkbox] {
width: 16px; height: 16px; accent-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bulk-row {
flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .bulk-count {
font-size: 13px; font-weight: 600; color: var(--ink); min-width: 84px;
}
.tsmp-dashpages.tsmp-dashpages .imp-help {
margin: 0 0 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--mascot); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .imp-help[hidden], .tsmp-dashpages.tsmp-dashpages .bulk-note[hidden], .tsmp-dashpages.tsmp-dashpages #kitPublishSel[hidden], .tsmp-dashpages.tsmp-dashpages #kitDeleteSel[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .bulk-note {
margin: 0 0 12px; padding: 10px 14px; background: var(--sage-light, #E4F0EA); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .products-table tr.is-picked {
background: #FBF6F2;
}
.tsmp-dashpages.tsmp-dashpages .products-table-wrap {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 24px;
}
.tsmp-dashpages.tsmp-dashpages .products-table {
width: 100%; border-collapse: collapse;
}
.tsmp-dashpages.tsmp-dashpages .products-table th {
font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mascot);
  padding: 16px; text-align: left; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .products-table td {
padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.tsmp-dashpages.tsmp-dashpages .products-table tr:last-child td {
border-bottom: none;
}
.tsmp-dashpages.tsmp-dashpages .products-table tr.p-row {
min-height: 48px; transition: box-shadow 0.15s var(--ease-out), background 0.15s;
}
.tsmp-dashpages.tsmp-dashpages .products-table tr.p-row:hover {
box-shadow: var(--shadow-sm); background: #F8F3EE;
}
.tsmp-dashpages.tsmp-dashpages .p-thumb {
width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(150deg, var(--gold-light), var(--fri-yay-light)); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .p-name-cell {
display: flex; align-items: center; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .p-name {
font-weight: 500; font-size: 14px; color: var(--ink); text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .p-name:hover {
color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .badge {
font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 10px; border-radius: var(--radius-btn); display: inline-block;
}
.tsmp-dashpages.tsmp-dashpages .badge.published {
background: var(--fri-yay-light); color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .badge.draft {
background: var(--ivory); color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .p-earnings {
font-weight: 600; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .p-views {
font-size: 14px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .p-date {
font-family: var(--ff-mono); font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pagination {
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .pagination button {
width: 32px; height: 32px; border-radius: 50%; font-weight: 500; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pagination button.active {
background: var(--fri-yay-light); color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .pagination .pg-arrow {
border: 1px solid var(--border); border-radius: var(--radius-pill); width: auto; padding: 8px 18px; font-size: 11px; font-weight: 600; text-transform: uppercase;
}
/* ===== STORE SETUP PAGE ===== */
.tsmp-dashpages.tsmp-dashpages .video-panel {
background: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 24px; margin-bottom: 28px; position: relative;
}
.tsmp-dashpages.tsmp-dashpages .video-panel[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .video-panel-dismiss {
position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; color: var(--ink); display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .video-panel-dismiss:hover {
background: rgba(28,26,24,0.08);
}
.tsmp-dashpages.tsmp-dashpages .video-thumb {
width: 100%; max-width: 420px; aspect-ratio: 16/9; border-radius: var(--radius-btn); margin: 0 auto 12px;
  background: linear-gradient(150deg, var(--ink), var(--mascot)); display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .play-circle {
width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .video-panel-caption {
text-align: center; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mode-toggle-wrap {
display: flex; justify-content: center; margin-bottom: 24px;
}
/* #119: 380px is five pixels wider than a 375px phone, before the page
   gutter — so this toggle alone pushed the whole wizard sideways. Her value,
   and she has no phone override for it. max-width rather than a breakpoint:
   it keeps her 380px wherever there is room and gives way only where there
   is not, and the two labels inside are nowrap and short enough to sit in
   343px. */
.tsmp-dashpages.tsmp-dashpages .mode-toggle {
position: relative; display: inline-flex; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 4px; width: 380px; max-width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .mode-toggle::before {
content: ''; position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px);
  background: var(--mascot); border-radius: var(--radius-pill); transition: transform 0.2s var(--ease-out); z-index: 0;
}
.tsmp-dashpages.tsmp-dashpages .mode-toggle.is-returning::before {
transform: translateX(100%);
}
.tsmp-dashpages.tsmp-dashpages .mode-toggle button {
position: relative; z-index: 1; flex: 1; background: none; border: none; color: var(--ink);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
  padding: 9px 12px; border-radius: var(--radius-pill); transition: color 0.2s;
}
.tsmp-dashpages.tsmp-dashpages .mode-toggle button.active {
color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .guided-progress {
text-align: center; font-family: var(--ff-mono); font-size: 12px; color: var(--mascot); margin-bottom: 28px; letter-spacing: 0.02em;
}
.tsmp-dashpages.tsmp-dashpages .guided-progress[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .guided-progress b {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .setup-section {
background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--mascot); border-radius: var(--radius-card); margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .setup-section-header {
border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.tsmp-dashpages.tsmp-dashpages .setup-step-eyebrow {
display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mascot); margin-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .setup-hero {
background: var(--white); border: 1px solid var(--mascot); border-top: 3px solid var(--mascot); border-radius: var(--radius-card); padding: 24px 24px 4px; margin-bottom: 28px;
}
.tsmp-dashpages.tsmp-dashpages .setup-hero .page-header {
margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .setup-section-header {
display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .setup-section-header h2 {
font-weight: 700; font-size: 16px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .setup-section-header svg {
transition: transform 0.2s var(--ease-out); color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .setup-section-header.collapsed svg {
transform: rotate(-90deg);
}
.tsmp-dashpages.tsmp-dashpages .setup-section-body {
padding: 0 24px 28px;
}
.tsmp-dashpages.tsmp-dashpages .setup-section-body[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .setup-helper {
font-size: 12px; color: var(--stone); margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .bio-ai-helper {
display: flex; align-items: center; gap: 12px; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 10px 14px; margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .bio-ai-helper .icon-btn {
background: var(--white); border: 1px solid var(--border); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .bio-ai-helper .icon-btn:hover {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bio-ai-helper-text {
flex: 1; font-size: 12.5px; color: var(--ink); line-height: 1.4;
}
.tsmp-dashpages.tsmp-dashpages .bio-ai-helper-text strong {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .bio-ai-helper .btn.small {
white-space: nowrap; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .setup-url-preview {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-family: var(--ff-mono); font-size: 12px; color: var(--mascot); margin-top: 10px;
}
.tsmp-dashpages.tsmp-dashpages .setup-url-copy {
display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-body);
}
.tsmp-dashpages.tsmp-dashpages .setup-url-copy.is-copied {
background: #E8F0E2; border-color: #7A9A6B; color: #2F5A2A;
}
.tsmp-dashpages.tsmp-dashpages .url-status {
display: inline-flex; align-items: center; gap: 3px; font-family: var(--ff-body); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; margin-left: 6px;
}
.tsmp-dashpages.tsmp-dashpages .url-status--available {
color: var(--sage-dark);
}
.tsmp-dashpages.tsmp-dashpages .url-status--unavailable {
color: var(--pop-quiz);
}
.tsmp-dashpages.tsmp-dashpages .pro-chip {
display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--mascot); color: var(--white); padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 8px; vertical-align: middle;
}
.tsmp-dashpages.tsmp-dashpages .info-dot {
position: relative; display: inline-flex; width: 16px; height: 16px; border-radius: 50%; align-items: center; justify-content: center; cursor: help; flex-shrink: 0; color: var(--white); margin-left: 8px; vertical-align: middle;
}
.tsmp-dashpages.tsmp-dashpages .info-dot--mascot {
background: var(--mascot);
}
/*
 * --stone was MISSING FROM THIS SHEET ENTIRELY, which is why the dot
 * beside "help it get found" rendered as an empty circle on 8 Nov.
 *
 * The base .info-dot sets `color: var(--white)` because the --mascot
 * variant is a brown disc with a white glyph on it. Her --stone variant
 * flips all three — pale fill, a border, and the glyph in INK — and
 * without it the eye was drawn in white on a near-white page. The SVG
 * was there the whole time, correct, and invisible.
 *
 * Her rule, from teacherstore-dashboard-pages.html, verbatim.
 */
.tsmp-dashpages.tsmp-dashpages .info-dot--stone {
background: #F6F5F4; border: 1px solid var(--border); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .info-dot svg {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .info-dot .info-tip {
position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%); width: 200px;
  background: var(--fri-yay-pale); border: 1px solid var(--border); border-radius: var(--radius-btn);
  padding: 10px 12px; font-size: 12px; font-weight: 400; color: var(--ink); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.15s var(--ease-out); box-shadow: var(--shadow-md); z-index: 10;
}
.tsmp-dashpages.tsmp-dashpages .info-dot:hover .info-tip {
opacity: 1;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-replay {
display: block; text-align: center; font-size: 12px; font-weight: 600; color: var(--mascot); text-decoration: underline; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-modal-overlay {
position: fixed; inset: 0; background: rgba(28,26,24,0.6); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-modal-overlay[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-modal {
background: var(--white); border-radius: var(--radius-card); padding: 36px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); border-top: 4px solid var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-step-count {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mascot); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-modal h2 {
font-weight: 700; font-size: 20px; margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-modal p {
font-size: 14px; color: var(--stone); line-height: 1.55; margin-bottom: 24px;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-dots {
display: flex; gap: 6px; justify-content: center; margin-bottom: 24px;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-dots span {
width: 6px; height: 6px; border-radius: 50%; background: var(--border);
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-dots span.active {
background: var(--mascot); width: 16px; border-radius: var(--radius-pill);
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-actions {
display: flex; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-actions .btn {
flex: 1; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .guided-tour-skip {
display: block; text-align: center; margin-top: 16px; font-size: 12px; color: var(--stone); text-decoration: underline; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .btn-canva {
display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: #F6F5F4;
  border-radius: var(--radius-btn); padding: 9px 16px; font-weight: 600; font-size: 13px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(28,26,24,0.08), 0 2px 6px rgba(28,26,24,0.06);
}
.tsmp-dashpages.tsmp-dashpages .btn-canva:hover {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .canva-logo {
flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .video-mode-tabs {
display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .video-mode-tabs button {
font-weight: 400; font-size: 13px; color: var(--stone); padding-bottom: 10px; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .video-mode-tabs button.active {
font-weight: 700; color: var(--ink); border-bottom-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .video-record-box {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--ivory); border: 1.5px solid var(--border); color: var(--ink); border-radius: var(--radius-card); padding: 40px 20px; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .video-record-box .rec-idle-copy {
font-weight: 500; font-size: 15px; max-width: 320px;
}
.tsmp-dashpages.tsmp-dashpages .video-record-box .vr-sub {
font-size: 12px; color: var(--stone); max-width: 320px;
}
.tsmp-dashpages.tsmp-dashpages .video-record-box.is-recording {
border: none; background: var(--ink); color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .video-record-box.is-recording .vr-sub {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .video-record-box.is-recorded {
border: none; background: linear-gradient(150deg, var(--ink), var(--mascot)); color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .rec-dot {
width: 10px; height: 10px; border-radius: 50%; background: var(--pop-quiz);
}
.tsmp-dashpages.tsmp-dashpages .video-record-box.is-recording .rec-dot {
animation: rec-pulse 1.1s infinite;
}
@keyframes rec-pulse {
0%,100% {
opacity: 1;
}
50% {
opacity: 0.3;
}

}
.tsmp-dashpages.tsmp-dashpages .rec-timer {
font-family: var(--ff-mono); font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .rec-row {
display: flex; align-items: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .video-record-box .btn {
margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .video-record-box .rec-actions {
display: flex; gap: 12px; margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .video-record-box .rec-actions a {
color: var(--white); font-weight: 700; font-size: 12px; text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .rec-btn {
background: var(--mascot); color: var(--white); border: none; border-radius: var(--radius-btn); padding: 8px 20px; font-weight: 600; font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .rec-btn:hover {
background: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .video-upload-zone {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--border); border-radius: var(--radius-card); padding: 40px 20px; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .up-main {
font-weight: 600; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .up-sub {
font-size: 12px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .demo-divider-toggle--camera {
font-size: 13px; font-weight: 700; color: var(--ink); gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .demo-accordion:not(.collapsed) .demo-cam-ico {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .video-explain {
font-size: 13px; color: var(--ink); margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .field {
margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .field label {
display: block; font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .field input, .tsmp-dashpages.tsmp-dashpages .field select, .tsmp-dashpages.tsmp-dashpages .field textarea {
width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-btn);
  padding: 11px 14px; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .field input::placeholder, .tsmp-dashpages.tsmp-dashpages .field textarea::placeholder {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .field-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.tsmp-dashpages.tsmp-dashpages .field-row.credentials {
grid-template-columns: 1.2fr 1fr 0.8fr;
}
.tsmp-dashpages.tsmp-dashpages .field-row.credentials input.mono {
font-family: var(--ff-mono);
}
.tsmp-dashpages.tsmp-dashpages .privacy-note {
display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--stone); margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .upload-zone-basic {
border: 2px dashed var(--border); background: var(--ivory); border-radius: var(--radius-card);
  min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 24px;
}
.tsmp-dashpages.tsmp-dashpages .upload-zone-basic .up-main {
font-weight: 500; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .upload-zone-basic .up-sub {
font-size: 12px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .upload-btn-row {
display: flex; gap: 12px; margin-top: 16px;
}
.tsmp-dashpages.tsmp-dashpages .upload-btn-row .btn {
flex: 1;
}
.tsmp-dashpages.tsmp-dashpages .uploaded-preview-actions {
display: flex; gap: 16px; margin-top: 10px;
}
.tsmp-dashpages.tsmp-dashpages .uploaded-preview-actions a {
color: var(--fri-yay); font-weight: 600; font-size: 12px; text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .banner-preview {
width: 100%; aspect-ratio: 3360/840; border-radius: var(--radius-card); margin-bottom: 12px;
  background: linear-gradient(150deg, var(--gold-light), var(--fri-yay-light), var(--sage-light));
}
.tsmp-dashpages.tsmp-dashpages .photo-upload-zone {
width: 120px; height: 120px; border-radius: 50%; border: 2px dashed var(--border); background: var(--ivory);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .photo-upload-zone.uploaded {
border: none; background: linear-gradient(150deg, var(--sage), var(--gold-light));
}
.tsmp-dashpages.tsmp-dashpages .char-counter {
text-align: right; font-size: 12px; color: var(--stone); margin-top: -14px; margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .video-preview-wrap {
background: var(--ink); border-radius: var(--radius-btn); aspect-ratio: 16/9; margin-bottom: 12px; display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .tip-card {
background: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; font-size: 13px; color: var(--ink); margin-top: 16px; display: flex; align-items: center; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .social-note-card {
background: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; font-size: 13px; color: var(--ink); margin-bottom: 24px;
}
.tsmp-dashpages.tsmp-dashpages .social-group-label {
font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .social-group-sub {
font-size: 14px; color: var(--stone); margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .social-group-label.secondary {
font-size: 14px; margin-top: 28px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .social-row {
display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .social-icon {
width: 32px; height: 32px; border-radius: 50%; background: var(--cream); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--ink); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .social-row.deprioritized .social-icon, .tsmp-dashpages.tsmp-dashpages .social-row.deprioritized .social-label {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .social-label {
font-weight: 600; font-size: 13px; color: var(--ink); width: 150px; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .social-input {
flex: 1; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 10px 18px; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .social-input::placeholder {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .save-bar-wrap {
margin-top: 12px;
}
.tsmp-dashpages.tsmp-dashpages .toast {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(0); z-index: 300;
  background: var(--ink); color: var(--white); font-weight: 500; font-size: 14px;
  padding: 16px 24px; border-radius: var(--radius-btn); display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.tsmp-dashpages.tsmp-dashpages .toast.show {
opacity: 1; transform: translateX(-50%) translateY(-8px);
}
.tsmp-dashpages.tsmp-dashpages .toast a {
color: var(--fri-yay); font-weight: 700; text-decoration: none; white-space: nowrap;
}
/* ===== SHARED: INFO CARD / EMPTY STATE / KV ROWS ===== */
.tsmp-dashpages.tsmp-dashpages .info-card {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .info-card h2 {
font-weight: 700; font-size: 16px; margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .kv-row {
display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .kv-row:last-child {
border-bottom: none;
}
.tsmp-dashpages.tsmp-dashpages .kv-row .kv-label {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .kv-row .kv-value {
font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .empty-state {
text-align: center; padding: 70px 20px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .empty-state svg {
margin-bottom: 14px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .empty-state .es-title {
font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .empty-state .es-sub {
font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .disclosure-note {
font-size: 12px; color: var(--stone); margin-top: 4px;
}
/* ===== ORDER DETAIL (Add New Order) ===== */
.tsmp-dashpages.tsmp-dashpages .order-detail-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .order-detail-header h2 {
font-weight: 700; font-size: 16px;
}
.tsmp-dashpages.tsmp-dashpages .order-detail-grid {
display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .order-panel-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .order-panel-header h3 {
font-weight: 700; font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .order-panel-header a {
font-size: 12px; color: var(--fri-yay); font-weight: 600; text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .order-panel .field {
margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .order-panel p {
font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .line-items-table {
width: 100%; border-collapse: collapse; margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .line-items-table th {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mascot); text-align: left; padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .line-items-table td {
padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .order-totals {
display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 14px; margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .order-totals .ot-total {
font-weight: 700; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .order-notes-body {
text-align: center; color: var(--stone); font-size: 13px; padding: 20px 0;
}
.tsmp-dashpages.tsmp-dashpages .order-note-input {
width: 100%; min-height: 70px; border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 10px 14px; font-family: inherit; font-size: 13px; margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .order-actions-row {
display: flex; align-items: center; justify-content: space-between;
}
.tsmp-dashpages.tsmp-dashpages .order-actions-row a.delete-link {
color: var(--pop-quiz); font-size: 13px; font-weight: 600; text-decoration: none;
}
/* ===== PAYMENT METHOD ===== */
.tsmp-dashpages.tsmp-dashpages .payment-method-row {
display: flex; align-items: center; justify-content: space-between; padding: 14px 4px;
}
.tsmp-dashpages.tsmp-dashpages .pm-left {
display: flex; align-items: center; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pm-icon {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--fri-yay); font-family: var(--ff-mono);
}
/* ===== ANNOUNCEMENTS ===== */
.tsmp-dashpages.tsmp-dashpages .announce-layout {
display: flex; gap: 20px; align-items: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .announce-list-col {
flex: 0 0 58%; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .announce-select-all {
display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .announce-item {
display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .announce-item:last-child {
border-bottom: none;
}
.tsmp-dashpages.tsmp-dashpages .announce-item:hover {
background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .announce-item input {
margin-top: 3px; width: 15px; height: 15px; accent-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .announce-item .an-headline {
font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 2px;
}
.tsmp-dashpages.tsmp-dashpages .announce-item .an-meta {
font-size: 11px; color: var(--stone); display: flex; align-items: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .announce-item .an-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--fri-yay); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .announce-detail-col {
flex: 1; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); min-height: 340px; display: flex; align-items: center; justify-content: center;
}
/* ===== SHARED: CHIPS + ICON BUTTON (ported from the wizard file for consistency) ===== */
.tsmp-dashpages.tsmp-dashpages .chip {
background: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 4px 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .icon-btn {
width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .icon-btn.send {
background: var(--fri-yay); color: var(--white);
}
/* ===== SHARED: CHAT MESSAGES + INLINE SUMMARY CARD (matches wizard Stage 2 pattern) ===== */
.tsmp-dashpages.tsmp-dashpages .msg {
max-width: 78%; padding: 14px 16px; border-radius: var(--radius-card); font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .msg.claude {
align-self: flex-start; background: var(--white); border: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .msg.teacher {
align-self: flex-end; background: var(--mascot-light);
}
.tsmp-dashpages.tsmp-dashpages .summary-card {
background: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; align-self: flex-start; width: 100%;
}
.tsmp-dashpages.tsmp-dashpages #kitStartCard {
max-width: 720px; margin: 0 auto 16px; background: var(--fri-yay-pale);
}
.tsmp-dashpages.tsmp-dashpages #kitStartCard .eyebrow {
font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages #kitStartCard[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kit-start-directions {
list-style: none; font-size: 13px; color: var(--ink); display: flex; flex-direction: column; gap: 6px; margin: 8px 0 16px;
}
.tsmp-dashpages.tsmp-dashpages .kit-start-directions li::before {
content: '— '; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .summary-card p {
font-size: 14px; margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .summary-card .field {
margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .chat-confirm-note {
font-size: 12px; color: var(--ink); margin-top: 10px; text-align: center;
}
/* ===== DASHBOARD HOME — BRAIN DUMP CHAT ===== */
/* Empty state: heading + subtext + input cluster together, vertically centered (like Claude's own new-chat screen).
   Active state: whole page scrolls normally (same as every other page here); the input just sticks to the
   bottom of the viewport as you scroll, rather than forcing a fragile fixed-height internal scroll region. */
.tsmp-dashpages.tsmp-dashpages .dash-home-wrap {
display: flex; flex-direction: column; min-height: calc(100vh - 76px - 80px);
}
.tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty {
justify-content: center;
}
/* Home before the first brainstorm: as simple as Claude's start page. Just the heading and the box, with two quiet links under it. Steps 2 to 4 appear after the seller sends a first message. */
.tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty .dash-section-card {
display: flex; flex-direction: column; align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty .dash-welcome h1, .tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty .dash-welcome p, .tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty .dash-optional, .tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty .dash-prestep-head .dash-step2-sub, .tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty #dashHomeEmpty, .tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty #dashSaveStep, .tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty #dashCreateStep, .tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty #dashAddStep {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty .dash-prestep-head {
margin-top: 4vh;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-wrap.is-empty .dash-welcome {
order: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 22px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-empty {
text-align: center; padding: 0 20px 24px;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-empty[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-empty .eyebrow {
text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .dash-talk-teachy-label {
width: 100%; max-width: 720px; margin: 0 auto; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .dash-talk-teachy-eyebrow {
text-align: center; color: var(--ink); font-family: var(--ff-display); font-weight: 500; font-size: 28px; text-transform: none; letter-spacing: normal;
}
.tsmp-dashpages.tsmp-dashpages .dash-talk-teachy-sub {
text-align: center; font-size: 14px; color: var(--stone); margin: 6px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-empty h1 {
font-family: var(--ff-display); font-weight: 500; font-size: 34px; margin-bottom: 8px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-empty p {
font-size: 15px; color: var(--stone); max-width: 460px; margin: 0 auto;
}
.tsmp-dashpages.tsmp-dashpages .dash-step2 {
max-width: 720px; margin: 40px auto 0; padding-top: 32px; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2 .field {
text-align: left; margin: 0 0 24px;
}
.tsmp-dashpages.tsmp-dashpages .dash-kit-note {
font-size: 11px; color: var(--stone); margin: 8px 0 0; line-height: 1.4;
}
.tsmp-dashpages.tsmp-dashpages #dashKitNameInput {
background: #FCFAF7;
}
.tsmp-dashpages.tsmp-dashpages .btn.btn-primary.btn-glow.dash-step2-cta-btn {
background: var(--mascot); color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .btn.btn-primary.btn-glow.dash-step2-cta-btn:hover {
background: var(--mascot); color: var(--white); box-shadow: 0 0 12px 3px rgba(180,137,112,0.45);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-eyebrow {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-title {
font-family: var(--ff-display); font-weight: 500; font-size: 28px; color: var(--ink); margin: 8px 0 24px;
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-sub {
font-size: 14px; color: var(--stone); margin: 0 0 24px;
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card {
display: flex; flex-direction: column; border-radius: var(--radius-card); padding: 28px 24px;
  border-top: 4px solid var(--ink); text-decoration: none; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card:hover {
transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card--manual {
background: var(--cream); border-top-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card--auto {
background: var(--mascot); border-top-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-number {
display: block; width: 100%; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card-eyebrow {
font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mascot); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card-title {
font-family: var(--ff-display); font-weight: 500; font-size: 22px; color: var(--ink); margin-bottom: 8px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card-sub {
font-size: 13px; color: var(--ink); line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card--auto .dash-step2-card-eyebrow, .tsmp-dashpages.tsmp-dashpages .dash-step2-card--auto .dash-step2-card-title, .tsmp-dashpages.tsmp-dashpages .dash-step2-card--auto .dash-step2-card-sub {
color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card-cta {
display: block; margin-top: auto; padding-top: 18px; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-card--auto .dash-step2-card-cta {
color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .dash-step2-curious-link {
display: inline-block; margin-top: 28px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-chat-instruction {
text-align: center; font-size: 13px; color: var(--stone); margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .demo-accordion {
max-width: 460px; margin: 20px auto 0;
}
.tsmp-dashpages.tsmp-dashpages .demo-divider {
display: flex; align-items: center; gap: 12px; margin: 0 0 16px;  justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .demo-divider-line {
flex: 1; height: 1px; background: var(--border);
}
.tsmp-dashpages.tsmp-dashpages .demo-divider-toggle {
display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  background: none; border: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--stone); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .demo-divider-toggle .chevron {
transition: transform 0.2s var(--ease-out);
}
.tsmp-dashpages.tsmp-dashpages .demo-accordion.collapsed .chevron {
transform: rotate(-90deg);
}
.tsmp-dashpages.tsmp-dashpages .demo-accordion-body {
margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .demo-accordion.collapsed .demo-accordion-body {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .demo-accordion.collapsed {
margin-bottom: 0;
}
/* Store Setup: the overview video has its own small box under the view toggle; each step's video is a left-aligned "Watch Video Demo" line with no rules */
.tsmp-dashpages.tsmp-dashpages .setup-start {
background: #FAF7F2; border-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .setup-start-eyebrow {
display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.1em; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .setup-start-btn {
display: inline-flex; align-items: center; gap: 10px; margin-top: 2px; padding: 9px 16px 9px 12px; border: 1px solid var(--ink); border-radius: 4px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 700; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .setup-start-btn svg {
flex: none; transition: none; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .setup-start-len {
font-size: 12px; font-weight: 600; color: var(--stone); padding-left: 10px; border-left: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .setup-start .setup-section-header:hover .setup-start-btn {
background: var(--ink); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .setup-start .setup-section-header:hover .setup-start-btn svg {
color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .setup-start .setup-section-header:hover .setup-start-btn path {
fill: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .setup-start .setup-section-header:hover .setup-start-len {
color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.35);
}
.tsmp-dashpages.tsmp-dashpages .setup-start .setup-section-header.collapsed svg.setup-start-play {
transform: none;
}
.tsmp-dashpages.tsmp-dashpages .setup-section-header:not(.collapsed) {
padding-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .setup-start .setup-section-body {
padding-top: 18px;
}
.tsmp-dashpages.tsmp-dashpages .setup-section-body .demo-accordion {
max-width: none; margin: 0 0 16px;
}
.tsmp-dashpages.tsmp-dashpages .setup-section-body .demo-accordion .demo-divider {
justify-content: flex-start; margin: 0 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .setup-section-body .demo-accordion.collapsed .demo-divider {
margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .setup-section-body .demo-accordion .demo-divider-line {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .video-demo-box {
aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: linear-gradient(150deg, var(--ink), var(--mascot));
  display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .play-circle-lg {
width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .video-demo-caption {
text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 12px;
}
.tsmp-dashpages.tsmp-dashpages .video-demo-subcaption {
text-align: center; font-size: 12.5px; color: var(--stone); line-height: 1.5; margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .dash-chat-messages {
display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; padding: 20px 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-chat-messages[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .brain-dump-bar {
background: var(--white); padding: 14px 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-home-wrap:not(.is-empty) .brain-dump-bar {
position: sticky; bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .bdb-chat-bar {
max-width: 720px; margin: 0 auto; background: #FCFAF7; border: 1px solid var(--mascot); border-top: 3px solid var(--mascot); border-radius: var(--radius-card);
  display: flex; align-items: flex-end; padding: 22px 8px 22px 20px; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .bdb-chat-bar:focus-within {
border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,26,24,0.08);
}
.tsmp-dashpages.tsmp-dashpages .bdb-chat-bar textarea:focus {
box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .bdb-chat-bar textarea {
flex: 1; border: none; background: none; font-family: inherit; resize: none; overflow: hidden; max-height: 160px; font-size: 15px; color: var(--ink); line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .bdb-chat-bar textarea::placeholder {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .btn-kit-start-wrap {
max-width: 720px; margin: 12px auto 0; display: flex; justify-content: flex-end;
}
.tsmp-dashpages.tsmp-dashpages .btn-kit-start {
display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; white-space: nowrap; text-align: center;
  font-family: var(--ff-body); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--radius-btn); padding: 13px 24px; cursor: pointer;
  background: var(--mascot-light); color: var(--mascot); border: 1px solid var(--mascot-light);
  transition: all 0.2s var(--ease-out);
}
.tsmp-dashpages.tsmp-dashpages .btn-kit-start svg {
flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .btn-kit-start:hover, .tsmp-dashpages.tsmp-dashpages .btn-kit-start.is-confirmed {
background: var(--fri-yay); color: var(--white); border-color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .dash-home-wrap:not(.is-empty) .btn-kit-start {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .upload-overlay-wrap {
position: relative; margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .upload-overlay-wrap .banner-preview {
margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .upload-overlay-btn {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(28,26,24,0.75); color: var(--white); border: none;
  border-radius: var(--radius-btn); padding: 10px 18px; font-weight: 600; font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .upload-overlay-btn:hover {
background: rgba(28,26,24,0.9);
}
.tsmp-dashpages.tsmp-dashpages .avatar-upload-wrap {
position: relative; display: inline-block; margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .avatar-upload-wrap .photo-upload-zone {
margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .avatar-upload-badge {
position: absolute; bottom: 2px; right: 2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--mascot); color: var(--white); border: 2px solid var(--white);
  display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .avatar-upload-badge:hover {
background: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .photo-crop-modal-overlay {
position: fixed; inset: 0; background: rgba(28,26,24,0.6); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.tsmp-dashpages.tsmp-dashpages .photo-crop-modal-overlay[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .photo-crop-modal {
background: var(--white); border-radius: var(--radius-card); padding: 32px; width: 100%; max-width: 420px; text-align: center; box-shadow: var(--shadow-lg);
}
.tsmp-dashpages.tsmp-dashpages .photo-crop-modal h2 {
font-weight: 700; font-size: 18px; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .photo-crop-modal p {
font-size: 13px; color: var(--stone); margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .crop-stage {
position: relative; width: 280px; height: 280px; margin: 0 auto 20px; border-radius: var(--radius-card); overflow: hidden; background: var(--ivory);
}
.tsmp-dashpages.tsmp-dashpages .crop-square-image {
position: absolute; inset: 0; background: linear-gradient(150deg, var(--sage), var(--gold-light)); transform: scale(1);
}
.tsmp-dashpages.tsmp-dashpages .crop-circle-mask {
position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(28,26,24,0.55); pointer-events: none;
}
.tsmp-dashpages.tsmp-dashpages .crop-zoom-row {
display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .crop-zoom-row input[type="range"] {
flex: 1; accent-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .crop-modal-actions {
display: flex; gap: 12px; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .crop-modal-actions .btn {
flex: 1; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .onboarding-modal-overlay {
position: fixed; inset: 0; background: rgba(28,26,24,0.5); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.tsmp-dashpages.tsmp-dashpages .onboarding-modal-overlay[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .onboarding-modal {
background: var(--white); border-radius: var(--radius-card); padding: 40px; width: 100%; max-width: 440px; text-align: center; box-shadow: var(--shadow-lg);
}
.tsmp-dashpages.tsmp-dashpages .onboarding-modal .play-circle {
width: 64px; height: 64px; margin: 0 auto 20px; background: linear-gradient(150deg, var(--ink), var(--mascot));
}
.tsmp-dashpages.tsmp-dashpages .onboarding-modal h2 {
font-weight: 700; font-size: 19px; margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .onboarding-modal p {
font-size: 14px; color: var(--stone); margin-bottom: 24px;
}
/* ===== MY PLATFORMS ===== */
.tsmp-dashpages.tsmp-dashpages .platform-row {
display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .platform-row:last-child {
border-bottom: none;
}
.tsmp-dashpages.tsmp-dashpages .platform-row .social-icon {
width: 40px; height: 40px; font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .platform-row .pf-info {
flex: 1;
}
.tsmp-dashpages.tsmp-dashpages .platform-row .pf-name {
font-weight: 600; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .platform-row .pf-sub {
font-size: 12px; color: var(--stone); margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .pf-status {
font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pf-status.warn {
color: #9A6A12;
}
.tsmp-dashpages.tsmp-dashpages .pf-status.connected {
color: var(--sage-dark);
}
.tsmp-dashpages.tsmp-dashpages .pf-status.connected svg {
color: var(--sage-dark);
}
/* ===== MY PROJECTS ===== */
.tsmp-dashpages.tsmp-dashpages .tag-chips-inline {
display: flex; flex-wrap: wrap; gap: 4px;
}
.tsmp-dashpages.tsmp-dashpages .tag-chips-inline .chip {
font-size: 9px; padding: 3px 8px;
}
@media (max-width: 1080px) {
.tsmp-dashpages.tsmp-dashpages .order-detail-grid {
grid-template-columns: 1fr;
}
.tsmp-dashpages.tsmp-dashpages .stat-tiles {
grid-template-columns: repeat(3, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .charts-row {
grid-template-columns: 1fr;
}

}
@media (max-width: 860px) {
.tsmp-dashpages.tsmp-dashpages .field-row, .tsmp-dashpages.tsmp-dashpages .field-row.credentials {
grid-template-columns: 1fr;
}
.tsmp-dashpages.tsmp-dashpages .stat-tiles {
grid-template-columns: repeat(2, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .sidebar {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .announce-layout {
flex-direction: column;
}

}
/* ===== COUPONS ===== */
.tsmp-dashpages.tsmp-dashpages .cp-step {
font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mascot); margin: 26px 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .mc-req {
color: #C25F4E;
}
.tsmp-dashpages.tsmp-dashpages .mc-sub {
font-size: 13px; color: var(--stone); margin: -4px 0 14px; max-width: 70ch;
}
.tsmp-dashpages.tsmp-dashpages .mc-auto {
font-size: 13px; color: var(--stone); background: var(--cream); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 6px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="community-paid"] textarea, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="community-free"] textarea {
width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; resize: vertical; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="community-paid"] .field input[type=text], .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="community-paid"] .field input[type=url], .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="community-free"] .field input[type=text], .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="community-free"] .field input[type=url], .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="community-paid"] select, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="community-free"] select {
width: 100%; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop {
border: 1.5px dashed var(--border); border-radius: 10px; background: var(--cream); color: var(--stone); font-size: 13px; padding: 22px 14px; text-align: center; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop:hover, .tsmp-dashpages.tsmp-dashpages .mc-drop:focus-visible {
border-color: var(--mascot); color: var(--ink); outline: none;
}
.tsmp-dashpages.tsmp-dashpages .mc-chips {
display: flex; flex-wrap: wrap; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .mc-chip {
font: inherit; font-size: 12.5px; font-weight: 400; background: var(--cream); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: background .15s, border-color .15s;
}
/* same soft selected state as the manual-upload chips (.op-chip) */
.tsmp-dashpages.tsmp-dashpages .mc-chip.is-on {
background: var(--mascot-light); color: var(--ink); border-color: var(--ink); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .mc-chip:hover:not(.is-on) {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-chip {
border-radius: 4px !important;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop {
border-radius: 4px !important;
}
.tsmp-dashpages.tsmp-dashpages .mc-canva {
font-size: 12.5px; color: var(--stone); margin: 8px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .mc-link {
background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .mc-link:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .mc-other {
margin-top: 10px; width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px;
}
.tsmp-dashpages.tsmp-dashpages .mc-other[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .mc-lockrow {
display: flex; align-items: center; gap: 8px; background: var(--cream); border: 1px solid var(--border); border-radius: 4px; padding: 0 12px; color: var(--stone); cursor: not-allowed;
}
.tsmp-dashpages.tsmp-dashpages .mc-lockrow input {
border: 0 !important; background: transparent !important; color: var(--stone); cursor: not-allowed; padding: 9px 0;
}
.tsmp-dashpages.tsmp-dashpages .mc-actions-l {
margin-right: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .mc-actions .mc-warn {
margin-right: 0;
}
.tsmp-dashpages.tsmp-dashpages .mc-unpub {
margin-top: 22px; font-size: 12.5px; color: var(--stone); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
}
.tsmp-dashpages.tsmp-dashpages .mc-unpub-ask[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv-ov {
position: fixed; inset: 0; z-index: 3000; background: rgba(28,26,24,.55); display: flex; justify-content: center; align-items: flex-start; padding: 4vh 16px; overflow: auto;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv {
position: relative; width: 100%; max-width: 780px; background: var(--white); border-radius: 12px; padding: 34px 38px 36px; box-shadow: 0 24px 60px rgba(0,0,0,.25); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-pv-x {
position: absolute; top: 10px; right: 16px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--stone); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv-x:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-pv-bar {
font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv--wide {
max-width: 1180px; padding: 46px 0 0; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv--wide .mc-pv-bar {
position: absolute; top: 14px; left: 24px; margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv-frame {
display: block; width: 100%; height: calc(88vh - 46px); border: 0; background: #fff; border-radius: 0 0 12px 12px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv h2 {
font-size: 30px; line-height: 1.15; margin: 4px 0 8px; letter-spacing: -.02em;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv h3 {
font-size: 17px; margin: 26px 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-eye {
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-lede {
font-size: 16px; color: #55514D; margin: 0 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv p {
font-size: 14px; line-height: 1.55; margin: 0 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-empty {
color: var(--stone); font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv ul {
margin: 0 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.6;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-btn {
display: inline-block; background: var(--mascot); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; padding: 12px 22px; border-radius: 4px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-fine {
font-size: 12px; color: var(--stone); margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-grid > div {
border: 1px solid var(--border); border-radius: 8px; padding: 14px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-two {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv details {
border-top: 1px solid var(--border); padding: 10px 0; font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv summary {
font-weight: 700; cursor: pointer;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .mc-pv {
padding: 28px 20px;
}
.tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-grid, .tsmp-dashpages.tsmp-dashpages .mc-pv .mc-pv-two {
grid-template-columns: 1fr;
}

}
.tsmp-dashpages.tsmp-dashpages .mc-policy {
background: var(--cream); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; font-size: 13px; color: var(--ink); margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .mc-policy p {
margin: 4px 0 0; color: #55514D; line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .mc-tabs {
margin: 22px 0 40px;
}
.tsmp-dashpages.tsmp-dashpages .mc-tabbar {
display: flex; flex-wrap: wrap; gap: 0 28px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .mc-tab {
font: inherit; font-size: 14px; font-weight: 400; color: var(--stone); background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 0 10px; margin-bottom: -1px; cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .mc-tab:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-tab.is-on {
font-weight: 700; color: var(--ink); border-bottom-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-tabs-hint {
font-size: 12px; color: var(--stone); margin: 8px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .mc-limit {
font-size: 12.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .mc-limit[hidden], .tsmp-dashpages.tsmp-dashpages .mc-tabs .mc-link[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .mc-price-extra {
margin: -4px 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .mc-earn {
font-size: 13px; color: var(--stone); margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .mc-earn b {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-check {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .mc-check input {
accent-color: var(--mascot); width: 16px; height: 16px; margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .mc-annual[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .mc-video .video-mode-tabs {
justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .mc-video .video-panel {
max-width: 560px; margin-left: auto; margin-right: auto;
}
.tsmp-dashpages.tsmp-dashpages .mc-video .video-demo-box, .tsmp-dashpages.tsmp-dashpages .mc-video .video-demo-caption {
max-width: 560px; margin-left: auto; margin-right: auto;
}
.tsmp-dashpages.tsmp-dashpages .mc-video .video-demo-caption {
text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .mc-video .video-record-box {
aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .mc-video .video-upload-zone {
min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop--169 {
aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; padding: 0; max-width: 560px;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop--45 {
aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: 0; max-width: 240px;
}
.tsmp-dashpages.tsmp-dashpages .mc-media {
align-items: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .mc-media.field-row {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .mc-media .field, .tsmp-dashpages.tsmp-dashpages .mc-media.field {
text-align: center; margin-bottom: 22px;
}
.tsmp-dashpages.tsmp-dashpages .mc-media .mc-drop--169, .tsmp-dashpages.tsmp-dashpages .mc-media.field .mc-drop--169, .tsmp-dashpages.tsmp-dashpages .mc-media .mc-drop--45 {
margin-left: auto; margin-right: auto;
}
.tsmp-dashpages.tsmp-dashpages .mc-video > label {
display: block; text-align: center; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .mc-video {
margin-top: 10px;
}
.tsmp-dashpages.tsmp-dashpages .mc-canva-row {
margin-top: 10px;
}
.tsmp-dashpages.tsmp-dashpages .mc-media .mc-canva {
text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .mc-media.field-row {
display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 22px 40px;
}
.tsmp-dashpages.tsmp-dashpages .mc-media.field-row .field {
flex: 0 0 auto; margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .mc-media.field-row .mc-drop--169 {
width: 400px; max-width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .mc-media.field-row .mc-drop--45 {
width: 180px;
}
.tsmp-dashpages.tsmp-dashpages .mc-media.field-row .mc-canva {
max-width: 400px;
}
.tsmp-dashpages.tsmp-dashpages .mc-note {
font-size: 12.5px; color: var(--stone); margin: -2px 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop-idle {
display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-drop.is-filled {
border-style: solid; background: linear-gradient(145deg, #E8DDD2, #D4C8BC); color: var(--ink); flex-direction: column; gap: 4px;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop.is-filled .mc-drop-idle {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop-file {
font-size: 12.5px; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop-actions {
display: flex; justify-content: center; gap: 18px; margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop-actions a {
font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .mc-drop-actions a:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .mc-video .video-upload-zone {
cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-chip {
font-size: 9.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px; background: #F3EBDD; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-card {
width: 300px; max-width: 100%; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-img {
aspect-ratio: 16 / 9; background: linear-gradient(145deg, #E8E0D8, #D4C8BC); display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(120,110,100,.6);
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-img.is-filled {
color: rgba(60,50,40,.7);
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-body {
padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-name {
font-size: 13px; font-weight: 700; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-tag {
font-size: 12px; color: var(--ink); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-foot {
display: flex; align-items: center; justify-content: space-between; margin-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-price {
font-size: 16px; font-weight: 800; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-cardpv-btn {
font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--ink); border-radius: 4px; padding: 7px 12px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-slots {
display: flex; flex-direction: column; gap: 22px; margin-bottom: 22px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot {
display: flex; gap: 22px; align-items: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot .mc-drop {
margin: 0 !important; flex: none; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 0;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot .mc-drop--169 {
width: 240px !important; max-width: 240px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot .mc-drop--45 {
width: 144px !important; max-width: 144px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot .mc-drop-idle svg {
width: 22px; height: 22px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot .mc-drop.is-filled .mc-drop-idle {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-info {
min-width: 0; padding-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-label {
font-size: 14px; font-weight: 700; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-size {
font-size: 12.5px; color: var(--stone); margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-info .mc-note {
margin: 8px 0 12px; max-width: 380px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-actions .mc-up {
display: inline-flex; align-items: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-actions .mc-up[hidden], .tsmp-dashpages.tsmp-dashpages .mc-slot-edit[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-edit {
display: inline-flex; align-items: center; gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-name {
font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-edit a {
font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .mc-slot-edit a:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .mc-slot .mc-canva-row {
margin: 0;
}
@media (max-width: 600px) {
.tsmp-dashpages.tsmp-dashpages .mc-slot {
flex-direction: column;
}

}
.tsmp-dashpages.tsmp-dashpages .mc-trio {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages .mc-trio .field input, .tsmp-dashpages.tsmp-dashpages .mc-trio .field textarea {
margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .mc-two {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.tsmp-dashpages.tsmp-dashpages .mc-col-title {
font-size: 13px; margin: 0 0 8px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mc-pair .field, .tsmp-dashpages.tsmp-dashpages .mc-list .field {
margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .mc-faq .field, .tsmp-dashpages.tsmp-dashpages .mc-testi .field {
margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .mc-faq .field input, .tsmp-dashpages.tsmp-dashpages .mc-faq .field textarea {
margin-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .mc-testi {
padding: 14px 0; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .mc-actions {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .mc-actions .mc-warn {
margin-right: auto; font-size: 13px; color: #C25F4E;
}
.tsmp-dashpages.tsmp-dashpages .mc-actions .mc-warn[hidden], .tsmp-dashpages.tsmp-dashpages .mc-saved[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .mc-preview {
font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .mc-preview:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .mc-preview-top {
margin: 22px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .mc-saved {
text-align: right; font-size: 13px; color: var(--stone); margin: 10px 0 0;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .mc-trio, .tsmp-dashpages.tsmp-dashpages .mc-two {
grid-template-columns: 1fr;
}

}
.tsmp-dashpages.tsmp-dashpages .cp-create h2 + .cp-step {
margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .cp-hint {
font-weight: 400; color: var(--stone); font-size: 12px;
}
.tsmp-dashpages.tsmp-dashpages .cp-types {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .cp-type {
border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--stone); line-height: 1.45; transition: border-color .15s, background .15s;
}
.tsmp-dashpages.tsmp-dashpages .cp-type input {
position: absolute; opacity: 0; pointer-events: none;
}
.tsmp-dashpages.tsmp-dashpages .cp-type strong {
font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .cp-type:hover {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .cp-type.is-on {
border-color: var(--ink); background: #FBF6F1; box-shadow: inset 0 0 0 1px var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .cp-amount {
display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .cp-amount input {
width: 90px !important;
}
.tsmp-dashpages.tsmp-dashpages .cp-code-input {
font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .04em;
}
.tsmp-dashpages.tsmp-dashpages .cp-applies, .tsmp-dashpages.tsmp-dashpages .cp-checks {
display: flex; flex-direction: column; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .cp-applies {
flex-direction: row; gap: 24px; margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .cp-radio, .tsmp-dashpages.tsmp-dashpages .cp-check {
display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink); line-height: 1.5; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .cp-radio input, .tsmp-dashpages.tsmp-dashpages .cp-check input {
margin-top: 3px; accent-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .cp-prod-picker {
border: 1px solid var(--border); border-radius: 10px; padding: 12px;
}
.tsmp-dashpages.tsmp-dashpages .cp-prod-picker[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .cp-prod-search {
width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font: inherit; font-size: 13px; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .cp-prod-list {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; max-height: 160px; overflow: auto;
}
.tsmp-dashpages.tsmp-dashpages .cp-prod {
display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink); padding: 5px 0; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .cp-prod input {
accent-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .cp-more {
margin-top: 14px; font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .cp-more summary {
cursor: pointer; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .cp-preview-wrap {
margin-top: 26px; padding: 18px; border: 1px dashed var(--border); border-radius: 10px; background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .cp-actions {
display: flex; justify-content: flex-end; margin-top: 20px;
}
.tsmp-dashpages.tsmp-dashpages .cp-table-wrap {
overflow-x: auto;
}
.tsmp-dashpages.tsmp-dashpages .cp-table td {
vertical-align: middle;
}
.tsmp-dashpages.tsmp-dashpages .cp-mono {
font-family: var(--ff-mono); color: var(--ink) !important; font-size: 12px !important;
}
/* The coupon button (same design as on product pages + storefront): a simple light-peach rectangle */
.tsmp-dashpages.tsmp-dashpages .ts-coupon {
display: inline-flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; border: 1px dashed #B9AFA4; background: #FAFAF6; border-radius: 6px; padding: 7px 12px; font-family: inherit; color: var(--ink); line-height: 1.25; max-width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .ts-coupon-label {
font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .ts-coupon-tag {
font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: .02em; color: var(--ink); white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .ts-coupon--sm {
padding: 5px 10px;
}
.tsmp-dashpages.tsmp-dashpages .ts-coupon--sm .ts-coupon-label {
font-size: 12px;
}
@media (max-width: 1100px) {
.tsmp-dashpages.tsmp-dashpages .cp-types {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .cp-types, .tsmp-dashpages.tsmp-dashpages .cp-prod-list {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .cp-applies {
flex-direction: column; gap: 10px;
}

}
/* ===== MY TEAM ===== */
.tsmp-dashpages.tsmp-dashpages .tm-seats {
font-size: 13px; color: var(--ink); margin: 18px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .tm-roles {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .tm-owner-note {
font-size: 12px; color: var(--stone); margin: 14px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .tm-access {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 24px; border: 1px solid var(--border); border-radius: 10px; background: #FBF8F4; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .tm-access-col {
padding: 16px 20px;
}
.tsmp-dashpages.tsmp-dashpages .tm-access-col + .tm-access-col {
border-left: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .tm-access-head {
font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mascot); margin: 0 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .tm-access-text {
font-size: 13.5px; color: var(--ink); line-height: 1.55; margin: 0;
}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .tm-access {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .tm-access-col + .tm-access-col {
border-left: 0; border-top: 1px solid var(--border);
}

}
.tsmp-dashpages.tsmp-dashpages .tm-perms {
display: flex; flex-direction: column; gap: 12px; margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .tm-perm {
display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .tm-th-perm {
font-size: 10px !important; line-height: 1.35;
}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .tm-access {
grid-template-columns: minmax(0, 1fr);
}

}
.tsmp-dashpages.tsmp-dashpages .tm-credit-limit {
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin: -4px 0 0 46px;
}
.tsmp-dashpages.tsmp-dashpages .tm-credit-limit input {
width: 100px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .tm-credit-limit[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .tm-actions {
display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .tm-sent {
margin-top: 18px; padding: 16px; border: 1px dashed var(--border); border-radius: 10px; background: #FBF8F4;
}
.tsmp-dashpages.tsmp-dashpages .tm-sent-msg {
font-size: 13px; color: var(--ink); margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .tm-link-row {
display: flex; gap: 8px; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .tm-link-row input {
flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font-family: var(--ff-mono); font-size: 12px; color: var(--ink); background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .tm-preview-link {
color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .tm-table td {
vertical-align: middle;
}
.tsmp-dashpages.tsmp-dashpages .tm-name {
display: block; color: var(--ink); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .tm-email {
display: block; font-size: 12px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .tm-role-select {
border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px; color: var(--ink); background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .tm-pill {
display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
}
.tsmp-dashpages.tsmp-dashpages .tm-pill--owner {
background: var(--ivory, #F3EDE3); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .tm-pill--active {
background: #E4F0EA; color: #3E6B55;
}
.tsmp-dashpages.tsmp-dashpages .tm-pill--invited {
background: #F5E8E2; color: #A0523F;
}
.tsmp-dashpages.tsmp-dashpages .tm-row-actions {
text-align: right; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .tm-link-btn {
border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .tm-link-btn.tm-remove {
color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .tm-activity {
list-style: none; margin: 0; padding: 0;
}
.tsmp-dashpages.tsmp-dashpages .tm-activity li {
position: relative; font-size: 13px; color: var(--ink); padding: 10px 140px 10px 0; border-bottom: 1px solid var(--border); line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .tm-activity li:last-child {
border-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .tm-activity li > span:last-child {
position: absolute; right: 0; top: 10px; color: var(--stone); font-size: 12px; white-space: nowrap;
}
/* VA view (prototype: ?as=va) */
.tsmp-dashpages.tsmp-dashpages .va-banner {
display: none; align-items: center; justify-content: space-between; gap: 12px; background: #F5E8E2; border: 1px dashed #D9A99A; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--ink); margin-bottom: 24px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .va-banner select {
border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12px; background: var(--white);
}
body.is-va .tsmp-dashpages.tsmp-dashpages .va-banner {
display: flex;
}
body.is-va .tsmp-dashpages.tsmp-dashpages .owner-only, body.is-va .tsmp-dashpages.tsmp-dashpages .sidebar-nav li[data-nav="withdraw"] {
display: none !important;
}
@media (max-width: 900px) {
.tsmp-dashpages.tsmp-dashpages .tm-roles {
grid-template-columns: minmax(0, 1fr);
}

}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-group-sub > a > span .nav-pro {
display: inline-block; white-space: nowrap; vertical-align: 1px; margin-left: 8px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-group-sub > a > span.one-line {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-group-sub > a .nw {
white-space: nowrap;
}
/* "X-Sellerator™" never breaks across lines */
.tsmp-dashpages.tsmp-dashpages .ts-vc-host {
position: relative; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 22px 10px 8px; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); color: #fff; font-family: var(--ff-body, 'Inter', sans-serif); font-size: 11px; line-height: 1; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc button {
all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; cursor: pointer; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc button:hover {
background: rgba(255,255,255,.18);
}
.tsmp-dashpages.tsmp-dashpages .ts-vc button:focus-visible {
outline: 2px solid #fff; outline-offset: 1px;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc svg {
width: 15px; height: 15px; display: block;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-time {
white-space: nowrap; padding: 0 6px; font-variant-numeric: tabular-nums; opacity: .92;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-bar {
flex: 1; min-width: 40px; height: 16px; display: flex; align-items: center; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-track {
position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35);
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-fill {
position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #fff;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-fill::after {
content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-speed {
min-width: 38px !important;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-host.ts-vc-compact .ts-vc-time, .tsmp-dashpages.tsmp-dashpages .ts-vc-host.ts-vc-compact .ts-vc-mute {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-host.ts-vc-playing .play-circle-lg, .tsmp-dashpages.tsmp-dashpages .ts-vc-host.ts-vc-playing .video-play-btn, .tsmp-dashpages.tsmp-dashpages .ts-vc-host.ts-vc-playing .search-demo-play {
opacity: 0; pointer-events: none;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-host .video-duration-badge, .tsmp-dashpages.tsmp-dashpages .ts-vc-host .preview-player-time {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .ts-vc-host:fullscreen {
border-radius: 0; background: #000; display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-btn {
all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 6px; cursor: pointer; color: inherit; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-btn:hover {
background: rgba(128,128,128,.18);
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-btn:focus-visible {
outline: 2px solid currentColor; outline-offset: 1px;
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-btn svg {
width: 16px; height: 16px; display: block;
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-speed {
min-width: 40px;
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-host {
color: var(--ink); flex-wrap: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-host.ts-ac-dark {
color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-host .audio-player-bar, .tsmp-dashpages.tsmp-dashpages .ts-ac-host .audio-wave {
cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-host .audio-wave span {
transition: opacity .15s;
}
.tsmp-dashpages.tsmp-dashpages .ts-ac-host .audio-player-bar-fill {
transition: width .2s linear;
}
@media (max-width: 480px) {
.tsmp-dashpages.tsmp-dashpages .ts-ac-host .ts-ac-mute {
display: none;
}

}
/* Coupons: quick picks */
.tsmp-dashpages.tsmp-dashpages .cp-quick {
margin: 4px 0 22px; padding: 0; border: 0; border-radius: 0; background: none;
}
.tsmp-dashpages.tsmp-dashpages .cp-quick-title {
font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .cp-quick-row {
display: flex; flex-wrap: wrap; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .cp-quick-pick {
display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
}
.tsmp-dashpages.tsmp-dashpages .cp-quick-pick .ts-coupon {
width: 232px; min-height: 46px; justify-content: center; box-sizing: border-box; transition: border-color .2s;
}
.tsmp-dashpages.tsmp-dashpages .cp-quick-pick:hover .ts-coupon {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .cp-quick-use {
font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .cp-quick-pick:hover .cp-quick-use {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .cp-quick-gap {
height: 32px;
}
/* Grouped sidebar */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav {
padding-top: 12px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-group {
font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); padding: 18px 19px 6px; margin-top: 8px; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-group--plain {
padding: 0; margin-top: 14px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-sub {
font-size: 11px; font-weight: 400; color: var(--stone); margin-left: 4px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-pro {
margin-left: 6px; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--white); background: var(--gold, #C9A96E); border-radius: 3px; padding: 2px 5px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-ico {
margin-right: 8px; flex: none; vertical-align: -2px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.is-soon > a {
pointer-events: none; cursor: default; opacity: .7;
}
/* Soon: shown, not clickable (same idea as the site header) */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.has-sub.is-soon > a::after {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.is-soon > a {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.is-soon .nav-soon {
margin-left: 6px; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.planned > a {
color: var(--stone);
}
/* no page yet (prototype) */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li > a {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="planned"] .planned-box {
border: 1px dashed var(--border); border-radius: 12px; padding: 48px 32px; text-align: center; color: var(--ink); background: var(--white);
}
/* Seller Dashboard | My Account toggle */
.tsmp-dashpages.tsmp-dashpages .side-toggle {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 18px 14px 4px; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
.tsmp-dashpages.tsmp-dashpages .side-toggle button {
border: 0; background: none; border-radius: 4px; padding: 8px 4px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .side-toggle button.is-on {
background: var(--ink); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .side-toggle button:not(.is-on):hover {
background: #fff;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav[hidden] {
display: none;
}
/* Top bar dropdowns (Community, Affiliate) */
.tsmp-dashpages.tsmp-dashpages .topnav-dd {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-btn {
border: 0; background: none; cursor: pointer; padding: 0 0 4px; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a, .tsmp-dashpages.tsmp-dashpages .topnav-dd-menu strong, .tsmp-dashpages.tsmp-dashpages .topnav-dd-menu span {
text-transform: none !important; letter-spacing: normal !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a::after {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-btn span {
font-size: 10px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu {
position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); min-width: 300px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(28,26,24,.12); padding: 8px; display: none; z-index: 50; text-transform: none; letter-spacing: normal;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd.is-open .topnav-dd-menu {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a {
display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a:hover {
background: var(--bg);
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a[target="_blank"] strong {
text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu .dd-out {
text-decoration: none; display: inline-block;
}
body:not(.tier-pro) .tsmp-dashpages.tsmp-dashpages .topnav-studio {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu strong {
display: block; font-size: 13.5px; font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu span {
display: block; font-size: 12px; color: var(--stone); margin-top: 2px;
}
/* Sidebar profile header */
.tsmp-dashpages.tsmp-dashpages .side-profile {
display: flex; align-items: center; gap: 10px; padding: 18px 14px 4px;
}
.tsmp-dashpages.tsmp-dashpages .side-avatar {
width: 40px; height: 40px; border-radius: 50%; background: #F3EDE3; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .side-who {
min-width: 0; flex: 1; line-height: 1.25;
}
.tsmp-dashpages.tsmp-dashpages .side-who strong {
display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsmp-dashpages.tsmp-dashpages .side-who span {
display: block; font-size: 12px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsmp-dashpages.tsmp-dashpages .side-plan-line {
font-size: 11.5px !important;
}
.tsmp-dashpages.tsmp-dashpages .side-plan-line em {
font-style: normal; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .side-plan-pro, .tsmp-dashpages.tsmp-dashpages .side-plan-plus {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .side-plan-seller {
display: inline; color: #5E7886 !important;
}
/* the plan name takes its plan color: Seller blue, Seller Plus sage, Pro gold */
.tsmp-dashpages.tsmp-dashpages .side-plan-plus {
color: #5E7886 !important;
}
.tsmp-dashpages.tsmp-dashpages .side-plan-pro {
color: #9A7A30 !important;
}
body.tier-plus .tsmp-dashpages.tsmp-dashpages .side-plan-plus, body.tier-pro .tsmp-dashpages.tsmp-dashpages .side-plan-pro {
display: inline;
}
body.tier-plus .tsmp-dashpages.tsmp-dashpages .side-plan-seller, body.tier-pro .tsmp-dashpages.tsmp-dashpages .side-plan-seller {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .side-msgs-wrap {
display: inline-flex; gap: 8px; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .side-msgs {
position: relative; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .side-msgs:hover {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .msg-root {
margin-top: 24px; max-width: 880px;
}
.tsmp-dashpages.tsmp-dashpages .msg-sec {
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8F6F57; margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .msg-list {
background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .msg-row {
display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .msg-row:last-child {
border-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .msg-row:hover {
background: #F6F5F4;
}
.tsmp-dashpages.tsmp-dashpages .msg-kind {
flex: none; width: 118px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 4px 8px; text-align: center; background: #EDF1F4; color: #4F6B7A;
}
.tsmp-dashpages.tsmp-dashpages .msg-kind.q {
background: #F3EDE3; color: #8F6F57;
}
.tsmp-dashpages.tsmp-dashpages .msg-main {
flex: 1; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .msg-main b {
display: block; font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .msg-main span {
display: block; font-size: 13px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsmp-dashpages.tsmp-dashpages .msg-date {
flex: none; font-size: 12px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .msg-go {
flex: none; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .msg-empty {
padding: 28px 18px; text-align: center; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .msg-foot {
margin: 14px 2px 0; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .msg-foot a {
color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-right: 14px;
}
.tsmp-dashpages.tsmp-dashpages .side-who strong {
font-size: 17px; line-height: 1.25;
}
.tsmp-dashpages.tsmp-dashpages .side-who > span {
font-size: 13.5px;
}
.tsmp-dashpages.tsmp-dashpages .side-plan-line {
font-size: 13px !important;
}
.tsmp-dashpages.tsmp-dashpages .side-msgs {
width: 40px; height: 40px;
}
.tsmp-dashpages.tsmp-dashpages .side-msgs-n {
position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--fri-yay, #C25F4E); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .side-profile + .side-toggle {
margin-top: 12px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-count {
margin-left: 8px; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--fri-yay, #C25F4E); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-warn {
min-width: 18px; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.planned > a .nav-count {
color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a {
display: flex !important; align-items: flex-start; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu .dd-ico {
flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px !important; background: none; border: 0; display: inline-flex !important; align-items: center; justify-content: center; color: var(--ink) !important; margin: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a:hover .dd-ico {
color: #bc886d !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu .dd-txt {
display: block !important; margin: 0 !important; color: var(--ink) !important; font-size: inherit !important;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-soon {
margin-left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: #F5E8E2; border-radius: 3px; padding: 2px 6px;
}
/* Accordion sub-menus (Product Kits, X-Sellerator, Orders): caret + open/close */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.has-sub > a {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.has-sub > a::after {
content: ''; width: 7px; height: 7px; margin-left: auto; border-right: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.has-sub.is-open > a::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.has-sub:not(.is-open) > .sub-nav {
display: none;
}
/* Contacts (combined customers / subscribers / followers) */
.tsmp-dashpages.tsmp-dashpages .ct-tabs {
display: flex; gap: 6px; flex-wrap: wrap; margin-top: 24px;
}
.tsmp-dashpages.tsmp-dashpages .ct-tabs button {
border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .ct-tabs button span {
margin-left: 4px; font-weight: 500; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .ct-tabs button.is-on {
background: var(--mascot); border-color: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .ct-tabs button.is-on span {
color: rgba(255,255,255,.75);
}
.tsmp-dashpages.tsmp-dashpages .ct-badge {
display: inline-block; margin: 2px 6px 2px 0; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .ct-badge--customer {
background: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .ct-badge--subscriber {
background: #F5E8E2; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ct-badge--follower {
background: #fff; color: var(--ink); border: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .ct-badge--free {
background: var(--mascot-light); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ct-badge--paid {
background: #F1E3BD; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ct-noemail {
color: var(--stone); font-size: 12.5px; font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .dash-pager {
display: flex; gap: 6px; justify-content: center; margin-top: 20px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .dash-pager:empty {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-pager button {
min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--white); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .dash-pager button:hover:not(:disabled):not(.is-on) {
background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .dash-pager button.is-on {
background: var(--ink); color: #fff; border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .dash-pager button:disabled {
opacity: .4; cursor: default;
}
.tsmp-dashpages.tsmp-dashpages .dash-pager .gap {
align-self: center; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .dash-count {
margin-top: 12px; font-size: 12.5px; color: var(--stone); text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .dash-count:empty {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kit-types {
display: flex; flex-wrap: wrap; gap: 0 28px; margin: 22px 0 0; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .kit-types button {
font: inherit; font-size: 14px; font-weight: 400; color: var(--stone); background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 0 10px; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .kit-types button span {
color: var(--stone); font-weight: 400;
}
.tsmp-dashpages.tsmp-dashpages .kit-types button:hover:not(.is-on) {
color: var(--ink); text-shadow: 0.4px 0 0 currentColor;
}
/* looks bolder on hover without shifting the other tabs */
.tsmp-dashpages.tsmp-dashpages .kit-types button.is-on {
font-weight: 700; color: var(--ink); border-bottom-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kit-soon {
font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #F5E8E2; color: var(--ink); border-radius: 3px; padding: 2px 6px; margin-left: 6px;
}
.tsmp-dashpages.tsmp-dashpages a.chip.is-todo {
text-decoration: none; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages a.chip.is-todo:hover {
border-style: solid; border-color: var(--ink); color: var(--ink); background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .chip.is-todo {
background: transparent; border: 1px dashed var(--border); color: var(--stone); font-weight: 500;
}
.tsmp-dashpages.tsmp-dashpages .kit-prog {
margin-top: 8px; max-width: 240px;
}
.tsmp-dashpages.tsmp-dashpages .kit-prog-bar {
height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .kit-prog-bar i {
display: block; height: 100%; background: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .kit-prog span {
display: block; margin-top: 5px; font-size: 11.5px; color: var(--stone); line-height: 1.4; white-space: normal;
}
.tsmp-dashpages.tsmp-dashpages .kit-act {
white-space: normal; min-width: 130px;
}
.tsmp-dashpages.tsmp-dashpages .kit-discard {
display: block; margin-top: 6px; font-size: 12px; color: var(--stone); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .kit-discard[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kit-discard:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .kit-confirm {
display: block; margin-top: 6px; font-size: 12px; color: var(--ink); line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .kit-confirm a {
font-weight: 600; color: var(--ink); text-decoration: underline; margin-right: 8px;
}
.tsmp-dashpages.tsmp-dashpages .kit-confirm[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kit-none {
margin-top: 16px; font-size: 13.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .kit-none[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kit-empty {
margin-top: 28px; padding: 44px 24px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .kit-empty p {
max-width: 460px; margin: 8px auto 0; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kit-empty[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .main:has(.stage-card[data-stage="credits-hub"]:not([hidden])) :is(.wizard-header, .tsmp-dashpages.tsmp-dashpages #progressBar) {
display: none;
}
/* the Buy Credits page is not a wizard step */
.tsmp-dashpages.tsmp-dashpages .hub-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px;
}
.tsmp-dashpages.tsmp-dashpages .hub-head h1 {
font-size: 28px; margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-bal {
display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .hub-bal-n {
font-family: var(--ff-body); font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-bal span:last-child {
display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-bal small {
font-weight: 400; font-size: 11.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hub-offer {
position: relative; display: grid; grid-template-columns: 36% 1fr; border: 1px solid var(--mascot-light); border-radius: 8px; background: var(--cream); overflow: hidden; box-shadow: 0 10px 30px rgba(28,26,24,.12), 0 2px 6px rgba(28,26,24,.06);
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-img {
position: relative; min-height: 250px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-img img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 55%; display: block;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-body {
padding: 26px 30px 22px; display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-row {
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 12px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-pricebox {
display: flex; flex-direction: column; gap: 2px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-then {
font-size: 12.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hub-incl {
margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); line-height: 1.6;
}
.tsmp-dashpages.tsmp-dashpages .hub-incl[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-text {
flex: 1; min-width: 260px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-h {
font-size: 28px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); line-height: 1.2;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-p {
margin: 0; font-size: 16px; color: var(--ink); line-height: 1.5; max-width: 460px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-p b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-p em {
font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .hub-ribbon {
position: absolute; top: 24px; right: -44px; width: 170px; transform: rotate(45deg); background: var(--mascot-light); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 5px 0; z-index: 2;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-text p {
margin: 6px 0 0; font-size: 13.5px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-tell {
margin-top: 8px; background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .hub-tell:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-buy {
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-price {
font-size: 34px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); line-height: 1;
}
.tsmp-dashpages.tsmp-dashpages .hub-title {
flex: 1 1 360px; max-width: 640px;
}
.tsmp-dashpages.tsmp-dashpages .hub-title h1 {
margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-sub {
margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-sub b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .nb {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .hub-done {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-sub em {
font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .hub-sub a {
color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px;
}
.tsmp-dashpages.tsmp-dashpages .hub-sub a:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-btn {
text-transform: none; letter-spacing: 0; background: var(--cream); color: var(--ink); border: 1px solid var(--mascot); border-radius: 4px; font-weight: 600; font-size: 13.5px; padding: 10px 20px; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .hub-btn:hover {
background: var(--mascot); color: #fff; border-color: var(--mascot); box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-btn--main {
background: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .hub-btn--main:hover {
background: var(--ink); border-color: var(--ink); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack .hub-btn {
width: 100%; padding: 9px 12px;
}
.tsmp-dashpages.tsmp-dashpages .hub-wrap {
background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 30px 32px 28px;
}
.tsmp-dashpages.tsmp-dashpages .hub-how {
margin-top: 6px; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .hub-how:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-trust {
list-style: none; margin: 16px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px;
}
.tsmp-dashpages.tsmp-dashpages .hub-trust li {
display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 400; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-trust svg {
color: var(--mascot); flex: none; stroke-width: 1.8;
}
.tsmp-dashpages.tsmp-dashpages .hub-how-body {
margin-top: 8px; max-width: 580px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-how-body[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-how-body p {
margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-how-body p:last-child {
margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-how-h {
margin-top: 10px !important;
}
.tsmp-dashpages.tsmp-dashpages .hub-how-list {
margin: 0; padding-left: 18px; columns: 2; column-gap: 24px;
}
.tsmp-dashpages.tsmp-dashpages .hub-how-list li::marker {
color: var(--gold);
}
.tsmp-dashpages.tsmp-dashpages .hub-how-sum {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .hub-caret {
display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.tsmp-dashpages.tsmp-dashpages .hub-how[aria-expanded="true"] .hub-caret {
transform: rotate(-135deg) translate(-2px, -2px);
}
.tsmp-dashpages.tsmp-dashpages .hub-tell .hub-caret {
transform: rotate(-45deg);
}
.tsmp-dashpages.tsmp-dashpages .hub-checks {
list-style: none; margin: 16px auto 0; padding: 0; display: inline-flex; flex-direction: column; gap: 10px; text-align: left; font-size: 17px; line-height: 1.35; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-checks li {
display: flex; align-items: center; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .hub-ck {
width: 21px; height: 21px; border: 1.5px solid var(--ink); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .hub-ck {
background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .hub-ck.is-on {
background: var(--mascot-light); color: var(--ink);
}
/* Seller blue on the offer card: border all the way around (thicker top that follows the rounded corners), eyebrows and the Save $50 ribbon; background lightened to the page cream */
.tsmp-dashpages.tsmp-dashpages .hub-offer {
border: 1px solid #728D9C; border-top: 4px solid #728D9C; background: var(--bg);
}
.tsmp-dashpages.tsmp-dashpages .hub-offer .hub-offer-eyebrow {
color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .hub-ribbon {
background: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-bridge {
margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-bridge + .hub-offer-row {
margin-top: 8px; border-top: 0; border-bottom: 0; padding-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .hub-rocket {
vertical-align: -3px;
}
.tsmp-dashpages.tsmp-dashpages #hubBundleBtn, .tsmp-dashpages.tsmp-dashpages #hubMoreGo {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
/* Scaled down a little: more white border around the card and packs, smaller heading that clears the ribbon, so the offer fits above the fold */
.tsmp-dashpages.tsmp-dashpages .hub-head {
margin-bottom: 22px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer {
margin: 0 20px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-body {
padding: 28px 32px 26px; gap: 5px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-h {
font-size: 21px; padding-right: 34px; line-height: 1.22;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer .hub-offer-p {
font-size: 14px; line-height: 1.45; max-width: none;
}
/* Version B of the offer card (open with ?offer=b): shows the .hub-b pieces instead of the .hub-a ones */
.tsmp-dashpages.tsmp-dashpages .hub-offer  
.hub-b {
display: none;
}
body.offer-b .tsmp-dashpages.tsmp-dashpages .hub-a {
display: none;
}
body.offer-b .tsmp-dashpages.tsmp-dashpages .hub-offer-h.hub-b {
display: block;
}
body.offer-b .tsmp-dashpages.tsmp-dashpages ul.hub-b {
display: inline-flex;
}
body.offer-b .tsmp-dashpages.tsmp-dashpages p.hub-b {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .hub-checks--b {
margin: 10px 0 4px; gap: 9px; align-items: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .hub-checks--b li {
align-items: flex-start; font-size: 14px; line-height: 1.45;
}
.tsmp-dashpages.tsmp-dashpages .hub-checks--b .hub-ck {
margin-top: 1px;
}
.tsmp-dashpages.tsmp-dashpages .hub-b-close {
margin-top: 6px; font-size: 14px;
}
/* Version C of the offer card (open with ?offer=c): problem, then the fix, then the numbers */
.tsmp-dashpages.tsmp-dashpages .hub-c {
display: none;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-a, body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-b {
display: none;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-problem {
display: block; margin: 2px 0 4px; padding: 2px 0 2px 16px; border-left: 3px solid var(--mascot-light);
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-problem p {
margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; color: #5E574F;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-problem p:last-child {
margin-bottom: 0;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-problem em {
font-style: italic; font-weight: 700; font-size: 18px; color: var(--mascot); letter-spacing: -.01em;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-h {
display: block; margin-top: 12px; font-size: 22px; line-height: 1.2; padding-right: 36px;
}
.tsmp-dashpages.tsmp-dashpages .hub-c-today {
color: var(--mascot); white-space: nowrap;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-stats {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 2px;
}
.tsmp-dashpages.tsmp-dashpages .hub-c-stat {
background: var(--white); border: 1px solid #DCE5EA; border-top: 3px solid #728D9C; border-radius: 8px; padding: 10px 11px 11px;
}
.tsmp-dashpages.tsmp-dashpages .hub-c-stat b {
display: block; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .hub-c-stat span {
display: block; font-size: 12px; line-height: 1.35; color: #5E574F;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-email {
display: block; margin-top: 8px; font-size: 14px; line-height: 1.5;
}
/* Version D (?offer=d): same layout as C with the "digital dust" wording */
.tsmp-dashpages.tsmp-dashpages .hub-dd {
display: none;
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-cc {
display: none;
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-dd.hub-c-problem {
display: block; margin: 2px 0 4px; padding: 2px 0 2px 16px; border-left: 3px solid var(--mascot-light);
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-dd.hub-c-problem p {
margin: 0; font-size: 14.5px; line-height: 1.45; color: #5E574F;
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-dd.hub-c-problem em {
font-style: italic; font-weight: 700; font-size: 18px; color: var(--mascot); letter-spacing: -.01em;
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-dd.hub-c-h {
display: block; margin-top: 12px; font-size: 22px; line-height: 1.2; padding-right: 36px;
}
/* C and D: the price is the hero; the 79 / 790 / 30 numbers are supporting words only */
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-support {
display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: #6B645C;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-support b {
color: var(--ink); font-weight: 700;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-savepill {
display: inline-block;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-offer-price {
font-size: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-offer-price span {
font-size: 15px;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-offer-price .hub-c-savepill {
font-size: 14px; font-weight: 700; padding: 5px 12px; margin-left: 4px;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-offer-cmp {
font-size: 13px;
}
/* D: digital dust in Seller blue, the three wins as a small row of checks */
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-dd.hub-c-problem em {
color: #728D9C;
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-c-email {
display: none;
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-c-row {
display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 2px; font-size: 14px; font-weight: 600;
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-c-row li {
display: flex; align-items: center; gap: 8px;
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-c-row .hub-ck {
width: 16px; height: 16px;
}
body.offer-d .tsmp-dashpages.tsmp-dashpages .hub-dd.hub-c-h .hub-save {
color: var(--mascot);
}
/* the little specks of dust after "digital dust" */
.tsmp-dashpages.tsmp-dashpages .hub-dust {
display: inline-block; position: relative; width: 44px; height: 22px; margin-left: 3px; vertical-align: -4px; color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .hub-dust i {
position: absolute; font-style: normal; line-height: 1; opacity: .75;
}
.tsmp-dashpages.tsmp-dashpages .hub-dust i:nth-child(1) {
left: 2px; top: -3px; font-size: 15px; transform: rotate(12deg);
}
.tsmp-dashpages.tsmp-dashpages .hub-dust i:nth-child(2) {
left: 16px; top: 8px; font-size: 11px; opacity: .55; transform: rotate(-18deg);
}
.tsmp-dashpages.tsmp-dashpages .hub-dust i:nth-child(3) {
left: 28px; top: -2px; font-size: 20px; opacity: .5;
}
.tsmp-dashpages.tsmp-dashpages .hub-dust i:nth-child(4) {
left: 35px; top: 10px; font-size: 12px; opacity: .4;
}
/* C and D use two colors only: Seller blue and mascot. The green chips and lines become light blue. */
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-c-blue, body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-c-blue {
color: #728D9C; font-weight: 700;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-offer .hub-save-green {
color: #4F6B7A; background: #E7EEF2; border-color: #C9D7DF;
}
body.offer-c .tsmp-dashpages.tsmp-dashpages .hub-offer .hub-offer-cmp {
color: #5C7888;
}
/* Version E (?offer=e): no bundle card at the top, the credit packs are the offer */
.tsmp-dashpages.tsmp-dashpages .hub-e {
display: none;
}
/* Version E: the whole white card gets the photo across the top and a mascot border (thicker on top) */
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-wrap {
padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible;
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-head h1 {
display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); margin: 0 0 10px;
}
/* a little headline above the line about a year of marketing */
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-wrap-photo {
display: flex; margin: 0 0 18px;
}
/* #329: her values, replacing the 16px she had here before. The headline
   leads the packs now instead of labelling them, so it is 30px and centred
   with 44px of room above. Changed in place rather than overridden, because
   this is the rule that used to make it small. */
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-e-save {
display: block; margin: 44px 20px 8px; font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); text-align: center;
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-pack-m {
color: var(--mascot);
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-e-bundle a {
color: var(--mascot);
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-offer, body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-or {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-e-eyebrow {
font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mascot); margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-e-p {
margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-e-p b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .hub-e-save {
margin: 0; color: var(--ink);
}

/* #332: the Setup Guide PDF link in the Start Here box. It sits under the
   Watch button and stays visible while the video is folded away, so it is a
   block of its own rather than something tucked inside the accordion. Her
   class name, from the prototype. */
.tsmp-dashpages.tsmp-dashpages .setup-start-pdf {
display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .setup-start-pdf:hover {
color: var(--mascot);
}

/* ---- #329: the fact line and the expander, under the headline ----
 *
 * Her classes and her values (teacherstore-dashboard-pages.html, body.offer-e
 * block). Our own names for these were caught by t-creditsdesign.php, which
 * compares the classes we render against the ones on her page: hub-e-fact and
 * hub-e-how-wrap are hers, and inventing parallel names would have left her
 * stylesheet and ours describing the same box in two vocabularies.
 */
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-e-how-wrap,
.tsmp-dashpages.tsmp-dashpages .hub-e-how-wrap {
display: block; margin: 0 20px 26px; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .hub-e-fact {
margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-e-fact b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .hub-e-how-wrap .hub-how {
margin-top: 10px;
}
/* The body stays left-aligned inside a centred block — a bulleted list of 79
   pieces reads badly centred. */
.tsmp-dashpages.tsmp-dashpages .hub-e-how-wrap .hub-how-body {
margin: 12px auto 0; max-width: 640px; text-align: left;
}
@media (max-width: 760px) {
	body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-e-save { margin-top: 28px; font-size: 24px; }
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-packs {
margin: 0 20px; gap: 14px;
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-pack {
padding: 28px 12px 22px;
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-pack-n {
font-size: 46px;
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-pack-p {
font-size: 24px; margin-top: 10px;
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-pack-m {
font-size: 12.5px; font-weight: 700; color: var(--mascot); margin-bottom: 14px;
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-pack .hub-btn {
padding: 10px 10px; font-size: 13.5px;
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-e-bundle {
display: block; margin: 20px 20px 4px; font-size: 13.5px; color: var(--stone); text-align: center;
}
body.offer-e .tsmp-dashpages.tsmp-dashpages .hub-e-bundle a {
color: var(--mascot); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-math {
margin-top: 10px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer .hub-offer-while {
margin-top: 14px; padding-top: 0; border-top: 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer .hub-offer-bridge {
margin-top: 16px; padding-top: 0; border-top: 0; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-checks--card {
margin: 6px 0 2px; font-size: 14px; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .hub-checks--card .hub-ck {
width: 16px; height: 16px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-bridge {
margin-top: 10px; font-size: 11px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-row {
margin-top: 6px; padding: 8px 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-price {
font-size: 28px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-price span {
font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-cmp {
font-size: 12px; margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .hub-break {
font-size: 12.5px; margin: 6px 0 2px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-then {
font-size: 11.5px;
}
.tsmp-dashpages.tsmp-dashpages #hubBundleBtn {
min-width: 220px; padding: 12px 26px; margin-top: 10px; font-size: 13.5px;
}
.tsmp-dashpages.tsmp-dashpages .hub-tell {
font-size: 12.5px;
}
.tsmp-dashpages.tsmp-dashpages .hub-ribbon {
top: 20px; right: -46px; width: 150px; font-size: 10.5px; padding: 4px 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-or {
margin: 20px 20px 14px;
}
.tsmp-dashpages.tsmp-dashpages .hub-packs {
margin: 0 20px; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack {
padding: 16px 8px 12px;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-n {
font-size: 30px;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-p {
font-size: 17px; margin-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-m {
font-size: 11px; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack .hub-btn {
padding: 7px 8px; font-size: 12.5px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-math {
margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-checks--card {
margin: 10px 0 4px; font-size: 15px; gap: 8px; align-items: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .hub-checks--card .hub-ck {
width: 18px; height: 18px;
}
.tsmp-dashpages.tsmp-dashpages .hub-m {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-ip {
font-style: italic; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-save {
color: var(--mascot); white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .hub-incl li::marker {
color: var(--gold);
}
.tsmp-dashpages.tsmp-dashpages .hub-modal.hub-modal--wide {
max-width: 940px; padding: 34px 36px 30px; border-top: 5px solid var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-title {
font-family: var(--ff-body); font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-head {
text-align: center; max-width: 680px; margin: 0 auto 44px;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-kicker {
font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mascot); margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-lead {
font-size: 14.5px; color: var(--ink); margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-cols {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; font-size: 13.5px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-label {
font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-who, .tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-inc {
margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-inc-sub {
font-size: 12.5px; color: var(--stone); margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-list {
list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-list li {
position: relative; padding-left: 20px;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-list li::before {
content: "\2713"; position: absolute; left: 0; font-weight: 700; color: var(--gold);
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-faq-title {
text-align: left; font-size: 18px; margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-faq {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 12px; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-faq strong {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .hub-cancel {
margin: 18px 0 0; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-more-cta {
margin-top: 16px; text-align: center;
}
@media (max-width: 800px) {
.tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-cols, .tsmp-dashpages.tsmp-dashpages .hub-modal--wide .bpb-faq {
grid-template-columns: 1fr;
}

}
.tsmp-dashpages.tsmp-dashpages .hub-break {
list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink); max-width: 380px;
}
.tsmp-dashpages.tsmp-dashpages .hub-break li {
display: flex; justify-content: space-between; gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages .hub-break s {
color: var(--stone); margin-left: 4px;
}
.tsmp-dashpages.tsmp-dashpages .hub-break .hub-was {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .hub-break .hub-was s {
margin: 0 4px 0 0; font-weight: 400;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-price span {
font-size: 15px; font-weight: 600; letter-spacing: 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-bal {
background: var(--cream); border-color: var(--border);
}
.tsmp-dashpages.tsmp-dashpages .hub-bal span:last-child {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-bal small {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-or {
display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-or::before, .tsmp-dashpages.tsmp-dashpages .hub-or::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.tsmp-dashpages.tsmp-dashpages .hub-packs {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack {
position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 22px 10px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .hub-pack--pop {
border-color: var(--mascot); box-shadow: 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-pack {
transition: border-color .15s ease, box-shadow .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack:hover {
border-color: var(--mascot); box-shadow: 0 0 0 1px var(--mascot);
}
/* The highlight follows the mouse: hovering another pack moves the mascot border and filled button to it */
.tsmp-dashpages.tsmp-dashpages .hub-packs:has(.hub-pack:hover) .hub-pack--pop:not(:hover) {
border-color: var(--border); box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-packs:has(.hub-pack:hover) .hub-pack--pop:not(:hover) .hub-btn {
background: var(--cream); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-pack:hover .hub-btn {
background: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack .hub-btn:hover {
background: var(--ink); border-color: var(--ink); color: #fff;
}
/* the button itself goes dark when the pointer is on it */
.tsmp-dashpages.tsmp-dashpages .hub-pack-badge {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--mascot); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-n {
font-family: var(--ff-body); font-size: 38px; font-weight: 700; letter-spacing: -0.015em; line-height: 1; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-l {
font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-p {
font-size: 20px; font-weight: 700; color: var(--ink); margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-m {
font-size: 11.5px; color: var(--stone); min-height: 16px; margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack .btn {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages #hubBundleBtn {
background: var(--ink); border-color: var(--ink); color: #fff; min-width: 250px; padding: 16px 34px; margin-top: 22px; font-size: 14.5px;
}
.tsmp-dashpages.tsmp-dashpages #hubBundleBtn:hover {
background: var(--mascot); border-color: var(--mascot); color: #fff;
}
/* Email page (standalone "turn on email"): Seller Plus, Seller blue */
/* Email offer: Monthly / Annual switcher above the price ($49 a month or $490 a year: 2 months free, save $98). Every copy of the card (page, STUDIO page, lightbox) follows the same choice. */
.tsmp-dashpages.tsmp-dashpages .eb-plan {
display: inline-flex; align-self: flex-start; margin: 2px 0 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #fff;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan button {
border: 0; background: #fff; padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan button + button {
border-left: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .eb-plan button:hover:not(.active) {
background: #F6F5F4;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan button.active {
background: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan-save {
margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: #E8F0E2; color: #2F5A2A; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan button.active .eb-plan-save {
background: #fff;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan {
border: 1.5px solid #728D9C; border-radius: 999px; padding: 3px;
}
/* same look as the Monthly / Annual switch on Plans & Pricing, in Seller Plus blue */
.tsmp-dashpages.tsmp-dashpages .eb-plan button {
border-radius: 999px; padding: 9px 20px; min-height: 40px; font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan button + button {
border-left: 0;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan button:hover:not(.active) {
background: #E8EEF1;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan button.active {
background: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan-save {
padding: 2px 8px; border-radius: 4px; font-weight: 800; background: #E8F0E2; color: #2F5A2A;
}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .eb-plan {
display: flex; width: 100%; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan button {
flex: 1 1 0; min-width: 0; padding: 9px 8px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .eb-plan-save {
margin-left: 4px; padding: 2px 5px; font-size: 10px;
}

}
.tsmp-dashpages.tsmp-dashpages .eb-card .eb-price .p-a {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .eb-card.is-annual .eb-price .p-m {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .eb-card.is-annual .eb-price .p-a {
display: inline;
}
.tsmp-dashpages.tsmp-dashpages .eb-card .eb-buy {
border-top: 0; padding-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .eb-wrap {
max-width: none; margin: 0;
}
/* a normal page on the dashboard, lined up with the other pages (not a pop-up); the checkout window is the only pop-up */
.tsmp-dashpages.tsmp-dashpages .eb-card {
display: grid; grid-template-columns: 38% 1fr; background: #fff; border: 1px solid var(--border); border-top: 4px solid #728D9C; border-radius: 12px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .eb-img {
position: relative; min-height: 320px;
}
.tsmp-dashpages.tsmp-dashpages .eb-img img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 55%;
}
.tsmp-dashpages.tsmp-dashpages .eb-body {
padding: 34px 36px 30px; display: flex; flex-direction: column; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .eb-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages .eb-h {
margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .eb-blue {
color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages .eb-today {
font-style: italic; font-weight: 800; color: var(--ink);
}
/* "email" in Seller blue, "today." emphasized: the same on the page and the checkout window */
.tsmp-dashpages.tsmp-dashpages .eb-p {
margin: 0; font-size: 16px; color: #4A453F; line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .eb-p b {
color: var(--ink); font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .eb-p b.eb-em {
color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages .eb-list {
list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: #4A453F;
}
.tsmp-dashpages.tsmp-dashpages .eb-list li {
display: flex; gap: 9px; align-items: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .eb-ck {
flex: none; margin-top: 3px; color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .eb-buy {
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .eb-price {
font-size: 16px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .eb-price small {
display: block; margin-top: 4px; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .eb-price b {
font-size: 34px; font-weight: 700; color: var(--ink); letter-spacing: -.015em;
}
.tsmp-dashpages.tsmp-dashpages #ebBundleBtn {
background: #728D9C; border-color: #728D9C; color: #fff; min-width: 210px; padding: 15px 30px;
}
.tsmp-dashpages.tsmp-dashpages #ebBundleBtn:hover {
background: var(--cream); border-color: #728D9C; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .eb-card {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .eb-x {
position: absolute; top: 10px; right: 12px; z-index: 3; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .eb-x:hover {
background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .eb-skip {
align-self: flex-start; font-size: 13.5px; color: var(--stone); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .eb-skip:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .eb-note {
margin: -6px 0 0; font-size: 12.5px; color: var(--stone); font-style: italic;
}
@media (max-width: 800px) {
.tsmp-dashpages.tsmp-dashpages .eb-card {
grid-template-columns: 1fr;
}
.tsmp-dashpages.tsmp-dashpages .eb-img {
min-height: 160px;
}
.tsmp-dashpages.tsmp-dashpages .eb-h {
font-size: 28px;
}

}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .eb-body {
padding: 24px 20px 22px;
}
.tsmp-dashpages.tsmp-dashpages .eb-h {
font-size: 27px;
}
.tsmp-dashpages.tsmp-dashpages .eb-img {
min-height: 190px;
}
.tsmp-dashpages.tsmp-dashpages .eb-buy {
flex-direction: column; align-items: stretch; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages #ebBundleBtn {
width: 100%; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-body {
padding: 22px 18px 22px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img {
height: 170px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-co-note {
font-size: 15.5px;
}
.tsmp-dashpages.tsmp-dashpages #planTitle {
font-size: 24px;
}
.tsmp-dashpages.tsmp-dashpages #planUp h2 {
font-size: 22px;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-h {
white-space: normal;
}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-up-p, .tsmp-dashpages.tsmp-dashpages .pl-up-steps {
font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-offer {
font-size: 16px; padding: 11px 14px;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-offer b {
font-size: 19px;
}
.tsmp-dashpages.tsmp-dashpages #planUpYes {
padding: 14px 12px; line-height: 1.3;
}
.tsmp-dashpages.tsmp-dashpages #planUp .hub-done-btns {
gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .field-row {
gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .field-row .field input {
padding-left: 10px; padding-right: 8px; font-size: 14.5px; min-width: 0;
}
/* the three card boxes fit side by side on a phone */
}
/* the one order bump after checkout */
.tsmp-dashpages.tsmp-dashpages #planUp .hub-done-btns {
flex-direction: column; align-items: stretch;
}
.tsmp-dashpages.tsmp-dashpages #planUpYes {
display: flex; align-items: center; justify-content: center; gap: 9px; white-space: normal; text-align: center; min-width: 0; max-width: 100%; line-height: 1.3;
}
.tsmp-dashpages.tsmp-dashpages #planUp .hub-done-btns {
min-width: 0; width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-charge, .tsmp-dashpages.tsmp-dashpages #planOv .pl-up-no {
max-width: 100%;
}
.tsmp-dashpages.tsmp-dashpages #planUpYes svg {
flex: none;
}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-up-no, .tsmp-dashpages.tsmp-dashpages #planOv .pl-up-no:hover {
align-self: flex-end; margin-top: 6px; padding: 2px 0; background: none; border: 0; box-shadow: none; font: inherit; font-size: 14px; color: var(--stone); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-up-no:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pl-up-charge {
margin: -2px 0 2px; text-align: center; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pl-up-was {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pl-up-save {
font-weight: 700; color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages #planUp h2 {
margin: 6px 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-eye {
display: flex !important; align-items: center; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-lock {
flex: none; color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-h {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-up-p {
font-size: 15.5px; line-height: 1.5; margin: 0 0 10px; color: #4A453F;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-p b {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-up-open {
margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-offer {
margin: 0 0 18px; padding: 12px 16px; background: var(--cream); border-left: 4px solid #728D9C; border-radius: 0 8px 8px 0; font-size: 17px; line-height: 1.4; color: var(--ink); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-offer b {
font-size: 20px; font-weight: 800;
}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-up-lead {
margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-steps {
margin: 0 0 12px; padding-left: 22px; font-size: 15.5px; line-height: 1.45; color: #4A453F; display: flex; flex-direction: column; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-steps li::marker {
font-weight: 700; color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-steps b {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pl-up-fine2 {
margin: 2px 0 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pl-up-fine2 b {
color: var(--ink); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-list {
list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16.5px; line-height: 1.4; color: #4A453F;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-list li {
display: flex; gap: 10px; align-items: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .pl-up-list .eb-ck {
flex: none; margin-top: 2px; color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-cmp {
margin-top: 6px; font-size: 13px; font-weight: 700; color: #1F6E43;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack .hub-btn, .tsmp-dashpages.tsmp-dashpages .hub-pack .hub-btn--main {
background: var(--mascot-light); border-color: var(--mascot-light); color: var(--ink);
}
/* credit packs: soft, like the ribbon, so the eye goes to the bundle first */
.tsmp-dashpages.tsmp-dashpages .hub-packs:has(.hub-pack:hover) .hub-pack--pop:not(:hover) .hub-btn {
background: var(--mascot-light); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-note {
margin: 18px 0 0; font-size: 12.5px; color: var(--stone); text-align: center;
}
@media (max-width: 800px) {
.tsmp-dashpages.tsmp-dashpages .hub-offer {
grid-template-columns: 1fr;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-h {
font-size: 24px;
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-img {
min-height: 150px;
}
.tsmp-dashpages.tsmp-dashpages .hub-packs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tsmp-dashpages.tsmp-dashpages .hub-offer-buy {
align-items: flex-start;
}

}
.tsmp-dashpages.tsmp-dashpages .hub-ov {
position: fixed; inset: 0; z-index: 400; background: rgba(28,26,24,.55); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 5vh 16px;
}
.tsmp-dashpages.tsmp-dashpages .hub-ov[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal {
position: relative; width: 100%; max-width: 580px; background: var(--white); border-radius: 10px; padding: 28px 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.tsmp-dashpages.tsmp-dashpages .hub-modal h2 {
margin: 0 0 14px; font-size: 22px;
}
.tsmp-dashpages.tsmp-dashpages .hub-x {
position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .hub-order {
border: 1px solid var(--border); border-radius: 6px; padding: 6px 14px; margin-bottom: 16px; background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .hub-line {
display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .hub-line:last-of-type {
border-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-line--sub {
font-size: 12.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hub-line--total {
font-weight: 700; font-size: 15px; border-top: 1px solid var(--ink); border-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .hub-line[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-line-main {
display: flex; flex-direction: column; gap: 2px;
}
.tsmp-dashpages.tsmp-dashpages #hubLineName, .tsmp-dashpages.tsmp-dashpages #hubLine2 .hub-line-main > span:first-child {
font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .hub-save-green {
display: inline-block; font-size: 12px; font-weight: 700; color: #1F6E43; background: #E4F4EA; border: 1px solid #A9D6BB; border-radius: 4px; padding: 2px 8px; margin-left: 8px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .hub-save-green[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-line-sub {
font-size: 12px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hub-line s {
color: var(--stone); margin-right: 6px;
}
.tsmp-dashpages.tsmp-dashpages .hub-eyebrow {
font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mascot); margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal h2#hubTitle {
font-size: 22px; line-height: 1.25;
}
.tsmp-dashpages.tsmp-dashpages .hub-then {
margin: 0 0 8px; font-size: 12px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hub-express {
display: flex; gap: 10px; margin-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .hub-express .pay-express-btn {
flex: 1;
}
.tsmp-dashpages.tsmp-dashpages .hub-pay {
width: 100%; margin-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .hub-secure {
margin: 10px 0 0; font-size: 11.5px; color: var(--stone); text-align: center;
}
/* The card-saving half of that line appears only with the Seller Plus bundle.
   Stated explicitly rather than left to the UA's [hidden] rule, which is
   (0,0,0) and loses to any display declaration a later rule might add. */
.tsmp-dashpages.tsmp-dashpages .hub-secure-save[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages #hubDone {
text-align: center; padding: 10px 0 4px;
}
.tsmp-dashpages.tsmp-dashpages .hub-done-ico {
width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--sage-light, #E4EDE7); color: var(--sage-dark); display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .hub-confetti {
position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 999;
}
.tsmp-dashpages.tsmp-dashpages .hub-confetti-piece {
position: absolute; top: -12px; opacity: .9; animation: hub-confetti-fall linear forwards;
}
@keyframes hub-confetti-fall {
to {
transform: translate(var(--drift), 110vh) rotate(720deg); opacity: .9;
}

}
.tsmp-dashpages.tsmp-dashpages .hub-done-credits {
margin: 12px 0 0; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #hubDone h2 {
font-size: 24px;
}
.tsmp-dashpages.tsmp-dashpages #hubDone [hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .hub-modal--setup {
padding: 24px 28px 22px;
}
/* Credits checkout lightbox: photo on the left, the same headline as the offer card, Seller blue instead of mascot */
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal {
max-width: 860px; padding: 0; display: grid; grid-template-columns: 38% 1fr; overflow: hidden; border-top: 4px solid var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--plus {
border-top-color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-co-img {
position: relative; min-height: 0;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-co-img img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 15% 50%; display: block;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-co-body {
padding: 24px 30px 20px; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-co-body .field {
margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-co-body .hub-order {
margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--setup {
display: block; max-width: 580px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--setup .hub-co-img {
display: none;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--setup .hub-co-body {
padding: 24px 28px 22px;
}
/* Credits checkout: centered on the screen; a bigger, more celebratory "you did it" state */
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal {
margin: auto;
}
/* centers in the window; a tall one still scrolls from the top */
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--done {
max-width: 960px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--done .hub-co-body {
padding: 40px 44px 38px; display: flex; flex-direction: column; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages #hubOv #hubDone .hub-done-ico {
width: 76px; height: 76px; background: var(--mascot-light); color: var(--ink); box-shadow: 0 0 0 8px #F6EFEA; margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--plus #hubDone .hub-done-ico {
background: #E7EEF2; color: #728D9C; box-shadow: 0 0 0 8px #F2F6F8;
}
.tsmp-dashpages.tsmp-dashpages #hubOv #hubDone .hub-done-ico svg {
width: 36px; height: 36px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv #hubDone h2 {
font-size: 28px; line-height: 1.2; margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .hub-wins {
list-style: none; margin: 0 auto 20px; padding: 14px 18px; display: inline-flex; flex-direction: column; gap: 9px; text-align: left; font-size: 15px; background: #F7F9FA; border: 1px solid #DCE5EA; border-radius: 10px;
}
.tsmp-dashpages.tsmp-dashpages .hub-wins[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-wins li {
display: flex; align-items: center; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .hub-win-ck {
width: 20px; height: 20px; border-radius: 50%; background: #728D9C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center/12px; flex: none;
}
.tsmp-dashpages.tsmp-dashpages #hubOv #hubDone #hubDoneText {
font-size: 16px; line-height: 1.55; margin: 4px 0 0;
}
.tsmp-dashpages.tsmp-dashpages #hubOv #hubDone .hub-done-credits {
margin-top: 16px; font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv #hubDone .hub-done-btns {
margin-top: 26px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv #hubDone {
padding-bottom: 18px;
}
/* Email setup inside the credits lightbox: Seller blue, not mascot */
.tsmp-dashpages.tsmp-dashpages #hubSetup .es-dots i.on {
background: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #hubSetup .es-eyebrow, .tsmp-dashpages.tsmp-dashpages #hubSetup .es-inbox-label {
color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #hubSetup .es-preview {
border-left-color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #hubSetup .es-av {
background: #E7EEF2; color: #546E7C;
}
.tsmp-dashpages.tsmp-dashpages #hubSetup .btn-primary, .tsmp-dashpages.tsmp-dashpages #hubSetup .btn.btn-primary {
background: #728D9C; border-color: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages #hubSetup .btn-primary:hover {
background: var(--ink); border-color: var(--ink); color: #fff;
}
/* Plain credit pack checkout: mascot (it is X-Sellerator, not Seller Plus), big "10 credits for $99" and the savings */
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-pack-big {
font-size: 30px; font-weight: 800; letter-spacing: -.02em;
}
.tsmp-dashpages.tsmp-dashpages #hubOv h2#hubTitle.is-pack {
font-size: 24px; line-height: 1.15; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-save {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-save[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-pack-save .hub-save-green {
margin-left: 0; font-size: 14px; padding: 4px 12px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal:not(.hub-modal--plus) .hub-eyebrow {
color: var(--mascot);
}
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages #hubLaunch {
display: flex; align-items: center; justify-content: center; width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding: 12px 16px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv #hubDone .hub-done-btns {
width: 100%;
}

}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-done-idea {
display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 0 0; font-size: 14px; line-height: 1.4; color: var(--stone); text-align: center;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-done-idea[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-done-idea .hub-idea-link {
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-done-idea .hub-idea-ico {
flex: none; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-done-idea .hub-idea-link:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages #hubSetupBtn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--plus .hub-eyebrow {
color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--plus .hub-save {
color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--plus .hub-btn--main {
background: #728D9C; border-color: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--plus .hub-btn--main:hover {
background: var(--ink); border-color: var(--ink); color: #fff;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal {
display: block;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-co-img {
display: none;
}
.tsmp-dashpages.tsmp-dashpages #hubOv .hub-co-body {
padding: 26px 20px 22px;
}

}
.tsmp-dashpages.tsmp-dashpages .es-choice-btns {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px;
}
.tsmp-dashpages.tsmp-dashpages .es-choice-btn {
display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 10px 14px; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 4px; font-size: 14px; font-weight: 500; text-decoration: none; text-align: center; transition: background-color .15s ease, border-color .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .es-choice-btn:hover {
background: var(--mascot); border-color: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .es-choice-btn svg {
flex: none;
}
@media (max-width: 520px) {
.tsmp-dashpages.tsmp-dashpages .es-choice-btns {
grid-template-columns: 1fr;
}

}
.tsmp-dashpages.tsmp-dashpages .es-choice {
margin: 18px 0 0; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-modal .es-box {
border: 0; box-shadow: none; padding: 0; max-width: none;
}
.tsmp-dashpages.tsmp-dashpages .hub-done-btns {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px;
}
.tsmp-dashpages.tsmp-dashpages .hub-done-btns .btn {
text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .pay-express-btn {
height: 44px; border-radius: 6px; font-size: 13px; font-weight: 700; border: 0; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .pay-apple {
background: #000; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .pay-link {
background: #00D66F; color: #0A2E1C;
}
.tsmp-dashpages.tsmp-dashpages .pay-or {
display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font-size: 12px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pay-or::before, .tsmp-dashpages.tsmp-dashpages .pay-or::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.tsmp-dashpages.tsmp-dashpages .es-dots {
display: flex; gap: 6px; margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .es-dots i {
flex: 1; height: 4px; border-radius: 2px; background: var(--border);
}
.tsmp-dashpages.tsmp-dashpages .es-dots i.on {
background: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .es-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mascot); margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .es-h {
font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .es-p {
font-size: 15px; color: var(--stone); margin: 0 0 18px;
}
.tsmp-dashpages.tsmp-dashpages .es-opt {
display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .es-opt:hover {
border-color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .es-opt.is-on {
border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .es-opt input {
margin-top: 3px; accent-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .es-opt b {
display: block; font-size: 16px;
}
.tsmp-dashpages.tsmp-dashpages .es-opt small {
display: block; font-size: 13.5px; color: var(--stone); margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .es-label {
display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .es-in {
width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 11px 12px; font: inherit; font-size: 15px; background: #fff; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .es-in:focus {
outline: none; border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .es-in.err {
border-color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .es-sub {
display: flex; align-items: stretch;
}
.tsmp-dashpages.tsmp-dashpages .es-sub .es-in {
border-radius: 6px 0 0 6px; text-align: right; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .es-sub span {
display: flex; align-items: center; padding: 0 12px; background: var(--cream); border: 1px solid var(--border); border-left: 0; border-radius: 0 6px 6px 0; font-size: 15px; color: var(--stone); white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .es-hint {
font-size: 13px; color: var(--stone); margin: 6px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .es-preview {
margin-top: 14px; background: var(--cream); border-left: 3px solid var(--mascot); border-radius: 0 8px 8px 0; padding: 12px 14px; font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .es-preview b {
word-break: break-all;
}
.tsmp-dashpages.tsmp-dashpages .es-note {
background: var(--cream); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 14px; margin: 0 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .es-note b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .es-addr {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .es-addr .full {
grid-column: 1 / -1;
}
.tsmp-dashpages.tsmp-dashpages .es-row {
display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 22px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .es-row .btn {
padding: 11px 20px; font-size: 12px; text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .es-back {
background: none; border: 0; font: inherit; font-size: 14px; color: var(--stone); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .es-back:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .es-inbox {
border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .es-inbox-label {
background: var(--cream); padding: 9px 16px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mascot); border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .es-inbox-row {
display: flex; gap: 14px; padding: 16px;
}
.tsmp-dashpages.tsmp-dashpages .es-av {
flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--mascot-light); color: var(--ink); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .es-inbox-main {
min-width: 0; font-size: 14.5px;
}
.tsmp-dashpages.tsmp-dashpages .es-inbox-main small {
color: var(--stone); font-size: 13px; word-break: break-all;
}
.tsmp-dashpages.tsmp-dashpages .es-subj {
margin-top: 6px; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .es-foot {
margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .es-sum {
list-style: none; margin: 0 0 6px; padding: 0; border: 1px solid var(--border); border-radius: 10px;
}
.tsmp-dashpages.tsmp-dashpages .es-sum li {
display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 14.5px;
}
.tsmp-dashpages.tsmp-dashpages .es-sum li:first-child {
border-top: 0;
}
.tsmp-dashpages.tsmp-dashpages .es-sum li span {
flex: 0 0 120px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .es-sum li b {
font-weight: 600; word-break: break-word;
}
.tsmp-dashpages.tsmp-dashpages .es-sum li .es-addr {
flex: 1 1 auto; min-width: 0; display: block;
}
.tsmp-dashpages.tsmp-dashpages .es-sum li .es-addr b {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .es-sum li .es-addr b.es-blue {
color: #5E7886;
}
/* Seller blue */
.tsmp-dashpages.tsmp-dashpages .es-sum li .es-why {
display: block; flex: none; width: auto; margin-top: 4px; font-weight: 400; font-size: 13.5px; line-height: 1.5; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .es-page {
margin-top: 28px;
}
/* Email setup is a Seller Plus feature: Seller blue */
.tsmp-dashpages.tsmp-dashpages .es-page .es-dots i.on {
background: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .es-page .es-eyebrow {
color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages .es-page .es-preview {
border-left-color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .es-page .btn:not(.es-back), .tsmp-dashpages.tsmp-dashpages .es-page .hub-btn--main {
background: #728D9C; border-color: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .es-page .btn:not(.es-back):hover, .tsmp-dashpages.tsmp-dashpages .es-page .hub-btn--main:hover {
background: var(--cream); border-color: #728D9C; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .es-page .es-box {
margin: 0 auto; box-shadow: none; border: 1px solid var(--border); background: var(--white); border-radius: 12px; padding: 28px; max-width: 560px;
}
.tsmp-dashpages.tsmp-dashpages .es-done-ico {
width: 48px; height: 48px; border-radius: 50%; background: var(--sage-light, #E4F0EA); color: var(--sage-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.tsmp-dashpages.tsmp-dashpages .es-done {
text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .es-done .es-sum {
text-align: left; margin-top: 16px;
}
.tsmp-dashpages.tsmp-dashpages .es-done-btns {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px;
}
.tsmp-dashpages.tsmp-dashpages .es-done-btns .btn {
text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .btn-quiet {
background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .btn-quiet {
display: inline-flex; align-items: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .btn-quiet:hover {
background: var(--mascot); color: #fff; box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .lw-wrap {
max-width: 900px; margin: 0 auto;
}
.tsmp-dashpages.tsmp-dashpages .lw-head {
margin-bottom: 24px;
}
.tsmp-dashpages.tsmp-dashpages .lw-eyebrow {
font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #728D9C; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .lw-head h1 {
font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .lw-head p {
font-size: 16px; color: var(--ink); margin: 0; max-width: 560px; line-height: 1.55;
}
.tsmp-dashpages.tsmp-dashpages .lw-prog {
display: flex; align-items: center; gap: 12px; margin-top: 18px; max-width: 360px;
}
.tsmp-dashpages.tsmp-dashpages .lw-prog-bar {
flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .lw-prog-bar i {
display: block; height: 100%; background: var(--mascot); border-radius: 3px; width: 0; transition: width .4s ease;
}
.tsmp-dashpages.tsmp-dashpages .lw-prog span {
font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .lw-card {
background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 6px 22px 8px; margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .lw-card-h {
font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); text-align: center; padding: 16px 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .lw-opt {
font-weight: 600; text-transform: none; letter-spacing: 0; background: var(--hallway); border-radius: 3px; padding: 2px 6px; margin-left: 6px; font-size: 11px;
}
.tsmp-dashpages.tsmp-dashpages .lw-list {
list-style: none; margin: 0; padding: 0;
}
.tsmp-dashpages.tsmp-dashpages .lw-row {
display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .lw-row:first-child {
border-top: 0;
}
.tsmp-dashpages.tsmp-dashpages .lw-ico {
flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); background: var(--white); color: var(--stone); font-size: 14px; font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .lw-row.is-done .lw-ico {
background: var(--sage-light, #E4F0EA); border-color: #BFD8CB; color: var(--sage-dark);
}
.tsmp-dashpages.tsmp-dashpages .lw-row.is-next .lw-ico {
border-color: var(--mascot); color: var(--mascot);
}
/* in progress: started but not finished. Light Mascot (not green like done, not plain like to do). */
.tsmp-dashpages.tsmp-dashpages .lw-row.is-progress .lw-ico {
background: var(--mascot-light); border-color: var(--mascot); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-next.lw-prog {
background: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .lw-opt-h {
font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); text-align: center; padding: 20px 0 8px; margin-top: 6px; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .lw-list--opt .lw-row:first-child {
border-top: 0;
}
/* the email checkout: a wide picture across the top (full bleed, rounded corners), then billing only */
/* Credits add-on after checkout: clearly a purchase, with an order box and a price on the button */
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order {
margin: 16px 0 6px; padding: 14px 16px 16px;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-boxh {
margin: 0 0 10px; font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-boxh em {
font-style: italic; color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order #planUpYes {
width: auto; min-width: 0; margin-top: 12px; padding: 10px 22px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order .pl-up-act {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order .pl-up-charge {
margin: 12px 0 0; text-align: left; font-size: 12.5px; flex: 1 1 200px;
}
.tsmp-dashpages.tsmp-dashpages #planUp .hub-done-btns {
margin-top: 6px;
}
/* Credits add-on: headline in the box, the small Add to order button on the right */
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-boxh {
margin: 0 0 10px; font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-boxh em {
font-style: italic; color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order .pl-up-act {
display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order .pl-up-charge {
margin: 0; flex: 1 1 0; width: auto; min-width: 0; text-align: left; font-size: 12.5px;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order #planUpYes {
width: auto; flex: none; margin: 0; padding: 10px 22px; font-size: 13.5px; line-height: 1.2; text-align: center; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order .pl-up-act {
flex-direction: column-reverse; align-items: stretch;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order #planUpYes {
justify-content: center;
}

}
/* The three emails: check marks instead of numbers, inset from the text above */
.tsmp-dashpages.tsmp-dashpages #planUp ul.pl-up-checks {
list-style: none; margin: 18px 28px 12px; padding: 4px 0 0 0; display: flex; flex-direction: column; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages #planUp ul.pl-up-checks li {
position: relative; padding-left: 30px;
}
.tsmp-dashpages.tsmp-dashpages #planUp ul.pl-up-checks li::before {
content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #728D9C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center/12px;
}
.tsmp-dashpages.tsmp-dashpages #planUp b.pl-up-bb {
color: #728D9C; font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-math {
margin: 4px 28px 14px; padding: 10px 14px; background: #F2F6F8; border: 1px solid #DCE5EA; border-radius: 8px; font-size: 15px; line-height: 1.4; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-math b {
color: #728D9C; font-weight: 800;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-terms {
list-style: none; margin: 0; padding: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.4; color: #6B645C;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-terms li {
position: relative; padding-left: 14px;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-terms li::before {
content: ""; position: absolute; left: 1px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order .pl-up-act {
align-items: flex-end;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-extra {
display: block; margin: 8px 0 10px; font-size: 13px; line-height: 1.45; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-extra b {
font-weight: 700;
}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages #planUp ul.pl-up-checks {
margin: 14px 6px 10px;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-math {
margin: 4px 0 12px;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order .pl-up-act {
flex-direction: column-reverse; align-items: stretch; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages #planUp .pl-up-order #planUpYes {
width: 100%; justify-content: center;
}

}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-up-order {
margin: 14px 0 6px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-up-order .hub-then {
display: block; margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-save-green {
color: #4F6B7A; background: #E7EEF2; border-color: #C9D7DF;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-modal {
display: block; max-width: 620px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img {
min-height: 0; height: 215px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-x {
z-index: 5; background: rgba(255,255,255,.92); border-radius: 50%; width: 32px; height: 32px; line-height: 1;
}
/* the close X stays visible over the photo */
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img {
display: block;
}

}
/* keep the photo on tablets and phones (the other windows hide theirs) */
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img {
height: 150px;
}

}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img img {
object-position: 50% 92%;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img img.bump-img {
display: none; object-position: 50% 42%;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-modal.is-bump .bi-img img.bump-img {
display: block;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-modal.is-bump .bi-img img:not(.bump-img) {
display: none;
}
/* the credits offer after checkout has its own photo */
/* laptop, AirPods and the tumbler: the same photo on checkout and on the credits offer */
/* Seller Plus is Seller blue: the top edge (a bar that follows the rounded corners, over the photo), the button, the accents */
.tsmp-dashpages.tsmp-dashpages #planOv .bi-modal {
border-top: 5px solid #728D9C; border-radius: 14px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-btn--main {
background: #728D9C; border-color: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-btn--main:hover {
background: var(--cream); border-color: #728D9C; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-btn {
border-color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-btn:not(.hub-btn--main):hover {
background: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-eyebrow {
color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages #planOv .lw-em {
color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-body {
padding: 26px 30px 26px;
}
.tsmp-dashpages.tsmp-dashpages #planTitle {
margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .pl-co-note {
margin: 0 0 16px; font-size: 17px; line-height: 1.45;
}
.tsmp-dashpages.tsmp-dashpages .pl-co-note b {
color: var(--ink); font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .pl-co-note b.eb-blue {
color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages .lw-notnow {
display: block; margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--stone); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .lw-notnow:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-row .lw-t .lw-next {
margin-top: 0; margin-bottom: 0; align-self: center;
}
/* keep the tag level with the title */
/* done rows: the button turns quiet and gray (it is a review link now, not the next thing to do) */
.tsmp-dashpages.tsmp-dashpages .lw-row.is-done .lw-btn {
background: transparent; color: var(--stone); box-shadow: inset 0 0 0 1px var(--border); font-weight: 500;
}
.tsmp-dashpages.tsmp-dashpages .lw-row.is-done .lw-btn:hover {
background: var(--hallway); color: var(--ink); box-shadow: inset 0 0 0 1px var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .lw-main {
flex: 1; min-width: 200px;
}
.tsmp-dashpages.tsmp-dashpages .lw-t {
font-size: 16px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .lw-s {
font-size: 13.5px; color: var(--stone); margin-top: 2px; line-height: 1.45;
}
.tsmp-dashpages.tsmp-dashpages .lw-s.is-warn {
color: #9A6A12; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .lw-next {
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--mascot-light); color: var(--ink); border-radius: 3px; padding: 2px 7px;
}
.tsmp-dashpages.tsmp-dashpages .lw-acts {
display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 236px; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .lw-btn svg {
flex: none;
}
/* the icon was being squeezed to a few pixels when the label was long (the rocket on Launch the X-Sellerator) */
.tsmp-dashpages.tsmp-dashpages .lw-acts .lw-link {
text-align: right;
}
.tsmp-dashpages.tsmp-dashpages .lw-link {
font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .lw-link:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .lw-btn {
display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; background: var(--cream); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--mascot); text-decoration: none; transition: background-color .15s ease, color .15s ease; white-space: nowrap; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .lw-btn:hover {
background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-btn--plan {
box-shadow: inset 0 0 0 1px #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .lw-btn--plan svg {
color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .lw-btn--plan:hover {
background: #728D9C; color: #fff; box-shadow: inset 0 0 0 1px #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .lw-btn--plan:hover svg {
color: #fff;
}
/* Seller blue: the upgrade step is about plans */
.tsmp-dashpages.tsmp-dashpages .lw-foot {
text-align: center; font-size: 14px; color: var(--stone); margin: 8px 0 24px;
}
.tsmp-dashpages.tsmp-dashpages .lw-foot a {
color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .lw-foot a:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .lw-done-banner {
display: flex; align-items: center; gap: 12px; background: var(--sage-light, #E4F0EA); border: 1px solid #BFD8CB; border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 14.5px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bi-modal {
max-width: 900px; padding: 0; display: grid; grid-template-columns: 38% 1fr; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages #biOv .bi-modal {
margin: auto;
}
/* centered on the screen; a tall one still scrolls from the top */
.tsmp-dashpages.tsmp-dashpages .bi-img {
position: relative; min-height: 420px;
}
.tsmp-dashpages.tsmp-dashpages .bi-img img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
}
.tsmp-dashpages.tsmp-dashpages .bi-body {
padding: 30px 30px 24px; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .bi-body h2 {
font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .bi-lead {
font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .bi-list {
list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bi-list li {
position: relative; padding-left: 22px;
}
.tsmp-dashpages.tsmp-dashpages .bi-list li::before {
content: "\2713"; position: absolute; left: 0; font-weight: 700; color: var(--gold);
}
.tsmp-dashpages.tsmp-dashpages .bi-contact {
color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages #biDone {
padding-top: 18px; text-align: center;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .bi-modal {
grid-template-columns: 1fr;
}
.tsmp-dashpages.tsmp-dashpages .bi-img {
display: none;
}

}
.tsmp-dashpages.tsmp-dashpages .lw-btn .lw-ico-in {
flex: none;
}
.tsmp-dashpages.tsmp-dashpages .lw-skip {
align-self: flex-end; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--stone); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .lw-skip:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-row.is-skipped .lw-ico {
background: var(--hallway); color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .lw-em {
font-style: italic; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .lw-opts {
flex: 1; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .lw-next.lw-pick {
background: transparent; box-shadow: inset 0 0 0 1px var(--mascot); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-price {
color: var(--stone);
}
/* what it costs: in Stone, right after the description */
.tsmp-dashpages.tsmp-dashpages .lw-price--free {
font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .lw-learn {
color: var(--stone); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
/* "Learn more" opens How the X-Sellerator Works (what you get, how it works, what it costs) */
.tsmp-dashpages.tsmp-dashpages .lw-learn:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-oi {
flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mascot-light); color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
}
/* a small icon on each of the three choices, so they read as different from the heading */
.tsmp-dashpages.tsmp-dashpages .lw-opt-row .lw-s {
padding-left: 38px;
}
.tsmp-dashpages.tsmp-dashpages .lw-opts-h {
padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .lw-opt-row {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .lw-opt-row .lw-main {
flex: 1; min-width: 220px;
}
.tsmp-dashpages.tsmp-dashpages .lw-opt-row .lw-acts {
width: 236px;
}
.tsmp-dashpages.tsmp-dashpages .lw-opt-div {
height: 1px; background: var(--border); width: 52%; margin: 18px 0;
}
.tsmp-dashpages.tsmp-dashpages .lw-row--opts .lw-ico {
margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .lw-proto {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; margin-bottom: 22px; border: 1px dashed var(--border); border-radius: 8px; background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .lw-proto-label {
font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fri-yay); margin-right: 6px;
}
.tsmp-dashpages.tsmp-dashpages .lw-proto button {
font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--white); color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .lw-proto button:hover {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-proto button.is-current {
background: var(--ink); color: #fff; border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-proto-sep {
width: 1px; height: 18px; background: var(--border); margin: 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .ti-wrap {
max-width: 620px; margin: 0 auto;
}
.tsmp-dashpages.tsmp-dashpages .ti-card {
background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--mascot); border-radius: 12px; padding: 34px 38px 34px;
}
.tsmp-dashpages.tsmp-dashpages .ti-top {
display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .ti-ico {
width: 48px; height: 48px; border-radius: 50%; background: var(--mascot-light); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .ti-eyebrow {
font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .ti-step h1 {
font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .ti-step[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .ti-woohoo {
margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ti-done-title {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .ti-lead {
font-size: 15.5px; line-height: 1.55; color: var(--ink); margin: 0 0 22px; max-width: 480px;
}
.tsmp-dashpages.tsmp-dashpages .ti-field {
margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .ti-field label {
display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .ti-field input {
width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; font: inherit; font-size: 15px; background: var(--white); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ti-field input:focus {
outline: none; border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ti-hint {
font-size: 12.5px; color: var(--stone); margin: 6px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .ti-pass {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .ti-pass input {
padding-right: 44px;
}
.tsmp-dashpages.tsmp-dashpages .ti-eye {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; color: var(--stone); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .ti-eye:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ti-trust {
list-style: none; margin: 4px 0 24px; padding: 14px 16px; background: var(--cream); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ti-trust li {
display: flex; align-items: flex-start; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .ti-trust svg {
flex: none; margin-top: 2px; color: var(--sage-dark);
}
.tsmp-dashpages.tsmp-dashpages .ti-go {
display: inline-flex; align-items: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .btn-outline-dark {
background: var(--white); color: var(--ink); border: 1px solid var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .btn-outline-dark:hover {
background: var(--hallway); color: var(--ink); border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .btn-dark {
background: var(--ink); color: #fff; border: 1px solid var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .btn-dark:hover {
background: var(--mascot); border-color: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .ti-card.is-done .ti-ico {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .ti-btns {
display: flex; gap: 10px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .ti-btns .btn {
text-decoration: none; padding: 12px 15px; letter-spacing: .02em; font-size: 12px;
}
.tsmp-dashpages.tsmp-dashpages .ti-resume {
font-size: 13px; color: var(--stone); margin: 14px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .ti-resume a {
color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .ti-code {
max-width: 220px; font-size: 22px !important; letter-spacing: .3em; text-align: center; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .ti-bar {
height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; margin: 6px 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .ti-bar i {
display: block; height: 100%; width: 0; background: var(--mascot); border-radius: 5px; transition: width .35s ease;
}
.tsmp-dashpages.tsmp-dashpages .ti-count {
font-size: 14px; font-weight: 600; color: var(--ink); margin: 0;
}
@media (max-width: 600px) {
.tsmp-dashpages.tsmp-dashpages .ti-card {
padding: 26px 22px;
}

}
.tsmp-dashpages.tsmp-dashpages .lw-chks {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .lw-chk-row {
display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .lw-chk {
display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-chk::before {
content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--stone); box-sizing: border-box; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .lw-chk.is-on {
color: var(--stone); font-weight: 500;
}
.tsmp-dashpages.tsmp-dashpages .lw-chk.is-on::before {
border-color: #3F7D5B; background: #3F7D5B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center/10px;
}
.tsmp-dashpages.tsmp-dashpages .lw-em2 {
font-style: italic; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-opt-div {
display: flex; align-items: center; gap: 12px; width: 56%; margin: 16px 0; height: auto; background: none;
}
.tsmp-dashpages.tsmp-dashpages .lw-opt-div i {
flex: 1; height: 1px; background: var(--border);
}
.tsmp-dashpages.tsmp-dashpages .lw-opt-div span {
font-size: 12.5px; font-weight: 600; font-style: italic; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .lw-strip {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--ink); border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 0 0 18px; font-size: 13.5px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .lw-strip[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .lw-strip-r {
display: inline-flex; align-items: center; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .lw-strip a {
color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .lw-strip a:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .lw-strip button {
background: none; border: 0; font-size: 20px; line-height: 1; color: var(--stone); cursor: pointer; padding: 0 2px;
}
.tsmp-dashpages.tsmp-dashpages .lw-pill {
margin-left: 8px; font-size: 10.5px; font-weight: 700; background: var(--mascot-light); color: var(--ink); border-radius: 999px; padding: 2px 7px; vertical-align: 1px;
}
.tsmp-dashpages.tsmp-dashpages .lw-pill[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .ti-btns [hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .ti-choices {
display: flex; flex-direction: column; gap: 10px; margin: 18px 0 22px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .ti-choice {
display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .ti-choice.is-on {
border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ti-choice input {
margin-top: 4px; accent-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ti-choice b {
display: block; font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .ti-choice em {
display: block; font-style: normal; font-size: 13.5px; color: var(--stone); margin-top: 2px; line-height: 1.5;
}
/* Bulk import lightbox: soft first view, payment after the click */
.tsmp-dashpages.tsmp-dashpages #biTitle {
font-size: 28px; line-height: 1.18; text-wrap: balance;
}
.tsmp-dashpages.tsmp-dashpages #biTitle .bi-t1, .tsmp-dashpages.tsmp-dashpages .ti-offer h1 .bi-t1 {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages #biOv #biTitle em.lw-em {
font-style: italic; color: var(--mascot);
}
/* pop-up only: "right into your new TeacherStore." is italic and mascot tan (the page keeps it upright and black) */
/* "from TpT" stays on the first line */
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages #biTitle .bi-t1, .tsmp-dashpages.tsmp-dashpages .ti-offer h1 .bi-t1 {
white-space: normal;
}

}
/* on a phone the line is too long to hold */
.tsmp-dashpages.tsmp-dashpages #biTitle em {
white-space: nowrap;
}
/* so the tan phrase moves down together, not "in" alone at the end of line one */
/* bulk import heading: a little bigger, and it wraps */
.tsmp-dashpages.tsmp-dashpages #biCheckout .bi-lead {
margin-top: 20px;
}
/* a little room between the heading and the paragraph */
.tsmp-dashpages.tsmp-dashpages .bi-sub {
font-size: 13.5px; color: var(--stone); line-height: 1.55; margin: -4px 0 14px;
}
.tsmp-dashpages.tsmp-dashpages #biCheckout[data-step="pay"] .bi-sub {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .bi-price {
font-size: 15px; margin: 20px 0 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bi-price b {
font-size: 30px; letter-spacing: -0.02em; margin-right: 4px;
}
.tsmp-dashpages.tsmp-dashpages .bi-notnow {
display: block; margin: 12px auto 0; background: none; border: 0; font: inherit; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .bi-notnow:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .bi-back {
display: inline-block; margin: 14px 0 6px; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .bi-back:hover {
color: #bc886d;
}
/* Bulk import is ONE wizard: the offer, checkout and "all set" (in the lightbox) and the connect, choose, import and review steps (on the page) share one frame, one set of type, buttons, fields and cards. */
.tsmp-dashpages.tsmp-dashpages .bi-modal {
border-top: 4px solid var(--mascot); border-radius: 12px;
}
.tsmp-dashpages.tsmp-dashpages .ti-wrap {
max-width: 900px;
}
.tsmp-dashpages.tsmp-dashpages .ti-card {
display: grid; grid-template-columns: 38% 1fr; padding: 0; overflow: hidden; border-radius: 12px;
}
.tsmp-dashpages.tsmp-dashpages .ti-img {
position: relative; min-height: 420px;
}
.tsmp-dashpages.tsmp-dashpages .ti-body {
padding: 30px 30px 24px; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .bi-steps {
list-style: none; counter-reset: bis; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 20px; padding: 0; font-size: 11.5px; font-weight: 600; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bi-steps li {
counter-increment: bis; display: inline-flex; align-items: center; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .bi-steps li::before {
content: counter(bis); width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--border); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px;
}
.tsmp-dashpages.tsmp-dashpages .bi-steps li:not(:last-child)::after {
content: ""; width: 12px; height: 1px; background: var(--border); margin-left: 2px;
}
.tsmp-dashpages.tsmp-dashpages .bi-steps li.is-on {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bi-steps li.is-on::before {
background: var(--mascot); border-color: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .bi-steps li.is-done {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bi-steps li.is-done::before {
content: "\2713"; background: var(--ink); border-color: var(--ink); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .ti-step h1, .tsmp-dashpages.tsmp-dashpages .bi-body h2 {
font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .bi-lead, .tsmp-dashpages.tsmp-dashpages .ti-lead {
font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0 0 16px; max-width: none;
}
.tsmp-dashpages.tsmp-dashpages .ti-field input, .tsmp-dashpages.tsmp-dashpages .hub-modal .field input {
height: 44px; padding: 0 14px; font-size: 15px; border: 1px solid var(--border); border-radius: 6px;
}
.tsmp-dashpages.tsmp-dashpages .ti-field input:focus, .tsmp-dashpages.tsmp-dashpages .hub-modal .field input:focus {
outline: none; border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ti-card .btn {
text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; padding: 10px 20px; border-radius: 4px; background: var(--cream); color: var(--ink); border: 1px solid var(--mascot); text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .ti-card .btn:hover {
background: var(--mascot); color: #fff; border-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .ti-card .btn-primary, .tsmp-dashpages.tsmp-dashpages .ti-card .btn-dark {
background: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .ti-card .btn-primary:hover, .tsmp-dashpages.tsmp-dashpages .ti-card .btn-dark:hover {
background: var(--cream); color: var(--ink); border-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .hub-btn--main:hover {
background: var(--cream); border-color: var(--mascot); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #tiStart, .tsmp-dashpages.tsmp-dashpages #tiFoundGo {
width: 100%; justify-content: center; margin-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .hub-order, .tsmp-dashpages.tsmp-dashpages .ti-trust, .tsmp-dashpages.tsmp-dashpages .ti-choice {
border-radius: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hub-order {
padding: 6px 16px;
}
.tsmp-dashpages.tsmp-dashpages .ti-choice.is-on {
border-color: var(--mascot); box-shadow: inset 0 0 0 1px var(--mascot); background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .ti-choice input {
accent-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .bi-next {
list-style: none; counter-reset: bin; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 20px; font-size: 14.5px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bi-next li b {
display: block; font-size: 15.5px;
}
.tsmp-dashpages.tsmp-dashpages .bi-next .bi-next-d {
display: block; margin-top: 3px;
}
/* every card of the wizard (the lightbox and the page) is the same, deeper size */
.tsmp-dashpages.tsmp-dashpages .bi-modal, .tsmp-dashpages.tsmp-dashpages .ti-card {
min-height: 580px;
}
.tsmp-dashpages.tsmp-dashpages .ti-body {
padding: 34px 32px 30px;
}
.tsmp-dashpages.tsmp-dashpages .bi-body {
padding: 34px 32px 28px;
}
.tsmp-dashpages.tsmp-dashpages .bi-next li {
counter-increment: bin; position: relative; padding-left: 32px;
}
.tsmp-dashpages.tsmp-dashpages .bi-next li::before {
content: counter(bin); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--mascot-light); color: var(--ink); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages #biDone > p {
margin: 0 0 16px;
}
.tsmp-dashpages.tsmp-dashpages .ti-bar {
height: 8px; border-radius: 4px;
}
.tsmp-dashpages.tsmp-dashpages .ti-bar i {
border-radius: 4px;
}
.tsmp-dashpages.tsmp-dashpages #biDone, .tsmp-dashpages.tsmp-dashpages .ti-step[data-tistep="done"] {
text-align: left;
}
.tsmp-dashpages.tsmp-dashpages #biDone .hub-done-ico, .tsmp-dashpages.tsmp-dashpages .ti-step[data-tistep="done"] .hub-done-ico {
margin: 0 0 14px;
}
.tsmp-dashpages.tsmp-dashpages #biDone .hub-done-btns {
justify-content: flex-start;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .ti-card {
grid-template-columns: 1fr;
}
.tsmp-dashpages.tsmp-dashpages .ti-img {
display: none;
}

}
.tsmp-dashpages.tsmp-dashpages #biCheckout[data-step="pay"] .bi-lead, .tsmp-dashpages.tsmp-dashpages #biCheckout[data-step="pay"] .bi-list {
display: none;
}
.tsmp-dashpages.tsmp-dashpages #biSoft[hidden], .tsmp-dashpages.tsmp-dashpages #biPayWrap[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome {
display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome h1, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome > p {
flex: 1 1 100%;
}
.tsmp-dashpages.tsmp-dashpages .dash-jump {
margin-top: 12px; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .dash-jump:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step4 {
max-width: 1060px; margin: 48px auto 0; padding: 40px 32px 36px; border-top: 1px solid var(--border); text-align: center;
}
/* TRY: a very light off-white band behind step 4, so it reads as its own "I'm ready" lane. Delete this rule to go back to plain white. */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step4 {
background: #FBF9F6; border: 1px solid var(--border); border-radius: 12px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step4 .dash-step2-title {
margin-top: 8px;
}
/* the page keeps everything in this card to a 720px column (!important); step 4 needs more room for its three cards */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > .dash-step4 {
max-width: 1060px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-add-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: center; margin-top: 16px;
}
.tsmp-dashpages.tsmp-dashpages .dash-add-card {
display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 28px 20px 26px;
}
.tsmp-dashpages.tsmp-dashpages .dash-add-card > svg {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .dash-add-tag {
align-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--mascot-pale); border-radius: 999px; padding: 4px 12px; margin-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .dash-add-card p strong {
color: var(--ink); font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .dash-add-card h3 {
font-size: 16px; margin: 4px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-add-card p {
font-size: 13.5px; color: var(--stone); margin: 0 0 8px; flex: 1; line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .dash-add-card .btn, .tsmp-dashpages.tsmp-dashpages .dash-add-card select {
width: 100%; justify-content: center; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .dash-add-card .btn {
white-space: normal; line-height: 1.3; padding: 12px 8px; text-align: center; letter-spacing: .05em; font-size: 11.5px;
}
/* small enough that "Launch the X-Sellerator" stays on one line on a 1280px laptop */
.tsmp-dashpages.tsmp-dashpages .dash-add-card select {
height: 42px; border: 1px solid var(--ink); border-radius: 4px; background: var(--white); padding: 0 10px; font: inherit; font-size: 13px; color: var(--ink);
}
@media (max-width: 800px) {
.tsmp-dashpages.tsmp-dashpages .dash-add-grid {
grid-template-columns: minmax(0, 1fr);
}

}
.tsmp-dashpages.tsmp-dashpages .lw-store-ico {
flex: none; vertical-align: -3px; margin-right: 8px;
}
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip .lw-store-ico {
margin-right: 8px; vertical-align: -3px;
}
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip .lw-chip-count {
margin-left: 8px;
}
.tsmp-dashpages.tsmp-dashpages .lw-strip #lwStripCount {
margin-left: 5px;
}
.tsmp-dashpages.tsmp-dashpages .lw-card-h {
display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .lw-card-h .lw-store-ico {
margin-right: 8px; vertical-align: 0;
}
/* ---- Product Kits: idea kits, X-Sellerator tag, filters, next-steps panel ---- */
.tsmp-dashpages.tsmp-dashpages .ideas-table {
min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .ideas-table th:nth-child(2), .tsmp-dashpages.tsmp-dashpages .ideas-table td:nth-child(2) {
width: 130px;
}
.tsmp-dashpages.tsmp-dashpages .ideas-table th:last-child, .tsmp-dashpages.tsmp-dashpages .ideas-table td.move-cell {
width: 1%; white-space: nowrap; text-align: right; padding-right: 20px;
}
.tsmp-dashpages.tsmp-dashpages .ideas-table .idea-move {
padding: 6px 11px;
}
.tsmp-dashpages.tsmp-dashpages .ideas-table .idea-move .kf-move-arrow {
vertical-align: -2px; margin-left: 4px;
}
.tsmp-dashpages.tsmp-dashpages .kf-move-arrow {
vertical-align: -2px; margin-left: 4px;
}
.tsmp-dashpages.tsmp-dashpages #kfMove {
width: 100%; height: auto; white-space: normal; text-align: center; line-height: 1.4; padding: 12px 14px; display: block; text-transform: none; letter-spacing: 0; font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .kf-move-note {
margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .badge.idea {
background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 1px var(--mascot-light);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="communities"] .products-table-wrap, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="products"] .products-table-wrap {
overflow: visible;
}
/* so the progress pop-up is not cut off by a short table */
.tsmp-dashpages.tsmp-dashpages .cv-ov {
position: fixed; inset: 0; z-index: 3000; background: #fff; display: flex; flex-direction: column;
}
.tsmp-dashpages.tsmp-dashpages .cv-ov[hidden] {
display: none;
}
/* Same thin white banner as community.html: TS square on the left, text in black */
.tsmp-dashpages.tsmp-dashpages .cv-bar {
flex: 0 0 auto; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--border); font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .cv-logo {
width: 30px; height: 30px; overflow: hidden; flex: 0 0 auto; display: block;
}
.tsmp-dashpages.tsmp-dashpages .cv-logo img {
display: block; width: 190.7px; height: 33.4px; margin: -1.5px 0 0 -2px; max-width: none;
}
.tsmp-dashpages.tsmp-dashpages .cv-back {
font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .cv-back:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .cv-bar strong {
font-weight: 600; color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .cv-new {
margin-left: auto; font-size: 12px; color: var(--stone); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .cv-new:hover {
color: var(--ink);
}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .cv-bar {
gap: 10px; padding: 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .cv-bar strong {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .cv-new {
font-size: 11px;
}

}
/* phone: the bar fits, the frame's own page carries the title */
.tsmp-dashpages.tsmp-dashpages .cv-frame {
flex: 1 1 auto; width: 100%; border: 0; background: #fff;
}
.tsmp-dashpages.tsmp-dashpages .comm-act {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .comm-act a + a {
margin-left: 18px;
}
.tsmp-dashpages.tsmp-dashpages .comm-contacts-note {
margin: 22px 0 0; font-size: 14px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .comm-contacts-note a {
color: var(--ink); text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .prog-cell {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .prog {
font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; padding: 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .prog-bar {
width: 64px; height: 6px; border-radius: 3px; background: #E7E2DA; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .prog-bar i {
display: block; height: 100%; background: var(--mascot); border-radius: 3px;
}
.tsmp-dashpages.tsmp-dashpages .prog.is-full .prog-bar i {
background: #5E8B6A;
}
.tsmp-dashpages.tsmp-dashpages .prog:hover .prog-n {
text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .prog.is-need .prog-n {
color: var(--mascot); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .prog-none {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .prog-pop {
position: absolute; z-index: 20; left: 0; top: 100%; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.08); padding: 12px 14px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .prog-pop[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .prog-pop strong {
font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .prog-pop ul {
list-style: none; margin: 8px 0 0; padding: 0;
}
.tsmp-dashpages.tsmp-dashpages .prog-pop li {
font-size: 14px; padding: 3px 0;
}
.tsmp-dashpages.tsmp-dashpages .prog-pop li.is-done {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .prog-pop li.is-done::before {
content: "\2713  ";
}
/*
 * ⚠️ THE LIST NO LONGER CONTAINS LINKS. Every unfinished part was an <a>
 * pointing at the SAME project url, so six labels promised six
 * destinations and delivered one. The rule is kept for anything that
 * still renders a link inside the list, and the single honest control
 * below it is styled separately.
 */
.tsmp-dashpages.tsmp-dashpages .prog-pop li a {
color: var(--ink); text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .prog-pop-open {
display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600;
color: var(--mascot); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .prod-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px;
}
.tsmp-dashpages.tsmp-dashpages .prod-actions .btn {
display: inline-flex; align-items: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .prod-actions .btn {
min-width: 262px; justify-content: center; padding: 11px 22px; font-size: 11px; line-height: 1.2; border: 1px solid transparent;
}
.tsmp-dashpages.tsmp-dashpages .prod-actions .btn-ghost {
border-color: var(--mascot); background: var(--white); color: var(--ink);
}
/* every button hovers to a light Mascot tint (cream disappears against the cream page) */
.tsmp-dashpages.tsmp-dashpages .prod-actions .btn-ghost:hover, .tsmp-dashpages.tsmp-dashpages .prod-actions .btn-primary:hover {
background: var(--mascot-light); color: var(--ink); box-shadow: inset 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .products-table .p-name-cell {
min-width: 220px;
}
.tsmp-dashpages.tsmp-dashpages .kit-xs-tag {
display: block; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--stone); letter-spacing: .02em;
}
.tsmp-dashpages.tsmp-dashpages .products-table tr[data-fhide] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-next {
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--cream); border: 1px solid var(--mascot-light); border-left: 3px solid var(--mascot); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 0 0 18px;
}
.tsmp-dashpages.tsmp-dashpages .kf-next[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-next strong {
font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .kf-next p {
margin: 4px 0 0; font-size: 14px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .kf-next-btns.prod-actions {
margin-top: 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="kit-folder"].is-idea .kf-folder {
display: none;
}
/* ---- Brainstorm notes: saved in the kit like a document ---- */
.tsmp-dashpages.tsmp-dashpages .kf-doc {
display: none; margin: 0 0 22px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="kit-folder"].is-idea .kf-doc {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-bar {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-name {
display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-name span {
font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-btns {
display: flex; gap: 8px; flex-wrap: wrap;
}
/* The outline button that sits next to a Mascot button (Upload my product myself) hovers to light gray, and only the colors fade: a black fill next to the Mascot button flickered. The other outline buttons (Edit notes, Download, Keep brainstorming) keep the black hover. */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="kit-folder"] .kf-crumbs {
margin-top: 20px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page {
background: var(--white); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 14px rgba(28, 26, 24, .06); padding: 44px 56px 36px; max-width: 800px; margin: 0 auto; font-size: 15.5px; line-height: 1.7; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page[contenteditable="true"] {
outline: 2px solid var(--mascot-light); outline-offset: 4px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin: 0 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page h2 {
font-family: var(--ff-display); font-weight: 500; font-size: 32px; line-height: 1.2; margin: 0 0 22px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page h3 {
font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 24px 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page p {
margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page ul {
margin: 0 0 10px; padding-left: 22px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page li {
margin: 0 0 4px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-foot {
margin-top: 30px !important; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-chat {
max-width: 800px; margin: 14px auto 0;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-chat summary {
cursor: pointer; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-chat-body {
margin-top: 12px; display: flex; flex-direction: column; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-voice {
margin: 4px 0 12px; padding: 12px 16px; background: var(--cream); border-left: 3px solid var(--mascot); border-radius: 0 6px 6px 0; font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-voice span {
display: block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-transcript {
margin-top: 12px; padding: 18px 22px; background: var(--white); border: 1px solid var(--border); border-radius: 6px; font-size: 14px; line-height: 1.6; max-height: 340px; overflow: auto;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-transcript p {
margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-transcript-note {
margin: 8px 0 0; font-size: 12.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .kf-drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw; z-index: 1200; background: var(--white); border-left: 1px solid var(--border); box-shadow: -10px 0 30px rgba(28, 26, 24, .12); display: flex; flex-direction: column;
}
.tsmp-dashpages.tsmp-dashpages .kf-drawer[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-drawer-head {
display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .kf-drawer-x {
border: 0; background: none; font-size: 26px; line-height: 1; color: var(--stone); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .kf-drawer-x:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kf-drawer-msgs {
flex: 1; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .kf-drawer-bar {
margin: 12px 14px 16px;
}
@media (min-width: 1100px) {
body.kf-drawer-open .tsmp-dashpages.tsmp-dashpages .main {
padding-right: 410px;
}

}
.tsmp-dashpages.tsmp-dashpages .kf-doc-chatbar {
margin-top: 14px; max-width: 800px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page li.is-new, .tsmp-dashpages.tsmp-dashpages .kf-doc-page p.is-new {
background: var(--mascot-pale); border-radius: 4px; transition: background 2.5s ease;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page li.is-new.is-fading {
background: transparent;
}
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages .kf-doc-page {
padding: 28px 20px 24px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-page h2 {
font-size: 26px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-btns .btn {
flex: 1 1 auto;
}

}
/* ---- New front page: 3 steps (Brainstorm, Save, Create) + launch checklist lightbox ---- */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-save-btn {
min-width: 220px; justify-content: center; display: inline-flex; align-items: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-save-btn svg {
flex: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-saved-note {
text-align: center; color: var(--ink); font-size: 14px; margin: 14px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-saved-note b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-saved-note a {
color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step3 {
max-width: 720px; margin: 40px auto 0; padding-top: 40px; border-top: 1px solid var(--border); text-align: center; opacity: .5; transition: opacity .25s;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step3.is-active {
opacity: 1;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step3 .dash-step2-title {
margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step3 .dash-step2-sub {
max-width: 560px; margin-left: auto; margin-right: auto;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-already {
margin: 22px 0 0; font-size: 14px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-already a {
color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-already a:hover, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step3 .dash-path-learn:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip {
margin-top: 12px; background: var(--cream); border: 1px solid var(--mascot-light); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip:hover {
border-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .lw-x {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="launch"].is-lightbox {
position: fixed; inset: 0; z-index: 1500; background: rgba(28, 26, 24, .55); overflow: auto; padding: 5vh 16px; display: block;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="launch"].is-lightbox .lw-wrap {
position: relative; background: var(--white); border-radius: 14px; padding: 34px 36px 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="launch"].is-lightbox .lw-x {
display: block; position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--stone); cursor: pointer; z-index: 2;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="launch"].is-lightbox .lw-x:hover {
color: var(--ink);
}
/* ONE width for the whole checklist, in every state and on the page and in the popup. 900px is the same width as the bulk import wizard cards, so the setup flow reads as one thing. It is allowed to be long: that is what makes it read as a checklist. */
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="launch"].is-lightbox .lw-wrap {
padding: 28px 16px 18px;
}

}
.tsmp-dashpages.tsmp-dashpages .sg-steps {
list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sg-steps li {
position: relative; padding-left: 22px;
}
.tsmp-dashpages.tsmp-dashpages .sg-steps li::before {
content: "\2713"; position: absolute; left: 0; font-weight: 700; color: var(--gold);
}
.tsmp-dashpages.tsmp-dashpages .kf-crumbs {
font-size: 13px; color: var(--stone); margin: 0 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .kf-crumbs a {
color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .kf-crumbs a:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .kf-head {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-head-ico {
width: 56px; height: 56px; border-radius: 12px; background: var(--mascot-light); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-head-ico svg {
width: 28px; height: 28px;
}
.tsmp-dashpages.tsmp-dashpages .kf-head-main {
flex: 1; min-width: 240px;
}
.tsmp-dashpages.tsmp-dashpages .kf-head-main h1 {
font-size: 24px; line-height: 1.2; margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .kf-head-meta {
margin: 6px 0 0; font-size: 13px; color: var(--stone); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-head-btns {
display: flex; gap: 10px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-body .kf-head {
padding: 18px 0 4px;
}
.tsmp-dashpages.tsmp-dashpages .kf-body .kf-note {
margin: 14px 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .kf-note {
margin: 18px 0 26px; font-size: 14px; color: var(--ink); max-width: 640px;
}
.tsmp-dashpages.tsmp-dashpages .kf-folder {
position: relative; margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .kf-tab {
display: inline-block; background: var(--mascot-light); border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 8px 18px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-left: 16px; position: relative; top: 1px;
}
.tsmp-dashpages.tsmp-dashpages .kf-body {
background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 8px 20px;
}
.tsmp-dashpages.tsmp-dashpages .kf-sub {
border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .kf-sub:last-child {
border-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .kf-sub summary {
display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-sub summary::-webkit-details-marker {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-sub summary::after {
content: ''; width: 7px; height: 7px; margin-left: 4px; border-right: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: rotate(-45deg); transition: transform .15s;
}
.tsmp-dashpages.tsmp-dashpages .kf-sub[open] summary::after {
transform: rotate(45deg);
}
.tsmp-dashpages.tsmp-dashpages .kf-sub-name {
font-size: 15px; font-weight: 700; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kf-sub-count {
margin-left: auto; font-size: 12.5px; color: var(--stone); order: 3;
}
.tsmp-dashpages.tsmp-dashpages .kf-sub summary::after {
order: 4;
}
.tsmp-dashpages.tsmp-dashpages .kf-sub summary .kf-ico {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .kf-sub-body {
padding: 0 0 16px 32px; display: flex; flex-direction: column; gap: 4px;
}
.tsmp-dashpages.tsmp-dashpages .kf-file {
display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--cream); flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-file .kf-ico {
color: var(--stone); flex: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-file-main {
flex: 1; min-width: 200px;
}
.tsmp-dashpages.tsmp-dashpages .kf-file-name {
font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kf-file-meta {
font-size: 12px; color: var(--stone); margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .kf-file-btns {
display: flex; gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages .kf-link {
font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .kf-link:hover {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .kf-thumbs {
display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .kf-thumb {
display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--stone); text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .kf-thumb-img {
aspect-ratio: 1 / 1; border-radius: 6px; background: linear-gradient(145deg, #E8E0D8, #D4C8BC); border: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .kf-sub-actions {
margin: 6px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .kf-chips {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.tsmp-dashpages.tsmp-dashpages .kf-chip {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 4px 9px;
}
.tsmp-dashpages.tsmp-dashpages .kf-chip svg {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .kf-chip--lock {
background: #F3EFE9; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .kf-hint {
margin-top: 6px; font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .kf-chat {
display: flex; flex-direction: column; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .kf-msg {
font-size: 13.5px; line-height: 1.5; color: var(--ink); background: var(--cream); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; max-width: 560px;
}
.tsmp-dashpages.tsmp-dashpages .kf-msg b {
display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin-bottom: 2px;
}
.tsmp-dashpages.tsmp-dashpages .kf-msg--me {
align-self: flex-end; background: var(--mascot-light);
}
.tsmp-dashpages.tsmp-dashpages .kf-sub-actions {
display: flex; gap: 18px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-video {
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-video-img {
width: 240px; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: linear-gradient(145deg, #3a302a, #8a6a58); display: flex; align-items: center; justify-content: center; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-play {
width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .kf-video-info {
min-width: 200px;
}
.tsmp-dashpages.tsmp-dashpages .kf-video-info .kf-file-btns {
margin-top: 10px;
}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .kf-thumbs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

}
@media (max-width: 600px) {
.tsmp-dashpages.tsmp-dashpages .kf-sub-body {
padding-left: 0;
}

}
.tsmp-dashpages.tsmp-dashpages .ct-foot {
margin-top: 14px; font-size: 12.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .ct-foot a {
color: var(--mascot); font-weight: 600; text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .ct-foot a:hover {
color: #9C6E54;
}
/* Dashboard home (2026-10-17): Inter, left-aligned, ink text, one clear call to action */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome {
max-width: 1200px; margin: 0 auto 24px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome h1 {
font-family: var(--ff-body, 'Inter', sans-serif); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); margin: 0 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome p {
font-size: 17px; color: var(--ink); margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card {
text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-empty {
text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-title {
font-family: var(--ff-body, 'Inter', sans-serif) !important; font-style: normal !important; font-weight: 700 !important; font-size: 24px !important; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink) !important; text-align: left !important; margin: 0 0 8px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-sub, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-kit-note, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .video-demo-caption, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .video-demo-subcaption {
color: var(--ink) !important; text-align: left !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-sub {
font-size: 15px; line-height: 1.6; max-width: 720px; margin: 0 0 18px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-prestep-head {
margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-optional {
display: inline-block; margin-bottom: 10px; padding: 3px 9px; border-radius: 3px; background: #F5E8E2; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 {
text-align: left !important; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field {
max-width: 560px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-cta-btn {
display: inline-flex !important; width: auto !important; margin: 4px 0 0 !important; box-shadow: none !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .demo-divider {
justify-content: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome * {
text-align: left !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome {
width: 100%;
}
/* one shared left edge inside the card */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > *, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-empty > *, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .demo-accordion-body > * {
max-width: 720px !important; margin-left: 0 !important; margin-right: auto !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .video-demo-box {
width: 100%; max-width: 560px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .brain-dump-bar, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-empty {
padding-left: 0 !important; padding-right: 0 !important;
}
/* v2: welcome sits inside the card, left-aligned; everything else in the card is centered */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > .dash-welcome {
max-width: none !important; margin: -8px 0 32px !important; padding: 0 0 24px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-empty, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-title, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-sub, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-kit-note, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .video-demo-caption, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .video-demo-subcaption, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 {
text-align: center !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > *:not(.dash-welcome), .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-empty > *, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .demo-accordion-body > *, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-sub {
margin-left: auto !important; margin-right: auto !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .demo-divider {
justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field {
text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-cta-btn {
margin: 4px auto 0 !important;
}
/* Page frame (2026-10-17): white work area, thin 2px ink line under the top bar, softly tinted sidebar */
.tsmp-dashpages.tsmp-dashpages .topnav {
border-bottom: 2px solid var(--ink) !important;
}
/* every dashboard page, Home included, sits on the same off-white as the My Account switcher (--bg) so cards pop against the white menu */
.tsmp-dashpages.tsmp-dashpages .topnav-logo {
display: flex; align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .topnav-logo img {
height: 38px; width: auto; display: block;
}
/* Dashboard home: no card box, content sits on the white page */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card {
border: 0 !important; box-shadow: none !important; background: none !important; padding: 8px 0 40px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > .dash-welcome {
margin: 0 0 32px !important;
}
/* Dashboard home cleanup (2026-10-17): fewer lines, smaller welcome */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > .dash-welcome {
border-bottom: 0 !important; padding-bottom: 0 !important; margin: 0 0 40px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome h1 {
font-size: 26px !important; margin-bottom: 4px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-welcome p {
font-size: 15px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 {
border-top: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-start-here {
background: none; padding: 0; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-ai-spark {
color: var(--mascot); display: inline-block; vertical-align: -3px; margin-right: 10px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-title {
font-size: 32px !important; letter-spacing: -0.025em !important; line-height: 1.2 !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-ai-spark {
width: 28px; height: 28px; vertical-align: -4px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > .dash-welcome {
margin-bottom: 96px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-kit-note--top {
margin: -2px 0 8px !important; text-align: left !important; max-width: none !important;
}
/* Add a New Product: two paths + learn-more link */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btns {
display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btn {
display: inline-flex; align-items: center; gap: 8px; min-width: 220px; justify-content: center; padding: 13px 24px; box-shadow: none !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btn--xs {
background: var(--mascot); color: var(--white); border: 1px solid var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btn--xs:hover {
background: #bc886d; border-color: #bc886d; color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-learn {
display: inline-block; margin-top: 16px; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-learn:hover {
color: #bc886d;
}
/* name field centered; both path buttons same size; Launch = ink, hovers to #bc886d (house style) */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field label, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field .dash-kit-note--top {
text-align: center !important; display: block;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btn {
width: 280px; min-width: 0; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btn--xs {
background: var(--fri-yay) !important; border-color: var(--fri-yay) !important; color: var(--white) !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btn--xs:hover {
background: #bc886d !important; border-color: #bc886d !important; color: var(--white) !important;
}
/* Name field: plain black & white so it reads as a form, distinct from the mascot-tinted Teachy chat box */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field {
margin-top: 36px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field label {
font-size: 15px !important; font-weight: 700 !important; color: var(--ink) !important; margin-bottom: 6px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] #dashKitNameInput {
display: block; width: 100%; max-width: 420px; margin: 0 auto; height: 40px !important; font-size: 14px !important; padding: 0 14px !important; color: var(--ink) !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] #dashKitNameInput::placeholder {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btns {
margin-top: 12px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 {
margin-top: 72px !important;
}
/* chat box sits closer to the Watch Demo line */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-empty {
padding-bottom: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .brain-dump-bar {
padding-top: 6px !important;
}
/* Sidebar color pass (2026-10-17): section eyebrows = saturated stone; every other sidebar text = ink */
.tsmp-dashpages.tsmp-dashpages .sidebar .nav-group {
color: #8F6F57 !important;
}
.tsmp-dashpages.tsmp-dashpages .sidebar a, .tsmp-dashpages.tsmp-dashpages .sidebar li.planned > a, .tsmp-dashpages.tsmp-dashpages .sidebar .nav-sub, .tsmp-dashpages.tsmp-dashpages .side-profile span:not(.side-avatar):not(.side-msgs-n), .tsmp-dashpages.tsmp-dashpages .side-profile small {
color: var(--ink) !important;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li:not(.nav-group):not(.active) > a {
font-weight: 400 !important;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li:not(.nav-group):not(.active) > a:hover {
font-weight: 400 !important;
}
/* hover: no bold, so the text does not shift sideways; the gray bar and black line do the work */
/* Continue line, name-required error, fit on one screen, phone layout */
.tsmp-dashpages.tsmp-dashpages .dash-waiting {
display: flex; align-items: center; gap: 14px; background: var(--cream); border: 1px solid var(--border); border-left: 3px solid var(--mascot); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 0 0 22px; text-decoration: none; color: var(--ink); font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .dash-waiting[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-waiting b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .dash-waiting .dash-waiting-go {
margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--white); background: var(--mascot); border-radius: 4px; padding: 9px 16px; white-space: nowrap; transition: all .2s;
}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .dash-waiting {
flex-direction: column; align-items: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .dash-waiting .dash-waiting-go {
margin-left: 0;
}

}
.tsmp-dashpages.tsmp-dashpages .dash-waiting:hover .dash-waiting-go {
background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-continue {
display: inline-block; margin-top: 12px; font-size: 14px; color: var(--ink); text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-continue strong {
font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-continue:hover, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-continue:hover strong {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-kit-error {
text-align: center !important; color: var(--fri-yay); font-size: 13px; font-weight: 600; margin: 8px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] #dashKitNameInput.is-error {
border-color: var(--fri-yay) !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > .dash-welcome {
margin-bottom: 56px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 {
margin-top: 56px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field {
margin-top: 28px !important;
}
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2-title {
font-size: 26px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btns {
flex-direction: column; align-items: stretch;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btn {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field {
margin-left: 0 !important; margin-right: 0 !important;
}

}
/* tighter vertical rhythm so the home fits one 1440x900 screen (in the real build, without the prototype switcher) */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > .dash-welcome {
margin-bottom: 32px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-chat-bar {
padding-top: 14px !important; padding-bottom: 14px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 {
margin-top: 40px !important; padding-top: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 .field {
margin-top: 20px !important; margin-bottom: 20px !important;
}
/* Phone (<=860px): slim top bar + hamburger; sidebar slides in over the page */
.tsmp-dashpages.tsmp-dashpages .topnav-burger, .tsmp-dashpages.tsmp-dashpages .side-mobile-links, .tsmp-dashpages.tsmp-dashpages .side-backdrop {
display: none;
}
@media (max-width: 860px) {
.tsmp-dashpages.tsmp-dashpages .topnav {
height: 64px !important; padding: 0 16px !important; gap: 12px; justify-content: flex-start !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-burger {
display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; background: none; border: 0; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .topnav-burger:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .topnav-logo img {
height: 30px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-links, .tsmp-dashpages.tsmp-dashpages .topnav > .btn {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .layout {
min-height: calc(100vh - 64px) !important;
}
.tsmp-dashpages.tsmp-dashpages .main {
padding: 24px 16px !important;
}
body.side-open .tsmp-dashpages.tsmp-dashpages .sidebar {
display: block !important; position: fixed !important; top: 64px !important; left: 0; width: 280px; height: calc(100vh - 64px) !important; z-index: 300; background: var(--white); box-shadow: var(--shadow-lg);
}
body.side-open .tsmp-dashpages.tsmp-dashpages .side-backdrop {
display: block; position: fixed; inset: 64px 0 0 0; background: rgba(28,26,24,0.35); z-index: 250;
}
.tsmp-dashpages.tsmp-dashpages .side-mobile-links {
display: block; list-style: none; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .side-mobile-links a {
display: block; padding: 10px 20px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink) !important; text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .side-mobile-links a:hover {
color: #bc886d !important;
}

}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-btns {
margin-top: 32px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > .dash-welcome {
margin-bottom: 72px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-step2 {
margin-top: 64px !important;
}
/* Chat attach (+): photos/files chips */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach {
cursor: pointer; color: var(--ink); margin-left: -6px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-chat-bar {
align-items: center !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-files {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-files:empty {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-file {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); font-size: 13px; color: var(--ink); max-width: 240px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-file img, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-file .bdb-file-ico {
width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--fri-yay-pale); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-file span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-file button {
border: 0; background: none; cursor: pointer; color: var(--ink); font-size: 16px; line-height: 1; padding: 0 2px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-file button:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-section-card > .dash-welcome {
margin-bottom: 96px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-path-learn {
margin-top: 6px !important;
}
/* + attach menu */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-wrap {
position: relative; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach {
border: 0; background: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach[aria-expanded="true"] {
background: var(--hallway);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu {
position: absolute; top: calc(100% + 10px); left: -8px; z-index: 50; min-width: 240px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu > * {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu > *:hover:not([disabled]) {
background: var(--hallway); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu > .is-soon {
cursor: default;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu em {
margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--hallway); padding: 2px 6px; border-radius: 3px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-file .bdb-file-ico.is-link {
font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu {
min-width: 270px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu span {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu > .bdb-attach-eyebrow {
display: block; padding: 6px 10px 2px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mascot); cursor: default;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu > .bdb-attach-eyebrow:hover {
background: none; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu > .bdb-attach-eyebrow, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu > .bdb-attach-eyebrow:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-plus {
margin-left: 6px; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--white); background: #728D9C; border-radius: 3px; padding: 2px 5px;
}
/* the Seller Plus chip is Seller blue (the Plus plan name keeps its sage green on the plan line and the photo menu badge) */
/* Payouts: add a payment method */
.tsmp-dashpages.tsmp-dashpages .po-add-wrap {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .po-add-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 200px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px;
}
.tsmp-dashpages.tsmp-dashpages .po-add-menu button {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .po-add-menu button:hover {
background: var(--hallway);
}
.tsmp-dashpages.tsmp-dashpages .po-row .pm-left {
display: flex; align-items: center; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .po-row input[type=radio] {
accent-color: var(--ink); margin: 0 4px 0 0;
}
.tsmp-dashpages.tsmp-dashpages #poChoose {
margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .page-header h1 {
line-height: 1.15 !important; margin-bottom: 2px !important;
}
.tsmp-dashpages.tsmp-dashpages .page-header h1 + p {
margin-top: 0 !important;
}
/* ===== Newsletters ===== */
.tsmp-dashpages.tsmp-dashpages .nl-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .nl-head .page-header {
flex: 1 1 420px;
}
.tsmp-dashpages.tsmp-dashpages .page-header p.nl-sub {
font-weight: 400; max-width: 680px;
}
.tsmp-dashpages.tsmp-dashpages .page-header p.nl-sub strong {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .nl-head-cta {
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .nl-head-cta span {
font-size: 14px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-tabs {
display: flex; gap: 8px; margin-top: 28px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .nl-tabs button {
position: relative; border: 0; background: none; padding: 12px 18px; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-tabs button:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .nl-tabs button.is-on {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .nl-tabs button.is-on::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-listhead {
display: flex; align-items: center; justify-content: space-between; padding: 16px 4px;
}
.tsmp-dashpages.tsmp-dashpages .nl-check {
display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-check input {
width: 18px; height: 18px; accent-color: var(--ink); margin: 0; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-actions {
display: inline-flex; align-items: center; gap: 18px;
}
.tsmp-dashpages.tsmp-dashpages .nl-note {
font-size: 13px; color: var(--sage-dark); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .nl-dup {
border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .nl-dup:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .nl-tplpick {
margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .nl-tplpick .nl-input {
appearance: auto;
}
.tsmp-dashpages.tsmp-dashpages .nl-tplrow {
flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .nl-tplform {
display: inline-flex; align-items: center; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .nl-tplform[hidden], .tsmp-dashpages.tsmp-dashpages .nl-tplpick[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .nl-tplform .btn {
padding: 9px 18px; font-size: 12px;
}
.tsmp-dashpages.tsmp-dashpages .nl-del {
border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--fri-yay); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .nl-list {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 40px;
}
.tsmp-dashpages.tsmp-dashpages .nl-row {
display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--border); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-row:first-child {
border-top: 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-row:hover {
background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .nl-row input {
width: 18px; height: 18px; accent-color: var(--ink); margin: 0; flex-shrink: 0; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-row-main {
flex: 1; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-row-main strong {
display: block; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsmp-dashpages.tsmp-dashpages .nl-row-main span {
display: block; font-size: 13px; color: var(--ink); margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .nl-row-date {
font-size: 13px; color: var(--ink); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-empty {
padding: 48px 20px; text-align: center; font-size: 14px; color: var(--ink);
}
/* lightbox */
body.nl-lock {
overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal {
position: fixed; inset: 0; z-index: 1000; background: rgba(28,26,24,.55); display: flex; align-items: flex-start; justify-content: center; padding: 0 16px; overflow-y: auto;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-box {
background: var(--white); border-radius: 16px; width: 100%; max-width: 820px; padding: 28px 36px 28px; box-shadow: var(--shadow-lg);
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-box.is-wide {
max-width: 1120px;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-head {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-head h2 {
margin: 0; font-size: 22px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-tools {
display: flex; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-tools button {
width: 36px; height: 36px; border: 0; background: none; border-radius: 50%; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-tools button:hover {
background: var(--hallway); color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .nl-lbl, .tsmp-dashpages.tsmp-dashpages .nl-h4 {
display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .nl-h4 {
margin: 24px 0 8px; font-size: 16px;
}
.tsmp-dashpages.tsmp-dashpages .nl-input {
display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: var(--white); font: inherit; font-size: 16px; color: var(--ink); padding: 13px 14px; outline: none;
}
.tsmp-dashpages.tsmp-dashpages .nl-input::placeholder {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .nl-input:focus {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-input.is-error {
border-color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .nl-input--sm {
display: inline-block; width: auto; padding: 9px 12px; font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .nl-editor {
margin-top: 18px; border: 1px solid var(--border); border-radius: 8px;
}
.tsmp-dashpages.tsmp-dashpages .nl-toolbar {
display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .nl-toolbar > button {
min-width: 32px; height: 32px; border: 0; background: none; border-radius: 4px; cursor: pointer; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-toolbar > button:hover, .tsmp-dashpages.tsmp-dashpages .nl-emoji-wrap > button:hover {
background: var(--hallway); color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .nl-emoji-wrap > button {
min-width: 32px; height: 32px; border: 0; background: none; border-radius: 4px; cursor: pointer; font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .nl-sel {
appearance: none; -webkit-appearance: none; border: 1px solid var(--border); border-radius: 4px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 8 7-8z' fill='%231C1A18'/%3E%3C/svg%3E") no-repeat right 8px center; font: inherit; font-size: 14px; color: var(--ink); padding: 6px 26px 6px 10px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-tsep {
width: 1px; height: 20px; background: var(--border); margin: 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .nl-tgrow {
flex: 1;
}
.tsmp-dashpages.tsmp-dashpages .nl-emoji-wrap, .tsmp-dashpages.tsmp-dashpages .nl-add-wrap {
position: relative; display: inline-block;
}
.tsmp-dashpages.tsmp-dashpages .nl-emoji {
position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: 232px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px;
}
.tsmp-dashpages.tsmp-dashpages .nl-emoji[hidden], .tsmp-dashpages.tsmp-dashpages .nl-menu[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .nl-emoji button {
border: 0; background: none; font-size: 20px; padding: 4px; border-radius: 6px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-emoji button:hover {
background: var(--hallway);
}
.tsmp-dashpages.tsmp-dashpages .nl-add-btn {
display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-add-btn > span {
font-size: 17px; line-height: 1;
}
.tsmp-dashpages.tsmp-dashpages .nl-add-btn:hover, .tsmp-dashpages.tsmp-dashpages .nl-add-btn[aria-expanded="true"] {
border-color: #bc886d; color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .nl-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 340px; max-height: 340px; overflow-y: auto; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .nl-menu-h {
padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-menu button {
display: block; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .nl-menu button:hover {
background: var(--hallway);
}
.tsmp-dashpages.tsmp-dashpages .nl-menu small {
display: block; font-size: 12px; color: var(--ink); opacity: .75;
}
.tsmp-dashpages.tsmp-dashpages .nl-body {
min-height: 280px; padding: 16px 18px; font-size: 16px; line-height: 1.7; color: var(--ink); outline: none;
}
.tsmp-dashpages.tsmp-dashpages .nl-body:empty::before {
content: attr(data-ph); color: var(--stone); pointer-events: none;
}
.tsmp-dashpages.tsmp-dashpages .nl-body p {
margin: 0 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .nl-body img {
max-width: 100%; height: auto; border-radius: 6px;
}
.tsmp-dashpages.tsmp-dashpages .nl-body h2 {
font-size: 22px; margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .nl-body h3 {
font-size: 18px; margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages #nlBlocks {
padding: 0 18px 8px;
}
.tsmp-dashpages.tsmp-dashpages .nl-block {
position: relative; margin: 0 0 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--white); text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .nl-block-x {
position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-block-x:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .nl-prodgrid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px;
}
.tsmp-dashpages.tsmp-dashpages .nl-pcard {
position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--white); overflow: hidden; padding-bottom: 12px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .nl-pcard .nl-block-x {
top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 17px;
}
.tsmp-dashpages.tsmp-dashpages .nl-pimg {
aspect-ratio: 1; background: linear-gradient(135deg, var(--gold-light), var(--fri-yay-light));
}
.tsmp-dashpages.tsmp-dashpages .nl-pcard:nth-child(2n) .nl-pimg {
background: linear-gradient(135deg, var(--sage-light), var(--mascot-light));
}
.tsmp-dashpages.tsmp-dashpages .nl-pcard:nth-child(3n) .nl-pimg {
background: linear-gradient(135deg, var(--fri-yay-light), var(--gold-light));
}
.tsmp-dashpages.tsmp-dashpages .nl-pcard strong {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 10px 10px 4px; font-size: 13px; line-height: 1.35; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-pcard span {
display: block; margin: 0 10px; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-cta {
display: inline-block; padding: 10px 22px; border-radius: 4px; background: var(--mascot); color: var(--white); font-weight: 700; font-size: 13px; text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .nl-cta:hover {
background: #bc886d; color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .nl-coupon-note {
margin: 10px 0 0; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-community {
background: var(--fri-yay-pale); border-color: var(--fri-yay-light);
}
.tsmp-dashpages.tsmp-dashpages .nl-community strong {
display: block; font-size: 17px; color: var(--ink); margin-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .nl-community p {
margin: 0 0 12px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-foot {
display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .nl-guidelines {
flex: 1 1 300px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-guidelines a {
color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
}
.tsmp-dashpages.tsmp-dashpages .nl-guidelines a:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .nl-foot-btns {
display: flex; gap: 10px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .nl-foot-btns .btn:disabled {
background: var(--border); border-color: var(--border); color: var(--white); cursor: not-allowed; box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .nl-foot-btns [hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .nl-groups {
padding: 4px 0 14px 50px; display: flex; flex-direction: column; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .nl-groups[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .nl-groups-h {
font-size: 13px; font-weight: 600; color: var(--ink); margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-group {
display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--cream); cursor: pointer; transition: background .15s, border-color .15s;
}
.tsmp-dashpages.tsmp-dashpages .nl-group:hover {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-group.is-on {
background: var(--mascot-light); border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-group input {
accent-color: var(--ink); width: 16px; height: 16px; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .nl-group span {
flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.tsmp-dashpages.tsmp-dashpages .nl-group strong {
font-size: 13.5px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-group em {
font-size: 12px; font-style: normal; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .nl-group b {
font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .nl-groups-note {
font-size: 12px; color: var(--stone); margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-to {
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-dest {
display: flex; align-items: center; gap: 14px; padding: 12px 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-dest + .nl-dest {
border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .nl-dest-ico {
width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-dest-text {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.tsmp-dashpages.tsmp-dashpages .nl-dest-text strong {
font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-dest-text span {
font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-meter {
font-size: 12px !important; color: var(--stone) !important;
}
.tsmp-dashpages.tsmp-dashpages .nl-meter.is-full {
color: #C25F4E !important; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .nl-always {
font-size: 12px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-dest--email.is-locked .nl-dest-ico, .tsmp-dashpages.tsmp-dashpages .nl-dest--email.is-locked strong, .tsmp-dashpages.tsmp-dashpages .nl-dest--email.is-locked #nlEmailSub, .tsmp-dashpages.tsmp-dashpages .nl-dest--email.is-locked .nl-switch {
opacity: .5;
}
.tsmp-dashpages.tsmp-dashpages .nl-dest--email.is-locked .nl-switch {
cursor: not-allowed;
}
.tsmp-dashpages.tsmp-dashpages .nl-switch {
position: relative; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-switch input {
position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit;
}
.tsmp-dashpages.tsmp-dashpages .nl-switch span {
position: absolute; inset: 0; border-radius: 99px; background: var(--border); transition: background .2s;
}
.tsmp-dashpages.tsmp-dashpages .nl-switch span::after {
content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(28,26,24,.25); transition: transform .2s;
}
.tsmp-dashpages.tsmp-dashpages .nl-switch input:checked + span {
background: var(--sage);
}
.tsmp-dashpages.tsmp-dashpages .nl-switch input:checked + span::after {
transform: translateX(20px);
}
.tsmp-dashpages.tsmp-dashpages .nl-switch input:focus-visible + span {
outline: 2px solid var(--ink); outline-offset: 2px;
}
.tsmp-dashpages.tsmp-dashpages .nl-when {
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .nl-radio {
display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-radio input {
width: 18px; height: 18px; accent-color: var(--ink); margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-when-later {
display: flex; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .nl-when-later[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .nl-done {
text-align: center; padding: 28px 8px 8px;
}
.tsmp-dashpages.tsmp-dashpages .nl-done[hidden], .tsmp-dashpages.tsmp-dashpages .nl-step[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .nl-done h2 {
margin: 14px 0 8px; font-size: 22px;
}
.tsmp-dashpages.tsmp-dashpages .nl-done p {
margin: 0 0 22px; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-done-ico {
display: inline-flex; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border); align-items: center; justify-content: center; color: var(--ink);
}
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages .nl-modal {
padding: 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-box {
border-radius: 0; min-height: 100vh; padding: 20px 16px;
}
.tsmp-dashpages.tsmp-dashpages .nl-head-cta {
width: 100%; align-items: stretch; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .nl-head-cta .btn {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .nl-prodgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tsmp-dashpages.tsmp-dashpages .nl-dest {
flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .nl-upsell {
margin-left: 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-menu {
width: min(340px, calc(100vw - 48px));
}
.tsmp-dashpages.tsmp-dashpages .nl-foot-btns, .tsmp-dashpages.tsmp-dashpages .nl-foot-btns .btn {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .nl-tsep {
display: none;
}

}
/* long emails: the writer and the preview grow with the content (no inner scrolling); toolbar and buttons stay in view */
.tsmp-dashpages.tsmp-dashpages .nl-modal-box {
margin: 6vh 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-editor {
overflow: visible;
}
.tsmp-dashpages.tsmp-dashpages .nl-toolbar {
position: sticky; top: 0; z-index: 20; background: var(--white); border-radius: 8px 8px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .nl-step > .nl-foot {
position: sticky; bottom: 0; z-index: 20; background: var(--white); margin-top: 24px; padding: 16px 0 4px; border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages .nl-modal-box {
margin: 0;
}

}
/* one-box lightbox additions */
.tsmp-dashpages.tsmp-dashpages .nl-link {
border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .nl-link:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .nl-testrow {
display: flex; align-items: center; gap: 14px; margin: 18px 0 0; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nl-ask {
font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-box.is-view .nl-toolbar, .tsmp-dashpages.tsmp-dashpages .nl-modal-box.is-view #nlSendWrap, .tsmp-dashpages.tsmp-dashpages .nl-modal-box.is-view .nl-block-x, .tsmp-dashpages.tsmp-dashpages .nl-modal-box.is-view #nlSendBtn {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-box.is-view .nl-input {
border-color: transparent; padding-left: 0; font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .nl-modal-box.is-view .nl-editor {
border-color: transparent;
}
.tsmp-dashpages.tsmp-dashpages #nlSendWrap {
margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .nl-nudge-link {
align-self: flex-start; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .nl-nudge-link:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .nl-nudge-link[hidden] {
display: none !important;
}
/* ===== Billing & Receipts (Seller Support) ===== */
.tsmp-dashpages.tsmp-dashpages .bill-page .info-card {
margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .bill-page [hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .bill-sub .bill-plan-name {
font-size: 22px;
}
.tsmp-dashpages.tsmp-dashpages .bill-offmsg {
margin: 4px 0 0; font-size: 14px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-auto {
margin: 10px 0 0; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-auto b {
color: var(--ink); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .bill-upd {
margin-left: 10px; font-weight: 400;
}
.tsmp-dashpages.tsmp-dashpages .bill-founder-note {
margin: -4px 0 14px; font-size: 12.5px; color: var(--stone); line-height: 1.45;
}
.tsmp-dashpages.tsmp-dashpages .bill-save b {
font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .bill-head-btns {
text-align: right;
}
.tsmp-dashpages.tsmp-dashpages .bill-pay-note {
margin: 6px 0 0; font-size: 12px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-page .btn-primary.bill-pay.is-paid, .tsmp-dashpages.tsmp-dashpages .bill-page .btn-primary.bill-pay.is-paid:hover {
background: var(--sage-light); border-color: var(--sage); color: var(--sage-dark); box-shadow: none !important; cursor: default;
}
/* used: sage, not clickable until the next renewal window */
.tsmp-dashpages.tsmp-dashpages .bill-terms-inline {
list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bill-terms-inline b {
font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .mem-terms {
margin: 16px 0 0; padding: 14px 16px; border: 1px solid #728D9C; border-radius: 8px; background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .mem-terms-h {
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .mem-terms ul {
list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .mem-terms b {
font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .mem-ck {
display: inline-block; width: 18px; color: var(--ink); font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .sc-body > .mem-terms {
margin: 0 0 16px;
}
.tsmp-dashpages.tsmp-dashpages .bill-proto {
margin: 0 0 18px; padding: 12px 14px; border: 1px dashed #C25F4E; border-radius: 8px; background: #FFF6F3; font-size: 12.5px;
}
.tsmp-dashpages.tsmp-dashpages .bill-proto-t {
display: block; margin-bottom: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #C25F4E;
}
.tsmp-dashpages.tsmp-dashpages .bill-proto-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .bill-proto-row > span {
min-width: 150px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-proto-row button {
padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .bill-proto-row button:hover {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bill-proto-row button.is-on {
background: var(--ink); border-color: var(--ink); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .bill-page .btn-primary.bill-pay.is-incl, .tsmp-dashpages.tsmp-dashpages .bill-page .btn-primary.bill-pay.is-incl:hover {
background: var(--gold-light); border-color: #E3D3AE; color: #7A6532; box-shadow: none !important; cursor: default;
}
/* Pro: Included with TeacherStore Pro, a quiet light gold */
.tsmp-dashpages.tsmp-dashpages .bill-h2-gap {
margin-top: 36px;
}
.tsmp-dashpages.tsmp-dashpages .hb-lead {
max-width: 760px; margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hb-link {
padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .hb-jump {
display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px;
}
.tsmp-dashpages.tsmp-dashpages .hb-jump button {
padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .hb-jump button:hover {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hb-sec h2 {
margin: 0 0 8px; font-size: 22px;
}
.tsmp-dashpages.tsmp-dashpages .hb-p {
margin: 0 0 16px; color: var(--stone); font-size: 14.5px; line-height: 1.55; max-width: 760px;
}
.tsmp-dashpages.tsmp-dashpages .hb-note {
margin: 14px 0 0; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hb-plans {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.tsmp-dashpages.tsmp-dashpages .hb-plan {
padding: 18px; border: 1px solid var(--border); border-top: 4px solid #728D9C; border-radius: 10px; background: #fff;
}
.tsmp-dashpages.tsmp-dashpages .hb-plan--pro {
border-top-color: var(--gold);
}
.tsmp-dashpages.tsmp-dashpages .hb-plan-h {
font-size: 18px; font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .hb-plan-p {
margin: 6px 0 10px; font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .hb-plan-p b {
font-size: 26px; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .hb-plan-p span {
color: var(--stone); font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .hb-plan-who {
margin: 0 0 12px; font-size: 13.5px; color: var(--stone); line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .hb-plans--short .hb-plan {
padding-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hb-plans--short .hb-plan-h {
min-height: 46px; line-height: 1.25;
}
/* room for a two-line name, so the prices line up across the cards */
.tsmp-dashpages.tsmp-dashpages .hb-plans--short .hb-plan-p {
min-height: 82px;
}
.tsmp-dashpages.tsmp-dashpages .hb-pp1 {
font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .hb-pp2 {
margin-top: 2px; min-height: 36px; line-height: 1.4; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hb-plan ul {
margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .hb-plan li::before {
content: "\2713"; margin-right: 8px; color: var(--ink); font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .hb-rows {
border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .hb-row {
display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .hb-row > span:first-child {
font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .hb-q {
border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .hb-q summary {
padding: 14px 0; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .hb-q summary::-webkit-details-marker {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .hb-q summary::after {
content: "+"; font-weight: 400; font-size: 20px; line-height: 1; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hb-q[open] summary::after {
content: "\2212";
}
.tsmp-dashpages.tsmp-dashpages .hb-gh {
margin: 22px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .hb-gh:first-of-type {
margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .hb-ul {
margin: 0 0 14px; padding-left: 20px; max-width: 760px; font-size: 14.5px; line-height: 1.6;
}
.tsmp-dashpages.tsmp-dashpages .hb-q p {
margin: 0 0 14px; max-width: 760px; font-size: 14.5px; line-height: 1.6; color: var(--ink);
}
@media (max-width: 900px) {
.tsmp-dashpages.tsmp-dashpages .hb-plans {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .hb-row {
grid-template-columns: minmax(0, 1fr); gap: 2px;
}

}
.tsmp-dashpages.tsmp-dashpages .csv-wrap {
max-width: 860px; margin: 24px auto 0;
}
.tsmp-dashpages.tsmp-dashpages .csv-free {
margin: -8px 0 16px; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .csv-step h2 {
margin: 0 0 8px; font-size: 22px;
}
.tsmp-dashpages.tsmp-dashpages .csv-p {
margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--stone); max-width: 640px;
}
.tsmp-dashpages.tsmp-dashpages .csv-p b {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .csv-cols {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 20px 0 6px; align-items: start;
}
.tsmp-dashpages.tsmp-dashpages .csv-colh {
padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .csv-pill {
display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .csv-pill--req {
border-color: var(--fri-yay, #C25F4E); color: var(--fri-yay, #C25F4E); background: #FFF6F3;
}
.tsmp-dashpages.tsmp-dashpages .csv-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fri-yay, #C25F4E); flex: none;
}
.tsmp-dashpages.tsmp-dashpages .csv-colbox--req .csv-col b::before {
content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--fri-yay, #C25F4E); vertical-align: 1px;
}
.tsmp-dashpages.tsmp-dashpages .csv-col {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .csv-col em {
grid-column: 1 / -1; font-style: normal; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .csv-req, .tsmp-dashpages.tsmp-dashpages .csv-opt {
font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; align-self: center;
}
.tsmp-dashpages.tsmp-dashpages .csv-colbox .csv-req, .tsmp-dashpages.tsmp-dashpages .csv-colbox .csv-opt {
display: none;
}
/* the column heading already says Required or Optional */
.tsmp-dashpages.tsmp-dashpages .csv-req {
color: var(--fri-yay, #C25F4E);
}
.tsmp-dashpages.tsmp-dashpages .csv-opt {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .csv-next {
margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .csv-next--split {
justify-content: space-between;
}
.tsmp-dashpages.tsmp-dashpages .csv-moving {
margin: 16px 0 0; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .csv-drop {
display: grid; place-items: center; gap: 4px; min-height: 160px; padding: 24px; border: 2px dashed var(--border); border-radius: 12px; background: var(--cream); text-align: center; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .csv-drop:hover, .tsmp-dashpages.tsmp-dashpages .csv-drop.is-over {
border-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .csv-drop b {
font-size: 16px;
}
.tsmp-dashpages.tsmp-dashpages .csv-drop span {
font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .csv-proto {
margin: 10px 0 0; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #C25F4E;
}
.tsmp-dashpages.tsmp-dashpages .csv-sum {
margin: 0 0 14px; font-size: 15px; line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .csv-ok {
color: #4F6D5E; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .csv-bad {
color: var(--fri-yay, #C25F4E); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .csv-table-wrap {
overflow-x: auto; border: 1px solid var(--border); border-radius: 8px;
}
.tsmp-dashpages.tsmp-dashpages .csv-table {
width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px;
}
.tsmp-dashpages.tsmp-dashpages .csv-table th {
text-align: left; padding: 9px 12px; background: var(--cream); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .csv-table td {
padding: 9px 12px; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .csv-row-bad td {
background: #FFF6F3;
}
.tsmp-dashpages.tsmp-dashpages .csv-st--ok {
color: #4F6D5E; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .csv-st--bad {
color: var(--fri-yay, #C25F4E); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .csv-more {
text-align: center; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .csv-opt-card {
display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .csv-opt-card:has(input:checked) {
border-color: var(--ink); background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .csv-opt-card input {
margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .csv-opt-card b {
font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .csv-opt-card i {
margin-left: 8px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4F6D5E;
}
.tsmp-dashpages.tsmp-dashpages .csv-opt-card em {
display: block; margin-top: 2px; font-style: normal; font-size: 13.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .csv-dl {
display: inline-flex; align-items: center; gap: 9px;
}
.tsmp-dashpages.tsmp-dashpages .csv-drafts {
margin: 0 0 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--cream); font-size: 14px; line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .csv-drafts ul {
margin: 6px 0 0; padding-left: 20px;
}
.tsmp-dashpages.tsmp-dashpages .csv-drafts .p-src {
margin: 0 2px;
}
.tsmp-dashpages.tsmp-dashpages .p-src {
display: inline-block; align-self: flex-start; width: fit-content; margin: 2px 0 2px 0; margin-left: 0; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); vertical-align: 1px;
}
.tsmp-dashpages.tsmp-dashpages .bulk-row .csv-open-btn {
margin-left: auto; margin-right: -8px;
}
/* pushed right with Add a Product, only a small gap between them */
.tsmp-dashpages.tsmp-dashpages .bulk-row .add-prod-btn {
margin-left: 0;
}
.tsmp-dashpages.tsmp-dashpages .csv-wrap .btn-ghost, .tsmp-dashpages.tsmp-dashpages .csv-open-btn {
background: var(--cream); color: var(--ink); border: 1px solid var(--mascot); box-shadow: none;
}
/* cream with a mascot outline, like the other dashboard buttons (not black) */
.tsmp-dashpages.tsmp-dashpages .csv-wrap .btn-ghost:hover, .tsmp-dashpages.tsmp-dashpages .csv-open-btn:hover {
background: var(--mascot); color: #fff; border-color: var(--mascot); box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .csv-open-btn {
display: inline-flex; align-items: center; gap: 6px;
}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .csv-cols {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .csv-next--split {
flex-direction: column; align-items: stretch;
}

}
.tsmp-dashpages.tsmp-dashpages .bill-incmsg {
margin: 6px 0 0; font-size: 14px; color: #4F6877;
}
.tsmp-dashpages.tsmp-dashpages #billMem.is-inc .bill-memrows {
display: none;
}
.tsmp-dashpages.tsmp-dashpages #billEmail.is-inc .bill-on-only, .tsmp-dashpages.tsmp-dashpages #billEmail.is-inc .bill-off-only {
display: none;
}
.tsmp-dashpages.tsmp-dashpages #billEmail.is-off .bill-on-only, .tsmp-dashpages.tsmp-dashpages #billEmail:not(.is-off) .bill-off-only {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .bill-page h2 {
margin: 0 0 6px; font-size: 20px;
}
.tsmp-dashpages.tsmp-dashpages .bill-offer {
margin: -4px -4px 18px; padding: 12px 16px; border-radius: 8px; background: #DCE6EB; border: 1px solid #728D9C; color: var(--ink); font-size: 14px; line-height: 1.4;
}
.tsmp-dashpages.tsmp-dashpages .bill-offer[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .bill-offer-t {
display: inline-block; margin-left: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .bill-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-plan-name {
margin: 4px 0 0; font-size: 26px; line-height: 1.15;
}
.tsmp-dashpages.tsmp-dashpages .bill-badge {
display: inline-block; vertical-align: 4px; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: #DCE6EB; color: #4F6877; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tsmp-dashpages.tsmp-dashpages .bill-badge[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .bill-was {
color: var(--stone); font-weight: 400;
}
.tsmp-dashpages.tsmp-dashpages .bill-next .kv-value {
text-align: right;
}
.tsmp-dashpages.tsmp-dashpages .bill-next .kv-value b {
font-size: 18px; font-weight: 500;
}
/* lighter so the $49 reads clearly next to the crossed-out $99 */
.tsmp-dashpages.tsmp-dashpages #billPayPrice b {
font-weight: 500;
}
.tsmp-dashpages.tsmp-dashpages .bill-on {
font-weight: 400; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-save {
margin: 10px 0 0; color: #4F6877; font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .bill-save[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .bill-links {
display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px;
}
.tsmp-dashpages.tsmp-dashpages .bill-link {
padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--stone); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .bill-link:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bill-page .btn-primary.bill-pay, .tsmp-dashpages.tsmp-dashpages .bill-pay-card .btn-primary {
background: #728D9C; border-color: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .bill-page .btn-primary.bill-pay:hover, .tsmp-dashpages.tsmp-dashpages .bill-pay-card .btn-primary:hover {
background: #DCE6EB; color: var(--ink); box-shadow: inset 0 0 0 1px #728D9C !important;
}
.tsmp-dashpages.tsmp-dashpages .bill-tag {
display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--sage-light); color: var(--sage-dark); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}
/* light sage tag on the Pay Early button */
.tsmp-dashpages.tsmp-dashpages .bill-year {
margin: 16px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-year:first-child {
margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .bill-rrow {
display: grid; grid-template-columns: 170px minmax(0, 1fr) 90px auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .bill-rdate {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-ramt {
text-align: right; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-card.bill-pay-card {
max-width: 860px; border-top-color: #728D9C; display: grid; grid-template-columns: 38% minmax(0, 1fr); overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .bill-pay-img {
grid-column: 1; grid-row: 1; min-height: 100%;
}
.tsmp-dashpages.tsmp-dashpages .bill-pay-img img {
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
}
.tsmp-dashpages.tsmp-dashpages #billPayCart, .tsmp-dashpages.tsmp-dashpages #billPayDone {
grid-column: 2; grid-row: 1;
}
.tsmp-dashpages.tsmp-dashpages #billPayCart[hidden], .tsmp-dashpages.tsmp-dashpages #billPayDone[hidden] {
display: none;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .bill-pay-card {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .bill-pay-img {
display: none;
}
.tsmp-dashpages.tsmp-dashpages #billPayCart, .tsmp-dashpages.tsmp-dashpages #billPayDone {
grid-column: 1;
}

}
.tsmp-dashpages.tsmp-dashpages .bill-pay-body {
padding: 30px 28px 26px;
}
.tsmp-dashpages.tsmp-dashpages .bill-pay-h {
margin: 0 0 8px; font-size: 22px; line-height: 1.2;
}
.tsmp-dashpages.tsmp-dashpages .bill-pay-p {
margin: 0 0 18px; font-size: 14px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-order {
border: 1px solid var(--border); border-radius: 8px; padding: 4px 14px; margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .bill-line {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .bill-line small {
display: block; font-size: 12px; color: var(--stone); font-weight: 400;
}
.tsmp-dashpages.tsmp-dashpages .bill-line--off {
color: #4F6877;
}
.tsmp-dashpages.tsmp-dashpages .bill-line[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .bill-total {
border-bottom: 0; font-weight: 700; font-size: 16px;
}
.tsmp-dashpages.tsmp-dashpages .bill-card-on {
margin: 16px 0; font-size: 13.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bill-card-on b {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bill-confirm {
width: 100%; justify-content: center; margin-bottom: 10px;
}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .bill-rrow {
grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px;
}
.tsmp-dashpages.tsmp-dashpages .bill-rdesc {
grid-column: 1 / -1; grid-row: 2;
}
.tsmp-dashpages.tsmp-dashpages .bill-ramt {
text-align: right;
}
.tsmp-dashpages.tsmp-dashpages .bill-rrow .btn {
grid-column: 2; grid-row: 1; display: none;
}
.tsmp-dashpages.tsmp-dashpages .bill-rrow::after {
content: "";
}
.tsmp-dashpages.tsmp-dashpages .bill-pay-body {
padding: 26px 18px 22px;
}

}
/* ===== Tracking Pixels ===== */
.tsmp-dashpages.tsmp-dashpages .px-list {
margin-top: 28px; display: flex; flex-direction: column; gap: 16px; max-width: 760px;
}
.tsmp-dashpages.tsmp-dashpages .px-card {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px 24px;
}
.tsmp-dashpages.tsmp-dashpages .px-head {
display: flex; align-items: center; gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages .px-ico {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--ink); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .px-title {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.tsmp-dashpages.tsmp-dashpages .px-title strong {
font-size: 16px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .px-title span {
font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .px-status {
font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .px-card.is-on .px-status::before {
content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sage);
}
.tsmp-dashpages.tsmp-dashpages .px-form {
margin-top: 18px;
}
.tsmp-dashpages.tsmp-dashpages .px-lbl {
display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .px-row {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .px-input {
flex: 1 1 260px; min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: var(--cream); font: inherit; font-size: 15px; color: var(--ink); padding: 11px 14px; outline: none;
}
.tsmp-dashpages.tsmp-dashpages .px-input::placeholder {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .px-input:focus {
border-color: var(--ink); background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .px-input.is-error {
border-color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .px-remove {
border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .px-remove:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .px-remove[hidden], .tsmp-dashpages.tsmp-dashpages .px-error[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .px-error {
margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .px-help {
margin-top: 12px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .px-help summary {
cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; width: fit-content;
}
.tsmp-dashpages.tsmp-dashpages .px-help summary:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .px-help p {
margin: 8px 0 0; line-height: 1.55;
}
.tsmp-dashpages.tsmp-dashpages .px-note {
max-width: 760px; margin: 20px 0 40px; font-size: 14px; color: var(--ink);
}
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages .px-card {
padding: 18px 16px;
}
.tsmp-dashpages.tsmp-dashpages .px-head {
flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .px-row .btn {
width: 100%;
}

}
/* ===== UTM Link Builder ===== */
.tsmp-dashpages.tsmp-dashpages .ut-form {
max-width: 820px; margin-top: 32px;
}
.tsmp-dashpages.tsmp-dashpages .ut-field {
margin-bottom: 28px;
}
.tsmp-dashpages.tsmp-dashpages .ut-lbl {
display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .ut-lbl span {
font-weight: 400; font-size: 14px; margin-left: 6px;
}
.tsmp-dashpages.tsmp-dashpages .ut-row2 {
display: flex; gap: 14px; align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .ut-input {
display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: var(--white); font: inherit; font-size: 15px; color: var(--ink); padding: 14px 16px; outline: none;
}
.tsmp-dashpages.tsmp-dashpages .ut-input::placeholder {
color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .ut-input:focus {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ut-input.is-error {
border-color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .ut-pick-wrap {
position: relative; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .ut-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 340px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px;
}
.tsmp-dashpages.tsmp-dashpages .ut-menu[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .ut-menu button {
display: block; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .ut-menu button:hover {
background: var(--hallway);
}
.tsmp-dashpages.tsmp-dashpages .ut-error {
margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .ut-error[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .ut-buttons {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .ut-trafficlink {
margin-left: 8px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .ut-trafficlink:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .ut-result {
margin-top: 28px; padding: 20px 22px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.tsmp-dashpages.tsmp-dashpages .ut-result[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .ut-link {
word-break: break-all; padding: 14px 16px; border-radius: 8px; background: var(--hallway); font-family: var(--ff-mono); font-size: 13px; line-height: 1.6; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ut-actions {
display: flex; align-items: center; gap: 14px; margin-top: 14px;
}
.tsmp-dashpages.tsmp-dashpages .ut-copied {
font-size: 14px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ut-copied[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .ut-divider {
display: flex; align-items: center; gap: 18px; max-width: 820px; margin: 44px 0 20px; font-size: 16px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ut-divider::before, .tsmp-dashpages.tsmp-dashpages .ut-divider::after {
content: ''; flex: 1; border-top: 1px dashed var(--border);
}
.tsmp-dashpages.tsmp-dashpages .ut-empty {
max-width: 820px; margin: 0 0 48px; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ut-list {
max-width: 820px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: 48px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .ut-list[hidden], .tsmp-dashpages.tsmp-dashpages .ut-empty[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .ut-row {
display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .ut-row:first-child {
border-top: 0;
}
.tsmp-dashpages.tsmp-dashpages .ut-row-main {
flex: 1; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .ut-row-main strong {
display: block; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ut-row-main span {
display: block; font-size: 13px; color: var(--ink); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsmp-dashpages.tsmp-dashpages .ut-row-time {
font-size: 13px; color: var(--ink); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .ut-row button {
border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .ut-row button:hover {
color: #bc886d;
}
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages .ut-row2 {
flex-direction: column; align-items: stretch;
}
.tsmp-dashpages.tsmp-dashpages .ut-pick-wrap .btn {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .ut-menu {
left: 0; right: auto; width: min(340px, calc(100vw - 48px));
}
.tsmp-dashpages.tsmp-dashpages .ut-buttons .btn {
flex: 1;
}
.tsmp-dashpages.tsmp-dashpages .ut-row-time {
display: none;
}

}
/* ===== Traffic Sources ===== */
.tsmp-dashpages.tsmp-dashpages .tf-bar {
display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 32px; max-width: 980px;
}
.tsmp-dashpages.tsmp-dashpages .tf-field {
width: 220px;
}
.tsmp-dashpages.tsmp-dashpages .tf-lbl {
display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .tf-sel {
width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: var(--white); font: inherit; font-size: 15px; color: var(--ink); padding: 11px 12px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .tf-sel:focus {
outline: none; border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .tf-sel--sm {
width: auto; padding: 7px 10px; font-size: 14px; margin-left: 6px;
}
.tsmp-dashpages.tsmp-dashpages .tf-btns {
display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto;
}
.tsmp-dashpages.tsmp-dashpages .tf-foot {
max-width: 980px; margin: -32px 0 48px; font-size: 13px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .tf-table {
max-width: 980px; margin: 24px 0 48px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .tf-tools {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .tf-search {
display: flex; align-items: center; gap: 10px; flex: 1 1 280px; max-width: 420px; border: 1px solid var(--border); border-radius: 6px; padding: 0 12px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .tf-search input {
flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: var(--ink); padding: 11px 0;
}
.tsmp-dashpages.tsmp-dashpages .tf-search:focus-within {
border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .tf-sortlbl {
font-size: 14px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .tf-head, .tsmp-dashpages.tsmp-dashpages .tf-row {
display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 110px; align-items: center; gap: 12px; padding: 0 20px;
}
.tsmp-dashpages.tsmp-dashpages .tf-head {
padding-top: 12px; padding-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .tf-head span:not(:first-child), .tsmp-dashpages.tsmp-dashpages .tf-row .tf-num {
text-align: right;
}
.tsmp-dashpages.tsmp-dashpages .tf-row {
position: relative; min-height: 54px; font-size: 15px; color: var(--ink); border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .tf-row:first-child {
border-top: 0;
}
.tsmp-dashpages.tsmp-dashpages .tf-bar-fill {
position: absolute; left: 0; top: 0; bottom: 0; background: var(--fri-yay-light); opacity: .7; z-index: 0;
}
.tsmp-dashpages.tsmp-dashpages .tf-row > *:not(.tf-bar-fill) {
position: relative; z-index: 1;
}
.tsmp-dashpages.tsmp-dashpages .tf-name {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsmp-dashpages.tsmp-dashpages .tf-name b {
display: inline-block; width: 28px; font-weight: 400;
}
.tsmp-dashpages.tsmp-dashpages .tf-name em {
font-style: normal; opacity: .75;
}
.tsmp-dashpages.tsmp-dashpages .tf-empty {
padding: 40px 20px; text-align: center; font-size: 14px; color: var(--ink);
}
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages .tf-field {
width: 100%;
}

}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu.topnav-dd-aff {
min-width: 300px; max-width: 320px; padding: 16px 18px 18px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-aff .aff-q {
margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu .aff-q .aff-em {
display: inline; font-size: inherit; margin: 0; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-aff .aff-soon {
margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a.aff-btn {
display: inline-block !important; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 4px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a.aff-btn:hover {
background: #bc886d; border-color: #bc886d; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-pro {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a.dd-learn {
position: absolute; top: 11px; left: 184px; display: inline !important; padding: 0 !important; gap: 0; font-size: 11px; font-weight: 600; text-decoration: underline !important; text-underline-offset: 2px; color: var(--stone); background: none;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu a.dd-learn:hover {
background: none; color: var(--mascot);
}
/* ---- Home, first view (2026-10-21): heading + a deeper box + Teachy's hello + the demo; the setup checklist is a small reminder card at the top left ---- */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty .dash-welcome {
position: absolute; top: 0; left: calc(-1 * max(0px, (100vw - 1532px) / 2));   /* on wide screens it sits at the page edge, not inside the centered column */ margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty .dash-prestep-head {
order: 1; margin-top: 6vh;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty .brain-dump-bar {
order: 3;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty #dashHomeEmpty {
order: 2; display: block !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty .dash-prestep-head .dash-step2-sub {
display: block !important; max-width: none; white-space: nowrap; margin: 8px auto 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-jump[hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip {
margin-top: 0; border-radius: 0 8px 8px 0; border: 1px solid var(--border); border-left: 3px solid var(--ink); background: #fff; padding: 9px 14px;
}
/* rests on bright white */
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip:hover {
border-color: var(--border); border-left-color: var(--ink); background: #F6F5F4;
}
/* the box: a roomier text area on top, the plus, mic and send along the bottom (like Claude) */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty .bdb-chat-bar {
flex-wrap: wrap; align-items: flex-end; padding: 16px 18px 12px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty .bdb-chat-bar textarea {
order: -1; flex: 1 1 100%; min-height: 52px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty .bdb-attach-wrap {
margin-right: auto;
}
/* the chat lives inside the box: it grows as the conversation grows, then scrolls */
.tsmp-dashpages.tsmp-dashpages .bdb-thread {
order: -2; flex: 1 1 100%; max-height: 46vh; overflow-y: auto; padding: 2px 2px 10px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .bdb-thread[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .bdb-m {
display: flex; gap: 10px; padding: 8px 0; font-size: 15px; line-height: 1.5; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bdb-m > b {
flex: 0 0 52px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--stone); padding-top: 3px;
}
.tsmp-dashpages.tsmp-dashpages .bdb-m--teachy > b {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .bdb-m a {
color: var(--ink); text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty #dashHomeEmpty, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty #dashHomeEmpty .demo-accordion {
margin: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .dash-home-wrap.is-empty .dash-prestep-head {
margin-bottom: 0 !important; padding-bottom: 0 !important;
}
/* the two "make it a product" buttons sit in the notes toolbar (idea folders only), styled like the My Products buttons but small */
.tsmp-dashpages.tsmp-dashpages .kf-doc-next {
display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 0 0 16px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-next[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-next .btn {
display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; padding: 11px 22px; font-size: 11px; line-height: 1.2;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-next .btn-ghost {
border-color: var(--mascot); background: var(--white); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-next .btn:hover {
background: var(--mascot-light); color: var(--ink); box-shadow: inset 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-btns {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-topbar {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .kf-topbar .kf-crumbs {
margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-next {
margin: 0 0 0 auto !important; flex-wrap: nowrap !important;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-next .btn {
padding: 6px 12px !important; white-space: nowrap; justify-content: center;
}
/* idea folder: the notes sheet on the left, one column of stacked buttons on the right. Keep brainstorming with Teachy opens over this column. */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="kit-folder"].is-idea .kf-doc {
display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 28px; align-items: start;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-bar {
grid-column: 2; grid-row: 1; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 14px; margin: 0; position: sticky; top: 16px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-page {
grid-column: 1; grid-row: 1; margin: 0 auto; width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-name {
flex-direction: column; align-items: flex-start; gap: 2px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-name svg {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-name > strong, .tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-name {
font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-next, .tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-btns {
display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin: 0 !important; width: auto !important;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-next .btn, .tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-btns .btn {
width: 100% !important; justify-content: center; padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-next[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-side-label {
margin: 6px 0 -6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone);
}
@media (min-width: 1100px) {
body.kf-drawer-open .tsmp-dashpages.tsmp-dashpages .main {
padding-right: 0 !important;
}

}
@media (max-width: 900px) {
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="kit-folder"].is-idea .kf-doc {
grid-template-columns: 1fr;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-bar {
grid-column: 1; grid-row: 1; position: static;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-page {
grid-row: 2;
}

}
/* notes name + saved date sit under the breadcrumb on the left; the column on the right is only buttons */
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-name {
grid-column: 1 / -1; grid-row: 1; flex-direction: row !important; align-items: baseline !important; gap: 10px !important; margin: -4px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-bar {
grid-row: 2;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-page {
grid-row: 2;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-btns {
margin-top: 0 !important;
}
@media (max-width: 900px) {
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-bar {
grid-row: 2;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-page {
grid-row: 3;
}

}
.tsmp-dashpages.tsmp-dashpages .kf-doc .kf-doc-btns .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .kf-drawer-title {
display: inline-flex; align-items: center; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .kf-glasses {
flex: 0 0 auto;
}
.tsmp-dashpages.tsmp-dashpages .dash-teachy-glasses {
vertical-align: -1px; margin-right: 10px;
}
.tsmp-dashpages.tsmp-dashpages .nav-group .nw, .tsmp-dashpages.tsmp-dashpages .nav-group-sub .nw {
white-space: nowrap;
}
/* Soon items that have an icon: tighter spacing so the longest name (Community X-Sellerator) and its Soon tag fit in the menu */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.is-soon .nav-ico {
margin-right: 5px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.is-soon .nav-soon {
margin-left: 3px; padding: 1px 3px; font-size: 9px; letter-spacing: .01em;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.is-soon > a {
padding-right: 6px;
}
/* "Add a Product with an X-Sellerator" eyebrow with a caret; the X-Sellerators nest under it */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-group-sub {
margin-top: 8px; border-top: 1px solid var(--stone);
}
/* headings: bold, plain white, a firm (not heavy) line above */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-group-sub > a {
font-size: 14px; font-weight: 700 !important; letter-spacing: normal; text-transform: none; color: var(--ink); padding: 10px 16px 10px 19px; white-space: normal !important; line-height: 1.4; min-height: 44px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-group-sub:not(.nav-group):not(.active) > a, .tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-group-sub:not(.nav-group):not(.active) > a:hover {
font-weight: 700 !important;
}
/* same weight as Home / a hovered item */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-group-sub > a::after {
flex: none; margin-left: 8px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .sub-nav--grp li a {
padding-left: 26px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-sep {
height: 1px; background: var(--border); margin: 6px 19px; list-style: none;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-eyebrow {
font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8F6F57; padding: 10px 19px 4px; list-style: none;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-eyebrow .nw {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-eyebrow--teachy img {
display: inline-block; vertical-align: -1px; margin-right: 8px; height: 8px; width: auto;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-single > a {
padding: 10px 16px 10px 19px; min-height: 44px;
}
/* Hover = the same look as the page you are on: cool gray bar with the black line on its left. Every menu line and every heading uses it. */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li:not(.nav-group):not(.nav-sep):not(.nav-eyebrow) > a:hover {
background: #F6F5F4; border-left-color: var(--ink);
}
/* the page you are on stays bold + underlined with a slightly deeper gray, so it still reads differently from hover */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.active > a, .tsmp-dashpages.tsmp-dashpages .sidebar-nav li.active > a:hover {
background: #EDEBE7;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .sub-nav--grp .sub-nav li a {
padding-left: 44px;
}
/* a sub-menu inside a heading group sits one step further in */
/* the Home talk box: white inside, the border stays; nothing white around the outside of it */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-chat-bar {
background: #fff !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .brain-dump-bar {
background: transparent !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-acct {
display: flex; align-items: center; margin-left: 12px;
}
/* My Products rows: a folder icon marks a folder, a plain thumbnail marks a single listing; the line under the name says what is inside */
.tsmp-dashpages.tsmp-dashpages .p-thumb--folder {
background: var(--cream); color: var(--mascot); display: flex; align-items: center; justify-content: center; border: 1px solid var(--mascot-light);
}
.tsmp-dashpages.tsmp-dashpages .p-name-stack {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .p-kind {
font-size: 11.5px; color: var(--stone); white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="products"] .products-table td:nth-child(3) {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .launch-cell {
display: table-cell;
}
/* ---- My Ideas > Brainstorm with Teachy: looks like the Teachy chat on Home, with the "Name and save your idea" section under it ---- */
.tsmp-dashpages.tsmp-dashpages .idea-bs {
max-width: 760px; margin: 8px auto 24px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .tabs-filter .tab-glasses {
vertical-align: -1px; margin-right: 7px;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs .xs-tab-glasses {
width: 26px; height: 9px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-head {
text-align: center; margin: 60px 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-title {
font-family: var(--ff-body, 'Inter', sans-serif); font-weight: 700; font-size: 32px; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-spark {
color: var(--mascot); display: inline-block; width: 28px; height: 28px; vertical-align: -4px; margin-right: 10px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-intro {
font-size: 15px; line-height: 1.6; color: var(--stone); margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .demo-accordion {
margin: 0 auto 6px; max-width: 460px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .demo-divider {
justify-content: center; gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .demo-divider .demo-divider-line {
flex: 1;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .brain-dump-bar {
background: transparent; padding: 6px 0;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-chat-bar {
background: #fff; flex-wrap: wrap; align-items: flex-end; padding: 16px 18px 12px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-chat-bar textarea {
order: -1; flex: 1 1 100%; min-height: 52px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-thread {
max-height: 40vh;
}
.tsmp-dashpages.tsmp-dashpages .ibs-save {
max-width: 720px; margin: 26px auto 0; padding: 28px 32px 30px; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--ink); border-radius: var(--radius-card);
}
.tsmp-dashpages.tsmp-dashpages .ibs-save[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .ibs-eyebrow {
display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-summary {
margin-bottom: 22px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-notes.kf-doc-page {
max-width: none; margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .ibs-summary div + div {
margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-save-title {
font-family: var(--ff-body, 'Inter', sans-serif); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; display: flex; align-items: center; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-save-title svg {
color: var(--mascot); flex: none;
}
.tsmp-dashpages.tsmp-dashpages .ibs-sub {
font-size: 15px; line-height: 1.6; color: var(--stone); margin: 0 0 20px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach {
cursor: pointer; color: var(--ink); margin-left: -6px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-files {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-files:empty {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-file {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); font-size: 13px; color: var(--ink); max-width: 240px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-file img, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-file .bdb-file-ico {
width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--fri-yay-pale); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-file span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-file button {
border: 0; background: none; cursor: pointer; color: var(--ink); font-size: 16px; line-height: 1; padding: 0 2px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-file button:hover {
color: #bc886d;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-wrap {
position: relative; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach {
border: 0; background: none;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach[aria-expanded="true"] {
background: var(--hallway);
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu {
position: absolute; top: calc(100% + 10px); left: -8px; z-index: 50; min-width: 240px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu > * {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu > *:hover:not([disabled]) {
background: var(--hallway); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu > .is-soon {
cursor: default;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu em {
margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--hallway); padding: 2px 6px; border-radius: 3px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-file .bdb-file-ico.is-link {
font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu {
min-width: 270px;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu span {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu > .bdb-attach-eyebrow {
display: block; padding: 6px 10px 2px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mascot); cursor: default;
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu > .bdb-attach-eyebrow:hover {
background: none; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-menu > .bdb-attach-eyebrow, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="dashboard"] .bdb-attach-menu > .bdb-attach-eyebrow:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .idea-bs .bdb-attach-wrap {
margin-right: auto;
}
/* in the X-Sellerator the page is plain white, so the chat box gets the same very pale fill as the X-Sellerator cards */
.tsmp-dashpages.tsmp-dashpages #xsIdeasHost .idea-bs .bdb-chat-bar {
background: #FAF9F8;
}
.tsmp-dashpages.tsmp-dashpages .ibs-kind {
text-align: center; margin: 4px 0 16px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-q {
font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-chips {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .ibs-chip {
white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-chip svg {
flex: none; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .ibs-chip {
font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 9px 11px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .ibs-chip:hover {
background: var(--cream); border-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .ibs-chip.is-on {
background: var(--cream); border-color: var(--mascot); box-shadow: inset 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .ibs-label {
display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-input {
width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); font: inherit; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ibs-input:focus {
outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,26,24,0.08);
}
.tsmp-dashpages.tsmp-dashpages .ibs-warn {
color: #B4483C; font-size: 13px; margin: 8px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .ibs-save-row {
display: flex; gap: 12px; align-items: stretch;
}
.tsmp-dashpages.tsmp-dashpages .ibs-save-row .ibs-input {
flex: 1 1 auto; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .ibs-savebtn {
margin-top: 0; margin-left: auto; min-width: 180px; justify-content: center; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .ibs-savebtn:disabled {
opacity: .45; cursor: not-allowed;
}
.tsmp-dashpages.tsmp-dashpages .ibs-saved {
max-width: 720px; margin: 34px auto 0; padding: 20px 22px; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--mascot); border-radius: var(--radius-card);
}
.tsmp-dashpages.tsmp-dashpages .ibs-saved[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .ibs-saved p {
margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ibs-saved-btns .bs-another-ico {
vertical-align: -1px; margin-right: 9px; flex: none;
}
.tsmp-dashpages.tsmp-dashpages #bsAnother {
display: inline-flex; align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .ibs-saved-btns {
display: flex; gap: 12px; flex-wrap: wrap;
}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .ibs-save-row {
flex-direction: column;
}
.tsmp-dashpages.tsmp-dashpages .ibs-save-row .ibs-input {
max-width: none;
}
.tsmp-dashpages.tsmp-dashpages .ibs-savebtn, .tsmp-dashpages.tsmp-dashpages .ibs-saved-btns .btn {
width: 100%; margin-left: 0;
}

}
.tsmp-dashpages.tsmp-dashpages .kit-empty {
text-align: center; padding: 48px 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: 24px;
}
.tsmp-dashpages.tsmp-dashpages .kit-empty h3 {
font-size: 20px; margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .kit-empty p {
color: var(--stone); margin-bottom: 20px;
}
/* Add a Product - X-Sellerator: tabs, loop strip, square buttons */
.tsmp-dashpages.tsmp-dashpages .xs-h1 {
display: flex; align-items: center; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .xs-h1-ico {
flex: none; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row {
margin: 0 0 28px;
}
/* Phone: the dashboard tab rows fold into one button with a hamburger (the tabs used to wrap onto four lines) */
.tsmp-dashpages.tsmp-dashpages .xs-tabs-burger {
display: none;
}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row .xs-tabs-burger {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line, #E5DFD6); border-radius: 10px; background: var(--white, #fff); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-align: left; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row .xs-tabs-burger .xtb-label {
flex: 1; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row .xs-tabs-burger .xtb-chev {
transition: transform .15s;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row .xs-tabs-burger[aria-expanded="true"] .xtb-chev {
transform: rotate(180deg);
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row.has-burger .xs-tabs {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row.has-burger.is-open .xs-tabs {
display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 6px; border: 1px solid var(--line, #E5DFD6); border-radius: 10px; background: var(--white, #fff); overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row.has-burger.is-open .xs-tabs button {
width: 100%; justify-content: flex-start; text-align: left; padding: 0 16px; border-bottom: 1px solid var(--line, #E5DFD6); border-left: 3px solid transparent;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row.has-burger.is-open .xs-tabs button:last-child {
border-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs-row.has-burger.is-open .xs-tabs button.active {
border-left-color: var(--ink); border-bottom-color: var(--line, #E5DFD6); background: var(--cream, #FAF7F2);
}

}
.tsmp-dashpages.tsmp-dashpages .xs-tabs {
flex-wrap: wrap; row-gap: 4px;
}
.tsmp-dashpages.tsmp-dashpages .xs-dot {
display: inline-block; min-width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; background: var(--fri-yay, #C25F4E); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; letter-spacing: 0; text-transform: none; vertical-align: 1px;
}
.tsmp-dashpages.tsmp-dashpages .xs-dot[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li[data-nav="add-xs"] > a, .tsmp-dashpages.tsmp-dashpages .sidebar-nav li[data-nav="platforms"] > a {
position: relative;
}
/* the red dot belongs inside its own menu line; without this the Connect Media dot floated up beside the seller's name */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .xs-dot--ico {
position: absolute; left: 20px; top: 5px; min-width: 14px; width: 14px; height: 14px; margin: 0; border: 2px solid var(--white, #fff); box-sizing: content-box; font-size: 9px; line-height: 14px; z-index: 1;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs button:hover, .tsmp-dashpages.tsmp-dashpages .xs-tabs button.active {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .xs-tab-ico {
display: inline-block; vertical-align: -2px; margin-right: 6px;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs button.active {
border-bottom-color: var(--ink);
}
/* black and white; the only color in the section is the Fri-Yay "!" when something needs you */
/* Setup nudge: a small card that slides out of the top-right of the banner, then folds into a pill with a progress ring. The ongoing nudge while the three required setup steps are not done (the big first-login moment is the lightbox on the front page). */
.tsmp-dashpages.tsmp-dashpages .main:has(.xs-page:not([hidden])) .lw-strip {
display: none;
}
/* the old checklist strip is replaced by the nudge on these pages */
.tsmp-dashpages.tsmp-dashpages .nudge {
position: absolute; top: 14px; right: 14px; z-index: 2;
}
.tsmp-dashpages.tsmp-dashpages .nudge[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .nudge-pill {
display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 9px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; transition: opacity .25s, transform .25s;
}
.tsmp-dashpages.tsmp-dashpages .nudge-pill:hover {
box-shadow: 0 4px 14px rgba(0,0,0,.26);
}
.tsmp-dashpages.tsmp-dashpages .nudge-pill b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .nudge-ring {
flex: none;
}
.tsmp-dashpages.tsmp-dashpages .nudge-ring circle {
fill: none; stroke-width: 3;
}
.tsmp-dashpages.tsmp-dashpages .nudge-ring .nudge-track {
stroke: #E4E1DC;
}
.tsmp-dashpages.tsmp-dashpages .nudge-ring .nudge-fill {
stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset .5s; transform: rotate(-90deg); transform-origin: 50% 50%;
}
.tsmp-dashpages.tsmp-dashpages .nudge-card {
position: absolute; top: 0; right: 0; width: 300px; padding: 18px 18px 16px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.28); text-align: left; transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s;
}
.tsmp-dashpages.tsmp-dashpages .nudge[data-open="1"] .nudge-card {
transform: none; opacity: 1; pointer-events: auto;
}
.tsmp-dashpages.tsmp-dashpages .nudge[data-open="1"] .nudge-pill {
opacity: 0; transform: scale(.9); pointer-events: none;
}
.tsmp-dashpages.tsmp-dashpages .nudge-x {
position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .nudge-x:hover {
background: #F0EFEE; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nudge-h {
padding-right: 24px; font-size: 16px; font-weight: 700; line-height: 1.25;
}
.tsmp-dashpages.tsmp-dashpages .nudge-bar {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 12px 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .nudge-bar i {
height: 5px; border-radius: 3px; background: #E4E1DC;
}
.tsmp-dashpages.tsmp-dashpages .nudge-bar i.is-done {
background: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .nudge-sub {
font-size: 13px; line-height: 1.45; color: var(--stone); margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .nudge-sub b {
color: var(--ink); font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .nudge-next {
color: var(--ink); font-weight: 600;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .nudge {
top: 10px; right: 10px;
}
.tsmp-dashpages.tsmp-dashpages .nudge-card {
width: min(300px, calc(100vw - 52px));
}

}
@media (prefers-reduced-motion: reduce) {
.tsmp-dashpages.tsmp-dashpages .nudge-card, .tsmp-dashpages.tsmp-dashpages .nudge-pill, .tsmp-dashpages.tsmp-dashpages .nudge-ring .nudge-fill {
transition: none;
}

}
/* Bulk import page: same look as the X-Sellerate pages (white page, photo banner, no card around the steps; the photo moved up into the banner) */
/*
 * ⚠️ THE THEME REPAINTS EVERY DASHBOARD LINK, AND IT OUT-SPECIFIES US.
 *
 * theme/assets/css/dokan-dashboard.css:876
 *
 *     body.dokan-dashboard .dokan-dashboard-content a:not(.dokan-btn):not(.btn) {
 *         color: var(--fri-yay);
 *     }
 *
 * That is (0,4,2). Ours was .tsmp-tool.tsmp-tool .xs-back — (0,3,0) — so
 * the ink colour below has been correct and inert the whole time, and the
 * back link rendered Fri-Yay orange. Fahad, 13 Nov: "color is black not the
 * orange you have."
 *
 * ⚠️ DOUBLING THE SCOPE CLASS IS NOT ENOUGH HERE. That trick beat the
 * theme's (0,2,1) rules; this one carries two :not() classes and two
 * element selectors. Matching its shape — a.xs-back with the same pair of
 * :not()s — lands at (0,5,1) and wins on class count, which is the
 * comparison that is made first.
 *
 * ⚠️ AND THIS IS NOT ONLY THE BACK LINK. That theme rule hits EVERY <a>
 * of ours inside the dashboard that does not carry .btn, so any link we
 * style and do not out-specify is orange on screen whatever our sheet says.
 * t-backlink.js checks the shape; the wider sweep is still worth doing.
 */
.tsmp-dashpages.tsmp-dashpages a.xs-back:not(.btn):not(.dokan-btn) {
display: inline-block; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #1C1A18; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages a.xs-back:not(.btn):not(.dokan-btn):hover {
color: #1C1A18; opacity: .65;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero--bulk {
height: 200px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="tpt-import"] .ti-wrap {
max-width: 640px; margin: 30px auto 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="tpt-import"] .ti-card {
display: block; background: transparent; border: 0; border-radius: 0; padding: 0; overflow: visible;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="tpt-import"] .ti-img {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="tpt-import"] .ti-body {
padding: 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="tpt-import"] .ti-wrap.is-wide {
max-width: 900px;
}
/* the offer step uses the full banner width; the form steps stay narrow */
.tsmp-dashpages.tsmp-dashpages .ti-offer .ti-offer-grid {
display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer h1 {
font-size: 32px; line-height: 1.12; letter-spacing: -0.025em;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer .bi-lead {
font-size: 16px; line-height: 1.55; max-width: 520px;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer .bi-list {
max-width: 560px;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer-card {
background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--mascot); border-radius: 12px; padding: 24px 24px 20px; position: sticky; top: 24px;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer-eyebrow {
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin: 0 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer-price {
margin: 0 0 18px; line-height: 1;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer-price b {
font-size: 48px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .ti-offer-price span {
font-size: 15px; color: var(--stone); margin-left: 6px;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer-btn {
width: 100%; justify-content: center; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .ti-next {
list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 44px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .ti-next li {
display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .ti-next b {
font-size: 15px; color: var(--ink);
}
@media (max-width: 1200px) {
.tsmp-dashpages.tsmp-dashpages .ti-offer .ti-offer-grid {
grid-template-columns: 1fr; gap: 28px;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer-card {
position: static;
}

}
/* stacks earlier so the headline's first line has room */
@media (max-width: 900px) {
.tsmp-dashpages.tsmp-dashpages .ti-next {
grid-template-columns: 1fr 1fr;
}
.tsmp-dashpages.tsmp-dashpages .ti-offer h1 {
font-size: 30px;
}

}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .ti-next {
grid-template-columns: 1fr;
}

}
/* Bulk import (the page and its checkout): no italics, mascot color only; the checklist text is regular weight */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="tpt-import"] .lw-em, .tsmp-dashpages.tsmp-dashpages #biOv .lw-em {
font-style: normal; color: var(--ink);
}
/* everything is black ...*/
.tsmp-dashpages.tsmp-dashpages .bi-key {
color: var(--mascot);
}
/* ... except the one key phrase, "Bulk import" */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="tpt-import"] .bi-list b, .tsmp-dashpages.tsmp-dashpages #biOv .bi-list b {
font-weight: 400;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .xs-hero--bulk {
height: auto; min-height: 190px;
}

}
/* Wide tables (My Products, My Communities, the other My ... pages) scroll sideways inside their own box on narrower screens, so the buttons at the right end are never cut off or squeezed. On wide screens the table fits and nothing changes (the progress pop-up still shows outside the table). */
@media (max-width: 1599px) {
.tsmp-dashpages.tsmp-dashpages .products-table-wrap, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="communities"] .products-table-wrap, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="products"] .products-table-wrap {
overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.tsmp-dashpages.tsmp-dashpages .products-table-wrap > table {
min-width: 980px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="products"] .products-table-wrap > table {
min-width: 1120px;
}

}
/* Phones: each table row becomes a card (name on top, then label: value lines, buttons last). data-label comes from the column headings (script at the end of the page). Developer note: build these as a card list under 761px and a table above it. */
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table-wrap {
overflow: visible; background: none; border: 0; border-radius: 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page.xs-page .products-table-wrap > table, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page] .products-table-wrap > table {
min-width: 0 !important; width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td {
min-width: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table tr {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td:has(> input[type=checkbox]:only-child) {
position: absolute; top: 14px; right: 14px; width: auto; padding: 0;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td:has(> input[type=checkbox]:only-child)::before {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td.p-name-cell {
display: flex; text-align: left; font-size: 16px; padding: 0 34px 8px 0;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td.p-name-cell::before {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table .p-thumb {
flex: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td.kit-act {
white-space: normal;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table, .tsmp-dashpages.tsmp-dashpages .xs-page .products-table tbody, .tsmp-dashpages.tsmp-dashpages .xs-page .products-table tfoot, .tsmp-dashpages.tsmp-dashpages .xs-page .products-table tr, .tsmp-dashpages.tsmp-dashpages .xs-page .products-table td {
display: block; width: 100%; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table thead {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table tr {
background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; margin: 0 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td {
display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; border: 0; text-align: right; font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td::before {
content: attr(data-label); flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td:first-child {
display: block; text-align: left; font-size: 16px; padding: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td:first-child::before, .tsmp-dashpages.tsmp-dashpages .xs-page .products-table td[data-label=""]::before {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td.launch-cell {
display: block; padding: 10px 0 0 !important; text-align: left; white-space: normal;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td.launch-cell::before {
display: block; margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td.launch-cell .launch-btn, .tsmp-dashpages.tsmp-dashpages .xs-page .products-table td.launch-cell .btn {
display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; min-height: 44px; margin: 0; font-size: 13px; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table tr.slot-row {
background: none; border-style: dashed;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table tr.slot-row td {
background: none; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table tr.slot-row td.launch-cell::before {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td[colspan] {
display: block; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .xs-page .products-table td[colspan]::before {
display: none;
}

}
/* My Products: Add a Product button and chooser */
.tsmp-dashpages.tsmp-dashpages .comm-addrow {
display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .comm-slots {
margin: 0; font-size: 14px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .comm-slots span {
color: var(--stone); font-weight: 500;
}
.tsmp-dashpages.tsmp-dashpages .slot-row td {
padding: 14px 16px; background: var(--cream); border-top: 1px dashed var(--border); color: var(--stone); font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .slot-row .launch-btn {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-btn {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-card.add-prod-card {
max-width: 980px;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-card .xs-ov-body {
padding: 36px 40px 30px;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-card h2 {
font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-sub {
margin: 0 0 22px; color: var(--stone); font-size: 16px;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-opt {
position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--white); overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-opt--main {
border: 2px solid var(--mascot); box-shadow: 0 10px 28px rgba(188,136,109,.18);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-photo {
position: relative; height: 190px; overflow: hidden; background: #E8DDD2;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-photo img {
display: block; width: 100%; height: 100%; object-fit: cover;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-body {
display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-tag {
position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; background: var(--mascot); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-tag--plain {
background: #fff; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-name {
margin: 0 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-desc {
margin: 0 0 14px; font-size: 16px; line-height: 1.4; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-desc em {
font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-list {
list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-list li {
position: relative; padding-left: 22px;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-list li::before {
content: "\2713"; position: absolute; left: 0; font-weight: 700; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-price {
margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-price b {
font-weight: 800; font-size: 17px;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-price span {
display: block; margin-top: 2px; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-btn2 {
margin-top: auto; display: flex; width: 100%; justify-content: center; align-items: center; padding: 15px 16px; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-more {
margin: 20px 0 0; font-size: 14px; color: var(--stone); text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-more a {
color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 600px) {
.tsmp-dashpages.tsmp-dashpages .add-prod-grid {
grid-template-columns: 1fr;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-btn {
margin-left: 0;
}

}
.tsmp-dashpages.tsmp-dashpages .add-prod-limit {
margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-btn2.is-off {
opacity: .45; pointer-events: none;
}
.tsmp-dashpages.tsmp-dashpages .comm-act a + a {
margin-left: 18px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="communities"] .comm-th-view {
padding-left: 28px;
}
/* Write a Blog Post */
.tsmp-dashpages.tsmp-dashpages .bw-wrap {
max-width: 860px; margin: 28px auto 40px;
}
.tsmp-dashpages.tsmp-dashpages .bw-intro {
margin-bottom: 18px;
}
.tsmp-dashpages.tsmp-dashpages .bw-intro .op-section-title {
font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 4px;
}
.tsmp-dashpages.tsmp-dashpages .bw-intro .op-section-sub {
font-size: 14px; color: var(--stone); margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .bw-intro .op-section-sub a {
color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .bw-card {
background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 28px 30px 30px;
}
.tsmp-dashpages.tsmp-dashpages .bw-field {
padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .bw-field label {
display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .bw-field input[type=text], .tsmp-dashpages.tsmp-dashpages .bw-field select {
width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--cream); font: inherit; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bw-field input:focus, .tsmp-dashpages.tsmp-dashpages .bw-field select:focus, .tsmp-dashpages.tsmp-dashpages .bw-body:focus {
outline: none; border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bw-hint {
margin: 8px 0 0; font-size: 12.5px; font-style: italic; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bw-drop {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; border: 1.5px dashed var(--mascot); border-radius: 8px; background: var(--cream); color: var(--ink); font-weight: 600; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .bw-drop small {
font-weight: 400; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bw-editor {
border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .bw-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--cream);
}
.tsmp-dashpages.tsmp-dashpages .bw-toolbar button {
min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bw-toolbar button:hover {
background: var(--white); border-color: var(--border);
}
.tsmp-dashpages.tsmp-dashpages .bw-toolbar .bw-insert {
border: 1px solid var(--mascot); font-size: 12px; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .bw-sep {
width: 1px; height: 20px; background: var(--border); margin: 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .bw-body {
min-height: 360px; padding: 16px 18px; font-size: 16px; line-height: 1.6; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .bw-body:empty::before {
content: attr(data-ph); color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bw-actions {
display: flex; gap: 12px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .bw-actions {
align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .bw-actions .btn {
justify-content: center; padding: 14px 22px; font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .bw-draft {
margin-left: auto; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 8px 4px;
}
.tsmp-dashpages.tsmp-dashpages .bw-note {
margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .bw-note b {
color: var(--ink); font-weight: 600;
}
/* Phones and tablets: connected-account rows wrap instead of pushing the page sideways, and tap targets are at least 40px tall */
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .platform-row {
flex-wrap: wrap; gap: 8px 12px;
}
.tsmp-dashpages.tsmp-dashpages .platform-row .pf-info {
flex: 1 1 0; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .platform-row .pf-status, .tsmp-dashpages.tsmp-dashpages .platform-row > .btn {
margin-left: 54px;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs button, .tsmp-dashpages.tsmp-dashpages .tabs-filter button {
min-height: 40px;
}
.tsmp-dashpages.tsmp-dashpages .btn.small, .tsmp-dashpages.tsmp-dashpages .btn-ghost.small, .tsmp-dashpages.tsmp-dashpages .launch-btn, .tsmp-dashpages.tsmp-dashpages .add-prod-btn {
min-height: 40px;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-btn, .tsmp-dashpages.tsmp-dashpages .comm-addrow .btn {
justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .comm-addrow {
flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .nudge-x, .tsmp-dashpages.tsmp-dashpages .hello-bar-x, .tsmp-dashpages.tsmp-dashpages .xs-ov-x {
min-width: 40px; min-height: 40px;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-card.add-prod-card {
max-height: 94vh;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-card .xs-ov-body {
padding: 26px 20px 22px;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-card h2 {
font-size: 24px;
}
.tsmp-dashpages.tsmp-dashpages .bw-wrap {
margin-top: 20px;
}
.tsmp-dashpages.tsmp-dashpages .bw-card {
padding: 20px 16px 22px;
}
.tsmp-dashpages.tsmp-dashpages .bw-actions .btn {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .bw-draft {
margin-left: 0; width: 100%; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .bw-body {
min-height: 260px;
}

}
@media (min-width: 761px) and (max-width: 1100px) {
.tsmp-dashpages.tsmp-dashpages .add-prod-card .xs-ov-body {
padding: 28px 28px 24px;
}

}
.tsmp-dashpages.tsmp-dashpages .xs-tabs .nav-count {
margin-left: 4px;
}
/* These four pages sit on a plain white page: a rounded photo banner with the page name on it, the four tabs under it, then the content */
.tsmp-dashpages.tsmp-dashpages .main:has(.xs-page:not([hidden])) {
background: var(--bg);
}
/* every dashboard and every Products & Content page sits on the soft cream page; set to var(--white) for the white page */
.tsmp-dashpages.tsmp-dashpages .xs-card {
margin: 0;
}
/* TeacherStore Dashboard: the My TeacherStore pages share the photo banner and a tab row, like the X-Sellerator area */
.tsmp-dashpages.tsmp-dashpages .main:has(.ts-dash-pg:not([hidden])) {
background: var(--bg);
}
/* try-out: every dashboard sits on the soft cream page; set this back to var(--white) for the white page */
/* the Sales dashboard keeps the soft cream page the sales pages were built on, so their white cards and tables stand out */
.tsmp-dashpages.tsmp-dashpages .ts-dash-pg > .ts-dash-chrome .xs-tabs-row {
margin-bottom: 24px;
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="withdraw"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="contacts"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="reviews"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="support"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="qa"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="coupons"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="team"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="newsletters"] .page-header h1 {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome .xs-hero img {
object-position: 50% 12%;
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome .xs-hero::after {
background: linear-gradient(to right, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 62%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}
/* lighter than the X-Sellerator banners: the photo is mostly white desk, so the shade stays low at the top and builds under the title */
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome .xs-hero-text {
text-shadow: 0 1px 14px rgba(0,0,0,.4);
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome .xs-hero-eyebrow {
font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.45);
}
/* My TeacherStore Studio dashboard: same banner and tabs as the TeacherStore Dashboard, one page per tool */
.tsmp-dashpages.tsmp-dashpages .nav-grp-ico {
flex: none; margin-right: 9px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .nav-group-sub > a > .nav-grp-ico {
align-self: center;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-group-sub > a {
justify-content: flex-start;
}
/* icon and name sit together on the left; the arrow stays at the right edge */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.nav-group-sub > a::after {
margin-left: auto;
}
/* My Dashboards is always open (try-out): no arrow, the heading is not a button, and its lines can never fold away */
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.side-dash > a {
pointer-events: none; cursor: default;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.side-dash > a::after {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.side-dash > .sub-nav {
display: block !important;
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome--studio .xs-hero img {
object-position: 50% 45%;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card--plus, .tsmp-dashpages.tsmp-dashpages .tsd-card--pro {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card--plus h3, .tsmp-dashpages.tsmp-dashpages .tsd-card--pro h3 {
padding-right: 26px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-lock {
display: none; position: absolute; top: 14px; right: 14px; color: var(--mascot); line-height: 0;
}
body.tier-seller .tsmp-dashpages.tsmp-dashpages .tsd-card--plus .tsd-lock, body:not(.tier-pro) .tsmp-dashpages.tsmp-dashpages .tsd-card--pro .tsd-lock {
display: block;
}
/* STUDIO > Email Service: a seller without email sees the same "Turn on email today" card as the pop-up (the menu line says Add Email); with email it is the tool page */
.tsmp-dashpages.tsmp-dashpages .lbl-add {
display: none;
}
body.email-offer .tsmp-dashpages.tsmp-dashpages .lbl-have {
display: none;
}
body.email-offer .tsmp-dashpages.tsmp-dashpages .lbl-add {
display: inline;
}
.tsmp-dashpages.tsmp-dashpages .sx-email-host {
display: none; max-width: 720px;
}
.tsmp-dashpages.tsmp-dashpages .sx-email-page:not(.sx-offer-mode) .sx-email-host {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .sxe-lead {
margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--ink);
}
/* The wizard's own wrapper on the Email Service page. Her .es-box carries the
   card, so this only has to not get in its way. */
.tsmp-dashpages.tsmp-dashpages .sxe-wiz {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .sx-eb-host {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .sx-email-page.sx-offer-mode .sx-eb-host {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .sx-email-page.sx-offer-mode .sx-email-host {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .sx-email-page .sx-locked {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .sx-email-page .sx-open {
display: block !important;
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-pg .xs-h2.ts-sec-title {
margin: 44px 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .ts-sec-title .xs-h2-ico {
width: 30px; height: 30px;
}
.tsmp-dashpages.tsmp-dashpages .sx-card > h2 {
display: none;
}
/* My Sales Dashboard: same banner and tabs as the other dashboards */
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome--sales .xs-hero img {
object-position: 50% 42%;
}
/* the calculator photo stays facing the right way (the numbers would read backward if flipped), so on this banner the title sits on the plain gray side at the right */
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome--sales .xs-hero {
justify-content: flex-end;
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome--sales .xs-hero-text {
text-align: right; max-width: none;
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome--sales .xs-hero::after {
background: linear-gradient(to left, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 62%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}
.tsmp-dashpages.tsmp-dashpages .tab-soon {
margin-left: 6px; padding: 1px 5px; border-radius: 3px; background: #F1EEEB; color: var(--stone); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-soon {
margin-left: auto; padding: 2px 6px; border-radius: 3px; background: #F1EEEB; color: var(--stone); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="sales"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="orders-all"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="reports"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="wishlist"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="traffic"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="utm"] > .page-header h1, .tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="pixels"] > .page-header h1 {
display: none;
}
/* Seller Support Dashboard: same banner and tabs as the other dashboards */
.tsmp-dashpages.tsmp-dashpages .ts-dash-chrome--support .xs-hero img {
object-position: 50% 45%;
}
.tsmp-dashpages.tsmp-dashpages .ts-dash-pg[data-page="announcements"] > .page-header h1 {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card--img {
padding-top: 0; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card--img .tsd-card-img {
display: block; width: calc(100% + 44px); max-width: none; margin: 0 -22px 16px; aspect-ratio: 16 / 9; object-fit: cover;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card--img.tsd-card--pro .tsd-lock {
z-index: 2; top: 18px; right: 14px; padding: 7px; border-radius: 50%; background: rgba(28,26,24,.62); color: #fff;
}
/* a dark circle so the lock reads on the light photo */
.tsmp-dashpages.tsmp-dashpages .sx-card.sc-card {
max-width: none; display: grid; grid-template-columns: 38% 1fr; padding: 0; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .sc-img {
position: relative; min-height: 360px; background: #F6F3EE;
}
.tsmp-dashpages.tsmp-dashpages .sc-img img {
position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%;
}
/* the picture fills the whole left side, top to bottom; the gold Hello sign and the plant stay in view */
.tsmp-dashpages.tsmp-dashpages .sc-body {
padding: 14px 30px 20px;
}
@media (max-width: 800px) {
.tsmp-dashpages.tsmp-dashpages .sx-card.sc-card {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .sc-img {
min-height: 0; height: 190px;
}
.tsmp-dashpages.tsmp-dashpages .sc-img img {
position: static; height: 190px;
}
.tsmp-dashpages.tsmp-dashpages .sc-body {
padding: 14px 16px 20px;
}

}
/* stacks on phones and tablets: picture on top, form below (the old rule lost to the two-column rule above it) */
.tsmp-dashpages.tsmp-dashpages .sc-embed {
min-height: 640px;
}
.tsmp-dashpages.tsmp-dashpages .sc-embed--cancel, .tsmp-dashpages.tsmp-dashpages .sc-embed--cancel iframe {
min-height: 975px;
}
@media (min-width: 801px) {
.tsmp-dashpages.tsmp-dashpages .sc-img--cancel img {
position: absolute; inset: 0; top: 0; width: 100%; height: 100%; object-position: 30% 40%;
}

}
/* the photo fills the whole left side, top to bottom, with the calendar in view */
@media (max-width: 800px) {
.tsmp-dashpages.tsmp-dashpages .sc-img--cancel img {
object-position: 40% 20%;
}

}
.tsmp-dashpages.tsmp-dashpages .sc-embed iframe {
display: block; min-height: 640px;
}
.tsmp-dashpages.tsmp-dashpages .sc-form {
display: flex; flex-direction: column; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .sc-l {
margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sc-in {
width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); font: inherit; font-size: 14.5px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sc-in:focus {
outline: none; border-color: var(--mascot); box-shadow: 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .sc-in.err {
border-color: var(--pop-quiz, #C25F4E);
}
.tsmp-dashpages.tsmp-dashpages textarea.sc-in {
resize: vertical;
}
.tsmp-dashpages.tsmp-dashpages .sc-form .btn {
align-self: flex-start; margin-top: 16px;
}
.tsmp-dashpages.tsmp-dashpages .sc-thanks {
padding: 6px 0 2px; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sc-thanks p {
margin: 4px 0 0; color: var(--stone); font-size: 14px;
}
/* My Ideas tabs carry longer names (Product ideas, Online course ideas...), so the spacing is tighter to keep them on one line */
.tsmp-dashpages.tsmp-dashpages #ideaFilters {
column-gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages #ideaFilters button {
letter-spacing: .2px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-grid + .tsd-grid {
margin-top: 16px;
}
/* STUDIO Overview cards (smaller now): the plan chips sit in the top-left corner on their own line, the lock in the top-right, and the title and text drop below them */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="studio-dash"] .tsd-card {
padding-top: 46px; position: relative;
}
.tsmp-dashpages.tsmp-dashpages .sec-empty .sec-soon {
display:inline-block; margin-bottom:12px; padding:6px 16px; border-radius:4px; border:1.5px solid var(--mascot, #BC886D); background:transparent; color:var(--mascot, #BC886D); font-size:16px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.tsmp-dashpages.tsmp-dashpages .msg-n {
display:inline-block; min-width:22px; padding:1px 7px; margin-left:6px; border-radius:999px; background:var(--fri-yay,#C25F4E); color:#fff; font-size:12px; font-weight:700; line-height:20px; text-align:center; vertical-align:middle;
}
.tsmp-dashpages.tsmp-dashpages .msg-n.is-zero {
background:#E7E3DD; color:var(--stone);
}
/* Phone: five pages used to scroll sideways at 375px (Sales tiles, Store Setup links, Home, Newsletters tabs, Reports tabs) */
/* Home: the "How can I help you today" block was wider than a tablet screen */
@media (max-width: 960px) {
.tsmp-dashpages.tsmp-dashpages .dash-section-card .dash-prestep-head {
width: 100% !important; max-width: 100% !important; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .dash-section-card .dash-prestep-head * {
max-width: 100%; white-space: normal !important; overflow-wrap: anywhere;
}

}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .stat-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tsmp-dashpages.tsmp-dashpages .stat-tile {
min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .social-row .social-input {
min-width: 0; width: 100%; flex: 1 1 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-section-card .dash-prestep-head {
width: 100% !important; max-width: 100% !important; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .dash-section-card .dash-prestep-head * {
max-width: 100%; white-space: normal !important; overflow-wrap: anywhere;
}
.tsmp-dashpages.tsmp-dashpages .nl-tabs, .tsmp-dashpages.tsmp-dashpages .dash-page .tabs-filter {
flex-wrap: wrap;
}

}
/* Phone (<=620px): one slim row (menu button, logo, photo). Back to TeacherStore.io and View My Store are in the slide-out menu (Marketplace, View My Store), so they no longer wrap into a second and third row that floated over the page */
@media (max-width: 620px) {
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-backwrap, body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewstore {
display: none !important;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-acct {
margin-left: auto !important;
}

}
/* Seller Support: how to get help (four steps) and the Contact Us pop-up */
.tsmp-dashpages.tsmp-dashpages .sup-how {
--sup-blue: #728D9C; --sup-tint: #EEF2F4; display: grid; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--sup-blue); border-radius: var(--radius-card); overflow: hidden; margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .sup-how-img {
position: relative; min-height: 420px; background: var(--sup-tint);
}
.tsmp-dashpages.tsmp-dashpages .sup-how-img img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block;
}
.tsmp-dashpages.tsmp-dashpages .sup-how-body {
padding: 24px 28px 24px; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .sup-how-lead {
margin: 0 0 16px; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--ink); max-width: 820px;
}
.tsmp-dashpages.tsmp-dashpages .sup-how-lead b {
font-weight: 800; color: var(--sup-blue);
}
.tsmp-dashpages.tsmp-dashpages .sup-steps {
list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.tsmp-dashpages.tsmp-dashpages .sup-steps li {
background: var(--sup-tint); border-radius: 10px; padding: 10px 14px; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .sup-n {
grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--sup-blue); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .sup-eb {
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sup-blue);
}
.tsmp-dashpages.tsmp-dashpages .sup-st {
font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sup-eyebrow {
margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sup-blue);
}
.tsmp-dashpages.tsmp-dashpages .sup-incl {
list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: max-content max-content; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 10px 56px;
}
/* reads down the first column: the question, then Loom or screen recordings, then screenshots */
.tsmp-dashpages.tsmp-dashpages .sup-incl li {
display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sup-ic {
flex: none; color: var(--sup-blue); display: inline-flex;
}
.tsmp-dashpages.tsmp-dashpages .sup-incl-note {
margin: 0 0 24px; font-size: 14.5px; line-height: 1.5; color: var(--ink); max-width: 720px;
}
.tsmp-dashpages.tsmp-dashpages .sup-how-act {
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .sup-how .btn-primary {
background: #728D9C; border-color: #728D9C; color: #fff; min-width: 220px;
}
/* Seller Blue buttons: the site-wide primary-button hover adds a Mascot inner outline; here the outline stays Seller Blue (the border), so the Mascot line is replaced by a Seller Blue one */
.tsmp-dashpages.tsmp-dashpages .sup-how .btn-primary:hover, .tsmp-dashpages.tsmp-dashpages .sup-ov-card .btn-primary:hover, .tsmp-dashpages.tsmp-dashpages #ebBundleBtn:hover, .tsmp-dashpages.tsmp-dashpages #hubSetup .btn-primary:hover, .tsmp-dashpages.tsmp-dashpages #hubOv .hub-modal--plus .hub-btn--main:hover, .tsmp-dashpages.tsmp-dashpages .es-page .btn:not(.es-back):hover, .tsmp-dashpages.tsmp-dashpages .es-page .hub-btn--main:hover, .tsmp-dashpages.tsmp-dashpages #planOv .hub-btn--main:hover {
box-shadow: inset 0 0 0 1px #728D9C !important;
}
/* a real Seller Blue outline on hover (these buttons have no border, so it is drawn as an inner line; same thickness as the Mascot line it replaces) */
.tsmp-dashpages.tsmp-dashpages .sup-how .btn-primary:hover {
background: #DCE6EB; border-color: #728D9C; color: var(--ink);
}
/* soft blue with the blue outline */
.tsmp-dashpages.tsmp-dashpages .tsd-grid.tsd-grid--one {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide {
display: grid; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); column-gap: 0; align-items: start; padding: 0;
}
/* same two columns as the Sellers Club box, so the photo edges line up */
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .tsd-card-img {
grid-column: 1; grid-row: 1 / span 3; width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; min-height: 170px; object-fit: cover;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide > :not(.tsd-card-img):not(.tsd-lock) {
grid-column: 2; margin-left: 28px; margin-right: 28px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide {
border-top-color: var(--gold, #C9A96E);
}
/* Pro is gold */
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide h3 {
margin-top: 22px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn .pro-no {
display: inline;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn .pro-yes {
display: none;
}
body.tier-pro .tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn .pro-no {
display: none;
}
body.tier-pro .tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn .pro-yes {
display: inline;
}
/* Pro members post in Pro; everyone else sees what Pro includes */
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .tsd-chips {
position: static; margin: 0 0 0 4px; padding: 0;
}
/* the gold PRO badge sits beside the heading, not over the photo */
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .tsd-chip {
font-size: 10px; padding: 3px 7px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn {
border-color: var(--gold, #C9A96E); transition: background-color .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn:hover {
background: #F5EBD6; border-color: var(--gold, #C9A96E); color: var(--ink);
}
/* soft gold with the gold outline */
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide p {
margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn {
justify-self: start; margin-top: 16px; margin-bottom: 26px;
}
@media (max-width: 900px) {
.tsmp-dashpages.tsmp-dashpages .sup-how {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .sup-how-img {
min-height: 0; height: 240px;
}

}
@media (max-width: 900px) {
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .tsd-card-img {
grid-column: 1; grid-row: auto; height: 160px; min-height: 0;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide > :not(.tsd-card-img):not(.tsd-lock) {
grid-column: 1; margin-left: 16px; margin-right: 16px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn {
width: calc(100% - 32px); justify-content: center; min-height: 44px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn {
width: auto; min-width: 240px;
}

}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .tsd-card.tsd-card--wide .btn {
width: calc(100% - 32px); min-width: 0;
}

}
@media (max-width: 640px) {
.tsmp-dashpages.tsmp-dashpages .sup-incl {
grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row;
}

}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .sup-how-body {
padding: 20px 16px 18px;
}
.tsmp-dashpages.tsmp-dashpages .sup-how-lead {
font-size: 16.5px;
}
.tsmp-dashpages.tsmp-dashpages .sup-how-act .btn {
width: 100%; justify-content: center; min-height: 44px;
}

}
.tsmp-dashpages.tsmp-dashpages .xs-ov-card.sup-ov-card {
--sup-blue: #728D9C; --sup-tint: #EEF2F4; max-width: 1020px; display: grid; grid-template-columns: minmax(280px, 44%) minmax(0, 1fr); border-top-color: #728D9C; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-img {
position: relative; background: var(--sup-tint); min-height: 480px;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-img img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-body {
padding: 32px 36px 28px; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-h {
margin: 0 0 12px; padding-right: 26px; font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-p {
margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-p b {
font-weight: 800;
}
.tsmp-dashpages.tsmp-dashpages .sup-incl--ov {
margin-bottom: 12px; gap: 10px 36px;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-act {
display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-card .btn-primary {
background: #728D9C; border-color: #728D9C; color: #fff; min-width: 240px; min-height: 46px; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-card .btn-primary:hover {
background: #DCE6EB; border-color: #728D9C; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-card .xs-ov-x {
z-index: 2;
}
.tsmp-dashpages.tsmp-dashpages .sup-link {
background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 500; color: #9A9690; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .sup-link:hover {
color: var(--ink);
}
@media (max-width: 900px) {
.tsmp-dashpages.tsmp-dashpages .xs-ov-card.sup-ov-card {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-img {
min-height: 0; height: 150px;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-body {
padding: 22px 18px 22px;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-h {
font-size: 21px;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-act .btn {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-act {
align-items: stretch; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .sup-incl--ov {
grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row;
}
.tsmp-dashpages.tsmp-dashpages .sup-ov-card .xs-ov-x {
background: rgba(255,255,255,.85); border-radius: 50%;
}

}
/* Seller Plans & Pricing: three cards side by side, one Monthly / Annual toggle. Each card lists what is included and, crossed out, what is not. */
.tsmp-dashpages.tsmp-dashpages .pl-bill {
display: inline-flex; margin-top: 18px; border: 1px solid var(--border); border-radius: 999px; background: #fff; padding: 3px;
}
.tsmp-dashpages.tsmp-dashpages .pl-bill button {
border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pl-bill button.is-on {
background: var(--ink); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .pl-bill em {
font-style: normal; font-weight: 500; opacity: .8; margin-left: 4px;
}
.tsmp-dashpages.tsmp-dashpages .pl-price .pl-a {
display: none;
}
body.bill-annual .tsmp-dashpages.tsmp-dashpages .pl-price .pl-a {
display: block;
}
body.bill-annual .tsmp-dashpages.tsmp-dashpages .pl-price .pl-m {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .pl-list .pl-a {
display: none;
}
body.bill-annual .tsmp-dashpages.tsmp-dashpages .pl-list .pl-a {
display: inline;
}
body.bill-annual .tsmp-dashpages.tsmp-dashpages .pl-list .pl-m {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .pl-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 16px; align-items: start;
}
.tsmp-dashpages.tsmp-dashpages .pl-card {
position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-top: 4px solid #728D9C; border-radius: 12px; padding: 22px 20px 22px;
}
.tsmp-dashpages.tsmp-dashpages .pl-card--pro {
border-top-color: var(--gold, #C9A96E);
}
.tsmp-dashpages.tsmp-dashpages .pl-name {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; min-height: 36px;
}
.tsmp-dashpages.tsmp-dashpages .pl-name h2 {
margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
}
/* same size and weight as "Free" */
.tsmp-dashpages.tsmp-dashpages .pl-chip {
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; border-radius: 3px; padding: 3px 8px;
}
.tsmp-dashpages.tsmp-dashpages .pl-chip--seller, .tsmp-dashpages.tsmp-dashpages .pl-chip--plus {
background: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .pl-chip--pro {
background: var(--gold, #C9A96E);
}
.tsmp-dashpages.tsmp-dashpages .pl-yours {
display: none; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--cream); border: 1px solid var(--mascot); border-radius: 999px; padding: 2px 10px;
}
body.tier-seller .tsmp-dashpages.tsmp-dashpages .pl-card--seller .pl-yours, body.tier-plus .tsmp-dashpages.tsmp-dashpages .pl-card--plus .pl-yours, body.tier-pro .tsmp-dashpages.tsmp-dashpages .pl-card--pro .pl-yours {
display: inline-block;
}
body.tier-seller .tsmp-dashpages.tsmp-dashpages .pl-card--seller, body.tier-plus .tsmp-dashpages.tsmp-dashpages .pl-card--plus {
border-color: #728D9C; box-shadow: 0 0 0 1px #728D9C;
}
/* your plan: Seller blue (gold for Pro), never mascot */
body.tier-pro .tsmp-dashpages.tsmp-dashpages .pl-card--pro {
border-color: var(--gold, #C9A96E); box-shadow: 0 0 0 1px var(--gold, #C9A96E);
}
.tsmp-dashpages.tsmp-dashpages .pl-card {
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tsmp-dashpages.tsmp-dashpages .pl-card:hover {
border-color: #728D9C; transform: translateY(-4px); box-shadow: 0 10px 22px rgba(60, 50, 40, .10);
}
.tsmp-dashpages.tsmp-dashpages .pl-card--pro:hover {
border-color: var(--gold, #C9A96E);
}
.tsmp-dashpages.tsmp-dashpages .pl-card--pro.is-spot {
box-shadow: 0 0 0 3px var(--gold, #C9A96E), 0 12px 32px rgba(201,169,110,.35); transition: box-shadow .3s ease;
}
/* a short gold glow when See Pro lands here */
.tsmp-dashpages.tsmp-dashpages .pl-who-h {
margin: 10px 0 4px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8F6F57;
}
.tsmp-dashpages.tsmp-dashpages .pl-who {
margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: #4A453F;
}
/* same height on all three, so the prices, buttons and lists line up */
.tsmp-dashpages.tsmp-dashpages .pl-em {
font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .pl-em--blue {
color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages .pl-em--gold {
color: #B8923A;
}
.tsmp-dashpages.tsmp-dashpages .pl-tag {
margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3;
}
.tsmp-dashpages.tsmp-dashpages .pl-price {
margin: 0 0 14px; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pl-price b {
font-size: 30px; letter-spacing: -0.02em;
}
.tsmp-dashpages.tsmp-dashpages .pl-price span span, .tsmp-dashpages.tsmp-dashpages .pl-price > span {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .pl-price span > span, .tsmp-dashpages.tsmp-dashpages .pl-price > span:not(.pl-m):not(.pl-a) {
font-size: 14.5px; color: #4A453F; line-height: 1.45; margin-top: 3px;
}
.tsmp-dashpages.tsmp-dashpages .pl-was {
font-size: 30px; font-weight: 400; letter-spacing: -0.02em; color: var(--stone); text-decoration: line-through; text-decoration-thickness: 2px; margin-right: 4px;
}
/* the same size as the price, just not bold */
.tsmp-dashpages.tsmp-dashpages .pl-price i {
font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--mascot-light); border-radius: 3px; padding: 2px 7px; margin-left: 4px; vertical-align: 3px;
}
.tsmp-dashpages.tsmp-dashpages .pl-slot {
min-height: 46px; display: flex; align-items: center; margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .pl-btn {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 4px; font-size: 13.5px; font-weight: 600; text-align: center; text-decoration: none; border: 1px solid transparent; color: #fff; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .pl-btn {
text-transform: none; letter-spacing: 0;
}
.tsmp-dashpages.tsmp-dashpages .pl-btn svg {
flex: none;
}
.tsmp-dashpages.tsmp-dashpages .pl-btn--plus {
background: #728D9C; border-color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .pl-btn--pro {
background: var(--gold, #C9A96E); border-color: var(--gold, #C9A96E);
}
.tsmp-dashpages.tsmp-dashpages .pl-btn--plus:hover {
background: var(--cream); color: var(--ink); border-color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .pl-btn--pro:hover {
background: var(--cream); color: var(--ink); border-color: var(--gold, #C9A96E);
}
/* Paused account (after the free 90 days, before the membership is started) */
.tsmp-dashpages.tsmp-dashpages .pz-card {
max-width: 920px; margin: 28px auto; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--ink); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md, 0 4px 16px rgba(28,26,24,.07));
}
.tsmp-dashpages.tsmp-dashpages .pz-pic {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
}
.tsmp-dashpages.tsmp-dashpages .pz-body {
padding: 34px 36px;
}
.tsmp-dashpages.tsmp-dashpages .pz-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mascot); margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pz-h {
margin: 0 0 12px; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pz-p {
margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pz-price {
margin: 18px 0 16px; font-size: 15px;
}
.tsmp-dashpages.tsmp-dashpages .pz-was {
color: var(--stone); text-decoration: line-through;
}
.tsmp-dashpages.tsmp-dashpages .pz-price b {
font-size: 17px;
}
.tsmp-dashpages.tsmp-dashpages .pz-lim {
display: block; margin-top: 2px; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pz-small {
margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pz-small a {
color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
body.is-paused .tsmp-dashpages.tsmp-dashpages .sidebar-nav li, body.is-paused .tsmp-dashpages.tsmp-dashpages .top-tabs {
opacity: .5;
}
.tsmp-dashpages.tsmp-dashpages .sc-paused-note {
display: none; margin: 0 0 16px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; line-height: 1.5; color: var(--ink);
}
body.is-paused .tsmp-dashpages.tsmp-dashpages .sc-paused-note {
display: block;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pz-card {
grid-template-columns: minmax(0, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .pz-pic {
height: 160px;
}
.tsmp-dashpages.tsmp-dashpages .pz-body {
padding: 24px 20px;
}

}
.tsmp-dashpages.tsmp-dashpages .pl-lbl {
display: none; width: 100%; text-align: center; font-size: 13px; font-weight: 600; color: var(--stone); background: var(--hallway); border-radius: 4px; padding: 12px 16px;
}
/* which label or button shows, by the seller's plan */
body.tier-seller .tsmp-dashpages.tsmp-dashpages .pl-card--seller .pl-lbl-cur, body.tier-plus .tsmp-dashpages.tsmp-dashpages .pl-card--plus .pl-lbl-cur, body.tier-pro .tsmp-dashpages.tsmp-dashpages .pl-card--pro .pl-lbl-cur {
display: block;
}
body.tier-plus .tsmp-dashpages.tsmp-dashpages .pl-card--seller .pl-lbl-inc, body.tier-pro .tsmp-dashpages.tsmp-dashpages .pl-card--seller .pl-lbl-inc, body.tier-pro .tsmp-dashpages.tsmp-dashpages .pl-card--plus .pl-lbl-inc {
display: block;
}
body.tier-plus .tsmp-dashpages.tsmp-dashpages .pl-card--plus .pl-btn, body.tier-pro .tsmp-dashpages.tsmp-dashpages .pl-card--plus .pl-btn, body.tier-pro .tsmp-dashpages.tsmp-dashpages .pl-card--pro .pl-btn {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .pl-list {
list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 1.4; color: #4A453F;
}
.tsmp-dashpages.tsmp-dashpages .pl-list li {
display: flex; gap: 9px; align-items: flex-start; min-height: 22px; flex-wrap: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pl-list li > span:not(.pl-m):not(.pl-a) {
flex: 0 1 auto; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .pl-list li > .pl-val {
flex: none;
}
.tsmp-dashpages.tsmp-dashpages .pl-yes .pl-ico {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .pl-no {
color: var(--stone); text-decoration: line-through; text-decoration-color: #C9C2BA;
}
.tsmp-dashpages.tsmp-dashpages .pl-no .pl-ico {
color: #B9B1A8;
}
.tsmp-dashpages.tsmp-dashpages .pl-ico {
flex: none; margin-top: 3px;
}
.tsmp-dashpages.tsmp-dashpages .pl-b {
font-weight: 600; color: var(--ink);
}
/* what a plan gives you is semi-bold: the same weight in the top section and in the Studio list */
.tsmp-dashpages.tsmp-dashpages .pl-sb {
font-weight: 600; color: var(--ink);
}
/* the Studio software items are semi-bold, so a full Pro column is not too heavy */
/* what the plan gives you is bold */
.tsmp-dashpages.tsmp-dashpages .pl-eyebrow {
display: block !important; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; color: #8F6F57; min-height: 0 !important;
}
/* normal case, so "TeacherStore" reads right */
.tsmp-dashpages.tsmp-dashpages .pl-list li.pl-spacer, .tsmp-dashpages.tsmp-dashpages .pl-list li.pl-note, .tsmp-dashpages.tsmp-dashpages .pl-list li.pl-memrow {
min-height: 44px;
}
/* the same height on all three, so the rows below line up */
.tsmp-dashpages.tsmp-dashpages .pl-list .pl-sub {
display: block; font-size: 13px; font-weight: 400; font-style: italic; color: var(--stone); line-height: 1.35; margin-top: 1px;
}
body.bill-annual .tsmp-dashpages.tsmp-dashpages .pl-list li:nth-child(5) {
min-height: 58px;
}
/* room for the note under Pro's yearly credits, the same on all three so the rows below line up */
.tsmp-dashpages.tsmp-dashpages .pl-list li.pl-note {
font-size: 13.5px; font-style: italic; color: var(--stone); line-height: 1.4; display: block;
}
/* soft and lowercase */
.tsmp-dashpages.tsmp-dashpages .pl-val {
font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--mascot-light); border-radius: 3px; padding: 2px 7px; margin-left: 2px; white-space: nowrap; align-self: flex-start; margin-top: 1px;
}
.tsmp-dashpages.tsmp-dashpages .pl-list .pl-val .pl-a {
display: none;
}
body.bill-annual .tsmp-dashpages.tsmp-dashpages .pl-list .pl-val .pl-a {
display: inline;
}
body.bill-annual .tsmp-dashpages.tsmp-dashpages .pl-list .pl-val .pl-m {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .pl-grid:not(.pl-all) .pl-more {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .pl-more-t {
text-align: center; margin: 14px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .pl-more-t button {
background: none; border: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (max-width: 1280px) {
.tsmp-dashpages.tsmp-dashpages .pl-grid {
grid-template-columns: 1fr;
}

}
/* the three cards share their rows (name, headline, who it is for, price, button, list), so everything lines up across them whatever the text length */
@media (min-width: 1281px) {
.tsmp-dashpages.tsmp-dashpages .pl-grid {
grid-template-rows: repeat(9, auto);
}
.tsmp-dashpages.tsmp-dashpages .pl-card {
display: grid; grid-template-rows: subgrid; grid-row: span 9; row-gap: 0; align-content: start;
}

}
/* narrower, with more air around the cards */
.tsmp-dashpages.tsmp-dashpages .pl-grid {
gap: 18px;
}
.tsmp-dashpages.tsmp-dashpages .pl-list .pl-learn {
margin: 10px 0 0; font-size: 13.5px; list-style: none;
}
.tsmp-dashpages.tsmp-dashpages .pl-learn a {
color: var(--stone); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .pl-learn a:hover {
color: var(--ink);
}
/* the email checkout: a wide picture across the top (full bleed, rounded corners), then billing only */
.tsmp-dashpages.tsmp-dashpages #planOv .bi-modal {
display: block; max-width: 620px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img {
min-height: 0; height: 215px;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-x {
z-index: 5; background: rgba(255,255,255,.92); border-radius: 50%; width: 32px; height: 32px; line-height: 1;
}
/* the close X stays visible over the photo */
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img {
display: block;
}

}
/* keep the photo on tablets and phones (the other windows hide theirs) */
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img {
height: 150px;
}

}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img img {
object-position: 50% 92%;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-img img.bump-img {
display: none; object-position: 50% 42%;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-modal.is-bump .bi-img img.bump-img {
display: block;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-modal.is-bump .bi-img img:not(.bump-img) {
display: none;
}
/* the credits offer after checkout has its own photo */
/* laptop, AirPods and the tumbler: the same photo on checkout and on the credits offer */
/* Seller Plus is Seller blue: the top edge (a bar that follows the rounded corners, over the photo), the button, the accents */
.tsmp-dashpages.tsmp-dashpages #planOv .bi-modal {
border-top: 5px solid #728D9C; border-radius: 14px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-btn--main {
background: #728D9C; border-color: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-btn--main:hover {
background: var(--cream); border-color: #728D9C; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-btn {
border-color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-btn:not(.hub-btn--main):hover {
background: #728D9C; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages #planOv .hub-eyebrow {
color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages #planOv .lw-em {
color: #5E7886;
}
.tsmp-dashpages.tsmp-dashpages #planOv .bi-body {
padding: 26px 30px 26px;
}
.tsmp-dashpages.tsmp-dashpages #planTitle {
margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pl-wait {
max-width: 640px; padding: 14px 14px 10px; border-top: 4px solid var(--gold, #C9A96E);
}
/* the form brings its own heading and picture */
.tsmp-dashpages.tsmp-dashpages .pl-wait h2 {
margin: 0 0 12px; font-size: 24px; letter-spacing: -0.02em;
}
.tsmp-dashpages.tsmp-dashpages .pl-wait-frame {
width: 100%; height: min(720px, 78vh); border: 0; border-radius: 4px; background: #fff;
}
.tsmp-dashpages.tsmp-dashpages .pl-foot {
margin: 20px 0 0; font-size: 14px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pl-foot a {
color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 1280px) {
.tsmp-dashpages.tsmp-dashpages .pl-grid {
grid-template-columns: 1fr;
}

}
/* a picture across the top of each plan card (full width, flush with the card's top edge) */
.tsmp-dashpages.tsmp-dashpages .pl-card {
overflow: hidden;
}
@media (max-width: 1280px) {
.tsmp-dashpages.tsmp-dashpages .pl-card .pl-pic {
aspect-ratio: auto; height: 220px;
}

}
/* stacked cards: a shorter picture strip */
.tsmp-dashpages.tsmp-dashpages .pl-pic {
display: block; width: calc(100% + 40px); max-width: none; height: auto; align-self: start; margin: -22px -20px 18px; aspect-ratio: 16 / 9; object-fit: cover;
}
/* the Monthly / Annual switch: the chosen side is Mascot, and "2 months free" is a little tag so Annual stands out */
.tsmp-dashpages.tsmp-dashpages .pl-bill {
border-color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .pl-bill button.is-on {
background: var(--mascot); color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .pl-bill button {
transition: background-color .15s ease, color .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .pl-bill button:not(.is-on):hover {
background: #F5E8E2; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pl-bill button[data-bill="annual"] em {
background: #F5E8E2; color: #8C5A3C; border-radius: 4px; padding: 2px 7px; margin-left: 6px; font-weight: 700; opacity: 1; font-size: 11.5px;
}
.tsmp-dashpages.tsmp-dashpages .pl-bill button[data-bill="annual"].is-on em {
background: #fff; color: #8C5A3C;
}
/* easy to read on the Mascot button */
/* the annual savings ("2 months free" and "You save $98 a year") are bolder, so the saving is the first thing you see */
.tsmp-dashpages.tsmp-dashpages .pl-price .pl-a i {
font-size: 13px; font-weight: 800; letter-spacing: .01em; color: #fff; background: var(--sage-dark, #5F7A6C); border-radius: 4px; padding: 3px 9px; margin-left: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pl-price .pl-a > span {
margin-top: 6px; font-size: 16px; font-weight: 800; color: var(--sage-dark, #5F7A6C);
}
/* Seller Support overview: a bigger page headline, and a bold black headline in the box that says where to ask */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="support-dash"] .ts-sec-title .ts-sec-t {
font-size: 38px;
}
.tsmp-dashpages.tsmp-dashpages .sup-how-h {
margin: 0 0 12px; font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="support-dash"] .ts-sec-title .ts-sec-t {
font-size: 30px;
}
.tsmp-dashpages.tsmp-dashpages .sup-how-h {
font-size: 24px;
}

}
.tsmp-dashpages.tsmp-dashpages .sec-headline {
margin: 28px 0 14px; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .add-prod-price span a {
color: var(--mascot); font-weight: 700; text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .add-prod-price span a:hover {
color: #9C6E54;
}
.tsmp-dashpages.tsmp-dashpages .tsd-chips {
position: absolute; top: 14px; left: 22px; margin: 0; padding: 0;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="studio-dash"] .tsd-card h3 {
padding-right: 0;
}
.tsmp-dashpages.tsmp-dashpages .tsd-chips {
display: inline-flex; gap: 6px; margin-left: auto; padding-left: 10px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-chip {
font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; border-radius: 3px; padding: 2px 5px; white-space: nowrap; line-height: 1.4;
}
.tsmp-dashpages.tsmp-dashpages .tsd-chip--pro {
background: var(--gold, #C9A96E);
}
.tsmp-dashpages.tsmp-dashpages .tsd-chip--plus {
background: #728D9C;
}
/* STUDIO lightbox: what each tool needs, and the way to add it */
.tsmp-dashpages.tsmp-dashpages .sxov {
position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(28,26,24,.55);
}
.tsmp-dashpages.tsmp-dashpages .sxov.is-open {
display: flex;
}
.tsmp-dashpages.tsmp-dashpages .sxov-card {
position: relative; width: 100%; max-width: 600px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--white); border-radius: 12px; border-top: 3px solid var(--ink); padding: 28px 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.tsmp-dashpages.tsmp-dashpages .sxov-x {
position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--stone); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .sxov-x:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sxov-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mascot); margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .sxov-card h2 {
margin: 0 0 6px; font-size: 22px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sxov-sub {
margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sxov-row {
display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .sxov-row.is-focus {
background: #FAF7F2; margin: 0 -12px; padding: 14px 12px; border-radius: 6px; border-top-color: transparent;
}
.tsmp-dashpages.tsmp-dashpages .sxov-email-mode, .tsmp-dashpages.tsmp-dashpages .sxov-list-mode, .tsmp-dashpages.tsmp-dashpages .sxov-setup-mode {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .sxov.is-email .sxov-email-mode, .tsmp-dashpages.tsmp-dashpages .sxov.is-setup .sxov-setup-mode, .tsmp-dashpages.tsmp-dashpages .sxov:not(.is-email):not(.is-setup) .sxov-list-mode {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .sxov-note {
margin: 0; padding: 14px 56px 14px 28px; background: #FAF7F2; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sxov-setup-mode .sxov-note {
margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px;
}
.tsmp-dashpages.tsmp-dashpages .sxov.is-email .sxov-card {
max-width: 880px; padding: 0; border-top: 0; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .sxov.is-email .sxov-eyebrow {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .sxov.is-email .sxov-x {
z-index: 5; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 22px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sxov-eb .eb-card {
border: 0; border-radius: 0; border-top: 4px solid #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .eb-clone-btn {
background: #728D9C; border-color: #728D9C; color: #fff; min-width: 210px; padding: 15px 30px;
}
.tsmp-dashpages.tsmp-dashpages .eb-clone-btn:hover {
background: var(--cream); border-color: #728D9C; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sxov-pro-line {
display: block; padding: 14px 36px; border-top: 1px solid var(--border); background: #FAF7F2; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sxov-pro-btn {
display: inline; padding: 0; margin-left: 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: #7A6021; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .sxov-pro-btn:hover {
color: #bc886d;
}
@media (max-width: 800px) {
.tsmp-dashpages.tsmp-dashpages .sxov-pro-line {
padding: 14px 20px;
}
.tsmp-dashpages.tsmp-dashpages .eb-clone-btn {
width: 100%; min-width: 0;
}

}
.tsmp-dashpages.tsmp-dashpages .sxov-row--group {
align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .sxov-items {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .sxov-item {
display: flex; align-items: flex-start; gap: 14px;
}
.tsmp-dashpages.tsmp-dashpages .sxov-item .sxov-ico {
margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .sxov-ico {
flex: none; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .sxov-txt {
flex: 1; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .sxov-name {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 700; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sxov-desc {
margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .sxov-act {
flex: none;
}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .sxov-row {
flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .sxov-act {
width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .sxov-act .btn {
width: 100%; justify-content: center;
}

}
.tsmp-dashpages.tsmp-dashpages .tsd-tag {
margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); display: none;
}
body.tier-seller .tsmp-dashpages.tsmp-dashpages .tsd-tag--plus, body:not(.tier-pro) .tsmp-dashpages.tsmp-dashpages .tsd-tag--pro {
display: inline;
}
.tsmp-dashpages.tsmp-dashpages .tab-lock {
display: none; margin-left: 5px; vertical-align: -1px; color: var(--stone);
}
body.tier-seller .tsmp-dashpages.tsmp-dashpages .xs-tabs [data-needs="plus"] .tab-lock, body:not(.tier-pro) .tsmp-dashpages.tsmp-dashpages .xs-tabs [data-needs="pro"] .tab-lock {
display: inline-block;
}
.tsmp-dashpages.tsmp-dashpages .sx-card {
max-width: 720px; padding: 24px 28px 28px; border: 1px solid #E9E7E5; border-top: 4px solid var(--mascot); border-radius: 12px; background: var(--card-fill);
}
.tsmp-dashpages.tsmp-dashpages .sx-card h2 {
display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 20px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sx-card .tsd-ico {
color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .sx-desc {
margin: 0 0 14px; font-size: 15px; color: var(--ink); line-height: 1.55;
}
.tsmp-dashpages.tsmp-dashpages .sx-list {
margin: 0 0 22px; padding-left: 20px; font-size: 14.5px; line-height: 1.7; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .sx-locked {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .sx-lock-note {
margin: 0 0 12px; font-size: 14px; color: var(--stone);
}
body:not(.tier-pro) .tsmp-dashpages.tsmp-dashpages .sx-need-pro .sx-open, body.tier-seller .tsmp-dashpages.tsmp-dashpages .sx-need-plus .sx-open {
display: none;
}
body:not(.tier-pro) .tsmp-dashpages.tsmp-dashpages .sx-need-pro .sx-locked, body.tier-seller .tsmp-dashpages.tsmp-dashpages .sx-need-plus .sx-locked {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .tsd-head {
margin: 4px 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .tsd-grid + .tsd-head {
margin-top: 28px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-grid.tsd-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tsmp-dashpages.tsmp-dashpages .tsd-grid.tsd-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tsmp-dashpages.tsmp-dashpages .tsd-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card {
display: flex; flex-direction: column; align-items: flex-start; padding: 20px 22px 22px; border: 1px solid #E9E7E5; border-top: 4px solid var(--mascot); border-radius: 12px; background: var(--card-fill);
}
.tsmp-dashpages.tsmp-dashpages .tsd-card h3 {
display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 18px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .tsd-ico {
flex: none; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .tsd-grid {
align-items: stretch;
}
.tsmp-dashpages.tsmp-dashpages .tsd-card, .tsmp-dashpages.tsmp-dashpages .sx-card {
background: var(--white);
}
/* white cards on the cream page */
.tsmp-dashpages.tsmp-dashpages .xs-dash-pg .xs-tile, .tsmp-dashpages.tsmp-dashpages .xs-dash-pg .hub-bal {
background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .xs-page .ti-trust {
background: var(--white);
}
/* the Bulk Import reassurance box is white on the cream page */
/* the X-Sellerator tiles and the credits box are white on the cream page too */
.tsmp-dashpages.tsmp-dashpages .tsd-card .btn {
margin-top: auto;
}
/* the Open buttons line up along the bottom of every row, whether the sentence above is one line or two */
.tsmp-dashpages.tsmp-dashpages .tsd-card p {
margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink);
}
@media (max-width: 1000px) {
.tsmp-dashpages.tsmp-dashpages .tsd-grid.tsd-grid--3, .tsmp-dashpages.tsmp-dashpages .tsd-grid.tsd-grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .tsd-grid, .tsmp-dashpages.tsmp-dashpages .tsd-grid.tsd-grid--3, .tsmp-dashpages.tsmp-dashpages .tsd-grid.tsd-grid--4 {
grid-template-columns: 1fr;
}

}
.tsmp-dashpages.tsmp-dashpages .xs-hero {
position: relative; height: 280px; margin-bottom: 18px; border-radius: 16px; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start; text-align: left; background: #E8DDD2;
}
/* same desk photo and crop on all four tabs; styled like the welcome page hero */
.tsmp-dashpages.tsmp-dashpages .xs-hero img {
position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero::after {
content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.22) 0%, rgba(0,0,0,.52) 100%);
}
/* just a tint, a little deeper at the bottom where the words sit */
.tsmp-dashpages.tsmp-dashpages .xs-hero-text {
position: relative; z-index: 1; max-width: 860px; padding: 0 40px 32px; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero .xs-h1 .nav-pro {
display: inline-block; margin-left: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; color: #1C1A18; font-size: 12px !important; font-weight: 700; letter-spacing: .04em; line-height: 1; vertical-align: 16px;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero-eyebrow {
font-size: 13px; font-weight: 600; letter-spacing: -0.015em; color: rgba(255,255,255,.9); margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero-eyebrow sup {
font-size: .6em; vertical-align: super; line-height: 0;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero .xs-h1 {
display: block; font-size: 60px; font-weight: 900; line-height: 1; letter-spacing: -0.035em; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .xs-h1 .nw {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero-sub {
margin: 14px 0 0; max-width: 800px; font-size: 16px; font-weight: 500; line-height: 1.5; color: #fff;
}
.tsmp-dashpages.tsmp-dashpages .xs-card-body {
padding: 4px 0 24px;
}
.tsmp-dashpages.tsmp-dashpages .xs-card-body .xs-h2:first-child {
margin-top: 12px;
}
.tsmp-dashpages.tsmp-dashpages .xs-accounts {
border: 1px solid var(--border); border-top: 4px solid var(--mascot); border-radius: 12px; padding: 8px 24px; margin-bottom: 0;
}
/* How It Works tab (moved from the X-Sellerator wizard) */
.tsmp-dashpages.tsmp-dashpages .pathv2-scope {
--mascot-pale: #EEDFD8; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .xs-card-body--how {
padding: 8px 0 40px;
}
/* How It Works: text blocks share one reading width (720px); pictures, steps, prices and the side-by-side keep their wider frames */
.tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-bridge, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-guarantee-sub, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-plan-subhead, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-explainer, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-closer-sub, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-done-line {
margin-left: auto; margin-right: auto;
}
.tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-bridge, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-guarantee-sub, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-plan-subhead, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-explainer, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-closer-sub, .tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-done-line {
max-width: 720px !important;
}
.tsmp-dashpages.tsmp-dashpages .xs-card-body--how .pathv2-quickstart .pathv2-bridge {
max-width: 720px !important;
}
.tsmp-dashpages.tsmp-dashpages .tm-mark {
font-size: 0.55em; vertical-align: super;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hero {
text-align: center; max-width: 900px; margin: 8px auto 32px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hero-eyebrow {
font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 4px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hook-bubbles {
display: flex; gap: 20px; justify-content: center; align-items: flex-start; max-width: 820px; margin: 24px auto 32px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble {
position: relative; padding: 26px 28px; width: 300px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble--mascot {
background: var(--fri-yay-light); border-radius: 4px 32px 32px 32px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble--cream {
background: var(--cream); border-radius: 32px 32px 4px 32px; margin-top: 48px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble-label {
display: flex; align-items: stretch; gap: 14px; margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble-label--reverse {
justify-content: flex-end;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble-bar {
width: 2px; background: var(--ink); border-radius: 2px; align-self: stretch;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble-label span:not(.pathv2-bubble-bar) {
font-weight: 700; font-size: 19px; color: var(--ink); line-height: 1.35;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble-label--reverse {
text-align: right;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble-punch {
display: block; font-family: var(--ff-display); font-weight: 500; font-size: 54px; color: var(--ink); line-height: 1; text-align: right;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hero-headline {
font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: 52px; color: var(--ink); line-height: 1.15; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hero-headline--sm {
font-size: 30px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart {
text-align: center; margin: 0 auto 32px; max-width: 720px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-eyebrow-sm {
font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-title {
font-family: var(--ff-display); font-weight: 700; font-size: 42px; color: var(--ink); line-height: 1.15;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-headline {
font-family: var(--ff-display); font-style: normal; font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.5; margin-top: 16px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-bullets {
list-style: disc; text-align: left; max-width: 480px; margin-left: auto; margin-right: auto; padding-left: 20px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-bullets li {
margin-bottom: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-bullets li:last-child {
margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-intro {
text-align: center; font-size: 16px; color: var(--ink); margin: 16px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-checklist {
list-style: none; max-width: 680px; margin: 24px auto 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-checklist li {
display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--ink); line-height: 1.4;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-checklist li svg {
flex-shrink: 0; margin-top: 3px; color: var(--sage-dark);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-btn-row {
margin: 24px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-row--split {
display: flex; align-items: stretch; justify-content: center; gap: 16px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-col {
display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-col-features {
font-size: 11px; margin-top: 16px; padding: 0 40px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-col-features .path-feature {
font-size: 11px; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-col-features .path-feature-icon svg {
width: 12px; height: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-choose-path-eyebrow {
text-align: center; margin-top: 24px; margin-bottom: 4px; font-size: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-col-note {
font-size: 11px; font-weight: 600; color: var(--ink); margin-top: 20px; line-height: 1.4; padding: 0 40px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-row.pathv2-btn-row--split .btn {
text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; padding: 10px 12px; flex: 1 1 0; min-width: 0; white-space: normal; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-col > .btn {
flex: 0 0 auto; width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-manual {
background: var(--white); color: var(--ink); border: 1px solid var(--ink); flex: 0 0 auto; border-radius: 4px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-manual:hover, .tsmp-dashpages.tsmp-dashpages #pathV2StandardBtn:hover {
background: #F2F1EF; border-color: var(--ink); color: var(--ink); box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-manual, .tsmp-dashpages.tsmp-dashpages .pathv2-btn-xsell, .tsmp-dashpages.tsmp-dashpages #pathV2StandardBtn {
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-xsell {
background: var(--mascot); color: var(--white); flex: 0 0 auto; border-radius: 4px; border: 1px solid var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-manual .pathv2-btn-stacked-eyebrow, .tsmp-dashpages.tsmp-dashpages .pathv2-btn-xsell .pathv2-btn-stacked-eyebrow {
opacity: 1; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-xsell:hover {
background: #FAF7F2; border-color: var(--mascot); color: var(--ink); box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-top-path {
margin-top: 30px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-top-path .pathv2-choose-path-eyebrow {
margin-top: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-top-path .pathv2-btn-row {
margin: 10px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-top-path + .pathv2-mini-label {
margin-top: 88px; margin-bottom: 34px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-stacked {
flex-direction: column; gap: 4px; line-height: 1.3;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-stacked-eyebrow {
font-size: 10px; letter-spacing: 0.06em; opacity: 0.7;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-stacked-label {
font-size: 13px; letter-spacing: 0.03em; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-stacked-click {
font-family: var(--ff-display); font-weight: 400; font-style: italic; text-decoration: underline; font-size: 13px; letter-spacing: normal; text-transform: none;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hero-pitch {
font-family: var(--ff-display); font-style: normal; font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.4; margin-top: 6px; padding: 0 40px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-gauge {
text-align: center; margin: 8px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-what-is {
text-align: center; max-width: 640px; margin: 12px auto 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-what-is-eyebrow {
font-weight: 700; font-size: 19px; color: var(--mascot); margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-row {
text-align: center; margin: 32px 0 56px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-row .btn {
padding: 14px 28px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-row .plan-start-manual-link {
margin-top: 14px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section {
margin-top: 40px; margin-bottom: 56px;
}

/* ---- "What's the Difference?" side-by-side cards (her section CC, #209) ----
 *
 * These are the base card rules, and they were missing here. The whole block
 * is authored once in tsmp-manual.css under .tsmp-manual, but our dashboard
 * and X-Sellerator wrappers are `tsmp-app tsmp-tool tsmp-dashpages` and never
 * carry .tsmp-manual — and tsmp-manual.css is only enqueued on the Dokan
 * manual product page. So when How It Works moved into the dashboard tab the
 * markup came along and the styling did not: no grid, so the two cards
 * stacked, and no list-style reset, so the feature lists showed plain bullets.
 * She hit exactly the same thing in the prototype and copied the rules back.
 *
 * Only the base lives here. The .pathv2-diff-section overrides below this
 * block are deliberate and still win, because they come later.
 */
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-choice-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card {
position: relative; display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 24px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card--featured {
border: 2px solid var(--mascot); box-shadow: var(--shadow-lg);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-ribbon {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--mascot); color: var(--white); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 14px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-eyebrow {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-title {
font-family: var(--ff-display); font-size: 26px; font-weight: 500; color: var(--ink); margin-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-title--nowrap {
font-size: 24px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .tm-mark {
font-size: 0.55em; vertical-align: super;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-subtitle {
font-size: 12px; font-weight: 600; color: var(--mascot); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-price {
font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 14px;
}
/* The overrides below set this one's color and min-height but not its type,
   so the base still has to be here. */
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-desc {
font-size: 13px; color: var(--stone); line-height: 1.55; margin-top: 8px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-desc .info-dot {
margin-left: 2px; vertical-align: -2px;
}
/* What makes the two buttons line up at the same height no matter how long
   the checklists are. The override below only adds a min-height. */
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-footer {
margin-top: auto;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature-list {
list-style: none; margin: 24px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature {
display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature-icon {
flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature--included {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature--included .path-feature-icon {
color: var(--sage-dark);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature--excluded {
color: var(--dust); text-decoration: line-through; text-decoration-color: var(--dust);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature--excluded .path-feature-icon {
color: var(--dust);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature-note {
display: block; font-size: 11px; text-decoration: none; color: var(--stone); margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature-note a {
color: var(--fri-yay); font-weight: 600; text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-reassurance {
font-size: 11px; color: var(--stone); text-align: center; margin-top: 10px; font-style: italic;
}
/* Her rule: the two cards stack on a phone. */
@media (max-width: 760px) {
	.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-choice-grid {
	grid-template-columns: 1fr;
	}
}

.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .how-it-works-title {
font-size: 42px; margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .pathv2-explainer {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .how-it-works-title em {
font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-desc {
color: var(--ink); min-height: 104px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-footer .btn {
min-height: 46px; box-sizing: border-box;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-footer {
min-height: 92px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-explainer {
font-size: 14px; color: var(--stone); line-height: 1.65; max-width: 620px; margin: 0 auto 36px; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guide {
background: var(--ivory); border-radius: var(--radius-card); padding: 48px 40px; margin-bottom: 56px; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guide-eyebrow {
font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mascot); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guide-headline {
font-family: var(--ff-display); font-size: 30px; font-weight: 500; color: var(--ink); margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guide-body {
font-size: 15px; color: var(--ink); line-height: 1.7; max-width: 640px; margin: 0 auto 24px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guide-marks {
display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guide-marks span {
display: flex; align-items: center; gap: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guide-marks svg {
color: var(--sage-dark); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-demo-video {
max-width: 680px; margin: 0 auto 56px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-section {
display: flex; flex-direction: column; gap: 48px; margin: 104px 0 56px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-row {
display: flex; align-items: center; gap: 48px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-row--reverse {
flex-direction: row-reverse;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-image {
flex: 1; aspect-ratio: 4/5; border-radius: var(--radius-card); background: linear-gradient(150deg, var(--ink), var(--mascot));
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-image--alt {
background: linear-gradient(150deg, var(--sage), var(--mascot-light));
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-text {
flex: 1;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-eyebrow {
display: block; font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mascot); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-text p {
font-size: 15px; color: var(--ink); line-height: 1.7;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee {
background: var(--mascot); color: var(--white); border-radius: var(--radius-card); padding: 48px 32px; text-align: center; margin-top: 40px; margin-bottom: 56px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-icon {
display: block; width: 48px; height: 48px; margin: 0 auto 16px; filter: brightness(0) invert(1);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-eyebrow {
display: block; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-headline {
font-family: var(--ff-display); font-size: 34px; font-weight: 500; line-height: 1.15; margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-sub {
font-size: 15px; line-height: 1.65; max-width: 560px; margin: 0 auto 16px; opacity: 0.95;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-sub:last-child {
margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee--wide .pathv2-guarantee-sub {
max-width: 680px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-list {
list-style: none; margin: 14px auto; padding: 0; display: inline-block; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-list li {
font-size: 15px; line-height: 1.8; opacity: 0.95;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-list li::before {
content: "— ";
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee--blue {
background: #738D9B;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-closer {
background: var(--cream); border-radius: var(--radius-card); padding: 56px 32px; text-align: center; margin-top: 16px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-closer-headline {
font-family: var(--ff-display); font-weight: 700; font-size: 48px; color: var(--ink); line-height: 1.15; margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-closer .pathv2-btn-xsell:hover {
background: var(--fri-yay-light); border-color: var(--mascot); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-top-path--v3 {
text-align: center; margin: 8px auto 28px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-top-path--v3 .pathv2-btn-row {
margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v3-risk {
font-size: 14px; color: var(--stone); margin: 14px auto 6px; max-width: 520px; line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v3-risk strong {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v3-manual {
font-size: 13px; color: var(--stone); text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v3-manual:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-quickstart-title:not(.pathv2-quickstart-kicker) {
font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -0.035em; line-height: 1.12; margin-top: 28px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-bridge {
font-size: 18px; color: var(--stone); margin-top: 28px; max-width: 640px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-bridge strong {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-top-path--v3 {
margin: 40px auto 56px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-top-path--v3 .pathv2-btn-xsell {
min-width: 0; width: auto; padding: 14px 34px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-top-path--v3 .pathv2-btn-stacked-label {
font-size: 12.5px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v3-risk {
margin: 22px auto 0; font-size: 13.5px; max-width: 680px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v3-price {
display: block; margin-top: 2px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v3-manual {
display: inline-block; margin-top: 22px; font-size: 12.5px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hook-bubbles--compact {
gap: 16px; margin: 0 auto 12px; max-width: 720px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hook-bubbles--compact .pathv2-bubble {
width: 344px; padding: 20px 26px 16px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hook-bubbles--compact .pathv2-bubble--cream {
margin-top: 36px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hook-bubbles--compact .pathv2-bubble-label {
margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hook-bubbles--compact .pathv2-bubble-label span:not(.pathv2-bubble-bar) {
font-size: 18px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hook-bubbles--compact .pathv2-bubble-punch {
font-size: 44px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v4-eyebrow {
font-size: 13px; letter-spacing: 0.1em; margin: 30px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v4-eyebrow + .pathv2-quickstart-title:not(.pathv2-quickstart-kicker) {
margin-top: 12px !important;
}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-v4-eyebrow {
font-size: 11px; letter-spacing: 0.08em;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-v4-eyebrow .tm-mark {
white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-done-line {
white-space: normal;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-demo-video {
margin: 24px auto 72px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-demo-title {
font-size: 40px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee--wide:not(.pathv2-guarantee--blue) {
background: var(--mascot-pale); color: rgba(28, 26, 24, 0.74);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee--wide:not(.pathv2-guarantee--blue) .pathv2-guarantee-headline, .tsmp-dashpages.tsmp-dashpages .pathv2-guarantee--wide:not(.pathv2-guarantee--blue) .pathv2-guarantee-closer {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee--wide:not(.pathv2-guarantee--blue) .pathv2-guarantee-icon {
filter: brightness(0) invert(58%) sepia(22%) saturate(560%) hue-rotate(345deg) brightness(92%);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee--wide:not(.pathv2-guarantee--blue) .pathv2-guarantee-eyebrow {
opacity: 1; color: rgba(28, 26, 24, 0.6);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee--wide:not(.pathv2-guarantee--blue) .pathv2-guarantee-sub {
opacity: 1;
}
@media (max-width: 700px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-closer {
padding-left: 16px; padding-right: 16px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-xsell, .tsmp-dashpages.tsmp-dashpages .pathv2-closer .btn {
white-space: normal; max-width: 100%;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-btn-stacked-label {
white-space: normal;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-quickstart-title .pathv2-payoff {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-quickstart-title .pathv2-payoff em {
color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-closer .pathv2-bubble--cream {
background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-closer-headline em {
font-style: italic; font-weight: 400;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-closer-sub {
font-family: var(--ff-display); font-style: normal; font-weight: 400; font-size: 20px; color: var(--ink); max-width: 560px; margin: 0 auto; line-height: 1.5;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-closer .pathv2-btn-row {
margin-top: 32px; margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan {
background: var(--cream); border-top: none; margin-top: 96px; margin-bottom: 56px; padding: 48px 20px; border-radius: var(--radius-card);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan-subhead {
text-align: center; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.6; max-width: 640px; margin: 0 auto 40px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-steps-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 auto 40px; max-width: 820px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-steps-grid .pathv2-bubble {
width: 100%; box-sizing: border-box; margin-top: 0; padding: 28px 32px; display: flex; flex-direction: column;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble-footer {
margin-top: auto; padding-top: 16px; min-height: 94px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-steps-grid .pathv2-bubble-punch {
font-size: 42px; text-align: left; display: flex; align-items: center; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble-punch-icon {
flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-steps-grid .pathv2-bubble-label span:not(.pathv2-bubble-bar) {
font-size: 15px; font-weight: 500;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-steps-grid .how-step-pricing-link {
margin-top: 14px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-bubble-eyebrow {
font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-step--upload {
background: var(--fri-yay-light); border-radius: 4px 32px 32px 32px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-step--chat {
background: var(--fri-yay-light); border-radius: 32px 4px 32px 32px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-step--approve {
background: var(--fri-yay-light); border-radius: 32px 32px 32px 4px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-step--publish {
background: var(--fri-yay-light); border-radius: 32px 32px 4px 32px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-it-works-title {
font-size: 42px; font-weight: 400; font-style: italic; margin-bottom: 16px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-hero-answer {
font-family: var(--ff-body); font-size: 17px; font-weight: 400; color: var(--ink); line-height: 1.6; max-width: 620px; margin: 16px auto 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-gauge-title {
margin: 24px 0 8px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-it-works-title em {
font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-demo-title {
font-family: var(--ff-display); font-size: 58px; font-weight: 400; color: var(--ink); text-align: center; margin-bottom: 24px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-it-works-grid {
align-items: stretch; gap: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-step {
padding: 0 20px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-step + .how-step {
border-left: 1px solid var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-step-eyebrow {
font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mascot); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-step-icon {
color: var(--mascot); margin: 0 0 12px; display: flex; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap {
max-width: 720px; margin: 96px auto 0; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-eyebrow {
font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-headline {
font-family: var(--ff-display); font-style: normal; font-weight: 500; font-size: 32px; color: var(--ink); line-height: 1.2; margin: 0 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-intro {
font-size: 16px; font-weight: 400; color: var(--ink); margin-bottom: 20px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-grid {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 0 32px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-grid-img {
width: 460px; max-width: 100%; height: auto; display: block; flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-soon {
text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-soon-label {
font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mascot); margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-soon-list {
list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-soon-list li {
display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-soon-list .ci-dot {
width: 5px; height: 5px; border-radius: 50%; background: var(--mascot); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-pricing {
max-width: 1040px; margin: 56px auto 0; text-align: center; padding: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-pricing-headline {
font-family: var(--ff-display); font-style: italic; font-weight: 400; font-size: 40px; color: var(--ink); line-height: 1.2; margin: 0 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-pricing-subtitle {
font-family: var(--ff-display); font-style: normal; font-weight: 400; font-size: 24px; color: var(--ink); line-height: 1.3; margin: 0 0 20px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-pricing-sub {
font-size: 16px; color: var(--ink); max-width: 640px; margin: 0 auto 40px; line-height: 1.6;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-pricing-cards {
display: flex; justify-content: center; align-items: stretch; gap: 12px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .pricing-card {
width: 158px; background: var(--white); border-radius: var(--radius-card); border-top: 4px solid var(--ink); box-shadow: 0 1px 3px rgba(28,26,24,0.08); padding: 24px 10px 20px; position: relative;
}
.tsmp-dashpages.tsmp-dashpages .pricing-card-credits {
font-family: var(--ff-body); font-weight: 800; font-size: 42px; color: var(--ink); line-height: 1;
}
.tsmp-dashpages.tsmp-dashpages .pricing-card-label {
font-family: var(--ff-body); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--ink); margin-top: 6px;
}
.tsmp-dashpages.tsmp-dashpages .pricing-card-price {
font-family: var(--ff-body); font-weight: 800; font-size: 25px; color: var(--mascot); margin-top: 14px;
}
.tsmp-dashpages.tsmp-dashpages .pricing-card-meta {
font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: -0.2px; color: var(--mascot); margin-top: 6px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pricing-card--recommended {
border-top-color: var(--mascot); box-shadow: 0 4px 16px rgba(180,137,112,0.25);
}
.tsmp-dashpages.tsmp-dashpages .pricing-card-badge {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--mascot); color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-closing-eyebrow {
text-align: center; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin: 48px 0 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-closing-tease {
text-align: center; font-family: var(--ff-display); font-style: italic; font-weight: 400; font-size: 30px; color: var(--ink); margin: 0 0 28px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-step-title {
font-size: 19px; margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-step-desc {
font-size: 15px; color: var(--ink); line-height: 1.6;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-plan .how-step-list li {
font-size: 13px;
}
.tsmp-dashpages.tsmp-dashpages .plan-start-manual-link {
display: block; text-align: center; margin-top: 14px; font-size: 12px; color: var(--stone); text-decoration: underline;
}
.tsmp-dashpages.tsmp-dashpages .plan-start-manual-link:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart {
max-width: 1000px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart > *:not(.pathv2-quickstart-title):not(.pathv2-quickstart-headline):not(.pathv2-quickstart-eyebrow-sm):not(.pathv2-canva-slot):not(.pathv2-mini):not(.pathv2-pricing) {
max-width: 720px; margin-left: auto; margin-right: auto;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-headline {
font-size: 20px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-headline.pathv2-quickstart-note {
font-size: 16px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-title.pathv2-quickstart-kicker {
margin-bottom: 14px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-choose-path-eyebrow {
margin-top: 44px;
}
@media (min-width: 1100px) and (max-width: 1439px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-title {
font-size: 37px;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-title:not(.pathv2-quickstart-kicker) {
font-family: var(--ff-body); font-weight: 600; font-size: 34px; letter-spacing: -0.03em; line-height: 1.22;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-title .pathv2-payoff em {
font-style: italic;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-title:not(.pathv2-quickstart-kicker) .pathv2-payoff {
display: block; text-wrap: balance;
}
@media (min-width: 1100px) and (max-width: 1439px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-title:not(.pathv2-quickstart-kicker) {
font-size: 32px;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-done-line {
font-family: var(--ff-body); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-align: center; margin: 22px 0 4px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-done-line em {
color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-done-line + .pathv2-top-path {
margin-top: 44px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-count-line {
font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink); text-align: center; margin: 12px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-count-line strong {
font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-headline.pathv2-quickstart-note {
font-family: var(--ff-body); font-size: 14px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-how {
max-width: 620px !important; margin: 22px auto 0; text-align: left; font-family: var(--ff-body);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-how-label {
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mascot); text-align: center; margin: 0 0 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-how-steps {
list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-how-steps li {
display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-how-n {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #F5E8E2; border: 1px dashed #D9A99A; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-how-steps strong {
font-weight: 600;
}
@media (max-width: 600px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-done-line {
white-space: normal; font-size: 18px;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-title {
text-wrap: balance;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart > .pathv2-mini {
max-width: 1000px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini {
list-style: none; margin: 0 auto; padding: 0; display: flex; align-items: stretch; justify-content: center; gap: 8px; font-family: var(--ff-body);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:not(.pathv2-mini-arrow) {
flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 20px 20px 22px; border: 1px solid var(--ink); border-radius: 12px; background: var(--fri-yay-pale);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-top {
display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-icon {
width: 30px; height: 30px; background: none; display: inline-flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-icon img {
width: 28px; height: 28px; object-fit: contain;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-n {
font-family: var(--ff-body); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini strong {
font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini li > span:not(.pathv2-mini-top) {
font-size: 14px; color: var(--ink); line-height: 1.45;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-pay {
margin-top: auto; padding-top: 10px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-pay::before {
content: ''; display: block; width: 100%; border-top: 1px dashed #D9A99A; margin-bottom: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-arrow {
align-self: center; color: var(--stone); font-size: 18px; flex: 0 0 auto;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-mini {
flex-wrap: wrap; gap: 10px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:not(.pathv2-mini-arrow) {
flex: 1 1 40%; padding: 16px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-arrow {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini strong {
font-size: 17px;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-label {
font-family: var(--ff-body); font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; text-transform: none; color: var(--ink); text-align: center; margin: 80px 0 26px;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-label {
font-size: 36px; margin-top: 56px;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-bridge {
font-family: var(--ff-body); font-size: 19px; line-height: 1.5; color: var(--ink); text-align: center; max-width: 720px !important; margin: 16px auto 0; text-wrap: balance;
}
@media (min-width: 761px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-bridge strong {
white-space: nowrap;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-bridge strong {
font-weight: 700; color: var(--ink); background: linear-gradient(transparent 55%, var(--mascot-pale) 55%); padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart-title .pathv2-payoff {
color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-headline .pathv2-payoff {
color: var(--fri-yay); white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-recap-headline {
text-wrap: balance;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; margin: 8px auto 28px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq > .pathv2-eq-side:first-child {
justify-self: end;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq > .pathv2-eq-side:last-child {
justify-self: start;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-side {
display: grid; grid-template-columns: auto auto; column-gap: 14px; align-items: center; text-align: left;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-thumb, .tsmp-dashpages.tsmp-dashpages .pathv2-eq-stack {
grid-row: 1 / 3; width: 60px; height: 60px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-thumb {
border-radius: 6px; background: url(../icons/feed-me-crayon-thumb.webp) center / cover; box-shadow: 0 2px 6px rgba(28,26,24,.14);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-stack {
position: relative;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-stack i {
position: absolute; width: 42px; height: 42px; border-radius: 5px; background: url(../icons/feed-me-crayon-thumb.webp) center / cover; box-shadow: 0 2px 6px rgba(28,26,24,.14); border: 2px solid var(--white);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-stack i:nth-child(2) {
left: 9px; top: 9px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-stack i:nth-child(3) {
left: 18px; top: 18px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-n {
font-family: var(--ff-body); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-n--78 {
color: var(--fri-yay); min-width: 2ch;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-label {
font-size: 13px; font-weight: 600; color: var(--stone); line-height: 1.2; margin-top: 4px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-arrow {
display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-arrow i {
display: block; width: 110px; height: 2px; background: var(--ink); position: relative;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-arrow i::after {
content: ''; position: absolute; right: -1px; top: -5px; border-left: 10px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart > .pathv2-canva-slot {
max-width: 1000px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-canva-slot {
display: block; width: 100%; max-width: 720px !important; height: auto; margin: 0 auto 32px;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-eq {
gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-side {
grid-template-columns: auto; justify-items: center; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-thumb, .tsmp-dashpages.tsmp-dashpages .pathv2-eq-stack {
grid-row: auto; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-n {
font-size: 46px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-arrow i {
width: 40px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-eq-arrow span {
display: none;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart > .pathv2-pricing {
max-width: 1000px; margin-top: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-pricing-subtitle {
font-family: var(--ff-body); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-pricing-sub {
font-size: 15px; margin-bottom: 28px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pricing-card {
border: 1px solid var(--ink); border-top-width: 4px; box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-closing-eyebrow {
margin: 40px 0 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart .pathv2-closing-eyebrow + .pathv2-choose-path-eyebrow {
margin-top: 28px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart > .pathv2-get {
max-width: 640px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-get {
list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: auto auto; justify-content: center; grid-template-rows: repeat(4, auto) auto; grid-auto-flow: column; gap: 12px 40px; text-align: left; font-size: 15px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-get li {
display: flex; align-items: flex-start; gap: 10px; line-height: 1.35;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-get li svg {
flex-shrink: 0; margin-top: 2px; color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-get b {
font-weight: 700;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-get-sub {
display: block; font-size: 12.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-get-total {
grid-column: 1 / -1; grid-row: 5; justify-content: center; border-top: 1px solid var(--ink); padding-top: 14px; margin-top: 4px; font-size: 18px; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-get-total b {
color: var(--fri-yay);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-get-soon {
margin: 12px auto 0; font-size: 12.5px; color: var(--stone); text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-ready-eyebrow {
font-size: 15px !important;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-get {
grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-get-total {
grid-row: auto;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-ready-row {
margin: 12px auto 0 !important; display: flex; flex-direction: column; align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-ready-row .pathv2-btn-xsell {
min-width: 360px; padding: 12px 28px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-ready-row .plan-start-manual-link {
display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-ready-row .plan-start-manual-link:hover {
color: var(--hover, #bc886d);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini {
counter-reset: mini; position: relative; display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 18px !important; padding-top: 58px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini::before {
content: ''; position: absolute; top: 21px; left: 12.5%; right: 12.5%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #F1DDD4, #E2AD9C 40%, #D58775 70%, var(--fri-yay));
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-arrow {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:not(.pathv2-mini-arrow) {
counter-increment: mini; position: relative; align-items: center !important; text-align: center !important; padding: 22px 16px 22px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:not(.pathv2-mini-arrow)::before {
content: counter(mini); position: absolute; top: -58px; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ff-body); font-size: 19px; font-weight: 700; color: var(--ink); background: var(--white); border: 2px solid var(--wiz-c); box-shadow: 0 0 0 5px var(--white);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:nth-child(1) {
--wiz-c: #E6C2B4; background: #FBF4F0 !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:nth-child(3) {
--wiz-c: #DCA08E; background: #F8EAE3 !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:nth-child(5) {
--wiz-c: #CF7E6B; background: #F4DDD2 !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:nth-child(7) {
--wiz-c: var(--fri-yay); background: #EFCFC1 !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:nth-child(7)::before {
background: var(--fri-yay); color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-top {
flex-direction: column; justify-content: center !important; gap: 8px; margin-bottom: 8px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-icon img {
width: 32px !important; height: 32px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-icon {
width: 34px !important; height: 34px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-n {
order: -1;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-pay {
align-self: stretch;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-mini {
grid-template-columns: 1fr 1fr; padding-top: 0 !important; row-gap: 46px !important; margin-top: 40px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini::before {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:not(.pathv2-mini-arrow)::before {
top: -26px; width: 40px; height: 40px; font-size: 16px;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini > li:not(.pathv2-mini-arrow) {
background: none !important; border: 0 !important; box-shadow: none !important; padding: 18px 10px 0 !important; gap: 6px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-n {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-top {
margin-bottom: 6px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-icon {
width: 48px !important; height: 48px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-icon img {
width: 46px !important; height: 46px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini strong {
font-size: 24px !important; letter-spacing: -0.02em;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini li > span:not(.pathv2-mini-top) {
font-size: 15px !important; max-width: 220px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-pay {
align-self: center !important; width: auto; white-space: nowrap; margin-top: 10px !important; padding: 5px 12px !important; background: var(--fri-yay-light); border: 1px dashed #D9A99A; border-radius: 4px; font-size: 12.5px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-pay::before {
display: none !important;
}
@media (max-width: 1400px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-mini-pay {
white-space: normal; text-wrap: balance; max-width: 100%;
}

}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-get {
grid-template-columns: auto;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-quickstart > .pathv2-trust {
max-width: 1000px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-trust {
list-style: none; margin: 32px auto 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 36px;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-trust li {
display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .pathv2-trust svg {
color: var(--fri-yay); flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-trust + .pathv2-ready-eyebrow {
margin-top: 40px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-demo-title {
font-family: var(--ff-body) !important; font-style: normal !important; font-weight: 700 !important; font-size: 46px !important; letter-spacing: -0.03em !important; line-height: 1 !important; color: var(--ink) !important;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-demo-title {
font-size: 36px !important;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-demo-video {
margin-top: 88px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-demo-title {
margin-bottom: 28px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-headline {
font-family: var(--ff-body) !important; font-weight: 700 !important; font-size: 34px !important; letter-spacing: -0.02em; line-height: 1.15 !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-guarantee-closer {
font-weight: 700; font-size: 17px !important; margin-top: 4px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .how-it-works-title {
font-family: var(--ff-body) !important; font-style: normal !important; font-weight: 700 !important; font-size: 46px !important; letter-spacing: -0.03em; line-height: 1;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .how-it-works-title em {
font-style: normal;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .how-it-works-title {
font-size: 36px !important;
}

}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-desc {
min-height: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-footer {
min-height: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-feature-list {
margin-top: 18px !important; margin-bottom: 22px !important; flex: 0 0 auto !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-footer {
margin-top: auto !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-image--waiting {
background: url(../icons/cost-of-waiting.jpg) center 55% / cover no-repeat;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-image--story {
background: url(../icons/story-worth-telling.jpg) center 60% / cover no-repeat;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-section {
gap: 72px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-row {
gap: 56px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-image {
flex: 0 0 40% !important; aspect-ratio: 1 / 1;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-eyebrow {
font-family: var(--ff-body); font-size: 30px !important; font-weight: 700; text-transform: none !important; letter-spacing: -0.02em !important; line-height: 1.15; color: var(--ink) !important; margin-bottom: 16px !important;
}
/* Her paragraph is plain body text — her sheet sets no weight on it, so it
   inherits 400 from body. The theme does set one on a paragraph inside the
   dashboard, and with nothing of ours to answer that, these two ran heavier
   than the rest of the page. Stating her value explicitly is the fix; the
   <strong> runs inside them keep their own bold. */
.tsmp-dashpages.tsmp-dashpages .pathv2-story-text p {
font-size: 16.5px !important; line-height: 1.7; font-weight: 400 !important;
}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .pathv2-story-row, .tsmp-dashpages.tsmp-dashpages .pathv2-story-row--reverse {
flex-direction: column !important; gap: 24px !important;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-image {
flex: 0 0 auto !important; width: 100%; aspect-ratio: 4 / 3;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-story-eyebrow {
font-size: 25px !important;
}

}
/* Both of her buttons in this section carry style="width: 100%", which is
   what squares the two card footers off against each other. It is a rule
   here rather than an inline style on each, and it has to beat the
   `flex: 0 0 auto` that .pathv2-btn-xsell sets for its OTHER homes — that
   declaration is why the featured button alone would otherwise shrink to
   its text while the ghost one beside it ran the full width. */
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .pathv2-diff-btn {
box-sizing: border-box; height: 48px; width: 100%; flex: 0 0 auto; padding: 0 16px !important; display: inline-flex; align-items: center; justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .pathv2-diff-section .path-card-reassurance {
margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .pv2-rocket {
vertical-align: -2px; margin-right: 8px; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-how {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; font-size: 13px; font-weight: 600; color: var(--stone); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .xs-how:hover {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .xs-h2 {
font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin: 34px 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .xs-h2.xs-h2--launch {
font-size: 32px; letter-spacing: -0.025em; line-height: 1.15; text-transform: none; color: var(--ink); margin: 28px 0 8px; display: flex; align-items: center; gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .xs-h2--launch .xs-h2-ico {
flex: none; color: var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .xs-launch-row {
display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px;
}
.tsmp-dashpages.tsmp-dashpages .xs-launch-main {
flex: 1 1 420px; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .xs-launch-credits {
display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 28px;
}
.tsmp-dashpages.tsmp-dashpages .xs-launch-credits .hub-bal {
min-width: 250px;
}
.tsmp-dashpages.tsmp-dashpages .xs-launch-credits .hub-bal {
min-width: 230px;
}
.tsmp-dashpages.tsmp-dashpages .xs-buy-link {
justify-content: center; text-align: center; background: var(--ink); color: #fff; border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .xs-buy-link:hover {
background: #bc886d; border-color: #bc886d; color: #fff; box-shadow: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-credits-sec {
margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .xs-h2.xs-h2--credits {
font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; text-transform: none; color: var(--ink); margin: 0 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .xs-credits-sub {
font-size: 15px; color: var(--stone); margin: 0 0 18px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="xs-credits"] p.hub-e-bundle {
display: flex !important; align-items: center; justify-content: center; gap: 12px; margin: 28px 20px 4px !important; font-size: 20px !important; font-weight: 600; line-height: 1.3; color: var(--ink) !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="xs-credits"] .hub-e-bundle .xs-bundle-ico {
flex: none; width: 28px; height: 28px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="xs-credits"] .hub-e-bundle a {
font-weight: 700; color: var(--mascot) !important; text-decoration: underline; text-underline-offset: 4px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="xs-credits"] .hub-e-bundle a:hover {
color: #9C6E54 !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="xs-credits"] p.hub-idea {
display: flex !important; align-items: center; justify-content: center; gap: 10px; margin: 14px 20px 6px !important; font-size: 15px !important; color: var(--stone) !important; text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="xs-credits"] .hub-idea .hub-idea-ico {
flex: none; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="xs-credits"] .hub-idea a {
color: var(--ink) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="xs-credits"] .hub-idea a:hover {
color: var(--mascot) !important;
}
.tsmp-dashpages.tsmp-dashpages .xs-credits-sec p.xs-credits-bundle {
display: flex; align-items: center; justify-content: center; gap: 12px; margin: 28px 0 4px; font-size: 20px !important; font-weight: 600; line-height: 1.3; color: var(--ink) !important;
}
.tsmp-dashpages.tsmp-dashpages .xs-credits-sec .xs-credits-bundle .xs-bundle-ico {
flex: none; width: 28px; height: 28px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .xs-credits-sec .xs-credits-bundle a {
font-weight: 700; color: var(--mascot) !important; text-decoration: underline; text-underline-offset: 4px;
}
.tsmp-dashpages.tsmp-dashpages .xs-credits-sec .xs-credits-bundle a:hover {
color: #9C6E54 !important;
}
.tsmp-dashpages.tsmp-dashpages .xs-launch-sub {
font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0 0 22px; max-width: 760px;
}
.tsmp-dashpages.tsmp-dashpages .xs-grid {
display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px;
}
/* seven X-Sellerators: a row of four, then a row of three */
.tsmp-dashpages.tsmp-dashpages .xs-grid > .xs-tile {
grid-column: span 3;
}
.tsmp-dashpages.tsmp-dashpages .xs-grid > .xs-tile:nth-child(n+5) {
grid-column: span 4;
}
.tsmp-dashpages.tsmp-dashpages .xs-tile {
position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 210px; padding: 14px 16px 16px; border: 1px solid #E9E7E5; border-top: 4px solid var(--mascot); border-radius: 12px; background: var(--card-fill);   /* white, not the left-menu hover gray — see #301 */ color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.tsmp-dashpages.tsmp-dashpages .xs-tile:hover {
box-shadow: 0 8px 22px rgba(28,26,24,.08); transform: translateY(-2px); background: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .xs-tile-ico {
color: var(--mascot); margin: 10px 0 auto; width: 40px; height: 40px;
}
.tsmp-dashpages.tsmp-dashpages .xs-tile-name {
font-weight: 700; font-size: 22px; line-height: 1.1; margin-top: 14px;
}
.tsmp-dashpages.tsmp-dashpages .xs-tile-brand {
font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--ink); margin-top: 0;
}
/* same size and color as the name: "Product / X-Sellerator™" */
.tsmp-dashpages.tsmp-dashpages .xs-tile-desc em {
font-style: italic; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .xs-tile-desc {
font-size: 13px; line-height: 1.45; color: var(--stone); margin-top: 10px; min-height: 4.4em; font-size: 12.5px; margin-top: 8px;
}
/* room for 3 lines so every name sits at the same height */
.tsmp-dashpages.tsmp-dashpages .xs-tile--live {
border-color: var(--mascot); box-shadow: inset 0 0 0 1px var(--mascot);
}
.tsmp-dashpages.tsmp-dashpages .xs-tile.is-soon {
pointer-events: none; cursor: default;
}
.tsmp-dashpages.tsmp-dashpages .xs-tags {
display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px;
}
.tsmp-dashpages.tsmp-dashpages .xs-live, .tsmp-dashpages.tsmp-dashpages .xs-soon, .tsmp-dashpages.tsmp-dashpages .xs-pro {
font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
}
.tsmp-dashpages.tsmp-dashpages .xs-live {
background: var(--mascot); color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .xs-soon {
background: var(--white); color: var(--ink); border: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .xs-pro {
background: #F6E7BC; color: #6E510F; border: 1px solid #C9A24B; box-shadow: 0 0 0 1px rgba(201,162,75,.25);
}
/* Pro = gold */
.tsmp-dashpages.tsmp-dashpages .xs-also {
margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .xs-also a {
color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .xs-also .xs-also-link {
white-space: nowrap; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .xs-also .xs-also-ico {
vertical-align: -2px; margin-right: 5px;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov {
position: fixed; inset: 0; z-index: 400; background: rgba(28,26,24,.55); display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-card {
position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: var(--white); border-top: 5px solid var(--mascot); border-radius: 12px;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-x {
position: absolute; top: 8px; right: 12px; z-index: 2; font-size: 28px; line-height: 1; color: var(--ink); background: rgba(255,255,255,.85); border-radius: 50%; width: 34px; height: 34px;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-photo {
height: 150px; overflow: hidden;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-photo img {
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-body {
padding: 24px 30px 28px;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-body h2 {
font-size: 24px; font-weight: 700; margin-bottom: 16px;
}
.tsmp-dashpages.tsmp-dashpages .xs-steps {
list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 16px;
}
.tsmp-dashpages.tsmp-dashpages .xs-steps li {
display: flex; gap: 14px; align-items: flex-start;
}
.tsmp-dashpages.tsmp-dashpages .xs-steps b {
flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mascot); color: var(--white); display: grid; place-items: center; font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .xs-steps span {
font-size: 14px; line-height: 1.5; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .xs-steps strong {
display: block; font-size: 16px; color: var(--ink);
}
@media (max-width: 1000px) {
.tsmp-dashpages.tsmp-dashpages .xs-grid {
grid-template-columns: repeat(2, 1fr);
}
.tsmp-dashpages.tsmp-dashpages .xs-grid > .xs-tile, .tsmp-dashpages.tsmp-dashpages .xs-grid > .xs-tile:nth-child(n+5) {
grid-column: auto;
}

}
@media (max-width: 760px) {
.tsmp-dashpages.tsmp-dashpages .xs-hero {
height: auto; min-height: 260px; border-radius: 12px;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero-text {
padding: 28px 18px 22px;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero .xs-h1 {
font-size: 36px;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero-eyebrow {
font-size: 12px; margin-bottom: 0;
}
.tsmp-dashpages.tsmp-dashpages .xs-hero-sub {
font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .xs-grid {
grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.tsmp-dashpages.tsmp-dashpages .xs-tile {
min-height: 250px; padding: 18px 14px 16px;
}
.tsmp-dashpages.tsmp-dashpages .xs-tile-name, .tsmp-dashpages.tsmp-dashpages .xs-tile-brand {
font-size: 22px;
}
.tsmp-dashpages.tsmp-dashpages .xs-tabs {
gap: 18px;
}
.tsmp-dashpages.tsmp-dashpages .xs-ov-body {
padding: 20px 20px 24px;
}

}
@media (max-width: 380px) {
.tsmp-dashpages.tsmp-dashpages .xs-grid {
grid-template-columns: 1fr;
}
.tsmp-dashpages.tsmp-dashpages .xs-tile {
min-height: 0;
}

}
.tsmp-dashpages.tsmp-dashpages .kit-empty-btns {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .launch-btn {
display: inline-block; margin: 2px 4px 2px 0; padding: 5px 9px; border: 1px solid var(--mascot); border-radius: 4px; background: var(--cream); color: var(--ink); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-decoration: none; transition: background-color .15s ease, border-color .15s ease;
}
.tsmp-dashpages.tsmp-dashpages .launch-btn:hover {
background: #F1E4DA; border-color: var(--mascot); color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .launch-btn .launch-ico {
vertical-align: -2px; margin-right: 5px;
}
.tsmp-dashpages.tsmp-dashpages .launch-btn.is-done {
opacity: .38; pointer-events: none; cursor: default;
}
.tsmp-dashpages.tsmp-dashpages .launch-cell {
white-space: nowrap; padding-left: 8px !important; padding-right: 8px !important;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="products"] .products-table td.kit-act, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="products"] .products-table td.kit-act a {
font-size: 12.5px;
}
/* what the product page shows depends on what it is */
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="kit-folder"] .kf-folder, .tsmp-dashpages.tsmp-dashpages .dash-page[data-page="kit-folder"] .kf-prod {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="kit-folder"].is-folder .kf-folder {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .dash-page[data-page="kit-folder"].is-product .kf-prod {
display: block;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-card {
background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-head {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-thumb {
width: 56px; height: 56px;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-main {
flex: 1; min-width: 240px;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-main h1 {
font-size: 24px; line-height: 1.2; margin: 0;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-btns {
display: flex; gap: 8px; flex-wrap: wrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-origin {
font-size: 12.5px; color: var(--stone); white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-origin[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-list {
margin: 20px 0 0; border-top: 1px solid var(--border);
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-list > div {
display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-list dt {
flex: 0 0 130px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-list dd {
margin: 0; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-more {
margin-top: 18px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-more strong {
font-size: 14.5px; grid-column: 1;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-more p {
margin: 0; font-size: 13.5px; color: var(--stone); grid-column: 1;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-more .btn {
grid-column: 2; grid-row: 1 / span 2;
}
.tsmp-dashpages.tsmp-dashpages .kf-backfolder {
font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .kf-backfolder[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-file-act {
align-self: center; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .kit-dup {
font-size: 13px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .kf-copy-note {
background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--mascot); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .kf-copy-note[hidden] {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .kf-prod-btns [hidden], .tsmp-dashpages.tsmp-dashpages .kf-file-act [hidden], .tsmp-dashpages.tsmp-dashpages .kf-sub [hidden] {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .sub-nav--grp li.nav-eyebrow {
padding-left: 26px;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav .sub-nav--grp li.nav-sep {
margin-left: 26px;
}
/* ---- Prototype: two menu layouts (A: everything in the sidebar, B: sidebar + "My Business" mega menu). Switch is marked remove-before-build. ---- */
.tsmp-dashpages.tsmp-dashpages .proto-layout {
display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; font-size: 11px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .proto-layout button {
border: 1px solid var(--border); background: var(--white); color: var(--ink); font-size: 11px; font-weight: 600; padding: 7px 14px; border-radius: var(--radius-btn); cursor: pointer;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep, .tsmp-dashpages.tsmp-dashpages .topnav-sep-label {
display: none;
}
/* separate-menus style: the logo and quick links are the top row, "Seller Dashboard" and the menus drop to a second row */
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav {
height: auto; flex-wrap: wrap; align-items: center; padding-top: 10px; padding-bottom: 0; row-gap: 0;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-logo {
order: 1;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-acct {
order: 2; margin-left: auto;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav::before {
content: ""; order: 3; flex: 0 0 100%; height: 0;
}
/* starts the second row */
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav::after {
content: ""; position: absolute; left: 28px; right: 28px; bottom: 46px; border-top: 1px solid var(--border);
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-links {
order: 4; flex: 1 1 auto; width: auto; margin: 8px 0 0; padding: 0; align-items: stretch; gap: 4px; height: 46px;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-label {
align-self: center; margin-right: 10px;
}
/* each menu hangs straight off its label: the label turns into a tab, and the menu starts right under it, flush with the header */
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep {
position: relative; align-self: stretch;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep > .topnav-dd-btn {
height: 100%; padding: 0 12px !important; border-bottom: 3px solid transparent; box-sizing: border-box;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep > .topnav-dd-btn:hover {
background: #F6F5F4;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep.is-open > .topnav-dd-btn {
background: #F6F5F4;
}
/* no thick dark underline while open: Back to TeacherStore.io and Seller Communities do not have one either */
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-menu {
top: calc(100% + 2px) !important; left: 0 !important; border-radius: 0 0 8px 8px !important; border-top: 0 !important; box-shadow: 0 14px 28px rgba(28,26,24,.12) !important;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-myemail, body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewstore, body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewsales {
order: 5; margin: 8px 0 0 22px;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-label {
display: block; box-sizing: border-box; width: 252px; flex-shrink: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); border-right: 1px solid var(--border); line-height: 30px;
}
/* 28px bar padding + 224px = the right edge of the left menu (252px) */
/* narrower screens: the two quick links move up to the top row beside the picture, and under 1340px the small menu icons are dropped, so the header never grows a third row */
@media (max-width: 1640px) {
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-myemail, body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewstore, body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewsales {
order: 2; margin: 0 0 0 22px;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-myemail {
margin-left: auto;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-acct {
margin-left: 22px;
}

}
@media (max-width: 1340px) {
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep .sep-ico {
display: none;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep > .topnav-dd-btn {
padding: 0 9px !important;
}

}
/* Tablet and small laptop (861 to 1280px): menu names stay on one line, spacing tightens, and the two quick links shrink so nothing wraps or crowds the avatar */
.tsmp-dashpages.tsmp-dashpages .topnav-dd-btn {
white-space: nowrap;
}
@media (min-width: 861px) and (max-width: 1280px) {
.tsmp-dashpages.tsmp-dashpages .topnav {
padding: 0 16px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-logo img {
height: 34px; width: auto;
}
.tsmp-dashpages.tsmp-dashpages .topnav-links {
gap: 12px;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep > .topnav-dd-btn {
padding: 0 6px !important; font-size: 12px; letter-spacing: .02em;
}
.tsmp-dashpages.tsmp-dashpages .topnav-quick {
font-size: 13px;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-myemail, body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewstore, body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewsales {
margin-left: 12px;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-myemail {
margin-left: auto;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-acct {
margin-left: 12px;
}

}
@media (min-width: 861px) and (max-width: 1100px) {
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-links {
flex-wrap: wrap; row-gap: 4px; max-width: 100%;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-label {
width: 100%; border-right: 0; font-size: 18px; line-height: 24px; margin: 0;
}

}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .sidebar {
top: var(--hdr, 76px); height: calc(100vh - var(--hdr, 76px));
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .layout {
min-height: calc(100vh - var(--hdr, 76px));
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .dash-home-wrap {
min-height: calc(100vh - var(--hdr, 76px) - 80px);
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep {
display: block;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-mega {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu {
min-width: 230px !important; padding: 8px !important; left: -14px !important; transform: none !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep > .topnav-dd-btn {
font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink); gap: 6px; align-items: center;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep .sl {
font-size: 14px !important; text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep > .topnav-dd-btn:hover .sl, .tsmp-dashpages.tsmp-dashpages .topnav-sep.is-open > .topnav-dd-btn .sl {
text-decoration-thickness: 2px;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep .sl, body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep > .topnav-dd-btn:hover .sl, body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep.is-open > .topnav-dd-btn .sl {
text-decoration: none;
}
/* try-out: the menu names are not underlined, like the links beside them */
.tsmp-dashpages.tsmp-dashpages .topnav-sep .sep-ico {
flex-shrink: 0; color: #8F6F57;
}
.tsmp-dashpages.tsmp-dashpages .topnav-dd-menu .sep-title {
white-space: nowrap; display: block !important; color: var(--ink) !important; margin-top: 0 !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu .sep-title {
margin: 6px 10px 6px; padding-bottom: 8px; font-size: 19px; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu .dd-out {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a {
align-items: center !important; gap: 10px !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a {
white-space: nowrap;
}
/* Plan locks: every seller sees the same menus; lines their plan does not include are grayed with a small lock and open the upgrade page. (data-needs="plus" or "pro"; the plan switch is prototype only.) */
.tsmp-dashpages.tsmp-dashpages .lock-ico {
display: none; flex: none; margin-left: 6px; color: #8C8278;
}
.tsmp-dashpages.tsmp-dashpages .plan-locked .lock-ico, .tsmp-dashpages.tsmp-dashpages .plan-locked > .lock-ico {
display: inline-block;
}
.tsmp-dashpages.tsmp-dashpages .sidebar-nav li.plan-locked > a, .tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a.plan-locked {
opacity: .65;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a.plan-locked .mi {
opacity: .8;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a.is-soon {
pointer-events: none; cursor: default; opacity: .7;
}
/* Soon: shown, not clickable (same as the left menu) */
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu .soon-tag {
font-style: normal; margin-left: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: #F5E8E2; border-radius: 3px; padding: 2px 6px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a .mi {
flex-shrink: 0; color: #8F6F57;
}
.tsmp-dashpages.tsmp-dashpages .setup-bubble {
display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #728D9C; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1; text-decoration: none;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep > .topnav-dd-btn .setup-bubble {
margin-left: -2px; align-self: center;
}
.tsmp-dashpages.tsmp-dashpages .setup-bubble[hidden] {
display: none !important;
}
/* the checklist banner: Seller blue, so it stands out from the page */
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip, .tsmp-dashpages.tsmp-dashpages .lw-strip {
background: #fff !important; border: 1px solid #728D9C !important; border-left-width: 4px !important; font-weight: 500;
}
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip .lw-store-ico, .tsmp-dashpages.tsmp-dashpages .lw-strip svg {
color: #728D9C;
}
.tsmp-dashpages.tsmp-dashpages .dash-lw-chip .lw-chip-count {
display: inline-block; background: #728D9C; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; margin-left: 10px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-wide {
min-width: 340px !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a.cm-item {
align-items: flex-start !important; padding: 10px !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a.cm-item .mi {
margin-top: 1px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a.cm-item .mi.gold {
color: var(--gold, #C9A96E);
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu .cm-name {
font-size: 14px; font-weight: 600;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu .cm-desc {
white-space: normal; max-width: 270px; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--stone); font-weight: 400;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu .pro-tag {
font-style: normal; margin-left: 2px; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--gold, #C9A96E); border-radius: 3px; padding: 2px 5px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a {
padding: 8px 10px !important; font-size: 13.5px; font-weight: 500; border-radius: 4px !important; line-height: 1.35;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu a:hover {
background: #F6F5F4 !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-menu h5 {
margin: 12px 10px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8F6F57;
}
.tsmp-dashpages.tsmp-dashpages .proto-megastyle button.is-current {
background: var(--ink); color: var(--white); border-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu.is-split .mega-grid {
display: grid; grid-template-columns: 230px 1fr; gap: 0; min-height: 250px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu.is-split .mega-side {
border-right: 1px solid var(--border); padding-right: 14px; display: flex; flex-direction: column; gap: 2px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-side button {
text-align: left; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 11px 12px; border-radius: 0; cursor: pointer; border-left: 3px solid transparent;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-side button.is-on {
background: #F6F5F4; border-left-color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu.is-split .mega-panels {
padding-left: 24px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu.is-split .mega-col a {
border-radius: 4px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu.is-split .mega-col {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu.is-split .mega-col.is-on {
display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu.is-split .mega-col.is-on h4 {
grid-column: 1 / -1; font-size: 15px; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink); margin-bottom: 2px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu.is-split .mega-col .mega-lead {
grid-column: 1 / -1; margin: 0 0 10px; font-size: 13px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu:not(.is-split) .mega-lead, .tsmp-dashpages.tsmp-dashpages .topnav-mega-menu:not(.is-split) .mega-side {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .proto-layout button.is-current {
background: var(--ink); color: var(--white); border-color: var(--ink);
}
body:not(.layout-mega) .tsmp-dashpages.tsmp-dashpages .only-b {
display: none !important;
}
body.layout-mega .tsmp-dashpages.tsmp-dashpages .only-a {
display: none !important;
}
body.layout-mega .tsmp-dashpages.tsmp-dashpages .topnav-studio {
display: none !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu {
position: fixed !important; top: 74px !important; left: 50% !important; transform: translateX(-50%) !important; width: min(1080px, calc(100vw - 40px)); min-width: 0 !important; padding: 20px 22px 14px !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-grid {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-col h4 {
margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em !important; text-transform: uppercase !important; color: #8F6F57;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-col a {
display: block !important; padding: 6px 8px; font-size: 13.5px; font-weight: 500; border-radius: 6px; line-height: 1.35;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-col a:hover {
background: #F6F5F4;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-foot {
margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-foot a {
display: inline-block !important; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-foot b {
color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .topnav-mega-menu .mega-col h4.mega-sub {
margin-top: 14px;
}
/* Top bar (try-out): Back to TeacherStore.io sits next to the logo in the top row; the quick links read My Email, View My Sales and View My TeacherStore (the last opens in a new tab, so it has the box-and-arrow icon) */
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-backwrap {
order: 1; list-style: none; display: flex; align-items: center; margin: 0 0 0 49px; padding: 0; align-self: center;
}
/* 49px lines its left edge up with the My TeacherStore Dashboard button in the row below */
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-back {
display: block; align-self: center;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-back > .topnav-dd-btn {
height: auto; padding: 7px 12px !important; border: 0; border-radius: 4px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-back > .topnav-dd-btn:hover, body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-back.is-open > .topnav-dd-btn {
background: #F6F5F4;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-back .topnav-sep-menu {
top: calc(100% + 6px) !important; border-radius: 8px !important; border-top: 1px solid var(--border) !important;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-quicks {
order: 1; display: flex; align-items: center; gap: 0; margin-left: 8px;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-quicks .topnav-quick {
order: 0 !important; margin: 0 0 0 18px !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-quicks {
display: none;
}
body.layout-mega .tsmp-dashpages.tsmp-dashpages .topnav-quicks {
display: flex;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewstore {
order: 1 !important; margin: 0 0 0 18px !important; align-self: center;
}
.tsmp-dashpages.tsmp-dashpages .topnav-sep-quick {
display: none;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick {
display: flex; align-items: center; margin-left: 2px;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick + .topnav-sep-quick {
margin-left: 12px;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick .topnav-quick {
margin: 0 !important; order: 0 !important;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick .topnav-quick {
text-transform: none !important; letter-spacing: normal !important; font-size: 14px !important; font-weight: 500 !important;
}
/* the second-row links behave exactly like the menu buttons beside them: same height, same text size and the same soft gray on hover, with no underline that sits lower than the row */
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick {
align-self: stretch; margin-left: 0 !important;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick .topnav-quick {
display: flex; align-items: center; height: 100%; box-sizing: border-box; padding: 0 12px !important; border-bottom: 3px solid transparent; text-decoration: none !important;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick .topnav-quick:hover {
background: #F6F5F4; text-decoration: none !important;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick .vs-num {
text-decoration: none; margin-left: 5px;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick--right {
margin-left: auto !important;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-procomm-li {
margin-left: 4px !important;
}
/* Try-out: View My Sales stays beside the dashboard button; Email and Pro Community (Pro sellers only) are the two tools on the right of the row */
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick--right {
margin-left: auto;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-sep-quick + .topnav-sep-quick--right {
margin-left: auto;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-procomm-li {
display: flex; margin-left: 22px;
}
/* everyone sees it; Pro sellers get in, the rest get a lock and the Pro page */
.tsmp-dashpages.tsmp-dashpages .topnav-procomm-li .lock-ico {
margin-left: 6px; color: var(--stone);
}
.tsmp-dashpages.tsmp-dashpages .topnav-procomm .pc-gem {
color: #9A7A30; margin-right: 3px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-comms-btn {
display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); padding: 0; text-transform: none; letter-spacing: normal; white-space: nowrap;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-help-li {
display: flex; margin-left: 4px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-comms-btn {
align-self: stretch;
}
/* as tall as the bar, like the My TeacherStore Dashboard button, so there is no gap above the menu */
.tsmp-dashpages.tsmp-dashpages .topnav-comms-btn:hover, .tsmp-dashpages.tsmp-dashpages .topnav-comms.is-open .topnav-comms-btn {
color: var(--ink) !important; background: #F6F5F4;
}
.tsmp-dashpages.tsmp-dashpages .topnav-comms-btn {
padding: 0 12px;
}
/* room for the soft gray highlight, like the other two header menus */
/* stays ink like the links next to it; the menu opening is the hover feedback */
.tsmp-dashpages.tsmp-dashpages .topnav-comms-btn span[aria-hidden] {
font-size: 10px;
}
body.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-comms .topnav-sep-menu, .tsmp-dashpages.tsmp-dashpages .topnav-comms .topnav-sep-menu {
left: auto !important; right: -6px !important; min-width: 340px !important;
}
/* same menu as My TeacherStore Dashboard, opening under the link toward the left */
.tsmp-dashpages.tsmp-dashpages .topnav-comms .cm-text {
display: block; min-width: 0;
}
.tsmp-dashpages.tsmp-dashpages .topnav-comms .cm-name {
color: var(--ink) !important; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .topnav-comms .cm-desc {
display: block; color: var(--ink) !important;
}
/* the descriptions are ink, not stone */
.tsmp-dashpages.tsmp-dashpages .topnav-comms .mi.blue {
color: #728D9C !important;
}
/* the same community icon on both lines: Seller Blue for the Sellers Club, gold for PRO */
.tsmp-dashpages.tsmp-dashpages .topnav-comms .mi.gold {
color: var(--gold, #C9A96E) !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-comms .pro-tag {
font-style: normal; color: #fff !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-comms .lock-ico {
display: none; margin-left: 0; color: var(--stone);
}
body:not(.tier-pro) .tsmp-dashpages.tsmp-dashpages .topnav-comms .lock-ico {
display: inline-block;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewstore {
order: 2 !important; margin: 0 0 0 auto !important; align-self: center;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-acct {
margin-left: 18px !important;
}
/* View My Store matches the other buttons: no resting underline, the same soft gray block on hover */
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewstore {
text-decoration: none !important; padding: 7px 12px !important; border-radius: 4px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center;
}
body.layout-mega.mstyle-menus .tsmp-dashpages.tsmp-dashpages .topnav-viewstore:hover {
background: #F6F5F4; text-decoration: none !important;
}
.tsmp-dashpages.tsmp-dashpages .topnav-quick .q-ico {
display: inline-block; vertical-align: -2px; margin-right: 6px; flex: none;
}
.tsmp-dashpages.tsmp-dashpages .topnav-quick .q-ext {
margin: 0 0 0 6px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-backwrap {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .topnav-quick {
white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 4px; padding: 6px 4px; margin-left: 14px;
}
.tsmp-dashpages.tsmp-dashpages .topnav-viewstore {
margin-left: auto;
}
.tsmp-dashpages.tsmp-dashpages .topnav-quick .vs-num {
color: #BC886D;
}
/* the underline stays black under it */
.tsmp-dashpages.tsmp-dashpages .topnav-quick:hover {
text-decoration-thickness: 2px;
}
/* layout B: the menus sit on the left, next to the logo */
body.layout-mega .tsmp-dashpages.tsmp-dashpages .topnav-links {
margin-left: 34px; gap: 26px; margin-right: auto;
}
body:not(.layout-mega) .tsmp-dashpages.tsmp-dashpages .topnav-viewstore {
display: none !important;
}
body:not(.layout-mega) .tsmp-dashpages.tsmp-dashpages .topnav-viewsales {
display: none !important;
}
/* layout B: the photo lives in the top right, so the left column keeps just the name, store, plan and messages */
body.layout-mega .tsmp-dashpages.tsmp-dashpages .side-profile .side-avatar {
display: none;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-card {
max-width: 700px; padding: 0; overflow: hidden; border-top: 3px solid var(--gold, #C9A96E); text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-card .sxov-x {
z-index: 2; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 22px; line-height: 1; color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-pic {
display: block; width: 100%; height: 150px; object-fit: cover; object-position: 50% 38%;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-body {
padding: 24px 28px 24px;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-eyebrow {
color: #B8964F;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-card h2 {
font-size: 23px; white-space: nowrap;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-actions .btn-primary {
background: var(--gold, #C9A96E); border-color: var(--gold, #C9A96E); color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-actions .btn-primary:hover {
background: var(--cream); color: var(--ink); border-color: var(--gold, #C9A96E);
}
@media (max-width: 560px) {
.tsmp-dashpages.tsmp-dashpages .comm-ov-card h2 {
white-space: normal; font-size: 20px;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-body {
padding: 20px 20px 20px;
}

}
.tsmp-dashpages.tsmp-dashpages .comm-ov-actions {
margin: 4px 0 14px;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-or {
margin: 0; font-size: 13.5px;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-or a {
color: var(--stone); text-decoration: underline; text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .comm-ov-or a:hover {
color: var(--ink);
}

/* ============================================================================
   HER INLINE STYLES

   Written on the element in her file rather than in its <style> block, and
   so invisible to a sheet built from that block alone. Emitted last, where
   they override the same selector earlier in this file the way an inline
   style would.

   An element with an id is matched by its id. A class combination is only
   emitted where every element carrying it agrees; anything they disagree
   about is listed at the end rather than guessed at. display is never
   emitted — one hidden element would otherwise hide every element that
   shares its classes, and that failure is silent.
   ========================================================================= */
.tsmp-dashpages.tsmp-dashpages #plannedNote {
	max-width: 560px;
	margin: 10px auto 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages #inline-2vvdMaOWkl3NST9wroML {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 8px;
}
.tsmp-dashpages.tsmp-dashpages #inline-LgzqiwtHyz4XXKDiuMEg {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 8px;
}
.tsmp-dashpages.tsmp-dashpages #viewMyStoreBtn {
	white-space: nowrap;
	flex-shrink: 0;
}
.tsmp-dashpages.tsmp-dashpages .cp-create.info-card {
	margin-top: 28px;
}
.tsmp-dashpages.tsmp-dashpages .btn.btn-ghost.pathv2-diff-btn {
	width: 100%;
	justify-content: center;
}
.tsmp-dashpages.tsmp-dashpages .btn.btn-primary.pathv2-btn-xsell.pathv2-diff-btn {
	width: 100%;
}
.tsmp-dashpages.tsmp-dashpages #payoutMethodCard {
	margin-top: 28px;
}
.tsmp-dashpages.tsmp-dashpages #rvStoreRoot {
	margin-top: 24px;
}
.tsmp-dashpages.tsmp-dashpages #qaRoot {
	margin-top: 24px;
}
.tsmp-dashpages.tsmp-dashpages #supRoot {
	margin-top: 24px;
}
.tsmp-dashpages.tsmp-dashpages #reportsTabs {
	margin: 28px 0 24px;
}
.tsmp-dashpages.tsmp-dashpages #onboardingDismiss {
	width: 33%;
	margin: 0 auto;
}
.tsmp-dashpages.tsmp-dashpages .btn.btn-ghost.rec-btn {
	background: transparent;
	border-color: var(--white);
	color: var(--white);
}
.tsmp-dashpages.tsmp-dashpages .es-hint {
	margin: 0 0 8px;
}
.tsmp-dashpages.tsmp-dashpages #esPrevWrap {
	margin-top: 18px;
}
.tsmp-dashpages.tsmp-dashpages .tf-bar-fill {
	width: '+Math.round(x.visits/max*100)+'%;
}
/* ------------------------------------------------------------------ *
 * #185 — her "Need an idea…? Brainstorm with Teachy" line
 * ------------------------------------------------------------------ *
 * Her own rules for this line are scoped `#hubOv .hub-done-idea`, and
 * `#hubOv` is an ID that exists nowhere in our markup: our credit
 * lightbox is `class="hub-ov tsmp-inline-checkout"`. So her five rules
 * would all miss and the line would render as unstyled inline text —
 * built, placed correctly, and looking broken.
 *
 * Her declarations are repeated here against OUR container rather than
 * giving our lightbox `id="hubOv"`, because that id carries 38 other
 * rules of hers written for her panel, and adopting it would restyle a
 * screen sellers reach immediately after paying us.
 *
 * Doubled scope class, as everything here is: the theme's rules are
 * (0,2,1) and a single class loses every tie.
 */
.tsmp-dashpages.tsmp-dashpages .hub-ov .hub-done-idea {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--stone);
	text-align: center;
}
.tsmp-dashpages.tsmp-dashpages .hub-ov .hub-done-idea .hub-idea-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	color: var(--ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tsmp-dashpages.tsmp-dashpages .hub-ov .hub-done-idea .hub-idea-ico {
	flex: none;
	color: var(--ink);
}
.tsmp-dashpages.tsmp-dashpages .hub-ov .hub-done-idea .hub-idea-link:hover {
	color: var(--mascot);
}

/* ------------------------------------------------------------------ *
 * Her brainstorm notes page: the bits her sheet does not already cover
 * ------------------------------------------------------------------ *
 * Everything structural here — kf-doc, kf-doc-page, kf-doc-bar, the
 * crumbs, the quote block — is already hers and already in this file.
 * What follows is only what her prototype had no live version of: the
 * edit fields, the empty state, and the Keep-brainstorming drawer.
 */
.tsmp-dashpages.tsmp-dashpages .tsmp-idea-field {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--white, #fff);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	resize: vertical;
}
.tsmp-dashpages.tsmp-dashpages .tsmp-idea-field:focus {
	outline: none;
	border-color: var(--mascot, #BC886D);
}
.tsmp-dashpages.tsmp-dashpages .tsmp-idea-editbtns {
	margin-top: 18px;
}
.tsmp-dashpages.tsmp-dashpages .kf-doc-empty {
	color: var(--stone);
	font-size: 15px;
	line-height: 1.5;
}

/* The drawer is appended to document.body, NOT inside .tsmp-dashpages —
   it has to sit above the page, and nesting it in a scrolling column
   would clip it. So it cannot borrow the scope class every other rule
   here leans on, and its own class is DOUBLED instead: the theme's
   rules are (0,2,1) and a single class loses every tie. */
.tsmp-idea-drawer.tsmp-idea-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	width: min(420px, 100vw);
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #1C1A18;
	box-shadow: -8px 0 28px rgba(28, 26, 24, 0.18);
	font-family: inherit;
}
.tsmp-idea-drawer.tsmp-idea-drawer[hidden] {
	display: none;
}
.tsmp-idea-drawer.tsmp-idea-drawer .tsmp-idea-drawer-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 18px 14px;
	border-bottom: 1px solid #E4E0D8;
	font-size: 17px;
}
.tsmp-idea-drawer.tsmp-idea-drawer .tsmp-idea-drawer-head strong {
	flex: 1;
}
.tsmp-idea-drawer.tsmp-idea-drawer .tsmp-idea-drawer-x {
	border: 0;
	background: none;
	color: #8C8278;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}
.tsmp-idea-drawer.tsmp-idea-drawer .tsmp-idea-drawer-thread {
	flex: 1;
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tsmp-idea-drawer.tsmp-idea-drawer .tsmp-idea-drawer-bar {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 0 18px 18px;
	padding: 10px 12px;
	border: 1.5px solid #1C1A18;
	border-radius: 14px;
}
.tsmp-idea-drawer.tsmp-idea-drawer .tsmp-idea-drawer-input {
	flex: 1;
	border: 0;
	outline: none;
	resize: none;
	background: none;
	font: inherit;
	font-size: 15px;
	color: #1C1A18;
	max-height: 160px;
}
.tsmp-idea-drawer.tsmp-idea-drawer .tsmp-idea-drawer-send {
	flex: none;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: #C25F4E;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}
.tsmp-idea-drawer.tsmp-idea-drawer .tsmp-idea-drawer-send[disabled] {
	opacity: .55;
	cursor: default;
}
/* Phone: the drawer is the screen. */
@media (max-width: 480px) {
	.tsmp-idea-drawer.tsmp-idea-drawer {
		width: 100vw;
	}
}

/* The notes page's status line is a direct child of .kf-doc, which her sheet
   turns into a two-column grid — so without this it would be placed as a grid
   item in whichever cell came next and read as part of the rail. Spans both,
   under everything. */
.tsmp-dashpages.tsmp-dashpages .kf-doc .tsmp-idea-doc-msg {
	grid-column: 1 / -1;
	margin: 6px 0 0;
}

/* Admin-only note where a demo video has no URL yet. Deliberately plain and
   slightly apart from her design: it is scaffolding for whoever configures
   the site, never part of what a seller sees. */
.tsmp-dashpages.tsmp-dashpages .tsmp-demo-missing {
	margin: 10px 0;
	padding: 8px 12px;
	border: 1px dashed var(--border, #D8D4CE);
	border-radius: 6px;
	background: var(--cream, #FAF7F2);
	font-size: 12px;
	line-height: 1.6;
	color: var(--stone, #8C8278);
}
.tsmp-dashpages.tsmp-dashpages .tsmp-demo-missing code {
	font-family: var(--ff-mono, monospace);
	font-size: 11.5px;
	color: var(--ink, #1C1A18);
}

/* Phones: the same wrap rule on the dashboard pages. See tsmp-tool.css for
   why this is minimal and what to ask Tiffiny for after launch. */
@media ( max-width: 640px ) {
	.tsmp-dashpages.tsmp-dashpages .pathv2-hero-headline,
	.tsmp-dashpages.tsmp-dashpages .hub-title {
		white-space: normal;
		overflow-wrap: anywhere;
	}
	.tsmp-dashpages.tsmp-dashpages { overflow-x: hidden; }
}