/* ==========================================================================
   SPOTLIGHT — the shared layer of the public pages (home, Our Data, Pricing, Sign in, Register)
   Owner's pick 2026-10-04: mockup "A · Spotlight" (mockups/home-2026-10-03/src/a*.css), with
   his changes. This file owns what every page shares; page sheets own their own layouts.

   THE GLOW, AND WHY IT IS BUILT THIS WAY (owner changes 1 and 6):
   - Soft without `filter: blur()`. The mockup blurred hard-stop circles; Firefox drew the dark
     theme's blobs with visible edges. Every glow is now a radial gradient whose alpha follows
     (1 - t^2)^2 in 17 stops — a Gaussian-like bump that reaches exactly 0 with zero slope — so
     there is no edge to blur.
   - A stage paints NO background: it sits on the page's own --bg_color, so a section boundary
     has nothing to change. The mockup's hero and band each carried a second background
     (#F6F8FC / #05070D) and `overflow: hidden`, which is where the hard lines came from. That
     tint now lives in the glow's CORE ellipse, which is 0 at the stage's top and bottom.
   - Every glow is sized to stay inside its stage (side glows: --sl-hcap; the core: the
     stage's own ellipse), so the glow is 0 at both edges without a mask. The stage clips
     horizontally only (`overflow-x: clip`): nothing is cut vertically, and no glow can make a
     horizontal scrollbar.
   - Dark mode: deeper core, and a grain tile (img/spotlight/grain.png) at 1/255 that lifts
     half the pixels one level, breaking up the 8-bit rings a dark gradient otherwise shows.
   - The side glows drift slowly; prefers-reduced-motion stops them.
   Measured in Firefox with /tmp/sl-qa/pixels.py (2026-10-04): largest step between adjacent
   pixels in the glow <= 3 levels in both themes, 0 at every section boundary.

   MARKUP (see the API in the workflow hand-off; minimal page):
     <main>
       <section class="sl-stage sl-hero" data-sl-under-nav aria-labelledby="t">
         <div class="sl-glow" aria-hidden="true"></div>
         <h1 class="sl-display" id="t"><span>Let's find your</span> <span class="sl-accent">market fit</span></h1>
         <p class="sl-lede">…</p>
       </section>
       <section class="sl-section"><div class="sl-wrap">…<figure class="sl-visual">…</figure></div></section>
       <section class="sl-stage sl-cta" aria-labelledby="c">
         <div class="sl-glow" aria-hidden="true"></div>
         <h2 class="sl-cta-title" id="c">It pays to be right.</h2>
         <a class="sl-btn" href="/">Find my fit</a>
       </section>
     </main>
     <script src="{% static 'assets/js/components/spotlight.js' %}?v=1"></script>

   COLOUR RULES OUTRANK THE PRODUCT'S `.dark-mode p, span, div, label, h1…h6 { color }`
   (base/typography.css, 0,1,1): every rule here that sets a colour is written `:root .sl-…`
   (0,2,0) or carries two classes.
   ========================================================================== */

@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/anton/Anton-Regular.woff2') format('woff2');
}

