/* Sparkle Cloud Light — generated from assets/css/src by build-css.mjs. Do not edit directly. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..500,0..1,0&display=block");

/* ---- 00-tokens.css ---- */

/* ==========================================================================
   Design tokens — light (default) and dark ([data-theme="dark"] on <html>)
   ========================================================================== */
:root {
    --scl-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --scl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --scl-bg: #FBFAF7;
    --scl-surface: #FFFFFF;
    --scl-surface-2: #F4F1F6;
    --scl-surface-3: #F7F4F9;
    --scl-border: #ECE8EF;
    --scl-border-subtle: #F1EEF3;
    --scl-border-2: #DCD5E3;
    --scl-text: #1B1626;
    --scl-text-2: #5F586B;
    --scl-text-3: #766F82;
    --scl-text-body: #3A3346;
    --scl-text-nav: #4A4356;

    --scl-brand: #6D35D9;
    --scl-brand-h: #5A26C2;
    --scl-brand-ink: #5A28BF;
    --scl-brand-soft: #F2ECFD;
    --scl-brand-tint: #F7F2FD;
    --scl-brand-tint-border: #E3D8FA;
    --scl-brand-light: #C9B6F5;
    --scl-on-brand: #FFFFFF;

    --scl-cta: #FFB061;
    --scl-cta-h: #FFA142;
    --scl-on-cta: #2B1A08;

    --scl-dark: #1B1626;
    --scl-on-dark: #FFFFFF;

    --scl-success: #23703F;
    --scl-success-bg: #EAF5EE;
    --scl-success-dot: #22A06B;
    --scl-warning: #8A5300;
    --scl-warning-bg: #FFF3DB;
    --scl-danger: #B42318;
    --scl-danger-bg: #FDECEA;
    --scl-info: #1F5FB8;
    --scl-info-bg: #EAF2FE;
    --scl-pink: #E04FB0;
    --scl-pink-ink: #9D1F6B;
    --scl-pink-bg: #FCE7F4;
    --scl-blue: #3A8DF0;
    --scl-star: #FFB061;

    --scl-ph-a: #F1EEF3;
    --scl-ph-b: #F8F6F9;
    --scl-glass: rgba(255, 255, 255, .94);
    --scl-glass-border: rgba(27, 22, 38, .06);

    --scl-grad-text: linear-gradient(90deg, #C2389E 0%, #6D35D9 52%, #2F72E0 100%);
    --scl-grad-bar: linear-gradient(90deg, #cf5aff, #7b7bff, #3aa8ff);
    --scl-grad-border: linear-gradient(135deg, #ff5ad0, #cf5aff 30%, #7b7bff 60%, #3aa8ff);
    --scl-conic: conic-gradient(from 180deg, #ff5ad0, #cf5aff, #7b7bff, #3aa8ff, #22ccff, #ff5ad0);
    --scl-aurora-opacity: .14;
    --scl-tint-panel: linear-gradient(135deg, #F7F2FD 0%, #F3ECFD 45%, #E9F0FF 100%);

    --scl-shadow-sm: 0 1px 2px rgba(27, 22, 38, .06);
    --scl-shadow-md: 0 1px 2px rgba(27, 22, 38, .04), 0 8px 24px -12px rgba(27, 22, 38, .18);
    --scl-shadow-lg: 0 24px 50px -24px rgba(70, 30, 130, .32);
    --scl-shadow-hover: 0 30px 60px -30px rgba(70, 30, 130, .35);
    --scl-shadow-pop: 0 40px 100px -40px rgba(109, 53, 217, .4), 0 20px 40px -24px rgba(27, 22, 38, .18);
    --scl-shadow-cta: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px -10px rgba(255, 176, 97, .6);

    --scl-r-sm: 8px;
    --scl-r-md: 12px;
    --scl-r-lg: 18px;
    --scl-r-xl: 24px;
    --scl-r-2xl: 28px;
    --scl-r-3xl: 32px;
    --scl-r-pill: 999px;

    --scl-ease: cubic-bezier(.2, .8, .2, 1);
    --scl-gutter: clamp(20px, 4vw, 40px);
    --scl-section-y: clamp(56px, 7vw, 96px);
    --scl-max: 1200px;
    --scl-max-wide: 1240px;
    /* Height of the page builder's sticky admin bar (logged-in editors); theme.js keeps it exact */
    --scl-admin-bar-h: 0px;
    --scl-header-offset: calc(96px + var(--scl-admin-bar-h));

    color-scheme: light;
}

html[data-theme="dark"] {
    --scl-bg: #0C0A16;
    --scl-surface: #14111F;
    --scl-surface-2: #1C1829;
    --scl-surface-3: #1F1A2E;
    --scl-border: #2A2538;
    --scl-border-subtle: #221D30;
    --scl-border-2: #3A3449;
    --scl-text: #F4F2F8;
    --scl-text-2: #ABA4BC;
    --scl-text-3: #8E87A2;
    --scl-text-body: #D9D4E3;
    --scl-text-nav: #C9C3D6;

    --scl-brand: #A98BFF;
    --scl-brand-h: #BBA3FF;
    --scl-brand-ink: #CBB8FF;
    --scl-brand-soft: #251C40;
    --scl-brand-tint: #181327;
    --scl-brand-tint-border: #33285A;
    --scl-brand-light: #5B47A0;
    --scl-on-brand: #140C2B;

    --scl-dark: #F4F2F8;
    --scl-on-dark: #140C2B;

    --scl-success: #5FD49A;
    --scl-success-bg: rgba(95, 212, 154, .12);
    --scl-success-dot: #5FD49A;
    --scl-warning: #F5B54A;
    --scl-warning-bg: rgba(245, 181, 74, .12);
    --scl-danger: #FF8A80;
    --scl-danger-bg: rgba(255, 138, 128, .12);
    --scl-info: #6BB6FF;
    --scl-info-bg: rgba(107, 182, 255, .12);
    --scl-pink: #F07CC8;
    --scl-pink-ink: #F49AD3;
    --scl-pink-bg: rgba(224, 79, 176, .14);

    --scl-ph-a: #1C1829;
    --scl-ph-b: #221D30;
    --scl-glass: rgba(20, 17, 31, .9);
    --scl-glass-border: rgba(255, 255, 255, .06);

    --scl-grad-text: linear-gradient(90deg, #F07CC8 0%, #A98BFF 52%, #6BB6FF 100%);
    --scl-aurora-opacity: .22;
    --scl-tint-panel: linear-gradient(135deg, #181327 0%, #1B1430 45%, #121A2E 100%);

    --scl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --scl-shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --scl-shadow-lg: 0 24px 50px -24px rgba(0, 0, 0, .7);
    --scl-shadow-hover: 0 30px 60px -30px rgba(0, 0, 0, .75);
    --scl-shadow-pop: 0 40px 100px -40px rgba(120, 80, 255, .35), 0 20px 40px -24px rgba(0, 0, 0, .6);

    color-scheme: dark;
}

/* ---- 10-base.css ---- */
/* ==========================================================================
   Page base — this stylesheet loads after the app and /site.css, so it owns
   the page background, text colour and font while this theme is active.
   ========================================================================== */
html body {
    background: var(--scl-bg) !important;
    background-color: var(--scl-bg) !important;
    color: var(--scl-text);
    font-family: var(--scl-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--scl-header-offset);
}

::selection {
    background: var(--scl-brand-soft);
    color: var(--scl-text);
}

/* The page builder wraps every component in <section data-component> with
   z-index:1; lift the header's wrapper so its menus overlay later sections. */
[data-component]:has(> .scl-header),
[data-component]:has(.scl-header) {
    z-index: 1000;
    overflow: visible !important;
}

/* ==========================================================================
   Component scope — every component root carries .scl
   ========================================================================== */
.scl {
    font-family: var(--scl-font);
    color: var(--scl-text);
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}

.scl,
.scl *,
.scl *::before,
.scl *::after {
    box-sizing: border-box;
}

.scl :where(h1, h2, h3, h4, h5, h6) {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
    margin: 0;
}

.scl :where(p, ul, ol, figure, blockquote, dl, dd) {
    margin: 0;
}

.scl :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.scl :where(img, svg, video) {
    display: block;
    max-width: 100%;
}

.scl :where(a) {
    color: var(--scl-brand);
    text-decoration: none;
    transition: color 150ms;
}

.scl :where(a:hover) {
    color: var(--scl-brand-h);
}

.scl :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.scl :where(input, textarea, select) {
    font: inherit;
}

.scl :focus-visible {
    outline: 2px solid var(--scl-brand);
    outline-offset: 3px;
    border-radius: 6px;
}

.scl [x-cloak] {
    display: none !important;
}

.scl-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.scl-section {
    position: relative;
    padding: var(--scl-section-y) var(--scl-gutter);
}

.scl-section--flush-top { padding-top: 0; }
.scl-section--flush-bottom { padding-bottom: 0; }
.scl-section--tight { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.scl-section--hero { padding-top: clamp(120px, 14vw, 176px); }

.scl-bg-default { background: var(--scl-bg); }
.scl-bg-surface { background: var(--scl-surface); }
.scl-bg-muted { background: var(--scl-surface-2); }
.scl-bg-tint { background: var(--scl-brand-tint); }
.scl-bg-gradient { background: linear-gradient(180deg, var(--scl-brand-tint) 0%, var(--scl-bg) 100%); }

.scl-container {
    position: relative;
    width: 100%;
    max-width: var(--scl-max);
    margin-inline: auto;
}

.scl-container--narrow { max-width: 880px; }
.scl-container--text { max-width: 760px; }
.scl-container--wide { max-width: var(--scl-max-wide); }

.scl-stack { display: flex; flex-direction: column; }
.scl-gap-8 { gap: 8px; }
.scl-gap-12 { gap: 12px; }
.scl-gap-16 { gap: 16px; }
.scl-gap-24 { gap: 24px; }
.scl-gap-32 { gap: 32px; }

.scl-grid {
    display: grid;
    gap: 16px;
}

.scl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.scl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.scl-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.scl-grid--5 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

@media (min-width: 1000px) {
    .scl-grid--3.scl-grid--fixed { grid-template-columns: repeat(3, 1fr); }
    .scl-grid--4.scl-grid--fixed { grid-template-columns: repeat(4, 1fr); }
}

.scl-split {
    display: grid;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

@media (min-width: 1000px) {
    .scl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .scl-split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .scl-split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .scl-split--top { align-items: start; }
}

.scl-center { text-align: center; margin-inline: auto; }
.scl-center .scl-actions { justify-content: center; }

/* ==========================================================================
   Typography
   ========================================================================== */
.scl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--scl-brand);
}

.scl-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl .scl-display,
.scl .scl-h1--xl {
    font-size: clamp(32px, min(8.6vw, 5.6vw + 6px), 80px);
    line-height: 1.06;
    letter-spacing: -0.045em;
    font-weight: 700;
    text-wrap: balance;
}

.scl .scl-h1 {
    font-size: clamp(36px, 5.4vw, 64px);
    line-height: 1.03;
    letter-spacing: -0.045em;
    font-weight: 700;
    text-wrap: balance;
}

.scl .scl-h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}

.scl .scl-h2--lg {
    font-size: clamp(32px, 5vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.scl .scl-h3 {
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.scl .scl-h4 {
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 600;
}

.scl .scl-h5 {
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.scl-lead {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.6;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

.scl-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

.scl-small {
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

.scl-note {
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

.scl-fine {
    font-size: 13px;
    line-height: 1.5;
    color: var(--scl-text-3);
}

.scl-strong { color: var(--scl-text); font-weight: 600; }
.scl-muted { color: var(--scl-text-2); }
.scl-num { font-variant-numeric: tabular-nums; }

.scl-grad-text {
    background: var(--scl-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* The gradient only paints inside the box: a block-level stat with a tight line-height ("1 dag")
       would lose its descenders, so extend the box downwards without changing the layout */
    padding-bottom: .2em;
    margin-bottom: -.2em;
}

.scl-stat {
    font-size: clamp(36px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.scl-stat--xl {
    font-size: clamp(56px, 8vw, 96px);
    letter-spacing: -0.05em;
}

.scl-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
}

.scl-heading--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}

.scl-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: clamp(24px, 3vw, 32px);
}

.scl-heading + .scl-body,
.scl-heading-row + .scl-body {
    margin-top: clamp(24px, 3vw, 32px);
}

/* Rich text coming from the editor */
.scl-prose {
    font-size: 16px;
    line-height: 1.75;
    color: var(--scl-text-body);
    text-wrap: pretty;
}

.scl-prose > * + * { margin-top: 1em; }
.scl-prose :where(h2) { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: var(--scl-text); margin-top: 1.6em; }
.scl-prose :where(h3) { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; color: var(--scl-text); margin-top: 1.4em; }
.scl-prose :where(h4) { font-size: 17px; font-weight: 700; color: var(--scl-text); margin-top: 1.2em; }
.scl-prose :where(ul) { list-style: disc; padding-left: 1.4em; }
.scl-prose :where(ol) { list-style: decimal; padding-left: 1.4em; }
.scl-prose :where(li) { display: list-item; }
.scl-prose :where(li + li) { margin-top: .4em; }
.scl-prose :where(li > p) { display: inline; }
.scl-prose :where(a) { color: var(--scl-brand); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.scl-prose :where(strong, b) { color: var(--scl-text); font-weight: 700; }
.scl-prose :where(blockquote) { padding: 16px 20px; border-left: 3px solid var(--scl-brand); background: var(--scl-brand-tint); border-radius: 0 12px 12px 0; color: var(--scl-text); }
.scl-prose :where(img) { border-radius: 16px; height: auto; }
.scl-prose :where(hr) { border: 0; border-top: 1px solid var(--scl-border); margin: 2em 0; }
.scl-prose :where(table) { width: 100%; border-collapse: collapse; font-size: 15px; }
.scl-prose :where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--scl-border); text-align: left; }
.scl-prose :where(p:empty)::after { content: "\00A0"; }

.scl-prose--plain { line-height: 1.6; color: inherit; font-size: inherit; }
.scl-prose--plain > * + * { margin-top: .6em; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scl *,
    .scl *::before,
    .scl *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* ---- 20-ui.css ---- */
/* ==========================================================================
   Icons — Material Symbols Rounded (weight 300, fill 0)
   ========================================================================== */
.scl-ico {
    font-family: "Material Symbols Rounded";
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    flex: none;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
    user-select: none;
}

.scl-ico--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.scl-ico--bold { font-weight: 500; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; }

.scl-icon-tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand);
}

.scl-icon-tile .scl-ico { font-size: 24px; }
.scl-icon-tile--sm { width: 40px; height: 40px; border-radius: 12px; }
.scl-icon-tile--sm .scl-ico { font-size: 21px; }
.scl-icon-tile--xs { width: 32px; height: 32px; border-radius: 10px; }
.scl-icon-tile--xs .scl-ico { font-size: 18px; }
.scl-icon-tile--lg { width: 56px; height: 56px; border-radius: 16px; }
.scl-icon-tile--lg .scl-ico { font-size: 28px; }
.scl-icon-tile--danger { background: var(--scl-danger-bg); color: var(--scl-danger); }
.scl-icon-tile--success { background: var(--scl-success-bg); color: var(--scl-success); }
.scl-icon-tile--neutral { background: var(--scl-surface-2); color: var(--scl-text); }
.scl-icon-tile--pink { background: var(--scl-pink-bg); color: var(--scl-pink-ink); }
.scl-icon-tile--info { background: var(--scl-info-bg); color: var(--scl-info); }

/* Logo pair: show the light or dark logo file depending on the colour mode */
.scl-logo-dark { display: none !important; }
html[data-theme="dark"] .scl-logo-light { display: none !important; }
html[data-theme="dark"] .scl-logo-dark { display: block !important; }

.scl-mark {
    display: inline-block;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(var(--scl-surface), var(--scl-surface)) padding-box, var(--scl-grad-border) border-box;
}

.scl-mark--lg { width: 44px; height: 44px; border-width: 4px; }
.scl-mark--md { width: 28px; height: 28px; border-width: 3px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.scl-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.scl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--scl-r-pill);
    font-family: var(--scl-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms, color 150ms, transform 150ms, box-shadow 150ms;
}

.scl-btn .scl-ico { font-size: 20px; }
.scl-btn:hover { transform: translateY(-1px); }
.scl-btn:active { transform: translateY(0); }
.scl-btn[disabled],
.scl-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.scl-btn--cta,
.scl a.scl-btn--cta {
    background: var(--scl-cta);
    color: var(--scl-on-cta);
    box-shadow: var(--scl-shadow-cta);
}

.scl-btn--cta:hover,
.scl a.scl-btn--cta:hover { background: var(--scl-cta-h); color: var(--scl-on-cta); }

.scl-btn--secondary,
.scl a.scl-btn--secondary {
    background: var(--scl-surface);
    color: var(--scl-text);
    border-color: var(--scl-border-2);
    font-weight: 600;
}

.scl-btn--secondary:hover,
.scl a.scl-btn--secondary:hover { background: var(--scl-surface-3); color: var(--scl-text); transform: none; }

.scl-btn--brand,
.scl a.scl-btn--brand {
    background: var(--scl-brand);
    color: var(--scl-on-brand);
}

.scl-btn--brand:hover,
.scl a.scl-btn--brand:hover { background: var(--scl-brand-h); color: var(--scl-on-brand); }

.scl-btn--dark,
.scl a.scl-btn--dark {
    background: var(--scl-dark);
    color: var(--scl-on-dark);
}

.scl-btn--dark:hover,
.scl a.scl-btn--dark:hover { background: color-mix(in srgb, var(--scl-dark) 86%, var(--scl-brand)); color: var(--scl-on-dark); }

.scl-btn--ghost,
.scl a.scl-btn--ghost {
    background: transparent;
    color: var(--scl-text);
    font-weight: 600;
}

.scl-btn--ghost:hover,
.scl a.scl-btn--ghost:hover { background: var(--scl-surface-2); transform: none; }

.scl-btn--sm { height: 42px; padding: 0 18px; font-size: 15px; }
.scl-btn--md { height: 48px; padding: 0 22px; font-size: 15px; }
.scl-btn--block { display: flex; width: 100%; }

.scl-btn--app {
    height: 44px;
    padding: 0 18px;
    border-radius: var(--scl-r-md);
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 560px) {
    .scl-actions--stack-mobile { flex-direction: column; align-items: stretch; }
    .scl-actions--stack-mobile .scl-btn { width: 100%; }
}

.scl-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--scl-brand);
    text-decoration: none;
}

.scl-link .scl-ico { font-size: 18px; font-weight: 400; transition: transform 150ms; }
.scl-link:hover { color: var(--scl-brand-h); }
.scl-link:hover .scl-ico { transform: translateX(3px); }
.scl-link--sm { font-size: 14px; }

.scl-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px 0 10px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--scl-text) !important;
    text-decoration: none;
    transition: background 150ms;
}

.scl-back:hover { background: var(--scl-surface-3); }
.scl-back .scl-ico { font-size: 18px; }

/* ==========================================================================
   Cards
   ========================================================================== */
.scl-card {
    position: relative;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    border-radius: var(--scl-r-xl);
    padding: clamp(20px, 2.4vw, 28px);
}

.scl-card--sm { border-radius: 20px; padding: 20px; }
.scl-card--lg { border-radius: var(--scl-r-2xl); padding: clamp(24px, 3vw, 40px); }
.scl-card--flush { padding: 0; overflow: hidden; }
.scl-card--muted { background: var(--scl-surface-2); }
.scl-card--tint { background: var(--scl-brand-tint); border-color: var(--scl-brand-tint-border); }
.scl-card--shadow { box-shadow: var(--scl-shadow-md); }
.scl-card--pop { box-shadow: var(--scl-shadow-pop); }

.scl-card--hover {
    transition: transform 250ms var(--scl-ease), box-shadow 250ms var(--scl-ease), border-color 150ms;
}

.scl-card--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--scl-shadow-hover);
    border-color: var(--scl-brand-light);
}

/* Gradient hairline border (featured / recommended cards) */
.scl-card--glow {
    border: 1.5px solid transparent;
    background: linear-gradient(var(--scl-surface), var(--scl-surface)) padding-box, var(--scl-grad-border) border-box;
}

.scl-card--glow.scl-card--tint {
    background: linear-gradient(160deg, var(--scl-brand-tint), var(--scl-surface) 60%) padding-box, var(--scl-grad-border) border-box;
}

.scl-card--dark-border { border: 1.5px solid var(--scl-text); }

a.scl-card { color: inherit; text-decoration: none; display: block; }
a.scl-card:hover { color: inherit; }

.scl-divider {
    height: 1px;
    background: var(--scl-border);
    border: 0;
    margin: 0;
}

/* ==========================================================================
   Chips, tags, badges
   ========================================================================== */
.scl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms, border-color 150ms, color 150ms;
}

.scl-chip:hover { border-color: var(--scl-text-3); color: var(--scl-text); }
.scl-chip .scl-ico { font-size: 18px; color: var(--scl-brand); }

.scl-chip.is-active,
.scl-chip[aria-pressed="true"],
.scl-chip[aria-selected="true"] {
    background: var(--scl-dark);
    border-color: var(--scl-dark);
    color: var(--scl-on-dark);
}

.scl-chip.is-active .scl-ico { color: inherit; }
.scl-chip--sm { min-height: 34px; padding: 0 12px; font-size: 14px; }

.scl-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--scl-surface-2);
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.scl-tag .scl-ico { font-size: 16px; color: var(--scl-brand); }
.scl-tag--brand { background: var(--scl-brand-soft); color: var(--scl-brand-ink); }

.scl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.scl-pill--neutral { background: var(--scl-surface-2); color: var(--scl-text); }
.scl-pill--success { background: var(--scl-success-bg); color: var(--scl-success); }
.scl-pill--warning { background: var(--scl-warning-bg); color: var(--scl-warning); }
.scl-pill--danger { background: var(--scl-danger-bg); color: var(--scl-danger); }
.scl-pill--info { background: var(--scl-info-bg); color: var(--scl-info); }
.scl-pill--outline { background: var(--scl-surface); border: 1px solid var(--scl-border); color: var(--scl-text); }
.scl-pill--grad { background: linear-gradient(90deg, #C2389E, #6D35D9 55%, #2F72E0); color: #fff; letter-spacing: .05em; text-transform: uppercase; }
.scl-pill--dark { background: var(--scl-dark); color: var(--scl-on-dark); }
.scl-pill--lg { height: 30px; padding: 0 12px; font-size: 13px; }

.scl-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--scl-success-dot);
    flex: none;
}

/* Announcement pill (hero badge) */
.scl-announce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--scl-text) !important;
    text-decoration: none;
    transition: background 150ms;
}

.scl-announce:hover { background: var(--scl-surface-3); }
.scl-announce .scl-ico { font-size: 16px; }

/* ==========================================================================
   Lists
   ========================================================================== */
.scl-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scl-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--scl-text);
}

.scl-checklist li::before {
    content: "check";
    font-family: "Material Symbols Rounded";
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: var(--scl-success);
    flex: none;
    font-feature-settings: "liga";
}

.scl-checklist--brand li::before { color: var(--scl-brand); }
.scl-checklist--sm { gap: 8px; }
.scl-checklist--sm li { font-size: 15px; gap: 10px; }
.scl-checklist--sm li::before { font-size: 18px; }

/* ==========================================================================
   Aurora backgrounds & image placeholders
   ========================================================================== */
.scl-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.scl-aurora::before {
    content: "";
    position: absolute;
    top: max(-560px, -46vw);
    right: max(-520px, -36vw);
    width: max(520px, 78vw);
    max-width: 1120px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--scl-conic);
    filter: blur(100px);
    opacity: var(--scl-aurora-opacity);
}

.scl-aurora--top::before {
    top: -70%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 110%;
    max-width: 1500px;
    aspect-ratio: 2.2;
    filter: blur(110px);
}

.scl-aurora--left::before {
    left: max(-520px, -36vw);
    right: auto;
}

.scl-blobs {
    position: absolute;
    inset: -20% -10%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(closest-side at 22% 70%, rgba(255, 90, 208, .30), transparent),
        radial-gradient(closest-side at 50% 40%, rgba(150, 90, 255, .30), transparent),
        radial-gradient(closest-side at 80% 70%, rgba(58, 168, 255, .30), transparent);
    filter: blur(40px);
}

.scl-blobs--soft { opacity: .6; }
html[data-theme="dark"] .scl-blobs { opacity: .55; }

.scl-panel-aurora {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--scl-r-3xl);
    background: var(--scl-brand-tint);
}

.scl-mark-img { width: 48px; height: 48px; display: block; }

/* Two equal-width pill buttons, like the design's hero/closing blocks */
.scl-actions--fill { width: 100%; max-width: 500px; }
.scl-actions--fill .scl-btn { flex: 1 1 auto; }
.scl-center .scl-actions--fill,
.scl-actions--fill.scl-actions--center { margin-inline: auto; justify-content: center; }

