/* =========================================================
   Pricing page (owner, 2026-10-01: option A of the Sept-2026 pricing mockups, "build and ship").
   Layered on styles.css + platform.css: the four bubbles and the price panel are platform.css's
   .pplans/.ppanel; this adds what sits around and beneath them — the second line of plans in the
   Construct panel, the licence comparison table, Construct team pools, the perks strip and the closing
   CTA. Every colour is one of the site's own custom properties.
   ========================================================= */

/* ---------- price panel additions (option A) ---------- */
.ppanel__figure small { font-size: 0.34em; letter-spacing: -0.01em; -webkit-text-fill-color: var(--slate-300); margin-left: 4px; }
.ppanel__also { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(148, 163, 184, 0.16); display: grid; gap: 8px; }
.ppanel__also p { font-size: 13.5px; color: var(--slate-300); line-height: 1.45; }
.ppanel__also b { color: var(--white); font-family: var(--font-head); }
.ppanel__also a { color: var(--c); font-weight: 600; }

/* ---------- comparison table ---------- */
.cmp { background: var(--white); }
/* position: relative keeps the table's screen-reader caption (position: absolute) INSIDE this scroller.
   Without it the caption's containing block is the page, so the 760px table escapes the scroller and
   phones widen the whole page to ~590px: it slides sideways and the menu button sits off-screen. */