/* =========================
     Tokens (light, then dark)
=========================== */
:root {
    --sl-ink: #0B1020;                 /* display type */
    --sl-sub: #3B4759;                 /* ledes on a stage: 9.2:1 on #FAFAF9, 5.0:1 on the light glow core (#475569 measured 4.41:1 there at 390 px) */
    --sl-accent-grad: linear-gradient(92deg, #1D4ED8 12%, #0270AD 88%);   /* >= 3:1 (large text) on the glow behind it: worst 1% of glyph pixels 3.16:1, 360-1710 px, either drift extreme (#0277B8 measured 2.89:1 on phones) */
    --sl-display-font: 'Anton', 'Impact', 'Arial Narrow Bold', 'Arial Narrow', sans-serif;

    /* The glow. CORE = the stage-wide ellipse: blue #2563EB at .30 (inside 85% of the radius)
       over a #DBEAFE wash at .25, alpha (1 - t^2)^2 for each, composited into ONE 17-stop
       gradient — fewer translucent layers, fewer 8-bit rounding steps. */
    --sl-k0: rgb(104 149 242 / .475);  --sl-k1: rgb(104 149 242 / .471);  --sl-k2: rgb(105 150 242 / .460);
    --sl-k3: rgb(107 151 242 / .441);  --sl-k4: rgb(109 153 243 / .415);  --sl-k5: rgb(112 155 243 / .382);
    --sl-k6: rgb(116 157 243 / .343);  --sl-k7: rgb(120 161 244 / .299);  --sl-k8: rgb(126 165 244 / .251);
    --sl-k9: rgb(133 170 245 / .201);  --sl-k10: rgb(142 177 246 / .150); --sl-k11: rgb(156 187 247 / .103);
    --sl-k12: rgb(176 202 249 / .062); --sl-k13: rgb(206 224 253 / .031); --sl-k14: rgb(219 234 254 / .014);
    --sl-k15: rgb(219 234 254 / .004); --sl-k16: rgb(219 234 254 / 0);
    /* The two side glows (R G B) and their peaks */
    --sl-g2: 14 165 233;               /* sky    #0EA5E9 */
    --sl-g3: 99 102 241;               /* indigo #6366F1 */
    --sl-g2-peak: .24;
    --sl-g3-peak: .22;
    --sl-grain: 0;                     /* the grain tile's opacity; dark mode only */

    --sl-btn-bg: #2563EB;              /* white label 5.17:1 */
    --sl-btn-bg-hover: #1D4ED8;        /* 6.70:1 */
    --sl-btn-ink: #FFFFFF;
    --sl-btn-shadow: 0 14px 36px -10px rgba(37, 99, 235, .55);
    --sl-focus: #2563EB;

    --sl-visual-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 28px 70px -28px rgba(30, 64, 175, .38);
    --sl-wrap: 1200px;

    /* How far a [data-sl-under-nav] stage reaches up: the navbar AND the beta / trial banners,
       which sit in flow under it (includes/navigation.html measures both). */
    --sl-pull: calc(var(--nav-height, 60px) + var(--banner-height, 0px));
}

.dark-mode {
    --sl-ink: #F8FAFC;
    --sl-sub: #A3AEC2;                 /* 7.8:1 on #1A1A1A */
    --sl-accent-grad: linear-gradient(92deg, #60A5FA 10%, #67E8F9 90%);

    /* CORE: blue #3B82F6 at .36 over a navy-black #05070D wash at .50 (the mockup's dark stage,
       now 0 at the stage's edges instead of a flat background). Dark is tuned to be exactly as
       soft as light, measured in CIE L* (perceived lightness), not raw levels: the steepest 1% of
       the glow's slopes is 0.072 L* units per px in both themes (the mockup's dark ran 1.8x its light). */
    --sl-k0: rgb(34 72 136 / .680);    --sl-k1: rgb(33 72 136 / .676);    --sl-k2: rgb(33 71 134 / .662);
    --sl-k3: rgb(33 70 132 / .640);    --sl-k4: rgb(32 68 128 / .608);    --sl-k5: rgb(31 65 124 / .567);
    --sl-k6: rgb(29 63 118 / .517);    --sl-k7: rgb(28 59 112 / .458);    --sl-k8: rgb(26 55 105 / .392);
    --sl-k9: rgb(24 51 96 / .321);     --sl-k10: rgb(22 45 85 / .248);    --sl-k11: rgb(18 37 70 / .176);
    --sl-k12: rgb(14 26 50 / .112);    --sl-k13: rgb(7 12 23 / .060);     --sl-k14: rgb(5 7 13 / .027);
    --sl-k15: rgb(5 7 13 / .007);      --sl-k16: rgb(5 7 13 / 0);
    --sl-g2: 6 182 212;                /* cyan   #06B6D4 */
    --sl-g3: 79 70 229;                /* indigo #4F46E5 */
    --sl-g2-peak: .18;
    --sl-g3-peak: .24;
    --sl-grain: .004;                  /* = 1/255, the compositor's smallest step */

    --sl-btn-bg: #2563EB;
    --sl-btn-bg-hover: #1D4ED8;
    --sl-btn-shadow: 0 14px 36px -12px rgba(0, 0, 0, .7);
    --sl-focus: #60A5FA;

    --sl-visual-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px -26px rgba(0, 0, 0, .75);
}

/* =========================
     Stage + glow
=========================== */
.sl-stage {
    position: relative;
    isolation: isolate;          /* the glow's z-index -1 stays inside its own stage */
    overflow-x: clip;            /* horizontal only: `clip` keeps overflow-y visible */
    /* The grain's ramps (dark mode), as lengths of the stage, and the mask they make:
       smootherstep (6u^5 - 15u^4 + 10u^3) in eight steps at each end. */
    --sl-fade-top: 30%;
    --sl-fade-bottom: 30%;
    --sl-mask: linear-gradient(to bottom,
        rgb(0 0 0 / 0) 0,
        rgb(0 0 0 / .016) calc(var(--sl-fade-top) * .125),
        rgb(0 0 0 / .104) calc(var(--sl-fade-top) * .25),
        rgb(0 0 0 / .275) calc(var(--sl-fade-top) * .375),
        rgb(0 0 0 / .5) calc(var(--sl-fade-top) * .5),
        rgb(0 0 0 / .725) calc(var(--sl-fade-top) * .625),
        rgb(0 0 0 / .896) calc(var(--sl-fade-top) * .75),
        rgb(0 0 0 / .984) calc(var(--sl-fade-top) * .875),
        rgb(0 0 0 / 1) var(--sl-fade-top),
        rgb(0 0 0 / 1) calc(100% - var(--sl-fade-bottom)),
        rgb(0 0 0 / .984) calc(100% - var(--sl-fade-bottom) * .875),
        rgb(0 0 0 / .896) calc(100% - var(--sl-fade-bottom) * .75),
        rgb(0 0 0 / .725) calc(100% - var(--sl-fade-bottom) * .625),
        rgb(0 0 0 / .5) calc(100% - var(--sl-fade-bottom) * .5),
        rgb(0 0 0 / .275) calc(100% - var(--sl-fade-bottom) * .375),
        rgb(0 0 0 / .104) calc(100% - var(--sl-fade-bottom) * .25),
        rgb(0 0 0 / .016) calc(100% - var(--sl-fade-bottom) * .125),
        rgb(0 0 0 / 0) 100%);
}

/* The glow layer: <div class="sl-glow" aria-hidden="true"></div>, no children.
   - Its background is the CORE (tokens above): one ellipse the size of the stage, 0 at the
     stage's top and bottom, so the stage is tinted without an edge.
   - ::before and ::after are the two side glows.
   No mask and as few translucent layers as possible: every translucent layer composited onto
   an 8-bit surface rounds once, and a masked layer adds an offscreen pass; with four layers
   and a mask the dark glow showed 2-3 level steps (measured 2026-10-04, pixels.py). */
.sl-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse closest-side at 50% var(--sl-core-y, 46%),
        var(--sl-k0) 0%, var(--sl-k1) 6.25%, var(--sl-k2) 12.5%, var(--sl-k3) 18.75%, var(--sl-k4) 25%,
        var(--sl-k5) 31.25%, var(--sl-k6) 37.5%, var(--sl-k7) 43.75%, var(--sl-k8) 50%, var(--sl-k9) 56.25%,
        var(--sl-k10) 62.5%, var(--sl-k11) 68.75%, var(--sl-k12) 75%, var(--sl-k13) 81.25%, var(--sl-k14) 87.5%,
        var(--sl-k15) 93.75%, var(--sl-k16) 100%);
}

