/* ==========================================================================
   SETLAB - PAGE BLOCKS
   Shared styles for pages built with Gutenberg blocks.
   Everything is inside .sl-page, so old pages are not touched.
   Colors and sizes come from the tokens in style.css.
   ========================================================================== */

.sl-page {
    isolation: isolate;
    overflow-x: clip;
    /* the Group block can get its own padding (50px) from the theme or the editor */
    padding: 0 !important;
}

/* WordPress adds a 24px gap between blocks inside groups. We control spacing ourselves. */
.sl-page .wp-block-group > * {
    margin-block: 0;
}

/* Astra and the theme add padding and margins around the page content (about 100px on top,
   80px on the sides). On pages built with .sl-page we remove them from every wrapper that
   contains the page, so the sections can use the full width. */
body:has(.sl-page) {
    overflow-x: clip;
}

body:has(.sl-page) :has(.sl-page):not(.sl-page) {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* A page with a sidebar layout would squeeze the content to one side */
body:has(.sl-page) #secondary {
    display: none !important;
}

/* Other places where a theme can add space between the header and the page */
html:has(.sl-page),
body:has(.sl-page) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body:has(.sl-page) #masthead {
    margin-bottom: 0 !important;
}

/* Safety net: full width even if a wrapper keeps some padding */
.sl-page {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw) !important;
}

/* English phrase inside a Persian page (keeps punctuation in the right place) */
.sl-page .sl-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------- Sections ---------- */

.sl-page .sl-section {
    padding-block: clamp(56px, 8vw, 104px);
}

.sl-page .sl-tight {
    padding-top: 0;
}

.sl-page .sl-section.sl-compact {
    padding-block: clamp(32px, 4vw, 56px);
}

/* Space between the blocks inside a section */
.sl-page .sl-section > .sl-wrap > * + * {
    margin-top: 36px;
}

.sl-page .sl-cta-row .wp-block-buttons {
    justify-content: center;
}

.sl-page .sl-alt {
    background: var(--sl-panel-deep);
    border-block: 1px solid var(--sl-border-soft);
}

.sl-page .sl-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
}

.sl-page .sl-head.sl-center {
    align-items: center;
    margin-inline: auto;
    text-align: center;
}

.sl-page .sl-head p {
    color: var(--sl-muted);
    font-size: 16px;
    line-height: 2.05;
}

.sl-page .sl-head .sl-kicker {
    margin: 0;
    color: var(--sl-accent);
    font-size: 13px;
}

/* ---------- Grid and cards ---------- */

.sl-page .sl-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sl-page .sl-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-page .sl-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sl-page .sl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-lg);
    transition:
        border-color var(--sl-transition),
        transform var(--sl-transition);
}

.sl-page .sl-card:hover {
    border-color: var(--sl-accent-border);
    transform: translateY(-3px);
}

.sl-page .sl-card h3 {
    font-size: 18px;
}

.sl-page .sl-card p {
    color: var(--sl-muted);
    font-size: 15px;
    line-height: 2;
}

.sl-page .sl-card .sl-num {
    margin-bottom: 4px;
    color: var(--sl-accent);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

.sl-page .sl-card-strong {
    border-color: var(--sl-accent-border);
    background: linear-gradient(180deg, var(--sl-accent-soft), rgba(255, 255, 255, .015));
}

/* ---------- Badges and chips ---------- */

.sl-page .sl-card p.sl-badge,
.sl-page p.sl-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 12px;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-pill);
    color: var(--sl-text-soft);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.9;
}

.sl-page p.sl-badge-free {
    border-color: rgba(78, 230, 177, .35);
    color: var(--sl-success);
}

.sl-page p.sl-badge-gift {
    border-color: var(--sl-accent-border);
    background: var(--sl-accent-soft);
    color: var(--sl-accent);
}

.sl-page p.sl-badge-pro {
    color: var(--sl-text-soft);
}

/* ---------- Two columns ---------- */

.sl-page .sl-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.sl-page .sl-split > .sl-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sl-page .sl-split h2 + p,
.sl-page .sl-stack p {
    color: var(--sl-muted);
    line-height: 2.05;
}

/* ---------- Buttons (outline style) ---------- */

.sl-page .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sl-page .wp-block-button.is-style-outline .wp-block-button__link {
    background: rgba(255, 255, 255, .025) !important;
    border-color: var(--sl-border) !important;
    color: var(--sl-text) !important;
}

.sl-page .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(255, 255, 255, .055) !important;
    border-color: rgba(185, 211, 226, .28) !important;
    box-shadow: none;
}

/* ---------- Lists ---------- */

.sl-page .sl-checks,
.sl-page .sl-crosses {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-page .sl-checks li,
.sl-page .sl-crosses li {
    position: relative;
    padding-inline-start: 28px;
    color: var(--sl-text-soft);
    font-size: 15px;
    line-height: 1.95;
}

.sl-page .sl-checks li::before,
.sl-page .sl-crosses li::before {
    position: absolute;
    inset-inline-start: 0;
    font-weight: 700;
}

.sl-page .sl-checks li::before  { content: "\2713"; color: var(--sl-success); }
.sl-page .sl-crosses li::before { content: "\2715"; color: var(--sl-danger); }

/* ---------- Formula box ---------- */

.sl-page .sl-formula {
    direction: ltr;
    unicode-bidi: isolate;
    padding: 16px 20px;
    overflow-x: auto;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-md);
    background: var(--sl-panel-deep);
    color: var(--sl-text-soft);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 2;
    text-align: left;
}

