/* ===========================================================================
   STAKK MARKETING PAGES - brand v3 (rollout step 4, 23 Oct 2026)
   The parts two or more of these pages share: pricing, features, payouts,
   creators, about, contact, discover, legal and 404.
   Load after stakk-tokens-v3.css and stakk-ui.css. Values come from the
   tokens (var(--sk-*)) and the section's ground (var(--g-*)) only.
   A part one page uses sits in that page's own <style> block. Pictures the
   homepage shares (covers, bump and upsell, receipt, money path, step
   picture) live in stakk-ui.css, written once.
   =========================================================================== */

/* Text bits */
.act-note{margin-top:var(--sk-sp-3);font-size:var(--sk-fs-small);color:var(--g-fg-2)}
.cap{max-width:40em;margin:var(--sk-sp-6) auto 0;font-size:var(--sk-fs-small);color:var(--g-fg-2);text-align:center}
.prose{max-width:720px;margin:0 auto}
.prose p{color:var(--g-fg-2)}
.prose p + p{margin-top:var(--sk-sp-4)}
.prose h3 + p{margin-top:var(--sk-sp-3)}
.faq-i a,.prose a:not(.btn){color:inherit;text-decoration:underline;text-decoration-thickness:var(--sk-ring);text-underline-offset:3px}

/* Hero and last call: one button row, one small line under it */
.phero .act-note,.last .act-note{text-align:center}
.last .lede{max-width:34em;margin-left:auto;margin-right:auto}
.last .row{justify-content:center;margin-top:var(--sk-sp-6)}

/* Tick list: a line icon and one line of text. Never a box. */
.ticks{list-style:none;padding:0;display:grid;gap:var(--sk-sp-3)}
.ticks li{display:flex;align-items:flex-start;gap:var(--sk-sp-3)}
.ticks .ico{margin-top:2px}
.ticks.inline{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sk-sp-3) var(--sk-sp-6)}
.ticks.cols{max-width:880px;margin:0 auto;gap:var(--sk-sp-4) var(--sk-sp-6)}
@media (min-width:768px){.ticks.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ticks.cols{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Icon list extras (stakk-ui .ilist): a heading and paragraphs */
.ilist h3{grid-column:2}
.ilist p{grid-column:2;color:var(--g-fg-2)}
.ilist p + p{margin-top:var(--sk-sp-2)}
.ilist .ico{margin-top:2px}
@media (min-width:1024px){.ilist.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Split: a picture and a text column side by side, text first on a phone */
.split{display:grid;gap:var(--sk-sp-7);align-items:center}
.split-text .lede{max-width:30em}
.split-text .ticks,.split-text .more{margin-top:var(--sk-sp-6)}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sk-sp-8)}}
@media (max-width:1023px){.split-text{order:-1}}

/* The money path: a little space above the amount */
.flow .fcard .money{margin-top:var(--sk-sp-1)}