/* Serpstash marketing site: product mockups and section helpers layered on the Landkit theme.
   Everything is prefixed ss- so nothing collides with theme.bundle.css. */

:root {
    --ss-primary: #267dff;
    --ss-primary-soft: rgba(38, 125, 255, 0.1);
    --ss-success: #42ba96;
    --ss-success-soft: rgba(66, 186, 150, 0.12);
    --ss-warning: #f5b70a;
    --ss-warning-text: #b8860b;
    --ss-warning-soft: rgba(250, 215, 118, 0.3);
    --ss-danger: #df4759;
    --ss-danger-soft: rgba(223, 71, 89, 0.1);
    --ss-ink: #1b2a4e;
    --ss-muted: #869ab8;
    --ss-line: #e8edf5;
    --ss-surface: #f6f8fc;
}

/* Lets a section's decorations bleed to the screen edge without making the page scroll sideways */
.ss-clip-x { overflow-x: clip; }

/* Soft backgrounds for non-badge elements (Landkit only ships them for badges) */
.ss-soft-primary { background-color: var(--ss-primary-soft) !important; color: var(--ss-primary); }
.ss-soft-success { background-color: var(--ss-success-soft) !important; color: #2e9e7d; }
.ss-soft-warning { background-color: var(--ss-warning-soft) !important; color: var(--ss-warning-text); }
.ss-soft-danger { background-color: var(--ss-danger-soft) !important; color: var(--ss-danger); }
.ss-text-warning { color: var(--ss-warning-text) !important; }

/* ---------- Window frame (browser / app chrome) ---------- */
.ss-frame {
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: 14px;
    box-shadow: 0 30px 60px -24px rgba(27, 42, 78, 0.28), 0 12px 24px -12px rgba(27, 42, 78, 0.08);
    overflow: hidden;
    position: relative;
    text-align: left;
    color: var(--ss-ink);
    font-size: 0.875rem;
}
.ss-frame-bar {
    align-items: center;
    background: var(--ss-surface);
    border-bottom: 1px solid var(--ss-line);
    display: flex;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
}
.ss-frame-bar .ss-dot { border-radius: 50%; height: 9px; width: 9px; background: #d9e2ef; flex-shrink: 0; }
.ss-frame-bar .ss-dot:nth-child(1) { background: #ff6b5f; }
.ss-frame-bar .ss-dot:nth-child(2) { background: #ffc53d; }
.ss-frame-bar .ss-dot:nth-child(3) { background: #36c96b; }
.ss-url {
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: 6px;
    color: var(--ss-muted);
    font-size: 0.6875rem;
    margin-left: 10px;
    overflow: hidden;
    padding: 2px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 260px;
}
.ss-frame-body { padding: 18px; }
@media (min-width: 768px) { .ss-frame-body { padding: 22px; } }

.ss-card {
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: 10px;
    padding: 14px;
}
.ss-label {
    color: var(--ss-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ss-small { font-size: 0.75rem; }
.min-w-0 { min-width: 0; }
.ss-tiny { font-size: 0.6875rem; }
.ss-mono { font-variant-numeric: tabular-nums; }

/* ---------- Score ring ---------- */
.ss-ring { height: 92px; position: relative; width: 92px; flex-shrink: 0; }
.ss-ring svg { height: 100%; transform: rotate(-90deg); width: 100%; }
.ss-ring .ss-ring-track { fill: none; stroke: #edf1f7; stroke-width: 8; }
.ss-ring .ss-ring-value { fill: none; stroke-linecap: round; stroke-width: 8; }
.ss-ring-label {
    align-items: center;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: center;
    line-height: 1;
    position: absolute;
}
.ss-ring-label strong { font-size: 1.75rem; font-weight: 700; }
.ss-ring-label span { color: var(--ss-muted); font-size: 0.6875rem; margin-top: 4px; }
.ss-ring-sm { height: 64px; width: 64px; }
.ss-ring-sm .ss-ring-label strong { font-size: 1.25rem; }

/* ---------- Bars ---------- */
.ss-bar { background: #edf1f7; border-radius: 99px; height: 6px; overflow: hidden; }
.ss-bar > span { border-radius: 99px; display: block; height: 100%; }

/* ---------- Tables ---------- */
.ss-table { border-collapse: collapse; font-size: 0.8125rem; width: 100%; }
.ss-table th {
    border-bottom: 1px solid var(--ss-line);
    color: var(--ss-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0 8px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ss-table td { border-bottom: 1px solid var(--ss-line); padding: 9px 8px; white-space: nowrap; }
.ss-table tr:last-child td { border-bottom: 0; }
.ss-table th:first-child, .ss-table td:first-child { padding-left: 0; }
.ss-table th:last-child, .ss-table td:last-child { padding-right: 0; }
.ss-table .ss-kw { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
    .ss-table { font-size: 0.75rem; }
    .ss-table th, .ss-table td { padding-left: 5px; padding-right: 5px; }
    .ss-table .ss-kw { max-width: 130px; }
}

/* ---------- Pills, chips, avatars ---------- */
.ss-pill {
    align-items: center;
    border-radius: 99px;
    display: inline-flex;
    font-size: 0.6875rem;
    font-weight: 600;
    gap: 3px;
    line-height: 1;
    padding: 4px 8px;
    white-space: nowrap;
}
.ss-chip {
    border: 1px solid var(--ss-line);
    border-radius: 8px;
    color: var(--ss-muted);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 5px 10px;
    white-space: nowrap;
}
.ss-chip.active { background: var(--ss-primary-soft); border-color: transparent; color: var(--ss-primary); }
.ss-favicon {
    align-items: center;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    width: 28px;
}

/* ---------- Fix list rows ---------- */
.ss-fix {
    align-items: center;
    background: #fff;
    border: 1px solid var(--ss-line);
    border-left-width: 3px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    padding: 9px 12px;
}
.ss-fix:last-child { margin-bottom: 0; }
.ss-fix-danger { border-left-color: var(--ss-danger); }
.ss-fix-warning { border-left-color: var(--ss-warning); }
.ss-fix-muted { border-left-color: #c6d3e6; }
.ss-fix-done { background: #f7fcfa; border-left-color: var(--ss-success); }
.ss-fix-title { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-fix-done .ss-fix-title { color: var(--ss-muted); text-decoration: line-through; }
.ss-box {
    align-items: center;
    border: 1.5px solid #c6d3e6;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.625rem;
    height: 16px;
    justify-content: center;
    width: 16px;
}
.ss-fix-done .ss-box { background: var(--ss-success); border-color: var(--ss-success); }
.ss-tag { background: #edf1f7; border-radius: 4px; color: #506690; font-size: 0.625rem; font-weight: 600; padding: 3px 6px; text-transform: uppercase; }

/* Soft brand circle peeking out from behind a mockup's top corner */
.ss-backdrop { position: relative; }
.ss-backdrop::before {
    aspect-ratio: 1;
    background: radial-gradient(circle at 30% 30%, rgba(250, 215, 118, 0.7), rgba(250, 215, 118, 0.2) 70%);
    border-radius: 50%;
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 46%;
    z-index: 0;
}
@media (max-width: 767.98px) { .ss-backdrop::before { right: 0; top: -16px; } }
.ss-backdrop-blue::before { background: radial-gradient(circle at 30% 30%, rgba(38, 125, 255, 0.28), rgba(38, 125, 255, 0.06) 70%); }
.ss-backdrop > * { position: relative; z-index: 1; }

/* ---------- Floating notification toast ---------- */
.ss-toast {
    align-items: center;
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px -16px rgba(27, 42, 78, 0.35);
    display: flex;
    font-size: 0.8125rem;
    gap: 10px;
    max-width: 290px;
    padding: 10px 14px;
    position: absolute;
    text-align: left;
    z-index: 2;
}
.ss-toast .ss-toast-icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    width: 32px;
}
.ss-float { animation: ss-float 6s ease-in-out infinite; }
.ss-float-delay { animation-delay: -3s; }
@keyframes ss-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .ss-float { animation: none; } }
@media (max-width: 767.98px) {
    /* On phones the toasts sit under the mockup instead of over it */
    .ss-toast { margin: 12px auto 0; max-width: 100%; position: static; }
}

/* ---------- Email client ---------- */
.ss-email-head { border-bottom: 1px solid var(--ss-line); padding: 14px 18px; }
.ss-email-from { align-items: center; display: flex; gap: 10px; }
.ss-email-body { padding: 18px; }
.ss-email-subject { font-size: 0.9375rem; font-weight: 700; margin: 10px 0 0; }
.ss-email-cta {
    background: var(--ss-primary);
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 7px 14px;
}

/* Alert email in front, Monday recap overlapping it */
.ss-alerts-alert { position: relative; width: 84%; z-index: 1; }
.ss-alerts-alert .ss-email-body { padding-bottom: 30px; }
.ss-alerts-recap { margin: -18px 0 0 auto; position: relative; transform: rotate(1.2deg); width: 84%; z-index: 2; }
@media (max-width: 767.98px) {
    .ss-alerts-alert, .ss-alerts-recap { transform: none; width: 100%; }
    .ss-alerts-recap { margin-top: 16px; }
}

/* ---------- PDF report pages ---------- */
.ss-pdf-stack { margin: 0 auto; max-width: 400px; position: relative; padding: 0 24px 24px 0; }
.ss-pdf {
    aspect-ratio: 1 / 1.3;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 30px 60px -24px rgba(27, 42, 78, 0.35);
    color: var(--ss-ink);
    font-size: 0.75rem;
    overflow: hidden;
    position: relative;
    text-align: left;
}
.ss-pdf-back {
    inset: 18px 0 0 18px;
    position: absolute;
    transform: rotate(4deg);
    transform-origin: bottom left;
}
@media (max-width: 575.98px) {
    .ss-pdf { aspect-ratio: auto; }
    .ss-pdf-back { transform: rotate(2deg); }
}
.ss-pdf-head { color: #fff; padding: 16px 18px; }
.ss-pdf-logo {
    align-items: center;
    background: rgba(255, 255, 255, 0.18);
    border: 1px dashed rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    display: inline-flex;
    font-size: 0.6875rem;
    font-weight: 700;
    gap: 6px;
    letter-spacing: 0.04em;
    padding: 5px 9px;
    text-transform: uppercase;
}
.ss-pdf-body { padding: 16px 18px; }
.ss-pdf-swatches { display: flex; gap: 6px; }
.ss-pdf-swatches span { border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--ss-line); height: 18px; width: 18px; }

/* ---------- Charts ---------- */
.ss-chart { display: block; height: auto; width: 100%; }
.ss-legend-dot { border-radius: 50%; display: inline-block; height: 8px; width: 8px; }

/* ---------- Section helpers ---------- */
.ss-eyebrow {
    color: var(--ss-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ss-benefits { list-style: none; margin: 0; padding: 0; }
.ss-benefits li { display: flex; gap: 12px; margin-bottom: 14px; }
.ss-benefits li:last-child { margin-bottom: 0; }
.ss-benefits .ss-check {
    align-items: center;
    background: var(--ss-success-soft);
    border-radius: 50%;
    color: #2e9e7d;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    height: 22px;
    justify-content: center;
    margin-top: 2px;
    width: 22px;
}
.ss-step {
    align-items: center;
    background: var(--ss-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 8px var(--ss-primary-soft);
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    height: 44px;
    justify-content: center;
    width: 44px;
}
.ss-persona { height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ss-persona .ss-persona-icon {
    align-items: center;
    border-radius: 12px;
    display: inline-flex;
    font-size: 1.25rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}
/* A small rounded square with a centred icon, for use outside persona cards */
.ss-icon-box {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    font-size: 1rem;
    height: 36px;
    justify-content: center;
    line-height: 1;
    width: 36px;
}
.ss-stat { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.ss-feature-row + .ss-feature-row { margin-top: 6rem; }
@media (max-width: 767.98px) { .ss-feature-row + .ss-feature-row { margin-top: 4rem; } }

/* ---------- Pricing ---------- */
.ss-billing {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 99px;
    display: inline-flex;
    padding: 4px;
}
.ss-billing button {
    background: transparent;
    border: 0;
    border-radius: 99px;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 8px 20px;
}
.ss-billing button.active { background: #fff; color: var(--ss-primary); }
.ss-billing .ss-save { background: #fad776; border-radius: 99px; color: var(--ss-ink); font-size: 0.6875rem; margin-left: 6px; padding: 2px 7px; }
.ss-pricing[data-billing="month"] .ss-when-year,
.ss-pricing[data-billing="year"] .ss-when-month { display: none !important; }
.ss-plan { border: 2px solid transparent; height: 100%; }
.ss-plan-price { min-height: 6.75rem; }
.ss-plan-tagline { min-height: 3em; }
.ss-plan.ss-plan-featured { border-color: var(--ss-primary); }
.ss-plan-ribbon {
    background: var(--ss-primary);
    border-radius: 99px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    left: 50%;
    letter-spacing: 0.04em;
    padding: 4px 14px;
    position: absolute;
    text-transform: uppercase;
    top: -14px;
    transform: translateX(-50%);
    white-space: nowrap;
}
.ss-plan-features { list-style: none; margin: 0; padding: 0; }
.ss-plan-features li { align-items: flex-start; display: flex; gap: 10px; margin-bottom: 12px; }
.ss-plan-features li.ss-off { color: var(--ss-muted); }
.ss-plan-features .fe { flex-shrink: 0; margin-top: 4px; }
.ss-plan-features li .ss-sub { color: var(--ss-muted); display: block; font-size: 0.8125rem; }
.ss-compare { font-size: 0.9375rem; }
.ss-compare th, .ss-compare td { padding: 14px 12px; vertical-align: middle; }
.ss-compare thead th { background: #fff; border-bottom: 2px solid var(--ss-line); position: sticky; top: 0; z-index: 1; }
.ss-compare tbody tr.ss-compare-group th {
    background: var(--ss-surface);
    color: var(--ss-ink);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ss-compare tbody td { border-bottom: 1px solid var(--ss-line); text-align: center; }
.ss-compare tbody th[scope="row"] { border-bottom: 1px solid var(--ss-line); font-weight: 500; }
.ss-compare .ss-row-help { color: var(--ss-muted); display: block; font-size: 0.8125rem; font-weight: 400; }
.ss-yes { color: var(--ss-success); }
.ss-no { color: #c6d3e6; }