/* ---------- FAQ (Details block) ---------- */

.sl-page .sl-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 860px;
    margin-inline: auto;
}

.sl-page .sl-faq details {
    padding: 0 22px;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-md);
    background: rgba(255, 255, 255, .02);
    transition:
        border-color var(--sl-transition),
        background var(--sl-transition);
}

.sl-page .sl-faq details[open] {
    border-color: var(--sl-accent-border);
    background: var(--sl-accent-soft);
}

.sl-page .sl-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 18px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.sl-page .sl-faq summary::-webkit-details-marker { display: none; }

.sl-page .sl-faq summary::after {
    content: "+";
    color: var(--sl-accent);
    font-size: 22px;
    line-height: 1;
}

.sl-page .sl-faq details[open] summary::after { content: "\2212"; }

.sl-page .sl-faq details p {
    padding-bottom: 18px;
    color: var(--sl-muted);
    font-size: 15px;
    line-height: 2.1;
}


/* ---------- Steps with arrows (start path) ---------- */

.sl-page .sl-steps .sl-card:not(:last-child)::after {
    content: "\2190";
    position: absolute;
    top: 50%;
    inset-inline-end: -17px;
    z-index: 1;
    color: var(--sl-dim);
    font-size: 14px;
    transform: translateY(-50%);
}

/* ---------- Core loop (6 steps) ---------- */

.sl-page .sl-loop {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
}

.sl-page .sl-loop-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    border: 1px solid var(--sl-border-soft);
    border-radius: var(--sl-radius-md);
    background: rgba(255, 255, 255, .02);
    text-align: center;
}

.sl-page .sl-loop-step:not(:last-child)::after {
    content: "\2190";
    position: absolute;
    top: 50%;
    inset-inline-end: -13px;
    z-index: 1;
    color: var(--sl-dim);
    font-size: 12px;
    transform: translateY(-50%);
}

.sl-page .sl-loop-step.is-key {
    border-color: var(--sl-accent-border);
    background: var(--sl-accent-soft);
    box-shadow: 0 12px 34px rgba(38, 208, 206, .1);
}