.scl-panel-aurora > .scl-blobs { z-index: -1; }

.scl-ph {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background: repeating-linear-gradient(135deg, var(--scl-ph-a) 0 8px, var(--scl-ph-b) 8px 16px);
    color: var(--scl-text-3);
    font-family: var(--scl-mono);
    font-size: 12px;
}

.scl-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface-2);
}

.scl-media > img,
.scl-media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scl-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
    font-size: 14px;
    font-weight: 700;
}

.scl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.scl-avatar--sm { width: 36px; height: 36px; font-size: 12px; }

.scl-stars {
    display: inline-flex;
    gap: 4px;
    color: var(--scl-star);
}

.scl-stars .scl-ico { font-size: 22px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ==========================================================================
   Controls: segmented, switch, range, accordion, inputs
   ========================================================================== */
.scl-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-seg__btn {
    min-width: 120px;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--scl-r-pill);
    font-size: 15px;
    font-weight: 700;
    color: var(--scl-text);
    transition: background 200ms, color 200ms;
}

.scl-seg__btn.is-active {
    background: var(--scl-dark);
    color: var(--scl-on-dark);
}

.scl-switch {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-border-2);
    transition: background 200ms;
    cursor: pointer;
}

.scl-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 22, 38, .2);
    transition: transform 200ms var(--scl-ease);
}

.scl-switch[aria-checked="true"],
.scl-switch.is-on { background: var(--scl-brand); }
.scl-switch[aria-checked="true"]::after,
.scl-switch.is-on::after { transform: translateX(18px); }

.scl-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background: transparent;
    cursor: pointer;
    --p: 50%;
}

.scl-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--scl-brand) var(--p), var(--scl-border) var(--p));
}

.scl-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--scl-brand) var(--p), var(--scl-border) var(--p));
}

.scl-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--scl-brand);
    border: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--scl-brand) 18%, transparent);
}

.scl-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--scl-brand);
    border: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--scl-brand) 18%, transparent);
}

.scl-acc {
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    border-radius: 18px;
    transition: border-color 200ms;
}

.scl-acc.is-open { border-color: var(--scl-brand-light); }

.scl-acc__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 12px 20px;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--scl-text);
}

.scl-acc__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--scl-surface-2);
    color: var(--scl-text);
    transition: transform 200ms var(--scl-ease);
}

.scl-acc__icon .scl-ico { font-size: 20px; font-weight: 400; }
.scl-acc.is-open .scl-acc__icon { transform: rotate(45deg); }

.scl-acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms var(--scl-ease);
}

.scl-acc.is-open .scl-acc__panel { grid-template-rows: 1fr; }
.scl-acc__panel > div { overflow: hidden; }

.scl-acc__body {
    padding: 0 20px 20px;
    max-width: 720px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--scl-text-2);
}

.scl-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scl-field > label,
.scl-field__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--scl-text);
}

.scl-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border-radius: var(--scl-r-md);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 16px;
    transition: border-color 150ms, box-shadow 150ms;
}

textarea.scl-input { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; }
.scl-input::placeholder { color: var(--scl-text-3); }

.scl-input:focus {
    outline: none;
    border-color: var(--scl-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--scl-brand) 16%, transparent);
}

.scl-input.is-invalid { border-color: var(--scl-danger); }
.scl-error { font-size: 13px; font-weight: 600; color: var(--scl-danger); }

/* Sparkle Forms (livewire render-form) themed to match the design.
   Components tune it with --scl-form-input-h, --scl-form-gap, --scl-form-textarea-h, --scl-form-submit-gap. */
.scl [data-sf-themed] {
    --sf-label: var(--scl-text);
    --sf-input-bg: var(--scl-surface);
    --sf-input-border: var(--scl-border-2);
    --sf-input-text: var(--scl-text);
    --sf-accent: var(--scl-brand);
    --sf-btn-bg: var(--scl-cta);
    --sf-btn-text: var(--scl-on-cta);
    --sf-btn-radius: 999px;
    --scl-form-input-h: 50px;
    --sf-input-focus: var(--scl-brand);
}

.scl [data-sf-themed] .sf-form-grid { gap: var(--scl-form-gap, 14px 12px) !important; }

.scl [data-sf-themed] .sf-label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--scl-text);
}

.scl [data-sf-themed] .sf-label > span { color: var(--scl-danger); }

.scl [data-sf-themed] .sf-input {
    display: block;
    width: 100%;
    height: var(--scl-form-input-h);
    min-height: var(--scl-form-input-h);
    padding: 0 14px;
    border-width: 1px;
    border-style: solid;
    border-radius: 12px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
}

.scl [data-sf-themed] textarea.sf-input {
    height: auto;
    min-height: var(--scl-form-textarea-h, 150px);
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}

.scl [data-sf-themed] select.sf-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23766F82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
}

.scl [data-sf-themed] .sf-input::placeholder,
.scl [data-sf-themed] .sf-phone-number::placeholder { color: var(--scl-text-3); opacity: 1; }

.scl [data-sf-themed] .sf-input:focus,
.scl [data-sf-themed] .sf-field [x-ref="anchor"]:focus-within {
    border-color: var(--scl-brand) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--scl-brand) 16%, transparent);
}

/* Phone field: the bordered box is the wrapper, the number input is bare */
.scl [data-sf-themed] .sf-field [x-ref="anchor"] {
    min-height: var(--scl-form-input-h);
    border-radius: 12px;
    transition: border-color 150ms, box-shadow 150ms;
}

.scl [data-sf-themed] .sf-phone-number {
    min-height: 0;
    height: calc(var(--scl-form-input-h) - 2px);
    padding: 0 12px;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: transparent;
    font-size: 16px;
    box-shadow: none !important;
}

/* Checkbox / radio option lists */
.scl [data-sf-themed] .sf-field label:has(> input[type="checkbox"]),
.scl [data-sf-themed] .sf-field label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    font-size: 15px;
    font-weight: 500;
}

.scl [data-sf-themed] .sf-field input[type="checkbox"],
.scl [data-sf-themed] .sf-field input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--scl-brand);
}

.scl [data-sf-themed] .sf-field p.text-red-500,
.scl [data-sf-themed] form p.text-red-500 {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--scl-danger);
}

.scl [data-sf-themed] form > .bg-red-50 {
    border-radius: 12px;
    border-color: transparent;
    background: var(--scl-danger-bg);
    color: var(--scl-danger);
}

.scl [data-sf-themed] .sf-section-title { font-size: 17px; font-weight: 700; color: var(--scl-text); }
.scl [data-sf-themed] .sf-section hr { border-color: var(--scl-border); }

/* Submit */
.scl [data-sf-themed] form > div:has(> button[type="submit"]) { padding-top: var(--scl-form-submit-gap, 16px); }
.scl [data-sf-themed] form > div:has(> [x-ref="recaptcha"]:empty) { display: none; }

.scl [data-sf-themed] .sf-btn,
.scl [data-sf-themed] button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 0 26px;
    border: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background-color 150ms, transform 150ms;
}

.scl [data-sf-themed] .sf-btn:hover { --sf-btn-bg: var(--scl-cta-h); }
.scl [data-sf-themed] .sf-btn:disabled { opacity: .6; cursor: progress; }

/* Success message */
.scl [data-sf-themed] .sf-success { padding: clamp(24px, 5vw, 48px) 12px; }
.scl [data-sf-themed] .sf-success svg { width: 56px; height: 56px; color: var(--scl-success) !important; }
.scl [data-sf-themed] .sf-success p { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--scl-text) !important; }

/* ==========================================================================
   Tables
   ========================================================================== */
.scl-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--scl-border);
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
}

.scl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.scl-table th,
.scl-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--scl-border);
    text-align: left;
    vertical-align: top;
}

.scl-table tr:last-child td { border-bottom: 0; }
.scl-table th { font-size: 14px; font-weight: 600; color: var(--scl-text-2); }

/* ---- 30-header.css ---- */
/* ==========================================================================
   Header — floating pill, mega menu, mobile sheet, sticky CTA bar
   ========================================================================== */

/* Before theme.js has measured it, assume the admin bar's default height so the header never starts underneath it */
html:has(#pb-admin-bar) { --scl-admin-bar-h: 37px; }

.scl-header {
    position: fixed;
    top: var(--scl-admin-bar-h);
    left: 0;
    right: 0;
    z-index: 50;
    padding: 12px clamp(12px, 2.5vw, 32px);
    pointer-events: none;
    overflow: visible !important;
    background: transparent !important;
}

.scl-header__wrap {
    --scl-mega-gap: 8px;
    position: relative;
    max-width: var(--scl-max-wide);
    margin: 0 auto;
    pointer-events: auto;
}

/* Hover bridge over the gap between the bar and an open mega menu, so moving the
   pointer down to the panel doesn't leave the wrap (and close the menu). It sits
   on the wrap because the panel's overflow:hidden would clip it there. */
.scl-header__wrap.has-mega::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--scl-mega-gap);
}

.scl-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px 6px 18px;
    background: var(--scl-glass);
    border: 1px solid var(--scl-glass-border);
    border-radius: var(--scl-r-pill);
    box-shadow: 0 1px 2px rgba(27, 22, 38, .04);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: box-shadow 250ms;
}

.scl-header.is-scrolled .scl-header__bar { box-shadow: 0 12px 32px -14px rgba(27, 22, 38, .28); }

.scl-header__logo { display: flex; align-items: center; flex: none; }
.scl-header__logo img,
.scl-mobile__top img { height: 26px; width: auto; display: block; }

.scl-header__nav {
    display: none;
    align-items: center;
    gap: 2px;
}

.scl-header__navbtn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 42px;
    padding: 0 12px;
    border-radius: var(--scl-r-pill);
    font-size: 15px;
    font-weight: 500;
    color: var(--scl-text-nav) !important;
    white-space: nowrap;
    text-decoration: none;
    transition: background 150ms, color 150ms;
}

button.scl-header__navbtn { padding-right: 8px; }
.scl-header__navbtn:hover,
.scl-header__navbtn.is-open { background: var(--scl-surface-3); color: var(--scl-text) !important; }
.scl-header__navbtn.is-current { background: var(--scl-brand-soft); color: var(--scl-brand-ink) !important; }
.scl-header__chev { font-size: 18px; transition: transform 200ms; }
.scl-header__navbtn.is-open .scl-header__chev { transform: rotate(180deg); }

.scl-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scl-header__iconbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: var(--scl-r-pill);
    color: var(--scl-text-nav) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 150ms;
}

.scl-header__iconbtn .scl-ico { font-size: 20px; }
.scl-header__lang .scl-ico { font-size: 19px; }
.scl-header__iconbtn:hover { background: var(--scl-surface-3); }

.scl-header__login {
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--scl-text-nav) !important;
    white-space: nowrap;
    text-decoration: none;
}

.scl-header__login:hover { color: var(--scl-text) !important; }
.scl-header .scl-btn--sm { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.scl-header .scl-btn--secondary { box-shadow: none; }
.scl-header__demo { display: none !important; }

.scl-header__burger {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-dark);
    color: var(--scl-on-dark);
}

.scl-header__burger .scl-ico { font-size: 22px; }

@media (max-width: 767px) {
    .scl-hide-mobile { display: none !important; }
}

/* The full bar needs ~1140px with the Dutch labels, so below 1200px the burger menu takes over */
@media (max-width: 1199px) {
    .scl-hide-tablet { display: none !important; }
}

@media (min-width: 1200px) {
    .scl-header__nav { display: flex; }
    .scl-header__burger { display: none; }
}

/* "Plan een demo" next to the trial CTA needs ~1290px with the Dutch labels: on wide screens the bar
   grows past the 1240px content width to make room for it */
@media (min-width: 1400px) {
    .scl-header__wrap { max-width: 1320px; }
    .scl-header__demo { display: inline-flex !important; }
}

/* Mega menu */
.scl-mega {
    position: absolute;
    top: calc(100% + var(--scl-mega-gap));
    left: 0;
    right: 0;
    display: none;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) var(--promo);
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 30px 70px -24px rgba(27, 22, 38, .35);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 200ms, transform 200ms var(--scl-ease), visibility 200ms;
}

@media (min-width: 1200px) {
    .scl-mega { display: grid; }
}

.scl-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scl-mega__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 24px 16px;
}

.scl-mega__title { padding: 0 12px 8px; }

.scl-mega__link {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--scl-text) !important;
    text-decoration: none;
    transition: background 150ms;
}

.scl-mega__link:hover,
.scl-mega__link.is-current { background: var(--scl-surface-3); }

/* The tile's soft violet is nearly the row's hover tint: lift it to the surface colour so the icon keeps its shape */
.scl-mega__link .scl-icon-tile { transition: background 150ms, box-shadow 150ms; }
.scl-mega__link:hover .scl-icon-tile,
.scl-mega__link.is-current .scl-icon-tile {
    background: var(--scl-surface);
    box-shadow: var(--scl-shadow-sm);
}

.scl-mega__text { display: flex; flex-direction: column; gap: 2px; }
.scl-mega__text b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.scl-mega__text span { font-size: 13px; line-height: 1.4; color: var(--scl-text-2); }

.scl-mega__promo {
    position: relative;
    overflow: hidden;
    margin: 12px;
    padding: 22px;
    border-radius: var(--scl-r-lg);
    background: var(--scl-brand-tint);
    color: var(--scl-text) !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
}

.scl-mega__promo > * { position: relative; }

.scl-mega__promo-glow {
    position: absolute !important;
    right: -90px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--scl-conic);
    filter: blur(44px);
    opacity: .42;
}

.scl-mega__promo .scl-label { color: var(--scl-text-2); }
.scl-mega__promo-title { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; }
.scl-mega__promo-text { font-size: 14px; line-height: 1.5; color: var(--scl-text-2); }
.scl-mega__promo-link { margin-top: auto; padding-top: 12px; }

/* Mobile sheet */
.scl-mobile {
    position: fixed;
    inset: var(--scl-admin-bar-h) 0 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--scl-bg);
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 250ms, transform 250ms var(--scl-ease), visibility 250ms;
}

.scl-mobile.is-open { opacity: 1; visibility: visible; transform: none; }

.scl-mobile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 12px 30px;
}

.scl-mobile__body {
    flex: 1;
    overflow: auto;
    padding: 4px 24px 24px;
}

.scl-mobile__sec { border-bottom: 1px solid var(--scl-border); }

.scl-mobile__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--scl-text) !important;
    text-decoration: none;
}

.scl-mobile__toggle .scl-ico { font-size: 26px; transition: transform 200ms; }
.scl-mobile__sec.is-open .scl-mobile__toggle .scl-ico { transform: rotate(180deg); }
.scl-mobile__toggle--link { border-bottom: 1px solid var(--scl-border); }

.scl-mobile__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 250ms var(--scl-ease);
}

.scl-mobile__sec.is-open .scl-mobile__panel { grid-template-rows: 1fr; }
.scl-mobile__panel > div { overflow: hidden; }
.scl-mobile__links { display: flex; flex-direction: column; padding-bottom: 12px; }

.scl-mobile__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    font-size: 16px;
    font-weight: 500;
    color: var(--scl-text) !important;
    text-decoration: none;
}

.scl-mobile__login {
    display: flex;
    align-items: center;
    min-height: 64px;
    border-bottom: 1px solid var(--scl-border);
    font-size: 17px;
    font-weight: 600;
    color: var(--scl-text-2) !important;
    text-decoration: none;
}

.scl-mobile__prefs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 4px;
}

.scl-mobile__langs {
    display: flex;
    padding: 4px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface-2);
}

.scl-mobile__langs a {
    display: grid;
    place-items: center;
    min-width: 64px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--scl-r-pill);
    font-size: 14px;
    font-weight: 700;
    color: var(--scl-text) !important;
    text-decoration: none;
}

.scl-mobile__langs a.is-active { background: var(--scl-surface); box-shadow: 0 1px 3px rgba(27, 22, 38, .12); }

.scl-mobile__theme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 16px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2) !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--scl-text);
}

.scl-mobile__foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px 24px;
    border-top: 1px solid var(--scl-border);
    background: var(--scl-surface);
}

.scl-mobile__note { text-align: center; color: var(--scl-text-2); }

@media (min-width: 1200px) {
    .scl-mobile { display: none; }
}

/* Sticky CTA bar (mobile) */
.scl-stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: none;
    gap: 8px;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    background: var(--scl-glass);
    border-top: 1px solid var(--scl-border);
    box-shadow: 0 -10px 30px -12px rgba(27, 22, 38, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    transform: translateY(110%);
    transition: transform 250ms var(--scl-ease);
}

.scl-stickybar .scl-btn { flex: 1; min-width: 0; padding: 0 12px; }
.scl-stickybar .scl-stickybar__main { flex: 1.35; }
.scl-stickybar.is-visible { transform: none; }

@media (max-width: 767px) {
    .scl-stickybar { display: flex; }
}

.scl-header-spacer { height: 96px; }

/* ---- 31-footer.css ---- */
/* ==========================================================================
   Footer
   ========================================================================== */
.scl-footer {
    background: var(--scl-surface-2);
    border-top: 1px solid var(--scl-border);
    color: var(--scl-text);
}

.scl-footer__inner {
    max-width: var(--scl-max);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) var(--scl-gutter) 96px;
}

@media (min-width: 768px) {
    .scl-footer__inner { padding-bottom: 40px; }
}

.scl-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.scl-footer__brand {
    flex: 1 1 240px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scl-footer__logo { height: 30px; width: auto; align-self: flex-start; }
.scl-footer__desc { font-size: 15px; line-height: 1.6; color: var(--scl-text-2); }

.scl-footer__contact {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    font-size: 15px;
    color: var(--scl-text) !important;
    text-decoration: none;
}

.scl-footer__contact .scl-ico { color: var(--scl-brand); }

.scl-footer__cols {
    flex: 3 1 560px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 32px 24px;
}

.scl-footer__col { display: flex; flex-direction: column; gap: 4px; }

.scl-footer__title {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl-footer__link {
    display: flex;
    align-items: center;
    min-height: 36px;
    font-size: 15px;
    color: var(--scl-text-body) !important;
    text-decoration: none;
    transition: color 150ms;
}

.scl-footer__link:hover { color: var(--scl-brand) !important; }

.scl-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--scl-border);
    font-size: 14px;
    color: var(--scl-text-3);
}

.scl-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.scl-footer__legal > a { color: var(--scl-text-2) !important; text-decoration: none; }
.scl-footer__legal > a:hover { color: var(--scl-text) !important; }

.scl-footer__theme {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--scl-border) !important;
    color: var(--scl-text);
}

.scl-footer__langs {
    display: flex;
    padding: 3px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border);
}

.scl-footer__langs a {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 36px;
    border-radius: var(--scl-r-pill);
    font-size: 13px;
    font-weight: 700;
    color: var(--scl-text) !important;
    text-decoration: none;
}

.scl-footer__langs a.is-active { background: var(--scl-brand-soft); }

/* ---- 40-cta_banner.css ---- */
/* cta_banner — closing block with aurora blobs */
.scl-cta-banner {
    padding: 0 clamp(12px, 2.5vw, 32px) clamp(12px, 2.5vw, 32px);
}

.scl-cta-banner__panel {
    max-width: var(--scl-max-wide);
    margin: 0 auto;
    padding: clamp(56px, 8vw, 112px) var(--scl-gutter);
}

.scl-cta-banner__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.scl .scl-cta-banner__title {
    font-size: clamp(34px, 5.6vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.scl-cta-banner__text { max-width: 560px; font-size: 18px; color: var(--scl-text-nav); }
.scl-cta-banner .scl-note { color: var(--scl-text-nav); }

.scl-cta-banner--compact { padding-top: clamp(24px, 4vw, 48px); }
.scl-cta-banner--compact .scl-cta-banner__panel { padding: clamp(48px, 6vw, 80px) var(--scl-gutter); }
.scl-cta-banner--compact .scl-cta-banner__inner { max-width: 1040px; gap: 20px; }
.scl-cta-banner--compact .scl-cta-banner__title { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; }

/* ---- 45-mock.css ---- */
/* Coded product mock-up (_shared/mock) — port of the design's ModuleMock: a small app window */
.scl-mock {
    width: 100%;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 30px 70px -36px rgba(70, 30, 130, .4);
    overflow: hidden;
    color: var(--scl-text);
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
}

.scl-mock .scl-ico { font-weight: 300; }

.scl-mock__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl-mock__bar img { flex: none; display: block; width: 20px; height: 20px; }

.scl-mock__title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scl-mock__action {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--scl-brand);
    color: var(--scl-on-brand);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.scl-mock__body {
    padding: 14px;
    background: var(--scl-bg);
}

.scl-mock__card {
    border-radius: 14px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-mock__num,
.scl-mock b { font-variant-numeric: tabular-nums; }

/* tones */
.scl-mock__tone--ok { background: var(--scl-success-bg); color: var(--scl-success); }
.scl-mock__tone--warn { background: var(--scl-warning-bg); color: var(--scl-warning); }
.scl-mock__tone--bad { background: var(--scl-danger-bg); color: var(--scl-danger); }
.scl-mock__tone--brand { background: var(--scl-brand-soft); color: var(--scl-brand-ink); }
.scl-mock__tone--info { background: var(--scl-info-bg); color: var(--scl-info); }
.scl-mock__tone--neutral { background: var(--scl-surface-2); color: var(--scl-text-body); }

/* chips / filters */
.scl-mock__chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 10px;
    scrollbar-width: none;
}

.scl-mock__chip,
.scl-mock__assistant {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    color: var(--scl-text);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.scl-mock__chip.is-on { background: var(--scl-dark); border-color: var(--scl-dark); color: var(--scl-on-dark); }
.scl-mock__assistant .scl-ico { font-size: 15px; }
.scl-mock__assistant.is-on { background: var(--scl-brand-soft); border-color: var(--scl-brand-tint-border); color: var(--scl-brand-ink); }

/* list */
.scl-mock__rows { overflow: hidden; }

.scl-mock__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl-mock__row:last-child { border-bottom: 0; }
.scl-mock__row.is-hi { background: var(--scl-brand-tint); }

.scl-mock__row-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand);
    font-size: 19px;
}

/* Brand logo instead of an icon (e.g. the data sources list): logos keep their own colours on a white tile */
.scl-mock__row-logo {
    background: #FFFFFF;
    border: 1px solid var(--scl-border);
    box-sizing: border-box;
}

.scl-mock__row-logo img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; }

.scl-mock__ava {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.scl-mock__ava--pink { background: var(--scl-pink-bg); color: var(--scl-pink-ink); }
.scl-mock__ava--ok { background: var(--scl-success-bg); color: var(--scl-success); }
.scl-mock__ava--info { background: var(--scl-info-bg); color: var(--scl-info); }
.scl-mock__ava--warn { background: var(--scl-warning-bg); color: var(--scl-warning); }
.scl-mock__ava--brand { background: var(--scl-brand-soft); color: var(--scl-brand-ink); }

.scl-mock__row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scl-mock__row-text b,
.scl-mock__row-text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scl-mock__row-text b { font-size: 13px; font-weight: 600; }
.scl-mock__row-text span { font-size: 12px; color: var(--scl-text-2); }
.scl-mock__num { flex: none; font-size: 13px; }

.scl-mock__badge {
    flex: none;
    padding: 2px 8px;
    border-radius: var(--scl-r-pill);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* kanban */
.scl-mock__kanban {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.scl-mock__col {
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    background: var(--scl-surface-2);
}

.scl-mock__col-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 700;
}

.scl-mock__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.scl-mock__col-sum { margin-left: auto; color: var(--scl-text-3); font-variant-numeric: tabular-nums; }

.scl-mock__deal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px;
    border-radius: 11px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-mock__deal > b { font-size: 12px; font-weight: 600; }

.scl-mock__deal > span {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    color: var(--scl-text-2);
}

.scl-mock__deal > span b { color: var(--scl-text); }

/* kpis */
.scl-mock__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.scl-mock__tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border-radius: 12px;
}

.scl-mock__tile > span { font-size: 11px; color: var(--scl-text-2); }
.scl-mock__tile > b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

.scl-mock__tile > em {
    align-self: flex-start;
    padding: 1px 7px;
    border-radius: var(--scl-r-pill);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.scl-mock__chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
}

.scl-mock__chart-title { font-size: 12px; font-weight: 700; }

.scl-mock__bars {
    height: 110px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    background: repeating-linear-gradient(0deg, var(--scl-border-subtle) 0 1px, transparent 1px 27px);
}

.scl-mock__bars span { flex: 1; border-radius: 4px 4px 0 0; background: var(--scl-brand-tint-border); }
.scl-mock__bars span.is-now { background: var(--scl-brand); }

/* score */
.scl-mock__score-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.scl-mock__score {
    flex: 1 1 150px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
}

.scl-mock__ring {
    flex: none;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: conic-gradient(var(--scl-brand) 0 var(--scl-mock-score), var(--scl-border) var(--scl-mock-score) 100%);
}

.scl-mock__ring span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--scl-surface);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.scl-mock__score-text { display: flex; flex-direction: column; gap: 2px; }
.scl-mock__score-text b { font-size: 14px; }
.scl-mock__score-text span { font-size: 12px; color: var(--scl-text-2); }

