/* Public marketing pages: /features/*, /industries/*, /integrations/*, /compare/*, /about, /contact and the hubs.
   Views: resources/views/livewire/public/site/*. Prefix .rc-sp-. Tokens only. */

.rc-sp { color: var(--ink-muted); font-family: var(--font-body); font-size: 16px; line-height: 1.65; background: var(--surface); width: 100%; max-width: 100%; overflow-x: hidden; }
.rc-sp *, .rc-sp *::before, .rc-sp *::after { box-sizing: border-box; }
.rc-sp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.rc-sp-narrow { max-width: 760px; }
@media (min-width: 640px) { .rc-sp-wrap { padding: 0 24px; } }

/* ---------- Sections ---------- */
.rc-sp-sec { padding: 56px 0; }
.rc-sp-sec + .rc-sp-sec:not(.rc-sp-sec--tint) { border-top: 1px solid var(--line); }
.rc-sp-sec--tint { background: var(--surface-sunken); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rc-sp-sec--tint + .rc-sp-sec { border-top: 0; }
.rc-sp-sec--tight { padding: 40px 0; }
@media (min-width: 1024px) { .rc-sp-sec { padding: 80px 0; } .rc-sp-sec--tight { padding: 56px 0; } }

/* Section header: left aligned, small kicker in sentence case */
.rc-sp-head { max-width: 680px; margin-bottom: 32px; }
.rc-sp-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--brand-700); }
.rc-sp-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--brand-300); }
.rc-sp-h2, .rc-sp .rc-sp-prose h2.rc-sp-h2 { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.22; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.rc-sp-lede { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
@media (min-width: 1024px) { .rc-sp-h2, .rc-sp .rc-sp-prose h2.rc-sp-h2 { font-size: 32px; } }

/* ---------- Prose (long-form copy) ---------- */
.rc-sp-prose { color: var(--ink-muted); font-size: 16px; line-height: 1.7; }
.rc-sp-prose > :first-child { margin-top: 0; }
.rc-sp-prose h2 { margin: 44px 0 12px; font-family: var(--font-display); font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.rc-sp-prose h3 { margin: 28px 0 6px; font-family: var(--font-display); font-size: 18px; line-height: 1.35; font-weight: 650; color: var(--ink); }
.rc-sp-prose p { margin: 0 0 16px; }
.rc-sp-prose ul.list, .rc-sp-prose ol.list { margin: 0 0 18px; padding-left: 22px; }
.rc-sp-prose ul.list { list-style: disc; }
.rc-sp-prose ol.list { list-style: decimal; }
.rc-sp-prose ul.list li, .rc-sp-prose ol.list li { margin: 7px 0; padding-left: 4px; }
.rc-sp-prose li::marker { color: var(--brand-700); font-variant-numeric: tabular-nums; }
.rc-sp-prose strong { color: var(--ink); font-weight: 650; }
.rc-sp a:not([class]) { color: var(--brand-700); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-200); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.rc-sp a:not([class]):hover { text-decoration-color: var(--brand-700); }
@media (min-width: 1024px) { .rc-sp-prose h2 { font-size: 28px; } }

/* Callout */
.rc-sp-note, .rc-sp-prose .note { margin: 22px 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--brand-700); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; }
.rc-sp-note strong, .rc-sp-prose .note strong { color: var(--ink); }

/* ---------- Hero ---------- */
.rc-sp-hero { padding: 92px 0 56px; border-bottom: 1px solid var(--line); background: var(--surface); }
.rc-sp-hero-grid { display: grid; gap: 40px; align-items: center; }
.rc-sp-hero--solo .rc-sp-hero-copy { max-width: 760px; }
@media (min-width: 1024px) {
    .rc-sp-hero { padding: 112px 0 80px; }
    .rc-sp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
}
.rc-sp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; color: var(--ink-subtle); }
.rc-sp-crumbs a { color: var(--ink-subtle); text-decoration: none; }
.rc-sp-crumbs a:hover { color: var(--brand-700); }
.rc-sp-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-input); }
.rc-sp-crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.rc-sp-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 5px 11px 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); }
.rc-sp-tag-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--brand-100); color: var(--brand-700); font-size: 11px; }
.rc-sp-tag-ic--shopify { background: transparent; color: #5e8e3e; }
.rc-sp-tag-ic--woocommerce { background: transparent; color: #7f54b3; width: 30px; }
.rc-sp-tag-ic--whatsapp { background: var(--whatsapp-bg); color: var(--whatsapp); }
.rc-sp-tag-ic--instagram { background: linear-gradient(45deg, #fa7e1e, #d62976 45%, #962fbf 80%, #4f5bd5); color: #ffffff; }
.rc-sp-h1 { margin: 0; font-family: var(--font-display); font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.rc-sp-intro { margin: 18px 0 0; max-width: 580px; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
.rc-sp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.rc-sp-actions .rc-btn-lg { height: 44px; padding: 0 20px; font-size: 14.5px; }
.rc-sp-fine { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-subtle); }
.rc-sp-fine li { display: inline-flex; align-items: center; gap: 6px; }
.rc-sp-fine svg { color: var(--brand-700); }
@media (min-width: 640px) { .rc-sp-h1 { font-size: 42px; } }
@media (min-width: 1024px) { .rc-sp-h1 { font-size: 48px; } }

/* Product video in a window frame */
.rc-sp-frame { border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.rc-sp-frame-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-sunken); }
.rc-sp-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-muted); }
.rc-sp-frame-bar span { margin-left: 10px; font-size: 11.5px; color: var(--ink-subtle); }
.rc-sp-frame video, .rc-sp-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-sunken); }
.rc-sp-frame video { aspect-ratio: 16 / 10; } /* feature loops are 1280x800 panel recordings */
.rc-sp-tour { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--brand-700); cursor: pointer; }
.rc-sp-tour:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mocks (HTML + CSS, aria-hidden) ---------- */
.rc-sp-mock { width: 100%; max-width: 440px; margin: 0 auto; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.rc-sp-mock--flat { box-shadow: var(--shadow-md); }
/* Feature loop (partials/rc-anim) in the first section, framed like a mock */
.rc-sp-anim { width: 100%; max-width: 480px; margin: 0 auto; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
.rc-sp-anim .rc-anim { display: block; }
.rc-sp-mock-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.rc-sp-mock-av { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: 13px; font-weight: 700; }
.rc-sp-mock-name { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.rc-sp-mock-name small { font-size: 11.5px; font-weight: 400; color: var(--ink-subtle); }
.rc-sp-mock-head .rc-badge { margin-left: auto; }
.rc-sp-mock .rc-chat { border-radius: 0; background: var(--chat-wall-app); min-height: 0; }
.rc-sp-mock .rc-bubble { max-width: 84%; }
.rc-sp-mock .rc-bubble time { display: block; margin-top: 3px; text-align: right; font-size: 10.5px; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.rc-sp-tick { color: var(--read-tick); letter-spacing: -2px; margin-left: 3px; }
.rc-sp-btns { display: flex; flex-direction: column; gap: 4px; align-self: flex-end; width: min(84%, 260px); margin-top: -6px; }
.rc-sp-btns--in { align-self: flex-start; }
.rc-sp-btns span { display: block; padding: 7px 10px; border-radius: var(--radius-md); background: var(--chat-in); text-align: center; font-size: 13px; font-weight: 600; color: var(--read-tick); box-shadow: 0 1px 1px rgba(16,32,28,0.06); }
.rc-sp-sys { align-self: center; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface); font-size: 11px; color: var(--ink-subtle); }
.rc-sp-mock-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-subtle); background: var(--surface); }
.rc-sp-var { padding: 0 3px; border-radius: 3px; background: var(--info-bg); color: var(--info-ink); font-family: var(--font-mono); font-size: 12px; }

/* List-style mock rows (inbox, contacts, campaign, orders) */
.rc-sp-rows { margin: 0; padding: 0; list-style: none; }
.rc-sp-rows li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); }
.rc-sp-rows li:first-child { border-top: 0; }
.rc-sp-rows strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.rc-sp-rows small { display: block; font-size: 12px; color: var(--ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sp-rows .rc-sp-grow { flex: 1; min-width: 0; }
.rc-sp-rows .rc-sp-num { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-subtle); white-space: nowrap; }
.rc-sp-bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-muted); overflow: hidden; }
.rc-sp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand-700); }
.rc-sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.rc-sp-stats div { padding: 12px 14px; border-left: 1px solid var(--line); }
.rc-sp-stats div:first-child { border-left: 0; }
.rc-sp-stats small { display: block; font-size: 11.5px; color: var(--ink-subtle); }
.rc-sp-stats strong { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Connection mock (store → ReploChat → WhatsApp) */
.rc-sp-link { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; border-bottom: 1px solid var(--line); background: var(--surface-sunken); }
.rc-sp-link-node { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rc-sp-link-line { flex: 0 1 40px; height: 1px; background: var(--line-input); position: relative; }
.rc-sp-link-line::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left-color: var(--line-input); }
.rc-sp-c-shopify { color: #5e8e3e; }
.rc-sp-c-woo { color: #7f54b3; }
.rc-sp-c-wa { color: var(--whatsapp); }
.rc-sp-c-ig { color: #d62976; }
.rc-sp-c-msg { color: #0866ff; }
.rc-sp-c-meta { color: var(--meta); }

/* Flow form mock */
.rc-sp-form { padding: 16px; display: grid; gap: 10px; }
.rc-sp-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.rc-sp-form label span { display: block; padding: 8px 10px; border: 1px solid var(--line-input); border-radius: var(--radius-md); font-size: 13px; font-weight: 400; color: var(--ink); background: var(--surface); }
.rc-sp-form .rc-btn { width: 100%; }

/* Pipeline mock */
.rc-sp-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; background: var(--surface-sunken); }
.rc-sp-kanban > div { display: grid; gap: 6px; align-content: start; }
.rc-sp-kanban h4 { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-subtle); }
.rc-sp-kanban p { margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: 12px; line-height: 1.35; color: var(--ink); }
.rc-sp-kanban p small { display: block; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }

/* ---------- Content blocks ---------- */
/* Text + mock side by side */
.rc-sp-split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1024px) {
    .rc-sp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
    .rc-sp-split--flip > :first-child { order: 2; }
    .rc-sp-split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.rc-sp-split .rc-sp-prose h2:first-child, .rc-sp-split .rc-sp-h2 { margin-top: 0; }

/* Feature list: hairline rows in two columns, not cards */
.rc-sp-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .rc-sp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
@media (min-width: 1024px) { .rc-sp-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } }
.rc-sp-list > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rc-sp-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--brand-100); color: var(--brand-700); font-size: 14px; }
.rc-sp-list h3 { margin: 4px 0 2px; font-family: var(--font-display); font-size: 16px; line-height: 1.35; font-weight: 650; color: var(--ink); }
.rc-sp-list p { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.rc-sp-list--plain > li { grid-template-columns: minmax(0, 1fr); }
.rc-sp-list--plain p { grid-column: 1; }

/* Numbered steps */
.rc-sp-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: rcsp; }
@media (min-width: 720px) { .rc-sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rc-sp-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rc-sp-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rc-sp-steps > li { counter-increment: rcsp; position: relative; padding: 18px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.rc-sp-steps > li::before { content: counter(rcsp); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 12px; border-radius: 50%; background: var(--brand-700); color: var(--surface); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-sp-steps h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 15.5px; font-weight: 650; color: var(--ink); }
.rc-sp-steps p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }

/* Checklist */
.rc-sp-check { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.rc-sp-check li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.rc-sp-check li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075e54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.rc-sp-check strong { color: var(--ink); font-weight: 650; }
.rc-sp-check--2 { gap: 10px 32px; }
@media (min-width: 720px) { .rc-sp-check--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-sp-minus li::before { background: var(--surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a55' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Rule rows (WhatsApp rules, statuses) */
.rc-sp-rules { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.rc-sp-rules li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.rc-sp-rules li:first-child { border-top: 0; }
.rc-sp-rules .rc-badge { margin-left: auto; flex-shrink: 0; }
.rc-sp-rules svg, .rc-sp-rules i { color: var(--brand-700); flex-shrink: 0; }

/* Comparison table */
.rc-sp-table { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rc-sp-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.rc-sp-table th, .rc-sp-table td { padding: 12px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-muted); }
.rc-sp-table thead th { border-top: 0; background: var(--surface-sunken); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.rc-sp-table tbody th { width: 26%; font-weight: 600; color: var(--ink); }
.rc-sp-table .rc-sp-us { background: color-mix(in srgb, var(--brand-100) 45%, transparent); color: var(--ink); }
.rc-sp-table thead .rc-sp-us { background: var(--brand-100); color: var(--brand-ink); }
.rc-sp-table-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-subtle); }
.rc-sp-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 18px; }
.rc-sp-prose th, .rc-sp-prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.rc-sp-prose th { background: var(--surface-sunken); color: var(--ink); font-weight: 600; }

/* Two-option decision ("Choose X if / Choose ReploChat if") */
.rc-sp-pair { display: grid; gap: 16px; margin: 8px 0 24px; }
@media (min-width: 720px) { .rc-sp-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-sp-pair > div { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.rc-sp-pair > div.rc-sp-pair-us { border-color: var(--brand-200); background: color-mix(in srgb, var(--brand-100) 40%, var(--surface)); }
.rc-sp-pair h3 { margin: 0 0 12px !important; font-size: 16px !important; }
.rc-sp-pair .rc-sp-check { margin: 0; }
.rc-sp-pair .rc-sp-check li { font-size: 14.5px; }

/* Simple bordered panel */
.rc-sp-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.rc-sp-panel h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 650; color: var(--ink); }
.rc-sp-panel p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; }
.rc-sp-panels { display: grid; gap: 16px; }
@media (min-width: 720px) { .rc-sp-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rc-sp-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Big statement numbers (facts only, tabular) */
.rc-sp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 900px) { .rc-sp-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rc-sp-facts li { padding: 18px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rc-sp-facts strong { display: block; font-family: var(--font-display); font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-sp-facts span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); }

/* Inline call to action at the end of a section */
.rc-sp-inline-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.rc-sp-inline-cta p { margin: 0; font-size: 14px; color: var(--ink-subtle); }

/* ---------- FAQ ---------- */
.rc-sp-faq { display: grid; gap: 24px; }
@media (min-width: 1024px) { .rc-sp-faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 64px; } .rc-sp-faq-aside { position: sticky; top: 110px; align-self: start; } }
.rc-sp-faq-aside p { margin: 12px 0 0; font-size: 15px; }
.rc-sp-faq-list { border-top: 1px solid var(--line); }
.rc-sp-faq-list details { border-bottom: 1px solid var(--line); }
.rc-sp-faq-list summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.rc-sp-faq-list summary::-webkit-details-marker { display: none; }
.rc-sp-faq-list summary h3 { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.rc-sp-faq-list summary::after { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .2s; }
.rc-sp-faq-list details[open] summary::after { transform: rotate(45deg); }
.rc-sp-faq-list summary:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: 4px; }
.rc-sp-faq-a { padding: 0 36px 20px 0; font-size: 15px; line-height: 1.65; color: var(--ink-muted); }

/* ---------- Related links / hubs ---------- */
.rc-sp-links { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .rc-sp-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1024px) { .rc-sp-links--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rc-sp-links > li { border-bottom: 1px solid var(--line); }
.rc-sp-links a { display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 4px 14px; align-items: start; padding: 18px 0; text-decoration: none; color: inherit; }
.rc-sp-links a > .rc-sp-ic { grid-row: span 2; }
.rc-sp-links strong { font-family: var(--font-display); font-size: 16px; font-weight: 650; color: var(--ink); line-height: 1.35; }
.rc-sp-links small { grid-column: 2; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.rc-sp-links .rc-sp-arrow { grid-column: 3; grid-row: 1; margin-top: 2px; color: var(--ink-subtle); transition: transform .15s, color .15s; }
.rc-sp-links a:hover strong { color: var(--brand-700); }
.rc-sp-links a:hover .rc-sp-arrow { color: var(--brand-700); transform: translateX(3px); }
.rc-sp-links a:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: 4px; }

.rc-sp-guides { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rc-sp-guides a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.rc-sp-guides a:hover { border-color: var(--brand-200); color: var(--brand-700); }
.rc-sp-guides svg { color: var(--brand-700); }

/* Hub cards for integrations (real brand marks) */
.rc-sp-brandcards { display: grid; gap: 16px; }
@media (min-width: 720px) { .rc-sp-brandcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-sp-brandcard { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s; }
.rc-sp-brandcard:hover { border-color: var(--brand-200); }
.rc-sp-brandcard h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.rc-sp-brandcard p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.rc-sp-brandcard .rc-sp-more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--brand-700); }

/* ---------- Closing CTA band ---------- */
.rc-sp-cta { padding: 56px 0; background: var(--brand-900); color: var(--brand-200); }
.rc-sp-cta-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .rc-sp-cta { padding: 72px 0; } .rc-sp-cta-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; } }
.rc-sp-cta h2 { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--surface); text-wrap: balance; }
.rc-sp-cta p { margin: 12px 0 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--brand-200); }
.rc-sp-cta .rc-sp-actions { margin-top: 24px; }
.rc-sp-cta .rc-btn-whatsapp { font-weight: 700; }
.rc-sp-cta-ghost { background: transparent; color: var(--surface); border-color: color-mix(in srgb, var(--surface) 30%, transparent); }
.rc-sp-cta-ghost:hover { background: color-mix(in srgb, var(--surface) 8%, transparent); }
.rc-sp-cta-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: rccta; border-top: 1px solid color-mix(in srgb, var(--surface) 14%, transparent); }
.rc-sp-cta-steps li { counter-increment: rccta; display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--surface) 14%, transparent); font-size: 15px; color: var(--surface); }
.rc-sp-cta-steps li::before { content: "0" counter(rccta); font-size: 13px; font-weight: 600; color: var(--brand-300); font-variant-numeric: tabular-nums; }
.rc-sp-cta-steps small { margin-left: auto; font-size: 13px; color: var(--brand-300); white-space: nowrap; }
@media (min-width: 1024px) { .rc-sp-cta h2 { font-size: 34px; } }