.sl-page .sl-loop-num {
    color: var(--sl-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.sl-page .sl-loop-title {
    color: var(--sl-text);
    font-size: 15px;
    font-weight: 700;
}

.sl-page .sl-loop-sub {
    color: var(--sl-muted);
    font-size: 12.5px;
    line-height: 1.8;
}

/* ---------- Setup card sample (same look as the SetLab panel) ---------- */

.sl-page .sl-mock {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sl-page .sl-setup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-md);
    background: linear-gradient(180deg, #151e29, #0e151d);
    direction: ltr;
}

.sl-page .sl-setup-head,
.sl-page .sl-setup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sl-page .sl-setup .sl-setup-name {
    color: var(--sl-text);
    font-weight: 800;
    letter-spacing: .02em;
}

.sl-page .sl-setup .sl-setup-count,
.sl-page .sl-setup .sl-setup-empty {
    color: var(--sl-muted);
    font-size: 12px;
}

.sl-page .sl-setup .sl-setup-win,
.sl-page .sl-setup .sl-setup-r {
    color: var(--sl-text);
    font-weight: 700;
}

.sl-page .sl-setup .sl-pill {
    padding: 0 14px;
    border: 1px solid;
    border-radius: var(--sl-radius-pill);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.9;
}

.sl-page .sl-setup .sl-pill-neg { color: var(--sl-danger);  border-color: rgba(255, 104, 120, .4); background: rgba(255, 104, 120, .1); }
.sl-page .sl-setup .sl-pill-pos { color: var(--sl-success); border-color: rgba(78, 230, 177, .4);  background: rgba(78, 230, 177, .1); }

.sl-page .sl-stack p.sl-cap {
    color: var(--sl-dim);
    font-size: 12.5px;
    line-height: 1.9;
}

.sl-page .sl-defs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-page .sl-defs li {
    padding: 12px 16px;
    border: 1px solid var(--sl-border-soft);
    border-radius: var(--sl-radius-md);
    background: rgba(255, 255, 255, .02);
    color: var(--sl-text-soft);
    font-size: 14.5px;
    line-height: 1.9;
}

.sl-page .sl-defs strong {
    color: var(--sl-accent);
    font-weight: 700;
}

/* ---------- Icon tiles (data URIs, color #26d0ce) ---------- */

.sl-page .sl-ic::before {
    content: "";
    display: block;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    border: 1px solid var(--sl-accent-border);
    border-radius: 12px;
    background-color: var(--sl-accent-soft);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px;
}

.sl-page .sl-ic-pen::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020h9%22/%3E%3Cpath%20d=%22M16.4%203.6a2.1%202.1%200%200%201%203%203L7.4%2018.6l-4%201%201-4z%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-clock::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Cpolyline%20points=%2212%206%2012%2012%2016%2014%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-link::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.5.5l3-3a5%205%200%200%200-7-7l-1.7%201.7%22/%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.5-.5l-3%203a5%205%200%200%200%207%207l1.7-1.7%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-play::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Cpolygon%20points=%2210%208%2016%2012%2010%2016%2010%208%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-target::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%226%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%222%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-ruler::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21.3%2015.3a2.4%202.4%200%200%201%200%203.4l-2.6%202.6a2.4%202.4%200%200%201-3.4%200L2.7%208.7a2.4%202.4%200%200%201%200-3.4l2.6-2.6a2.4%202.4%200%200%201%203.4%200z%22/%3E%3Cpath%20d=%22m14.5%2012.5%202-2%22/%3E%3Cpath%20d=%22m11.5%209.5%202-2%22/%3E%3Cpath%20d=%22m8.5%206.5%202-2%22/%3E%3Cpath%20d=%22m17.5%2015.5%202-2%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-click::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m9%209%205%2012%201.8-5.2L21%2014%209%209z%22/%3E%3Cpath%20d=%22m16%2016%204.2%204.2%22/%3E%3Cpath%20d=%22M7.2%202.2l.8%202.9%22/%3E%3Cpath%20d=%22M5.1%208l-2.9-.8%22/%3E%3Cpath%20d=%22M14%204l-2.1%202.1%22/%3E%3Cpath%20d=%22M6.2%2011.8%204.1%2014%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-chart::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%203v18h18%22/%3E%3Cpath%20d=%22M18%2017V9%22/%3E%3Cpath%20d=%22M13%2017V5%22/%3E%3Cpath%20d=%22M8%2017v-3%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-path::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M22%2012h-4l-3%209L9%203l-3%209H2%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-eyeoff::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9.9%209.9a3%203%200%201%200%204.2%204.2%22/%3E%3Cpath%20d=%22M10.7%205.1A10.4%2010.4%200%200%201%2012%205c7%200%2010%207%2010%207a13.2%2013.2%200%200%201-1.7%202.7%22/%3E%3Cpath%20d=%22M6.6%206.6A13.5%2013.5%200%200%200%202%2012s3%207%2010%207a9.7%209.7%200%200%200%205.4-1.6%22/%3E%3Cline%20x1=%222%22%20y1=%222%22%20x2=%2222%22%20y2=%2222%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-layers::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%202-9.5%204.5L12%2011l9.5-4.5z%22/%3E%3Cpath%20d=%22m2.5%2017.5%209.5%204.5%209.5-4.5%22/%3E%3Cpath%20d=%22m2.5%2012%209.5%204.5%209.5-4.5%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-shield::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2013c0%205-3.5%207.5-7.7%209a1%201%200%200%201-.7%200C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.500-1.200%206.200-2.700a1.200%201.200%200%200%201%201.500%200C14.500%203.800%2017%205%2019%205a1%201%200%200%201%201%201z%22/%3E%3Cpath%20d=%22m9%2012%202%202%204-4%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-list::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m3%2017%202%202%204-4%22/%3E%3Cpath%20d=%22m3%207%202%202%204-4%22/%3E%3Cpath%20d=%22M13%206h8%22/%3E%3Cpath%20d=%22M13%2012h8%22/%3E%3Cpath%20d=%22M13%2018h8%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-gift::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%228%22%20width=%2218%22%20height=%224%22%20rx=%221%22/%3E%3Cpath%20d=%22M12%208v13%22/%3E%3Cpath%20d=%22M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22/%3E%3Cpath%20d=%22M7.500%208a2.500%202.500%200%200%201%200-5C11%203%2012%208%2012%208s1-5%204.500-5a2.500%202.500%200%200%201%200%205%22/%3E%3C/svg%3E"); }
.sl-page .sl-ic-key::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%2326d0ce%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%227.500%22%20cy=%2215.500%22%20r=%224.500%22/%3E%3Cpath%20d=%22m10.700%2012.300%209.800-9.800%22/%3E%3Cpath%20d=%22m16%207%202.500%202.500%22/%3E%3Cpath%20d=%22m18.500%204.500%202%202%22/%3E%3C/svg%3E"); }

/* ---------- Small screens ---------- */

@media (max-width: 960px) {
    .sl-page .sl-loop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sl-page .sl-loop-step::after,
    .sl-page .sl-steps .sl-card::after { display: none; }
    .sl-page .sl-grid,
    .sl-page .sl-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sl-page .sl-split  { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .sl-page .sl-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
    .sl-page .sl-grid,
    .sl-page .sl-cols-2,
    .sl-page .sl-cols-4 { grid-template-columns: minmax(0, 1fr); }
    .sl-page .sl-card   { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .sl-page .sl-card,
    .sl-page .sl-faq details { transition: none; }
    .sl-page .sl-card:hover  { transform: none; }
}