/* A side glow = an elliptical radial gradient from its colour to nothing, alpha (1 - t^2)^2 (a
   Gaussian-like bump that reaches 0 with zero slope), centred on (--sl-x, --sl-y) of the
   stage, --sl-size wide and at most --sl-hcap of the stage tall. The cap keeps the glow —
   drift included — inside its stage, so it is 0 at both of the stage's edges. */
.sl-glow::before,
.sl-glow::after {
    --sl-h: min(var(--sl-size), var(--sl-hcap));
    content: "";
    position: absolute;
    display: block;
    width: var(--sl-size);
    height: var(--sl-h);
    left: calc(var(--sl-x) - var(--sl-size) / 2);
    top: calc(var(--sl-y) - var(--sl-h) / 2);
    opacity: var(--sl-peak);
    background: radial-gradient(closest-side,
        rgb(var(--sl-rgb) / 1) 0%, rgb(var(--sl-rgb) / .992) 6.25%, rgb(var(--sl-rgb) / .969) 12.5%,
        rgb(var(--sl-rgb) / .931) 18.75%, rgb(var(--sl-rgb) / .879) 25%, rgb(var(--sl-rgb) / .814) 31.25%,
        rgb(var(--sl-rgb) / .739) 37.5%, rgb(var(--sl-rgb) / .654) 43.75%, rgb(var(--sl-rgb) / .562) 50%,
        rgb(var(--sl-rgb) / .467) 56.25%, rgb(var(--sl-rgb) / .371) 62.5%, rgb(var(--sl-rgb) / .278) 68.75%,
        rgb(var(--sl-rgb) / .191) 75%, rgb(var(--sl-rgb) / .115) 81.25%, rgb(var(--sl-rgb) / .055) 87.5%,
        rgb(var(--sl-rgb) / .015) 93.75%, rgb(var(--sl-rgb) / 0) 100%);
    will-change: transform;
}

