/* pnew-sellfree.css — generated by tools/build_css.sh, do not edit (the page "For sellers: free and Premium" only) */
/* src-css/sellfree/sellfree.css → app/assets/css/pnew-sellfree.css (tools/build_css.sh): the guest page "For sellers: free and
   Premium" (templates/sellfree.php, lib/sell_free.php). Loaded only by that page (pnew_head_css_add), after pnew.css and the
   guest bundle. Design system (docs/design-system.md): role tokens only, the 7 type steps, radii 8 / 12 / 16 / full, no lines
   (surfaces only), no shadow on cards, one pink key per screen. Sections alternate ground and a --surface band; boxes sit one
   tone above their section (+1 rule). Brand art (§13a) only through .pk-acc / .pk-ghead (guests, lib/plastik.php). */

body:has(.pn-slf) .pn-main { max-width: none; padding: 0; }   /* full-bleed sections, as the other info pages */
.pn-slf { color: var(--ink); }
.pn-slf :is(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.pn-slf :is(ul, ol) { padding: 0; list-style: none; }

/* 1 hero */
.pn-slf-hero { padding: var(--space-8) 0 var(--space-12); }
.pn-slf-hero__wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.pn-slf-hero__wrap:has(> .pk-ghead) { grid-template-columns: minmax(0, 1fr) 400px; }
.pn-slf-hero__copy { min-width: 0; max-width: var(--prose-max); }
.pn-slf-hero__tags { margin-top: var(--space-4); }
.pn-slf-hero__h { margin-top: var(--space-3); font: var(--type-display); text-wrap: balance; }
.pn-slf-hero__b { color: var(--accent-text); }
.pn-slf-hero__lede { margin-top: var(--space-4); font: var(--type-prose); color: var(--ink-2); }
.pn-slf-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.pn-slf-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--r-full); background: var(--surface); font: var(--type-label); }
.pn-slf-chip .pc-ico { flex: none; color: var(--accent-text); }
.pn-slf-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.pn-slf-hero__fine { margin-top: var(--space-3); font: var(--type-meta); color: var(--ink-2); }

/* sections */
.pn-slf-sec { padding: var(--space-12) 0; }
.pn-slf-sec--band { background: var(--surface); }
.pn-slf-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); max-width: var(--prose-max); }
.pn-slf-h2 { font: var(--type-h1); text-wrap: balance; }

/* 2 the free path */
.pn-slf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); counter-reset: none; }
.pn-slf-step { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--panel-pad); border-radius: var(--r-l); background: var(--surface-2); }   /* on the band: +1 */
.pn-slf-step__obj { margin-bottom: var(--space-2); }
.pn-slf-step__n { display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); border-radius: var(--r-full); background: var(--surface-3); font: var(--type-label); }
.pn-slf-step__obj + .pn-slf-step__n { position: absolute; top: var(--space-4); right: var(--space-4); }
.pn-slf-step__h { font: var(--type-title); }
.pn-slf-step__p { font: var(--type-body); color: var(--ink-2); }
.pn-slf-tag { justify-self: start; margin-top: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font: var(--type-label); }

