/**
 * zebill — Public Marketing Home Page ("Ledger, Reimagined")
 *
 * Deliberately its own file, its own scope. Reuses the app's real "Ink &
 * Citrine" palette and type (Manrope + IBM Plex Mono — see
 * frontend-theme.css's own header comment for the design system this is
 * derived from) but never loads or is loaded alongside that file — every
 * rule here is scoped under .sis-home, and every custom property is
 * declared fresh on .sis-home rather than assumed from :root or .sis-app,
 * so this can be edited freely with zero risk to the authenticated app's
 * own styles, and vice versa.
 *
 * Concept: the page reads like an oversized, elegantly typeset ledger page
 * — warm paper canvas, ink-navy bands for emphasis, a single citrine accent
 * spent with intent, IBM Plex Mono used the way an accountant would use it
 * (invoice numbers, figures, an IRN tag) rather than as decoration.
 */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../vendor/fonts/manrope-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../vendor/fonts/plexmono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/fonts/plexmono-600.woff2') format('woff2');
}

.sis-home {
    /* ---- Palette (same values as frontend-theme.css's .sis-app — kept as
       plain literals here, not shared variables, so this file has zero
       dependency on that one ever loading) ---- */
    --h-ink:          #14141f;
    --h-ink-soft:     #1d1e2c;
    --h-ink-line:     #2a2b3d;
    --h-paper:        #f6f4ee;
    --h-paper-raised: #fffdf9;
    --h-citrine:      #e8a23a;
    --h-citrine-dark: #c8811f;
    --h-citrine-ink:  #4a2e07;
    --h-teal:         #1f9c8e;
    --h-coral:        #e2574c;
    --h-text:         #1c1b22;
    --h-text-soft:    #6b6a76;
    --h-border:       #e5e1d3;
    --h-radius-sm:    8px;
    --h-radius-md:    14px;
    --h-radius-lg:    22px;
    --h-ease:         cubic-bezier(.16,.84,.32,1);

    display: block;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--h-text);
    background: var(--h-paper);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow-x: hidden;
}
.sis-home * { box-sizing: border-box; }
.sis-home a { text-decoration: none; }
/* :not(.sis-home-btn) — a plain ".sis-home a" reset would otherwise beat
   .sis-home-btn-ink/.sis-home-btn-ghost-on-ink/etc.'s own `color` (an extra
   element selector outweighs one extra class), silently overriding their
   intended text colour with whatever ink-dark text colour the surrounding
   section inherits — invisible dark-on-dark button text until :hover
   changes the background. Excluding buttons from this reset instead of
   fighting it with !important keeps every button variant's own color
   declaration authoritative. */
.sis-home a:not(.sis-home-btn) { color: inherit; }
.sis-home ul { margin: 0; padding: 0; list-style: none; }
.sis-home img { max-width: 100%; display: block; }
.sis-home .sis-home-mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Respect reduced-motion before anything else defines a keyframe. */
@media (prefers-reduced-motion: reduce) {
    .sis-home *, .sis-home *::before, .sis-home *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =======================================================================
   Reveal-on-scroll — .is-visible toggled by home.js's IntersectionObserver.
   Delay comes from the data-sis-reveal-delay attribute via inline
   --h-reveal-delay (set by JS), so markup controls stagger order without
   a wall of nth-child CSS.
   ======================================================================= */
.sis-home [data-sis-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--h-ease), transform .7s var(--h-ease);
    transition-delay: var(--h-reveal-delay, 0ms);
}
.sis-home [data-sis-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* =======================================================================
   Nav
   ======================================================================= */
.sis-home-nav-sentinel { height: 1px; }
.sis-home-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(246,244,238,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, box-shadow .3s ease, padding .25s ease;
}
.sis-home-nav.is-stuck {
    border-color: var(--h-border);
    box-shadow: 0 8px 24px rgba(20,20,31,.06);
}
.sis-home-nav-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: padding .25s ease;
}
.sis-home-nav.is-stuck .sis-home-nav-inner { padding-top: 12px; padding-bottom: 12px; }

.sis-home-brand { display: flex; align-items: center; }
.sis-home-brand-logo { height: 34px; width: auto; transition: height .25s ease; }
.sis-home-nav.is-stuck .sis-home-brand-logo { height: 28px; }