.scl-mock__engines {
    flex: 1 1 170px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.scl-mock__engine { display: flex; flex-direction: column; gap: 4px; }
.scl-mock__engine > span:first-child { display: flex; justify-content: space-between; font-size: 12px; }
.scl-mock__meter { height: 6px; border-radius: 3px; background: var(--scl-border-subtle); overflow: hidden; }
.scl-mock__meter span { display: block; height: 100%; border-radius: 3px; background: var(--scl-grad-bar); }

.scl-mock__items { overflow: hidden; }

.scl-mock__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl-mock__item:last-child { border-bottom: 0; }
.scl-mock__item .scl-ico { font-size: 20px; font-weight: 400; }
.scl-mock__item > span:nth-child(2) { flex: 1; font-size: 13px; }
.scl-mock__item em { font-size: 11px; font-style: normal; font-weight: 700; }
.scl-mock__item--ok .scl-ico,
.scl-mock__item--ok em { color: var(--scl-success); }
.scl-mock__item--muted .scl-ico,
.scl-mock__item--muted em { color: var(--scl-text-3); }
.scl-mock__item--bad .scl-ico,
.scl-mock__item--bad em { color: var(--scl-danger); }

/* editor */
.scl-mock__editor { display: flex; flex-wrap: wrap; gap: 10px; }

.scl-mock__pages {
    flex: 0 1 150px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 12px;
}

.scl-mock__pages-head { padding: 4px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--scl-text-3); }

.scl-mock__page {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 6px;
    border-radius: 7px;
    color: var(--scl-text-body);
    font-size: 12px;
    font-weight: 600;
}

.scl-mock__page .scl-ico { font-size: 15px; }
.scl-mock__page.is-on { background: var(--scl-brand-soft); color: var(--scl-brand-ink); }

.scl-mock__canvas {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
}

.scl-mock__line { height: 12px; width: 40%; border-radius: 6px; background: var(--scl-border); }

.scl-mock__hero-block {
    position: relative;
    display: grid;
    place-items: center;
    height: 96px;
    border-radius: 10px;
    background: repeating-linear-gradient(135deg, var(--scl-ph-a) 0 7px, var(--scl-ph-b) 7px 14px);
    outline: 2px solid var(--scl-brand);
    outline-offset: 2px;
    color: var(--scl-text-3);
    font: 500 11px var(--scl-mono);
}

.scl-mock__hero-block span {
    position: absolute;
    top: -12px;
    left: 8px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--scl-brand);
    color: var(--scl-on-brand);
    font: 700 10px var(--scl-font);
}

.scl-mock__blocks { display: flex; gap: 6px; }
.scl-mock__blocks span { flex: 1; height: 44px; border-radius: 8px; background: var(--scl-surface-2); }
.scl-mock__btn { align-self: flex-start; width: 110px; height: 28px; border-radius: var(--scl-r-pill); background: var(--scl-cta); }

/* status */
.scl-mock__banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.scl-mock__banner .scl-ico { font-size: 18px; font-weight: 400; }
.scl-mock__services { overflow: hidden; }

.scl-mock__service {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl-mock__service:last-child { border-bottom: 0; }
.scl-mock__service-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }

.scl-mock__service-head b {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scl-mock__service-head > span:last-child { font-size: 12px; color: var(--scl-text-2); font-variant-numeric: tabular-nums; }
.scl-mock__sdot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.scl-mock__uptime { display: flex; gap: 2px; height: 18px; }
.scl-mock__uptime span { flex: 1; border-radius: 2px; }
.scl-mock__bar--ok { background: #3CB371; }
.scl-mock__bar--warn { background: #E0A030; }
.scl-mock__bar--bad { background: #D9534F; }
.scl-mock__bar--none { background: var(--scl-border); }

/* chat */
.scl-mock__msgs { display: flex; flex-direction: column; gap: 8px; }

.scl-mock__msg {
    padding: 9px 12px;
    border-radius: 14px 14px 14px 4px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    font-size: 13px;
    line-height: 1.45;
}

.scl-mock__msg--me {
    align-self: flex-end;
    max-width: 85%;
    border: 0;
    border-radius: 14px 14px 4px 14px;
    background: var(--scl-brand);
    color: var(--scl-on-brand);
}

.scl-mock__msg-ai { display: flex; align-items: flex-end; gap: 6px; max-width: 92%; }
.scl-mock__msg-ai > div { display: flex; flex-direction: column; gap: 4px; }

.scl-mock__msg-ava {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-mock__msg-ava img { display: block; width: 12px; height: 12px; }
.scl-mock__src { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--scl-text-3); }
.scl-mock__src .scl-ico { font-size: 13px; }

.scl-mock__input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 6px 6px 12px;
    border-radius: 12px;
}

.scl-mock__input > span:first-child { flex: 1; color: var(--scl-text-3); }
.scl-mock__input em { font-size: 11px; font-style: normal; color: var(--scl-text-3); white-space: nowrap; }

.scl-mock__input .scl-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--scl-brand);
    color: var(--scl-on-brand);
    font-size: 18px;
    font-weight: 500;
}

/* timeline */
.scl-mock__events { padding: 14px 14px 4px; }
.scl-mock__event { display: flex; gap: 10px; }
.scl-mock__event-rail { display: flex; flex-direction: column; align-items: center; }

.scl-mock__event-rail .scl-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 17px;
}

.scl-mock__event-rail > span:last-child { flex: 1; width: 1.5px; min-height: 10px; background: var(--scl-border); }

.scl-mock__event-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
}

.scl-mock__event-body > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
.scl-mock__event-body b { font-size: 13px; font-weight: 600; }
.scl-mock__event-body small { font-size: 11px; color: var(--scl-text-3); white-space: nowrap; }
.scl-mock__event-body > span:last-child { font-size: 12px; line-height: 1.45; color: var(--scl-text-2); }

/* ---- 46-scene.css ---- */
/* Animated product scene (_shared/scene + assets/js/scenes.js) — port of the design's ProductScene stage.
   The scene markup keeps the design's inline styles; this file only frames the stage. */
.scl-scene {
    overflow-x: auto;
    border-radius: 28px;
    color: #1B1626;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
}

.scl-scene__stage {
    position: relative;
    border-radius: 28px;
    background: linear-gradient(160deg, #F7F2FD 0%, #F4F1F6 55%, #EEF4FD 100%);
    overflow: hidden;
}

.scl-scene__aurora {
    position: absolute;
    inset: -30% -10% auto;
    height: 70%;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 25% 50%, rgba(255, 90, 208, .14), transparent),
        radial-gradient(closest-side at 55% 50%, rgba(150, 90, 255, .16), transparent),
        radial-gradient(closest-side at 85% 50%, rgba(58, 168, 255, .14), transparent);
    filter: blur(30px);
}

.scl-scene .scl-ico,
.scl-scene [style*="Material Symbols"] { font-feature-settings: "liga"; }

/* The scene is a light "app" panel by design; in dark mode it sits as a slightly dimmed light card */
html[data-theme="dark"] .scl-scene__stage { filter: brightness(.94); }

/* Animated hero window (_shared/anim + assets/js/anim.js) — port of the design's ModuleAnim */
.scl-anim {
    position: relative;
    color: #1B1626;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
}

.scl-anim [role="tablist"] { color: var(--scl-text); }
html[data-theme="dark"] .scl-anim > div[aria-hidden="true"]:nth-child(2) { filter: brightness(.94); }

/* AI Agents app panels in feature tabs (_shared/agents-panel) — port of the design's Module AI Agents tab panels */
.scl-agents-panel {
    color: #1B1626;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
}

html[data-theme="dark"] .scl-agents-panel > * { filter: brightness(.94); }

/* ---- 50-scl_ai_chat_demo.css ---- */
/* ai_chat_demo — intro + stats on the left, scripted chat widget on the right */
.scl-ai-chat {
    overflow: hidden;
    isolation: isolate;
    padding-top: clamp(56px, 8vw, 112px);
    padding-bottom: clamp(56px, 8vw, 112px);
}

.scl-ai-chat--tint { background: var(--scl-brand-tint); }

.scl-ai-chat__glow {
    position: absolute;
    left: -200px;
    bottom: -300px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: conic-gradient(from 90deg, #ff5ad0, #cf5aff, #7b7bff, #3aa8ff, #22ccff, #ff5ad0);
    filter: blur(110px);
    opacity: .18;
    pointer-events: none;
    z-index: -1;
}

html[data-theme="dark"] .scl-ai-chat__glow { opacity: .2; }

.scl-ai-chat__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
}

.scl-ai-chat__intro {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scl .scl-ai-chat__title {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-ai-chat__lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

.scl-ai-chat__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.scl-ai-chat__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border-radius: 18px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-ai-chat__stat-value {
    font-size: clamp(30px, 3vw, 38px);
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--scl-text);
}

.scl-ai-chat__stat-label {
    font-size: 14px;
    line-height: 1.3;
    color: var(--scl-text-2);
}

.scl-ai-chat__actions {
    gap: 10px;
    margin-top: 8px;
}

.scl-ai-chat__actions .scl-btn { height: 52px; padding: 0 24px; }
.scl-ai-chat__actions .scl-btn--secondary { padding: 0 22px; }

.scl-ai-chat__note {
    margin-top: -8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--scl-text-2);
}

/* Chat widget */
.scl-ai-chat__card {
    flex: 1 1 400px;
    min-width: 0;
    max-width: 540px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 0 0 1px var(--scl-brand-tint), 0 40px 80px -40px rgba(169, 139, 255, .45);
}

.scl-ai-chat__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--scl-border);
}

.scl-ai-chat__head-av,
.scl-ai-chat__av {
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
}

.scl-ai-chat__head-av {
    width: 38px;
    height: 38px;
    background: var(--scl-brand-soft);
}

.scl-ai-chat__head-av img { width: 18px; height: 18px; }

.scl-ai-chat__who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.scl-ai-chat__who b { font-size: 15px; font-weight: 700; color: var(--scl-text); }

.scl-ai-chat__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--scl-success);
}

.scl-ai-chat__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.scl-ai-chat__reset {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--scl-text-2);
    transition: background 150ms, color 150ms;
}

.scl-ai-chat__reset:hover { background: var(--scl-surface-2); color: var(--scl-text); }
.scl-ai-chat__reset .scl-ico { font-size: 22px; }

.scl-ai-chat__log {
    height: calc(clamp(300px, 34vw, 360px) + 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.scl-ai-chat__log:focus-visible { outline-offset: -2px; border-radius: 0; }

.scl-ai-chat__msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 90%;
}

.scl-ai-chat__msg.is-user {
    align-self: flex-end;
    max-width: 82%;
}

.scl-ai-chat__av {
    width: 28px;
    height: 28px;
    background: var(--scl-surface-2);
}

.scl-ai-chat__av img { width: 14px; height: 14px; }
.scl-ai-chat__head-av.is-photo img,
.scl-ai-chat__av.is-photo img { width: 100%; height: 100%; object-fit: cover; }

.scl-ai-chat__bubble {
    min-width: 0;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    background: var(--scl-surface-2);
    border: 1px solid var(--scl-border);
    font-size: 15px;
    line-height: 1.5;
    color: var(--scl-text);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.scl-ai-chat__msg.is-user .scl-ai-chat__bubble {
    border: 0;
    border-radius: 16px 16px 4px 16px;
    background: var(--scl-brand);
    color: var(--scl-on-brand);
    font-weight: 500;
}

.scl-ai-chat__msg.is-typing { align-items: center; }

.scl-ai-chat__dots {
    display: flex;
    gap: 4px;
    padding: 13px 14px;
}

.scl-ai-chat__dots > span:not(.scl-sr-only) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--scl-brand);
    animation: scl-ai-chat-dot 1s var(--scl-ease) infinite;
}

.scl-ai-chat__dots > span:nth-child(2) { opacity: .7; animation-delay: .15s; }
.scl-ai-chat__dots > span:nth-child(3) { opacity: .4; animation-delay: .3s; }

@keyframes scl-ai-chat-dot {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-3px); }
}

.scl-ai-chat__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 16px 12px;
    scrollbar-width: none;
}

.scl-ai-chat__chips::-webkit-scrollbar { display: none; }

.scl-ai-chat__chip {
    flex: none;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2);
    background: transparent;
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 150ms, border-color 150ms;
}

.scl-ai-chat__chip:hover { background: var(--scl-surface-2); border-color: var(--scl-brand); }
.scl-ai-chat__chip:focus-visible { outline-offset: -2px; border-radius: var(--scl-r-pill); }

.scl-ai-chat__form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 16px;
    border-top: 1px solid var(--scl-border);
    transition: border-color 150ms;
}

.scl-ai-chat__form:focus-within { border-top-color: var(--scl-brand-light); }

.scl .scl-ai-chat__input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    color: var(--scl-text);
    outline: none;
}

.scl .scl-ai-chat__input:focus,
.scl .scl-ai-chat__input:focus-visible { outline: none; box-shadow: none; }
.scl-ai-chat__input::placeholder { color: var(--scl-text-3); opacity: 1; }

.scl-ai-chat__send {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--scl-brand);
    color: var(--scl-on-brand);
    transition: background 150ms;
}

.scl-ai-chat__send:hover { background: var(--scl-brand-h); }
.scl-ai-chat__send .scl-ico { font-size: 22px; font-weight: 500; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; }
.scl-ai-chat__send:focus-visible { outline-offset: 2px; border-radius: 12px; }

/* ---- 50-scl_article_content.css ---- */
/* article_content — blog article: header, cover, body + sticky TOC/share sidebar, related posts */
.scl-article {
    padding-top: clamp(112px, 12vw, 140px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

.scl-article__head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 800px;
}

.scl .scl-article__back { align-self: flex-start; }

.scl-article__pill {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
}

.scl .scl-article__title {
    font-size: clamp(32px, 4.6vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-article__byline {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: normal;
}

.scl .scl-article__avatar { width: 44px; height: 44px; }
.scl-article__avatar > img { width: 100%; height: 100%; object-fit: cover; }

.scl-article__byline-text {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.scl-article__byline-text > span { color: var(--scl-text-2); }

/* Cover */
.scl-article__cover {
    margin: 28px 0 clamp(32px, 4vw, 48px);
    height: clamp(220px, 34vw, 420px);
    border-radius: var(--scl-r-2xl);
    overflow: hidden;
    background: var(--scl-surface-2);
}

.scl-article__cover > img,
.scl-article__cover > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scl-article__cover > .scl-ph {
    font-size: 13px;
    background: repeating-linear-gradient(135deg, var(--scl-brand-soft) 0 8px, var(--scl-brand-tint) 8px 16px);
}

/* Two columns */
.scl-article__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(28px, 5vw, 64px);
}

.scl-article__main {
    flex: 2 1 520px;
    min-width: 0;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.scl-article__intro {
    font-size: 20px;
    line-height: 1.6;
    color: var(--scl-text);
    text-wrap: pretty;
}

.scl-article__prose {
    font-size: 17px;
    line-height: 1.75;
}

.scl-article__prose :where(h2) {
    margin-top: 28px;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    scroll-margin-top: 110px;
}

.scl-article__prose :where(h2) + * { margin-top: 10px; }
.scl-article__prose > :first-child { margin-top: 0; }

/* Inline CTA box */
.scl-article__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--scl-r-xl);
    background: var(--scl-brand-tint);
    border: 1px solid var(--scl-brand-tint-border);
    line-height: normal;
}

.scl-article__cta-text {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scl-article__cta-text > b { font-size: 18px; }
.scl-article__cta-text > span { font-size: 15px; color: var(--scl-text-nav); }
.scl .scl-article__cta-btn { height: 50px; padding: 0 22px; }

/* Sidebar */
.scl-article__aside {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 1000px) {
    .scl-article__aside { position: sticky; top: 110px; }
}

.scl-article__card {
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    line-height: normal;
}

.scl-article__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl-article__toc { gap: 2px; }
.scl-article__toc .scl-article__label { margin-bottom: 6px; }

.scl .scl-article__toc-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--scl-text-body);
    text-decoration: none;
}

.scl .scl-article__toc-link:hover { color: var(--scl-brand); }

.scl-article__share { gap: 10px; }

.scl .scl-article__copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border-radius: var(--scl-r-md);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 600;
    transition: background 150ms, border-color 150ms, color 150ms;
}

.scl .scl-article__copy:hover { background: var(--scl-surface-3); }
.scl-article__copy .scl-ico { font-size: 20px; }
.scl .scl-article__copy.is-copied { border-color: var(--scl-success); color: var(--scl-success); background: var(--scl-success-bg); }

/* Related */
.scl-article__related {
    margin-top: clamp(48px, 6vw, 72px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scl .scl-article__related-title {
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.scl-article__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

.scl .scl-article__rel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    color: var(--scl-text);
    text-decoration: none;
    line-height: normal;
    transition: transform 200ms var(--scl-ease), box-shadow 200ms, border-color 150ms;
}

.scl a.scl-article__rel:hover {
    transform: translateY(-2px);
    border-color: var(--scl-brand-light);
    color: var(--scl-text);
}

.scl-article__rel-cat {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl-article__rel-title { font-size: 17px; line-height: 1.35; }
.scl-article__rel-meta { font-size: 13px; color: var(--scl-text-3); }

/* ---- 50-scl_blog_overview.css ---- */
/* blog_overview — optional page hero (tabs, title, intro), featured post, category chips and post grid */
.scl-blog { padding-top: 16px; }
.scl-blog--hero { padding-top: clamp(116px, 12vw, 150px); }

.scl-blog__aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.scl-blog__aurora::before {
    content: "";
    position: absolute;
    top: -340px;
    left: 50%;
    width: 900px;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--scl-conic);
    filter: blur(110px);
    opacity: var(--scl-aurora-opacity);
}

/* Hero */
.scl-blog__hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
}

.scl-blog__tabs {
    display: inline-flex;
    max-width: 100%;
    padding: 4px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl .scl-blog__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--scl-r-pill);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--scl-text-body);
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms, color 150ms;
}

.scl .scl-blog__tab:hover { background: var(--scl-surface-2); color: var(--scl-text); }
.scl .scl-blog__tab.is-active { background: var(--scl-dark); color: var(--scl-on-dark); }
.scl-blog__tab .scl-ico { font-size: 20px; }

.scl .scl-blog__title { max-width: 820px; }

.scl-blog__intro {
    max-width: 640px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--scl-text-2);
}

/* Body */
.scl-blog__body,
.scl-blog__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Featured */
.scl .scl-blog__feat {
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--scl-r-2xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
    color: var(--scl-text);
    text-decoration: none;
    line-height: normal;
    transition: box-shadow 200ms;
}

.scl a.scl-blog__feat:hover { box-shadow: var(--scl-shadow-hover); color: var(--scl-text); }

.scl-blog__feat-media {
    position: relative;
    flex: 1 1 380px;
    min-height: 260px;
    background: var(--scl-surface-2);
}

.scl-blog__feat-media > img,
.scl-blog__feat-media > video,
.scl-blog__feat-media > .scl-ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scl-blog__feat-media > .scl-ph {
    background: repeating-linear-gradient(135deg, var(--scl-brand-soft) 0 8px, var(--scl-brand-tint) 8px 16px);
}

.scl-blog__feat-body {
    flex: 1 1 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: clamp(22px, 3vw, 36px);
}

.scl-blog__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.scl-blog__pill {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
}

.scl-blog__pill--cta { background: var(--scl-cta); color: var(--scl-on-cta); }

.scl .scl-blog__feat-title {
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-blog__feat-excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: var(--scl-text-2);
}

.scl-blog__meta { font-size: 14px; color: var(--scl-text-3); }

/* Category chips */
.scl-blog__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    margin: -2px;
    scrollbar-width: none;
}

.scl-blog__chips::-webkit-scrollbar { display: none; }

.scl .scl-blog__chip {
    flex: none;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
}

/* Grid */
.scl-blog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.scl .scl-blog__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
    color: var(--scl-text);
    text-decoration: none;
    line-height: normal;
    transition: transform 200ms var(--scl-ease), box-shadow 200ms;
}

.scl a.scl-blog__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--scl-shadow-hover);
    color: var(--scl-text);
}

.scl-blog__card-media {
    flex: none;
    height: 170px;
    overflow: hidden;
    background: var(--scl-surface-2);
}

.scl-blog__card-media > img,
.scl-blog__card-media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--scl-ease);
}

.scl a.scl-blog__card:hover .scl-blog__card-media > img { transform: scale(1.03); }
.scl-blog__card-media > .scl-ph { min-height: 0; }

.scl-blog__card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.scl .scl-blog__card-title {
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -0.015em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-blog__card-excerpt {
    font-size: 15px;
    line-height: 1.55;
    color: var(--scl-text-2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.scl-blog__card-meta {
    margin-top: auto;
    padding-top: 10px;
    font-size: 13px;
    color: var(--scl-text-3);
}

/* Empty states */
.scl-blog__none {
    padding: 32px 20px;
    border-radius: var(--scl-r-xl);
    border: 1px dashed var(--scl-border-2);
    text-align: center;
    font-size: 15px;
    color: var(--scl-text-2);
}

.scl-blog__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    text-align: center;
    line-height: normal;
}

.scl-blog__empty .scl-ico { font-size: 32px; color: var(--scl-brand); }
.scl-blog__empty b { font-size: 17px; }

@media (max-width: 767px) {
    .scl .scl-blog__chip { min-height: 44px; }
    .scl .scl-blog__tab { height: 44px; }
}

/* ---- 50-scl_case_grid.css ---- */
/* case_grid — filterable case cards (full) and the compact "more cases" row */
.scl-cgrid { padding-top: clamp(8px, 1.5vw, 16px); }
.scl-cgrid--headed { padding-top: var(--scl-section-y); }

.scl-cgrid__heading { margin-bottom: 32px; }

/* Filters */
.scl-cgrid__filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.scl-cgrid__row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    margin: -2px -2px -2px;
    scrollbar-width: none;
}

.scl-cgrid__row::-webkit-scrollbar { display: none; }

.scl-cgrid__row-label {
    flex: none;
    min-width: 64px;
    font-size: 13px;
    font-weight: 700;
    color: var(--scl-text-2);
}

.scl .scl-cgrid__chip {
    flex: none;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
}

.scl-cgrid__count {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: normal;
    color: var(--scl-text-2);
}

/* Full cards */
.scl-cgrid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.scl .scl-cgrid__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
    color: var(--scl-text);
    text-decoration: none;
    line-height: normal;
    transition: transform 200ms var(--scl-ease), box-shadow 200ms;
}

.scl a.scl-cgrid__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--scl-shadow-hover);
    color: var(--scl-text);
}

.scl-cgrid__media {
    flex: none;
    height: 180px;
    overflow: hidden;
    background: var(--scl-surface-2);
}

.scl-cgrid__media > img,
.scl-cgrid__media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scl-cgrid__media > .scl-ph { min-height: 0; }

.scl-cgrid__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.scl-cgrid__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.scl-cgrid__tag {
    padding: 3px 10px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface-2);
    color: var(--scl-text-body);
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
}

.scl-cgrid__tag--goal {
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
}

.scl-cgrid__stat {
    align-self: flex-start;
    font-size: clamp(34px, 3.6vw, 42px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
}

.scl-cgrid__label {
    font-size: 15px;
    font-weight: 600;
}

.scl-cgrid__text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

.scl-cgrid__foot {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--scl-border-subtle);
    font-size: 14px;
}

.scl-cgrid__company { font-weight: 700; }

.scl-cgrid__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    font-weight: 700;
    color: var(--scl-brand);
    white-space: nowrap;
}

.scl-cgrid__more .scl-ico {
    font-size: 18px;
    font-weight: 400;
    transition: transform 150ms;
}

.scl a.scl-cgrid__card:hover .scl-cgrid__more .scl-ico { transform: translateX(3px); }

/* Empty state */
.scl-cgrid__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    text-align: center;
    line-height: normal;
}

.scl-cgrid__empty .scl-ico { font-size: 32px; color: var(--scl-brand); }
.scl-cgrid__empty b { font-size: 18px; }

.scl .scl-cgrid__clear {
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 600;
    transition: background 150ms;
}

.scl .scl-cgrid__clear:hover { background: var(--scl-surface-3); }

/* Compact ("Meer cases") */
.scl-cgrid__mhead {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.scl .scl-cgrid__mtitle {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.scl-cgrid__mgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

.scl .scl-cgrid__mcard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    color: var(--scl-text);
    text-decoration: none;
    line-height: normal;
    transition: transform 200ms var(--scl-ease), box-shadow 200ms;
}

.scl a.scl-cgrid__mcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--scl-shadow-lg);
    color: var(--scl-text);
}

