/* ═══════════════════════════════════════════════════════════════
   StackBuddy landing V2 — vibrant neo-brutalist "sticker/poster" style
   Adapted from the Online Writing Club hp3 design language:
   magenta + coral + electric-yellow + cyan on cream/ink, pink→coral hero,
   hard offset shadows + ink borders, Anton/Playfair/Caveat/Inter.
   All scoped under .sbx so it never bleeds into the app's sb-design.css.
   ═══════════════════════════════════════════════════════════════ */
.sbx {
    /* Blue + orange redesign: vivid BLUE (primary) + SLATE + ORANGE (secondary), white surfaces, Inter.
       Var names kept so the sheet shifts without renaming; blue/orange are readable as text. */
    --magenta:      #2563EB;   /* now BLUE — primary (buttons, accent text, gradient) */
    --magenta-deep: #1D4ED8;
    --coral:        #FF7A1A;   /* now orange */
    --yellow:       #FF7A1A;   /* orange — pops on the dark stats band */
    --cyan:         #FF7A1A;   /* orange — secondary accent (fills/icons) */
    --cyan-deep:    #E2680C;
    --orange-ink:   #B5560A;   /* AA-on-white orange for TEXT (4.88:1) */
    --plum:         #0A2540;   /* slate-navy dark band */
    --cream:        #F5F8FE;   /* light surface */
    --cream-warm:   #EAF1FF;   /* pale blue wash */
    --ink:          #0A2540;
    --ink-soft:     #425466;
    --muted:        #697386;
    --white:        #fff;

    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-script:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --radius: 16px;
    --radius-sm: 10px;
    --grad-hero: linear-gradient(180deg, #FFFFFF 0%, #F0F5FF 100%);  /* white→pale-blue hero; orange pops via buttons/panels */

    font-family: var(--font-body);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background: var(--white);
}
.sbx *, .sbx *::before, .sbx *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sbx img { max-width: 100%; height: auto; display: block; }
.sbx a { text-decoration: none; }

/* Keyboard focus: visible ring for keyboard users only (mouse clicks unaffected). */
.sbx a:focus-visible, .sbx button:focus-visible, .sbx summary:focus-visible {
    outline: 3px solid var(--magenta);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Skip-to-content link — hidden until focused (first Tab stop). */
.sbx-skip {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 10px;
    font-weight: 800; font-size: 0.9rem; transition: top 0.15s ease;
}
.sbx-skip:focus { top: 0; }
/* Inherit section text color for plain links only — NOT buttons, whose variant
   sets its own text color (otherwise an anchor-button would inherit e.g. white
   in the hero → white-on-yellow, or ink in a card → black-on-black). */
.sbx a:not(.sbx-btn):not(.sbx-brand) { color: inherit; }
.sbx strong { font-weight: 800; }
.sbx em { font-style: normal; font-family: var(--font-display); font-weight: 800; color: var(--magenta); }

/* ── Buttons ──────────────────────────────────────────────────── */
.sbx-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.9rem 1.5rem;
    font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
    letter-spacing: 0; text-transform: none;
    border: 1px solid transparent; cursor: pointer; border-radius: 12px;
    transition: background 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}
.sbx-btn--lg { padding: 1.05rem 2.1rem; font-size: 1.05rem; }
.sbx-btn:hover { filter: brightness(0.97); box-shadow: 0 4px 14px rgba(16,24,40,0.10); }
.sbx-btn:active { filter: brightness(0.94); }
.sbx-btn--yellow { background: var(--magenta); color: var(--white); }   /* primary = blurple + white */
.sbx-btn--yellow:hover { background: var(--magenta-deep); }
.sbx-btn--magenta { background: var(--cyan); color: var(--white); }     /* secondary = blue */
.sbx-btn--magenta:hover { background: var(--cyan-deep); }
.sbx-btn--ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.sbx-btn--white { background: var(--white); color: var(--ink); border-color: rgba(0,0,0,0.12); }

.sbx-kicker {
    display: inline-block; font-family: var(--font-body); font-weight: 800;
    font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-ink);
}