.sis-home-nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; font-weight: 600; font-size: 14.5px; color: var(--h-text-soft); }
.sis-home-nav-links a:not(.sis-home-btn) { position: relative; transition: color .2s ease; }
.sis-home-nav-links a:not(.sis-home-btn):hover { color: var(--h-ink); }
.sis-home-nav-links a:not(.sis-home-btn)::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
    background: var(--h-citrine-dark); transition: right .25s var(--h-ease);
}
.sis-home-nav-links a:not(.sis-home-btn):hover::after { right: 0; }

.sis-home-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; margin-left: auto; background: none; border: none; cursor: pointer; padding: 0; }
.sis-home-nav-toggle span { display: block; width: 100%; height: 2px; background: var(--h-ink); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.sis-home-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sis-home-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sis-home-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =======================================================================
   Buttons
   ======================================================================= */
.sis-home-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    white-space: nowrap;
    transition: transform .2s var(--h-ease), box-shadow .2s var(--h-ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.sis-home-btn:hover { transform: translateY(-2px); }
.sis-home-btn-sm { padding: 9px 18px; font-size: 13.5px; }
.sis-home-btn-block { width: 100%; margin-top: 18px; }
.sis-home-btn-citrine { background: var(--h-citrine); color: var(--h-citrine-ink); box-shadow: 0 10px 24px rgba(200,129,31,.28); }
.sis-home-btn-citrine:hover { background: var(--h-citrine-dark); box-shadow: 0 14px 28px rgba(200,129,31,.36); }
.sis-home-btn-ink { background: var(--h-ink); color: #f0efe9; }
.sis-home-btn-ink:hover { background: var(--h-ink-soft); }
.sis-home-btn-ghost { background: transparent; color: var(--h-ink); border: 1.5px solid var(--h-border); }
.sis-home-btn-ghost:hover { border-color: var(--h-ink); }
.sis-home-btn-ghost-on-ink { background: transparent; color: #f0efe9; border: 1.5px solid rgba(240,239,233,.3); }
.sis-home-btn-ghost-on-ink:hover { border-color: #f0efe9; }

/* =======================================================================
   Hero
   ======================================================================= */
.sis-home-hero { padding: 76px 24px 96px; position: relative; }
.sis-home-hero::before {
    /* Faint ledger rule lines drifting across the paper canvas — texture,
       not noise, and cheap (one repeating gradient, no image asset). */
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(180deg, transparent 0 47px, var(--h-border) 47px 48px);
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent);
    opacity: .5;
    pointer-events: none;
}
.sis-home-hero-inner {
    max-width: 1160px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
    position: relative;
}
.sis-home-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    color: var(--h-citrine-dark);
    margin-bottom: 18px;
}
.sis-home-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--h-citrine); }
.sis-home-kicker-on-ink { color: var(--h-citrine); }

.sis-home-h1 {
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--h-ink);
    margin: 0 0 22px;
}
.sis-home-lede { font-size: 18px; color: var(--h-text-soft); max-width: 46ch; margin: 0 0 32px; }
.sis-home-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero art: hand-built ledger card mockup, not a screenshot. */
.sis-home-hero-art { position: relative; height: 380px; }
.sis-home-mock-card {
    position: absolute;
    border-radius: var(--h-radius-lg);
    background: var(--h-paper-raised);
    border: 1px solid var(--h-border);
    box-shadow: 0 30px 60px -20px rgba(20,20,31,.22);
}
.sis-home-mock-back {
    inset: 26px 0 0 26px;
    background: linear-gradient(155deg, var(--h-ink), var(--h-ink-soft));
    transform: rotate(4deg);
}
.sis-home-mock-front {
    inset: 0 26px 26px 0;
    padding: 26px 24px;
    animation: sis-home-float 6s ease-in-out infinite;
}
@keyframes sis-home-float {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50%      { transform: translateY(-12px) rotate(-1.2deg); }
}
.sis-home-mock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.sis-home-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--h-citrine); }
.sis-home-mock-num { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--h-text-soft); }
.sis-home-mock-line { height: 9px; border-radius: 5px; background: var(--h-border); margin-bottom: 10px; }
.sis-home-mock-rule { height: 1px; background: var(--h-border); margin: 16px 0; }
.sis-home-mock-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sis-home-mock-row span { height: 8px; border-radius: 4px; background: var(--h-border); }
.sis-home-mock-row span:last-child { background: rgba(200,129,31,.35); }
.sis-home-mock-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--h-ink); }
.sis-home-mock-total span { font-size: 12px; color: var(--h-text-soft); text-transform: uppercase; letter-spacing: .06em; }
.sis-home-mock-total strong { font-family: 'IBM Plex Mono', monospace; font-size: 18px; color: var(--h-ink); }
.sis-home-mock-stamp {
    position: absolute; top: 22px; right: -6px;
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--h-teal); border: 2px solid var(--h-teal); border-radius: 6px;
    padding: 3px 10px; transform: rotate(8deg);
}
.sis-home-mock-qr {
    position: absolute; left: -18px; bottom: -18px;
    background: var(--h-paper-raised); border: 1px solid var(--h-border); border-radius: var(--h-radius-sm);
    padding: 10px; box-shadow: 0 16px 32px -12px rgba(20,20,31,.25);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    animation: sis-home-float 6s ease-in-out infinite; animation-delay: -3s;
}
.sis-home-mock-qr span { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--h-text-soft); letter-spacing: .03em; }
.sis-home-mock-qr-grid {
    width: 56px; height: 56px;
    background-image:
        linear-gradient(0deg, var(--h-ink) 22%, transparent 22%, transparent 78%, var(--h-ink) 78%),
        linear-gradient(90deg, var(--h-ink) 22%, transparent 22%, transparent 78%, var(--h-ink) 78%);
    background-size: 14px 14px;
    background-color: var(--h-paper-raised);
    border: 2px solid var(--h-ink);
}
@media (prefers-reduced-motion: reduce) {
    .sis-home-mock-front, .sis-home-mock-qr { animation: none; }
}

