/* Public Pricing page (Views/Pricing/Index.cshtml), implemented from the Pricing page of the "Website redesign"
   reference mockup in docs/. Loaded only by /pricing, on top of marketing-site.css (Geist, tokens, .wrap and the .pill
   buttons). Every rule is under .mk-pricing and every class is .mk-pricing-*, so nothing here can reach the homepage
   illustrations, the header or footer, or any portal page. The values are the mockup's (its later V3–V8 cascade). */

/* ---- Head */
.mk-pricing .mk-pricing-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 72px;
}

.mk-pricing .mk-pricing-title {
  font-size: 46px;
  line-height: 1.08;
  max-width: 760px;
}

.mk-pricing .mk-pricing-lead {
  margin: 0;
  max-width: 560px;
  font-size: 18.5px;
  line-height: 1.58;
  color: #3B4350;
}

/* ---- Calculator */
.mk-pricing .mk-pricing-calc {
  margin-top: 48px;
  border: 1px solid #E4E7EC;
  border-radius: 22px;
  padding: 28px 34px 22px;
  background: linear-gradient(#FFFFFF, #FAFBFC);
}

.mk-pricing .mk-pricing-calc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.mk-pricing .mk-pricing-calc-question {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: #2B3340;
}

.mk-pricing .mk-pricing-calc-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 52px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #D9DDE3;
  border-radius: 12px;
  background: #fff;
}

.mk-pricing .mk-pricing-calc-value b {
  min-width: 120px;
  text-align: right;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: #0B1220;
}

.mk-pricing .mk-pricing-calc-value span {
  font-size: 14px;
  color: #6B7380;
}

/* The drawn track. The native range lies over it, transparent, 8px wider on each side with a 16px thumb, so the native
   thumb's centre travels exactly the drawn track; the drawn fill and thumb follow its position (teams-pricing.js). */
.mk-pricing .mk-pricing-track {
  position: relative;
  height: 10px;
  margin: 0 8px;
  border-radius: 99px;
  background: #ECEEF1;
}

/* Fill and thumb follow --mk-pricing-at (0–1) on the track with NO transition: they move with the pointer in the same
   frame (the mockup's 120ms easing made the thumb trail the pointer). */
.mk-pricing .mk-pricing-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--mk-pricing-at, 0) * 100%);
  border-radius: 99px;
  background: #1A5CFF;
}

.mk-pricing .mk-pricing-range {
  position: absolute;
  left: -8px;
  top: -14px;
  z-index: 2;
  width: calc(100% + 16px);
  height: 38px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.mk-pricing .mk-pricing-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 26px;
}

.mk-pricing .mk-pricing-range::-moz-range-thumb {
  width: 16px;
  height: 26px;
  border: 0;
}

.mk-pricing .mk-pricing-thumb {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid #1A5CFF;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(26, 92, 255, .3);
  pointer-events: none;
  left: calc(var(--mk-pricing-at, 0) * 100%);
}

/* The native control keeps keyboard focus; its ring is drawn on the visible thumb. */
.mk-pricing .mk-pricing-range:focus-visible + .mk-pricing-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1A5CFF, 0 4px 12px rgba(26, 92, 255, .3);
}

.mk-pricing .mk-pricing-milestones {
  position: relative;
  height: 36px;
  margin: 12px 8px 0;
}

.mk-pricing .mk-pricing-milestone {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 500;
  color: #6B7380;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---- Plans */
.mk-pricing .mk-pricing-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.mk-pricing .mk-pricing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1px solid #E4E7EC;
  border-radius: 22px;
  background: #fff;
}

.mk-pricing .mk-pricing-plan-free {
  background: #FCFCFD;
}

/* The best fit for the selected volume (teams-pricing.js): the accent moves between cards. Every card already has the
   same 1px border, and the extra weight is an INSET shadow, so moving it changes no size or position. Pro keeps its
   permanent "Most popular" badge either way. */
.mk-pricing .mk-pricing-plan {
  transition: border-color .25s, box-shadow .25s;
}

.mk-pricing .mk-pricing-plan.is-best-fit {
  border-color: #1A5CFF;
  box-shadow: inset 0 0 0 1px #1A5CFF, 0 24px 50px -30px rgba(26, 92, 255, .5);
}

