/* Count My Bucks - public landing page. Engraved-ledger / fine-banknote editorial system.
   Palette and fonts are the identity set by the hero (ink/paper/gold/seal) - every section below
   builds on it. GPU-friendly motion only: transform, opacity, stroke-dashoffset, @property
   counters. No scroll JS. Full prefers-reduced-motion fallback at the bottom shows final states,
   and every @supports(animation-timeline) block has a plain fallback above it so Firefox (no
   scroll-driven animations) still renders the finished look. */

@property --n {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
/* Zero-padded 3-digit counter style, used for the remainder after the thousands separator
   (e.g. --n:19 + --n:240 rendered as "19,240" via two adjacent counters). */
@counter-style pad3 {
    system: extends decimal;
    pad: 3 "0";
}

/* overflow-x:hidden lives on html/body, not .sb-landing: overflow-x:hidden on a single axis
   implicitly forces overflow-y:auto on that same box (CSS spec), which would make .sb-landing
   itself the nearest "scrolling ancestor" and silently break every position:sticky descendant
   (confirmed via getBoundingClientRect diagnostics - the balance set piece was scrolling 1:1
   with the page instead of pinning). Clipping horizontal overflow one level up, on html/body,
   avoids creating that scroll container around the sticky sections. */
/* Only html, not body: setting overflow-x on BOTH makes body its own competing scroll
   container (body's overflow no longer propagates to the viewport once html also sets
   overflow), and position:sticky descendants then stick to that inert body "scrollport"
   (whose own scrollTop never moves) instead of the real viewport - i.e. they silently stop
   sticking. Confirmed via computed-style + getBoundingClientRect diagnostics. */
/* overflow-x: clip (not hidden) on BOTH html and body: clip, unlike hidden, does not imply
   overflow-y:auto on the same box and does not turn that box into a scroll container, so it
   can safely go on body too without repeating the position:sticky breakage documented above. */
html, body { overflow-x: clip; }
body { margin: 0; }
.sb-landing {
    --ink: #141816;
    --paper: #f3eee4;
    --gold: #c4a265;
    --seal: #9c4034;
    --muted: #5c574e;
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Outfit, "Segoe UI", sans-serif;
    font-weight: 400;
    position: relative;
}
.sb-landing * { box-sizing: border-box; }
.sb-landing h1, .sb-landing h2, .sb-landing h3, .sb-nav-brand {
    font-family: Outfit, 'Segoe UI', system-ui, sans-serif;
    font-optical-sizing: auto;
    font-weight: 560;
    letter-spacing: -0.03em;
}
.sb-kicker {
    font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--seal); margin: 0 0 14px; font-weight: 600;
}

/* ---- paper grain + ledger ruling motifs, reused across paper sections ---- */
.sb-bento, .sb-shared, .sb-pricing {
    position: relative;
}
.sb-bento::before, .sb-shared::before, .sb-pricing::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.08  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sb-bento > *, .sb-shared > *, .sb-pricing > * { position: relative; z-index: 1; }

.sb-ledger-rules {
    background-image:
        linear-gradient(rgba(156,64,52,.35) 1px, transparent 1px),
        repeating-linear-gradient(rgba(20,24,22,.06) 0 1px, transparent 1px 34px);
    background-position: 56px 0, 0 0;
    background-size: 1px 100%, 100% 34px;
}