/* =======================================================================
   Stat strip — icon-badged cards on the ink band, each its own
   [data-sis-reveal] target (staggered via data-sis-reveal-delay in the
   template) instead of one flat fade for the whole strip, plus a hover
   lift/glow on the icon badge for a touch of "alive" feel at idle.
   ======================================================================= */
.sis-home-stats { background: var(--h-ink); position: relative; overflow: hidden; }
.sis-home-stats::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 900px; height: 900px;
    background: radial-gradient(circle, rgba(232,162,58,.08), transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.sis-home-stats-inner {
    max-width: 1160px; margin: 0 auto; padding: 52px 24px;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
    position: relative;
}
.sis-home-stat { text-align: center; padding: 0 12px; }
.sis-home-stat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(232,162,58,.1);
    color: var(--h-citrine);
    transition: transform .35s var(--h-ease), background .35s ease, box-shadow .35s ease;
}
.sis-home-stat-icon svg { width: 24px; height: 24px; }
.sis-home-stat:hover .sis-home-stat-icon {
    transform: translateY(-4px) scale(1.06);
    background: rgba(232,162,58,.18);
    box-shadow: 0 10px 24px rgba(232,162,58,.22);
}
.sis-home-stat strong { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 600; color: #fdfcf8; margin-bottom: 4px; }
.sis-home-stat-caption { font-size: 13px; color: #a5a4b3; }

/* =======================================================================
   Section shell / headings (shared: Capabilities, Pricing)
   ======================================================================= */
.sis-home-section { padding: 96px 24px; }
.sis-home-section-inner { max-width: 1160px; margin: 0 auto; }
.sis-home-section-head { max-width: 640px; margin: 0 0 52px; }
.sis-home-h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.015em; color: var(--h-ink); margin: 0; line-height: 1.15; }
.sis-home-h2-on-ink { color: #fdfcf8; }

.sis-home-check-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; margin-bottom: 12px; color: var(--h-text); }
.sis-home-check-list svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--h-teal); }
.sis-home-check-list-on-ink li { color: #d8d6e0; }

/* Feature Highlights carousel. The card visuals live on each SLIDE (not
   one shared wrapper) so that on wide screens three can be on stage at
   once with the centre one visually promoted — see the min-width: 900px
   block below. The viewport (.sis-home-feature-card) is just a clipping
   frame; the chevrons flank it in solid ink so they read as controls, not
   background texture (their previous paper-on-paper styling was nearly
   invisible against the section background — that was the actual bug).
   JS (home.js's initFeatureCarousel) measures real pixel offsets and
   drives .track's transform + .is-active classes; every visual is
   CSS-owned. */
.sis-home-feature-carousel { max-width: 820px; margin: 0 auto; }
.sis-home-feature-stage { display: flex; align-items: center; gap: 18px; }

.sis-home-feature-card {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 200px;
    border-radius: var(--h-radius-md);
    overflow: hidden;
}
.sis-home-feature-mark {
    position: absolute; top: 14px; right: 18px; width: 46px; height: 46px;
    color: var(--h-citrine); opacity: .10; pointer-events: none; z-index: 1;
}
.sis-home-feature-mark svg { width: 100%; height: 100%; }

/* Fixed height end to end (card -> track -> slide) so the box never
   reflows as autoplay cycles through slides of different text length —
   content re-centers inside a constant frame instead of resizing it. */
.sis-home-feature-track { display: flex; height: 100%; transition: transform .5s var(--h-ease); }
.sis-home-feature-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 38px 64px;
    text-align: center;
    border-radius: var(--h-radius-md);
    background: var(--h-paper-raised);
    border: 1px solid var(--h-border);
    box-shadow: 0 24px 44px -28px rgba(20,20,31,.22);
    transition: transform .5s var(--h-ease), opacity .5s var(--h-ease), box-shadow .5s var(--h-ease);
}
.sis-home-feature-slide::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: var(--h-radius-md) var(--h-radius-md) 0 0;
    background: linear-gradient(90deg, var(--h-citrine), var(--h-citrine-dark));
}
/* The centred/emphasis box earns the bold ink cap instead of the section
   itself — everyone else keeps the quieter citrine gradient strip. */