.scl-cgrid__msector {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl-cgrid__mstat {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.scl-cgrid__mlabel { font-size: 15px; color: var(--scl-text-2); }
.scl-cgrid__mcompany { margin-top: 4px; font-size: 15px; font-weight: 700; }

@media (max-width: 767px) {
    .scl .scl-cgrid__chip { min-height: 44px; }
}

/* ---- 50-scl_case_study.css ---- */
/* case_study — story sections + quote with a sticky sidebar (modules, go-live, CTA) */
.scl-cstudy {
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(40px, 6vw, 72px);
}

.scl-cstudy__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(28px, 5vw, 64px);
}

.scl-cstudy__main {
    flex: 2 1 520px;
    min-width: 0;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.scl-cstudy__block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scl .scl-cstudy__title {
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-cstudy__text {
    font-size: 17px;
    line-height: 1.7;
}

/* Quote */
.scl-cstudy__quote {
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--scl-r-xl);
    background: var(--scl-brand-tint);
    border: 1px solid var(--scl-brand-tint-border);
}

.scl-cstudy__quote-text {
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--scl-text);
    text-wrap: pretty;
}

.scl-cstudy__person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 15px;
    line-height: normal;
}

.scl .scl-cstudy__avatar {
    width: 44px;
    height: 44px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-brand-tint-border);
}

.scl-cstudy__avatar > img { width: 100%; height: 100%; object-fit: cover; }

.scl-cstudy__person-text {
    display: flex;
    flex-direction: column;
}

.scl-cstudy__person-text > span { font-size: 14px; color: var(--scl-text-2); }

/* Sidebar */
.scl-cstudy__aside {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 1000px) {
    .scl-cstudy__aside { position: sticky; top: var(--scl-header-offset); }
}

.scl-cstudy__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    line-height: normal;
}

.scl-cstudy__card-title { font-size: 15px; }

.scl .scl-cstudy__module {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--scl-text);
    text-decoration: none;
}

.scl a.scl-cstudy__module:hover { color: var(--scl-brand); }

.scl-cstudy__module-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand);
}

.scl-cstudy__module-icon .scl-ico { font-size: 20px; }
.scl-cstudy__module-name { min-width: 0; }

.scl-cstudy__module-arrow {
    margin-left: auto;
    font-size: 18px;
    font-weight: 400;
    color: var(--scl-brand);
    transition: transform 150ms;
}

.scl a.scl-cstudy__module:hover .scl-cstudy__module-arrow { transform: translateX(3px); }

.scl-cstudy__live { gap: 10px; }

.scl-cstudy__live-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.scl-cstudy__live-text { font-size: 14px; color: var(--scl-text-2); }

.scl-cstudy__cta {
    gap: 10px;
    background: var(--scl-brand-tint);
    border-color: var(--scl-brand-tint-border);
}

.scl-cstudy__cta-title { font-size: 16px; }
.scl .scl-cstudy__btn--primary { height: 50px; }
.scl .scl-cstudy__btn:hover { transform: none; }

/* ---- 50-scl_case_tabs.css ---- */
/* case_tabs — tab cards + a big case card (stat, quote, author, modules, image) */
.scl-case-tabs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.scl-case-tabs__heading {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
}

.scl .scl-case-tabs__title {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}

.scl .scl-case-tabs__all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    font-size: 16px;
    font-weight: 700;
    color: var(--scl-brand);
}

.scl .scl-case-tabs__all:hover { color: var(--scl-brand-h); }
.scl-case-tabs__all .scl-ico,
.scl-case-tabs__more .scl-ico { font-weight: 400; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; transition: transform 150ms; }
.scl-case-tabs__all .scl-ico { font-size: 20px; }
.scl-case-tabs__all:hover .scl-ico,
.scl-case-tabs__more:hover .scl-ico { transform: translateX(3px); }

/* Tabs */
.scl-case-tabs__tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px;
    margin: -4px -4px 16px;
    scrollbar-width: none;
}

.scl-case-tabs__tabs::-webkit-scrollbar { display: none; }

.scl-case-tabs__tab {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 8px 18px;
    border-radius: 16px;
    border: 1px solid var(--scl-border);
    background: var(--scl-surface);
    color: var(--scl-text);
    text-align: left;
    line-height: 1.25;
    transition: background 200ms, border-color 200ms, color 200ms;
}

.scl-case-tabs__tab:hover { border-color: var(--scl-border-2); }

.scl-case-tabs__tab.is-active {
    background: var(--scl-dark);
    border-color: var(--scl-dark);
    color: var(--scl-on-dark);
}

.scl-case-tabs__tab:focus-visible { border-radius: 16px; outline-offset: 2px; }

.scl-case-tabs__tab-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .8;
}

.scl-case-tabs__tab-name { font-size: 16px; font-weight: 700; }

/* Card */
.scl-case-tabs__stage {
    transition: opacity 200ms, transform 200ms;
}

.scl-case-tabs__stage.is-fading {
    opacity: 0;
    transform: translateY(6px);
}

.scl-case-tabs__panel {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: 28px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-case-tabs__body {
    --scl-case-pad: clamp(24px, 3.5vw, 48px);
    flex: 1 1 calc(420px + 2 * var(--scl-case-pad));
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: var(--scl-case-pad);
}

@media (max-width: 560px) {
    .scl-case-tabs__body { flex-basis: 100%; }
}

.scl-case-tabs__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scl-case-tabs__stat-value {
    align-self: flex-start;
    font-size: clamp(56px, 7vw, 88px);
    line-height: .95;
    letter-spacing: -0.05em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.scl-case-tabs__stat-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--scl-text);
}

.scl-case-tabs__quote {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--scl-text);
    text-wrap: pretty;
}

.scl-case-tabs__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scl-case-tabs__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.scl-case-tabs__who b { font-size: 15px; font-weight: 700; color: var(--scl-text); }
.scl-case-tabs__who span { font-size: 14px; color: var(--scl-text-2); }

.scl-case-tabs__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--scl-border-subtle);
}

.scl-case-tabs__tag {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.scl .scl-case-tabs__more {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    font-size: 15px;
    font-weight: 700;
    color: var(--scl-brand);
}

.scl .scl-case-tabs__more:hover { color: var(--scl-brand-h); }
.scl-case-tabs__more .scl-ico { font-size: 18px; }

@media (max-width: 767px) {
    .scl .scl-case-tabs__more { min-height: 44px; }
}

.scl-case-tabs__media {
    position: relative;
    flex: 1 1 360px;
    min-width: 0;
    min-height: 280px;
    background: var(--scl-surface-2);
}

.scl-case-tabs__media > .scl-case-tabs__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scl-case-tabs__media > .scl-ph {
    padding: 24px;
    font-size: 13px;
    text-align: center;
}

/* ---- 50-scl_comparison_table.css ---- */
/* comparison_table — feature table with a highlighted column; cards below 768px */
.scl-compare {
    --scl-compare-hl: color-mix(in srgb, var(--scl-brand-tint) 50%, var(--scl-surface));
}

.scl-compare--attach-top,
.scl-compare--attach-both { padding-top: 0; }
.scl-compare--attach-bottom,
.scl-compare--attach-both { padding-bottom: 16px; }

.scl-compare__container--narrow { max-width: 1100px; }

.scl-compare__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

.scl-compare__head { gap: 10px; }

.scl .scl-compare__switch {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--scl-text);
}

.scl-compare__table {
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
    overflow: clip;
}

.scl-compare__row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl-compare__feat {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--scl-text);
}

.scl-compare__cell {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--scl-text);
}

.scl-compare__cell--b:not(.is-hl),
.scl-compare--hl-b .scl-compare__cell--a:not(.is-hl) { color: var(--scl-text-body); }
.scl-compare__cell.is-hl { background: var(--scl-compare-hl); }

.scl-compare__cell-label { display: none; }

.scl-compare__val {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.scl-compare__check {
    font-size: 22px;
    line-height: 1;
    color: var(--scl-success);
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.scl-compare__logo {
    height: 20px;
    width: auto;
    max-width: 100%;
}

/* Header row */
.scl-compare__row--head {
    position: sticky;
    top: calc(var(--scl-header-offset) - 20px);
    z-index: 2;
    background: var(--scl-surface);
    border-bottom-color: var(--scl-border);
}

.scl-compare__row--head .scl-compare__feat {
    padding: 18px 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--scl-text-2);
}

.scl-compare__row--head .scl-compare__cell {
    align-items: center;
    padding: 18px 20px;
}

.scl-compare__row--head .scl-compare__cell.is-hl {
    padding: 14px 20px;
    background: var(--scl-brand-tint);
}

.scl-compare__col-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--scl-text);
}

/* Section header rows */
.scl-compare__section {
    padding: 14px 20px 8px;
    background: var(--scl-bg);
    border-bottom: 1px solid var(--scl-border-subtle);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

/* Compact: centred values, bold highlighted column (pricing page) */
.scl-compare--compact .scl-compare__row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.scl-compare--compact .scl-compare__row--head { position: static; }
.scl-compare--compact .scl-compare__feat { padding: 14px 20px; font-weight: 500; line-height: 1.35; }
.scl-compare--compact .scl-compare__cell { justify-content: center; padding: 14px 12px; line-height: 1.35; text-align: center; }
.scl-compare--compact .scl-compare__cell:not(.is-hl) { color: var(--scl-text-2); }
.scl-compare--compact .scl-compare__cell.is-hl { font-weight: 600; color: var(--scl-text); }
.scl-compare--compact .scl-compare__val { justify-content: center; }
.scl-compare--compact .scl-compare__row--head .scl-compare__feat { padding: 16px 20px; font-size: 14px; font-weight: 700; }
.scl-compare--compact .scl-compare__row--head .scl-compare__cell { padding: 16px 12px; font-weight: 700; }
.scl-compare--compact .scl-compare__row--head .scl-compare__cell.is-hl { padding: 16px 12px; }
.scl-compare--compact .scl-compare__row--head .scl-compare__cell.is-hl .scl-compare__col-name { color: var(--scl-brand-ink); }

.scl-compare__footnote {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--scl-text-3);
}

.scl-compare__footnote :where(a) { color: var(--scl-brand); }

/* Mobile: one card per feature */
@media (max-width: 767px) {
    .scl-compare__table {
        display: flex;
        flex-direction: column;
        gap: 20px;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    .scl .scl-compare__row.scl-compare__row--head { display: none; }

    .scl-compare__group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .scl-compare__section {
        padding: 0 4px;
        background: transparent;
        border: 0;
    }

    .scl .scl-compare__row {
        display: block;
        border-radius: var(--scl-r-lg);
        background: var(--scl-surface);
        border: 1px solid var(--scl-border);
        overflow: hidden;
    }

    .scl .scl-compare__row .scl-compare__feat {
        display: block;
        padding: 14px 16px 10px;
        font-size: 16px;
        font-weight: 700;
    }

    .scl .scl-compare__row .scl-compare__cell {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6px;
        padding: 12px 16px;
        border-top: 1px solid var(--scl-border-subtle);
        text-align: left;
    }

    .scl-compare__cell-label { display: block; }
    .scl-compare__cell-label:empty { display: none; }
    .scl-compare__cell-label .scl-compare__logo { height: 16px; }
    .scl-compare__cell-label .scl-compare__col-name { font-size: 13px; color: var(--scl-text-2); }
    .scl-compare--compact .scl-compare__val { justify-content: flex-start; }
    .scl-compare__check { font-size: 20px; }
}

/* ---- 50-scl_contact_split.css ---- */
/* ==========================================================================
   contact_split — intro + contact rows left, form card right
   (plain: elevated card; aurora: whole block inside a tinted aurora panel)
   ========================================================================== */
.scl-contact--aurora {
    padding: 0 clamp(12px, 2.5vw, 32px) clamp(48px, 6vw, 80px);
}

.scl-contact[id] { scroll-margin-top: var(--scl-header-offset); }

.scl-contact--aurora .scl-contact__panel {
    padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px);
}

.scl-contact__blobs { opacity: .8; }

.scl-contact__grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(28px, 5vw, 64px);
}

.scl-contact__intro {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.scl .scl-contact__title {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.06;
    letter-spacing: -0.04em;
    font-weight: 700;
    text-wrap: balance;
}

.scl .scl-contact__text {
    font-size: 17px;
    line-height: 1.6;
    color: var(--scl-text-nav);
}

.scl .scl-contact__text a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.scl-contact__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.scl .scl-contact__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--scl-text);
    text-decoration: none;
}

.scl a.scl-contact__row:hover { color: var(--scl-brand); }

.scl .scl-contact__row--multi {
    align-items: flex-start;
    font-weight: 400;
}

.scl-contact__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand);
}

.scl-contact__icon .scl-ico { font-size: 22px; }

/* Form card */
.scl-contact__card {
    position: relative;
    flex: 1.3 1 440px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(20px, 3vw, 32px);
    border-radius: 28px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 30px 70px -45px rgba(70, 30, 130, .4);
}

html[data-theme="dark"] .scl-contact__card { box-shadow: 0 30px 70px -45px rgba(0, 0, 0, .8); }

.scl .scl-contact__note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--scl-text-3);
}

.scl .scl-contact__note a {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Aurora variant (Partners "Aanmelden") */
.scl-contact--aurora .scl-contact__grid { gap: clamp(24px, 4vw, 56px); }
.scl-contact--aurora .scl-contact__intro { flex: 1 1 340px; gap: 14px; }

.scl-contact--aurora .scl-contact__title {
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.scl-contact--aurora .scl-contact__list { margin-top: 0; gap: 6px; }

.scl-contact--aurora .scl-contact__row {
    min-height: 0;
    gap: 8px;
    font-size: 15px;
}

.scl-contact--aurora .scl-contact__icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
}

.scl-contact--aurora .scl-contact__icon .scl-ico { font-size: 20px; }

.scl-contact--aurora .scl-contact__card {
    flex: 1 1 420px;
    border-radius: 24px;
    box-shadow: none;
}

@media (max-width: 767px) {
    .scl-contact--aurora a.scl-contact__row { min-height: 44px; }
}

/* Form tuning (shared Sparkle Forms styling lives in 20-ui.css) */
.scl-contact--aurora [data-sf-themed] { --scl-form-input-h: 48px; }
.scl-contact--aurora [data-sf-themed] .sf-btn { height: 54px; min-height: 54px; }

/* ---- 50-scl_cost_calculator.css ---- */
/* cost_calculator — first-year cost: competitor vs Sparkle Suite */
.scl-costcalc__container--narrow { max-width: 1100px; }

.scl-costcalc__head {
    gap: 12px;
    max-width: 720px;
    margin-bottom: 28px;
}

.scl-costcalc__card {
    display: grid;
    border-radius: var(--scl-r-2xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
}

@media (min-width: 1000px) {
    .scl-costcalc__card { grid-template-columns: minmax(0, 530fr) minmax(0, 570fr); }
}

.scl-costcalc__inputs,
.scl-costcalc__result {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(22px, 3vw, 36px);
}

.scl-costcalc__inputs { border-bottom: 1px solid var(--scl-border-subtle); }

@media (min-width: 1000px) {
    .scl-costcalc__inputs { border-bottom: 0; border-right: 1px solid var(--scl-border-subtle); }
}

.scl-costcalc__result { background: var(--scl-bg); }

.scl-costcalc__users {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scl-costcalc__users-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--scl-text);
}

.scl-costcalc__users-val {
    font-size: 24px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.scl-costcalc__range { height: 28px; margin: 0; }

.scl .scl-costcalc__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--scl-text);
    text-align: left;
}

.scl-costcalc__fine {
    font-size: 13px;
    line-height: 1.5;
    color: var(--scl-text-3);
}

.scl-costcalc__total {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scl-costcalc__lead {
    font-size: 15px;
    line-height: 1.3;
    color: var(--scl-text-2);
}

.scl-costcalc__amount {
    align-self: flex-start;
    font-size: clamp(44px, 5.5vw, 64px);
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scl-costcalc__bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scl-costcalc__bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scl-costcalc__bar-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.scl-costcalc__bar-label > span {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scl-costcalc__track {
    height: 36px;
    border-radius: 10px;
    background: var(--scl-border-subtle);
    overflow: hidden;
}

.scl-costcalc__fill {
    height: 100%;
    border-radius: 10px;
    background: color-mix(in srgb, var(--scl-text-3) 80%, var(--scl-surface));
    transition: width 400ms var(--scl-ease);
}

.scl-costcalc__fill--suite { background: var(--scl-grad-bar); }

.scl-costcalc__actions {
    gap: 10px;
    margin-top: auto;
}

.scl .scl-costcalc__actions .scl-btn { height: 52px; padding: 0 24px; }
.scl .scl-costcalc__actions .scl-btn--secondary { padding: 0 22px; }

/* ---- 50-scl_data_table.css ---- */
/* data_table — intro on the left, bordered list of label / description / badge rows on the right */
.scl-dtable__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(28px, 5vw, 56px);
}

.scl-dtable__heading {
    flex: 1 1 380px;
    min-width: 0;
    gap: 14px;
}

.scl-dtable__intro {
    font-size: 17px;
    line-height: 1.6;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

.scl-dtable__list {
    flex: 1.4 1 480px;
    min-width: 0;
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
}

.scl-dtable__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl-dtable__row:last-child { border-bottom: 0; }

.scl-dtable__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--scl-text);
}

.scl-dtable__label .scl-ico { color: var(--scl-brand); }

.scl-dtable__desc {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 14px;
    line-height: 1.4;
    color: var(--scl-text-body);
}

.scl-dtable__row:has(.scl-dtable__label .scl-ico) .scl-dtable__desc { padding-left: 30px; }

.scl-dtable__badge { justify-self: end; height: 22px; }

/* Wider: label, description and badge in aligned columns, like the design */
@media (min-width: 560px) {
    .scl-dtable__list {
        display: grid;
        grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr) auto;
        column-gap: 16px;
    }

    .scl-dtable__row {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr) auto;
        grid-template-columns: subgrid;
    }

    .scl-dtable__label { grid-column: 1; }
    .scl-dtable__desc { grid-column: 2; grid-row: 1; }
    .scl-dtable__badge { grid-column: 3; }

    .scl-dtable__row:has(.scl-dtable__label .scl-ico) .scl-dtable__desc { padding-left: 0; }
}

/* ---- 50-scl_document_list.css ---- */
/* document_list — downloadable documents / links + dashed certification chips */
.scl-doclist__heading {
    gap: 12px;
    margin-bottom: 24px;
}

.scl-doclist__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

.scl .scl-doclist__doc {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 14px 18px;
    border-radius: var(--scl-r-lg);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    color: var(--scl-text);
    text-decoration: none;
    transition: border-color 150ms, transform 150ms;
}

.scl a.scl-doclist__doc:hover {
    color: var(--scl-text);
    border-color: var(--scl-brand-light);
    transform: translateY(-2px);
}

.scl-doclist__tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--scl-surface-2);
    color: var(--scl-text);
}

.scl-doclist__tile .scl-ico { font-size: 24px; }

.scl-doclist__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scl-doclist__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
    hyphens: auto;
}

.scl-doclist__meta {
    font-size: 13px;
    line-height: 1.3;
    color: var(--scl-text-2);
}

.scl-doclist__action {
    font-size: 22px;
    color: var(--scl-brand);
}

.scl-doclist__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.scl-doclist__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px dashed var(--scl-border-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--scl-text);
}

.scl-doclist__badge .scl-ico { color: var(--scl-brand); }

/* ---- 50-scl_faq.css ---- */
/* faq — accordion as separate cards (default) or one box with divider lines */
.scl-faq__heading {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.scl-faq--center .scl-faq__heading {
    align-items: center;
    text-align: center;
}

.scl .scl-faq__title {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-faq--has-eyebrow .scl-faq__heading { margin-bottom: 28px; }

.scl-faq--has-eyebrow .scl-faq__title {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
}

/* Homepage variant (with eyebrow): answers keep a ~680px measure */
.scl-faq--has-eyebrow.scl-faq--cards .scl-faq__answer { max-width: 720px; }

.scl-faq__q {
    font-size: inherit;
    line-height: inherit;
}

.scl .scl-faq__btn {
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--scl-text);
}

.scl-faq__btn:focus-visible { outline-offset: -2px; border-radius: 18px; }

.scl-faq__icon .scl-ico { font-size: 22px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

.scl-faq .scl-acc__panel { transition: grid-template-rows 250ms var(--scl-ease); }

/* Collapsed answers are hidden from keyboard and screen readers */
.scl-faq .scl-acc__panel > div {
    visibility: hidden;
    transition: visibility 0s linear 250ms;
}

.scl-faq .scl-acc.is-open .scl-acc__panel > div {
    visibility: visible;
    transition-delay: 0s;
}

.scl .scl-faq__answer {
    max-width: none;
    text-wrap: wrap;
    font-size: 16px;
    line-height: 1.65;
    color: var(--scl-text-2);
}

.scl-faq__answer > * + * { margin-top: .75em; }
.scl-faq__answer :where(strong, b) { color: var(--scl-text); }

/* Cards */
.scl-faq--cards .scl-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Boxed: one rounded box with hairline dividers */
.scl-faq--boxed .scl-faq__heading { margin-bottom: 20px; }

.scl-faq--boxed .scl-faq__title,
.scl-faq--boxed.scl-faq--has-eyebrow .scl-faq__title {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.2;
}

.scl-faq--boxed .scl-faq__list {
    overflow: hidden;
    border-radius: 24px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-faq--boxed .scl-faq__item,
.scl-faq--boxed .scl-faq__item.is-open {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.scl-faq--boxed .scl-faq__item + .scl-faq__item { border-top: 1px solid var(--scl-border-subtle); }

.scl-faq--boxed .scl-faq__btn {
    padding: 12px 20px;
    font-size: 16px;
}

.scl-faq--boxed .scl-faq__btn:focus-visible { border-radius: 0; }

.scl-faq--boxed .scl-faq__icon {
    width: 24px;
    height: 24px;
    background: transparent;
}

.scl-faq--boxed .scl-faq__icon .scl-ico {
    font-size: 24px;
    font-weight: 300;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.scl-faq--boxed .scl-faq__answer {
    max-width: none;
    text-wrap: wrap;
    font-size: 15px;
    color: var(--scl-text-nav);
}

/* ---- 50-scl_feature_cards.css ---- */
/* feature_cards — icon card grid (stacked / inline / compact), optional rating card, CTA row and footnote */
.scl-fc__heading { gap: 12px; margin-bottom: clamp(24px, 2.4vw, 28px); }
.scl-fc--title-lg .scl-fc__heading { gap: 14px; margin-bottom: clamp(28px, 4vw, 40px); }
.scl.scl-fc--title-lg .scl-fc__heading .scl-h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; }

/* Group variant (e.g. "Per doel" / "Per branche"): smaller title, tighter section spacing */
.scl-fc--group { padding-top: clamp(20px, 2.5vw, 32px); padding-bottom: clamp(20px, 2.5vw, 32px); }
.scl-fc--group .scl-fc__heading { margin-bottom: 16px; }
.scl.scl-fc--group .scl-fc__heading .scl-h3 { letter-spacing: -0.03em; }

.scl-fc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 560px) {
    .scl-fc--cols-2 .scl-fc__grid,
    .scl-fc--cols-3 .scl-fc__grid,
    .scl-fc--cols-4 .scl-fc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .scl-fc--cols-3.scl-fc--stacked .scl-fc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .scl-fc--cols-3 .scl-fc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .scl-fc--cols-4:not(.scl-fc--compact) .scl-fc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .scl-fc--cols-4.scl-fc--compact .scl-fc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Card */
.scl-fc__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 24px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    color: var(--scl-text);
}

.scl a.scl-fc__card {
    color: var(--scl-text);
    text-decoration: none;
    transition: transform 200ms var(--scl-ease), box-shadow 200ms var(--scl-ease), border-color 150ms;
}

.scl a.scl-fc__card:hover {
    color: var(--scl-text);
    transform: translateY(-3px);
    box-shadow: var(--scl-shadow-hover);
}

.scl a.scl-fc__card:hover .scl-fc__link .scl-ico { transform: translateX(3px); }

.scl .scl-fc__title {
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--scl-text);
}

.scl-fc__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--scl-text-2);
}

.scl-fc__card--untitled .scl-fc__text { font-size: 16px; color: var(--scl-text-body); text-wrap: pretty; }

.scl-fc__icon .scl-ico { font-size: 26px; }

.scl-fc__list { gap: 8px; }
.scl-fc__list li { font-size: 15px; line-height: 1.45; color: var(--scl-text); }
.scl-fc__list li::before { font-size: 20px; line-height: 1.1; }

.scl-fc__meta {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--scl-text);
    font-variant-numeric: tabular-nums;
}

.scl-fc--icon-brand .scl-fc__meta { color: var(--scl-brand); }

.scl-fc__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--scl-brand);
}

.scl-fc__link .scl-ico { font-size: 18px; font-weight: 400; transition: transform 150ms; }

