/* ─────────────────────────────────────────────── crm.bamya.co

   What the Bamya Sales pages need on top of panel.css, and nothing else.
   Every colour is a panel.css token, so the pages stay in the one palette.

   Three parts:

     the landing page   a three-up card row, and two small labels inside a card
     the pricing page   the application's Plan and billing chooser, redrawn:
                        the parts as a list on the left, the total they add
                        up to on the right, and the Compare table (outreach_crm
                        static/css/billing.css is the original, in the app's
                        own tokens)
     the demos page     a 16:9 video frame, with its coming-soon state
*/

/* ───────────────────────────────────────────── a three-up card row

   panel.css's .cards is four tracks and .cards-2 is two; the journey on the
   landing page and the add-ons on the pricing page are three. Same steps
   down as the four-up: two across when three stop fitting, one on a phone.
   The media queries come after the base rule on purpose: a media query adds
   no specificity, so the later rule wins a tie (panel.css says the same about
   .cards-2). */
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cards-3 { grid-template-columns: minmax(0, 1fr); }
}

/* A mono label over a card's heading: where on the road the card stands. */
.card .sl-step {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}

/* A short teal note at the foot of a card ("Free for one person"). */
.card .sl-card-tag {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--you);
}

.fineprint a { color: var(--dim); }
.fineprint a:hover { color: var(--text); }

/* The header carries two buttons, Sign in and Start free. Below panel.css's
   720px break they no longer share row one with the mark: the second wraps
   onto a row of its own, the bar grows to about 150px and covers the top of
   every panel, which clears it by 110px. Start free is the hero's first
   button and the closer's, so on a phone the header keeps Sign in alone, as
   the Leads site's does. */
@media (max-width: 720px) {
  .top .cta + .cta { display: none; }
}

/* ───────────────────────────────────────────── the chooser

   Two columns, as Plan and billing in the app draws them (owner, 2026-10-22:
   "Pricing everywhere - landing or as part of the platform should show the
   bolt-ons on the left and the calculated value on the right"). On the left
   the parts as a list, one row each: its switch (or a count), its name and
   what it gives, and its price at the right. On the right the total they add
   up to, kept in view while the list scrolls past on a wide screen. On a
   phone, one column: the total straight after the list.

   The checkbox stays in the page, focusable and read out as a switch; the
   track beside it is what is seen. A locked switch is aria-disabled, not
   disabled, so it can still be reached and pressed, and pressing it says why
   (sales-pricing.js). A row that is on (`is-on`, which the script keeps in
   step with its switch) takes the teal edge and a wash of it. */
.sl-build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: start;
  gap: 28px;
  max-width: 1040px;
  margin: 40px auto 0;
  text-align: left;
}

.sl-build-left { min-width: 0; }