/* Geometry: a hero (default) — the core over the headline, sky low left, indigo right. Drift
   moves a glow up by at most 3vw and grows it 8%; the caps leave room for both. */
.sl-glow::before { --sl-rgb: var(--sl-g2); --sl-peak: var(--sl-g2-peak); --sl-x: 15%; --sl-y: 56%; --sl-size: clamp(380px, 56vw, 980px); --sl-hcap: 80%;
                   animation: sl-drift 19s ease-in-out infinite alternate; }
.sl-glow::after  { --sl-rgb: var(--sl-g3); --sl-peak: var(--sl-g3-peak); --sl-x: 86%; --sl-y: 50%; --sl-size: clamp(380px, 54vw, 940px); --sl-hcap: 80%;
                   animation: sl-drift 23s ease-in-out infinite alternate-reverse; }

@keyframes sl-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4vw, -3vw, 0) scale(1.08); }
}

/* Dark mode: the grain — white specks on half the pixels of a 64px tile, at 1/255 (the lowest
   opacity a compositor keeps; Firefox rounds opacity to 1/255). On a dark stage that lifts
   those pixels exactly one level and leaves the rest alone, which breaks the 8-bit contour
   rings. Its own layer, over the glow, faded by the stage's mask. A grey-noise tile drawn
   inside the glow came out at -2..+1 levels instead, past check (b)'s 3-level ceiling.
   Wider than a phone only: on a 390px stage the same glow spans a third of the distance, its
   bands are a third as wide, and there the grain's extra level pushed single pixel pairs to
   3.3 (measured); without it the phone glow tops out at 2.5. */
@media (min-width: 641px) {
    .dark-mode .sl-stage::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: url('../../img/spotlight/grain.png') repeat 0 0 / 64px 64px;
        opacity: var(--sl-grain);
        -webkit-mask-image: var(--sl-mask);
        mask-image: var(--sl-mask);
    }
}

/* =========================
     Hero stage
=========================== */
.sl-hero {
    --sl-pad-top: clamp(56px, 9vh, 104px);
    --sl-pad-bottom: clamp(72px, 11vh, 128px);
    --sl-fade-top: 22%;
    --sl-fade-bottom: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: var(--sl-hero-min, 100svh);
    padding: var(--sl-pad-top) 24px var(--sl-pad-bottom);
    box-sizing: border-box;
    text-align: center;
}

/* A stage that starts under the navbar: it reaches up by the navbar + banners and pads its
   content back down by the same, so content sits where it would have (set --sl-pad-top, not
   padding-top, on a page's own hero). */
.sl-stage[data-sl-under-nav] {
    margin-top: calc(-1 * var(--sl-pull));
    padding-top: calc(var(--sl-pull) + var(--sl-pad-top, 0px));
}

/* =========================
     Type
=========================== */
:root .sl-display {
    margin: 0 0 1.5rem;
    color: var(--sl-ink);
    font-family: var(--sl-display-font);
    font-weight: 400;
    font-size: clamp(3.4rem, 8.4vw, 9.6rem);
    line-height: .9;
    letter-spacing: .005em;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
}
:root .sl-display--page { font-size: clamp(3rem, 7.2vw, 8rem); margin-bottom: 1.6rem; }
:root .sl-display > span { display: block; }
:root .sl-display > span:not(.sl-accent) { color: inherit; }

/* The gradient word(s). `color` AND the fill are restated because the product's dark-mode
   span rule would otherwise paint the word solid. */
:root .sl-accent {
    background-image: var(--sl-accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-bottom: .04em;
}

:root .sl-lede {
    margin: 0 auto 2.2rem;
    max-width: 50rem;
    color: var(--sl-sub);
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    line-height: 1.5;
    text-align: center;
}

/* Section heading (sans, the product's own face) */
.sl-head { margin: 0 auto clamp(40px, 5vw, 64px); max-width: 46rem; text-align: center; }
:root .sl-h2 {
    margin: 0 0 .75rem;
    color: var(--text_color);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 600;
}
:root .sl-h2-sub {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.55;
}

/* =========================
     Layout helpers
=========================== */
.sl-wrap { width: 100%; max-width: var(--sl-wrap); margin-inline: auto; padding-inline: 24px; box-sizing: border-box; }
.sl-section { padding-block: clamp(84px, 9vw, 136px); }

/* =========================
     Primary button
=========================== */
/* An <a class="sl-btn"> meets base/global.css's `a:not(.card)…:hover { color: var(--blue_1)
   !important }` (specificity 0,15,1). The label is painted with -webkit-text-fill-color and the
   icon gets its own colour, so that rule cannot turn the label blue on blue. */
:root .sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.05rem 1.7rem;
    border: 0;
    border-radius: 16px;
    background-color: var(--sl-btn-bg);
    color: var(--sl-btn-ink);
    -webkit-text-fill-color: var(--sl-btn-ink);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--sl-btn-shadow);
    transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
