/* pricing-packages.css — Iris r2 Nov 5 2026: official price list, two product sections
   shotfix: dark product bands must NOT use .light/.white (those set ink-on-cream). */

.k-pricing-packages .pbar-slim{background:#161619;border-bottom:1px solid rgba(255,138,31,.35)}
.k-pricing-packages .pbar-slim .pbar-o{font-size:13px;color:var(--muted)}

/* Sticky top sits in flow at rest; give hero a little air under sticky height when scrolled */
.k-pricing-packages .h3x.pr-hero{scroll-margin-top:0}
.k-pricing-packages #front-desk,
.k-pricing-packages #mango-system,
.k-pricing-packages #ai-desk,
.k-pricing-packages #fd-plan,
.k-pricing-packages #fd-plus,
.k-pricing-packages #fd-pro,
.k-pricing-packages #fd-dedicated,
.k-pricing-packages #sys-core,
.k-pricing-packages #sys-booking,
.k-pricing-packages #sys-pro,
.k-pricing-packages #sys-vip,
.k-pricing-packages #billing-details,
.k-pricing-packages [id^="fn-"]{scroll-margin-top:110px}

/* Dark product sections: force light-on-dark tokens (overrides any leftover light/white) */
.k-pricing-packages .sec-fd,
.k-pricing-packages .sec-sys{
  --text:#F5F5F7;
  --muted:#A1A1AA;
  --dim:#6B6B73;
  --card:#141416;
  --card-2:#1A1A1D;
  --line:#232327;
  --line-2:#2E2E34;
  color:var(--text);
}
.k-pricing-packages .sec-fd{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,138,31,.10),transparent 140px),#0B0B0C;
}
.k-pricing-packages .sec-sys{
  border-top:3px solid rgba(255,138,31,.45);
  background:linear-gradient(180deg,rgba(80,140,255,.07),transparent 120px),#0E0E10;
}
.k-pricing-packages .sec-fd .eb,
.k-pricing-packages .sec-sys .eb{color:var(--o);letter-spacing:.12em}
.k-pricing-packages .sec-fd .h2,
.k-pricing-packages .sec-sys .h2,
.k-pricing-packages .sec-fd h3,
.k-pricing-packages .sec-sys h3{color:var(--text)}
.k-pricing-packages .sec-fd .lede,
.k-pricing-packages .sec-sys .lede{color:var(--muted)}
.k-pricing-packages .sec-fd .tl,
.k-pricing-packages .sec-sys .tl{color:var(--o)}
.k-pricing-packages .sec-fd .fine3,
.k-pricing-packages .sec-sys .fine3,
.k-pricing-packages .sec-fd .pnote,
.k-pricing-packages .sec-sys .pnote{color:var(--muted)}
.k-pricing-packages .sec-fd .btn.ghost,
.k-pricing-packages .sec-sys .btn.ghost{
  color:var(--text);
  border-color:rgba(255,255,255,.22);
  background:transparent;
}
.k-pricing-packages .sec-fd .pl3 .cap,
.k-pricing-packages .sec-fd .pl3 .best,
.k-pricing-packages .sec-sys .swp .best{color:var(--o)}
.k-pricing-packages .sec-fd .pl3 .val{color:var(--text)}
.k-pricing-packages .sec-cta{margin-top:8px;margin-bottom:8px}

.k-pricing-packages .plans3-4{grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1100px){.k-pricing-packages .plans3-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.k-pricing-packages .plans3-4{grid-template-columns:1fr}}