/* ── Nav ──────────────────────────────────────────────────────── */
.sbx-nav {
    position: absolute; top: 0; left: 0; right: 0; z-index: 50;
    padding: 1.25rem 1.75rem; display: flex; align-items: center; justify-content: space-between;
}
.sbx-brand {
    font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -0.01em;
    text-transform: none; color: var(--ink); font-weight: 800;
}
.sbx-brand span { color: var(--magenta); } /* "Stack" (slate) + "Buddy" (blurple) */
.sbx-nav-links { display: flex; align-items: center; gap: 1.25rem; }
.sbx-nav-link { color: var(--ink); font-weight: 700; font-size: 0.95rem; }
.sbx-nav-link:hover { color: var(--cyan); }
@media (max-width: 640px) { .sbx-nav { padding: 1rem 1.1rem; } .sbx-brand { font-size: 1.4rem; } .sbx-nav-link--plain { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────── */
.sbx-hero { position: relative; background: var(--grad-hero); color: var(--ink); padding: 8rem 1.5rem 5rem; overflow: hidden; }
.sbx-hero-inner {
    max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem; align-items: center; position: relative; z-index: 2;
}
@media (max-width: 900px) { .sbx-hero { padding: 6.5rem 1.25rem 3.5rem; } .sbx-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; } }
.sbx-hero-eyebrow {
    display: inline-block; color: var(--ink-soft); font-family: var(--font-body); font-weight: 800;
    font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.5rem;
    padding: 0.5rem 0.9rem; background: var(--cream-warm); border: 1px solid rgba(0,0,0,0.06);
    border-radius: 999px;
}
.sbx-hero-title {
    font-family: var(--font-display); font-weight: 800; line-height: 0.98; text-transform: none;
    letter-spacing: -0.02em; color: var(--ink);
    font-size: clamp(2.8rem, 7vw, 5.6rem); margin-bottom: 1.5rem;
}
.sbx-hero-title .script {
    display: block; color: var(--magenta); font-family: var(--font-display); font-size: 1em;
}
.sbx-hero-sub {
    max-width: 44ch; color: var(--ink-soft); font-size: 1.18rem; line-height: 1.55;
    font-family: var(--font-body); margin-bottom: 2rem;
}
.sbx-hero-sub em { color: var(--magenta); }
@media (max-width: 900px) { .sbx-hero-sub { margin-left: auto; margin-right: auto; } }
.sbx-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
@media (max-width: 900px) { .sbx-hero-cta { justify-content: center; } }
.sbx-hero-note { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; }

/* mascot framed as a soft card */
.sbx-hero-mascot { justify-self: center; }
.sbx-mascot-card {
    background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(16,24,40,0.12); padding: 1rem; transform: none; max-width: 500px;
    animation: sbx-float 6s ease-in-out infinite;
}
.sbx-mascot-card img { width: 100%; border-radius: var(--radius-sm); }
@media (max-width: 900px) { .sbx-mascot-card { max-width: 300px; box-shadow: 0 12px 30px rgba(16,24,40,0.12); } }

/* ── Stats bar ────────────────────────────────────────────────── */
.sbx-stats { background: var(--plum); color: var(--white); padding: 2.5rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.sbx-stats-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; text-align: center; }
@media (max-width: 700px) { .sbx-stats-grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem; } }
.sbx-stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem,3vw,2.5rem); line-height: 1; color: var(--yellow); margin-bottom: 0.35rem; }
.sbx-stat-label { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72); font-weight: 700; }