.sl-chooser {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sl-row {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raise);
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* A row's parts by area: the switch at the left across both lines, the name
   above what it gives, the price at the right. After .sl-row, so it is the
   display that wins on an element with both. */
.sl-row-grid {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: "track name price" "track sub price";
  align-items: center;
  gap: 4px 16px;
}

/* sl-row sets a display, which outranks the hidden attribute (ai_switch=false). */
.sl-row[hidden] { display: none; }

.sl-row.is-on {
  border-color: var(--you);
  background: color-mix(in srgb, var(--you) 7%, var(--raise));
}

.sl-toggle { position: relative; cursor: pointer; }

.sl-toggle.is-locked { cursor: help; }

.sl-row.sl-toggle:not(.is-on):hover,
.sl-row:not(.is-on):has(> .sl-toggle:hover) { border-color: var(--line-strong); }

.sl-toggle-name {
  grid-area: name;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

/* Two texts under a name: a few words for the deck (the hint), and what the
   part gives, a sentence, for this page. Both sit in the same place; each
   page shows one. */
.sl-toggle-hint {
  grid-area: sub;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.sl-row-grid > .sl-toggle-hint { display: none; }

.sl-row-gives {
  grid-area: sub;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--dim);
}

/* The price: a month, and with Yearly on what the year comes to under it. */
.sl-row-price {
  grid-area: price;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sl-row-price b { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }

.sl-row-price small { font-size: 0.8rem; color: var(--dim); }

.sl-row-price .sl-row-year {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

/* Yearly's own "price": which way the subscription is paid. */
.sl-row-state { font-family: var(--mono); font-size: 12px; color: var(--dim); }

.sl-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.sl-toggle-track {
  grid-area: track;
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-strong);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sl-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dim);
  transition: transform 0.2s ease, background 0.2s ease;
}

.sl-toggle input:checked + .sl-toggle-track {
  background: rgba(56, 217, 190, 0.28);
  border-color: var(--you);
}

.sl-toggle input:checked + .sl-toggle-track::after {
  transform: translateX(22px);
  background: var(--text);
}

.sl-toggle input:focus-visible + .sl-toggle-track { outline: 2px solid var(--you); outline-offset: 3px; }
.sl-toggle input[aria-disabled="true"] + .sl-toggle-track { opacity: 0.55; }

/* A thin rule between the parts and how many and how they are paid. */
.sl-chooser-divider { display: block; height: 1px; margin: 4px 18px; background: var(--line); }

/* The counts: Seats in its own row, where a switch would be, and the
   Calendar's People under the Calendar's name, greyed and disabled while the
   Calendar is off. */
.sl-row-count-cell { grid-area: track; }

.sl-row-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 12px 0 0 80px;
}

.sl-row-count .sl-toggle-name { font-size: 0.92rem; }

.sl-row-count .sl-toggle-hint { display: inline; }

.sl-count.is-off { opacity: 0.45; }

.sl-count-input {
  width: 64px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--raise-2);
  color: var(--text);
  font: 600 0.95rem/1 var(--sans);
  text-align: center;
  color-scheme: dark;
}

.sl-count-input:focus-visible { outline: 2px solid var(--you); outline-offset: 3px; }

/* Why a locked switch did not move: said under the list, where the eye
   already is, instead of in a dialog the marketing site does not have. */
.sl-chooser-note {
  min-height: 1.6em;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--you);
}

/* A row's "?": what the part is, what it gives and its seat rule, in the
   chooser's own small window (sales-pricing.js), drawn as the demos page's
   window is. The deck has its own "?" and window (discovery.css). */
.sl-help {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0;
  vertical-align: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--dim);
  font: 600 12px/1 var(--mono);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.sl-help:hover,
.sl-help:focus-visible { color: var(--you); border-color: var(--you); }

.sl-help:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }

/* LinkedIn's mark before the LinkedIn calendar, in its row and its line. */
.sl-li {
  width: 0.95em;
  height: 0.95em;
  margin-right: 7px;
  vertical-align: -0.1em;
  flex: none;
}

.sl-help-dialog {
  margin: auto;
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--raise);
  color: var(--text);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.sl-help-dialog::backdrop {
  background: rgba(4, 6, 8, 0.74);
  backdrop-filter: blur(4px);
}

.sl-help-panel { position: relative; padding: 26px 28px 28px; }

.sl-help-dialog h3 { padding-right: 48px; margin-bottom: 12px; font-size: 1.25rem; line-height: 1.3; }

.sl-help-text { font-size: 0.95rem; line-height: 1.6; color: var(--dim); }

/* The demos window's close button, in the corner: a class more than its own
   rule, which comes later in this file. */
.sl-help-panel .sl-help-close { position: absolute; top: 14px; right: 14px; }

/* ───────────────────────────────────────────── the Price calculator

   The pricing page's left side (owner, 2026-10-22: "column with name and the
   toggle, description, price", "name this whole section, price calculator",
   then "return the old style of containers"). Each row is the chooser's own
   box, with three cells across that line up from row to row: the switch and
   the name with its "?", one sentence on what the part is, the price. Bamya
   CRM Core is a list in one box, a tick where a switch would be and Free on
   each line. Under More,
   which shows and hides them, MCP + more AI, the LinkedIn calendar and Extra
   seats; their counts sit under their names and show only while the switch
   is on. Yearly is the old row, under the total on the right. Every rule is
   under .sl-table or .sl-build-table: the deck draws the list above. */