/* Fixed on Pro; sits across the card's top edge (the card does not clip). */
.mk-pricing .mk-pricing-popular {
  position: absolute;
  top: -12px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid #C9D8FF;
  border-radius: 99px;
  background: #fff;
  color: #1448CC;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mk-pricing .mk-pricing-plan-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

/* "Lowest cost at this volume" (the mockup's .pbadge/.lowb). Every card reserves the same 24px row, drawn ABOVE the plan
   name (order: -1) but after it in the DOM, so it is read after the name. Inactive: visibility hidden — keeps its height,
   so nothing in the card moves, and leaves the accessibility tree. Shown only by .is-best-fit, the class that also draws
   the accent border. On Pro it sits below the fixed "Most popular" badge on the top edge; both can show at once. */
.mk-pricing .mk-pricing-fit {
  order: -1;
  display: flex;
  align-items: center;
  height: 24px;
  margin: 0;
}

.mk-pricing .mk-pricing-fit-label {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 99px;
  background: #EAF0FF;
  color: #1448CC;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s, visibility .25s;
}

.mk-pricing .mk-pricing-plan.is-best-fit .mk-pricing-fit-label {
  visibility: visible;
  opacity: 1;
}

.mk-pricing .mk-pricing-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mk-pricing .mk-pricing-total-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6B7380;
}

.mk-pricing .mk-pricing-total-value {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #0B1220;
}

.mk-pricing .mk-pricing-total-note {
  font-size: 14px;
  color: #6B7380;
}

.mk-pricing .mk-pricing-breakdown {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid #EEF0F3;
  border-radius: 12px;
  overflow: hidden;
}

.mk-pricing .mk-pricing-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid #F2F4F6;
  font-size: 13.5px;
}

.mk-pricing .mk-pricing-breakdown-row:first-child {
  border-top: 0;
}

.mk-pricing .mk-pricing-breakdown-row dt {
  font-weight: 400;
  color: #5A6372;
}

.mk-pricing .mk-pricing-breakdown-row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #0B1220;
}

/* Two lines are always reserved, so the Free card's content does not move when the message changes length. */
.mk-pricing .mk-pricing-free-status {
  justify-content: flex-start;
  align-items: center;
  min-height: calc(2 * 1.4em + 19px); /* two lines + padding + the 1px top border (border-box) */
}

.mk-pricing .mk-pricing-free-status dd {
  line-height: 1.4;
}

.mk-pricing .mk-pricing-free-status dd {
  white-space: normal;
  font-size: 13.5px;
}

.mk-pricing .mk-pricing-free-status.is-covered {
  background: #EEF8F3;
}

.mk-pricing .mk-pricing-free-status.is-covered dd {
  color: #0F7B55;
}

.mk-pricing .mk-pricing-free-status.is-over {
  background: #FFF6E8;
}

.mk-pricing .mk-pricing-free-status.is-over dd {
  color: #8A5300;
}

.mk-pricing .mk-pricing-features,
.mk-pricing .mk-pricing-soon {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-pricing .mk-pricing-features {
  gap: 9px;
}

.mk-pricing .mk-pricing-features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
}

.mk-pricing .mk-pricing-features svg {
  flex: none;
}

.mk-pricing .mk-pricing-soon-heading {
  margin: -4px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6B7380;
}

.mk-pricing .mk-pricing-soon {
  gap: 7px;
}

.mk-pricing .mk-pricing-soon li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #5A6372;
}

.mk-pricing .mk-pricing-soon-dot {
  flex: none;
  width: 13px;
  height: 13px;
  margin: 0 1px;
  border: 1.5px solid #B9C0CA;
  border-radius: 99px;
}

/* Every card's button on its bottom edge, whatever its content height. */
.mk-pricing .mk-pricing-cta {
  width: 100%;
  margin-top: auto;
}

.mk-pricing .mk-pricing-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: #4A5361;
}

.mk-pricing .mk-pricing-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mk-pricing .mk-pricing-trust a {
  font-weight: 600;
  color: #1448CC;
}

.mk-pricing .mk-pricing-trust a:hover {
  text-decoration: underline;
}

.mk-pricing .mk-pricing-trust-tax {
  margin-left: auto;
  color: #6B7380;
}

/* ---- Sections */
.mk-pricing .mk-pricing-section {
  padding-top: 80px;
}

.mk-pricing .mk-pricing-section-title {
  margin: 0 0 32px;
  font-size: 38px;
  line-height: 1.12;
}

/* ---- Plans and features: a real table in the mockup's rounded frame; the frame alone scrolls on narrow screens. */
/* position: relative is load-bearing: the cells' visually-hidden state labels are absolutely positioned, and without a
   positioned scroller they would be placed against the page and widen it on narrow screens. */
.mk-pricing .mk-pricing-table-scroll {
  position: relative;
  border: 1px solid #E4E7EC;
  border-radius: 18px;
  overflow-x: auto;
}

.mk-pricing .mk-pricing-table-scroll:focus-visible {
  outline: 2px solid #1A5CFF;
  outline-offset: 2px;
}