/* ── Generic section + heads ──────────────────────────────────── */
.sbx-section { padding: 5.5rem 1.5rem; }
.sbx-section--cream { background: var(--cream); }
.sbx-section--white { background: var(--white); }
.sbx-section--magenta { background: linear-gradient(135deg, #2563EB 0%, #3B82F6 45%, #FF7A1A 135%); color: #fff; } /* signature blue→orange gradient panel (a white card sits on it) */
.sbx-inner { max-width: 1100px; margin: 0 auto; }
.sbx-head { text-align: center; max-width: 760px; margin: 0 auto 3.5rem; }
.sbx-head .sbx-kicker { margin-bottom: 1rem; }
.sbx-section--magenta .sbx-kicker { color: var(--orange-ink); }
.sbx-title {
    font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,4.5vw,3.2rem);
    line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.1rem;
}
.sbx-section--magenta .sbx-title { color: var(--ink); }
.sbx-section--magenta .sbx-title em { color: var(--cyan); }
.sbx-sub { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 640px; margin: 0 auto; }
.sbx-section--magenta .sbx-sub { color: rgba(0,0,0,0.72); }

/* ── Pillars (3 cards, rotating shadow colors) ────────────────── */
.sbx-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
@media (max-width: 820px) { .sbx-pillars { grid-template-columns: 1fr; } }
.sbx-pillar { background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius); padding: 2.25rem 1.75rem; box-shadow: 0 6px 20px rgba(16,24,40,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sbx-pillar:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(16,24,40,0.12); }
.sbx-pillar-icon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 1.1rem; background: var(--magenta); color: #fff; }
.sbx-pillar-icon svg { width: 30px; height: 30px; }
.sbx-pillar:nth-child(2) .sbx-pillar-icon { background: var(--cyan); color: var(--white); }
.sbx-pillar:nth-child(3) .sbx-pillar-icon { background: var(--ink); color: var(--white); }
.sbx-pillar-title { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.6rem; }
.sbx-pillar-desc { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }

/* ── Pain section (agitate before the solution) ───────────────── */
.sbx-pain .sbx-pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 920px; margin: 0 auto; }
@media (max-width: 720px) { .sbx-pain .sbx-pains { grid-template-columns: 1fr; } }
.sbx-pain-card {
    background: var(--cream); border: 1px solid rgba(0,0,0,0.07);
    border-left: 3px solid var(--coral); border-radius: var(--radius-sm);
    padding: 1.4rem 1.5rem; transition: transform .18s ease, box-shadow .2s ease;
}
.sbx-pain-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(16,24,40,0.09); }
.sbx-pain-mark {
    display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
    background: rgba(255,122,26,0.14); color: var(--cyan-deep); font-size: 0.8rem; font-weight: 800;
    margin-bottom: 0.7rem;
}
.sbx-pain-title { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.35rem; line-height: 1.3; }
.sbx-pain-desc { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; }
.sbx-pain-turn {
    text-align: center; max-width: 620px; margin: 2.75rem auto 0;
    font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.4; color: var(--ink);
    letter-spacing: -0.01em;
}
.sbx-pain-turn em { color: var(--magenta); }

/* ── Transformation: without vs with ──────────────────────────── */
.sbx-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; max-width: 940px; margin: 0 auto; }
@media (max-width: 760px) { .sbx-vs { grid-template-columns: 1fr; gap: 0.9rem; } }
.sbx-vs-col { border-radius: var(--radius); padding: 1.85rem 1.65rem; }
.sbx-vs-col--before { background: var(--white); border: 1px solid rgba(0,0,0,0.08); }
.sbx-vs-col--after { background: var(--white); border: 2px solid var(--magenta); box-shadow: 0 14px 34px rgba(37,99,235,0.16); }
.sbx-vs-label { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.76rem; margin-bottom: 1.1rem; }
.sbx-vs-col--before .sbx-vs-label { color: var(--muted); }
.sbx-vs-col--after .sbx-vs-label { color: var(--magenta); }
.sbx-vs-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.sbx-vs-list li { position: relative; padding-left: 2rem; font-size: 0.98rem; line-height: 1.4; }
.sbx-vs-col--before .sbx-vs-list li { color: var(--ink-soft); }
.sbx-vs-col--after .sbx-vs-list li { color: var(--ink); font-weight: 600; }
.sbx-vs-list li::before {
    position: absolute; left: 0; top: 0.05em; width: 1.4rem; height: 1.4rem; border-radius: 999px;
    display: grid; place-items: center; font-size: 0.78rem; font-weight: 900; line-height: 1;
}
.sbx-vs-col--before .sbx-vs-list li::before { content: "\2715"; color: var(--cyan-deep); background: rgba(255,122,26,0.13); }
.sbx-vs-col--after .sbx-vs-list li::before { content: "\2713"; color: #fff; background: var(--magenta); }
.sbx-vs-arrow { align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--muted); }
@media (max-width: 760px) { .sbx-vs-arrow { transform: rotate(90deg); justify-self: center; margin: 0.1rem 0; } }

