/* ---------- sightpane.com/pricing/, 2026-10-13 ----------
   src/pages/sp-pricing.mjs draws it. The landing's head on the dusk band,
   then the billing switch, three plan cards on one shared grid (subgrid, so
   names, prices, buttons and lists line up across the cards), Enterprise as
   one wide band under them, a short comparison and the shared questions and
   closing. Cards sit on soft layered elevation (ring, contact, haze, top
   highlight), no gradients. The switch is two radios, the page shows the
   prices for the checked one with :has(), so it needs no script and shows
   yearly prices where :has() is missing. Everything here is .spp- */

.spp {
  --spp-r: 20px;
  --spp-pad: 32px;
  --spp-elev: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .4), 0 20px 44px -22px rgba(0, 0, 0, .8);
  --spp-elev-hi: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .4), 0 28px 56px -24px rgba(0, 0, 0, .9);
  --spp-seg: rgba(255, 255, 255, .06);
  --spp-seg-on: #26262a;
  --spp-seg-sh: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .4);
}
:root[data-theme="light"] .spp {
  --spp-elev: inset 0 1px 0 #fff, 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(40, 32, 20, .05), 0 20px 44px -24px rgba(40, 32, 20, .2);
  --spp-elev-hi: inset 0 1px 0 #fff, 0 0 0 1px rgba(0, 0, 0, .14), 0 1px 2px rgba(40, 32, 20, .06), 0 28px 56px -26px rgba(40, 32, 20, .28);
  --spp-seg: rgba(0, 0, 0, .05);
  --spp-seg-on: #fff;
  --spp-seg-sh: 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(40, 32, 20, .1);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .spp {
  --spp-elev: inset 0 1px 0 #fff, 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(40, 32, 20, .05), 0 20px 44px -24px rgba(40, 32, 20, .2);
  --spp-elev-hi: inset 0 1px 0 #fff, 0 0 0 1px rgba(0, 0, 0, .14), 0 1px 2px rgba(40, 32, 20, .06), 0 28px 56px -26px rgba(40, 32, 20, .28);
  --spp-seg: rgba(0, 0, 0, .05);
  --spp-seg-on: #fff;
  --spp-seg-sh: 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(40, 32, 20, .1);
} }

/* the Through mark in the nav and footer, the same box as the mark it stands in for */
.sp-through { display: block; }

/* ---------- the head ---------- */
.spp-head { padding-bottom: clamp(120px, 13vw, 184px); }
.spp-head .pd-chip + h1 { margin-top: 24px; }
.spp :is(#plans, #compare, #faq) { scroll-margin-top: 96px; }

/* ---------- the switch ---------- */
.spp-plans-sec { display: flex; flex-direction: column; align-items: center; padding-top: clamp(56px, 6vw, 80px); }
.spp-bill { position: relative; display: inline-flex; gap: 2px; margin: 0 0 40px; padding: 4px; border: 0; border-radius: 99px; background: var(--spp-seg); box-shadow: inset 0 0 0 1px var(--pd-edge); }
.spp-bill input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.spp-bill label { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; border-radius: 99px; color: var(--pd-mid); font: 400 14px/1 var(--sans); letter-spacing: -.01em; cursor: pointer; transition: color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out; }
.spp-bill label:hover { color: var(--pd-tx); }
.spp-bill input:checked + label { background: var(--spp-seg-on); box-shadow: var(--spp-seg-sh); color: var(--pd-tx); }
.spp-bill input:focus-visible + label { outline: 2px solid var(--pd-tx); outline-offset: 2px; }
.spp-save { color: var(--pd-dim); font-size: 12.5px; }

/* the prices for the chosen billing, yearly unless monthly is checked */
.spp .spp-m { display: none; }
.spp:has(#spp-bill-m:checked) .spp-m { display: inline; }
.spp:has(#spp-bill-m:checked) .spp-y { display: none; }

/* ---------- the plans, one grid the three cards share ---------- */
.spp-plans { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: 16px; }
.spp-plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; padding: var(--spp-pad); border-radius: var(--spp-r); background: var(--pd-card); box-shadow: var(--spp-elev); color: var(--pd-tx); }
.spp-plan.is-hi { box-shadow: var(--spp-elev-hi); }
.spp-plan h3, .spp-ent h3 { margin: 0; color: var(--pd-tx); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.spp-d { margin: 8px 0 0; max-width: 30ch; color: var(--pd-mid); font-size: 14.5px; line-height: 1.5; }
.spp-price { display: flex; align-items: baseline; gap: 8px; margin: 32px 0 0; }
.spp-amt { color: var(--pd-tx); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.spp-per { color: var(--pd-dim); font-size: 14px; }
.spp-note { margin: 10px 0 0; color: var(--pd-dim); font-size: 13px; line-height: 1.4; }
.spp-plan > :is(.pill, .ghost), .spp-ent-a > .ghost { justify-self: stretch; align-self: start; margin-top: 28px; padding: 0 24px; }
.spp-list { list-style: none; display: grid; align-content: start; gap: 12px; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--pd-edge); }
.spp-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--pd-mid); font-size: 14.5px; line-height: 1.45; }
.spp-list svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--pd-tx); }
.spp-list .spp-plus { color: var(--pd-dim); font-size: 13px; }