.sl-build-table .sl-calc-title {
  grid-column: 1 / -1;
  margin: 0 0 -6px;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.sl-table { --sl-cols: minmax(180px, 1fr) minmax(0, 1.45fr) 158px; }

.sl-table .sl-trow {
  display: grid;
  grid-template-columns: var(--sl-cols);
  grid-template-areas: "name gives price";
  align-items: center;
  column-gap: 20px;
}

.sl-table .sl-row:not(.is-on):hover { border-color: var(--line-strong); }

.sl-tname {
  grid-area: name;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.sl-tswitch { display: inline-flex; align-items: center; gap: 12px; }

.sl-table .sl-toggle-track { flex: none; grid-area: auto; }
.sl-table .sl-toggle-name { grid-area: auto; }
.sl-table .sl-row-gives { grid-area: gives; }
.sl-table .sl-row-price { grid-area: price; }
.sl-table label.sl-row-gives,
.sl-table label.sl-row-price { cursor: pointer; }

/* Bamya CRM Core: its name and Free, then its three parts, each a line. */
.sl-free-list { margin: 0; padding: 0; list-style: none; }

.sl-free-item {
  display: grid;
  grid-template-columns: var(--sl-cols);
  grid-template-areas: "name gives price";
  align-items: center;
  column-gap: 20px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.sl-free-tick {
  flex: none;
  width: 48px;
  text-align: center;
  font-weight: 700;
  color: var(--you);
}

.sl-free-item .sl-toggle-name { font-size: 0.95rem; }

/* A count under its name, lined up with the name: the track's width and gap. */
.sl-tcount {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: 10px;
  padding-left: 60px;
  font-size: 0.84rem;
  color: var(--dim);
}

.sl-table .sl-count.is-off { display: none; }

/* More: the parts kept under it, and the button below them. */
.sl-more-rows { display: flex; flex-direction: column; gap: 10px; }

.sl-more-rows[hidden] { display: none; }

.sl-more {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--raise);
  color: var(--text);
  font: 600 0.9rem/1 var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.sl-more:hover { border-color: var(--you); color: var(--you); }
.sl-more:focus-visible { outline: 2px solid var(--you); outline-offset: 3px; }

.sl-more-arrow { transition: transform 0.2s ease; }
.sl-more[aria-expanded="true"] .sl-more-arrow { transform: rotate(180deg); }

/* Yearly under the total, as wide as it. */
.sl-stage .sl-yearly { margin-top: 12px; }

/* ───────────────────────────────────────────── the total, on the right

   One card, as an invoice: Your total, a line for each part with its amount
   (the CRM first), the total a month and what a year comes to, the button,
   and what the choice gives under it. Kept in view on a wide screen. Its own
   class, not .card, so panel.js's grid drift never claims it. */
.sl-stage {
  position: sticky;
  top: 96px;
  min-width: 0;
}

.sl-plan {
  background: var(--raise);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 26px 26px 24px;
  text-align: left;
  box-shadow: 0 30px 80px -40px rgba(56, 217, 190, 0.35);
}

.sl-plan[hidden] { display: none; }
.sl-plan.is-entering { animation: sl-plan-in 0.3s ease-out; }

@keyframes sl-plan-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.sl-plan h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.sl-plan-price {
  font-size: clamp(2.2rem, 4.2vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.sl-plan-price small {
  margin-left: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dim);
}

.sl-plan-billed {
  min-height: 1.5em;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}

.sl-plan-desc { margin-top: 16px; color: var(--dim); }

.sl-plan ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 20px 0 26px;
}

.sl-plan li { position: relative; padding-left: 24px; font-size: 0.95rem; }

.sl-plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px rgba(69, 236, 208, 0.45);
}

.sl-plan .cta { width: 100%; justify-content: center; text-align: center; }

.sl-plan [data-sl-go] { margin-top: 22px; }

.sl-plan-none { padding: 26px 0; text-align: center; color: var(--dim); }

/* The lines: what each part costs, the CRM first. */
.sl-plan .sl-lines { gap: 0; margin: 14px 0 0; }

.sl-plan .sl-lines[hidden] { display: none; }

.sl-plan .sl-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.sl-plan .sl-lines li:last-child { border-bottom: 0; }

.sl-plan .sl-lines li::before { content: none; }

.sl-plan .sl-lines li > span:last-child { color: var(--text); white-space: nowrap; }

.sl-plan .sl-lines small { color: var(--faint); }

.sl-plan .sl-lines .sl-was { margin-right: 8px; color: var(--faint); }

/* The total, set apart by a heavier rule, as an invoice's is. */
.sl-sum-total {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 2px solid var(--line-strong);
}

/* What else is added after sign-up, under the button. */
.sl-plan-after { margin-top: 12px; font-size: 0.85rem; color: var(--dim); text-align: center; }

.sl-plan-after:empty { display: none; }

/* What the choice gives each month, under a rule: the figures for this many
   seats, which the rows on the left give for one. */
.sl-plan .sl-gives {
  gap: 6px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sl-plan .sl-gives li { font-size: 0.86rem; line-height: 1.4; color: var(--dim); }

.sl-plan .sl-gives li::before { top: 0.45em; width: 7px; height: 7px; }

.sl-stage-foot { margin-top: 18px; text-align: center; }

/* One column below 900px, the total straight after the list; on a phone the
   price goes up beside the name and what the part gives takes the width
   under both. */
@media (max-width: 900px) {
  .sl-build { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .sl-stage { position: static; }
}

@media (max-width: 560px) {
  .sl-build { gap: 22px; margin-top: 30px; }
  .sl-row { padding: 14px; }
  .sl-row-grid {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "track name price" "track sub sub";
    align-items: start;
    gap: 4px 12px;
  }
  .sl-toggle-track { margin-top: 1px; }
  .sl-row-count { margin-left: 60px; }
  .sl-count-input { width: 48px; }
  .sl-plan { padding: 22px 18px 20px; }
  /* The calculator on a phone: the price beside the name, the sentence
     under both, lined up with the name. */
  .sl-table .sl-trow,
  .sl-free-item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name price" "gives gives";
    align-items: start;
    row-gap: 6px;
    column-gap: 12px;
  }
  .sl-table .sl-row-gives { padding-left: 60px; }
  .sl-table .sl-free-head .sl-row-gives { padding-left: 0; }
}

/* Only the interval the Yearly switch shows. Every price is on the page for
   both, so a switch shows the other at once, with no request. */
[data-sl-plans][data-interval="year"] [data-when="month"],
[data-sl-plans][data-interval="month"] [data-when="year"] { display: none !important; }

/* ───────────────────────────────────────────── a price inside a card

   The add-ons are prices for one thing each, so the figure is the largest
   thing in the card after its name. */
.card .sl-price {
  margin: 4px 0 12px;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.card .sl-price span {
  margin-left: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dim);
}

.card .sl-also { margin-top: 12px; font-size: 0.88rem; color: var(--faint); }
.card .sl-also b { color: var(--text); }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ───────────────────────────────────────────── the demos page

   One 16:9 frame per demo, in the raised-card language of panel.css's .shot
   (same radius, border and shadow), so a video reads as part of the page and
   not as pasted in. Until a video is filmed the frame holds a play mark and a
   "Coming soon" label; with one, the <video> fills the frame and those two
   are not drawn at all (demos.html). The play mark's ring reuses panel.css's
   own pulse keyframes, the kicker dot's, in the CRM's teal. */
.sl-demo {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(56, 217, 190, 0.07), transparent 70%),
    var(--raise);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

.sl-demo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* A demo with its video: the poster fills the frame and a big play button sits on top (Yavor, 2026-10-20:
   "the videos should have a big play button on top"); pressing it plays the video in the window below. */
.sl-demo-open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.sl-demo-open img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.sl-demo-big-play {
  position: relative;
  width: clamp(72px, 9vw, 112px);
  height: clamp(72px, 9vw, 112px);
  border-radius: 50%;
  border: 2px solid var(--you);
  background: rgba(9, 11, 13, 0.62);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  transition: transform 0.18s ease, background 0.18s ease;
}
.sl-demo-big-play::before {
  content: "";
  margin-left: 12%;
  border-style: solid;
  border-width: clamp(13px, 1.6vw, 20px) 0 clamp(13px, 1.6vw, 20px) clamp(21px, 2.6vw, 32px);
  border-color: transparent transparent transparent var(--you);
}
.sl-demo-open:hover .sl-demo-big-play,
.sl-demo-open:focus-visible .sl-demo-big-play {
  transform: scale(1.08);
  background: rgba(56, 217, 190, 0.22);
}
.sl-demo-open:hover img { opacity: 0.85; }
.sl-demo-open:focus-visible { outline: 2px solid var(--you); outline-offset: -2px; }

/* The one window every demo plays in: nearly the whole screen, centred (Yavor, 2026-10-20: "make it
   almost full screen and centered"), its title above and the video fitted into the rest, at its own
   shape with black at the sides or above and below. `margin: auto` is what centres a modal dialog, and
   panel.css's reset (`* { margin: 0 }`) takes it away, so it is set again here. */
.sl-demo-modal {
  margin: auto;
  width: 96vw;
  height: 96vh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: #000;
  color: inherit;
  overflow: hidden;
}
.sl-demo-modal[open] {
  display: flex;
  flex-direction: column;
}
.sl-demo-modal::backdrop {
  background: rgba(4, 6, 8, 0.86);
  backdrop-filter: blur(4px);
}
.sl-demo-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 12px 0 20px;
  background: var(--raise);
}
.sl-demo-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-demo-modal-close {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.sl-demo-modal-close::before,
.sl-demo-modal-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.sl-demo-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sl-demo-modal-close:hover,
.sl-demo-modal-close:focus-visible { border-color: var(--you); color: var(--you); }
.sl-demo-modal-video {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.sl-demo-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  animation: pulse 2.2s ease-out infinite;
}

/* The triangle, nudged right of centre: a play mark centred by its box looks
   off to the left, because its weight sits on the flat side. */
.sl-demo-play::before {
  content: "";
  margin-left: 5px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--you);
}

.sl-demo-soon {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The Demos page's tag, under its headline (Yana, 2026-10-26: "put this under demos"): centred, as .kicker is
   a flex row, and with no margin of its own below, since the demos' section padding is the gap. */
.sl-demos-tag { display: flex; justify-content: center; }
.sl-demos-tag .kicker { margin-bottom: 0; }

/* The CRM in action: one stage and a list (Yana, 2026-10-24: the alternating rows felt like "endless
   scroll and everything kinda competes for attention"). The stage is the larger column, the list beside
   it on its left; a row is a quiet outline until chosen, when it takes the raised background, a teal edge and its
   one-line why. On a phone the stage goes and the chosen row opens with its own frame under its title.
   Each row leads with its video in small, a thumbnail under a play mark (Yana, 2026-10-25: as text
   alone the list did not read as videos, "i'm only seeing one"); dimmed until hovered or chosen.
   The list is on the left at a fixed width and the stage takes the rest, the rows thin (Yana, same day:
   "clickable rows are on the left ... more proportionate so the left side doesnt overhang, maybe make
   them thinner rows"), so the list ends about where the video does. */
.sl-moments {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: 36px;
}
.sl-moments-stage { margin: 0; }
.sl-moments-frame[hidden] { display: none; }
.sl-moments-list {
  display: grid;
  gap: 4px;
}
.sl-moment {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.sl-moment:hover { border-color: var(--line-strong); }
.sl-moment[aria-selected="true"] {
  background: var(--raise);
  border-color: var(--line-strong);
  border-left-color: var(--you);
}
.sl-moment:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }
.sl-moment-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 66px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(56, 217, 190, 0.07), transparent 70%),
    var(--raise);
}
.sl-moment-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.sl-moment:hover .sl-moment-thumb img,
.sl-moment[aria-selected="true"] .sl-moment-thumb img { opacity: 1; }
.sl-moment[aria-selected="true"] .sl-moment-thumb { border-color: var(--you); }
/* A video's thumbnail carries its play mark and length in one badge in the corner, as a player shows
   it ("▶ 0:23": a ring in the middle as well collided with the badge on a thumbnail this small). A demo
   still to come has no length, so it keeps the placeholder frame's mark: a grey ring (::before) and its
   triangle (::after), nudged right of centre as .sl-demo-play's is. */
.sl-moment-thumb.is-soon::before,
.sl-moment-thumb.is-soon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sl-moment-thumb.is-soon::before {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}
.sl-moment-time {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(9, 11, 13, 0.82);
  color: var(--text);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
}
.sl-moment-time::before {
  content: "";
  border-style: solid;
  border-width: 3.5px 0 3.5px 6px;
  border-color: transparent transparent transparent var(--you);
}
.sl-moment-thumb.is-soon::after {
  margin-left: 1px;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--you);
}
.sl-moment-text {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.sl-moment-title { font-weight: 600; font-size: 0.97rem; line-height: 1.3; }
.sl-moment-length {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.sl-moment-why {
  display: none;
  margin-top: 4px;
  color: var(--dim);
  font-size: 0.88rem;
  line-height: 1.45;
}
.sl-moment[aria-selected="true"] .sl-moment-why { display: block; }
/* A demo still to come, once chosen, says "Coming soon" in its frame (the stage's, or on a phone its own
   under the row), so the row's own line goes and the list stays as short as the video (six demos, Yana,
   2026-10-26). */
.sl-moment[aria-selected="true"] .sl-moment-length { display: none; }
.sl-moment-inline { display: none; }

/* Below 1180px the stage beside a 340px list is too short for the list (it would hang well below the
   video), so the phone's way takes over: rows that open one at a time, the list no wider than a
   comfortable frame. */
@media (max-width: 1180px) {
  .sl-moments { grid-template-columns: minmax(0, 720px); margin-top: 24px; }
  .sl-moments-stage { display: none; }
  .sl-moment[aria-selected="true"] + .sl-moment-inline { display: block; margin-top: 10px; }
  .sl-moment-inline .sl-demo { border-radius: 12px; }
  /* The chosen row's frame opens right under it, so its own thumbnail would say the same twice. */
  .sl-moment[aria-selected="true"] .sl-moment-thumb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-plan.is-entering { animation: none; }
  .sl-demo-play { animation: none; }
  .sl-demo-big-play, .sl-demo-open img, .sl-moment, .sl-moment-thumb img { transition: none; }
  .sl-toggle-track,
  .sl-toggle-track::after { transition: none; }
}

/* ───────────────────────────────────────────── the services' hero cards (demos page)

   Until Bamya Leads and Bamya Call have their intro videos, each service's row on the Demos page shows its
   own landing page's hero card (demos.html service_card; Yana, 2026-10-26). The card is panel.css's
   .transcript with the even stagger (.t-even), whose lines start with the page; here they are held while
   the page has its `js` class, and run once sales-demos.js marks the card in view (.is-playing). With
   motion reduced or no script, `js` is gone and the card shows finished. The selectors outweigh
   panel.css's `.transcript.t-even .t-line`, whose `animation` shorthand would otherwise set the state back. */
.js .transcript.sl-service-card .t-line { animation-play-state: paused; }
.js .transcript.sl-service-card.is-playing .t-line { animation-play-state: running; }

/* Call's card has a sixth line, one beat after .t-even's fifth. */
.transcript.t-even.sl-service-card .t-line.l6 { animation-delay: 3.90s; }

/* Call's header as on call.bamya.co (.t-head.plain there): no live dot, the title at the left and its badge
   pushed right, instead of panel.css's centred title. */
.sl-service-card .t-head.sl-plain .t-title { margin-inline: 0; }
.sl-service-card .t-head.sl-plain .t-lang { margin-left: auto; }