/* ---- nav ---- */
.sb-nav {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 28px; flex-wrap: wrap;
    background: var(--paper);
    border-bottom: 1px solid rgba(20, 24, 22, 0.08);
}
.sb-nav-brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink); text-decoration: none; font-size: 1.15rem;
}
.sb-mark { width: 34px; height: 34px; flex-shrink: 0; }
.sb-nav-links { display: flex; gap: 22px; flex-wrap: wrap; }
.sb-nav-links a { color: var(--ink); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.sb-nav-links a:hover { color: var(--seal); }
.sb-signin-btn, .sb-hero-btn, .sb-cta-btn {
    display: inline-block; text-decoration: none; font-weight: 600;
    border-radius: 999px; padding: 10px 18px;
}
.sb-signin-btn { background: var(--ink); color: var(--paper) !important; font-size: 0.88rem; }

/* ---- hero ---- */
.sb-hero {
    position: relative; overflow: hidden;
    background: radial-gradient(1200px 500px at 80% 10%, #24302a, var(--ink) 55%);
    color: var(--paper);
    /* No forced min-height: the hero used to reserve 88vh regardless of content, leaving
       ~250px of dead gradient between the CTA and the ticker on typical screens. Sizing to
       content keeps the ticker close under the hero grid. */
    display: flex; flex-direction: column;
}
.sb-hero-wash {
    position: absolute; inset: auto -10% -20% 40%; height: 55%;
    background: radial-gradient(closest-side, rgba(196,162,101,.35), transparent 70%);
}
/* Rosette lives inside .sb-plate (not the whole hero), centered behind the vignette card, so it
   can never bleed sideways into the copy column or down into the ticker band. */
.sb-rosette {
    position: absolute; top: 50%; left: 50%; width: 140%; height: 140%; max-width: 620px; max-height: 620px;
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 0;
}
.sb-rosette-spin { transform-origin: 300px 300px; animation: sb-spin 90s linear infinite; }
@keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-hero-grid {
    position: relative; max-width: 1120px; margin: 0 auto; width: 100%;
    display: flex; flex-wrap: wrap; gap: 32px; align-items: center;
    padding: 72px 28px 56px;
}
.sb-hero-copy { flex: 1 1 460px; min-width: 0; }
.sb-plate { flex: 1 1 340px; min-width: 0; }
.sb-hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; margin: 0 0 18px; color: #f7f3ea; }
.sb-lede { font-size: 1.08rem; line-height: 1.65; max-width: 38rem; color: rgba(243,238,228,.82); margin: 0 0 28px; }
.sb-hero-btn { background: var(--gold); color: var(--ink) !important; padding: 14px 26px; }

/* live product vignette */
.sb-plate { margin: 0; position: relative; perspective: 1200px; overflow: hidden; }
.sb-plate-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sb-stroke {
    stroke-dasharray: 900; stroke-dashoffset: 900;
    animation: sb-draw 2.4s ease forwards 0.2s;
}
@keyframes sb-draw { to { stroke-dashoffset: 0; } }
.sb-vignette {
    position: relative; z-index: 1; margin: 34px 20px;
    background: rgba(20,24,22,.55);
    border: 1px solid rgba(196,162,101,.5);
    border-radius: 6px;
    padding: 26px 24px 30px;
    backdrop-filter: blur(2px);
    transform-style: preserve-3d;
    transition: transform .4s ease;
}
.sb-plate:hover .sb-vignette { transform: rotateX(4deg) rotateY(-6deg); }
.sb-vig-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 0; font-size: .98rem;
    opacity: 0; transform: translateY(10px);
    animation: sb-rise-in .6s ease forwards;
    animation-delay: calc(.4s + var(--i) * .18s);
}
.sb-vig-name { color: rgba(243,238,228,.8); }
.sb-vig-amt { font-family: Outfit, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; color: #f7f3ea; }
.sb-count-k, .sb-count-r {
    --n: 0;
    animation: sb-count-up 1.6s ease-out forwards;
    animation-delay: calc(.5s + var(--i) * .18s);
}
.sb-count-k { counter-reset: k var(--n); }
.sb-count-k::before { content: counter(k); }
.sb-count-r { counter-reset: r var(--n); }
.sb-count-r::before { content: counter(r, pad3); }
@keyframes sb-count-up { from { --n: 0; } }
.sb-vig-rule {
    height: 1px; background: var(--gold); margin: 6px 0 4px; transform: scaleX(0); transform-origin: left;
    animation: sb-draw-x .7s ease forwards 1.35s;
}
@keyframes sb-draw-x { to { transform: scaleX(1); } }
.sb-vig-total { font-weight: 600; }
.sb-vig-total .sb-vig-amt { color: var(--gold); font-size: 1.2rem; }
@keyframes sb-rise-in { to { opacity: 1; transform: none; } }
.sb-seal {
    position: absolute; right: 4px; top: -42px; width: 68px; height: 68px;
    border: 2px solid var(--seal); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: var(--seal); font-family: Outfit, 'Segoe UI', sans-serif; font-size: .48rem; letter-spacing: .01em; white-space: nowrap;
    text-transform: uppercase; background: rgba(243,238,228,.92);
    transform: rotate(-14deg) scale(0);
    animation: sb-stamp .5s cubic-bezier(.2,1.4,.4,1) forwards 1.6s;
}
@keyframes sb-stamp { 60% { transform: rotate(-14deg) scale(1.15); } to { transform: rotate(-14deg) scale(1); } }
.sb-seal span { width: 100%; overflow-wrap: break-word; padding: 0 4px; }

/* transaction ticker */
.sb-ticker {
    position: relative; margin-top: auto; border-top: 1px solid rgba(196,162,101,.25);
    padding: 16px 0; overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sb-ticker-track { display: flex; width: max-content; animation: sb-scroll-x 34s linear infinite; }
.sb-ticker:hover .sb-ticker-track { animation-play-state: paused; }
.sb-ticker-group { display: flex; gap: 14px; padding-right: 14px; }
@keyframes sb-scroll-x { to { transform: translateX(-50%); } }
.sb-chip {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    background: rgba(243,238,228,.06); border: 1px solid rgba(196,162,101,.28);
    border-radius: 999px; padding: 7px 14px; font-size: .82rem; color: rgba(243,238,228,.85);
}
.sb-chip b { font-weight: 600; color: #f7f3ea; }
.sb-chip i {
    font-style: normal; color: var(--ink); background: var(--gold);
    border-radius: 999px; padding: 2px 9px; font-size: .72rem; font-weight: 600;
}

/* ---- scroll set piece: balance ---- */
.sb-balance { position: relative; height: 170vh; background: #1c221e; color: var(--paper); }
.sb-balance-sticky {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center; gap: 36px;
    max-width: 1280px; margin: 0 auto; padding: 32px 28px;
}
.sb-balance h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0 0 12px; color: #f7f3ea; }
.sb-balance p { color: rgba(243,238,228,.75); line-height: 1.6; max-width: 46rem; }
.sb-balance-copy { max-width: 640px; }
.sb-diff {
    margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    border-top: 1px solid rgba(196,162,101,.4); padding-top: 18px;
}
.sb-diff-readout { display: flex; flex-direction: column; gap: 6px; }
.sb-diff span { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.sb-diff-amt { font-family: Outfit, 'Segoe UI', sans-serif; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--gold); }
.sb-ledger { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 8px; }
.sb-spine {
    position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; background: var(--gold);
    transform: scaleX(0); transform-origin: center;
}
.sb-col { border-top: 2px solid rgba(196,162,101,.7); padding-top: 16px; transform: translateY(0); }
.sb-col span { display: block; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-family: Outfit, 'Segoe UI', sans-serif; }
.sb-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; font-size: .96rem; padding: 10px 0; border-bottom: 1px dashed rgba(243,238,228,.14); }
.sb-row em { font-style: normal; color: rgba(243,238,228,.5); }
.sb-row small { color: rgba(243,238,228,.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-row b { font-weight: 500; color: #f7f3ea; font-variant-numeric: tabular-nums; }
/* Sits beside the Difference readout, not over the ledger, so it never covers a company's
   figures (the earlier absolute placement over the ledger did exactly that). */
.sb-balance-seal {
    flex: 0 0 auto; width: 92px; height: 92px;
    border: 2.5px solid var(--gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--gold);
    font-family: Outfit, 'Segoe UI', sans-serif; font-size: .6rem; letter-spacing: .01em; white-space: nowrap; text-transform: uppercase;
    text-align: center;
    opacity: 1; transform: rotate(-10deg) scale(1);
}
/* The label must wrap within the circle rather than grow past it - place-items:center only
   aligns the child, it doesn't constrain its width, so without this the single word "Balanced"
   sized past the circle's own diameter and leaked into the page's horizontal scroll width. */
.sb-balance-seal span { width: 100%; overflow-wrap: break-word; padding: 0 6px; }

/* pillars */
.sb-pillars, .sb-shared, .sb-migration, .sb-pricing, .sb-cta {
    max-width: 1120px; margin: 0 auto; padding: 80px 28px;
}
.sb-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: none; padding: 0; }
.sb-pillars article {
    position: relative; padding: 64px 32px; background: var(--paper);
    border-top: 1px solid rgba(20,24,22,.12); overflow: hidden;
}
.sb-pillar-b { background: #e7e0d2; }
.sb-numeral {
    position: absolute; top: -6px; right: 14px; font-family: Outfit, 'Segoe UI', sans-serif; font-size: 6.5rem;
    font-weight: 500; color: rgba(20,24,22,.06); line-height: 1; letter-spacing: 0;
}
.sb-pillar-b .sb-numeral { color: rgba(20,24,22,.08); }
.sb-pillars h2 { position: relative; font-size: 2.2rem; margin: 0 0 12px; }
.sb-pillars p { position: relative; color: var(--muted); line-height: 1.65; }

/* bento */
.sb-bento { max-width: 1120px; margin: 0 auto; padding: 80px 28px; }
.sb-bento h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 8px; max-width: 34rem; }
.sb-bento-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto);
    grid-auto-flow: row dense;
    gap: 16px; margin-top: 36px;
}
.sb-tile {
    position: relative; background: #fffdf8; border-radius: 6px; padding: 22px 22px 24px;
    min-width: 0;
    border: 1px solid rgba(20,24,22,.08);
    box-shadow: 0 1px 0 rgba(20,24,22,.05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex; flex-direction: column; gap: 12px;
}
.sb-tile::before, .sb-tile::after {
    content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--gold); opacity: 0;
    transition: opacity .25s ease;
}
.sb-tile::before { top: 6px; left: 6px; border-top: 1.5px solid; border-left: 1.5px solid; }
.sb-tile::after { bottom: 6px; right: 6px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
.sb-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,24,22,.12); border-color: rgba(196,162,101,.5); }
.sb-tile:hover::before, .sb-tile:hover::after { opacity: 1; }
.sb-tile-lg { grid-column: span 2; grid-row: span 2; }
.sb-tile-wide { grid-column: span 2; }
.sb-tile-full { grid-column: span 4; }
.sb-tile-full .sb-tile-art { flex: 0 0 100px; }
.sb-tile h3 { margin: 0; font-size: 1.15rem; }
.sb-tile p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .94rem; }
.sb-tile-art {
    flex: 1 1 auto; min-height: 108px; border-radius: 4px; background: #f3eee4;
    overflow: hidden; position: relative; display: flex;
}
.sb-tile-lg .sb-tile-art { min-height: 226px; }
/* The big tile is a small mini-app mock: a compact 4-tab switcher (3 companies + "All") on top,
   with a P&L card underneath whose header/rows/sparkline swap per active company. The highlight
   used to be a separately-positioned pill animated with translateX, which drifted out of sync
   with the tab text at some widths (dark text landing on the dark pill). Each tab now animates
   its OWN background/color instead, so the highlight can never be misaligned with its label. */
.sb-tile-art-app { flex-direction: column; align-items: stretch; padding: 16px 18px 16px; gap: 10px; }
.sb-tile-art-app .sb-art-switch { display: flex; flex: 0 0 auto; gap: 8px; justify-content: flex-start; }
.sb-art-tab {
    font-size: .82rem; padding: 7px 14px; border-radius: 999px; font-weight: 500; white-space: nowrap;
    background: transparent; color: var(--muted);
    animation-duration: 8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.sb-art-tab:nth-child(1) { animation-name: sb-tab-a; }
.sb-art-tab:nth-child(2) { animation-name: sb-tab-b; }
.sb-art-tab:nth-child(3) { animation-name: sb-tab-c; }
.sb-art-tab:nth-child(4) { animation-name: sb-tab-d; }
@keyframes sb-tab-a { 0%, 17% { background: var(--ink); color: #f7f3ea; } 23%, 100% { background: transparent; color: var(--muted); } }
@keyframes sb-tab-b { 0%, 22% { background: transparent; color: var(--muted); } 28%, 42% { background: var(--ink); color: #f7f3ea; } 48%, 100% { background: transparent; color: var(--muted); } }
@keyframes sb-tab-c { 0%, 47% { background: transparent; color: var(--muted); } 53%, 67% { background: var(--ink); color: #f7f3ea; } 73%, 100% { background: transparent; color: var(--muted); } }
@keyframes sb-tab-d { 0%, 72% { background: transparent; color: var(--muted); } 78%, 92% { background: var(--ink); color: #f7f3ea; } 98%, 100% { background: transparent; color: var(--muted); } }

/* flex:1 so the CARD itself (white background, border, shadow, header, centered content) fills
   the remaining tile height - the earlier fixed-height attempt left a bare beige gap below the
   card because the tile's own height is set by CSS Grid row-spanning, not by the card's content;
   letting the card grow to fill it (instead of leaving empty space around a small fixed card)
   is what actually removes the dead space. */
.sb-tile-art-app .sb-art-panel { position: relative; flex: 1 1 auto; width: 100%; min-height: 120px; }
.sb-panel-card {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    gap: 7px; padding: 14px 16px; opacity: 0; transform: translateY(4px);
    background: #fffdf9; border: 1px solid rgba(20,24,22,.1); border-radius: 8px;
    box-shadow: 0 2px 8px rgba(20,24,22,.05);
    animation-duration: 8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.sb-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.sb-panel-head span { font-size: .8rem; font-weight: 600; color: var(--ink); }
.sb-panel-spark { width: 52px; height: 18px; flex: 0 0 auto; }
.sb-panel-spark polyline { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sb-panel-row { display: flex; justify-content: space-between; font-size: .86rem; color: var(--muted); }
.sb-panel-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-panel-net { border-top: 1px solid rgba(20,24,22,.12); margin-top: 1px; padding-top: 7px; }
.sb-panel-net span { color: var(--ink); font-weight: 600; }
.sb-panel-net b { color: var(--seal); }
/* Desktop: the card is tall (2x2 tile), so the sparkline becomes the card's chart - stretched
   across the space between the header and the figures, which sit pinned to the bottom. */
@media (min-width: 901px) {
    .sb-panel-card { justify-content: flex-start; gap: 10px; padding: 20px 22px; }
    .sb-panel-head span { font-size: .95rem; }
    .sb-panel-card .sb-panel-spark {
        position: absolute; left: 22px; right: 22px; top: 56px; bottom: 140px;
        width: auto; height: auto; padding: 18px 0 22px;
        background: repeating-linear-gradient(to bottom, rgba(20,24,22,.07) 0 1px, transparent 1px 25%);
        border-bottom: 1px solid rgba(196,162,101,.55);
    }
    .sb-panel-spark polyline { stroke-width: 2; vector-effect: non-scaling-stroke; }
    .sb-panel-head + .sb-panel-row { margin-top: auto; }
    .sb-panel-row { font-size: .98rem; }
}
.sb-panel-a { animation-name: sb-panel-a; }
.sb-panel-b { animation-name: sb-panel-b; }
.sb-panel-c { animation-name: sb-panel-c; }
.sb-panel-d { animation-name: sb-panel-d; }
@keyframes sb-panel-a { 0%, 17% { opacity: 1; transform: none; } 23%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sb-panel-b { 0%, 22% { opacity: 0; transform: translateY(4px); } 28%, 42% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sb-panel-c { 0%, 47% { opacity: 0; transform: translateY(4px); } 53%, 67% { opacity: 1; transform: none; } 73%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sb-panel-d { 0%, 72% { opacity: 0; transform: translateY(4px); } 78%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(4px); } }

/* bento micro-illustrations - each fills its tile-art box (flex parent) */
.sb-tile-art > div { flex: 1 1 auto; width: 100%; }
.sb-art-register { position: relative; padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; gap: 11px; overflow: hidden; }
.sb-art-line { height: 13px; border-radius: 4px; background: rgba(20,24,22,.16); animation: sb-line-scroll 3.6s linear infinite; }
.sb-art-line:nth-child(1) { width: 92%; animation-delay: 0s; }
.sb-art-line:nth-child(2) { width: 66%; animation-delay: .1s; }
.sb-art-line:nth-child(3) { width: 80%; animation-delay: .2s; }
.sb-art-line:nth-child(4) { width: 56%; animation-delay: .3s; }
.sb-art-line:nth-child(5) { width: 72%; animation-delay: .4s; }
@keyframes sb-line-scroll { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.sb-art-filter {
    position: absolute; right: 16px; bottom: 14px; font-size: .78rem; background: var(--gold); color: var(--ink);
    padding: 5px 14px; border-radius: 999px; font-weight: 600;
    animation: sb-filter-pop 3.6s ease-in-out infinite;
}
@keyframes sb-filter-pop { 0%, 40% { transform: scale(.9); opacity: .6; } 55%, 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: .6; } }
.sb-art-bulk { display: flex; align-items: center; justify-content: center; gap: 18px; }
.sb-art-check {
    width: 32px; height: 32px; border: 2.5px solid var(--gold); border-radius: 6px; position: relative;
    animation: sb-check-tick 4s ease-in-out infinite;
}
.sb-art-check:nth-child(1) { animation-delay: 0s; } .sb-art-check:nth-child(2) { animation-delay: .3s; }
.sb-art-check:nth-child(3) { animation-delay: .6s; } .sb-art-check:nth-child(4) { animation-delay: .9s; }
.sb-art-check::after {
    content: ""; position: absolute; left: 6px; top: 9px; width: 16px; height: 9px;
    border-left: 3px solid var(--paper); border-bottom: 3px solid var(--paper); transform: rotate(-45deg);
}
@keyframes sb-check-tick {
    0%, 15% { background: transparent; }
    25%, 85% { background: var(--ink); }
    90%, 100% { background: transparent; }
}
.sb-art-bars { display: flex; align-items: flex-end; justify-content: center; gap: 28px; padding: 16px 20px 8px; width: 100%; }
.sb-art-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; flex: 0 0 auto; }
.sb-art-bar { width: 34px; height: var(--h); background: rgba(20,24,22,.2); border-radius: 4px 4px 0 0; animation: sb-bar-rise 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
.sb-art-bar-total { background: var(--gold); }
.sb-art-bar-col small { font-size: .68rem; color: var(--muted); letter-spacing: .02em; }
@keyframes sb-bar-rise { 0%, 20% { transform: scaleY(.3); transform-origin: bottom; } 45%, 100% { transform: scaleY(1); transform-origin: bottom; } }
.sb-art-import { display: flex; align-items: center; justify-content: center; gap: 22px; }
.sb-art-file {
    width: 64px; height: 50px; background: var(--ink); color: var(--paper); font-size: .82rem; font-weight: 700;
    display: grid; place-items: center; border-radius: 4px;
    animation: sb-file-drop 3s ease-in-out infinite;
}
@keyframes sb-file-drop { 0%, 20% { transform: translateY(-14px); opacity: .6; } 45%, 100% { transform: translateY(0); opacity: 1; } }
.sb-art-arrow { width: 40px; height: 3px; background: var(--gold); position: relative; }
.sb-art-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; width: 12px; height: 12px; border-top: 3px solid var(--gold); border-right: 3px solid var(--gold); transform: rotate(45deg); }
.sb-art-ledger { flex: 0 0 auto !important; display: flex; flex-direction: column; gap: 7px; width: 100px; }
.sb-art-ledger i { display: block; height: 9px; background: rgba(20,24,22,.18); border-radius: 3px; animation: sb-line-scroll 3s ease-in-out infinite; }

/* shared rules */
.sb-shared { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: stretch; }
.sb-shared h2 { margin: 0 0 16px; }
.sb-shared-copy > p:not(.sb-kicker) { margin: 0 0 24px; }
.sb-shared ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sb-shared li {
    background: white; padding: 18px 20px; border-radius: 4px;
    box-shadow: 0 1px 0 rgba(20,24,22,.06); border-left: 2px solid var(--gold);
}
.sb-shared strong { display: block; margin-bottom: 4px; }
.sb-shared p, .sb-shared li span { color: var(--muted); line-height: 1.65; }
/* No width cap: the diagram scales to the full column width (and, via the taller 480x440
   viewBox, close to the copy column's height too) instead of sitting undersized with dead
   space around it. align-items:stretch on .sb-shared plus this flex centering keeps it vertically
   centered against the bullet list even when the column is taller than the diagram's own height. */
.sb-shared-diagram { min-width: 0; display: flex; align-items: center; justify-content: center; }
.sb-connectors { width: 100%; height: auto; max-height: 100%; display: block; }
.sb-connector { stroke-dasharray: 300; stroke-dashoffset: 300; }
.sb-node { opacity: .5; }

/* migration timeline */
.sb-migration { max-width: none; background: var(--ink); color: var(--paper); padding: 80px 28px; }
.sb-migration .sb-sub { color: rgba(243,238,228,.7); }
.sb-migration h2, .sb-migration .sb-sub, .sb-timeline { max-width: 1120px; margin-left: auto; margin-right: auto; }
.sb-timeline {
    position: relative; list-style: none; padding: 44px 0 0; margin-top: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.sb-timeline::before {
    content: ""; position: absolute; top: 22px; left: 2%; right: 2%; height: 2px; background: rgba(196,162,101,.25);
}
.sb-timeline::after {
    content: ""; position: absolute; top: 22px; left: 2%; height: 2px; background: var(--gold);
    width: 96%; transform: scaleX(1); transform-origin: left;
}
.sb-timeline li { position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(196,162,101,.3); color: var(--paper); border-radius: 4px; padding: 24px; }
.sb-timeline b {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--gold); color: var(--ink); margin-bottom: 12px; font-family: Outfit, 'Segoe UI', sans-serif;
    position: relative; z-index: 1;
}
.sb-timeline h3 { margin: 0 0 8px; font-size: 1.1rem; }
.sb-timeline p { color: rgba(243,238,228,.75); margin: 0; }

/* pricing summary (SLOW-452: full pricing lives on /pricing; this section is a short teaser) */
.sb-pricing { text-align: center; }
.sb-pricing h2 { margin: 0 0 12px; }
.sb-pricing .sb-sub { margin: 0 auto 32px; max-width: 640px; }

/* CTA */
.sb-cta { text-align: center; background: #101412; color: var(--paper); max-width: none; position: relative; overflow: hidden; }
.sb-cta-rosette { position: absolute; top: 50%; left: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); pointer-events: none; }
.sb-cta h2, .sb-cta p { position: relative; color: #f7f3ea; }
.sb-cta p { color: rgba(243,238,228,.75); }
.sb-cta-btn { position: relative; background: var(--gold); color: var(--ink) !important; margin-top: 8px; }

/* footer */
footer.sb-footer { background: #101412; color: #b7b1a6; padding: 56px 28px 24px; font-size: .9rem; }
.sb-footer-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 28px; }
.sb-footer-brand { color: var(--paper); font-family: Outfit, 'Segoe UI', sans-serif; font-size: 1.3rem; margin-bottom: 10px; }
.sb-footer-tagline { line-height: 1.6; }
.sb-footer a { color: #b7b1a6; }
.sb-footer-col h4 { color: var(--paper); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.sb-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-footer-col a { text-decoration: none; }
.sb-footer-col a:hover, .sb-footer a:hover { color: var(--gold); }
.sb-footer-bottom {
    max-width: 1120px; margin: 36px auto 0; padding-top: 16px;
    border-top: 1px solid rgba(243,238,228,.12);
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .8rem;
}

/* ---- scroll-driven enhancement layer (progressive) ---- */
@supports (animation-timeline: view()) {
    .sb-hero-wash {
        animation: sb-drift linear both; animation-timeline: scroll(root); animation-range: 0 40vh;
    }
    [data-reveal] {
        animation: sb-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%;
    }
    @media (min-width: 901px) {
        .sb-col, .sb-spine, .sb-diff-amt, .sb-balance-seal {
            animation-timeline: view(); animation-range: entry 0% cover 60%; animation-fill-mode: both;
        }
        .sb-col { animation-name: sb-settle; animation-timing-function: linear; }
        .sb-spine { animation-name: sb-grow-x; animation-timing-function: linear; transform-origin: center; }
        .sb-diff-amt { animation-name: sb-diff-zero; animation-timing-function: linear; }
        .sb-balance-seal { opacity: 0; transform: rotate(-10deg) scale(.4); animation-name: sb-stamp-scroll; animation-timing-function: linear; }
    }
    .sb-connector {
        animation: sb-connector-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 60%;
    }
    .sb-node { animation: sb-node-pulse linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
    .sb-timeline::after {
        transform: scaleX(0); transform-origin: left;
        animation: sb-timeline-fill linear both; animation-timeline: view(); animation-range: entry 0% cover 70%;
    }
    .sb-timeline li b { opacity: .4; animation: sb-medallion-light linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
}
@keyframes sb-drift { to { transform: translateY(-36px); } }
@keyframes sb-settle { from { transform: translateY(calc(var(--drift) * 1px)); } to { transform: none; } }
@keyframes sb-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sb-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sb-diff-zero { from { content: "$412.30"; } }
@keyframes sb-stamp-scroll { to { opacity: 1; transform: rotate(-10deg) scale(1); } }
@keyframes sb-connector-draw { to { stroke-dashoffset: 0; } }
@keyframes sb-node-pulse { 0% { opacity: .3; r: 6; } 100% { opacity: 1; r: 8; } }
@keyframes sb-timeline-fill { to { transform: scaleX(1); } }
@keyframes sb-medallion-light { to { opacity: 1; } }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .sb-balance-sticky, .sb-shared, .sb-timeline, .sb-pillars, .sb-footer-inner {
        grid-template-columns: minmax(0, 1fr);
    }
    .sb-lede { max-width: 100%; }
    .sb-hero { min-height: 0; }
    .sb-plate { max-width: 340px; margin: 0 auto; }
    .sb-balance { height: auto; }
    .sb-balance-sticky { position: relative; height: auto; padding: 40px 20px; }
    .sb-ledger { grid-template-columns: 1fr; }
    .sb-spine { position: static; height: 2px; margin-top: 10px; transform: none; }
    .sb-diff { flex-wrap: wrap; row-gap: 16px; }
    .sb-balance-seal { width: 72px; height: 72px; font-size: .5rem; letter-spacing: .01em; }
    .sb-balance-seal span { white-space: nowrap; padding: 0 2px; }
    .sb-footer-inner { grid-template-columns: 1fr 1fr; }
    .sb-bento-grid { grid-template-columns: minmax(0, 1fr); }
    .sb-tile-lg, .sb-tile-wide, .sb-tile-full { grid-column: span 1; grid-row: span 1; }
    .sb-tile-lg .sb-tile-art { min-height: 216px; }
    /* 4 tabs ("North St." / "Harbor" / "Franchise" / "All") at 358px content width don't fit one
       row at desktop sizing - shrink padding/gap and let the strip wrap instead of clipping the
       last tab. Each tab now animates its own background, so there's no separate pill to run
       off the edge. */
    .sb-tile-art-app .sb-art-switch { flex-wrap: wrap; gap: 6px; row-gap: 8px; }
    .sb-tile-art-app .sb-art-tab { font-size: .7rem; padding: 6px 10px; }
    .sb-tile-art-app .sb-art-panel { flex-basis: 130px; }
    .sb-panel-row { font-size: .8rem; }
    .sb-panel-head span { font-size: .74rem; }
    .sb-timeline::before, .sb-timeline::after { display: none; }
    .sb-pillars article { padding: 32px 28px; }
    .sb-numeral { font-size: 4rem; top: 2px; right: 12px; }
    .sb-shared-diagram { display: none; }
}
/* Compact mobile nav: one brand+SignIn row plus a short horizontally-scrollable link strip,
   instead of 3 stacked flex-wrap rows eating ~150px of the viewport. A pure-CSS <details> menu
   was considered but rejected: Playwright drives these links with real ClickAsync() by exact
   accessible name, and a link hidden inside a closed <details> is not clickable/actionable, so
   the tests would fail. All 4 links plus Sign In stay in the DOM, visible, and pressable - just
   in a ~34px scrollable strip instead of full-width wrapped rows. */
@media (max-width: 600px) {
    .sb-nav {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand signin" "links links";
        row-gap: 8px; align-items: center; flex-wrap: unset;
    }
    .sb-nav-brand { grid-area: brand; font-size: 1rem; }
    .sb-signin-btn { grid-area: signin; }
    .sb-nav-links {
        grid-area: links; min-width: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        gap: 18px; padding-bottom: 2px; max-height: 34px;
    }
    .sb-nav-links a { white-space: nowrap; }
}
@media (max-width: 480px) {
    .sb-nav { padding: 12px 16px; }
    .sb-nav-links { gap: 14px; }
    .sb-hero-grid { padding: 40px 16px 32px; }
    .sb-bento, .sb-shared, .sb-migration, .sb-pricing, .sb-cta, .sb-pillars-inner { padding-left: 16px; padding-right: 16px; }
}

/* ---- reduced motion: force final visible states ---- */
@media (prefers-reduced-motion: reduce) {
    .sb-stroke, .sb-hero-wash, .sb-col, .sb-spine, [data-reveal],
    .sb-rosette-spin, .sb-ticker-track, .sb-vig-row, .sb-vig-rule, .sb-seal,
    .sb-art-tab, .sb-panel-card, .sb-art-line, .sb-art-filter, .sb-art-check, .sb-art-bar, .sb-art-file, .sb-art-ledger,
    .sb-connector, .sb-node, .sb-timeline::after, .sb-timeline li b, .sb-diff-amt, .sb-balance-seal {
        animation: none !important;
        transition: none !important;
    }
    .sb-stroke, .sb-connector { stroke-dashoffset: 0; }
    .sb-hero-wash, .sb-col, [data-reveal], .sb-vig-row, .sb-seal, .sb-balance-seal, .sb-art-check {
        opacity: 1; transform: none;
    }
    .sb-vig-rule, .sb-timeline::after { transform: scaleX(1); }
    .sb-spine { transform: scaleX(1); }
    .sb-seal { transform: rotate(-14deg) scale(1); }
    .sb-balance-seal { transform: rotate(-10deg) scale(1); }
    /* Without motion, freeze the bento mini-app on its first state (tab 1 active, panel A shown)
       instead of every tab/card sitting at their animation's 0% base style (all muted, all
       opacity:0) - otherwise the tile would render with no visible card at all. */
    .sb-art-tab:first-child { background: var(--ink); color: #f7f3ea; }
    .sb-panel-a { opacity: 1; transform: none; }
}