/* The scroller is overflow-x: auto, which makes overflow-y compute to auto as well, so ANY vertical overflow — even 1px —
   draws a vertical scrollbar. Bootstrap keeps a visually hidden <caption> in flow as a 1px box (only non-captions go
   absolute), which made the table 1px taller than its scroller. A zero-height, clipped caption is still the table's
   accessible name but adds no height. No max-height: every row is always shown. */
.mk-pricing .mk-pricing-table > caption.visually-hidden {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mk-pricing .mk-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.mk-pricing .mk-pricing-table-feature {
  width: 32%;
}

.mk-pricing .mk-pricing-table th,
.mk-pricing .mk-pricing-table td {
  padding: 13px 8px;
  border-top: 1px solid #F0F2F5;
  text-align: center;
  vertical-align: middle;
}

.mk-pricing .mk-pricing-table th:first-child {
  padding-left: 22px;
  text-align: left;
}

.mk-pricing .mk-pricing-table tr > :last-child {
  padding-right: 22px;
}

.mk-pricing .mk-pricing-table tbody th {
  font-weight: 400;
}

.mk-pricing .mk-pricing-table thead th {
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 0;
  background: #FAFBFC;
  font-weight: 600;
}

.mk-pricing .mk-pricing-table thead b {
  display: block;
  font-weight: 600;
}

.mk-pricing .mk-pricing-table-price {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: #6B7380;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mk-pricing .mk-pricing-cell-yes {
  font-weight: 700;
  color: #0F7B55;
}

.mk-pricing .mk-pricing-cell-no {
  color: #9AA4B5;
}

.mk-pricing .mk-pricing-cell-soon {
  font-size: 12px;
  font-weight: 600;
  color: #6B7380;
}

.mk-pricing .mk-pricing-table-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #6B7380;
}

/* ---- FAQ: native details/summary in the mockup's two-column layout. */
.mk-pricing .mk-pricing-faq {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 60px;
  padding-top: 60px;
}

.mk-pricing .mk-pricing-faq-intro .mk-pricing-section-title {
  margin-bottom: 12px;
  font-size: 34px;
  line-height: 1.1;
}

.mk-pricing .mk-pricing-faq-intro p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  color: #5A6372;
}

.mk-pricing .mk-pricing-faq-list details {
  border-bottom: 1px solid #EEF0F3;
}

.mk-pricing .mk-pricing-faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 500;
  color: #0B1220;
  cursor: pointer;
  list-style: none;
}

.mk-pricing .mk-pricing-faq-list summary::-webkit-details-marker {
  display: none;
}

.mk-pricing .mk-pricing-faq-list summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #6B7380;
  transition: transform .2s;
}

.mk-pricing .mk-pricing-faq-list details[open] summary::after {
  transform: rotate(45deg);
  color: #1A5CFF;
}

.mk-pricing .mk-pricing-faq-list summary:focus-visible {
  outline: 2px solid #1A5CFF;
  outline-offset: 2px;
  border-radius: 4px;
}

.mk-pricing .mk-pricing-faq-list details p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #4A5361;
}

/* ---- Narrow screens (the mockup's mobile composition) */
@media (max-width: 860px) {
  .mk-pricing .mk-pricing-head { padding-top: 44px; }
  .mk-pricing .mk-pricing-title { font-size: 32px; }
  .mk-pricing .mk-pricing-lead { font-size: 17px; }
  .mk-pricing .mk-pricing-calc { margin-top: 32px; padding: 20px 18px; }
  .mk-pricing .mk-pricing-calc-top { flex-direction: column; align-items: stretch; gap: 10px; }
  .mk-pricing .mk-pricing-calc-value b { min-width: 0; flex: 1; }
  .mk-pricing .mk-pricing-milestone { font-size: 11px; padding: 4px 2px; }
  .mk-pricing .mk-pricing-milestone-minor { visibility: hidden; }
  .mk-pricing .mk-pricing-plans { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mk-pricing .mk-pricing-total-value { font-size: 40px; }
  .mk-pricing .mk-pricing-trust-tax { margin-left: 0; }
  .mk-pricing .mk-pricing-section { padding-top: 64px; }
  .mk-pricing .mk-pricing-section-title { font-size: 30px; margin-bottom: 24px; }
  .mk-pricing .mk-pricing-table { min-width: 420px; font-size: 13px; }
  .mk-pricing .mk-pricing-table-feature { width: 150px; }
  .mk-pricing .mk-pricing-table th:first-child { padding-left: 14px; }
  .mk-pricing .mk-pricing-table tr > :last-child { padding-right: 14px; }
  .mk-pricing .mk-pricing-faq { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 48px; }
  .mk-pricing .mk-pricing-faq-intro .mk-pricing-section-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-pricing .mk-pricing-plan,
  .mk-pricing .mk-pricing-fit-label,
  .mk-pricing .mk-pricing-faq-list summary::after { transition: none; }
}