/* overflow-x:clip rather than hidden: the backdrop below is meant to bleed past the wrap on a
   wide screen, and on a narrow one that bleed is wider than the viewport. clip stops the
   sideways scrollbar without creating a scroll container and without touching overflow-y,
   which hidden would have forced to auto and broken position:sticky anywhere on the page. */
.pricing { overflow-x: clip; }

/* The section rhythm, the eyebrow and .sec-list come from chrome.css, shared with /index.
   What is here is only what this page genuinely owns: the three cards, the band switch, the
   counts columns and the worked examples. */

.sec-plans { margin-top: 40px; position: relative; }
.sec-plans > :not(.psky) { position: relative; z-index: 1; }

/* The page is a dark rectangle with three darker rectangles on it, which is most of why it felt
   static beside /index. Two radials drift behind the cards on a minute-long cycle — slow enough
   that it reads as depth rather than as something happening, and masked so it never reaches the
   copy above or the section below. */
.psky {
  position: absolute;
  inset: -90px -14% -70px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 46%, black 42%, transparent 78%);
  mask-image: radial-gradient(120% 78% at 50% 46%, black 42%, transparent 78%);
}
.psky i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.psky .p1 {
  width: 46%; height: 150%; left: 4%; top: -26%;
  background: radial-gradient(closest-side, rgba(123, 97, 255, .22), transparent 72%);
  animation: pdrift1 58s ease-in-out infinite;
}
.psky .p2 {
  width: 40%; height: 140%; right: 6%; top: -18%;
  background: radial-gradient(closest-side, rgba(62, 207, 142, .11), transparent 72%);
  animation: pdrift2 74s ease-in-out infinite;
}

/* Percentages of the blob, so the travel scales with the viewport instead of being tuned to one. */
@keyframes pdrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(26%, 7%) scale(1.16); }
  66%  { transform: translate(9%, -8%) scale(.94); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes pdrift2 {
  0%   { transform: translate(0, 0) scale(1.06); }
  33%  { transform: translate(-22%, -9%) scale(.9); }
  66%  { transform: translate(-8%, 11%) scale(1.2); }
  100% { transform: translate(0, 0) scale(1.06); }
}
.sec-faq { padding-bottom: 110px; }

.sec-lede {
  margin: 18px 0 0; max-width: 68ch;
  font-size: 15.5px; line-height: 1.65; color: var(--g-muted); letter-spacing: -.003em;
  text-wrap: pretty;
}

.beta-note {
  display: inline-block;
  margin: 0 0 22px;
  padding: 9px 14px;
  border: 1px solid var(--g-action-line);
  border-radius: var(--g-radius-control);
  background: var(--g-action-dim);
  font-size: 13.5px;
  color: var(--g-text);
}
.beta-note b { font-weight: 650; }

/* Three cards, so the row divides evenly and then stacks. Six bands used to sit here and the
   count had to be pinned per breakpoint to stop the last one orphaning; four of them now ride
   the switch inside the middle card, and three columns never strand anything. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

.plan {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-card);
  background: var(--g-panel);
  transition: border-color .18s ease;
}
/* The card is the biggest press target on the page and had no answer to a pointer at all.
   Border only — a lift would fight the button inside, which already lifts on its own. */
.plan:not(.plan-featured):hover { border-color: var(--g-line-2); }

/* The emphasis is a gradient hairline rather than a badge: it costs no vertical space, and a
   ribbon over one of three cards has to be explained before it is read. */
.plan-featured {
  position: relative;
  border-color: transparent;
  background:
    linear-gradient(var(--g-panel), var(--g-panel)) padding-box,
    linear-gradient(160deg, var(--g-line) 0%, var(--g-action-line) 45%, var(--g-action) 100%) border-box;
  border: 1px solid transparent;
}

.plan-name {
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--g-text);
}

/* Price and unit as baseline-aligned siblings, never nested: the unit is a third of the
   number and muted, which is what every pricing page worth copying does. Tabular figures
   because the switch swaps €29 for €149 in place and proportional digits would jump. */
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 12px 0 0;
  font-variant-numeric: tabular-nums;
}
.plan-price .pnum {
  font-size: 40px;
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--g-text);
}
/* A word is not a number: "Custom" set at the numeral's size outweighs every price on the
   row, and the one card with nothing to compare would draw the eye first. */
.plan-price .pword { font-size: 26px; letter-spacing: -.02em; }

.plan-price .per {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--g-muted);
}

.plan-seats {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--g-muted);
}

.plan-facts {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
}
.plan-facts li {
  position: relative;
  padding: 0 0 0 18px;
  margin: 0 0 7px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--g-text-2);
}
.plan-facts li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--g-action-line);
}

/* margin-top:auto rather than justify-content:space-between — the cards carry different numbers
   of facts, and only the button should absorb the difference. Both button styles are normalised
   to one box here because .btn-primary is inline-flex at line-height 1 and .btn-ghost is
   inline-block at the inherited one, which made a two-line label two different heights. */
.plan .btn-primary, .plan .btn-ghost {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 12px;
  line-height: 1.3;
  text-align: center;
}

/* --- The band switch ------------------------------------------------------------------
   Four rungs in one card, driven by :checked ~ sibling selectors. No script: worker.js sets
   script-src without 'unsafe-inline', and a real radio group gets arrow-key navigation and a
   focus ring from the browser rather than from us. */