/* Danger (pain point) tiles are smaller with a regular-weight "close" icon */
.scl-fc--icon-danger .scl-fc__icon { width: 36px; height: 36px; border-radius: 10px; }
.scl-fc--icon-danger .scl-fc__icon .scl-ico { font-size: 20px; font-weight: 400; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.scl-fc--icon-danger .scl-fc__card { padding: 22px; gap: 10px; }

/* Inline: icon next to the title */
.scl-fc--inline .scl-fc__card { gap: 14px; border-radius: 24px; }
.scl-fc__head { display: flex; align-items: center; gap: 12px; }
.scl.scl-fc--inline .scl-fc__title { font-size: 19px; }
.scl-fc--inline .scl-fc__text { line-height: 1.6; }

/* Compact: icon left, small type (add-ons, related modules) */
.scl-fc--compact .scl-fc__card { flex-direction: row; align-items: flex-start; gap: 14px; padding: 20px; }
.scl-fc--compact .scl-fc__icon { width: 44px; height: 44px; border-radius: 13px; }
.scl-fc--compact .scl-fc__icon .scl-ico { font-size: 24px; }
.scl-fc__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.scl.scl-fc--compact .scl-fc__title { font-size: 16px; }
.scl-fc--compact .scl-fc__text { font-size: 14px; line-height: 1.45; }
.scl-fc--compact .scl-fc__list { margin-top: 4px; }
.scl-fc--compact .scl-fc__list li { font-size: 14px; }
.scl-fc--compact .scl-fc__meta { margin-top: 4px; font-size: 16px; }
.scl-fc--compact.scl-fc--icon-brand .scl-fc__meta { margin-top: 6px; font-size: 14px; }
.scl-fc--compact .scl-fc__link { margin-top: 6px; padding-top: 0; }
.scl.scl-fc--compact a.scl-fc__card:hover { transform: translateY(-2px); }

/* Rating card */
.scl-fc__rating {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    border-radius: 20px;
    background: var(--scl-brand-tint);
    color: var(--scl-text);
}

.scl-fc__stars { display: flex; gap: 2px; color: var(--scl-star); }
.scl-fc__stars .scl-ico { font-size: 24px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.scl-fc__stars .scl-ico.is-empty { font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; }
.scl-fc__score { font-size: 36px; line-height: 1.2; letter-spacing: -0.03em; font-weight: 700; }
.scl-fc__rating-text { font-size: 14px; line-height: 1.4; color: var(--scl-text-2); }

/* Footnote + CTA row */
.scl-fc__footnote { margin-top: 16px; }

.scl-fc__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 24px;
}

.scl-fc__actions .scl-btn { height: 52px; padding: 0 24px; }
.scl .scl-fc__actions a.scl-btn--cta { box-shadow: none; }
.scl-fc__actions .scl-btn--secondary { padding: 0 22px; }
.scl-fc__note { font-size: 14px; line-height: 1.5; color: var(--scl-text-2); }

@media (max-width: 560px) {
    .scl-fc__actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .scl-fc__actions .scl-btn { width: 100%; }
    .scl-fc__note { text-align: center; }
}

/* ---- 50-scl_feature_tabs.css ---- */
/* feature_tabs — underlined tab bar, text + checklist left, media in a tinted frame right */
.scl-feature-tabs__heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
    margin-bottom: 24px;
}

.scl .scl-feature-tabs__title {
    font-size: clamp(28px, 3.8vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}

/* Tab bar: the baseline is an inset shadow so the 2px underline never
   creates vertical overflow in the horizontally scrolling list. */
.scl-feature-tabs__tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 24px;
    box-shadow: inset 0 -1px 0 var(--scl-border);
    scrollbar-width: none;
}

.scl-feature-tabs__tabs::-webkit-scrollbar { display: none; }

.scl-feature-tabs__tab {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--scl-text-2);
    transition: color 200ms;
}

.scl-feature-tabs__tab:hover,
.scl-feature-tabs__tab.is-active { color: var(--scl-text); }

.scl-feature-tabs__tab .scl-ico { font-size: 20px; }

.scl-feature-tabs__tab::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--scl-brand);
    opacity: 0;
    transition: opacity 200ms;
}

.scl-feature-tabs__tab.is-active::after { opacity: 1; }
.scl-feature-tabs__tab:focus-visible { outline-offset: -3px; }

/* Panel */
.scl-feature-tabs__stage {
    transition: opacity 200ms, transform 200ms;
}

.scl-feature-tabs__stage.is-fading {
    opacity: 0;
    transform: translateY(6px);
}

.scl-feature-tabs__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

.scl-feature-tabs__text {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scl .scl-feature-tabs__ptitle {
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.scl-feature-tabs__ptext {
    font-size: 17px;
    line-height: 1.6;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

.scl-feature-tabs__list { gap: 10px; }
.scl-feature-tabs__list li { gap: 10px; line-height: 1.3; }
.scl-feature-tabs__list li::before { font-size: 22px; line-height: 1.1; }

.scl-feature-tabs__frame {
    --scl-ft-pad: clamp(12px, 2vw, 24px);
    flex: 1.4 1 calc(460px + 2 * var(--scl-ft-pad));
    min-width: 0;
    padding: var(--scl-ft-pad);
    border-radius: 24px;
    background: var(--scl-surface-2);
}

@media (max-width: 560px) {
    .scl-feature-tabs__frame { flex-basis: 100%; }
}

.scl-feature-tabs__shot {
    overflow: hidden;
    border-radius: 18px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 20px 50px -30px rgba(27, 22, 38, .3);
}

.scl-feature-tabs__shot > img,
.scl-feature-tabs__shot > video {
    width: 100%;
    height: auto;
}

.scl-feature-tabs__shot > .scl-ph {
    height: auto;
    min-height: clamp(240px, 30vw, 380px);
    padding: 24px;
    text-align: center;
}

/* ---- 50-scl_hero_home.css ---- */
/* hero_home — homepage hero: announcement, display title, CTAs and a stepped product demo */
.scl-hero-home {
    overflow: hidden;
    padding: 0;
    background: var(--scl-bg);
}

.scl-hero-home > .scl-aurora::before {
    filter: blur(90px);
    opacity: calc(var(--scl-aurora-opacity) * .86);
}

.scl-hero-home__intro {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: calc(1100px + 2 * clamp(20px, 4vw, 40px));
    margin: 0 auto;
    padding: clamp(120px, 14vw, 176px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 64px);
    text-align: center;
}

.scl-hero-home__badge {
    max-width: 100%;
    text-wrap: balance;
}

.scl-hero-home__mark {
    flex: none;
    width: 18px;
    height: 18px;
}

.scl .scl-hero-home__title {
    max-width: 100%;
}

.scl-hero-home__lead {
    max-width: 620px;
}

.scl-hero-home__intro .scl-actions {
    width: 100%;
}

.scl-hero-home__note {
    margin-top: -8px;
}

/* Product demo */
.scl-hero-home__demo {
    position: relative;
    max-width: calc(1160px + 2 * clamp(16px, 4vw, 40px));
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px) clamp(40px, 6vw, 80px);
}

.scl-hero-home__glow {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    height: 70%;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 25% 50%, rgba(255, 90, 208, .30), transparent),
        radial-gradient(closest-side at 52% 50%, rgba(150, 90, 255, .34), transparent),
        radial-gradient(closest-side at 80% 50%, rgba(58, 168, 255, .30), transparent);
    filter: blur(50px);
}

html[data-theme="dark"] .scl-hero-home__glow { opacity: .6; }

.scl-hero-home__tabs {
    position: relative;
    display: flex;
    gap: clamp(8px, 2vw, 20px);
    margin-bottom: 16px;
}

.scl .scl-hero-home__tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    text-align: left;
    color: var(--scl-text);
}

.scl-hero-home__track {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--scl-border);
    overflow: hidden;
}

.scl-hero-home__fill {
    display: block;
    height: 100%;
    background: var(--scl-grad-bar);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 400ms ease;
}

.scl-hero-home__tab.is-done .scl-hero-home__fill,
.scl-hero-home__tab.is-active .scl-hero-home__fill {
    transform: scaleX(1);
}

.scl-hero-home__demo.is-auto .scl-hero-home__tab.is-active .scl-hero-home__fill {
    animation: scl-hh-fill var(--scl-hh-dur, 6s) linear forwards;
}

.scl-hero-home__demo.is-paused .scl-hero-home__tab.is-active .scl-hero-home__fill {
    animation-play-state: paused;
}

@keyframes scl-hh-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.scl-hero-home__label {
    display: flex;
    gap: 8px;
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 600;
    line-height: 1.35;
    opacity: .55;
    transition: opacity 200ms;
}

.scl-hero-home__tab:hover .scl-hero-home__label { opacity: .8; }
.scl-hero-home__tab.is-active .scl-hero-home__label { opacity: 1; }
.scl-hero-home__num { flex: none; color: var(--scl-brand); }

.scl-hero-home__window {
    position: relative;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: var(--scl-shadow-pop);
    overflow: hidden;
}

.scl-hero-home__hairline {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #cf5aff, #3aa8ff, transparent);
}

/* All step panels share one grid cell: the window keeps the height of the tallest one. */
.scl-hero-home__stage {
    display: grid;
}

.scl-hero-home__panel {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms var(--scl-ease), visibility 0s linear 350ms;
}

.scl-hero-home__panel.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 350ms var(--scl-ease), visibility 0s;
}

img.scl-hero-home__media,
video.scl-hero-home__media {
    display: block;
    width: 100%;
    height: auto;
}

.scl-hero-home__media.scl-ph {
    height: auto;
    aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
    .scl-hero-home__media.scl-ph { aspect-ratio: 16 / 7; }
}

/* Live demo (no screenshots): app window that plays lead -> AI answer -> dashboard */
.scl-hero-home__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--scl-border);
}

.scl-hero-home__bar-mark {
    flex: none;
    display: block;
    width: 20px;
    height: 20px;
}

.scl-hero-home__crumb {
    font-size: 13px;
    color: var(--scl-text-2);
    white-space: nowrap;
}

.scl-hero-home__search {
    flex: 1;
    min-width: 0;
    max-width: 378px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 10px;
    border-radius: 9px;
    background: var(--scl-surface-2);
    color: var(--scl-text-3);
    font-size: 13px;
}

.scl-hero-home__search .scl-ico { font-size: 16px; }

.scl-hero-home__search-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scl-hero-home__kbd {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 5px;
    border: 1px solid var(--scl-border);
}

.scl-hero-home__avatar,
.scl-hero-home__ava {
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.scl-hero-home__avatar {
    width: 28px;
    height: 28px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
}

.scl-hero-home__app { display: flex; }

.scl-hero-home__rail {
    flex: none;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 52px;
    padding: 12px 0;
    border-right: 1px solid var(--scl-border);
    color: var(--scl-text-3);
}

.scl-hero-home__rail-ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.scl-hero-home__rail-ico.is-active {
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
}

.scl-hero-home__main {
    flex: 1;
    min-width: 0;
    padding: 14px;
    overflow: hidden;
}

/* Phone: one card at a time, sliding to the active step. */
.scl-hero-home__lane {
    display: flex;
    flex-wrap: nowrap;
    transform: translateX(calc(var(--scl-hh-step, 0) * -100%));
    transition: transform 450ms var(--scl-ease);
}

.scl-hero-home__card {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: var(--scl-bg);
    border: 1px solid var(--scl-border);
    font-size: 12px;
    line-height: 1.25;
}

.scl-hero-home__card--stats { gap: 12px; }

.scl-hero-home__card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.scl-hero-home__card-head .scl-ico {
    font-size: 18px;
    color: var(--scl-brand);
}

.scl-hero-home__new {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
    font-size: 11px;
    font-weight: 700;
}

.scl-hero-home__online {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--scl-success);
}

.scl-hero-home__online::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--scl-success-dot);
}

.scl-hero-home__msg {
    display: flex;
    gap: 10px;
    padding: 0 10px;
}

.scl-hero-home__msg--new {
    padding: 10px;
    border-radius: 11px;
    background: var(--scl-brand-tint);
    border: 1px solid var(--scl-brand-tint-border);
}

.scl-hero-home__msg--old { opacity: .55; }
.scl-hero-home__msg--older { opacity: .4; }

.scl-hero-home__ava {
    width: 32px;
    height: 32px;
}

.scl-hero-home__ava--pink { background: var(--scl-pink-bg); color: var(--scl-pink-ink); }
.scl-hero-home__ava--green { background: var(--scl-success-bg); color: var(--scl-success); }
.scl-hero-home__ava--blue { background: var(--scl-info-bg); color: var(--scl-info); }

.scl-hero-home__msg-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--scl-text-body);
}

.scl-hero-home__msg-body small,
.scl-hero-home__kpi small {
    font-size: 11px;
    color: var(--scl-text-3);
}

.scl-hero-home__msg-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.scl-hero-home__msg-top b {
    font-size: 13px;
    font-weight: 600;
    color: var(--scl-text);
}

.scl-hero-home__msg-top small { margin-left: auto; }

.scl-hero-home__msg-body > span:last-child { line-height: 1.4; }

/* max-widths include the 22px horizontal padding, as in the design */
.scl-hero-home__bubble {
    padding: 8px 11px;
    line-height: 1.45;
}

.scl-hero-home__bubble--in {
    align-self: flex-start;
    max-width: calc(90% + 22px);
    border-radius: 13px 13px 13px 4px;
    background: var(--scl-surface-2);
    color: var(--scl-text);
}

.scl-hero-home__reply {
    position: relative;
    min-height: 84px;
}

.scl-hero-home__bubble--out {
    margin-left: auto;
    max-width: calc(94% + 22px);
    border-radius: 13px 13px 4px 13px;
    background: var(--scl-brand);
    color: var(--scl-on-brand);
    font-weight: 500;
}

.scl-hero-home__typing {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 13px 13px 4px 13px;
    background: var(--scl-brand-soft);
}

.scl-hero-home__typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--scl-brand);
}

.scl-hero-home__typing span:nth-child(2) { opacity: .7; }
.scl-hero-home__typing span:nth-child(3) { opacity: .4; }

.scl-hero-home__meta,
.scl-hero-home__booked {
    display: flex;
    align-items: center;
    gap: 4px;
}

.scl-hero-home__meta {
    font-size: 11px;
    color: var(--scl-text-3);
}

.scl-hero-home__meta .scl-ico { font-size: 14px; }

.scl-hero-home__kpis {
    display: flex;
    gap: 20px;
}

.scl-hero-home__kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scl-hero-home__kpi > span {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.scl-hero-home__kpi b {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.scl-hero-home__kpi em {
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    color: var(--scl-success);
}

.scl-hero-home__bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 44px;
}

.scl-hero-home__bars span {
    flex: 1;
    border-radius: 3px;
    background: var(--scl-border);
}

.scl-hero-home__bars .scl-hero-home__bar-now {
    height: 30%;
    background: linear-gradient(180deg, #9B6BF0, var(--scl-brand));
    box-shadow: 0 0 16px rgba(169, 139, 255, .5);
    transition: height 600ms var(--scl-ease);
}

.scl-hero-home__bars .scl-hero-home__bar-now.is-on { height: 94%; }

.scl-hero-home__booked {
    gap: 6px;
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--scl-success-bg);
    color: var(--scl-success);
    font-weight: 600;
}

.scl-hero-home__booked .scl-ico { font-size: 16px; }

/* Elements that appear as the demo plays (toggled with .is-on) */
.scl-hero-home__new,
.scl-hero-home__msg--new,
.scl-hero-home__bubble--in,
.scl-hero-home__typing,
.scl-hero-home__bubble--out,
.scl-hero-home__meta,
.scl-hero-home__kpi em,
.scl-hero-home__booked {
    opacity: 0;
    transition: opacity 250ms ease, transform 300ms ease;
}

.scl-hero-home__msg--new { transform: translateY(10px); }
.scl-hero-home__bubble--out { transform: translateY(8px); }

.scl-hero-home__demo--live .is-on {
    opacity: 1;
    transform: none;
}

@media (min-width: 768px) {
    .scl-hero-home__rail { display: flex; }

    .scl-hero-home__lane {
        flex-wrap: wrap;
        gap: 12px;
        transform: none;
    }

    .scl-hero-home__card { flex: 1 1 270px; }
}

@media (prefers-reduced-motion: reduce) {
    .scl-hero-home__demo.is-auto .scl-hero-home__tab.is-active .scl-hero-home__fill {
        animation: none;
        transform: scaleX(1);
    }
}

/* ---- 50-scl_hero_page.css ---- */
/* hero_page — generic page hero (centered or left), optional logo comparison, billing toggle and cards */
.scl-hero-page {
    overflow: hidden;
    padding: clamp(120px, 13vw, 168px) var(--scl-gutter) clamp(24px, 3vw, 48px);
}

.scl-hero-page--tint { padding-bottom: clamp(48px, 6vw, 80px); }
.scl-hero-page.scl-hero-page--cards { padding-bottom: clamp(56px, 7vw, 88px); }

/* Soft pink / violet / blue band along the top */
.scl-hero-page__band {
    position: absolute;
    left: 50%;
    top: -180px;
    width: 1200px;
    height: 520px;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        radial-gradient(closest-side at 28% 50%, rgba(255, 90, 208, .20), transparent),
        radial-gradient(closest-side at 52% 45%, rgba(150, 90, 255, .24), transparent),
        radial-gradient(closest-side at 76% 50%, rgba(58, 168, 255, .20), transparent);
    filter: blur(40px);
}

html[data-theme="dark"] .scl-hero-page__band { opacity: .7; }

.scl-hero-page__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scl-hero-page--center .scl-hero-page__inner {
    max-width: 960px;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.scl-hero-page--left .scl-hero-page__inner > * { max-width: 760px; }

.scl .scl-hero-page__title {
    font-size: clamp(36px, 5.4vw, 64px);
    line-height: 1.03;
    letter-spacing: -0.045em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-hero-page.scl-hero-page--center .scl-hero-page__title {
    font-size: clamp(34px, 5.6vw, 68px);
}

.scl-hero-page--center .scl-hero-page__lead { max-width: 620px; }
.scl-hero-page--left .scl-hero-page__lead { font-size: clamp(17px, 1.4vw, 18px); }

.scl-hero-page__inner > .scl-actions { width: 100%; max-width: 500px; }
.scl-hero-page__note { margin-top: -8px; }

/* Logo comparison */
.scl-hero-page__compare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.scl-hero-page--left .scl-hero-page__compare { justify-content: flex-start; }

.scl-hero-page__logo {
    display: grid;
    place-items: center;
    height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-hero-page__logo img {
    width: auto;
    height: 22px;
    max-width: 160px;
    object-fit: contain;
}

.scl-hero-page__logo--ph {
    background: repeating-linear-gradient(135deg, var(--scl-ph-a) 0 6px, var(--scl-ph-b) 6px 12px);
    font-family: var(--scl-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--scl-text-3);
    white-space: nowrap;
}

.scl-hero-page__vs {
    font-size: 15px;
    font-weight: 700;
    color: var(--scl-text-2);
}

/* Monthly / yearly toggle */
.scl-hero-page__billing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.scl-hero-page--left .scl-hero-page__billing { justify-content: flex-start; }

.scl-hero-page__seg {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 1px 2px rgba(27, 22, 38, .05);
}

.scl-hero-page__thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: var(--scl-r-pill);
    background: var(--scl-dark);
    transition: transform 200ms var(--scl-ease);
}

.scl-hero-page__seg.is-yearly .scl-hero-page__thumb { transform: translateX(100%); }

.scl .scl-hero-page__segbtn {
    position: relative;
    width: 128px;
    height: 44px;
    padding: 0 8px;
    border-radius: var(--scl-r-pill);
    font-size: 15px;
    font-weight: 600;
    color: var(--scl-text);
    transition: color 200ms;
}

.scl .scl-hero-page__segbtn[aria-pressed="true"] { color: var(--scl-on-dark); }

.scl-hero-page__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-success-bg);
    color: var(--scl-success);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.scl-hero-page__badge .scl-ico {
    font-size: 18px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Feature cards */
.scl-hero-page__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 12px;
    margin-top: clamp(40px, 5vw, 64px);
}

.scl-hero-page--center .scl-hero-page__cards { max-width: 1100px; }

.scl-hero-page__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-hero-page__card-icon.scl-icon-tile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
}

.scl .scl-hero-page__card-title {
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.scl-hero-page__card-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--scl-text-2);
}

/* ---- 50-scl_hero_split.css ---- */
/* hero_split — two-column hero: text left, image / status card / case quote right */
.scl-hero-split {
    overflow: hidden;
    padding: clamp(112px, 12.5vw, 160px) var(--scl-gutter) clamp(56px, 7vw, 88px);
}

/* Aurora glows */
.scl-hero-split__aurora {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(#ff5ad0, #cf5aff, #7b7bff, #3aa8ff, #22ccff, #ff5ad0);
    filter: blur(105px);
    opacity: .19;
}

.scl-hero-split__aurora--right { top: -320px; right: -220px; width: 760px; }
.scl-hero-split__aurora--left { top: -420px; left: -260px; width: 820px; background: conic-gradient(from 90deg, #ff5ad0, #cf5aff, #7b7bff, #3aa8ff, #22ccff, #ff5ad0); filter: blur(110px); opacity: .2; }
.scl-hero-split__aurora--bottom { bottom: -380px; left: -200px; width: 820px; filter: blur(110px); opacity: .2; }

.scl-hero-split__band {
    position: absolute;
    left: 50%;
    top: -200px;
    width: 1200px;
    height: 560px;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        radial-gradient(closest-side at 28% 50%, rgba(255, 90, 208, .20), transparent),
        radial-gradient(closest-side at 52% 45%, rgba(150, 90, 255, .24), transparent),
        radial-gradient(closest-side at 76% 50%, rgba(58, 168, 255, .20), transparent);
    filter: blur(40px);
}

html[data-theme="dark"] .scl-hero-split__band { opacity: .7; }

/* Layout: stacked below 1000px, two columns from 1000px */
.scl-hero-split__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
}

.scl-hero-split__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scl-hero-split__visual {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 680px;
}

.scl-hero-split--none .scl-hero-split__text { max-width: 760px; }

@media (min-width: 1000px) {
    .scl-hero-split__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .scl-hero-split--window .scl-hero-split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .scl-hero-split--quote .scl-hero-split__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .scl-hero-split--none .scl-hero-split__grid { grid-template-columns: minmax(0, 1fr); }
    .scl-hero-split__visual { max-width: none; }
}

/* Text column */
.scl .scl-hero-split__back {
    align-self: flex-start;
    padding: 0 12px 0 8px;
    border-color: var(--scl-brand-tint-border);
    white-space: nowrap;
}

.scl-hero-split__back .scl-ico { font-size: 20px; }

.scl-hero-split__crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--scl-text-2);
}

.scl-hero-split__crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.scl-hero-split__crumbs .scl-ico { font-size: 16px; }
.scl .scl-hero-split__crumbs a { color: var(--scl-text-2); }
.scl .scl-hero-split__crumbs a:hover { color: var(--scl-text); }
.scl-hero-split__crumbs .is-current { color: var(--scl-text); font-weight: 600; }

.scl-hero-split__logo {
    align-self: flex-start;
    width: auto;
    height: 44px;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
}

.scl-hero-split__badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scl-hero-split__tile.scl-icon-tile {
    width: 52px;
    height: 52px;
    border-radius: 16px;
}

.scl-hero-split__tile .scl-ico { font-size: 28px; }
.scl-hero-split__eyebrow .scl-ico { font-size: 20px; }

.scl .scl-hero-split__title {
    font-size: clamp(36px, 5.4vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 700;
    text-wrap: balance;
}

.scl .scl-hero-split__title--md {
    font-size: clamp(32px, 4.6vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.scl-hero-split__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scl-hero-split__tags li {
    padding: 4px 12px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--scl-text);
}

.scl-hero-split__lead { max-width: 580px; }

/* Buttons grow to fill 500px like the design, but keep their natural width when longer */
.scl-hero-split__actions.scl-actions {
    display: inline-flex;
    align-self: flex-start;
    min-width: min(100%, 500px);
    max-width: 100%;
}

.scl-hero-split__actions .scl-btn { flex: 1 1 auto; }

@media (max-width: 560px) {
    .scl-hero-split__actions.scl-actions { display: flex; align-self: stretch; }
}

.scl-hero-split__note { margin-top: -8px; }

.scl-hero-split__price {
    font-size: 15px;
    color: var(--scl-text-body);
}

.scl-hero-split__price :where(b, strong) { color: var(--scl-text); font-weight: 700; }
.scl .scl-hero-split__price a { color: var(--scl-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Visual: image / video */
.scl-hero-split__frame {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

.scl-hero-split__img {
    display: block;
    width: 100%;
    height: auto;
}

.scl-hero-split__img.scl-ph {
    display: grid;
    min-height: clamp(240px, 26vw, 300px);
    border-radius: inherit;
}

.scl-hero-split__visual.is-window .scl-hero-split__frame {
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: var(--scl-shadow-pop);
}

.scl-hero-split__visual.is-window .scl-hero-split__img.scl-ph {
    min-height: 0;
    aspect-ratio: 4 / 3;
}

.scl-hero-split__glow {
    position: absolute;
    inset: 8% 4% 18%;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 25% 50%, rgba(255, 90, 208, .26), transparent),
        radial-gradient(closest-side at 52% 50%, rgba(150, 90, 255, .30), transparent),
        radial-gradient(closest-side at 80% 50%, rgba(58, 168, 255, .26), transparent);
    filter: blur(44px);
}

html[data-theme="dark"] .scl-hero-split__glow { opacity: .6; }

.scl-hero-split__hairline {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #cf5aff, #3aa8ff, transparent);
}

.scl-hero-split__captions {
    position: relative;
    display: flex;
    gap: clamp(8px, 2vw, 16px);
    margin-top: 16px;
}

.scl-hero-split__captions li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scl-hero-split__line {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--scl-grad-bar);
}

.scl-hero-split__caption {
    display: flex;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--scl-text);
}

.scl-hero-split__num { flex: none; color: var(--scl-brand); }

/* Visual: status card */
.scl-hero-split__status {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 24px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 30px 70px -36px rgba(70, 30, 130, .4);
}

.scl-hero-split__status-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scl-hero-split__status-head b {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.scl-hero-split__live {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--scl-success-dot);
    box-shadow: 0 0 0 4px var(--scl-success-bg);
}

.scl-hero-split__status-badge {
    margin-left: auto;
    font-size: 12px;
    color: var(--scl-text-3);
}

.scl-hero-split__status-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scl-hero-split__status-rows li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--scl-bg);
}