/* Mobile app video button */
.rc-sp-play { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-sunken); cursor: pointer; box-shadow: var(--shadow-md); }
.rc-sp-play img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rc-sp-play span { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--radius-pill); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-md); }
.rc-sp-play span i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-700); color: var(--surface); font-size: 10px; padding-left: 2px; }
.rc-sp-play:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .rc-sp *, .rc-sp *::before, .rc-sp *::after { transition: none !important; } }

/* Small helpers */
.rc-sp .rc-sp-h2--sm { font-size: 22px; }
.rc-sp .rc-sp-h2--xs { font-size: 18px; }
.rc-sp-mt { margin-top: 18px; }
.rc-sp-mt-lg { margin-top: 36px; }
.rc-sp-links-title { margin: 0; font-size: inherit; line-height: 1.35; }
.rc-sp-prose .rc-sp-kicker { margin: 0 0 10px; }
.rc-sp-prose .rc-sp-lede { margin: 14px 0 16px; }
.rc-sp .rc-sp-links a, .rc-sp .rc-sp-guides a, .rc-sp .rc-sp-crumbs a { text-decoration: none; font-weight: inherit; }
.rc-sp .rc-sp-links a { color: inherit; }
.rc-sp .rc-sp-crumbs a { color: var(--ink-subtle); font-weight: 400; }
.rc-sp .rc-sp-crumbs a:hover { color: var(--brand-700); }
.rc-sp .rc-sp-guides a { color: var(--ink); font-weight: 500; }
.rc-sp .rc-sp-guides a:hover { color: var(--brand-700); }
.rc-sp code { padding: 1px 5px; border-radius: 4px; background: var(--surface-muted); color: var(--ink); font-family: var(--font-mono); font-size: 0.86em; word-break: break-word; }
.rc-sp-table--fit table { min-width: 0; }
.rc-sp-panel .rc-chat { margin-top: 10px; }
.rc-sp-panel .rc-bubble { max-width: 92%; }
/* Image header placeholder inside a broadcast bubble */
.rc-sp-imgph { display: flex; align-items: center; justify-content: center; height: 96px; margin-bottom: 8px; border-radius: var(--radius-md); background: var(--surface-muted); color: var(--ink-subtle); font-size: 12px; }
.rc-sp-list .rc-chat { margin: 8px 0 6px; }
.rc-sp-contact { display: flex; flex-direction: column; gap: 4px; }
.rc-sp-contact h2 { margin: 12px 0 4px; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.rc-sp-contact .rc-btn { margin-top: auto; align-self: flex-start; }
.rc-sp .rc-sp-contact-num { margin: 4px 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-sp-ic.rc-sp-c-wa { background: var(--whatsapp-bg); color: var(--whatsapp); }
.rc-sp-ic.rc-sp-c-ig { background: #fdeef5; color: #d62976; }
.rc-sp-ic.rc-sp-c-msg { background: #e8f0ff; color: #0866ff; }
.rc-sp-ic.rc-sp-c-shopify, .rc-sp-ic.rc-sp-c-woo { background: var(--surface-sunken); }
/* The WooCommerce mark is a wide wordmark: show it large inside a short clipped box. */
.rc-sp-woo { display: inline-flex; align-items: center; justify-content: center; height: 14px; overflow: hidden; flex-shrink: 0; }
.rc-sp-woo--md { height: 20px; }
.rc-sp-tag-ic--woocommerce { width: auto; }
.rc-sp-brandlogo { display: inline-flex; align-items: center; height: 34px; overflow: hidden; }