/* ===========================================================================
   Home page only - loaded through the layout's optional "Styles" section, and every rule is scoped to
   .page-home, so no other page (all share _Layout) can pick any of it up.

   Colours come from the site tokens (site.css), so the page follows the light/dark theme toggle like
   every other page. The brand pieces that used to live here - gradient buttons, sentence-case eyebrows,
   flat cards, the blue-to-green CTA band - moved to site.css when the rebrand went site-wide.
   =========================================================================== */

/* Sections on the alternate background get a hairline, so the bands read as bands in both themes. */
.page-home .bg-alt { border-top: 1px solid var(--ssp-line); border-bottom: 1px solid var(--ssp-line); }
.page-home .check-list li i { color: var(--ssp-success); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.page-home .home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.25rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}
/* The light comes from the screens: a single glow behind the stage, nothing else. */
.page-home .home-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: min(900px, 90vw);
    aspect-ratio: 1;
    right: -12%;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(closest-side, rgba(59, 130, 255, .20), rgba(34, 197, 94, .07) 55%, transparent 72%);
    pointer-events: none;
}

.page-home .home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.page-home .home-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .8rem .38rem .65rem;
    border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius-pill);
    background: var(--ssp-card);
    color: var(--ssp-text);
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: 1.4rem;
}
.page-home .home-status-dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--ssp-green);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
}

.page-home .home-hero h1 {
    font-family: var(--ssp-font-head);
    font-weight: 800;
    font-size: clamp(2.4rem, 4.1vw, 3.75rem); /* sized so each line fits its half: 3 lines, never 5 */
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--ssp-heading);
    margin: 0 0 1.4rem;
}
/* Each line is its own mask, so the entrance can raise the words from below a clean edge. */
.page-home .home-hero h1 [data-hero-line] { display: block; overflow: hidden; padding-bottom: .06em; }
.page-home .home-hero h1 [data-hero-line] > span { display: block; }

.page-home .home-hero .lead {
    font-size: clamp(1.02rem, 1.3vw, 1.18rem);
    line-height: 1.65;
    color: var(--ssp-text);
    max-width: 34rem;
    margin-bottom: 2rem;
}
.page-home .home-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.page-home .home-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 1.1rem 0 0; color: var(--ssp-muted); font-size: .9rem; }
.page-home .home-hero-meta .btn-link-ssp { font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.page-home .home-hero-meta .btn-link-ssp i { font-size: .75em; }

/* ── Trust strip: four facts in one quiet band under the hero ────────────── */
.page-home .home-trust { border-top: 1px solid var(--ssp-line); border-bottom: 1px solid var(--ssp-line); background: var(--ssp-bg-alt); }
.page-home .home-trust-list { list-style: none; margin: 0; padding: 1.1rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.5rem; }
.page-home .home-trust-list li { display: flex; align-items: center; gap: .65rem; font-size: .9rem; color: var(--ssp-text); }
.page-home .home-trust-list i { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--ssp-success); background: color-mix(in srgb, var(--ssp-green) 12%, transparent); }
.page-home .home-trust-list b { color: var(--ssp-heading); font-weight: 600; }
@media (max-width: 1199px) { .page-home .home-trust-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .page-home .home-trust-list { grid-template-columns: 1fr; gap: .7rem; } }

/* ── The app ─────────────────────────────────────────────────────────────── */
.page-home .home-product-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.page-home .home-callouts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .9rem; }
.page-home .home-callouts li { display: grid; grid-template-columns: 30px 1fr; gap: .8rem; align-items: start; }
.page-home .home-callouts li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 700 .85rem/1 var(--ssp-font-head); color: #fff; background: var(--ssp-grad); }
.page-home .home-callouts b { color: var(--ssp-heading); font-weight: 600; }
.page-home .home-callouts p { margin: .1rem 0 0; color: var(--ssp-muted); font-size: .95rem; }
@media (max-width: 991px) { .page-home .home-product-grid { grid-template-columns: 1fr; } }

/* The stage: the supplied illustration, in a light and a dark version whose grounds are transparent
   (2026-10-06), so it merges into the hero instead of sitting on it as a card - no frame, no shadow, and
   the edges feathered so the art's own swirls fade out rather than stop at a rectangle. */
.page-home .home-stage {
    position: relative;
    width: 100%;
}
.page-home .home-stage-img {
    display: block;
    width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
    mask-composite: intersect;
}
.page-home .hero-art-dark { display: none; }
[data-theme="dark"] .page-home .hero-art-light { display: none; }
[data-theme="dark"] .page-home .hero-art-dark { display: block; }
/* ── Hero art: a live layer over the illustration ──────────────────────────
   Every position is a % of the 564x446 picture (measured from it): the old S it covers spans x 222-312,
   y 170-254; the arrows run y ~212 from x 146-214 (into the logo) and 320-394 (out to the viewer); the
   badge icons sit at (203,80) (336,80) (332,337) (217,335). The covering logo and its backdrop are
   static, so they are in place with motion off; only the effects move. */