:root .sl-btn--sm { padding: .72rem 1.15rem; border-radius: 12px; font-size: .95rem; font-weight: 600; gap: .5rem; }
:root .sl-btn:hover { background-color: var(--sl-btn-bg-hover); text-decoration: none; }
:root .sl-btn svg, :root .sl-btn i { color: var(--sl-btn-ink); -webkit-text-fill-color: var(--sl-btn-ink); flex: none; }
:root .sl-btn svg { width: 1em; height: 1em; }
:root .sl-btn:focus-visible { outline: 2px solid var(--sl-focus) !important; outline-offset: 3px; }

/* =========================
     Closing band ("IT PAYS TO BE RIGHT.")
=========================== */
.sl-cta {
    --sl-fade-top: 38%;
    --sl-fade-bottom: 38%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(128px, 14vw, 208px) 24px;
    text-align: center;
}
.sl-cta .sl-glow { --sl-core-y: 50%; }
.sl-cta .sl-glow::before { --sl-x: 20%; --sl-y: 54%; --sl-size: clamp(320px, 42vw, 760px); --sl-hcap: 66%; }
.sl-cta .sl-glow::after  { --sl-x: 82%; --sl-y: 48%; --sl-size: clamp(320px, 40vw, 720px); --sl-hcap: 64%; }
:root .sl-cta-title {
    margin: 0 0 2rem;
    color: var(--sl-ink);
    font-family: var(--sl-display-font);
    font-weight: 400;
    font-size: clamp(3rem, 7.4vw, 8rem);
    line-height: .92;
    letter-spacing: .005em;
    text-transform: uppercase;
    text-wrap: balance;
}

/* =========================
     Visual card: the real output, barely framed (owner change 5)
=========================== */
.sl-visual {
    position: relative;
    margin: 0;
    min-width: 0;
    padding: var(--sl-visual-pad, clamp(8px, 1vw, 14px));
    border-radius: 22px;
    background: var(--fg_color);
    box-shadow: var(--sl-visual-shadow);
    overflow: hidden;
}
.sl-visual img { display: block; width: 100%; height: auto; border-radius: 12px; }
:root .sl-visual-cap { margin: .8rem 4px 0; font-size: .82rem; line-height: 1.45; color: var(--text-secondary); }

/* A capture in both themes: give both <img>s the same alt; the hidden one leaves the
   accessibility tree with display: none. */
.sl-shot--dark { display: none !important; }
.dark-mode .sl-shot--light { display: none !important; }
.dark-mode .sl-shot--dark { display: block !important; }

/* =========================
     The navbar over an under-nav stage (spotlight.js)
=========================== */
/* spotlight.js puts `sl-nav-over` on <body> while a [data-sl-under-nav] stage is rendered and
   `sl-scrolled` once the page is 24px down; the bar is clear between those two. Three separate
   rules, because a selector list with an unsupported :has() is dropped whole. */
body.sl-nav-over #navbar.navbar { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
body.sl-nav-over:not(.sl-scrolled) #navbar.navbar {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* First paint, before spotlight.js has run (it adds `sl-js`). */
body:not(.sl-js):has([data-sl-under-nav]) #navbar.navbar {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* An open phone menu keeps its bar. */
body.sl-nav-over:not(.sl-scrolled) #navbar.navbar:has(.dropdown-menu.open) {
    background-color: var(--fg_color);
    border-bottom-color: var(--line_color);
}

/* =========================
     Small screens + motion
=========================== */
@media (max-width: 640px) {
    .sl-hero { --sl-pad-top: 36px; --sl-pad-bottom: 64px; padding-inline: 16px; min-height: 0; }
    .sl-cta { padding: 104px 16px; }
    :root .sl-btn:not(.sl-btn--sm) { padding: .95rem 1.4rem; font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sl-glow::before, .sl-glow::after { animation: none; }
    body.sl-nav-over #navbar.navbar, :root .sl-btn { transition: none; }
}