/* Homepage pricing: "Firm / University / Enterprise" card with licence estimator (Shane, 24 Oct 2026; concept 2 "Split").
   Replaces the old #org-plan card. Scoped to .lic. Uses site tokens from css/site.css. */

.plans.single > .lic { flex: 1 1 100%; max-width: 1080px; }
.lic { width: 100%; max-width: 1080px; margin: 0 auto; display: flex; gap: 24px; align-items: stretch; text-align: left; }
.lic[hidden] { display: none; }

/* Left: tiers and features */
.lic-card { flex: 1 1 0; min-width: 0; background: #fff; border-radius: 26px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.lic-from { margin: 0; font-size: 52px; line-height: 1; letter-spacing: -.035em; }
.lic-from b { font-weight: 800; }
.lic-unit { margin: -12px 0 0; font-size: 16px; font-weight: 600; color: var(--muted); }
.lic-tiers { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.lic-tiers th { padding: 0 10px 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: left; }
.lic-tiers th:last-child, .lic-tiers td:last-child { text-align: right; }
.lic-tiers td { padding: 2px 10px; border-top: 1px solid #EFECE6; font-weight: 500; }
.lic-tiers td:last-child { padding: 11px 10px; }
.lic-tiers tr.is-on td { background: #FFF3CC; font-weight: 800; }
.lic-tiers tr.is-on td:first-child { border-radius: 10px 0 0 10px; }
.lic-tiers tr.is-on td:last-child { border-radius: 0 10px 10px 0; }
.lic-tier { width: 100%; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lic-tier:hover { color: var(--link); }
.lic-card .ticks { margin: 0; }
.lic-fn { margin-top: auto; }

/* Right: dark estimator */
.lic-est { flex: 0 0 440px; box-sizing: border-box; background: #1D1D1F; color: #fff; border-radius: 26px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.lic-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--cta, #FFC21A); }
.lic-field { display: flex; flex-direction: column; gap: 10px; }
.lic-field label { font-size: 15px; font-weight: 600; color: #fff; }
.lic-step { display: flex; align-items: center; gap: 10px; }
.lic-step button { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #636366; background: transparent; color: #fff; font: 600 22px Inter, system-ui, sans-serif; cursor: pointer; }
.lic-step button:hover { border-color: #fff; }
.lic-step input { flex: 1; min-width: 0; height: 56px; box-sizing: border-box; border-radius: 14px; border: 1.5px solid #636366; background: #2C2C2E; padding: 0 16px; font: 800 26px Inter, system-ui, sans-serif; text-align: center; color: #fff; -moz-appearance: textfield; }
.lic-step input::-webkit-inner-spin-button, .lic-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lic-range { width: 100%; accent-color: var(--cta, #FFC21A); }
.lic-ticks { display: flex; justify-content: space-between; font-size: 12px; color: #fff; }
.lic-out { padding-top: 18px; border-top: 1px solid #3A3A3C; display: flex; flex-direction: column; gap: 6px; }
.lic-out[hidden] { display: none; }
.lic-total { margin: 0; font-size: 54px; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.lic-l1 { margin: 0; font-size: 15px; color: #D1D1D6; }
.lic-l2 { margin: 0; font-size: 14px; color: #AEAEB2; }
.lic-tip { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--cta, #FFC21A); }
.lic-tip[hidden], .lic-small[hidden] { display: none; }
.lic-small { margin: 0; padding-top: 18px; border-top: 1px solid #3A3A3C; font-size: 15px; color: #D1D1D6; }
.lic-actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.lic-contact { background: transparent; color: #fff; border: 1.5px solid #fff; }
.lic-contact:hover { background: #fff; color: #1D1D1F; }
.lic-terms { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #AEAEB2; text-align: center; }
.lic button:focus-visible, .lic input:focus-visible, .lic a:focus-visible { outline: 3px solid var(--ocean, #e10600); outline-offset: 2px; }

@media (max-width: 899px) {
  .lic { flex-direction: column; }
  .lic-est { flex: 1 1 auto; order: -1; }
  .lic-card, .lic-est { padding: 28px 22px; border-radius: 22px; }
  .lic-from { font-size: 42px; }
  .lic-total { font-size: 46px; }
}
@media (forced-colors: active) {
  .lic-tiers tr.is-on td { outline: 2px solid Highlight; }
}
/* 1 Nov 2026 (Coop): a more compact dark estimator on phones; desktop unchanged. Tap targets stay at least 44px. */
@media (max-width: 599px) {
  .lic-est { padding: 20px 18px; gap: 14px; border-radius: 20px; }
  .lic-eyebrow { font-size: 12px; }
  .lic-field { gap: 6px; }
  .lic-field label { font-size: 14px; }
  .lic-step button { width: 44px; height: 44px; font-size: 20px; }
  .lic-step input { height: 44px; font-size: 20px; border-radius: 12px; }
  .lic-out, .lic-small { padding-top: 12px; gap: 4px; }
  .lic-total { font-size: 36px; }
  .lic-l1 { font-size: 14px; }
  .lic-l2, .lic-tip { font-size: 13px; }
  .lic-actions { gap: 8px; }
  .lic-actions .btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .lic-terms { font-size: 12px; margin-top: 0; }
}
/* 1 Nov 2026 (Coop): when the boxes stack (phones and narrow screens), the white licence box comes first and the dark estimator sits below it. Desktop unchanged. */
@media (max-width: 899px) {
  .lic-card { order: 0; }
  .lic-est { order: 1; }
}
/* 1 Nov 2026 (Coop, mockup A): the dark estimator sits behind a "Bulk licences" side tab and slides out when the tab is pressed.
   Desktop: tab on the right edge of the white box, panel slides across beside it. Under 900px: tab is a bar under the white box and the panel drops down. */
.lic { gap: 0; }
.lic > .lic-card { flex: 1 1 auto; position: relative; z-index: 1; }
.lic-tab { flex: 0 0 64px; margin-left: -26px; padding: 0 0 0 26px; border: 0; border-radius: 0 26px 26px 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 44px;
  background: linear-gradient(95deg, #FFD60A 0%, #FFD60A 55%, #FF8A00 80%, #F2501E 100%); color: #1D1D1F; font: 800 15px Inter, system-ui, sans-serif; letter-spacing: .02em; }
.lic-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }
.lic-tab svg { transition: transform .4s; }
.lic-tab[aria-expanded="true"] svg { transform: rotate(180deg); }
.lic-panel { flex: 0 0 0; overflow: hidden; transition: flex-basis .45s ease, margin .45s ease; }
.lic-panel > .lic-est { width: 440px; height: 100%; }
.lic.is-open .lic-panel { flex-basis: 440px; margin-left: 16px; }
.lic .lic-tab:focus-visible { outline: 3px solid #1D1D1F; outline-offset: 3px; }
/* Focus inside the dark panel: a soft yellow ring, so it does not look like an error */
.lic .lic-est input:focus-visible { outline: 2px solid var(--cta, #FFC21A); outline-offset: 2px; }
@media (max-width: 899px) {
  .lic-tab { flex: none; order: 1; margin: -26px 0 0; padding: 40px 22px 16px; border-radius: 0 0 22px 22px; flex-direction: row; }
  .lic-tab span { writing-mode: horizontal-tb; transform: none; }
  .lic-tab svg { transform: rotate(90deg); }
  .lic-tab[aria-expanded="true"] svg { transform: rotate(-90deg); }
  .lic-panel { flex: none; order: 2; max-height: 0; transition: max-height .45s ease, margin .45s ease; }
  .lic.is-open .lic-panel { flex-basis: auto; max-height: 1400px; margin: 14px 0 0; }
  .lic-panel > .lic-est { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .lic-tab svg, .lic-panel { transition: none; } }
@media (forced-colors: active) { .lic-tab { border: 2px solid ButtonText; } }