/* Enterprise, one wide band on the cards' own three columns, so its name
   lines up with Starter's and its list with Team's and Agency's words */
.spp-ent { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; margin-top: 16px; padding: var(--spp-pad) 0; border-radius: var(--spp-r); background: var(--pd-card); box-shadow: var(--spp-elev); }
.spp-ent-a { display: flex; flex-direction: column; padding: 0 var(--spp-pad); }
.spp-ent-a > .ghost { align-self: stretch; }
.spp-ent .spp-list { grid-column: 2 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: calc(var(--spp-pad) * 2 + 16px); margin: 0; padding: 0 var(--spp-pad); border-top: 0; }
.spp-after { margin: 40px 0 0; }
.spp-after .pd-more { font-size: 14px; }

/* ---------- the comparison ---------- */
.spp-sec:not(.spp-plans-sec) { padding-top: clamp(112px, 12vw, 176px); }
.spp-cmp { padding: 8px var(--spp-pad); border-radius: var(--spp-r); background: var(--pd-card); box-shadow: var(--spp-elev); }
.spp-cmp table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.spp-cmp :is(th, td) { padding: 18px 12px; border-top: 1px solid var(--pd-edge); color: var(--pd-mid); font-size: 14.5px; font-weight: 400; line-height: 1.4; text-align: center; vertical-align: middle; }
.spp-cmp thead :is(th, td) { padding-top: 22px; border-top: 0; color: var(--pd-tx); font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.spp-cmp tbody th { padding-left: 0; color: var(--pd-tx); text-align: left; }
.spp-cmp :is(thead td, tbody th) { width: 32%; }
.spp-cmp td:last-child, .spp-cmp th:last-child { padding-right: 0; }
.spp-cmp td svg { width: 16px; height: 16px; vertical-align: middle; color: var(--pd-tx); }
.spp-no { display: inline-block; width: 10px; height: 1.5px; vertical-align: middle; border-radius: 1px; background: var(--pd-faint); }

/* ---------- narrower ---------- */
@media (max-width: 960px) {
  .spp-plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; width: 100%; max-width: 520px; margin: 0 auto; }
  .spp-plan { grid-row: auto; grid-template-rows: none; }
  .spp-ent { grid-template-columns: minmax(0, 1fr); max-width: 520px; width: 100%; margin: 16px auto 0; padding: var(--spp-pad); }
  .spp-ent-a { padding: 0; }
  .spp-ent .spp-list { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; margin-top: 28px; padding: 24px 0 0; border-top: 1px solid var(--pd-edge); }
}
@media (max-width: 760px) {
  .spp { --spp-pad: 24px; }
  .spp-amt { font-size: 40px; }
  /* the table as rows, the feature on its own line and the four plans under it */
  .spp-cmp { padding: 4px 20px; }
  .spp-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .spp-cmp table, .spp-cmp tbody { display: block; }
  .spp-cmp tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 0; border-top: 1px solid var(--pd-edge); }
  .spp-cmp tbody tr:first-child { border-top: 0; }
  .spp-cmp tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 12px; border: 0; font-size: 14.5px; }
  .spp-cmp td { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; width: auto; padding: 0 8px 0 0; border: 0; font-size: 13.5px; text-align: left; }
  .spp-cmp td::before { content: attr(data-plan); color: var(--pd-dim); font-size: 12px; }
  .spp-cmp td svg { margin-top: 1px; }
  .spp-no { margin: 7px 0; }
}