.scl-hero-split__status-rows .scl-ico {
    font-size: 22px;
    color: var(--scl-brand);
}

.scl-hero-split__status-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.scl-hero-split__status-value {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--scl-success);
    text-align: right;
}

/* Visual: case quote card */
.scl-hero-split__quote,
.scl a.scl-hero-split__quote {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 28px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-brand-tint-border);
    box-shadow: 0 40px 80px -40px rgba(70, 30, 130, .4);
    color: var(--scl-text);
    text-decoration: none;
    transition: transform 200ms var(--scl-ease);
}

.scl a.scl-hero-split__quote:hover {
    color: var(--scl-text);
    transform: translateY(-3px);
}

.scl-hero-split__quote-stat {
    align-self: flex-start;
    font-size: clamp(44px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 700;
}

.scl-hero-split__quote-stat-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.scl-hero-split__quote-text {
    font-size: 16px;
    line-height: 1.55;
    color: var(--scl-text-body);
}

.scl-hero-split__quote-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding-top: 14px;
    border-top: 1px solid var(--scl-border-subtle);
    font-size: 14px;
    line-height: 1.45;
}

.scl-hero-split__quote-person {
    display: flex;
    flex-direction: column;
}

.scl-hero-split__quote-person span { color: var(--scl-text-2); }

.scl-hero-split__quote-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: var(--scl-brand);
    white-space: nowrap;
}

.scl-hero-split__quote-link .scl-ico {
    font-size: 18px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    transition: transform 150ms;
}

.scl a.scl-hero-split__quote:hover .scl-hero-split__quote-link .scl-ico { transform: translateX(3px); }

html[data-theme="dark"] .scl-hero-split__status,
html[data-theme="dark"] .scl-hero-split__quote { box-shadow: var(--scl-shadow-lg); }

/* ---- 50-scl_hero_url_check.css ---- */
/* hero_url_check — centered hero with a big website input that hands off to the check page */
.scl-hero-check {
    overflow: hidden;
    padding: clamp(120px, 13vw, 160px) var(--scl-gutter) clamp(48px, 6vw, 80px);
}

.scl-hero-check__band {
    position: absolute;
    left: 50%;
    top: -160px;
    width: 1200px;
    height: 620px;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        radial-gradient(closest-side at 28% 50%, rgba(255, 90, 208, .22), transparent),
        radial-gradient(closest-side at 52% 45%, rgba(150, 90, 255, .26), transparent),
        radial-gradient(closest-side at 76% 50%, rgba(58, 168, 255, .22), transparent);
    filter: blur(40px);
}

html[data-theme="dark"] .scl-hero-check__band { opacity: .7; }

.scl-hero-check__inner {
    max-width: 880px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.scl-hero-check__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 14px 6px 8px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--scl-text);
}

.scl-hero-check__badge-label {
    flex: none;
    padding: 2px 8px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-success-bg);
    color: var(--scl-success);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.scl .scl-hero-check__title {
    font-size: clamp(34px, 5.6vw, 68px);
    line-height: 1.03;
    letter-spacing: -0.045em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-hero-check__lead { max-width: 620px; }

.scl-hero-check__form {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.scl-hero-check__field {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: 24px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 20px 50px -30px rgba(70, 30, 130, .4);
    transition: border-color 150ms, box-shadow 150ms;
}

.scl-hero-check__field:focus-within {
    border-color: var(--scl-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--scl-brand) 16%, transparent), 0 20px 50px -30px rgba(70, 30, 130, .4);
}

.scl-hero-check__field.is-invalid { border-color: var(--scl-danger); }
.scl-hero-check__field.is-invalid:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--scl-danger) 14%, transparent), 0 20px 50px -30px rgba(70, 30, 130, .4); }

.scl-hero-check__label {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    cursor: text;
}

.scl-hero-check__label .scl-ico {
    font-size: 22px;
    color: var(--scl-text-2);
}

.scl .scl-hero-check__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    outline: none;
    font-size: 17px;
    color: var(--scl-text);
}

.scl .scl-hero-check__input:focus { outline: none; box-shadow: none; }
.scl-hero-check__input::placeholder { color: var(--scl-text-3); opacity: 1; }

.scl .scl-hero-check__btn {
    flex: 1 1 auto;
    height: 52px;
    padding: 0 24px;
    box-shadow: none;
}

.scl-hero-check__btn:hover { transform: none; }

.scl-hero-check__error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--scl-danger);
}

.scl-hero-check__error .scl-ico {
    font-size: 18px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---- 50-scl_hubs.css ---- */
/* hubs — three hub cards (outcomes, module chips, price) + suite banner */
.scl-hubs__heading { gap: 14px; max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.scl .scl-hubs__heading .scl-h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; }

.scl-hubs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.scl-hubs__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: clamp(22px, 2.6vw, 32px);
    border-radius: 24px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: var(--scl-shadow-md);
    color: var(--scl-text);
}

.scl a.scl-hubs__card {
    color: var(--scl-text);
    text-decoration: none;
    transition: transform 200ms var(--scl-ease), box-shadow 200ms;
}

.scl a.scl-hubs__card:hover {
    color: var(--scl-text);
    transform: translateY(-3px);
    box-shadow: var(--scl-shadow-hover);
}

.scl a.scl-hubs__card:hover .scl-hubs__link .scl-ico { transform: translateX(3px); }

.scl-hubs__head { display: flex; align-items: center; gap: 14px; }

.scl-hubs__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand);
}

.scl-hubs__icon .scl-ico { font-size: 28px; }
.scl-hubs__names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.scl-hubs__label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl .scl-hubs__title { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }

.scl-hubs__list { gap: 10px; }
.scl-hubs__list li { gap: 10px; font-size: 16px; line-height: 1.5; }
.scl-hubs__list li::before { font-size: 22px; line-height: 1.1; }

.scl-hubs__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

.scl-hubs__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    border-radius: 10px;
    background: var(--scl-surface-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.scl-hubs__chip .scl-ico { font-size: 18px; color: var(--scl-brand); }

.scl-hubs__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--scl-border-subtle);
}

.scl-hubs__chips + .scl-hubs__foot { margin-top: 0; }
.scl-hubs__price { font-size: 15px; line-height: 1.4; color: var(--scl-text-2); }
.scl-hubs__price b { font-size: 18px; font-weight: 700; color: var(--scl-text); }

.scl-hubs__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--scl-brand);
    white-space: nowrap;
}

.scl-hubs__link .scl-ico { font-size: 20px; font-weight: 400; transition: transform 150ms; }

/* Suite banner */
.scl-hubs__banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
    margin-top: 16px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 24px;
    background: var(--scl-brand-tint);
    color: var(--scl-text);
}

.scl-hubs__aurora {
    position: absolute;
    right: -120px;
    top: -160px;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: conic-gradient(#ff5ad0, #cf5aff, #7b7bff, #3aa8ff, #22ccff, #ff5ad0);
    filter: blur(70px);
    opacity: .3;
    pointer-events: none;
}

html[data-theme="dark"] .scl-hubs__aurora { opacity: .22; }

.scl-hubs__banner-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.scl-hubs__badge { height: auto; padding: 5px 12px; line-height: 1.3; }
.scl .scl-hubs__banner-title { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.scl-hubs__banner-text { font-size: 16px; line-height: 1.5; color: var(--scl-text-2); }

.scl-hubs__actions { gap: 10px; }
.scl-hubs__actions .scl-btn { height: 52px; padding: 0 24px; }
.scl .scl-hubs__actions a.scl-btn--cta { box-shadow: none; }
.scl-hubs__actions .scl-btn--secondary { padding: 0 22px; }

@media (max-width: 560px) {
    .scl-hubs__actions { width: 100%; }
}

/* ---- 50-scl_intro_tiles.css ---- */
/* intro_tiles — intro copy + platform card where separate tool tiles converge */
.scl-it { overflow-x: clip; }

.scl-it__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.scl-it__copy {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.scl-it__heading { gap: 20px; }
.scl .scl-it__heading .scl-h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; }

.scl-it__text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

.scl-it__replay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px 0 10px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2) !important;
    background: var(--scl-surface) !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--scl-text);
    transition: background 150ms;
}

.scl-it__replay:hover { background: var(--scl-surface-3) !important; }
.scl-it__replay .scl-ico { font-size: 20px; }

/* Stage */
.scl-it__stage {
    --tile-w: clamp(78px, 15.5cqw, 92px);
    position: relative;
    flex: 1 1 440px;
    min-width: 0;
    min-height: clamp(320px, 36vw, 420px);
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 36px) 0 clamp(8px, 1vw, 12px);
    container-type: inline-size;
}

.scl-it__glow {
    position: absolute;
    inset: 10% 6%;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 30% 50%, rgba(255, 90, 208, .18), transparent),
        radial-gradient(closest-side at 60% 50%, rgba(150, 90, 255, .22), transparent),
        radial-gradient(closest-side at 85% 50%, rgba(58, 168, 255, .18), transparent);
    filter: blur(30px);
    transition: opacity 600ms;
}

.scl-it__card {
    position: relative;
    width: max(76cqw, 284px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(16px, 2.4vw, 24px) 12px clamp(18px, 2.4vw, 24px);
}

.scl-it__card-bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    border: 1.5px solid transparent;
    background: linear-gradient(var(--scl-surface), var(--scl-surface)) padding-box, linear-gradient(160deg, #ff5ad0, #cf5aff 30%, #7b7bff 60%, #3aa8ff) border-box;
    box-shadow: 0 30px 60px -28px rgba(109, 53, 217, .5);
    transition: opacity 500ms 250ms, transform 600ms var(--scl-ease) 200ms;
}

.scl-it__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    transition: opacity 500ms 250ms;
}

.scl-it__logo { height: clamp(22px, 2.4vw, 28px); width: auto; }
.scl-it__caption { font-size: 13px; line-height: 1.4; color: var(--scl-text-2); }
.scl-it__caption b { color: var(--scl-text); font-weight: 700; }

/* Tiles (merged = natural size inside the card) */
.scl-it__tiles {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    --gap-x: clamp(10px, 3.4cqw, 20px);
    gap: 18px var(--gap-x);
    max-width: calc(var(--tile-w) * 3 + var(--gap-x) * 2);
    margin-top: clamp(32px, 9cqw, 56px);
}

.scl-it__tile {
    --tone-bg: var(--scl-brand-soft);
    --tone-fg: var(--scl-brand);
    width: var(--tile-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 4px;
    border-radius: 11px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 8px 20px -12px rgba(27, 22, 38, .3);
    transform: translate(0, 0) rotate(0) scale(1);
    transition: transform 700ms var(--scl-ease) var(--d, 0ms);
    will-change: transform;
}

.scl-it__tile--blue { --tone-bg: var(--scl-info-bg); --tone-fg: var(--scl-info); }
.scl-it__tile--pink { --tone-bg: var(--scl-pink-bg); --tone-fg: var(--scl-pink-ink); }
.scl-it__tile--green { --tone-bg: var(--scl-success-bg); --tone-fg: var(--scl-success); }
.scl-it__tile--teal { --tone-bg: #E6F6F8; --tone-fg: #0E7C8A; }
html[data-theme="dark"] .scl-it__tile--teal { --tone-bg: rgba(26, 166, 183, .14); --tone-fg: #5FD0DC; }

.scl-it__tile-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--tone-bg);
    color: var(--tone-fg);
}

.scl-it__tile-icon .scl-ico { font-size: 15px; }

.scl-it__tile-label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--scl-text);
}

.scl-it__tile-price {
    font-size: 8px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--scl-danger);
    opacity: 0;
    transition: opacity 300ms;
}

/* Apart: tools scattered around, platform card hidden */
.scl-it__stage.is-apart .scl-it__glow,
.scl-it__stage.is-apart .scl-it__card-bg,
.scl-it__stage.is-apart .scl-it__brand { opacity: 0; }
.scl-it__stage.is-apart .scl-it__card-bg { transform: scale(.92); }
.scl-it__stage.is-apart .scl-it__tile {
    transform: translate(calc(var(--dx, 0) * 1cqw), calc(var(--dy, 0) * 1cqw)) rotate(var(--r, 0deg)) scale(1.5);
}
.scl-it__stage.is-apart .scl-it__tile-price { opacity: 1; }

.scl-it__stage.is-instant *,
.scl-it__stage.is-instant *::before { transition: none !important; }

@media (max-width: 559px) {
    .scl-it__stage { --tile-w: 78px; }
    .scl-it__card { padding-left: 8px; padding-right: 8px; }
    .scl-it__tiles { row-gap: 12px; }
    .scl-it__stage.is-apart .scl-it__tile { transform: translate(calc(var(--dx, 0) * .8cqw), calc(var(--dy, 0) * 1cqw)) rotate(var(--r, 0deg)) scale(1.3); }
}

/* ---- 50-scl_kb_article.css ---- */
/* kb_article — knowledge base article: breadcrumb, steps, tip, feedback + sticky sidebar */
.scl-kba {
    padding-top: clamp(112px, 12vw, 140px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

.scl-kba__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(28px, 5vw, 64px);
}

.scl-kba__main {
    flex: 2 1 520px;
    min-width: 0;
    max-width: 740px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Breadcrumb */
.scl-kba__crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: normal;
    color: var(--scl-text-2);
}

.scl-kba__crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.scl .scl-kba__crumbs a {
    font-weight: 600;
    color: var(--scl-text-2);
    text-decoration: none;
}

.scl .scl-kba__crumbs a:hover { color: var(--scl-brand); }
.scl-kba__crumbs .scl-ico { font-size: 18px; }

.scl .scl-kba__title {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-kba__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: normal;
    color: var(--scl-text-2);
}

.scl-kba__meta .scl-ico { font-size: 18px; }

.scl-kba__intro {
    font-size: 18px;
    line-height: 1.65;
    color: var(--scl-text-body);
    text-wrap: pretty;
}

/* Steps */
.scl-kba__steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scl-kba__step {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--scl-r-lg);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-kba__step-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.scl-kba__step-text {
    padding-top: 3px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--scl-text);
}

.scl-kba__prose { font-size: 16px; }

/* Tip */
.scl-kba__tip {
    display: flex;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--scl-r-lg);
    background: var(--scl-brand-tint);
    border: 1px solid var(--scl-brand-tint-border);
    font-size: 15px;
    line-height: 1.55;
    color: var(--scl-text);
}

.scl .scl-kba__tip-mark { margin-top: 2px; }

/* Feedback */
.scl-kba__feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 18px;
    border-radius: var(--scl-r-lg);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    line-height: normal;
}

.scl-kba__question { flex: 1 1 200px; font-size: 15px; }

.scl-kba__votes {
    display: flex;
    gap: 8px;
}

.scl .scl-kba__vote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--scl-r-md);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 600;
    transition: background 150ms, border-color 150ms;
}

.scl .scl-kba__vote:hover { background: var(--scl-surface-3); border-color: var(--scl-text-3); }
.scl-kba__vote .scl-ico { font-size: 20px; }

.scl-kba__thanks {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
}

.scl-kba__thanks .scl-ico {
    font-size: 22px;
    color: var(--scl-success);
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Sidebar */
.scl-kba__aside {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 1000px) {
    .scl-kba__aside { position: sticky; top: 110px; }
}

.scl-kba__card {
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    line-height: normal;
}

.scl-kba__related { gap: 4px; }

.scl-kba__label {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl .scl-kba__related-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--scl-text-body);
    text-decoration: none;
}

.scl a.scl-kba__related-link:hover { color: var(--scl-brand); }

.scl-kba__support {
    gap: 10px;
    background: var(--scl-brand-tint);
    border-color: var(--scl-brand-tint-border);
}

.scl-kba__support-title { font-size: 16px; }

.scl-kba__support-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-nav);
}

.scl .scl-kba__support-btn { height: 46px; }
.scl .scl-kba__support-btn:hover { transform: none; }

/* ---- 50-scl_kb_overview.css ---- */
/* kb_overview — knowledge base hero with live search, category cards and popular articles */
.scl-kb { padding-top: 16px; }
.scl-kb--hero { padding-top: clamp(116px, 12vw, 150px); }

.scl-kb__aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.scl-kb__aurora::before {
    content: "";
    position: absolute;
    top: -340px;
    left: 50%;
    width: 900px;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--scl-conic);
    filter: blur(110px);
    opacity: var(--scl-aurora-opacity);
}

/* Hero */
.scl-kb__hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
}

.scl-kb__tabs {
    display: inline-flex;
    max-width: 100%;
    padding: 4px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl .scl-kb__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--scl-r-pill);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--scl-text-body);
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms, color 150ms;
}

.scl .scl-kb__tab:hover { background: var(--scl-surface-2); color: var(--scl-text); }
.scl .scl-kb__tab.is-active { background: var(--scl-dark); color: var(--scl-on-dark); }
.scl-kb__tab .scl-ico { font-size: 20px; }

.scl .scl-kb__title { max-width: 820px; }

.scl-kb__intro {
    max-width: 640px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--scl-text-2);
}

.scl-kb__search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 640px;
    height: 60px;
    padding: 0 18px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border-2);
    box-shadow: var(--scl-shadow-lg);
    transition: border-color 150ms, box-shadow 150ms;
}

.scl-kb__search:focus-within {
    border-color: var(--scl-brand);
    box-shadow: var(--scl-shadow-lg), 0 0 0 4px color-mix(in srgb, var(--scl-brand) 16%, transparent);
}

.scl-kb__search > .scl-ico { font-size: 24px; color: var(--scl-brand); }

.scl .scl-kb__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-size: 17px;
    color: var(--scl-text);
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.scl .scl-kb__input:focus { outline: none; box-shadow: none; }
.scl-kb__input::placeholder { color: var(--scl-text-3); }
.scl-kb__input::-webkit-search-cancel-button,
.scl-kb__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.scl .scl-kb__clear {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-right: -8px;
    border-radius: 50%;
    color: var(--scl-text-2);
    transition: background 150ms, color 150ms;
}

.scl .scl-kb__clear:hover { background: var(--scl-surface-2); color: var(--scl-text); }

/* Body */
.scl-kb__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.scl-kb__count {
    margin-bottom: -16px;
    font-size: 14px;
    color: var(--scl-text-2);
}

.scl-kb__cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 12px;
}

.scl .scl-kb__cat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    border-radius: 22px;
    background: var(--scl-surface);
    border: 1.5px solid var(--scl-border);
    color: var(--scl-text);
    text-decoration: none;
    line-height: normal;
    transition: border-color 150ms, transform 200ms var(--scl-ease);
}

.scl a.scl-kb__cat:hover {
    transform: translateY(-2px);
    border-color: var(--scl-brand-light);
    color: var(--scl-text);
}

.scl-kb__cat-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand);
}

.scl-kb__cat-icon .scl-ico { font-size: 24px; }
.scl-kb__cat-title { font-size: 17px; }
.scl-kb__cat-text { font-size: 14px; line-height: 1.5; color: var(--scl-text-2); }

/* Articles */
.scl-kb__articles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scl .scl-kb__articles-title {
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.scl-kb__list {
    border-radius: 22px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
}

.scl .scl-kb__row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 84px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--scl-border-subtle);
    color: var(--scl-text);
    text-decoration: none;
    line-height: normal;
    transition: background 150ms;
}

.scl .scl-kb__row:last-child { border-bottom: 0; }
.scl a.scl-kb__row:hover { background: var(--scl-bg); color: var(--scl-text); }

.scl-kb__row-icon { font-size: 22px; color: var(--scl-brand); }

.scl-kb__row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scl-kb__row-text > b { font-size: 15px; font-weight: 600; }
.scl-kb__row-text > span { font-size: 13px; color: var(--scl-text-2); }

.scl-kb__row-chevron {
    color: var(--scl-text-3);
    transition: transform 150ms;
}

.scl a.scl-kb__row:hover .scl-kb__row-chevron { transform: translateX(3px); color: var(--scl-brand); }

/* No results */
.scl-kb__none {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 20px;
    border-radius: 22px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    text-align: center;
    line-height: normal;
}

.scl-kb__none > b { font-size: 17px; }
.scl-kb__none > span { max-width: 520px; font-size: 15px; line-height: 1.5; color: var(--scl-text-2); }
.scl-kb__none .scl-btn { margin-top: 4px; }

@media (max-width: 767px) {
    .scl .scl-kb__tab { height: 44px; }
    .scl-kb__search { height: 56px; }
    .scl .scl-kb__input { font-size: 16px; }
}

/* ---- 50-scl_legal_document.css ---- */
/* ==========================================================================
   legal_document — title, document tabs, sticky summary/TOC sidebar,
   numbered body, optional cookie preferences card and contact box
   ========================================================================== */
.scl.scl-legal {
    padding-top: clamp(116px, 12vw, 150px);
}

.scl-legal .scl-container {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.scl-legal__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
}

.scl .scl-legal__title {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-legal__updated {
    font-size: 15px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

/* Document tabs */
.scl-legal__tabs {
    display: flex;
    gap: 8px;
    margin-inline: calc(var(--scl-gutter) * -1);
    padding: 0 var(--scl-gutter) 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.scl-legal__tabs::-webkit-scrollbar { display: none; }

.scl .scl-legal__tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 150ms, border-color 150ms, color 150ms;
}

.scl .scl-legal__tab:hover { border-color: var(--scl-text-3); color: var(--scl-text); }

.scl .scl-legal__tab.is-active {
    background: var(--scl-dark);
    border-color: var(--scl-dark);
    color: var(--scl-on-dark);
}

/* Layout */
.scl-legal__layout {
    display: grid;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

@media (min-width: 900px) {
    .scl-legal__layout { grid-template-columns: minmax(220px, 1fr) minmax(0, 760px); }
    .scl-legal__layout--single { grid-template-columns: minmax(0, 760px); }
    .scl-legal__aside {
        position: sticky;
        top: 110px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

.scl-legal__aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scl-legal__summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border-radius: 20px;
    background: var(--scl-brand-tint);
    border: 1px solid var(--scl-brand-tint-border);
}

.scl-legal__summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.scl-legal__summary-title img { width: 16px; height: 16px; flex: none; }

.scl-legal__summary p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--scl-text-body);
}

.scl-legal__toc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-legal__toc-label {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl-legal__toc ol { display: flex; flex-direction: column; gap: 2px; }

.scl .scl-legal__toc a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 40px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--scl-text-body);
    text-decoration: none;
    transition: color 150ms;
}

.scl .scl-legal__toc a:hover,
.scl .scl-legal__toc a.is-active { color: var(--scl-brand); }

.scl-legal__toc-num {
    flex: none;
    min-width: 1.1em;
    font-variant-numeric: tabular-nums;
    color: var(--scl-text-3);
}

.scl-legal__toc a.is-active .scl-legal__toc-num { color: var(--scl-brand); }

.scl .scl-legal__download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms;
}

.scl .scl-legal__download:hover { background: var(--scl-surface-3); color: var(--scl-text); }
.scl-legal__download .scl-ico { font-size: 20px; }

/* Content */
.scl-legal__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.scl-legal__notice {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--scl-warning-bg);
    color: var(--scl-warning);
    font-size: 14px;
    line-height: 1.5;
}

.scl-legal__notice > .scl-ico {
    font-size: 20px;
    font-weight: 400;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.scl-legal__notice :where(strong, b) { color: inherit; font-weight: 700; }
.scl-legal__notice :where(a) { color: inherit; text-decoration: underline; }

.scl .scl-legal__body {
    font-size: 16px;
    line-height: 1.75;
    color: var(--scl-text-body);
}

.scl .scl-legal__body > * + * { margin-top: 1em; }

.scl .scl-legal__body > h2 {
    margin-top: 28px;
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--scl-text);
    scroll-margin-top: 110px;
}