/* ── Network moat block — white card on the yellow panel ──────── */
.sbx-moat-card {
    background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(16,24,40,0.14); padding: 3rem; text-align: center; max-width: 880px; margin: 0 auto;
}
@media (max-width: 700px) { .sbx-moat-card { padding: 2rem 1.5rem; } }
.sbx-moat-card .sbx-btn { margin-top: 1.75rem; }

/* ── Pricing teaser ───────────────────────────────────────────── */
.sbx-price-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) { .sbx-price-grid { grid-template-columns: 1fr; } }
.sbx-price-card { background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius); padding: 2rem 1.75rem; box-shadow: 0 6px 20px rgba(16,24,40,0.07); }
.sbx-price-card--pro { border: 2px solid var(--magenta); box-shadow: 0 12px 30px rgba(16,24,40,0.12); }
.sbx-price-name { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; }
.sbx-price-amt { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--ink); margin-bottom: 0.25rem; }
.sbx-price-amt span { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; color: var(--muted); letter-spacing: 0; text-transform: none; }
.sbx-price-list { list-style: none; margin: 1.25rem 0 1.5rem; }
.sbx-price-list li { padding: 0.4rem 0 0.4rem 1.6rem; position: relative; color: var(--ink); font-size: 0.95rem; line-height: 1.45; }
.sbx-price-list li::before { content: "✓"; color: var(--cyan-deep); position: absolute; left: 0; font-weight: 900; }

/* ── Final CTA band ───────────────────────────────────────────── */
.sbx-band { background: var(--ink); color: var(--white); padding: 4.5rem 1.5rem; }
.sbx-band-inner { max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: 2.75rem; }
.sbx-band-mascot { flex: 0 0 auto; width: 230px; background: var(--white); border-radius: var(--radius); padding: 0.6rem; box-shadow: 0 18px 44px rgba(0,0,0,0.32); }
.sbx-band-mascot img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.sbx-band-copy { text-align: left; }
.sbx-band-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,5vw,3.2rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.sbx-band-title em { color: var(--yellow); }
@media (max-width: 700px) {
    .sbx-band-inner { flex-direction: column; text-align: center; gap: 1.9rem; }
    .sbx-band-copy { text-align: center; }
    .sbx-band-mascot { width: 190px; }
}

/* ── The loop: 4-step flywheel ────────────────────────────────── */
.sbx-loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 820px) { .sbx-loop { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sbx-loop { grid-template-columns: 1fr; } }
.sbx-step { background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius); padding: 1.6rem 1.4rem; box-shadow: 0 6px 20px rgba(16,24,40,0.07); position: relative; }
.sbx-step-num {
    font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1; color: var(--white);
    background: var(--magenta); width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: 1rem;
}
.sbx-step:nth-child(2) .sbx-step-num { background: var(--cyan); color: var(--white); }
.sbx-step:nth-child(3) .sbx-step-num { background: var(--ink); color: var(--white); }
.sbx-step:nth-child(4) .sbx-step-num { background: var(--cyan); color: var(--white); }
.sbx-step-title { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.4rem; }
.sbx-step-desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }
.sbx-loop-note { text-align: center; margin-top: 2.5rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--cyan); }

/* ── Feature grid ─────────────────────────────────────────────── */
.sbx-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 820px) { .sbx-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sbx-features { grid-template-columns: 1fr; } }
.sbx-feature { background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-sm); padding: 1.25rem 1.25rem; display: flex; gap: 0.85rem; align-items: flex-start; box-shadow: 0 3px 12px rgba(16,24,40,0.05); }
.sbx-feature-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cream-warm); border: 1px solid rgba(0,0,0,0.06); color: var(--magenta); }
.sbx-feature-ico svg { width: 22px; height: 22px; }
.sbx-feature-title { font-weight: 800; font-size: 1rem; color: var(--ink); margin-bottom: 0.2rem; }
.sbx-feature-desc { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.45; }