.bands {
  margin: 0;
  padding: 0;
  border: 0;
  /* A fieldset defaults to min-inline-size:min-content, which stops it shrinking with the
     card and pushes the grid column wider than its share. */
  min-inline-size: 0;
}
.bands .plan-name { padding: 0; }

.bandr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bandpick {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin: 12px 0 0;
  padding: 2px;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-control);
  background: var(--g-sunken);
}

/* One thumb that travels, rather than four backgrounds that blink on and off. The width is the
   column the grid above computes — (track minus its padding minus the three gaps) / 4 — so the
   two stay in step at any card width without a magic number. */
.bandpick::before {
  content: "";
  position: absolute;
  top: 2px; bottom: 2px; left: 2px;
  width: calc((100% - 10px) / 4);
  border-radius: var(--g-radius-tile);
  background: var(--g-raise);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.bandpick label {
  position: relative;
  z-index: 1;
  padding: 6px 2px;
  border-radius: var(--g-radius-tile);
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--g-muted);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.bandpick label:hover { color: var(--g-text); }

/* One rule per rung: light the label, and reveal the matching price and seat line. */
#band-team:checked     ~ .bandpick label[for="band-team"],
#band-growth:checked   ~ .bandpick label[for="band-growth"],
#band-business:checked ~ .bandpick label[for="band-business"],
#band-scale:checked    ~ .bandpick label[for="band-scale"] {
  color: var(--g-text);
}

/* Where the thumb parks. The step is one column plus one gap. */
#band-growth:checked   ~ .bandpick::before { transform: translateX(calc(100% + 2px)); }
#band-business:checked ~ .bandpick::before { transform: translateX(calc(200% + 4px)); }
#band-scale:checked    ~ .bandpick::before { transform: translateX(calc(300% + 6px)); }

/* Keyboard focus has to be visible on the label, because the input it belongs to is clipped. */
#band-team:focus-visible     ~ .bandpick label[for="band-team"],
#band-growth:focus-visible   ~ .bandpick label[for="band-growth"],
#band-business:focus-visible ~ .bandpick label[for="band-business"],
#band-scale:focus-visible    ~ .bandpick label[for="band-scale"] {
  outline: 2px solid var(--g-focus);
  outline-offset: 1px;
}

.bands [data-band] { display: none; }
#band-team:checked     ~ .plan-price [data-band="team"],
#band-team:checked     ~ .plan-seats [data-band="team"],
#band-growth:checked   ~ .plan-price [data-band="growth"],
#band-growth:checked   ~ .plan-seats [data-band="growth"],
#band-business:checked ~ .plan-price [data-band="business"],
#band-business:checked ~ .plan-seats [data-band="business"],
#band-scale:checked    ~ .plan-price [data-band="scale"],
#band-scale:checked    ~ .plan-seats [data-band="scale"] {
  /* inline-block, not inline: a non-replaced inline box is not transformable, so the
     translateY half of band-swap was being dropped on the seat line. The price survived it
     by accident — it is a flex item of .plan-price and blockified anyway. */
  display: inline-block;
  animation: band-swap .24s cubic-bezier(.2, .7, .3, 1);
}

/* display:none -> display:inline restarts the animation, so the figure that arrives is the one
   that moves. No script, and nothing to keep in sync with the :checked rules above. */
@keyframes band-swap {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* The blobs carry the animation, not their container — the guard has to name both, which is
     the bug the same rule on /index had. */
  .psky, .psky i { animation: none !important; }
  .plan { transition: none !important; }
  .bandpick label { transition: none !important; }
  .bandpick::before { transition: none !important; }
  .bands [data-band] { animation: none !important; }
}

/* --- What counts ----------------------------------------------------------------------- */

/* Not 1fr 1fr: two things take a seat and four do not, so equal columns leave the left one
   half empty. The columns follow the content, and the boxes end where their text does rather
   than stretching to match. */
.counts {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: 14px;
  margin-top: 34px;
}
@media (max-width: 760px) { .counts { grid-template-columns: 1fr; } }

.count-col {
  padding: 20px 22px 6px;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-card);
  background: var(--g-panel);
}

.count-h {
  margin: 0 0 14px;
  font-family: var(--g-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.count-yes { color: var(--g-live-text); }
.count-no { color: var(--g-dim); }

.count-col ul { list-style: none; margin: 0; padding: 0; }
.count-col li {
  padding: 0 0 15px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--g-muted);
  letter-spacing: -.003em;
  text-wrap: pretty;
}
.count-col li b { color: var(--g-text); font-weight: 600; }

/* --- Worked examples -------------------------------------------------------------------
   The definition above is a rule; these are the rule run three times, which is the half every
   good page about an unusual billing unit also ships. */

.egs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 760px) { .egs { grid-template-columns: 1fr; } }

.eg {
  padding: 16px 18px;
  border: 1px solid var(--g-line-soft);
  border-radius: var(--g-radius-card);
  background: var(--g-sunken);
}
.eg-sum {
  margin: 0;
  font-family: var(--g-mono);
  font-size: 12px;
  color: var(--g-muted);
  font-variant-numeric: tabular-nums;
}
.eg-sum em { font-style: normal; color: var(--g-faint); padding: 0 7px; }
.eg-out {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--g-muted);
}
.eg-out b { color: var(--g-text); font-weight: 650; }

/* --- FAQ ------------------------------------------------------------------------------- */

.sec-faq .faq-list { margin-top: 28px; }