.k-pricing-packages .pl3-wide{
  margin-top:18px;border-radius:24px;padding:28px 32px;
  background:var(--card);border:1px dashed rgba(255,138,31,.45);
  color:var(--text);
}
.k-pricing-packages .pl3-wide-g{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.k-pricing-packages .pl3-wide .pr{margin:0;font-size:40px;color:var(--text)}
.k-pricing-packages .swp-sys .aka{font-weight:500;color:var(--muted);font-size:13px}
.k-pricing-packages .sys-links{margin-top:18px;font-size:14px;color:var(--muted);line-height:1.7}
.k-pricing-packages .cta3-neutral{
  background:linear-gradient(180deg,#17171A,#111113);
  border:1px solid var(--line);border-radius:28px;padding:40px;text-align:center;
  color:#F5F5F7;
}
.k-pricing-packages .fit3 ul{max-height:none}
.k-pricing-packages .pnote{margin-top:22px;font-size:15px;text-align:center}

/* Comparison table visible (details[open]); keep readable on dark band */
.k-pricing-packages .sec-fd details.od[open]{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:8px 18px 18px;
  color:var(--text);
}
.k-pricing-packages .sec-fd details.od summary{color:var(--text)}
.k-pricing-packages .sec-fd .tbl{color:var(--text)}
.k-pricing-packages .sec-fd .tbl thead th{color:var(--muted)}
.k-pricing-packages .sec-fd .tbl td,
.k-pricing-packages .sec-fd .tbl th{border-color:var(--line)}

/* Reveals: keep animation, but never leave content washed out if IO misses */
.k-pricing-packages.js .reveal,
.k-pricing-packages .reveal{
  opacity:1;
  transform:none;
}

/* r3 Nova FIX: longer compare headers (Front Desk Plus / Front Desk Pro) */
.k-pricing-packages .sec-fd .tbl thead th{
  white-space: normal;
  line-height: 1.25;
  vertical-align: bottom;
  font-size: 12px;
  letter-spacing: .04em;
  max-width: 9.5em;
}
.k-pricing-packages .sec-fd .tbl thead th:first-child{max-width: none}
@media(min-width:1100px){
  .k-pricing-packages .sec-fd .tbl thead th{font-size:12.5px; max-width:11em}
}

/* r4 Sean hero: two equal product blocks */
.k-pricing-packages .h3x.pr-hero{
  overflow: visible;
  padding: 64px 0 72px;
}
.k-pricing-packages .hero-top{
  max-width: 40em;
  margin: 0 auto 40px;
  text-align: center;
}
.k-pricing-packages .hero-top .crumb{justify-content:center}
.k-pricing-packages .hero-top h1{max-width: 16ch; margin-left:auto; margin-right:auto}
.k-pricing-packages .hero-top .sub{
  margin: 18px auto 0;
  max-width: 36em;
  color: #555A61;
}
.k-pricing-packages .hero-duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.k-pricing-packages .hero-block{
  background: #fff;
  border: 1px solid rgba(21,23,26,.09);
  border-radius: 28px;
  padding: 28px 28px 26px;
  box-shadow: 0 30px 60px -36px rgba(40,30,20,.28);
  display: flex;
  flex-direction: column;
  color: #15171A;
  overflow: visible;
}
.k-pricing-packages .hero-block .eb{
  margin-bottom: 10px;
  color: var(--o-d);
}
.k-pricing-packages .hero-plain{
  font-size: 16.5px;
  line-height: 1.45;
  color: #555A61;
  margin: 0 0 16px;
}
.k-pricing-packages .hero-from{
  font-size: 18px;
  color: #5B5F66;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.k-pricing-packages .hero-from b{
  font-size: clamp(40px, 4.5vw, 52px);
  font-weight: 750;
  letter-spacing: -.045em;
  color: #15171A;
  line-height: 1;
}
.k-pricing-packages .hero-from small{
  font-size: 16px;
  font-weight: 500;
  color: #7A7E85;
  margin-left: 2px;
}
.k-pricing-packages .hero-ladder{
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  border-top: 1px solid rgba(21,23,26,.08);
}
.k-pricing-packages .hero-ladder li{border-bottom: 1px solid rgba(21,23,26,.08)}
.k-pricing-packages .hero-ladder a{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px;
  color: inherit;
  text-decoration: none;
}
.k-pricing-packages .hero-ladder a:hover b{color: var(--o-d)}
.k-pricing-packages .hero-ladder .hn{display: flex; flex-direction: column; gap: 2px; min-width: 0}
.k-pricing-packages .hero-ladder b{font-size: 16.5px; font-weight: 700; letter-spacing: -.015em}
.k-pricing-packages .hero-ladder i{
  font-style: normal;
  font-size: 13px;
  color: #7A7E85;
  font-weight: 500;
}
.k-pricing-packages .hero-ladder .hp{
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -.02em;
}
.k-pricing-packages .hero-ded{
  font-size: 13.5px;
  color: #7A7E85;
  margin: 0 0 18px;
}
.k-pricing-packages .hero-block .btn{
  margin-top: auto;
  width: 100%;
  height: 48px;
  font-size: 15.5px;
}
.k-pricing-packages .hero-setup{
  margin: 22px auto 0;
  text-align: center;
  font-size: 14.5px;
  color: #7A7E85;
}
@media(max-width: 960px){
  .k-pricing-packages .h3x.pr-hero{padding: 48px 0 56px}
  .k-pricing-packages .hero-top{margin-bottom: 28px; text-align: left; max-width: none}
  .k-pricing-packages .hero-top h1{margin-left: 0; margin-right: 0; max-width: none}
  .k-pricing-packages .hero-top .sub{margin-left: 0}
  .k-pricing-packages .hero-top .crumb{justify-content: flex-start}
  .k-pricing-packages .hero-duo{grid-template-columns: 1fr; gap: 16px}
  .k-pricing-packages .hero-block{padding: 24px 20px 22px; border-radius: 22px}
  .k-pricing-packages .hero-from b{font-size: 44px}
}