.scl .scl-legal__body > h2:first-child { margin-top: 0; }
.scl .scl-legal__body > h2 + * { margin-top: 10px; }
.scl .scl-legal__body > h3 { margin-top: 22px; font-size: 18px; scroll-margin-top: 110px; }
.scl .scl-legal__body > h3 + * { margin-top: 8px; }
.scl-legal__num { font-variant-numeric: tabular-nums; }

.scl .scl-legal__contact {
    padding: 18px;
    border-radius: 18px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    font-size: 15px;
    line-height: 1.6;
    color: var(--scl-text-nav);
}

.scl .scl-legal__contact a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Cookie preferences card (works through the site's cookie consent) */
.scl-legal__cookies {
    overflow: hidden;
    border-radius: 22px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-legal__cookies-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--scl-border-subtle);
    font-size: 17px;
}

.scl-legal__cookie {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl-legal__cookie-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scl-legal__cookie-text b { font-size: 15px; font-weight: 700; }
.scl-legal__cookie-text span { font-size: 14px; line-height: 1.45; color: var(--scl-text-2); }

.scl-legal__switch.is-locked { opacity: .55; cursor: not-allowed; }

.scl-legal__cookies-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 18px;
}

.scl-legal__cookies-saved { font-size: 14px; font-weight: 600; color: var(--scl-success); }
.scl .scl-legal__cookies-save { height: 46px; padding: 0 18px; font-size: 14px; }

@media print {
    .scl-legal { padding-top: 0 !important; }
    .scl-legal__tabs,
    .scl-legal__aside,
    .scl-legal__cookies { display: none !important; }
    .scl-legal__layout { display: block; }
}

/* ---- 50-scl_link_chips.css ---- */
/* link_chips — small title + wrapping row of icon pills linking out */
.scl-lc.scl-section--tight { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }

.scl .scl-lc__title {
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--scl-text);
}

.scl-lc__list { display: flex; flex-wrap: wrap; gap: 8px; }

.scl .scl-lc__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: border-color 150ms, background 150ms;
}

.scl .scl-lc__chip:hover { border-color: var(--scl-brand-light); color: var(--scl-text); }
.scl-lc__chip .scl-ico { font-size: 20px; color: var(--scl-brand); }

/* ---- 50-scl_logo_bar.css ---- */
/* logo_bar — customer logo grid or scrolling integrations band */
.scl-lb--grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: clamp(32px, 5vw, 56px);
    padding-bottom: clamp(32px, 5vw, 56px);
}

.scl-lb__lead {
    max-width: var(--scl-max);
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--scl-text-2);
    text-align: center;
    text-wrap: balance;
}

.scl-lb__num { color: var(--scl-text); font-weight: 700; font-variant-numeric: tabular-nums; }

.scl-lb__ph-tag {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--scl-warning-bg);
    color: var(--scl-warning);
    font-size: 11px;
    font-weight: 700;
    vertical-align: 2px;
    white-space: nowrap;
}

/* Grid */
.scl-lb__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 12px;
    width: 100%;
}

@media (max-width: 559px) {
    .scl-lb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.scl-lb__tile {
    display: grid;
    place-items: center;
    height: 52px;
    padding: 6px 12px;
    border-radius: 12px;
}

.scl-lb__tile--ph {
    background: repeating-linear-gradient(135deg, var(--scl-ph-a) 0 6px, var(--scl-ph-b) 6px 12px);
    font: 500 12px/1.2 var(--scl-mono);
    color: var(--scl-text-3);
    text-align: center;
}

.scl-lb__logo {
    max-width: 100%;
    max-height: 36px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: filter 200ms, opacity 200ms;
}

.scl-lb--gray .scl-lb__logo { filter: grayscale(1); opacity: .65; }
.scl-lb--gray .scl-lb__tile:hover .scl-lb__logo { filter: none; opacity: 1; }
html[data-theme="dark"] .scl-lb--gray .scl-lb__logo { filter: grayscale(1) brightness(0) invert(1); opacity: .7; }
html[data-theme="dark"] .scl-lb--gray .scl-lb__tile:hover .scl-lb__logo { opacity: 1; }

/* Marquee */
.scl-lb--marquee {
    padding: clamp(48px, 6vw, 80px) 0;
    overflow: hidden;
}

.scl-lb--marquee .scl-lb__lead { margin-bottom: 24px; padding: 0 var(--scl-gutter); }

.scl-lb__marquee {
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.scl-lb__track {
    display: flex;
    width: max-content;
    animation: scl-lb-marquee var(--scl-lb-dur, 40s) linear infinite;
}

.scl-lb__marquee:hover .scl-lb__track,
.scl-lb__marquee:focus-within .scl-lb__track { animation-play-state: paused; }

.scl-lb__set {
    display: flex;
    gap: 12px;
    padding-right: 12px;
}

.scl-lb__pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 20px 0 12px;
    border-radius: 16px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-lb__pill-logo {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    object-fit: contain;
}

.scl-lb__pill-logo--ph { background: repeating-linear-gradient(135deg, var(--scl-ph-a) 0 4px, var(--scl-ph-b) 4px 8px); }

.scl-lb__pill-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--scl-text-body);
    white-space: nowrap;
}

.scl-lb--gray .scl-lb__pill-logo { filter: grayscale(1); }
.scl-lb--gray .scl-lb__pill:hover .scl-lb__pill-logo { filter: none; }

@keyframes scl-lb-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .scl-lb__marquee { -webkit-mask-image: none; mask-image: none; }
    .scl-lb__track { width: auto; animation: none; justify-content: center; padding: 0 var(--scl-gutter); }
    .scl-lb__set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
    .scl-lb__set[aria-hidden="true"],
    .scl-lb__dup { display: none; }
}

/* ---- 50-scl_media_showcase.css ---- */
/* media_showcase — heading + live stat card, then a large (aurora) panel with an image/video */
.scl-media-showcase {
    --scl-ms-panel: linear-gradient(160deg, #F7F2FD 0%, #F4F1F6 55%, #EEF4FD 100%);
}

html[data-theme="dark"] .scl-media-showcase {
    --scl-ms-panel: var(--scl-tint-panel);
}

.scl-media-showcase__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.scl-media-showcase__heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 680px;
}

.scl .scl-media-showcase__title {
    font-size: clamp(28px, 3.8vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-media-showcase__text {
    font-size: 17px;
    line-height: 1.6;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

.scl-media-showcase__stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 16px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-media-showcase__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--scl-success-dot);
    box-shadow: 0 0 0 4px var(--scl-success-bg);
}

.scl-media-showcase__stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.scl-media-showcase__stat-label { font-size: 12px; color: var(--scl-text-2); }

.scl-media-showcase__stat-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--scl-text);
}

/* Panel */
.scl-media-showcase__figure { margin: 0; }

.scl-media-showcase__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 28px;
}

.scl-media-showcase--tint .scl-media-showcase__panel {
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 32px);
    background: var(--scl-ms-panel);
}

.scl-media-showcase__blobs {
    position: absolute;
    inset: -30% -10% auto;
    height: 70%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 25% 50%, rgba(255, 90, 208, .14), transparent),
        radial-gradient(closest-side at 55% 50%, rgba(150, 90, 255, .16), transparent),
        radial-gradient(closest-side at 85% 50%, rgba(58, 168, 255, .14), transparent);
    filter: blur(30px);
}

html[data-theme="dark"] .scl-media-showcase__blobs { opacity: .8; }

.scl-media-showcase--tint .scl-media-showcase__media:not(.scl-ph) {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(80vh, 720px);
    border-radius: 18px;
}

.scl-media-showcase--tint .scl-media-showcase__media.scl-ph {
    min-height: clamp(220px, 34vw, 376px);
    border-radius: 18px;
    border: 1px dashed var(--scl-brand-tint-border);
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--scl-surface) 60%, transparent) 0 8px, transparent 8px 16px);
}

.scl-media-showcase--plain .scl-media-showcase__panel {
    background: var(--scl-surface-2);
    border: 1px solid var(--scl-border);
}

.scl-media-showcase--plain .scl-media-showcase__media:not(.scl-ph) {
    width: 100%;
    height: auto;
}

.scl-media-showcase--plain .scl-media-showcase__media.scl-ph {
    min-height: clamp(240px, 34vw, 440px);
}

.scl-media-showcase__media.scl-ph {
    height: auto;
    padding: 24px;
    text-align: center;
}

.scl-media-showcase__caption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--scl-text-3);
    text-align: center;
}

/* ---- 50-scl_module_price_list.css ---- */
/* module_price_list — grouped module rows with price + "Probeer" pill */
.scl-modprice--attach-top,
.scl-modprice--attach-both { padding-top: 0; }
.scl-modprice--attach-bottom,
.scl-modprice--attach-both { padding-bottom: 16px; }

.scl-modprice__head {
    gap: 12px;
    margin-bottom: 24px;
}

.scl-modprice__groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scl-modprice__group {
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
}

.scl-modprice__group-name {
    padding: 14px 20px;
    background: var(--scl-bg);
    border-bottom: 1px solid var(--scl-border-subtle);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl-modprice__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl-modprice__row:last-child { border-bottom: 0; }

.scl-modprice__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand);
}

.scl-modprice__icon .scl-ico { font-size: 24px; }

.scl-modprice__text {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scl-modprice__name {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}

.scl-modprice__desc {
    font-size: 14px;
    line-height: 1.45;
    color: var(--scl-text-2);
}

.scl-modprice__end {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.scl-modprice__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.scl-modprice__amount {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scl-modprice__sub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--scl-text-3);
    white-space: nowrap;
}

.scl .scl-modprice__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 150ms, border-color 150ms, color 150ms;
}

.scl .scl-modprice__btn:hover {
    background: var(--scl-brand-soft);
    border-color: var(--scl-brand-light);
    color: var(--scl-brand-ink);
}

@media (max-width: 560px) {
    .scl-modprice__row { padding: 16px; }
    .scl-modprice__end {
        flex: 1 1 100%;
        justify-content: space-between;
        margin-left: 0;
    }
    .scl-modprice__icon ~ .scl-modprice__end { padding-left: 60px; }
    .scl-modprice__price { align-items: flex-start; text-align: left; }
}

/* ---- 50-scl_newsletter_banner.css ---- */
/* ==========================================================================
   newsletter_banner — tinted panel with aurora glow, title left,
   single-row Sparkle Forms sign-up (pill input + dark pill button) right
   ========================================================================== */
.scl.scl-news { padding-top: 0; }

.scl-news__panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: clamp(22px, 3vw, 36px);
    border-radius: 28px;
    background: var(--scl-brand-tint);
    border: 1px solid var(--scl-brand-tint-border);
}

.scl-news__glow {
    position: absolute;
    right: -120px;
    top: -120px;
    z-index: -1;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: conic-gradient(#ff5ad0, #cf5aff, #7b7bff, #3aa8ff, #ff5ad0);
    filter: blur(70px);
    opacity: .3;
    pointer-events: none;
}

html[data-theme="dark"] .scl-news__glow { opacity: .22; }

.scl-news__intro {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scl .scl-news__title {
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 700;
    text-wrap: balance;
}

.scl-news__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--scl-text-nav);
}

.scl-news__side {
    flex: 1 1 360px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scl-news__note {
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--scl-text-3);
}

/* --------------------------------------------------------------------------
   Sparkle Forms output as one row: [ e-mail pill ][ Aanmelden ]
   -------------------------------------------------------------------------- */
.scl-news [data-sf-themed] {
    --sf-label: var(--scl-text);
    --sf-input-bg: var(--scl-surface);
    --sf-input-border: var(--scl-border-2);
    --sf-input-text: var(--scl-text);
    --sf-accent: var(--scl-brand);
    --sf-btn-bg: var(--scl-dark);
    --sf-btn-text: var(--scl-on-dark);
    --sf-btn-radius: 999px;
}

.scl-news [data-sf-themed] form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.scl-news [data-sf-themed] form > * { flex: 1 1 100%; }

.scl-news [data-sf-themed] .sf-form-grid {
    flex: 1 1 200px;
    min-width: 0;
    gap: 8px !important;
}

/* Labels stay available to screen readers only */
.scl-news [data-sf-themed] .sf-label,
.scl-news [data-sf-themed] .sf-section {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.scl-news [data-sf-themed] .sf-input {
    display: block;
    width: 100%;
    height: 52px;
    min-height: 52px;
    padding: 0 18px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--scl-r-pill);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
}

.scl-news [data-sf-themed] textarea.sf-input { height: auto; min-height: 96px; padding: 14px 18px; border-radius: 20px; }

.scl-news [data-sf-themed] .sf-input::placeholder { color: var(--scl-text-3); opacity: 1; }

.scl-news [data-sf-themed] .sf-input:focus {
    border-color: var(--scl-brand) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--scl-brand) 16%, transparent);
}

.scl-news [data-sf-themed] .sf-field label:has(> input[type="checkbox"]),
.scl-news [data-sf-themed] .sf-field label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding-left: 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--scl-text-2);
}

.scl-news [data-sf-themed] .sf-field input[type="checkbox"],
.scl-news [data-sf-themed] .sf-field input[type="radio"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--scl-brand);
}

.scl-news [data-sf-themed] form p.text-red-500 {
    margin-top: 6px;
    padding-left: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--scl-danger);
}

.scl-news [data-sf-themed] form > .bg-red-50 {
    order: 3;
    border-radius: 14px;
    border-color: transparent;
    background: var(--scl-danger-bg);
    color: var(--scl-danger);
}

.scl-news [data-sf-themed] form > div:has(> [x-ref="recaptcha"]) { order: 3; padding-top: 4px; }
.scl-news [data-sf-themed] form > div:has(> [x-ref="recaptcha"]:empty) { display: none; }

.scl-news [data-sf-themed] form > div:has(> button[type="submit"]) {
    flex: 0 0 auto;
    padding-top: 0;
}

.scl-news [data-sf-themed] .sf-btn,
.scl-news [data-sf-themed] button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: 52px;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms;
}

.scl-news [data-sf-themed] .sf-btn:hover { --sf-btn-bg: color-mix(in srgb, var(--scl-dark) 86%, var(--scl-brand)); }
.scl-news [data-sf-themed] .sf-btn:disabled { opacity: .6; cursor: progress; }

@media (max-width: 559px) {
    .scl-news [data-sf-themed] form > div:has(> button[type="submit"]) { flex: 1 1 100%; }
    .scl-news [data-sf-themed] .sf-btn,
    .scl-news [data-sf-themed] button[type="submit"] { width: 100%; }
}

/* Success: one inline line instead of the centred block */
.scl-news [data-sf-themed] .sf-success {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    text-align: left;
}

.scl-news [data-sf-themed] .sf-success svg {
    flex: none;
    width: 26px;
    height: 26px;
    margin: 0;
    color: var(--scl-success) !important;
}

.scl-news [data-sf-themed] .sf-success p {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.45;
    color: var(--scl-text) !important;
}

/* ---- 50-scl_partner_tiers.css ---- */
/* partner_tiers — partner levels + recurring commission calculator */
.scl-ptiers__heading {
    gap: 12px;
    max-width: 720px;
    margin-bottom: 28px;
}

.scl-ptiers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* 1.5px ring: plain, gradient (featured) or dark */
.scl-ptiers__tier {
    border-radius: 24px;
    padding: 1.5px;
    background: var(--scl-border);
}

.scl-ptiers__tier--glow { background: linear-gradient(160deg, #ff5ad0, #cf5aff 30%, #7b7bff 60%, #3aa8ff); }
.scl-ptiers__tier--dark { background: var(--scl-text); }

.scl-ptiers__tier-in {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: 23px;
    background: var(--scl-surface);
}

.scl-ptiers__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.scl .scl-ptiers__name {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
}

.scl-ptiers__rate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    line-height: 1.25;
}

.scl-ptiers__pct {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.scl-ptiers__suffix { font-size: 15px; color: var(--scl-text-2); }

.scl-ptiers__perks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--scl-border-subtle);
    font-size: 15px;
    line-height: 1.45;
}

.scl-ptiers__perks li {
    display: flex;
    gap: 10px;
}

.scl-ptiers__perks li::before {
    content: "check";
    flex: none;
    font: 400 20px/1.1 "Material Symbols Rounded";
    font-feature-settings: "liga";
    color: var(--scl-success);
}

/* Calculator */
.scl-ptiers__calc {
    display: grid;
    border-radius: var(--scl-r-2xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
}

.scl-ptiers__inputs,
.scl-ptiers__result {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3vw, 36px);
}

.scl-ptiers__inputs {
    gap: 22px;
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl .scl-ptiers__calc-title {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.scl-ptiers__field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scl-ptiers__field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--scl-text);
}

.scl-ptiers__field-val {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scl .scl-ptiers__range { height: 28px; margin: 0; }

@media (max-width: 767px) {
    /* 44px touch target without changing the visual rhythm */
    .scl .scl-ptiers__range { height: 44px; margin: -8px 0; }
}

.scl-ptiers__result {
    gap: 12px;
    background: var(--scl-bg);
}

.scl-ptiers__level {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    line-height: 1.25;
    color: var(--scl-text-2);
}

.scl-ptiers__total {
    align-self: flex-start;
    font-size: clamp(44px, 5.5vw, 64px);
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.scl-ptiers__per { font-size: 15px; line-height: 1.4; color: var(--scl-text-2); }

.scl-ptiers__fine {
    margin-top: auto;
    font-size: 13px;
    line-height: 1.3;
    color: var(--scl-text-3);
}

@media (min-width: 768px) {
    .scl-ptiers__calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .scl-ptiers__inputs { border-bottom: 0; border-right: 1px solid var(--scl-border-subtle); }
}

/* ---- 50-scl_pricing_plans.css ---- */
/* pricing_plans — three plan cards with monthly/yearly prices */
.scl-pricing--attach-top,
.scl-pricing--attach-both { padding-top: 0; }
.scl-pricing--attach-bottom,
.scl-pricing--attach-both { padding-bottom: 16px; }

.scl-pricing__head {
    gap: 12px;
    margin-bottom: 28px;
}

.scl .scl-pricing__head .scl-h2 {
    font-size: clamp(28px, 3.8vw, 44px);
    line-height: 1.08;
}

/* Optional billing switch (same look as the pricing hero) */
.scl-pricing__switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
}

.scl-pricing__switch--left { justify-content: flex-start; }

.scl-pricing__seg {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: var(--scl-shadow-sm);
}

.scl-pricing__seg-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: var(--scl-r-pill);
    background: var(--scl-dark);
    transition: transform 200ms var(--scl-ease);
}

.scl-pricing__seg-thumb.is-right { transform: translateX(100%); }

.scl .scl-pricing__seg-btn {
    position: relative;
    width: 128px;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--scl-text);
    transition: color 200ms;
}

.scl .scl-pricing__seg-btn.is-active { color: var(--scl-on-dark); }

.scl-pricing__save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-success-bg);
    color: var(--scl-success);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.scl-pricing__save .scl-ico { font-size: 18px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

/* Cards */
.scl-pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px;
    align-items: stretch;
}

/* Four plans (Free / Starter / Pro / Business): one row on desktop, 2x2 on tablet. */
.scl-pricing__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .scl-pricing__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .scl-pricing__grid--4 { grid-template-columns: 1fr; } }
.scl-pricing__grid--4 .scl-pricing__amount { font-size: clamp(34px, 2.9vw, 44px); }
.scl-pricing__grid--4 .scl-pricing__unit { font-size: 14px; }

/* Line the cards up row by row (name, description, price, buttons, features), so buttons and feature lists
   start at the same height whatever the text length. */
@supports (grid-template-rows: subgrid) {
    .scl-pricing__grid--4 { row-gap: 12px; }
    .scl-pricing__grid--4 .scl-pricing__card {
        display: grid;
        grid-row: span 5;
        grid-template-rows: subgrid;
        align-content: start;
        row-gap: 18px;
    }
    .scl-pricing__grid--4 .scl-pricing__actions { align-self: start; }
}

.scl-pricing__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: clamp(24px, 2.6vw, 32px);
    border-radius: var(--scl-r-2xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    color: var(--scl-text);
    overflow: hidden;
}

.scl-pricing__card > :not(.scl-pricing__glow) { position: relative; }

.scl-pricing__card.is-highlighted {
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--scl-brand-tint), var(--scl-brand-tint)) padding-box,
        linear-gradient(160deg, #ff5ad0, #cf5aff 30%, #7b7bff 60%, #3aa8ff) border-box;
    box-shadow: 0 40px 80px -36px rgba(109, 53, 217, .55);
}