.cmp__wrap { position: relative; max-width: 1120px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--slate-200); border-radius: var(--radius); box-shadow: var(--shadow-md); background: var(--white); }
.cmp table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--slate-100); vertical-align: middle; }
.cmp th:first-child, .cmp td:first-child {
  text-align: left; position: sticky; left: 0; z-index: 1; background: var(--white); width: 34%;
  box-shadow: 1px 0 0 var(--slate-100);
}
.cmp thead th { position: sticky; top: 0; z-index: 2; background: var(--white); padding: 22px 14px 18px; border-bottom: 2px solid var(--slate-200); vertical-align: bottom; }
.cmp thead th:first-child { z-index: 3; }
.cmp__tier { display: block; font: 800 16px/1.2 var(--font-head); color: var(--slate-900); }
.cmp__tier i { font-style: normal; display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 4px; }
.cmp__cost { display: block; margin-top: 6px; font: 800 20px/1 var(--font-head); color: var(--blue-deep); }
.cmp__cost small { font-size: 12px; font-weight: 600; color: var(--slate-500); }
.cmp__pop { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(100deg, var(--blue), var(--cyan)); color: var(--white); font: 700 10px/1.4 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; }
.cmp .is-hl { background: rgba(59, 130, 246, 0.05); }
.cmp thead th.is-hl { background: #f3f7ff; box-shadow: inset 0 3px 0 var(--blue); }
.cmp__grp td { background: var(--slate-50) !important; font: 700 11.5px/1 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-500); padding-top: 16px; padding-bottom: 12px; }
.cmp__feat { font-weight: 600; color: var(--slate-900); }
.cmp__feat small { display: block; font-weight: 400; font-size: 13px; color: var(--slate-500); margin-top: 3px; line-height: 1.4; }
.cmp__txt { font-weight: 600; color: var(--slate-700); font-size: 14px; }
.yes, .no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.yes { background: rgba(52, 211, 153, 0.16); }
.yes::before { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #059669; border-bottom: 2.5px solid #059669; transform: translateY(-1px) rotate(-45deg); }
.no::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: var(--slate-300); }
.cmp tfoot td { border-bottom: 0; padding: 20px 12px 24px; }
.cmp tfoot .btn { font-size: 14px; padding: 11px 18px; }
.cmp__foot { max-width: 1120px; margin: 16px auto 0; font-size: 13.5px; color: var(--slate-500); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Team pools (Construct licences only) ---------- */
.pools { background: var(--slate-50); }
.pools__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; max-width: 1120px; margin: 0 auto; align-items: start; }
.pools__card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-md); }
.pools__card h3 { font-size: 19px; margin-bottom: 4px; }
.pools__card > p { font-size: 14.5px; color: var(--slate-600); }
.bill { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--slate-100); border: 1px solid var(--slate-200); margin: 18px 0 16px; }
.bill button { font: 600 14px/1 var(--font-head); padding: 10px 16px; border-radius: 999px; border: 0; background: none; color: var(--slate-600); cursor: pointer; }
.bill button[aria-pressed="true"] { background: var(--white); color: var(--slate-900); box-shadow: 0 2px 8px rgba(15, 29, 51, 0.12); }
.bill__save { margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: rgba(52, 211, 153, 0.18); color: #047857; font-size: 11px; }
.ptab { width: 100%; border-collapse: collapse; font-size: 15px; }
.ptab th { text-align: left; font: 700 11.5px/1 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-500); padding: 0 10px 10px; border-bottom: 2px solid var(--slate-200); }
.ptab td { padding: 13px 10px; border-bottom: 1px solid var(--slate-100); color: var(--slate-700); }
.ptab td:first-child { font-weight: 700; color: var(--slate-900); font-family: var(--font-head); }
.ptab .amt { font-family: var(--font-head); font-weight: 700; color: var(--blue-deep); }
.ptab tr:last-child td { border-bottom: 0; }
.calc__row { display: flex; align-items: center; gap: 14px; margin: 18px 0 20px; }
.calc__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--slate-300); background: var(--white); font: 700 20px/1 var(--font-head); color: var(--slate-900); cursor: pointer; }
.calc__btn:hover { border-color: var(--blue); color: var(--blue-deep); }
.calc__n { min-width: 110px; text-align: center; font: 800 30px/1 var(--font-head); color: var(--slate-900); }
.calc__n small { display: block; font-size: 12px; font-weight: 600; color: var(--slate-500); margin-top: 5px; }
.calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc__box { border-radius: 14px; padding: 14px 16px; background: var(--slate-50); border: 1px solid var(--slate-200); }
.calc__box span { display: block; font-size: 12.5px; color: var(--slate-500); }
.calc__box b { display: block; margin-top: 4px; font: 800 22px/1.1 var(--font-head); color: var(--slate-900); }
.calc__box--save { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.35); }
.calc__box--save b { color: #047857; }
.pools__uses { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.pools__uses li { font-size: 14.5px; color: var(--slate-700); padding-left: 24px; position: relative; }
.pools__uses li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }

/* ---------- discounts strip + CTA ---------- */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1120px; margin: clamp(30px, 4vw, 46px) auto 0; }
.perk { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-sm); padding: 18px; }
.perk b { display: block; font: 800 22px/1.1 var(--font-head); color: var(--blue-deep); }
.perk span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--slate-600); line-height: 1.45; }
.endcta { text-align: center; }
.endcta h2 { color: var(--white); font-size: clamp(28px, 3.6vw, 42px); }
.endcta p { color: var(--slate-300); margin: 14px auto 0; max-width: 560px; }
.endcta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.endcta__fine { margin-top: 22px; font-size: 13px; color: var(--slate-400); }

@media (max-width: 1080px) {
  .perks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pools__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .calc__out { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr; }
}

/* Desktop: let the table header pin under the fixed nav as you scroll. A scroll container would
   capture the sticky, so the wrapper only scrolls sideways on narrow screens. --navh is set by pricing.js. */
@media (min-width: 900px) {
  .cmp__wrap { overflow: visible; }
  .cmp thead th { top: var(--navh, 0px); }
  .cmp thead th:first-child { border-top-left-radius: var(--radius); }
  .cmp thead th:last-child { border-top-right-radius: var(--radius); }
}
@media (max-width: 600px) {
  .cmp table { min-width: 640px; font-size: 13.5px; }
  .cmp th:first-child, .cmp td:first-child { width: 150px; min-width: 150px; padding-left: 12px; padding-right: 10px; }
  .cmp__feat small { display: none; }
}