.sis-home-feature-slide.is-active::before {
    height: 4px;
    background: var(--h-ink);
}
.sis-home-feature-slide h3 {
    margin: 0; font-size: 19px; font-weight: 800; color: var(--h-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sis-home-feature-slide p {
    margin: 0; font-size: 14.5px; color: var(--h-text-soft); line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Chevrons — solid ink circles with a citrine glyph, outside the card and
   never touching its border. High-contrast on purpose: the previous
   paper-on-paper version blended straight into the page. */
.sis-home-feature-arrow {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--h-ink); border: 1.5px solid var(--h-ink);
    color: var(--h-citrine); cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(20,20,31,.45);
    transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.sis-home-feature-arrow svg { width: 19px; height: 19px; }
.sis-home-feature-arrow:hover { background: var(--h-citrine-dark); border-color: var(--h-citrine-dark); color: var(--h-ink); transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(200,129,31,.4); }
.sis-home-feature-arrow:active { transform: scale(.92); }

/* Dots — a distinct strip below the card+chevrons row, clearly separated
   by real margin rather than crammed against anything. */
.sis-home-feature-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 26px; }
.sis-home-feature-dot {
    width: 8px; height: 8px; border-radius: 999px; padding: 0;
    background: var(--h-border); border: none; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.sis-home-feature-dot:hover { background: var(--h-citrine-dark); }
.sis-home-feature-dot.is-active { background: var(--h-citrine); transform: scale(1.3); }

/* This section only: a bold citrine band rather than the paper background
   every other section uses — the carousel is the star here, so it gets the
   theme's loudest colour instead of another white panel. The bold-ink
   accent lives on the centred carousel box itself (see the .is-active
   ::before override above), not the section edge. The kicker switches to
   white because citrine-on-citrine would vanish; the heading is already
   ink and reads fine against citrine as-is. Dots switch to ink too — the
   default citrine active-dot would disappear against this background
   exactly like the kicker would. */
#features {
    background: var(--h-citrine);
}
#features .sis-home-kicker { color: #fdfcf8; }
#features .sis-home-kicker::before { background: #fdfcf8; }
#features .sis-home-feature-dot { background: rgba(20,20,31,.28); }
#features .sis-home-feature-dot:hover { background: var(--h-ink); }
#features .sis-home-feature-dot.is-active { background: var(--h-ink); }

/* Wide screens: three slides on stage at once, the centred one promoted
   (full size/opacity/shadow), its neighbours peeking in smaller and dimmed
   — a coverflow-style emphasis rather than a flat filmstrip. home.js
   measures real layout (offsetLeft/clientWidth) to keep the active slide
   centred, so this works with any gap/width here without matching JS math
   to it by hand. */
@media (min-width: 900px) {
    .sis-home-feature-carousel { max-width: 1080px; }
    .sis-home-feature-card { height: 230px; }
    .sis-home-feature-mark { display: none; }
    /* Centred, not stretched: each slide is sized a bit shorter than the
       track (see height: 94% below) so the active slide's scale(1.06)
       emphasis has real room to grow into without exceeding this
       still-fully-clipped box — nothing spills past the edge, so there's
       nothing to leak into page scroll. */
    .sis-home-feature-track { gap: 24px; align-items: center; }
    .sis-home-feature-slide {
        height: 94%;
        flex: 0 0 calc((100% - 48px) / 3);
        padding: 30px 26px;
        opacity: .4;
        transform: scale(.86);
        box-shadow: 0 14px 30px -20px rgba(20,20,31,.18);
    }
    .sis-home-feature-slide h3, .sis-home-feature-slide p { white-space: normal; }
    .sis-home-feature-slide h3 { font-size: 16.5px; }
    .sis-home-feature-slide p { font-size: 13px; }
    .sis-home-feature-slide.is-active {
        opacity: 1;
        transform: scale(1.06);
        box-shadow: 0 30px 54px -22px rgba(20,20,31,.28);
        z-index: 2;
    }
    .sis-home-feature-slide.is-active h3 { font-size: 20px; }
    .sis-home-feature-slide.is-active p { font-size: 14.5px; }
}

/* =======================================================================
   Capabilities grid
   ======================================================================= */
.sis-home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sis-home-card {
    background: var(--h-paper-raised);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-md);
    padding: 26px 22px;
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--h-ease), box-shadow .3s var(--h-ease), border-color .3s ease;
}
.sis-home-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--h-citrine), var(--h-citrine-dark));
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--h-ease);
}
.sis-home-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -18px rgba(20,20,31,.22); border-color: transparent; }
.sis-home-card:hover::before { transform: scaleX(1); }
.sis-home-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--h-ink); color: var(--h-citrine);
    margin-bottom: 16px;
}
.sis-home-card-icon svg { width: 22px; height: 22px; }
.sis-home-card h3 { font-size: 16px; font-weight: 700; color: var(--h-ink); margin: 0 0 8px; }
.sis-home-card p { font-size: 14px; color: var(--h-text-soft); margin: 0; line-height: 1.55; }