.page-home .hero-art { position: relative; }
.page-home .hero-fx { position: absolute; inset: 0; pointer-events: none; }
.page-home .hero-fx > * { position: absolute; }
.page-home .fx-glow {
    left: 47.34%; top: 47.53%; width: 27%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(37, 99, 235, .22), rgba(34, 197, 94, .12) 55%, transparent 75%);
    opacity: .55;
}
.page-home .fx-logo { left: 39.18%; top: 38.12%; width: 16.49%; height: auto; filter: drop-shadow(0 6px 10px rgba(10, 40, 120, .22)); }
.page-home .fx-pulse {
    top: 47.53%; width: 2.2%; aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.page-home .fx-pulse-in  { left: 26%; width: 1.6%; background: #3B82FF; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 12px 4px rgba(59, 130, 255, .75); }
.page-home .fx-pulse-out { left: 56.7%; width: 1.6%; background: #22C55E; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 12px 4px rgba(34, 197, 94, .75); }
.page-home .fx-badge {
    left: var(--x); top: var(--y); width: 9%; aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.9);
    border-radius: 22%;
    box-shadow: 0 0 0 2px rgba(59, 130, 255, .55), 0 0 18px rgba(59, 130, 255, .45);
    opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .page-home .fx-logo { animation: fx-float 6s ease-in-out infinite; }
    .page-home .fx-glow { animation: fx-breathe 3.2s ease-in-out infinite; }
    .page-home .fx-pulse-in  { animation: fx-run-in 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
    .page-home .fx-pulse-out { animation: fx-run-out 2.6s cubic-bezier(.45, 0, .55, 1) 1.3s infinite; }
    .page-home .fx-badge { animation: fx-badge 6.4s ease-out infinite; }
    .page-home .fx-badge:nth-child(2) { animation-delay: 1.6s; }
    .page-home .fx-badge:nth-child(3) { animation-delay: 3.2s; }
    .page-home .fx-badge:nth-child(4) { animation-delay: 4.8s; }
}
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes fx-breathe { 0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: .9; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes fx-run-in  { 0% { left: 26%; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { left: 37.6%; opacity: 0; } }
@keyframes fx-run-out { 0% { left: 56.7%; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { left: 69.6%; opacity: 0; } }
@keyframes fx-badge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } 8% { opacity: 1; } 22% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } 100% { opacity: 0; } }

/* The dark version is pre-processed (inverted, hue rotated back, ground keyed out), not a CSS filter: a
   filter also inverted the image's shadow into a pale halo, and left a near-black box on the navy page. */
.page-home .home-stage-fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity .9s ease;
}
.page-home .hero-canvas {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    opacity: 0;
    transition: opacity .9s ease;
}
.page-home .home-stage.is-3d .hero-canvas { opacity: 1; }
.page-home .home-stage.is-3d .home-stage-fallback { opacity: 0; }
.page-home .home-stage-chip {
    position: absolute; left: 0; bottom: 2%;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .5rem .9rem;
    border-radius: var(--ssp-radius-pill);
    background: color-mix(in srgb, var(--ssp-card) 86%, transparent);
    border: 1px solid var(--ssp-line);
    color: var(--ssp-text);
    box-shadow: var(--ssp-shadow-sm);
    font-size: .88rem; font-weight: 600;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .9s ease .3s;
}
.page-home .home-stage.is-3d .home-stage-chip { opacity: 1; } /* the SVG draws its own chip */

/* Pre-entrance pose (home.js animates out of it). Only with script and motion allowed, and released by
   CSS alone after 2.5s so the hero can never stay hidden if GSAP fails to load. */
@media (prefers-reduced-motion: no-preference) {
    /* Opacity only: GSAP owns the movement. A CSS transform here is read by GSAP as a pixel offset and
       ADDED to its own, which left every headline line stuck below its mask. */
    html.js .page-home [data-hero-line] > span,
    html.js .page-home [data-hero-enter],
    html.js .page-home [data-hero-stage] { opacity: 0; animation: home-release 0s 4s forwards; } /* 4s: the entrance now waits for the page loader */
}
@keyframes home-release { to { opacity: 1; visibility: visible; } }

@media (max-width: 991px) {
    .page-home .home-hero-grid { grid-template-columns: 1fr; }
    .page-home .home-hero { text-align: left; }
    .page-home .home-stage { max-width: 640px; margin: 0 auto; }
}
@media (max-width: 575px) {
    .page-home .home-hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── How it works: three steps on one line that draws as you scroll ───────── */
.page-home .home-steps { position: relative; }
.page-home .home-steps-track {
    position: absolute;
    left: 16.66%; right: 16.66%;
    top: 22px; /* the centre of the 44px step badge */
    height: 2px;
    background: var(--ssp-line);
    z-index: 0;
}
.page-home .home-steps-line {
    position: absolute; inset: 0;
    background: var(--ssp-grad);
    transform-origin: left center;
}
.page-home .home-step .step-badge {
    position: relative; z-index: 1;
    background: var(--ssp-bg);
    color: var(--ssp-muted);
    border: 2px solid var(--ssp-line);
    transition: border-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.page-home .home-step.is-reached .step-badge {
    border-color: var(--ssp-blue);
    color: var(--ssp-heading);
    box-shadow: 0 0 0 6px rgba(59, 130, 255, .14);
}
.page-home .home-step:last-child.is-reached .step-badge { border-color: var(--ssp-green); box-shadow: 0 0 0 6px rgba(34, 197, 94, .14); }
/* Without the scroll script (no JS, reduced motion) the steps are simply all lit and the line full. */
html:not(.js) .page-home .home-step .step-badge { border-color: var(--ssp-blue); color: var(--ssp-heading); }
@media (prefers-reduced-motion: reduce) {
    .page-home .home-step .step-badge { border-color: var(--ssp-blue); color: var(--ssp-heading); }
}
@media (max-width: 767px) {
    .page-home .home-steps-track { display: none; } /* the steps stack; a horizontal line would lie */
    .page-home .home-step .step-badge { border-color: var(--ssp-blue); color: var(--ssp-heading); }
}

/* ── The split sections' art sits on the page, not in a white frame ───────── */
.page-home .benefit-media img { border-radius: var(--ssp-radius-lg); border: 1px solid var(--ssp-line); }