/* 3 free and Premium */
.pn-slf-plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-4); align-items: start; }
.pn-slf-plan { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--r-l); background: var(--surface); }
.pn-slf-plan__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.pn-slf-plan__h { font: var(--type-h1); }
.pn-slf-plan__price { margin-top: var(--space-1); font: var(--type-strong); color: var(--ink-2); }
.pn-slf-list { display: grid; gap: var(--space-3); }
.pn-slf-list li { display: grid; grid-template-columns: var(--icon-m, 20px) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.pn-slf-list li > .pc-ico { margin-top: var(--space-1); color: var(--ink-2); }
.pn-slf-plan--prem .pn-slf-list li > .pc-ico { color: var(--accent-text); }
.pn-slf-list b { display: block; font: var(--type-strong); }
.pn-slf-list span { display: block; font: var(--type-meta); color: var(--ink-2); }
.pn-slf-plan__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pn-slf-plan__fine { font: var(--type-meta); color: var(--ink-2); }

/* 4 inside: three screens of the member area (illustrations, nothing is a control) */
.pn-slf-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.pn-slf-fig { display: grid; gap: var(--space-3); }
.pn-slf-ph { display: flex; flex-direction: column; min-height: 520px; overflow: hidden; border-radius: var(--r-l); background: var(--surface); }
.pn-slf-ph__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--surface-2); }
.pn-slf-ph__bar > div { display: grid; min-width: 0; flex: 1 1 auto; }
.pn-slf-ph__av { flex: none; width: var(--control-sm); height: var(--control-sm); border-radius: var(--r-full); background: var(--surface-3); }
.pn-slf-ph__av--s { background: var(--accent-soft); }
.pn-slf-ph__name { font: var(--type-strong); }
.pn-slf-ph__sub { font: var(--type-cap); color: var(--ink-3); }
.pn-slf-ph__ex { flex: none; padding: var(--space-1) var(--space-2); border-radius: var(--r-s); background: var(--surface-3); font: var(--type-cap); color: var(--ink-2); }
.pn-slf-ph__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); flex: 1 1 auto; }
.pn-slf-ph__sys { align-self: center; padding: var(--space-1) var(--space-3); border-radius: var(--r-full); background: var(--surface-2); font: var(--type-cap); color: var(--ink-3); }
.pn-slf-oc { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-m); background: var(--surface-2); }
.pn-slf-oc__h { display: flex; align-items: center; gap: var(--space-2); font: var(--type-strong); }
.pn-slf-ok { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); }
.pn-slf-oc__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.pn-slf-oc__item > div { display: grid; }
.pn-slf-oc__pic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-m); background: var(--surface-3); }
.pn-slf-oc__t { font: var(--type-strong); }
.pn-slf-oc__m { font: var(--type-meta); color: var(--ink-2); }
.pn-slf-oc__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pn-slf-oc__facts li { padding: var(--space-1) var(--space-3); border-radius: var(--r-full); background: var(--surface-3); font: var(--type-cap); }
.pn-slf-oc__price { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--type-meta); color: var(--ink-2); }
.pn-slf-oc__price b { font: var(--type-label); color: var(--ink); }
.pn-slf-oc__acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.pn-slf-oc__acts--one { grid-template-columns: 1fr; }
.pn-slf-oc__acts .pc-btn { pointer-events: none; white-space: nowrap; min-width: 0; padding: 0 var(--space-2); }
.pn-slf-oc__acts .pc-btn--line { background: var(--surface-3); }
.pn-slf-oc__free { font: var(--type-cap); color: var(--ink-3); }
.pn-slf-oc__quiet { justify-self: start; font: var(--type-label); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.pn-slf-lock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--r-m); background: var(--surface-2); }
.pn-slf-lock b { display: block; font: var(--type-label); }
.pn-slf-lock span { font: var(--type-meta); color: var(--ink-2); }
.pn-slf-lock .pn-slf-lock__cta { font: var(--type-label); color: var(--accent-text); white-space: nowrap; }
.pn-slf-pay { display: grid; gap: var(--space-2); }
.pn-slf-pay li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--r-s); background: var(--surface-3); font: var(--type-meta); }
.pn-slf-pay span { color: var(--ink-2); }
.pn-slf-pay b { font: var(--type-label); overflow-wrap: anywhere; text-align: right; }
.pn-slf-ph__dock { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
.pn-slf-ph__field { display: flex; align-items: center; flex: 1 1 auto; min-height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--r-full); background: var(--surface-2); font: var(--type-meta); color: var(--ink-3); }
.pn-slf-ph__send { display: inline-grid; place-items: center; flex: none; width: var(--control-md); height: var(--control-md); border-radius: var(--r-full); background: var(--surface-3); color: var(--ink); }
.pn-slf-fig__cap { font: var(--type-meta); color: var(--ink-2); }
.pn-slf-fig__cap b { display: block; font: var(--type-strong); color: var(--ink); }

/* 5 FAQ: the head and its object beside the answers (owner 04.11.: no narrow column in a wide row) */
.pn-slf-faqgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); align-items: start; }
.pn-slf-faqhead { display: grid; gap: var(--space-2); justify-items: start; }
.pn-slf-faqhead__obj { margin-top: var(--space-4); }
.pn-slf-faqs { display: grid; gap: var(--space-2); }
.pn-slf-faq { border-radius: var(--r-m); background: var(--surface-2); }
.pn-slf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.pn-slf-faq summary::-webkit-details-marker { display: none; }
.pn-slf-faq summary .pc-ico { flex: none; color: var(--ink-2); transition: transform var(--dur-2, 200ms); }
.pn-slf-faq[open] summary .pc-ico { transform: rotate(180deg); }
.pn-slf-faq summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-m); }
.pn-slf-faq__q { font: var(--type-strong); }
.pn-slf-faq p { padding: 0 var(--space-4) var(--space-4); font: var(--type-body); color: var(--ink-2); }

/* brand art beside the head (§13a): the doll + the gift box in a --surface panel as tall as the head */
.pk-site.pc-guest .pn-slf-hero__wrap > .pk-ghead { min-height: 360px; }

@media (min-width: 701px) and (max-width: 1100px) {
  .pn-slf-hero__wrap:has(> .pk-ghead) { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-8); }
  .pn-slf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-slf-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-site.pc-guest .pn-slf-hero__wrap > .pk-ghead { min-height: 240px; }
}
@media (max-width: 1100px) {
  .pn-slf-plans, .pn-slf-faqgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pn-slf-hero { padding: var(--space-6) 0 var(--space-8); }
  .pn-slf-hero__wrap, .pn-slf-hero__wrap:has(> .pk-ghead) { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pk-site.pc-guest .pn-slf-hero__wrap > .pk-ghead { position: absolute; top: 0; right: var(--gutter); width: 48px; height: 48px; min-height: 0; overflow: visible; border-radius: 0; background: none; }
  .pk-site.pc-guest .pn-slf-hero__wrap > .pk-ghead :is(.pk-ghead__doll, .pk-ghead__obj2) { display: none; }
  .pk-site.pc-guest .pn-slf-hero__wrap > .pk-ghead .pk-ghead__obj { position: static; width: 48px; height: 48px; }
  .pn-slf-hero__cta > .pc-btn { flex: 1 1 100%; }
  .pn-slf-sec { padding: var(--space-8) 0; }
  .pn-slf-steps, .pn-slf-board { grid-template-columns: minmax(0, 1fr); }
  .pn-slf-ph { min-height: 0; }
  .pn-slf-plan { padding: var(--panel-pad); }
}
@media (prefers-reduced-motion: reduce) { .pn-slf-faq summary .pc-ico { transition: none; } }