/* ─────────────────────────────────────────────── sales.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.

   Two 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:
                        a line of switches, the one plan they add up to, and
                        the Compare plans table (outreach_crm
                        static/css/billing.css is the original, in the app's
                        own tokens)
*/

/* ───────────────────────────────────────────── 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

   One line of switches, each named above and explained below, wrapping on a
   phone. 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). */
.sl-chooser {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px 38px;
  max-width: 760px;
  margin: 40px auto 0;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--raise);
}

.sl-chooser-divider { width: 1px; background: var(--line-strong); }

@media (max-width: 560px) {
  .sl-chooser { gap: 16px 22px; }
  .sl-chooser-divider { display: none; }
}

.sl-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 86px;
  text-align: center;
  cursor: pointer;
}

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

.sl-toggle-name { font-size: 0.92rem; font-weight: 600; color: var(--text); white-space: nowrap; }

.sl-toggle-hint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--faint);
  white-space: nowrap;
}

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

.sl-toggle-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; }
.sl-toggle:not(.is-locked):hover .sl-toggle-track { border-color: rgba(255, 255, 255, 0.32); }

/* Why a locked switch did not move: said under the chooser, 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: 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--you);
}

/* ───────────────────────────────────────────── the plan the switches give

   One card, centred, arriving as it changes. Its own class, not .card, so
   panel.js's grid drift never claims it: a hidden card shown again mid-tween
   would land somewhere else. */
.sl-stage { max-width: 520px; margin: 10px auto 0; }

.sl-plan {
  background: var(--raise);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 30px 30px 28px;
  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 {
  margin-top: 10px;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  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-none { padding: 26px 0; text-align: center; color: var(--dim); }

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

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

/* ───────────────────────────────────────────── compare plans

   The application's Compare plans table, in this palette: a column per plan
   with its price at the head, rows grouped by product, a line under each
   name saying what it is. It scrolls sideways inside its own box on a narrow
   screen, never the page. */
.sl-compare-wrap {
  margin-top: 40px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--raise);
}

.sl-compare { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }

.sl-compare th,
.sl-compare td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.sl-compare thead th { padding: 22px 14px 18px; border-bottom: 1px solid var(--line-strong); }
.sl-compare tbody tr:not(.sl-compare-group):hover { background: rgba(255, 255, 255, 0.025); }
.sl-compare tbody tr:last-child td,
.sl-compare tbody tr:last-child th { border-bottom: 0; }

.sl-compare-what { width: 34%; font-weight: 400; }
.sl-compare-what b { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.sl-compare-what span { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.45; color: var(--faint); }

.sl-compare-col { text-align: center; }

.sl-compare-tier {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.sl-compare-price { display: block; margin-top: 6px; font-size: 1.35rem; font-weight: 800; color: var(--text); }
.sl-compare-note { display: block; font-size: 0.75rem; color: var(--faint); }

.sl-compare tbody td { text-align: center; font-size: 0.88rem; color: var(--text); }
.sl-compare tbody td small { color: var(--faint); }

.sl-compare-group th {
  padding: 24px 14px 6px;
  border-bottom: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--you);
}

/* Teal for included; a dash, not a cross, for not: each plan is the one
   before it plus more, and a column of crosses reads as what is withheld. */
.sl-compare-yes { color: var(--you); font-weight: 700; }
.sl-compare-no { color: var(--faint); }

@media (max-width: 560px) {
  .sl-compare-what span { display: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  .sl-plan.is-entering { animation: none; }
  .sl-toggle-track,
  .sl-toggle-track::after { transition: none; }
}