/* =======================================================================
   Compliance spotlight
   ======================================================================= */
.sis-home-compliance { background: var(--h-ink); padding: 96px 24px; position: relative; overflow: hidden; }
.sis-home-compliance::before {
    content: ''; position: absolute; top: -40%; right: -10%; width: 60%; height: 180%;
    background: radial-gradient(circle, rgba(232,162,58,.14), transparent 65%);
    pointer-events: none;
}
.sis-home-compliance-inner {
    max-width: 1160px; margin: 0 auto; position: relative;
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center;
}
.sis-home-compliance-copy p { font-size: 16px; color: #c6c5d3; max-width: 46ch; margin: 18px 0 26px; }
.sis-home-compliance-art { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sis-home-irn-tag {
    font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--h-citrine);
    border: 1px solid rgba(232,162,58,.4); border-radius: 999px; padding: 9px 18px;
    background: rgba(232,162,58,.08);
}
.sis-home-mock-qr-lg { position: static; animation: sis-home-float 6s ease-in-out infinite; background: var(--h-ink-soft); border-color: var(--h-ink-line); }
.sis-home-mock-qr-lg .sis-home-mock-qr-grid { width: 108px; height: 108px; background-color: var(--h-ink-soft); border-color: #f0efe9; background-image:
    linear-gradient(0deg, #f0efe9 22%, transparent 22%, transparent 78%, #f0efe9 78%),
    linear-gradient(90deg, #f0efe9 22%, transparent 22%, transparent 78%, #f0efe9 78%);
    background-size: 27px 27px;
}

/* =======================================================================
   Pricing
   ======================================================================= */
.sis-home-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sis-home-price-card {
    background: var(--h-paper-raised);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-lg);
    padding: 34px 28px;
    position: relative;
    transition: transform .3s var(--h-ease), box-shadow .3s var(--h-ease);
}
.sis-home-price-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -20px rgba(20,20,31,.2); }
.sis-home-price-card.is-featured { background: var(--h-ink); border-color: var(--h-ink); box-shadow: 0 24px 48px -16px rgba(20,20,31,.35); }
.sis-home-price-card.is-featured h3,
.sis-home-price-card.is-featured .sis-home-price,
.sis-home-price-card.is-featured .sis-home-price-desc,
.sis-home-price-card.is-featured .sis-home-check-list li { color: #f0efe9; }
.sis-home-price-card.is-featured .sis-home-check-list svg { color: var(--h-citrine); }
.sis-home-price-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--h-citrine); color: var(--h-citrine-ink);
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 999px;
}
.sis-home-price-card h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--h-text-soft); margin: 0 0 14px; }
.sis-home-price { font-family: 'IBM Plex Mono', monospace; font-size: 34px; font-weight: 600; color: var(--h-ink); margin-bottom: 6px; }
.sis-home-price span { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 500; color: var(--h-text-soft); }
/* The leading "From" qualifier (Starter's price is a floor, not a flat
   fee — see pricing_tiers()) sits on its own line above the big price
   figure, styled like a small caption rather than inline text. */
