/* Public pages share the light landing shell. Fine separators, small frames and
   comfortable reading widths keep pricing, guides and previews calm and useful. */

.pp-page { min-width: 0; }
.pp-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pp-eyebrow { display: inline-block; color: var(--ck-accent-text); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pp-page h2 { font-size: clamp(26px, 2.7vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.pp-page p { line-height: 1.7; }
.pp-page code { padding: 1px 6px; border-radius: var(--ck-radius-xs); background: var(--ck-code-inline-bg); color: var(--ck-code-inline-text); font-size: .88em; }

/* Editorial hero: breadcrumb, title and lead, separated from the content by one line. */
.pp-hero { border-bottom: 1px solid var(--ck-border); background: #fff; }
.pp-hero::before { content: none; }
.pp-hero::after { content: none; }
.pp-hero-inner { padding-top: 40px; padding-bottom: 40px; }
.pp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--ck-text-muted); font-size: 12px; }
.pp-breadcrumb a { color: var(--ck-text); }
.pp-breadcrumb a:hover { color: var(--ck-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.pp-breadcrumb [aria-hidden] { color: var(--ck-text-subtle); }
.pp-breadcrumb [aria-current] { color: var(--ck-text-strong); font-weight: var(--ck-weight-medium); }
.pp-hero h1 { max-width: 900px; color: var(--ck-text-strong); font-size: clamp(32px, 3.6vw, 48px); font-weight: 400; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.pp-hero-inner > p { max-width: 740px; margin-top: 16px; color: var(--ck-text); font-size: 17px; line-height: 1.7; }
.pp-content { min-width: 0; margin-top: 40px; }

.pp-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 32px; padding: 14px 18px; border: 1px solid var(--ck-info-border); border-radius: 8px; background: var(--ck-accent-softer); color: var(--ck-text); }
.pp-notice > svg { margin-top: 3px; flex-shrink: 0; color: var(--ck-info-dot); }
.pp-notice p { font-size: var(--ck-text-sm); line-height: 1.6; }

/* Compact feature and guide grids. */
.pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pp-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 24px; border: 1px solid var(--ck-border); border-radius: 9px; background: #fff; }
.pp-card:hover { transform: none; }
.pp-card-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 7px; background: var(--ck-accent-softer); color: var(--ck-accent-text); }
.pp-card-icon svg { width: 20px; height: 20px; }
.pp-card h2, .pp-card h3 { font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.pp-card p { margin-top: 12px; color: var(--ck-text); font-size: 14px; line-height: 1.7; }
.pp-card .pp-text-link { margin-top: auto; padding-top: 18px; }
.pp-tag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 22px; padding: 2px 9px; border: 1px solid var(--ck-neutral-border); border-radius: var(--ck-radius-pill); background: var(--ck-neutral-bg); color: var(--ck-neutral-text); font-size: var(--ck-text-2xs); font-weight: var(--ck-weight-semibold); line-height: 1.3; white-space: nowrap; }
.pp-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ck-neutral-dot); }
.pp-card > .pp-tag { margin-bottom: 14px; }
.pp-grid--pillars { gap: 40px; }
.pp-grid--pillars .pp-card { padding: 0; border: 0; background: none; box-shadow: none; }
.pp-grid--pillars .pp-card:hover { transform: none; }
.pp-grid--editorial .pp-card { padding: 0 0 24px; overflow: hidden; }
.pp-grid--editorial .pp-card > :not(.pp-card-art) { margin-inline: 24px; }
.pp-card-art { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; width: 100%; min-height: 140px; padding: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--ck-border); background: var(--ck-surface-tint); color: var(--ck-accent-text); }
.pp-card-art svg { width: 40px; height: 40px; }
.pp-card-art span { color: var(--ck-text-muted); font: var(--ck-weight-medium) var(--ck-text-xs)/1 var(--ck-font-mono); letter-spacing: .04em; }
.pp-text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ck-accent-text) !important; font-size: 13px; font-weight: 500; }
.pp-text-link:hover { color: var(--ck-accent-hover) !important; text-decoration: underline; text-underline-offset: 4px; }