/* ── FAQ (native disclosure) ──────────────────────────────────── */
.sbx-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.sbx-faq-item { background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-sm); box-shadow: 0 2px 10px rgba(16,24,40,0.05); overflow: hidden; }
.sbx-faq-q { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sbx-faq-q::-webkit-details-marker { display: none; }
.sbx-faq-q::after { content: "+"; font-family: var(--font-display); color: var(--cyan-deep); font-size: 1.4rem; line-height: 1; }
.sbx-faq-item[open] .sbx-faq-q::after { content: "–"; }
.sbx-faq-a { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; }

/* ── Footer ───────────────────────────────────────────────────── */
.sbx-footer { background: var(--plum); color: rgba(255,255,255,0.8); padding: 2.5rem 1.5rem; text-align: center; font-size: 0.9rem; }
.sbx-footer a { color: var(--yellow); font-weight: 700; }
.sbx-footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--white); text-transform: none; margin-bottom: 0.5rem; }

/* ═══════════════════════════════════════════════════════════════
   Motion, effects & diagram graphics
   ═══════════════════════════════════════════════════════════════ */

/* Floating mascot — keeps its 2° tilt while bobbing */
@keyframes sbx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sbx-rotate { to { transform: rotate(360deg); } }
@keyframes sbx-pulse { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(-10deg) scale(1.08); } }

/* Scroll-reveal — JS adds .sbx-in when the element scrolls into view */
@media (prefers-reduced-motion: no-preference) {
    .sbx-reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
    .sbx-reveal.sbx-in { opacity: 1; transform: none; }
    .sbx-reveal.sbx-d1 { transition-delay: .08s; }
    .sbx-reveal.sbx-d2 { transition-delay: .16s; }
    .sbx-reveal.sbx-d3 { transition-delay: .24s; }
}

/* Hover polish */
.sbx-feature { transition: transform .15s ease, box-shadow .2s ease; }
.sbx-feature:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(16,24,40,0.10); }
.sbx-step { transition: transform .2s ease, box-shadow .2s ease; }
.sbx-step:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,24,40,0.12); }
.sbx-price-card { transition: transform .2s ease, box-shadow .2s ease; }
.sbx-price-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,24,40,0.12); }

/* Loop diagram — arrows between the 4 steps */
.sbx-loop { position: relative; }
@media (min-width: 821px) {
    .sbx-step:not(:last-child)::after {
        content: "→"; position: absolute; right: -1.55rem; top: 50%; transform: translateY(-50%);
        font-family: var(--font-display); font-size: 1.8rem; color: var(--muted); z-index: 3; pointer-events: none;
    }
}
@media (max-width: 480px) {
    .sbx-step:not(:last-child)::after {
        content: "↓"; position: absolute; left: 50%; bottom: -1.7rem; transform: translateX(-50%);
        font-family: var(--font-display); font-size: 1.6rem; color: var(--muted); z-index: 3; pointer-events: none;
    }
}
/* loop-back "repeat" pill */
.sbx-loop-repeat {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: var(--ink); color: var(--yellow); border-radius: 999px; padding: 0.6rem 1.35rem;
    font-family: var(--font-body); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.sbx-loop-repeat .sbx-loop-spin { font-size: 1.15rem; display: inline-block; animation: sbx-rotate 5s linear infinite; }
.sbx-loop-foot { text-align: center; margin-top: 2.75rem; }

/* Collab image framed in the network section */
.sbx-collab-frame {
    background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(16,24,40,0.12); padding: 0.75rem; margin: 0 auto 2.25rem; max-width: 660px; transform: none;
}
.sbx-collab-frame img { width: 100%; border-radius: var(--radius-sm); }

/* Decorative squiggle arrow */
.sbx-arrow-deco { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
    .sbx-mascot-card, .sbx-loop-repeat .sbx-loop-spin { animation: none !important; }
}