.sis-home-price-prefix { display: block; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--h-citrine-dark); margin-bottom: 2px; }
.sis-home-price-card.is-featured .sis-home-price-prefix { color: var(--h-citrine); }
.sis-home-price-desc { font-size: 13.5px; color: var(--h-text-soft); margin: 0 0 22px; }
.sis-home-price-card .sis-home-check-list { margin-bottom: 8px; }
.sis-home-price-footnote { text-align: center; font-size: 13px; color: var(--h-text-soft); margin: 40px 0 0; }

/* =======================================================================
   Final CTA
   ======================================================================= */
.sis-home-final-cta {
    background: linear-gradient(155deg, var(--h-ink), var(--h-ink-soft));
    padding: 92px 24px; text-align: center;
}
.sis-home-final-cta h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.015em; color: #fdfcf8; margin: 0 0 30px; }
.sis-home-final-cta .sis-home-cta-row { justify-content: center; }

/* Closing strip — same ink tone as the Final CTA above it (so the page
   doesn't hard-cut back to paper right before the theme's own footer
   takes over), just a touch darker with a hairline separator. Shared
   markup (templates/partials/frontend-footer.php) with the authenticated
   app's own footer — .sis-footer-copyright is the class the partial
   actually renders; scoped under .sis-home here per this file's own
   convention (every rule scoped under .sis-home, never a bare class) so
   it can never leak into the app-shell context, which styles the exact
   same class completely differently (see frontend-theme.css). */
.sis-home .sis-footer-copyright {
    background: var(--h-ink);
    border-top: 1px solid var(--h-ink-line);
    padding: 20px 24px;
    text-align: center;
    font-size: 12.5px;
    color: #8b8a9a;
}

/* =======================================================================
   Responsive
   ======================================================================= */
@media (max-width: 980px) {
    .sis-home-hero-inner { grid-template-columns: 1fr; }
    .sis-home-hero-art { height: 320px; margin-top: 20px; }
    .sis-home-compliance-inner { grid-template-columns: 1fr; text-align: center; }
    .sis-home-compliance-copy p { margin-inline: auto; }
    .sis-home-check-list li { justify-content: center; }
    .sis-home-grid { grid-template-columns: repeat(2, 1fr); }
    .sis-home-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
    /* A ~90-character description simply can't stay on one line on a phone
       screen without going illegibly small — better to wrap it than to
       truncate real content with an ellipsis. Desktop/tablet keep the
       clean single-line-each look from the max-width frame above. Arrows
       shrink rather than disappear — losing them would leave only the
       dots to navigate 18 slides, a worse experience than a smaller button. */
    .sis-home-feature-stage { gap: 8px; }
    .sis-home-feature-arrow { width: 34px; height: 34px; }
    .sis-home-feature-arrow svg { width: 16px; height: 16px; }
    .sis-home-feature-mark { width: 34px; height: 34px; top: 10px; right: 12px; }
    .sis-home-feature-slide { padding: 26px 14px; }
    .sis-home-feature-slide h3, .sis-home-feature-slide p { white-space: normal; }
}
@media (max-width: 720px) {
    .sis-home-nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--h-paper-raised); border-bottom: 1px solid var(--h-border);
        padding: 12px 24px 20px; margin-left: 0;
        max-height: 0; overflow: hidden; opacity: 0;
        transition: max-height .3s var(--h-ease), opacity .25s ease;
    }
    .sis-home-nav-links a:not(.sis-home-btn) { padding: 10px 0; }
    .sis-home-nav-links.is-open { max-height: 320px; opacity: 1; }
    .sis-home-nav-toggle { display: flex; }
    .sis-home-nav-links .sis-home-btn { margin-top: 8px; align-self: flex-start; }

    .sis-home-hero { padding: 52px 20px 64px; }
    .sis-home-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
    .sis-home-section { padding: 64px 20px; }
    .sis-home-grid { grid-template-columns: 1fr; }
    .sis-home-compliance { padding: 64px 20px; }
    .sis-home-final-cta { padding: 64px 20px; }
    .sis-home-final-cta .sis-home-cta-row { flex-direction: column; align-items: center; }
}