/* profile-storefront-01  (namespace sf-)  Creator storefront: white + tomato with sky panels. Featured bundle, filterable product grid, consultation strip. */
.sf { --pm-ink: #14161f; --pm-bg: #fff; --pm-brand: #d83a1a; --pm-cta: #ff5a36; --pm-on-cta: #14161f; --pm-muted: #4f5565; --pm-line: #dfe3ec; --pm-soft: #e6f2ff; --pm-surface: #fff;
  --pm-btn-r: 14px; --pm-btn-bd: 2px solid #14161f; --pm-btn-sh: 0 4px 0 #14161f; }
.sf-top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.sf-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.1rem; text-decoration: none; } .sf-brand i, .sf-av { width: 36px; height: 36px; border-radius: 10px; background: var(--pm-ink); color: #fff; font-style: normal; display: grid; place-items: center; font-weight: 900; }
.sf-hero { padding-block: 18px 50px; } .sf-hero__grid { display: grid; gap: 28px; align-items: stretch; }
.sf-who { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--pm-muted); } .sf-av { border-radius: 50%; background: var(--pm-cta); color: var(--pm-ink); }
.sf-h1 { font-size: clamp(2.1rem, 7.4vw, 3.6rem); line-height: 1.26; font-weight: 900; max-width: 13em; }
.sf-lead { margin: 14px 0 0; color: var(--pm-muted); font-size: clamp(1.05rem, 3vw, 1.2rem); line-height: 1.95; max-width: 31em; }
.sf-hero .pm-cta { margin-top: 24px; }
.sf-feat { background: var(--pm-soft); border: 2px solid var(--pm-ink); border-radius: 26px; overflow: hidden; box-shadow: 0 7px 0 var(--pm-ink); display: grid; align-content: start; }
.sf-feat__b { padding: 20px; display: grid; gap: 8px; } .sf-feat h2 { margin: 0; font-size: 1.5rem; font-weight: 900; } .sf-feat p { margin: 0; color: var(--pm-muted); }
.sf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sf-row b { font-size: 1.5rem; font-weight: 900; } .sf-feat .sf-row { justify-content: flex-start; gap: 14px; margin-block: 4px 8px; } .sf-feat s { color: var(--pm-muted); }
.sf-cover { aspect-ratio: 16 / 9; display: grid; place-items: center; border-bottom: 2px solid var(--pm-ink); position: relative; overflow: hidden; }
.sf-cover::before { content: ""; position: absolute; inset-inline-end: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.4); }
.sf-sec { padding-block: 56px; } .sf-sec--blue { background: var(--pm-soft); }
.sf-h2 { font-size: clamp(1.7rem, 5.4vw, 2.5rem); line-height: 1.32; font-weight: 900; } .sf-sub { margin: 8px 0 0; color: var(--pm-muted); max-width: 32em; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sf-chips button { min-height: 44px; padding: 2px 20px; border: 2px solid var(--pm-ink); border-radius: 999px; background: #fff; font-weight: 800; cursor: pointer; font-size: .98rem; } .sf-chips button[aria-pressed="true"] { background: var(--pm-ink); color: #fff; }
.sf-grid { display: grid; gap: 16px; margin-top: 24px; }
.sf-card { background: #fff; border: 2px solid var(--pm-ink); border-radius: 22px; overflow: hidden; display: grid; align-content: start; transition: opacity .25s, transform .15s; } .sf-card.is-dim { opacity: .28; }
.sf-card__b { padding: 18px; display: grid; gap: 6px; } .sf-card h3 { margin: 0; font-size: 1.2rem; font-weight: 900; } .sf-card p { margin: 0; color: var(--pm-muted); font-size: .96rem; line-height: 1.8; } .sf-card .sf-row { margin-top: 8px; }
.sf-tag { justify-self: start; background: var(--pm-soft); border-radius: 8px; padding: 0 10px; font-weight: 800; font-size: .82rem; line-height: 1.9; } .sf-tag--hot { background: var(--pm-cta); border: 2px solid var(--pm-ink); border-radius: 999px; }
.sf-consult { display: grid; gap: 18px; align-items: center; }
.sf-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: sfs; }
.sf-steps li { counter-increment: sfs; border-inline-start: 4px solid var(--pm-cta); padding-inline-start: 16px; } .sf-steps li::before { content: counter(sfs); font-weight: 900; color: var(--pm-brand); font-size: 1.3rem; } .sf-steps h3 { margin: 0; font-size: 1.15rem; font-weight: 900; } .sf-steps p { margin: 0; color: var(--pm-muted); }
.sf-faq { display: grid; gap: 20px; }
.sf-final { background: var(--pm-ink); color: #fff; text-align: center; padding-block: 56px; } .sf-final h2 { margin: 0 auto 8px; font-size: clamp(1.8rem, 6vw, 2.7rem); font-weight: 900; line-height: 1.35; } .sf-final p { margin: 0 auto 22px; color: #bcc2d2; max-width: 28em; } .sf-final .pm-btn--ghost { color: #fff !important; border: 2px solid #4a5068; } .sf-final .pm-cta { justify-content: center; }
.sf-foot { background: #0b0c12; color: #8d94a8; font-size: .9rem; padding-block: 20px; } .sf-foot p { margin: 0; }
@media (min-width: 640px) { .sf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .sf-sec { padding-block: 84px; } .sf-consult { grid-template-columns: 1fr auto; gap: 40px; } .sf-steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 992px) { .sf-hero__grid { grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; } .sf-grid { grid-template-columns: repeat(3, 1fr); } .sf-faq { grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; } }

/* offers (data-driven) */
.sf-cover { font-style: normal; } .sf-cover[data-tone="a"] { background: #ffd84d; } .sf-cover[data-tone="b"] { background: #a8d8ff; } .sf-cover[data-tone="c"] { background: #ffb3a0; } .sf-cover[data-tone="d"] { background: #b9f0c9; } .sf-cover[data-tone="e"] { background: #d8c8ff; } .sf-cover[data-tone="f"] { background: #ffc9e0; } .sf-cover[data-tone="k"] { background: #cfe0ff; } .sf-cover[data-tone="g"] { background: var(--pm-cta); }
.sf-cover b { font-weight: 900; font-size: clamp(1.6rem, 5vw, 2.2rem); background: #fff; border: 2px solid var(--pm-ink); border-radius: 12px; padding: 0 16px; line-height: 1.7; box-shadow: 4px 4px 0 var(--pm-ink); rotate: -3deg; }
.sf-cover--img { display: block; } .sf-cover--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; } .sf-cnt { margin: 0; color: var(--pm-muted); font-weight: 700; font-size: .92rem; }
.sf-card--c { background: var(--pm-soft); } .sf-card--c .sf-cover { border-bottom-style: dashed; }
.sf-tag--p { background: #fff4d6; } .sf-tag--c { background: #fff; border: 2px solid var(--pm-ink); border-radius: 999px; }
.sf-row--p { justify-content: flex-start; flex-wrap: wrap; gap: 4px 10px; font-size: 1.3rem; } .sf-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.sf-det { background: none; border: 0; padding: 4px 2px; font-weight: 800; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; font-size: .95rem; color: inherit; }
.sf-feat .sf-det { justify-self: center; } .sf-more { grid-column: 1 / -1; justify-self: center; }
.sf-hero__grid--solo { grid-template-columns: 1fr !important; }