/* Clix Creator platform pages (instagram/, tiktok/, youtube/, facebook/): only what the start page doesn't have.
   Loaded after base.css and bus.css, so every shared piece (nav, hero, cards, calculator, FAQ, CTA, footer) looks
   exactly like the start page. */

/* ---------- hero ---------- */
.pf-crumbs { margin-bottom: 18px; }
.pf-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; color: var(--muted); }
.pf-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--faint); }
.pf-crumbs a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pf-crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.pf-h1 { font-size: clamp(2.3rem, 8.6vw, 4.1rem); }
.pf-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 22px; font-size: 15px; font-weight: 650; color: var(--ink-2); }
.pf-from-l { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pf-from b { font-size: 28px; font-weight: 900; letter-spacing: -.04em; color: var(--orange-ink, var(--ink)); font-variant-numeric: tabular-nums; }
/* photos keep their own 3:2 shape on every width: nobody in them is ever cut off (Martin, 19 Oct 2026) */
.pf-hero .vb-hero-photo { aspect-ratio: 3 / 2; height: auto; }
.pf-hero .vb-hero-photo img { object-position: 50% 50%; }
@media (min-width: 1020px) {
  .pf-h1 { font-size: clamp(3.1rem, 4.5vw, 4.2rem); }
  .pf-hero .vb-hero-photo { aspect-ratio: 3 / 2; height: auto; }
}

/* ---------- platform switch: the current page is marked ---------- */
.pf-band .vbus-band-list a[aria-current="page"] .vbus-band-tile { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(255 90 10 / .14), var(--shadow-1); }
.pf-band .vbus-band-list a[aria-current="page"] .vbus-band-name { color: var(--ink); }
.pf-band .vbus-band-list a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---------- service cards: three photo cards in a grid ---------- */
.pf-svc-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .pf-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .pf-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* a grid, not the start page's staggered rail: every card on the same line. The photo keeps its own 2:3 shape,
   so people are shown whole, head to toe */
.pf-svc-grid .vbus-need { width: auto; max-width: none; margin: 0; }
.pf-svc-grid .pf-svc-photo { aspect-ratio: 2 / 3; }
.pf-svc-grid .vbus-need .pf-svc-photo img { object-position: 50% 50%; }
.pf-svc-body { gap: 10px; }
.pf-svc-body > p:not([class]) { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.pf-svc-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 13.5px; font-weight: 650; color: var(--muted); }
.pf-svc-price b { font-size: 26px; font-weight: 900; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-svc-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.pf-svc-tiers li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.pf-svc-tiers span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pf-svc-tiers b { font-size: 17px; font-weight: 900; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-svc-meta { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.pf-svc-meta code, .pf-link code { font: 600 12.5px/1.4 var(--mono); color: var(--ink-2); background: var(--surface-3); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.pf-svc-go { justify-self: start; margin-top: 6px; }

/* ---------- approval status ---------- */
.pf-status { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 13px; font-weight: 750; color: var(--muted); }
.pf-status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dot-strong); }
.pf-status.is-live { color: var(--green-ink, #16794a); }
.pf-status.is-live::before { background: var(--green, #1f9d5c); box-shadow: 0 0 0 3px rgb(31 157 92 / .16); }
.pf-status[hidden] { display: none; }
.pf-status-sum { margin: 2px 0 4px; line-height: 1.45; align-items: flex-start; }
.pf-status-sum::before { margin-top: 5px; }

/* ---------- calculator: the start page configurator with three packages and a tier switch ---------- */
/* three services as a list, three packages and three tiers side by side */
.pf-cxp .cxp-step[hidden] { display: none; }
.pf-cxp .cxp-svc { grid-template-columns: minmax(0, 1fr); }
.pf-cxp .cxp-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-cxp .pf-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-tiers button { display: grid; justify-items: start; gap: 2px; padding: 12px 12px 11px; text-align: left; }
.pf-tier-name { font-size: 15px; font-weight: 850; letter-spacing: -.02em; color: var(--ink); }
.pf-tier-note { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.pf-tier-price { margin-top: 4px; font-size: 13.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-cxp .cxp-pk-price { margin-top: 2px; }
/* narrow calculators: the three packages as rows (name · amount · price), so long amounts never spill out */
@container cxp (max-width: 440px) {
  .pf-cxp .cxp-packs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pf-cxp .cxp-packs button { grid-template-columns: 5.2em minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 12px 14px; }
  .pf-cxp .cxp-pk-price { margin-top: 0; }
}
.pf-cxp .cxp-total { font-variant-numeric: tabular-nums; }
.pf-vat { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pf-cxp .cxp-rec .btn { margin-top: 4px; }
@media (max-width: 479px) {
  .pf-cxp .pf-tiers { grid-template-columns: minmax(0, 1fr); }
  .pf-tiers button { grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 10px; }
  .pf-tier-price { margin-top: 0; grid-column: 3; grid-row: 1; }
  .pf-tier-note { grid-column: 2; grid-row: 1; }
}

/* ---------- price table: a real table; phones stack each row ---------- */
.pf-table-wrap { position: relative; margin-top: clamp(28px, 4vw, 44px); border-radius: var(--r-feature); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
.pf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.pf-table caption { caption-side: top; padding: 18px 18px 14px; text-align: left; font-size: 17px; font-weight: 850; letter-spacing: -.02em; color: var(--ink); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pf-table caption span { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pf-table th, .pf-table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pf-table thead th { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.pf-table tbody tr:last-child th, .pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-table tbody th { font-weight: 800; color: var(--ink); }
.pf-table td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pf-table td b { color: var(--ink); font-weight: 850; }
.pf-pack-list { display: flex; flex-wrap: wrap; gap: 2px 0; }
.pf-pack-list li { white-space: nowrap; }
.pf-pack-list li + li::before { content: "·"; margin: 0 8px; color: var(--faint); }
@media (max-width: 759px) {
  .pf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pf-table tbody tr { display: grid; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .pf-table tbody tr:last-child { border-bottom: 0; }
  .pf-table tbody th, .pf-table tbody td { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; padding: 0; border: 0; }
  .pf-table tbody th { display: block; font-size: 16px; }
  .pf-table td::before { content: attr(data-label); font-size: 13px; font-weight: 700; color: var(--muted); }
  .pf-pack-list { display: grid; gap: 2px; }
  .pf-pack-list li + li::before { content: none; }
}

/* ---------- how it works + link guide ---------- */
.pf-steps { display: grid; gap: 14px; counter-reset: none; }
@media (min-width: 700px) { .pf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-step { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 20px 24px; border-radius: var(--vb-r, 22px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.pf-step-n { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--orange-wash); border: 1px solid var(--orange-line); font: 800 14px/1 var(--mono); color: var(--ink); }
.pf-step h3 { font-size: 19px; font-weight: 850; letter-spacing: -.025em; line-height: 1.2; color: var(--ink); }
.pf-step p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pf-links-block { margin-top: clamp(40px, 6vw, 64px); }
.pf-links-t { font-size: clamp(22px, 2.6vw, 28px); font-weight: 850; letter-spacing: -.03em; color: var(--ink); margin-bottom: 16px; }
.pf-links { display: grid; gap: 12px; }
@media (min-width: 900px) { .pf-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-link { display: grid; align-content: start; gap: 8px; padding: 18px 18px 20px; border-radius: 18px; background: radial-gradient(circle, var(--dot) 1px, transparent 1.4px) 0 0 / 12px 12px, var(--surface-2); border: 1px solid var(--line); }
.pf-link-svc { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pf-link code { justify-self: start; font-size: 14px; padding: 4px 9px; background: var(--surface); border: 1px solid var(--line); }
.pf-link p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- closing CTA: the 3:2 photo whole on every width (group photos lose nobody at the edges) ---------- */
.pf-cta .vb-cta2-photo { aspect-ratio: 3 / 2; }
.pf-cta .vb-cta2-photo img { object-position: 50% 50%; }
@media (min-width: 1020px) {
  .pf-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; min-height: 0; }
  .pf-cta .vb-cta2-panel { padding-block: clamp(72px, 7vw, 110px); }
  .pf-cta .vb-cta2-photo { aspect-ratio: 3 / 2; align-self: center; margin: clamp(40px, 4vw, 64px) max(var(--gutter), calc((100vw - var(--wrap)) / 2)) clamp(40px, 4vw, 64px) 0; border-radius: 26px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}