.scl-pricing__glow {
    position: absolute;
    top: -140px;
    right: -140px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: conic-gradient(#ff5ad0, #cf5aff, #7b7bff, #3aa8ff, #22ccff, #ff5ad0);
    filter: blur(70px);
    opacity: .32;
    pointer-events: none;
}

@media (max-width: 999px) {
    .scl-pricing__card.is-highlighted { order: -1; }
}

.scl-pricing__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.scl .scl-pricing__name {
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.scl-pricing__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    border-radius: var(--scl-r-pill);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.scl-pricing__badge--grad {
    padding: 5px 12px;
    background: linear-gradient(90deg, #C2389E, #6D35D9 55%, #2F72E0);
    color: #FFFFFF;
    letter-spacing: .05em;
}

.scl-pricing__badge--soft {
    align-self: flex-start;
    padding: 4px 10px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
}

.scl-pricing__desc {
    font-size: 15px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

.scl-pricing__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scl-pricing__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
}

.scl-pricing__unit {
    font-size: 16px;
    line-height: 1.4;
    color: var(--scl-text-2);
}

.scl-pricing__amount {
    font-size: clamp(44px, 4.6vw, 56px);
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scl-pricing__amount--text {
    font-size: clamp(36px, 3.6vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.04em;
    white-space: normal;
}

.scl-pricing__note {
    min-height: 21px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

.scl-pricing__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scl .scl-pricing__btn { height: 54px; }
.scl .scl-pricing__btn.scl-btn--brand { font-weight: 600; }
.scl .scl-pricing__btn.scl-btn--secondary { background: transparent; }
.scl .scl-pricing__btn.scl-btn--secondary:hover { background: var(--scl-surface-3); }
.scl .scl-pricing__card.is-highlighted .scl-pricing__btn.scl-btn--secondary { background: var(--scl-surface); }
.scl .scl-pricing__card.is-highlighted .scl-pricing__btn.scl-btn--secondary:hover { background: var(--scl-surface-3); }
.scl .scl-pricing__btn + .scl-pricing__btn--2 { height: 50px; font-size: 15px; }

.scl .scl-pricing__small {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--scl-brand);
}

.scl .scl-pricing__small:hover { color: var(--scl-brand-h); }

.scl-pricing__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--scl-border-subtle);
    font-size: 15px;
    line-height: 1.45;
}

.scl-pricing__card.is-highlighted .scl-pricing__features { border-top-color: var(--scl-border); }

.scl-pricing__features li {
    display: flex;
    gap: 10px;
}

.scl-pricing__features .scl-ico {
    font-size: 20px;
    line-height: 1.1;
    color: var(--scl-success);
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.scl-pricing__features--brand .scl-ico { color: var(--scl-brand); }

.scl-pricing__footnote {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

/* Compact (module page price block) */
.scl-pricing--compact .scl-pricing__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

.scl-pricing--compact .scl-pricing__card {
    gap: 14px;
    padding: 28px;
    border-radius: var(--scl-r-xl);
}

.scl-pricing--compact .scl-pricing__card.is-highlighted {
    background:
        linear-gradient(var(--scl-surface), var(--scl-surface)) padding-box,
        linear-gradient(160deg, #ff5ad0, #cf5aff 30%, #7b7bff 60%, #3aa8ff) border-box;
    box-shadow: none;
}

.scl .scl-pricing--compact .scl-pricing__name { font-size: 22px; }
.scl-pricing--compact .scl-pricing__price { gap: 6px; }
.scl-pricing--compact .scl-pricing__amount { font-size: 44px; letter-spacing: -0.04em; }
.scl-pricing--compact .scl-pricing__amount--text { font-size: 36px; line-height: 1.2; }
.scl-pricing--compact .scl-pricing__note { min-height: 0; }
.scl-pricing--compact .scl-pricing__actions { margin-top: auto; }
.scl-pricing--compact .scl-pricing__features { padding-top: 14px; }

/* ---- 50-scl_savings_calculator.css ---- */
/* savings_calculator — separate tools vs Sparkle Suite per year */
.scl-savings { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 112px); }

.scl-savings__head {
    gap: 14px;
    max-width: 720px;
    margin-bottom: clamp(28px, 4vw, 40px);
}

.scl .scl-savings__head .scl-h2 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
}

.scl-savings__card {
    display: grid;
    border-radius: var(--scl-r-2xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 1px 2px rgba(27, 22, 38, .04), 0 20px 50px -30px rgba(27, 22, 38, .2);
    overflow: hidden;
}

@media (min-width: 900px) {
    .scl-savings__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.scl-savings__inputs,
.scl-savings__result {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3vw, 36px);
}

.scl-savings__inputs {
    gap: 24px;
    border-bottom: 1px solid var(--scl-border-subtle);
}

@media (min-width: 900px) {
    .scl-savings__inputs { border-bottom: 0; border-right: 1px solid var(--scl-border-subtle); }
}

.scl-savings__result {
    gap: 22px;
    background: var(--scl-bg);
}

.scl-savings__users {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scl-savings__users-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--scl-text);
}

.scl-savings__users-val {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.scl-savings__range { height: 28px; margin: 0; }

.scl-savings__minmax {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    line-height: 1.25;
    color: var(--scl-text-3);
}

.scl-savings__tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scl-savings__label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.scl-savings__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scl .scl-savings__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px 0 10px;
    border-radius: var(--scl-r-pill);
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    transition: background 150ms, border-color 150ms, color 150ms;
}

.scl .scl-savings__chip:hover { border-color: var(--scl-text-3); }

.scl .scl-savings__chip.is-on {
    background: var(--scl-brand-soft);
    border-color: var(--scl-brand-light);
    color: var(--scl-brand-ink);
}

.scl-savings__chip .scl-ico {
    font-size: 18px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.scl-savings__chip-price {
    font-weight: 500;
    opacity: .75;
    white-space: nowrap;
}

.scl-savings__fine {
    font-size: 13px;
    line-height: 1.5;
    color: var(--scl-text-3);
}

.scl-savings__total {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scl-savings__lead {
    font-size: 15px;
    line-height: 1.3;
    color: var(--scl-text-2);
}

.scl-savings__amount {
    font-size: clamp(44px, 5.5vw, 64px);
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scl-savings__bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scl-savings__bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scl-savings__bar-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.scl-savings__bar-label > span {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scl-savings__track {
    height: 36px;
    border-radius: 10px;
    background: var(--scl-border-subtle);
    overflow: hidden;
}

.scl-savings__fill {
    height: 100%;
    transition: width 400ms var(--scl-ease);
}

.scl-savings__fill--segs {
    display: flex;
    gap: 2px;
}

.scl-savings__fill--segs > span {
    flex-basis: 0;
    min-width: 0;
    transition: flex-grow 400ms var(--scl-ease);
}

.scl-savings__fill--suite {
    border-radius: 10px;
    background: var(--scl-grad-bar);
}

.scl-savings__actions {
    gap: 10px;
    margin-top: auto;
}

.scl .scl-savings__actions .scl-btn { height: 52px; padding: 0 24px; }
.scl .scl-savings__actions .scl-btn--secondary { padding: 0 22px; }

.scl-savings__fine--tight { line-height: 1.3; }

/* ---- 50-scl_solution_steps.css ---- */
/* solution_steps — sticky intro + module list on the left, numbered step cards on the right */
.scl-solsteps__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(28px, 5vw, 64px);
}

.scl-solsteps__aside {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (min-width: 900px) {
    .scl-solsteps__aside {
        position: sticky;
        top: calc(var(--scl-header-offset) + 14px);
    }
}

.scl-solsteps__heading { gap: 14px; }
.scl .scl-solsteps__heading .scl-h2 { font-size: clamp(28px, 3.6vw, 42px); }

.scl-solsteps__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-solsteps__label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-text-3);
}

.scl-solsteps__mods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scl .scl-solsteps__mod {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--scl-text);
    text-decoration: none;
}

.scl a.scl-solsteps__mod:hover { color: var(--scl-brand); }

.scl-solsteps__mod-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--scl-brand-soft);
    color: var(--scl-brand);
}

.scl-solsteps__mod-ico .scl-ico { font-size: 20px; }
.scl-solsteps__mod-name { min-width: 0; }

.scl-solsteps__mod-price {
    margin-left: auto;
    padding-left: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--scl-text-2);
    white-space: nowrap;
}

.scl .scl-solsteps__suite {
    padding-top: 10px;
    border-top: 1px solid var(--scl-border-subtle);
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

.scl-solsteps__suite :where(a) {
    color: var(--scl-brand);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Steps */
.scl-solsteps__steps {
    flex: 1.4 1 460px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scl-solsteps__step {
    display: flex;
    gap: 18px;
    padding: clamp(20px, 2.6vw, 28px);
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-solsteps__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--scl-dark);
    color: var(--scl-on-dark);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.scl-solsteps__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scl .scl-solsteps__title {
    font-size: clamp(19px, 2vw, 22px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.scl-solsteps__text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--scl-text-nav);
    text-wrap: pretty;
}

.scl .scl-solsteps__chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 12px 6px 8px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-brand-soft);
    color: var(--scl-brand-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: background 150ms;
}

.scl-solsteps__chip .scl-ico { font-size: 18px; }
.scl a.scl-solsteps__chip:hover { background: var(--scl-brand-tint-border); color: var(--scl-brand-ink); }

@media (max-width: 559px) {
    .scl-solsteps__step { gap: 14px; }
    .scl-solsteps__num { width: 36px; height: 36px; font-size: 15px; }
}

/* ---- 50-scl_stats_band.css ---- */
/* stats_band — stat cards with gradient numbers + optional mini case */
.scl-stats--bare { padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(32px, 4vw, 48px); }

.scl-stats__heading { gap: 12px; max-width: 720px; margin-bottom: 32px; }
.scl .scl-stats__heading .scl-h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.08; }

.scl-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
}

@media (min-width: 480px) and (max-width: 767px) {
    .scl-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.scl-stats__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 24px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-stats__value {
    font-size: clamp(36px, 4vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 700;
    color: var(--scl-text);
}

.scl-stats__label { font-size: 16px; line-height: 1.5; color: var(--scl-text-2); }
.scl-stats--bare .scl-stats__card { padding: 22px; }
.scl-stats--bare .scl-stats__label { font-size: 15px; }

/* Mini case */
.scl-stats__case {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 24px;
    background: var(--scl-surface);
    color: var(--scl-text);
}

.scl-bg-default .scl-stats__case { border: 1px solid var(--scl-border); }

.scl-stats__case-stat { flex: none; display: flex; flex-direction: column; gap: 2px; }

.scl-stats__case-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-text-2);
}

.scl-stats__case-num {
    font-size: clamp(44px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.scl-stats__case-num-label { font-size: 15px; font-weight: 600; line-height: 1.4; }

.scl-stats__quote {
    flex: 1 1 320px;
    min-width: 0;
    font-size: clamp(17px, 1.7vw, 20px);
    line-height: 1.5;
    color: var(--scl-text);
    text-wrap: pretty;
}

.scl-stats__author { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--scl-text-2); }
.scl-stats__case-link { min-height: 44px; }

/* ---- 50-scl_steps.css ---- */
/* steps — numbered step cards + one featured quote or a row of quote cards */
.scl-steps__heading {
    gap: 12px;
    max-width: 720px;
    margin-bottom: 28px;
}

.scl-steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

.scl-steps__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: 20px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-steps__num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--scl-brand);
    color: var(--scl-on-brand);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.scl .scl-steps__title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.scl-steps__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

/* One quote: wide tinted card, link on the right */
.scl-steps__feature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--scl-r-xl);
    background: var(--scl-brand-tint);
    border: 1px solid var(--scl-brand-tint-border);
}

.scl-steps__feature-fig {
    flex: 1 1 360px;
    min-width: 0;
}

.scl-steps__feature-fig blockquote {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.5;
    color: var(--scl-text);
    text-wrap: pretty;
}

.scl-steps__feature .scl-steps__cite { margin-top: 10px; }

.scl-steps__link { min-height: 44px; }

/* Two or more quotes: cards side by side */
.scl-steps__quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 12px;
    margin-top: 16px;
}

.scl-steps__quote {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    border-radius: 20px;
    background: var(--scl-brand-tint);
    border: 1px solid var(--scl-brand-tint-border);
}

.scl-steps__quote blockquote {
    font-size: 17px;
    line-height: 1.55;
    color: var(--scl-text);
    text-wrap: pretty;
}

.scl-steps__quote .scl-steps__cite { margin-top: 12px; }
.scl-steps__quote .scl-steps__link { margin-top: 4px; }

.scl-steps__cite {
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

.scl-steps__cite b { color: var(--scl-text); font-weight: 700; }

/* On a tinted section the quote cards turn white so they stay visible */
.scl-steps.scl-bg-tint .scl-steps__feature,
.scl-steps.scl-bg-tint .scl-steps__quote { background: var(--scl-surface); }

/* ---- 50-scl_suite_calculator.css ---- */
/* suite_calculator — tick modules, compare with the Suite price */
.scl-suitecalc--attach-top,
.scl-suitecalc--attach-both { padding-top: 0; }
.scl-suitecalc--attach-bottom,
.scl-suitecalc--attach-both { padding-bottom: 16px; }

.scl-suitecalc__head {
    gap: 12px;
    max-width: 720px;
    margin-bottom: 28px;
}

.scl-suitecalc__wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px;
}

.scl-suitecalc__list {
    flex: 1 1 438px;
    min-width: 0;
    padding: 8px;
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl .scl-suitecalc__row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 8px 12px;
    border-radius: 14px;
    background: transparent;
    text-align: left;
    color: var(--scl-text);
    transition: background 150ms;
}

.scl .scl-suitecalc__row:hover { background: var(--scl-surface-3); }
.scl .scl-suitecalc__row.is-on { background: var(--scl-brand-tint); }

.scl-suitecalc__box {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1.5px solid var(--scl-border-2);
    background: var(--scl-surface);
    color: var(--scl-on-brand);
    transition: background 150ms, border-color 150ms;
}

.scl-suitecalc__box .scl-ico {
    font-size: 18px;
    opacity: 0;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    transition: opacity 150ms;
}

.scl-suitecalc__row.is-on .scl-suitecalc__box {
    border-color: var(--scl-brand);
    background: var(--scl-brand);
}

.scl-suitecalc__row.is-on .scl-suitecalc__box .scl-ico { opacity: 1; }

.scl-suitecalc__name {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.scl-suitecalc__price {
    font-size: 15px;
    color: var(--scl-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scl-suitecalc__panel {
    position: relative;
    flex: 1 1 424px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--scl-r-xl);
    background: var(--scl-brand-tint);
    color: var(--scl-text);
    overflow: hidden;
}

.scl-suitecalc__panel > :not(.scl-suitecalc__glow) { position: relative; }

.scl-suitecalc__glow {
    position: absolute;
    left: -120px;
    bottom: -160px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: conic-gradient(#ff5ad0, #cf5aff, #7b7bff, #3aa8ff, #22ccff, #ff5ad0);
    filter: blur(80px);
    opacity: .25;
    pointer-events: none;
}

.scl-suitecalc__sums {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scl-suitecalc__sum {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.scl-suitecalc__sum span {
    font-size: 15px;
    line-height: 1.3;
    color: var(--scl-text-2);
}

.scl-suitecalc__sum b {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scl-suitecalc__track {
    height: 10px;
    border-radius: 5px;
    background: var(--scl-border);
    overflow: hidden;
}

.scl-suitecalc__fill {
    height: 100%;
    border-radius: 5px;
    background: var(--scl-text-2);
    transition: width 400ms var(--scl-ease);
}

.scl-suitecalc__fill--suite { background: var(--scl-grad-bar); }

.scl-suitecalc__period {
    font-size: 13px;
    line-height: 1.3;
    color: var(--scl-text-3);
}

.scl-suitecalc__advice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border-radius: var(--scl-r-lg);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-suitecalc__advice-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scl-brand);
}

.scl-suitecalc__advice-title {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 700;
}

.scl-suitecalc__advice-hint {
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

.scl .scl-suitecalc__cta {
    height: 54px;
    margin-top: auto;
}

.scl-suitecalc__fine {
    font-size: 12px;
    line-height: 1.4;
    color: var(--scl-text-3);
}

/* ---- 50-scl_team_grid.css ---- */
/* team_grid — portrait cards (4:5) with name and role */
.scl-team__heading {
    gap: 10px;
    max-width: 640px;
    margin-bottom: 24px;
}

.scl .scl-team__heading .scl-h2 { font-size: clamp(28px, 3.6vw, 42px); }

.scl-team__intro {
    font-size: 17px;
    line-height: 1.6;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

.scl-team__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 768px) {
    .scl-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .scl-team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .scl-team__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.scl .scl-team__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--scl-text);
    text-decoration: none;
}

.scl-team__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 22px;
    background: var(--scl-surface-2);
}

.scl-team__photo > img,
.scl-team__photo > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--scl-ease);
}

.scl-team__photo > .scl-ph { min-height: 0; font-weight: 500; }

.scl-team__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
}

.scl-team__name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.scl-team__name .scl-ico {
    font-size: 18px;
    color: var(--scl-brand);
    transition: transform 150ms;
}

.scl-team__role {
    font-size: 14px;
    line-height: 1.4;
    color: var(--scl-text-2);
}

.scl a.scl-team__card--link:hover { color: var(--scl-text); }
.scl-team__card--link:hover .scl-team__photo > img { transform: scale(1.03); }
.scl-team__card--link:hover .scl-team__name .scl-ico { transform: translate(2px, -2px); }

/* ---- 50-scl_text_block.css ---- */
/* text_block — optional heading + rich-text body + optional buttons */
.scl-tb__heading { max-width: none; }
.scl-tb__heading .scl-lead { max-width: 760px; }
.scl-tb--center .scl-tb__heading .scl-lead { margin-inline: auto; }

.scl-tb__heading + .scl-tb__body { margin-top: clamp(24px, 3vw, 36px); }
.scl-tb__body { font-size: 17px; }
.scl-tb__body > :first-child { margin-top: 0; }

.scl-tb__actions { margin-top: clamp(28px, 3vw, 36px); }
.scl-tb--center .scl-tb__actions { justify-content: center; }
.scl-tb--center .scl-note { text-align: center; }
.scl-tb .scl-note { margin-top: 12px; }

@media (max-width: 560px) {
    .scl-tb__body { font-size: 16px; }
}

/* ---- 50-scl_trial_signup.css ---- */
/* ==========================================================================
   trial_signup — full sign-up page with its own slim top bar:
   segmented trial/demo tabs + form card left, tinted social-proof panel right
   ========================================================================== */
.scl.scl-trial {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0;
    background: var(--scl-bg);
}

.scl-trial__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px clamp(20px, 4vw, 40px);
}

/* Under the site header (own bar off): clear the fixed header and let the footer follow the content */
.scl.scl-trial--no-bar { min-height: 0; }
/* The admin bar is in the document flow, so it already pushes this down: leave it out of the offset */
.scl-trial--no-bar .scl-trial__main { padding-top: calc(var(--scl-header-offset) - var(--scl-admin-bar-h) + clamp(8px, 2vw, 24px)); }

.scl-trial__logo { display: flex; flex: none; }
.scl-trial__logo img { height: 28px; width: auto; }

.scl-trial__login {
    font-size: 14px;
    line-height: 1.4;
    color: var(--scl-text-2);
    text-align: right;
}

.scl .scl-trial__login a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -8px 0;
    font-weight: 700;
    text-decoration: none;
}

.scl-trial__main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(8px, 2vw, 24px) clamp(16px, 4vw, 40px) 48px;
    display: grid;
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    align-items: start;
    gap: clamp(24px, 4vw, 48px);
}

@media (min-width: 1000px) {
    .scl-trial__main { grid-template-columns: repeat(2, minmax(0, 560px)); }
    .scl-trial__main--single { grid-template-columns: minmax(0, 560px); }
}

.scl-trial__col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Segmented tabs with a sliding dark pill */
.scl-trial__tabs {
    position: relative;
    display: flex;
    padding: 4px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-trial__indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: var(--scl-r-pill);
    background: var(--scl-dark);
    transition: transform 250ms var(--scl-ease);
}

.scl-trial__tabs.is-demo .scl-trial__indicator { transform: translateX(100%); }

.scl .scl-trial__tab {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 12px;
    border-radius: var(--scl-r-pill);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--scl-text);
    transition: color 200ms;
}

.scl .scl-trial__tab.is-active { color: var(--scl-on-dark); }

@media (max-width: 420px) {
    .scl .scl-trial__tab { padding: 0 6px; font-size: 14px; letter-spacing: -0.01em; }
}

/* Card */
.scl-trial__card {
    border-radius: 28px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    box-shadow: 0 1px 2px rgba(27, 22, 38, .04), 0 24px 60px -36px rgba(27, 22, 38, .3);
    padding: clamp(22px, 4vw, 40px);
}

html[data-theme="dark"] .scl-trial__card { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 60px -36px rgba(0, 0, 0, .8); }

.scl-trial__pane {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.scl-trial__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scl .scl-trial__title {
    font-size: clamp(28px, 3.6vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 700;
    color: var(--scl-text);
    text-wrap: balance;
}

.scl-trial__subtitle {
    font-size: 16px;
    line-height: 1.55;
    color: var(--scl-text-2);
}

.scl-trial__sso {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.scl .scl-trial__sso-btn {
    flex: 1 1 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid var(--scl-border-2);
    background: var(--scl-surface);
    font-size: 15px;
    font-weight: 600;
    color: var(--scl-text);
    text-align: center;
    text-decoration: none;
    transition: background 150ms;
}

.scl .scl-trial__sso-btn:hover { background: var(--scl-surface-3); color: var(--scl-text); }

.scl-trial__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--scl-text-3);
}

.scl-trial__divider::before,
.scl-trial__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--scl-border);
}

.scl .scl-trial__terms {
    font-size: 13px;
    line-height: 1.5;
    color: var(--scl-text-2);
    text-align: center;
}

.scl .scl-trial__terms a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.scl-trial__note {
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-2);
    text-align: center;
}

/* Social-proof panel */
.scl-trial__aside {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    padding: clamp(24px, 3.6vw, 40px);
    border-radius: 28px;
    background: var(--scl-brand-tint);
    color: var(--scl-text);
}

.scl-trial__glow {
    position: absolute;
    right: -160px;
    top: -180px;
    z-index: -1;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: conic-gradient(#ff5ad0, #cf5aff, #7b7bff, #3aa8ff, #22ccff, #ff5ad0);
    filter: blur(90px);
    opacity: .28;
    pointer-events: none;
}

html[data-theme="dark"] .scl-trial__glow { opacity: .2; }

.scl-trial__rating {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scl-trial__stars {
    display: flex;
    gap: 2px;
    color: var(--scl-star);
}

.scl-trial__stars .scl-ico {
    font-size: 22px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.scl-trial__stars .scl-ico.is-empty {
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    opacity: .55;
}

.scl-trial__rating-text {
    font-size: 14px;
    line-height: 1.4;
    color: var(--scl-text-2);
}

.scl .scl-trial__quote {
    margin: 0;
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: var(--scl-text);
    text-wrap: pretty;
}

.scl-trial__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scl-trial__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--scl-surface-2);
}

.scl-trial__avatar > img { width: 100%; height: 100%; object-fit: cover; }
.scl-trial__avatar > .scl-ph { min-height: 0; font-size: 9px; }

.scl-trial__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.scl-trial__who b { font-size: 15px; font-weight: 700; line-height: 1.4; }
.scl-trial__who span { font-size: 14px; line-height: 1.4; color: var(--scl-text-2); }

.scl-trial__checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--scl-border);
}

.scl-trial__checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.45;
}

.scl-trial__checks .scl-ico {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 400;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    color: var(--scl-brand);
}

.scl-trial__team {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
}

.scl-trial__faces { display: flex; flex: none; }

.scl-trial__face {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--scl-surface);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.scl-trial__face + .scl-trial__face { margin-left: -10px; }
.scl-trial__face--0 { background: var(--scl-pink-bg); color: var(--scl-pink-ink); }
.scl-trial__face--1 { background: var(--scl-success-bg); color: var(--scl-success); }
.scl-trial__face--2 { background: var(--scl-info-bg); color: var(--scl-info); }
.scl-trial__face--3 { background: var(--scl-brand-soft); color: var(--scl-brand-ink); }

.scl-trial__team-text {
    font-size: 14px;
    line-height: 1.4;
    color: var(--scl-text-body);
}

.scl .scl-trial__footnote {
    font-size: 13px;
    line-height: 1.5;
    color: var(--scl-text-3);
}

.scl .scl-trial__footnote :where(b, strong) { color: var(--scl-text-body); font-weight: 700; }

/* Form tuning (shared Sparkle Forms styling lives in 20-ui.css) */
.scl-trial [data-sf-themed] {
    --scl-form-gap: 18px 12px;
    --scl-form-textarea-h: 130px;
    --scl-form-submit-gap: 18px;
}

.scl-trial [data-sf-themed] .sf-success { padding: clamp(24px, 5vw, 40px) 12px; }

/* Demo tab: Calendly inline booking calendar (full card width; height follows Calendly's page_height messages) */
.scl-trial__calendly {
    position: relative;
    margin-inline: calc(-1 * clamp(22px, 4vw, 40px));
    min-height: 600px;
}

.scl-trial__calendly.is-ready { min-height: 0; }

.scl-trial__calendly-frame {
    position: relative;
    z-index: 1;
    height: 700px;
}

/* Calendly's own page leaves a white strip at the very bottom of the iframe (visible in dark mode) */
/* The frame's height follows Calendly's page_height messages (see the blade); the iframe always fills it, also
   over the tiny boot heights widget.js writes on it */
.scl-trial__calendly-frame iframe { display: block; width: 100%; height: 100% !important; border: 0; clip-path: inset(0 0 3px 0); }

.scl-trial__calendly-wait {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: var(--scl-text-2);
    font-size: 15px;
}

.scl-trial__calendly-wait .scl-ico { font-size: 40px; color: var(--scl-brand); }
.scl-trial__calendly-wait a { color: var(--scl-brand-ink); font-weight: 600; }

/* Self-service sign-up (sparkle-tenant StartSignup): pick trial or free, then account fields */
.scl-signup { display: flex; flex-direction: column; gap: 16px; }


.scl-signup__field { display: flex; flex-direction: column; gap: 6px; }
.scl-signup__label { font-size: 14px; font-weight: 600; color: var(--scl-text); }
.scl-signup__optional { font-weight: 500; color: var(--scl-text-3); }
.scl-signup .scl-input { height: 50px; }
.scl-signup .scl-error a { color: inherit; text-decoration: underline; }

.scl-signup__as { font-size: 14px; color: var(--scl-text-2); }


.scl-signup .scl-btn { height: 54px; }

.scl-signup__note { font-size: 13px; line-height: 1.5; color: var(--scl-text-3); text-align: center; }

.scl-signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- 50-scl_vacancies.css ---- */
/* vacancies — one bordered list of expandable job rows (scl-acc panel animation) */
.scl-vac__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scl-vac__heading {
    gap: 10px;
    max-width: 640px;
}

.scl .scl-vac__heading .scl-h2 { font-size: clamp(28px, 3.6vw, 42px); text-wrap: wrap; }

.scl-vac__intro {
    font-size: 17px;
    line-height: 1.6;
    color: var(--scl-text-2);
    text-wrap: pretty;
}

.scl-vac__list {
    border-radius: var(--scl-r-xl);
    background: var(--scl-surface);
    border: 1px solid var(--scl-border);
    overflow: hidden;
}

/* Rows reuse .scl-acc for the open state, but sit inside one shared card */
.scl .scl-vac__item {
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid var(--scl-border-subtle);
}

.scl .scl-vac__item:last-child { border-bottom: 0; }

.scl .scl-vac__h {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.scl .scl-vac__btn {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-height: 72px;
    padding: 14px 20px;
    text-align: left;
    color: var(--scl-text);
}

.scl-vac__btn:focus-visible { outline-offset: -3px; }
.scl button.scl-vac__btn { cursor: pointer; }

.scl-vac__title {
    flex: 1 1 240px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.scl-vac__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.scl-vac__tag {
    padding: 4px 10px;
    border-radius: var(--scl-r-pill);
    background: var(--scl-surface-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--scl-text);
    white-space: nowrap;
}

.scl-vac__plus {
    font-size: 24px;
    transition: transform 200ms var(--scl-ease);
}

.scl-vac__item.is-open .scl-vac__plus { transform: rotate(45deg); }

.scl-vac__item .scl-acc__panel { transition-duration: 250ms; }

.scl-vac__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 720px;
    padding: 0 20px 20px;
}

.scl .scl-vac__desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--scl-text-nav);
}

.scl .scl-vac__apply {
    height: 46px;
    padding: 0 18px;
}

.scl .scl-vac__foot {
    font-size: 14px;
    line-height: 1.5;
    color: var(--scl-text-2);
}

.scl-vac__foot :where(a) {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 559px) {
    .scl-vac__plus { position: absolute; top: 14px; right: 16px; }
    .scl .scl-vac__btn { position: relative; padding-right: 52px; }
}