/* Pricing page: two plans (Go, Pro), a plain comparison, and the full feature catalogue. Wind UI tokens from wind-skin.css. */
.pp { background: var(--wind-page); }
.pp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pp-wrap--narrow { max-width: 760px; }
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pp-hero { padding: 150px 0 48px; text-align: center; }
.pp-eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--wind-accent-soft); color: var(--wind-accent-ink); font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.pp-hero h1 { margin: 0 auto 16px; max-width: 760px; color: var(--wind-ink); }
.pp-lead { max-width: 680px; margin: 0 auto; color: var(--wind-ink-2); }

.pp-section { padding: 64px 0; }
.pp-section--tint { background: #fff; border-top: 1px solid var(--wind-line); border-bottom: 1px solid var(--wind-line); }
.pp-section h2 { text-align: center; margin: 0 0 12px; color: var(--wind-ink); }
.pp-intro { text-align: center; color: var(--wind-ink-2); margin: 0 auto 36px; max-width: 640px; }

/* plans */
.pp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pp-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wind-line); border-radius: 22px; padding: 36px; box-shadow: var(--wind-shadow); }
.pp-card--pro { border: 2px solid var(--wind-accent); box-shadow: var(--wind-shadow-lift); }
.pp-badge { position: absolute; top: -14px; left: 36px; background: var(--wind-accent); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.pp-name { font-size: 40px !important; font-weight: 700 !important; letter-spacing: -0.02em; margin: 0 0 6px !important; color: var(--wind-ink) !important; }
.pp-tagline { color: var(--wind-ink-2); margin: 0 0 24px !important; }
.pp-checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.pp-checks li { display: flex; gap: 12px; align-items: flex-start; }
.pp-checks .pp-ic { flex: none; width: 22px; height: 22px; margin-top: 3px; padding: 4px; border-radius: 999px; background: var(--wind-accent-soft); color: var(--wind-accent); }
.pp-note { color: var(--wind-ink-3); font-size: 14px !important; margin: auto 0 24px !important; padding-top: 4px; }
.pp-btn { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: var(--wind-accent); border: 1px solid var(--wind-accent); color: #fff !important; font-weight: 600; text-decoration: none !important; transition: background 0.15s ease; }
.pp-btn:hover { background: #381272; border-color: #381272; }
.pp-btn--ghost { background: #fff; color: var(--wind-accent) !important; }
.pp-btn--ghost:hover { background: var(--wind-accent-soft); border-color: var(--wind-accent); }

/* which plan fits */
.pp-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 28px 0 36px; }
.pp-fit > div { background: var(--wind-surface-2); border: 1px solid var(--wind-line); border-radius: 22px; padding: 28px; }
.pp-fit h3 { margin: 0 0 8px; }
.pp-fit p { margin: 0; color: var(--wind-ink-2); }
.pp-tablewrap { overflow-x: auto; border: 1px solid var(--wind-line); border-radius: 22px; background: #fff; }
.pp-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.pp-table th, .pp-table td { padding: 16px 24px; text-align: center; border-bottom: 1px solid var(--wind-line); }
.pp-table thead th { font-size: 18px; font-weight: 700; background: var(--wind-surface-2); }
.pp-table tbody th { text-align: left; font-weight: 500; color: var(--wind-ink); }
.pp-table tbody tr:last-child th, .pp-table tbody tr:last-child td { border-bottom: 0; }
.pp-table .pp-ic { width: 22px; height: 22px; padding: 4px; border-radius: 999px; background: var(--wind-accent-soft); color: var(--wind-accent); }
.pp-no { color: var(--wind-ink-3); font-size: 20px; }

/* steps */
.pp-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pp-steps li { background: #fff; border: 1px solid var(--wind-line); border-radius: 22px; padding: 28px; box-shadow: var(--wind-shadow); }
.pp-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--wind-accent); color: #fff; font-weight: 700; margin-bottom: 14px; }
.pp-steps h3 { margin: 0 0 6px; }
.pp-steps p { margin: 0; color: var(--wind-ink-2); }

/* catalogue */
.pp-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pp-groups--one { grid-template-columns: minmax(0, 1fr); }
.pp-group { position: relative; background: var(--wind-page); border: 1px solid var(--wind-line); border-radius: 22px; padding: 28px; }
.pp-group h3 { margin: 0 0 2px; }
.pp-gsub { color: var(--wind-ink-3); font-size: 14px !important; margin: 0 0 18px !important; }
.pp-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pp-flist li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--wind-accent-soft); }
.pp-fn { font-weight: 600; color: var(--wind-ink); }
.pp-fd { font-size: 14px; color: var(--wind-ink-2); line-height: 1.55; }
.pp-group--pro { background: var(--wind-accent-soft); border-color: #d2c0ec; }
.pp-group--pro .pp-flist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.pp-group--pro .pp-flist li { border-left-color: var(--wind-accent); }
.pp-tag { position: absolute; top: 24px; right: 24px; background: var(--wind-accent); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.pp-h2-gap { margin-top: 56px !important; }

/* faq */
.pp-q { background: #fff; border: 1px solid var(--wind-line); border-radius: 14px; padding: 4px 20px; margin: 0 0 12px; }
.pp-q summary { cursor: pointer; font-weight: 600; padding: 16px 0; color: var(--wind-ink); }
.pp-q p { margin: 0 0 16px; color: var(--wind-ink-2); }

@media (max-width: 860px) {
  .pp-plans, .pp-fit, .pp-steps, .pp-groups, .pp-group--pro .pp-flist { grid-template-columns: minmax(0, 1fr); }
  .pp-hero { padding-top: 130px; }
  .pp-card, .pp-group, .pp-fit > div, .pp-steps li { padding: 24px; }
  .pp-badge { left: 24px; }
}

/* Closing call to action */
.pp-cta { padding: 72px 0; }
.pp-cta .pp-wrap { background: linear-gradient(135deg, var(--wind-accent) 0%, var(--wind-accent-ink) 100%); border-radius: 22px; padding: 56px 40px; text-align: center; }
.pp-cta h2, .pp-cta p { color: #fff !important; margin: 0 auto 12px; max-width: 640px; }
.pp-cta p { opacity: 0.92; margin-bottom: 28px; }
.pp-cta .pp-btn--light { display: inline-flex; min-width: 240px; background: #fff; color: var(--wind-accent) !important; border-color: #fff; padding: 0 32px; }
.pp-cta .pp-btn--light:hover { background: var(--wind-accent-soft); }
.pp-hero--solution .pp-eyebrow { background: var(--wind-accent-soft); }
.pp-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.pp-three > div { background: #fff; border: 1px solid var(--wind-line); border-top: 4px solid var(--logo-blue); border-radius: 22px; padding: 28px; box-shadow: var(--wind-shadow); }
.pp-three > div:nth-child(2) { border-top-color: var(--logo-green); }
.pp-three > div:nth-child(3) { border-top-color: var(--logo-orange); }
.pp-three h3 { margin: 0 0 8px; } .pp-three p { margin: 0; color: var(--wind-ink-2); }
/* the four logo colours as quiet accents on the catalogue */
.pp-group:nth-child(4n+1) .pp-flist li { border-left-color: var(--logo-blue); }
.pp-group:nth-child(4n+2) .pp-flist li { border-left-color: var(--logo-green); }
.pp-group:nth-child(4n+3) .pp-flist li { border-left-color: var(--logo-orange); }
.pp-group:nth-child(4n+4) .pp-flist li { border-left-color: var(--logo-magenta); }
.pp-steps li:nth-child(1) .pp-num { background: var(--logo-blue); }
.pp-steps li:nth-child(2) .pp-num { background: var(--logo-green); }
.pp-steps li:nth-child(3) .pp-num { background: var(--logo-orange); }
@media (max-width: 860px) { .pp-three { grid-template-columns: minmax(0, 1fr); } .pp-cta .pp-wrap { padding: 40px 20px; } }

/* pills and badges: always white text on the accent (a global span rule had made it dark) */
.pp-tag, .pp-badge, .pp-num, .pp-btn:not(.pp-btn--ghost):not(.pp-btn--light) { color: #fff !important; }
.pp-eyebrow { color: var(--wind-accent-ink) !important; }