/* Reading layout with a sticky table of contents. */
.pp-reading-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; margin-top: 48px; }
.pp-reading-layout:first-child { margin-top: 0; }
.pp-contents { position: sticky; top: calc(var(--lp-header-height) + 24px); align-self: start; display: grid; gap: 4px; padding: 4px 16px 4px 0; border-right: 1px solid var(--ck-border); font-size: 13px; }
.pp-contents strong { margin-bottom: 10px; color: var(--ck-text-strong); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pp-contents a { margin-inline: 0; padding: 6px 0; color: var(--ck-text-muted); line-height: 1.5; }
.pp-contents a:hover { color: var(--ck-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.pp-prose { min-width: 0; max-width: 720px; }
.pp-prose section + section { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--ck-border); }
.pp-prose h2 { font-size: 26px; }
.pp-prose p, .pp-prose ul { margin-top: 16px; color: var(--ck-text); font-size: 16px; line-height: 1.8; }
.pp-prose ul { padding-left: 20px; }
.pp-prose li + li { margin-top: 8px; }
.pp-prose li::marker { color: var(--ck-accent); }
.pp-prose a:not(.pp-text-link) { color: var(--ck-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.pp-prose .pp-text-link { margin-top: 18px; }

/* Closing call to action. */
.pp-next { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 64px; padding: 32px 36px; border-radius: 10px; background: var(--ck-surface-tint); color: var(--ck-text); }
.pp-next::before { content: none; }
.pp-next .pp-eyebrow { color: var(--ck-accent-text); }
.pp-next h2 { margin-top: 10px; color: var(--ck-text-strong); font-size: clamp(26px, 2.5vw, 32px); font-weight: 500; letter-spacing: -.025em; }
.pp-next p { margin-top: 10px; max-width: 560px; font-size: 14px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.pp-next .ck-btn { min-height: 48px; padding-inline: 18px; border-radius: 7px; font-size: 14px; }
.pp-next__primary { --ck-btn-bg: #245eea; --ck-btn-fg: #fff; --ck-btn-border: #245eea; --ck-btn-hover-bg: #1647bf; }
.pp-next__secondary { --ck-btn-bg: #fff; --ck-btn-fg: #14243c; --ck-btn-border: #b6c5d8; --ck-btn-hover-bg: #f5f8fc; }

/* Pricing. */
.pp-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.pp-price-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid var(--ck-border); border-radius: 9px; background: var(--ck-surface-sunken); }
.pp-price-card h2 { font-size: 24px; }
.pp-price-card .pp-price { margin-top: 18px; color: var(--ck-text-strong); font-size: 36px; font-weight: 500; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-price-card .pp-price + p { color: var(--ck-text-muted); font-size: var(--ck-text-sm); }
.pp-price-card > p:not(.pp-price) { margin-top: 12px; color: var(--ck-text); font-size: 14px; }
.pp-fees { margin-top: 48px; }
.pp-fees > p { margin-top: 10px; color: var(--ck-text-muted); font-size: 14px; }
.pp-table-scroll { max-width: 100%; margin-top: 20px; overflow-x: auto; border: 1px solid var(--ck-border); border-radius: 8px; background: #fff; }
.pp-table-scroll table { width: 100%; border-collapse: collapse; font-size: var(--ck-text-sm); text-align: left; }
.pp-table-scroll caption { padding: 14px 18px 0; color: var(--ck-text-muted); font-size: var(--ck-text-xs); text-align: left; }
.pp-table-scroll th, .pp-table-scroll td { padding: 14px 18px; border-bottom: 1px solid var(--ck-border); }
.pp-table-scroll tbody tr:last-child td { border-bottom: 0; }
.pp-table-scroll th { background: var(--ck-surface-sunken); color: var(--ck-text-muted); font-size: 12px; font-weight: 500; }
.pp-pricing-table tbody th { color: var(--ck-text-strong); font-size: 14px; font-weight: 500; }
.pp-pricing-table td { white-space: nowrap; }

@media (max-width: 768px) {
  .pp-pricing-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .pp-pricing-table, .pp-pricing-table tbody, .pp-pricing-table tbody tr { display: block; width: 100%; }
  .pp-pricing-table tbody tr + tr { border-top: 1px solid var(--ck-border); }
  .pp-table-scroll .pp-pricing-table tbody th { display: block; padding: 14px 16px; border: 0; }
  .pp-table-scroll .pp-pricing-table td { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; border: 0; font-size: 13px; }
  .pp-pricing-table td::before { content: attr(data-label); color: var(--ck-text-muted); font-size: 12px; white-space: normal; }
}

/* FAQ with native disclosure and local search. */
.pp-faq { max-width: 840px; }
.pp-search { display: flex; align-items: center; gap: 12px; max-width: 560px; min-height: 48px; padding: 0 14px; border: 1px solid var(--ck-border-control); border-radius: 7px; background: #fff; color: var(--ck-text-muted); transition: border-color var(--ck-duration); }
.pp-search:focus-within { border-color: var(--ck-accent); outline: var(--ck-focus-outline); outline-offset: 2px; }
/* The search outline belongs to the whole field, without a second input outline. */
.pp-search input:focus-visible { outline: none; }
.pp-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: none; color: var(--ck-text-strong); font-size: var(--ck-text-md); }
.pp-search-message { min-height: 22px; margin-top: 10px !important; color: var(--ck-text-muted); font-size: var(--ck-text-sm) !important; }
.pp-faq > section { margin-top: 36px; }
.pp-faq h2 { margin-bottom: 12px; font-size: var(--ck-text-2xl); }
.pp-faq details { border-bottom: 1px solid var(--ck-border); background: #fff; }
.pp-faq details + details { margin-top: 0; }
.pp-faq details:hover { background: var(--ck-surface-sunken); }
.pp-faq details[open] { background: var(--ck-surface-sunken); }
.pp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; padding: 18px 12px; color: var(--ck-text-strong); font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.5; list-style: none; cursor: pointer; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary:focus-visible { border-radius: 4px; outline-offset: -2px; }
.pp-faq details p { max-width: 820px; padding: 0 40px 20px 12px; color: var(--ck-text); font-size: 14px; line-height: 1.8; }

/* Release timeline. */
.pp-timeline-group { display: grid; grid-template-columns: 180px minmax(0, 760px); gap: 40px; }
.pp-timeline-group + .pp-timeline-group { margin-top: 40px; }
.pp-timeline-entries { display: grid; gap: 0; }
.pp-timeline-group > h2 { margin-top: 4px; color: var(--ck-text-muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pp-timeline-entry:first-child { padding-top: 0; }
.pp-timeline-entry { position: relative; padding: 24px 0; border-bottom: 1px solid var(--ck-border); }
.pp-timeline-entry > svg { width: 20px; height: 20px; color: var(--ck-accent-text); vertical-align: middle; }
.pp-timeline-entry > .pp-tag { margin-left: 12px; vertical-align: middle; }
.pp-timeline-entry > h3 { margin-top: 12px; font-size: 18px; font-weight: 500; }
.pp-timeline-entry > p { max-width: 660px; margin-top: 10px; color: var(--ck-text); font-size: 14px; }
.pp-timeline-entry > a { margin-top: 14px; }

/* Static illustrations of planned widgets. */
.pp-widget { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pp-preview-frame { padding: 24px; border: 1px solid var(--ck-border); border-radius: 10px; background: var(--ck-surface-tint); }
.pp-preview-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; color: var(--ck-text-muted); font-size: var(--ck-text-xs); font-weight: var(--ck-weight-semibold); }
.pp-payment-preview { --widget-color: #3475bc; --widget-ink: #fff; padding: 28px 24px 22px; border: 1px solid #d7e1ed; border-radius: 8px; background: #fff; color: var(--ck-slate-600); text-align: center; overflow-wrap: anywhere; }
/* The preview is the merchant's own light widget, so its brand keeps its light colours. */
.pp-payment-preview .pp-mini-brand { margin-bottom: 20px; color: var(--ck-navy-900); }
.pp-mini-brand .ck-brand__tile { width: 24px; height: 24px; border-radius: 7px; }
.pp-mini-brand .ck-brand__mark { width: 18px; height: 18px; }
.pp-mini-brand .ck-brand__name { font-size: 17px; }
.pp-payment-preview h2 { margin-bottom: 14px; color: var(--ck-navy-900); font-size: var(--ck-text-xl); font-weight: var(--ck-weight-semibold); }
.pp-payment-preview .pp-preview-amount { color: var(--ck-navy-900); font-size: 26px; font-weight: var(--ck-weight-semibold); letter-spacing: -0.02em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pp-payment-preview .pp-preview-subtitle { margin-top: 6px; font-size: var(--ck-text-xs); }
.pp-payment-preview button { display: block; width: 100%; margin-top: 22px; padding: 13px 20px; border: 0; border-radius: var(--ck-radius-md); background: var(--widget-color); color: var(--widget-ink); font-weight: var(--ck-weight-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.pp-payment-preview button:disabled { cursor: not-allowed; }
.pp-payment-preview .pp-preview-disclaimer { margin-top: 14px; font-size: var(--ck-text-2xs); }
.pp-payment-preview--button { text-align: left; }
.pp-payment-preview--button .pp-mini-brand, .pp-payment-preview--button h2 { display: none; }
.pp-payment-preview--button button { width: auto; min-width: 150px; }
.pp-payment-preview--button .pp-preview-amount { font-size: var(--ck-text-lg); }
.pp-preview-order { display: flex; justify-content: space-between; gap: 14px; margin-block: 20px; padding-bottom: 14px; border-bottom: 1px solid #e2e9f3; font-size: var(--ck-text-sm); text-align: left; }
.pp-cart-item { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-block: 16px; border-block: 1px solid #e2e9f3; font-size: var(--ck-text-sm); text-align: left; }
.pp-cart-item > div { flex: 1; min-width: 0; }
.pp-cart-item > div > span { display: block; margin-top: 4px; font-size: var(--ck-text-xs); }
.pp-product-art { padding: 10px; border-radius: 12px; background: var(--ck-sky-100); color: var(--ck-blue-600); }
.pp-donation-heart { display: block; margin-bottom: 16px; color: var(--widget-color); font-size: 46px; line-height: 1; }
.pp-terminal-label { display: block; margin: 20px 0 8px; font-size: var(--ck-text-2xs); letter-spacing: .15em; }
.pp-payment-preview--pos { border: 6px solid var(--ck-slate-150); border-radius: var(--ck-radius-xl); }
.pp-payment-preview--pos .pp-preview-amount { font-size: 30px; }

/* Code snippets on navy, matching the documentation. */
.pp-snippet { min-width: 0; margin-top: 20px; overflow: hidden; border: 1px solid #203652; border-radius: 9px; background: #10213a; }
.pp-snippet-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 14px; border-bottom: 1px solid #2e4260; background: #10213a; color: var(--ck-code-muted); font-size: 12px; font-weight: 500; }
.pp-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 1px solid #5b7294; border-radius: 5px; background: transparent; color: var(--ck-code-text); font-size: 12px; font-weight: 500; }
.pp-copy:hover { background: rgb(255 255 255 / 6%); }
.pp-copy:disabled { color: var(--ck-code-muted); cursor: not-allowed; }
.pp-snippet textarea { display: block; width: 100%; min-height: 125px; max-height: 420px; padding: 16px; border: 0; outline: none; background: none; color: var(--ck-code-text); font: 12.5px/1.7 var(--ck-font-mono); resize: vertical; overflow-wrap: anywhere; word-break: break-word; }
.pp-snippet textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--ck-blue-500); }
.pp-copy-status { display: block; min-height: 24px; padding: 0 16px 10px; color: var(--ck-code-muted); font-size: var(--ck-text-xs); }
.pp-bench-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pp-bench-grid .pp-snippet { margin-top: 0; }
.pp-bench-cards { margin-top: 56px; }

/* Brand resources. */
.pp-brand-section + .pp-brand-section { margin-top: 48px; }
.pp-brand-section > p { max-width: 720px; margin-top: 12px; color: var(--ck-text); font-size: 16px; }
.pp-color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.pp-swatch { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; min-height: 144px; padding: 20px; border: 1px solid var(--ck-border); border-radius: 8px; }
.pp-swatch span { font-size: var(--ck-text-sm); font-weight: var(--ck-weight-medium); }
.pp-swatch strong { font: var(--ck-weight-semibold) var(--ck-text-xl)/1.2 var(--ck-font-mono); }
.pp-swatch--blue { border-color: var(--ck-blue-600); background: var(--ck-blue-600); color: var(--ck-white); }
.pp-swatch--ink { border-color: rgb(148 163 184 / 24%); background: var(--ck-navy-900); color: var(--ck-white); }
.pp-swatch--cloud { background: var(--ck-sky-50); color: var(--ck-navy-900); }
.pp-swatch--slate { border-color: var(--ck-slate-500); background: var(--ck-slate-500); color: var(--ck-white); }
.pp-brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.pp-brand-tile { overflow: hidden; border: 1px solid var(--ck-border); border-radius: 9px; background: #fff; }
/* The logo files are drawn for light backgrounds, so they are shown on the brand's sky. */
.pp-brand-tile > div { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 36px; background: var(--ck-sky-50); }
.pp-brand-tile img { max-width: 100%; height: auto; }
.pp-brand-tile > a { display: flex; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--ck-border); color: var(--ck-accent-text) !important; }

@media (max-width: 1024px) {
  .pp-grid { gap: 16px; }
  .pp-card { padding: 24px; }
  .pp-reading-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 36px; }
  .pp-widget { gap: 24px; }
  .pp-next { flex-direction: column; align-items: flex-start; gap: 24px; padding: 36px; }
  .pp-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .pp-hero-inner { padding-top: 28px; padding-bottom: 32px; }
  .pp-breadcrumb { margin-bottom: 20px; font-size: var(--ck-text-xs); }
  .pp-hero-inner > p { font-size: 15px; }
  .pp-content { margin-top: 36px; }
  .pp-page h2 { font-size: var(--ck-text-2xl); }
  .pp-timeline-group > h2 { font-size: var(--ck-text-sm); }
  .pp-grid, .pp-price-grid, .pp-widget, .pp-bench-grid, .pp-brand-grid { grid-template-columns: 1fr; }
  .pp-reading-layout { display: block; margin-top: 40px; }
  .pp-contents { position: static; margin-bottom: 32px; padding: 0 0 24px; border-right: 0; border-bottom: 1px solid var(--ck-border); }
  .pp-prose p, .pp-prose ul { font-size: var(--ck-text-md); }
  .pp-prose section + section { margin-top: 32px; padding-top: 32px; }
  .pp-notice { margin-bottom: 28px; }
  .pp-next { margin-top: 48px; padding: 28px 22px; }
  .pp-next h2 { font-size: var(--ck-text-2xl); }
  .pp-actions { width: 100%; }
  .pp-actions .ck-btn { flex: 1 1 180px; }
  .pp-timeline-group { grid-template-columns: 1fr; gap: 12px; }
  .pp-timeline-group > h2 { margin-top: 0; }
  .pp-price-card { padding: 24px; }
  .pp-price-card .pp-price { font-size: 30px; }
  .pp-fees { margin-top: 48px; }
  .pp-table-scroll th, .pp-table-scroll td { padding: 12px; }
  .pp-faq summary { gap: 16px; padding: 16px 8px; font-size: 14px; }
  .pp-faq details p { padding: 0 8px 18px; }
  .pp-preview-frame { padding: 16px; }
  .pp-payment-preview { padding: 24px 16px; }
  .pp-color-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pp-swatch { min-height: 128px; padding: 18px; }
  .pp-brand-tile > div { min-height: 170px; padding: 24px; }
}

@media (max-width: 400px) {
  .pp-color-grid { grid-template-columns: 1fr; }
}