/* NEURA landing - one unified stylesheet (Cinematic x Vision Pro).
   No override layers: change a token, never stack another rule set. */

/* ============================ 1. TOKENS ============================ */
:root {
    --c-bg-0: #060608;
    --c-bg-1: #0a0a0c;
    --c-bg-2: #101014;
    --c-bg-3: #16161c;
    --c-titanium-1: #1c1c22;
    --c-titanium-2: #26262e;
    --c-line: #2a2a33;
    --c-line-2: #3a3a45;

    --c-ink-0: #f6f7f9;
    --c-ink-1: #c9ccd4;
    --c-ink-2: #9aa0ab;
    --c-ink-3: #6d7380;
    --c-ink-dis: #4a4f59;

    --c-red: #ff2d55;
    --c-red-soft: #ff5c7a;
    --c-red-deep: #c8113a;
    --c-red-ink: #ffd7e0;
    --c-blue: #5b8cff;
    --c-blue-soft: #8fb0ff;
    --c-mauve: #b98cff;
    --c-mauve-soft: #d7bdf7;

    --glass-bg: rgba(255, 255, 255, .045);
    --glass-bg-2: rgba(255, 255, 255, .065);
    --glass-bg-3: rgba(255, 255, 255, .09);
    --glass-bar: rgba(10, 10, 12, .55);
    --glass-bar-2: rgba(10, 10, 12, .78);
    --glass-stroke: rgba(255, 255, 255, .10);
    --glass-stroke-2: rgba(255, 255, 255, .16);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .07);
    --glass-blur: 20px;
    --glass-blur-2: 28px;
    --glass-sat: 140%;

    --blob-blue: radial-gradient(60% 50% at 18% 0%, rgba(91, 140, 255, .14), transparent 70%);
    --blob-mauve: radial-gradient(52% 46% at 86% 8%, rgba(185, 140, 255, .12), transparent 70%);
    --blob-white: radial-gradient(72% 60% at 50% -10%, rgba(255, 255, 255, .06), transparent 72%);

    --tbl-stroke: rgba(255, 45, 85, .55);
    --tbl-stroke-soft: rgba(255, 45, 85, .28);
    --tbl-glow: 0 0 0 1px rgba(255, 45, 85, .18), 0 0 24px rgba(255, 45, 85, .16);
    --tbl-row-hover: rgba(255, 45, 85, .06);
    --tbl-head: rgba(255, 45, 85, .10);

    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 14px;
    --r-lg: 16px;
    --r-xl: 18px;
    --r-pill: 999px;

    --sh-1: var(--glass-hi), 0 10px 30px rgba(0, 0, 0, .45);
    --sh-2: var(--glass-hi), 0 20px 50px rgba(0, 0, 0, .50), 0 44px 96px rgba(0, 0, 0, .40);
    --sh-3: var(--glass-hi), 0 30px 70px rgba(0, 0, 0, .55), 0 70px 140px rgba(0, 0, 0, .42);
    --sh-red: 0 0 32px rgba(255, 45, 85, .45);
    --sh-red-sm: 0 0 18px rgba(255, 45, 85, .35);
    --sh-red-btn: 0 8px 24px rgba(255, 45, 85, .28);

    --e-out: cubic-bezier(.16, 1, .3, 1);
    --e-cine: cubic-bezier(.22, 1, .36, 1);
    --e-inout: cubic-bezier(.65, 0, .35, 1);
    --d-1: 120ms;
    --d-2: 220ms;
    --d-3: 260ms;
    --d-4: 440ms;
    --d-5: 620ms;
    --d-6: 820ms;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 56px;
    --sp-10: 72px;
    --sp-11: 96px;
    --sp-12: 128px;
    --gutter: clamp(16px, 3vw, 40px);
    --sec-y: clamp(56px, 4vw + 34px, 140px);
    --maxw: 1280px;
    --maxw-narrow: 880px;
    --hdr: 64px;

    /* Floating Donate pill: how far it sits from the bottom edge, and the empty band
       the footer keeps so the pill never lands on the rights line or the language links. */
    --fab-offset: clamp(14px, 2.2vw, 28px);
    --fab-clearance: 62px;

    --ff: Helvetica, "Helvetica Neue", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --ff-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --fs-display: clamp(2.5rem, 1.55rem + 4.7vw, 5.75rem);
    --fs-h1: clamp(2rem, 1.35rem + 3.2vw, 3.75rem);
    --fs-h2: clamp(1.5rem, 1.15rem + 1.8vw, 2.5rem);
    --fs-h3: clamp(1.125rem, 1rem + .6vw, 1.375rem);
    --fs-body: clamp(.95rem, .9rem + .25vw, 1.0625rem);
    --fs-sm: .875rem;
    --fs-xs: .8125rem;
    --fs-micro: .6875rem;
    --lh-tight: 1.04;
    --lh-head: 1.16;
    --lh-body: 1.62;
    --tr-display: -.03em;
    --tr-h: -.02em;
    --tr-cap: .12em;
}

/* ============================ 2. BASE ============================ */
*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    background: var(--c-bg-1);
    color: var(--c-ink-1);
    font: 400 var(--fs-body)/var(--lh-body) var(--ff);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hdr) + 18px)
}

body {
    margin: 0;
    overscroll-behavior-y: none;
    overflow-x: hidden
}

img,
svg,
canvas,
video {
    max-width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer
}

:focus-visible {
    outline: 2px solid var(--c-red);
    outline-offset: 2px;
    border-radius: var(--r-xs)
}

::selection {
    background: rgba(255, 45, 85, .32);
    color: #fff
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--c-ink-0);
    font-weight: 700;
    line-height: var(--lh-head);
    letter-spacing: var(--tr-h)
}

p {
    margin: 0
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 99;
    padding: 12px 18px;
    background: var(--c-bg-3);
    border-radius: var(--r-sm)
}

.skip:focus {
    left: 12px;
    top: 12px
}

.wrap {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
    width: 100%
}

.section {
    padding-block: var(--sec-y);
    position: relative
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 45, 85, .35), transparent);
    opacity: 0;
    transition: opacity var(--d-4) var(--e-out)
}

.divider.in {
    opacity: 1
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    font-size: var(--fs-xs);
    color: var(--c-ink-2);
    letter-spacing: .02em
}

.eyebrow i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-red);
    box-shadow: 0 0 10px var(--c-red);
    animation: pulse 2.6s var(--e-inout) infinite
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .45;
        transform: scale(.78)
    }
}

.section-head {
    max-width: var(--maxw-narrow);
    margin-bottom: var(--sp-9)
}

.section-head h2 {
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-4)
}

.section-head p {
    color: var(--c-ink-2)
}

h2 .accent,
h1 .accent {
    color: var(--c-red)
}

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-2);
    border-radius: var(--r-xl)
}

/* ============================ 3. CANVAS / FALLBACK ============================ */
#fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%
}

.fx-fallback {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: none;
    background: var(--blob-blue), var(--blob-mauve), var(--blob-white), linear-gradient(180deg, #060608, #0a0a0c)
}

.fx-fallback.on {
    display: block
}

.fx-fallback i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(246, 247, 249, .5);
    box-shadow: 0 0 8px rgba(255, 255, 255, .35)
}

#page {
    position: relative;
    z-index: 1
}

/* ============================ 4. HEADER ============================ */
.hdr {
    position: fixed;
    inset: 0 0 auto;
    height: var(--hdr);
    z-index: 50;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-5);
    padding-inline: var(--gutter);
    background: var(--glass-bar);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border-bottom: 1px solid var(--glass-stroke);
    transition: background var(--d-2) var(--e-out), backdrop-filter var(--d-2) var(--e-out)
}

.hdr.scrolled {
    background: var(--glass-bar-2);
    backdrop-filter: blur(var(--glass-blur-2)) saturate(var(--glass-sat))
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0
}

.brand svg {
    width: 30px;
    height: 30px;
    border-radius: var(--r-xs)
}

.brand b {
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--c-ink-0);
    font-size: 15px
}

.nav {
    display: flex;
    gap: 26px;
    justify-content: center
}

.nav a {
    position: relative;
    font-size: 13.5px;
    color: var(--c-ink-2);
    padding-block: 6px;
    transition: color var(--d-2) var(--e-out)
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--c-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--d-3) var(--e-cine);
    box-shadow: 0 0 10px rgba(255, 45, 85, .6)
}

.nav a:hover {
    color: var(--c-ink-0)
}

.nav a:hover::after,
.nav a.active::after {
    transform: scaleX(1)
}

.nav a.active {
    color: var(--c-ink-0)
}

.hdr-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0
}

.langs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke)
}

.langs a,
.langs span {
    padding: 5px 9px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--c-ink-3);
    transition: all var(--d-2) var(--e-out)
}

.langs a:hover {
    color: var(--c-ink-0);
    background: var(--glass-bg-2)
}

.langs [aria-current="true"] {
    color: var(--c-ink-0);
    background: var(--glass-bg-3);
    box-shadow: inset 0 -1px 0 var(--c-red)
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--r-sm);
    font-weight: 700;
    font-size: var(--fs-sm);
    white-space: nowrap;
    transition: all var(--d-2) var(--e-out)
}

.btn-primary {
    background: linear-gradient(100deg, var(--c-red), var(--c-red-deep));
    color: #fff;
    box-shadow: var(--sh-red-btn)
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-red)
}

.btn-primary:active {
    transform: scale(.985)
}

.btn-ghost {
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke-2);
    color: var(--c-ink-0)
}

.btn-ghost:hover {
    border-color: rgba(255, 45, 85, .45);
    box-shadow: var(--sh-red-sm);
    transform: translateY(-1px)
}

.btn-sm {
    padding: 9px 15px;
    font-size: 12.5px;
    border-radius: var(--r-sm)
}

/* canonical Donate button (mandatory in every landing header) */
.n-donate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 196, 92, .5);
    color: #ffe7bd;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(100deg, rgba(255, 176, 32, .2), rgba(255, 45, 85, .14));
    box-shadow: 0 0 20px rgba(255, 176, 32, .2);
    transition: all .35s var(--e-cine)
}

.n-donate:hover {
    color: #fff;
    border-color: rgba(255, 214, 130, .95);
    box-shadow: 0 0 32px rgba(255, 176, 32, .5);
    transform: translateY(-1px)
}

.burger {
    display: none;
    width: 40px;
    height: 36px;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke)
}

.burger span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--c-ink-0);
    box-shadow: 0 -5px 0 var(--c-ink-0), 0 5px 0 var(--c-ink-0)
}

.drawer {
    position: fixed;
    top: var(--hdr);
    right: 0;
    width: min(280px, 84vw);
    z-index: 49;
    padding: var(--sp-6);
    background: rgba(12, 12, 16, .92);
    backdrop-filter: blur(var(--glass-blur-2)) saturate(var(--glass-sat));
    border-left: 1px solid var(--glass-stroke);
    border-bottom: 1px solid var(--glass-stroke);
    border-end-start-radius: var(--r-lg);
    transform: translateX(105%);
    transition: transform var(--d-4) var(--e-cine);
    display: grid;
    gap: var(--sp-2)
}

.drawer.open {
    transform: none
}

.drawer a {
    padding: 12px 10px;
    border-radius: var(--r-sm);
    font-weight: 600;
    color: var(--c-ink-0);
    background: var(--glass-bg)
}

.drawer a:hover {
    background: var(--glass-bg-3);
    box-shadow: var(--sh-red-sm)
}

/* ============================ 5. HERO ============================ */
.hero {
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding-top: calc(var(--hdr) + 56px);
    padding-bottom: var(--sp-11)
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-8);
    align-items: center;
    width: 100%
}

.hero-copy {
    grid-column: 1/span 7;
    display: grid;
    gap: var(--sp-6);
    justify-items: start
}

.hero h1 {
    font-size: var(--fs-display);
    letter-spacing: var(--tr-display);
    line-height: var(--lh-tight);
    max-width: 20ch
}

.hero-sub {
    color: var(--c-ink-2);
    max-width: 54ch;
    font-size: clamp(1rem, .95rem + .3vw, 1.15rem)
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3)
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-7);
    margin-top: var(--sp-2)
}

.stats div {
    display: grid;
    gap: 2px
}

.stats b {
    font-size: var(--fs-h3);
    color: var(--c-ink-0);
    letter-spacing: var(--tr-h)
}

.stats span {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--tr-cap);
    color: var(--c-ink-3)
}

.console {
    grid-column: 9/span 4;
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    background: var(--glass-bg-2);
    backdrop-filter: blur(var(--glass-blur-2)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-3)
}

.console h3 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tr-cap);
    color: var(--c-ink-3);
    margin-bottom: var(--sp-4)
}

.console-label {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--tr-cap);
    color: var(--c-ink-3)
}

.console-input {
    margin: 6px 0 var(--sp-5);
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--c-bg-3);
    border: 1px solid var(--glass-stroke);
    font-size: var(--fs-sm);
    color: var(--c-ink-1);
    font-family: var(--ff-mono)
}

.stages {
    display: grid;
    gap: 9px;
    position: relative
}

.stages li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--c-ink-2)
}

.stages i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--glass-stroke-2);
    background: var(--c-bg-3);
    flex-shrink: 0
}

.stages li.on {
    color: var(--c-ink-0)
}

.stages li.on i {
    background: var(--c-red);
    border-color: var(--c-red);
    box-shadow: var(--sh-red-sm);
    animation: pulse 2.6s var(--e-inout) infinite
}

.console-chip {
    margin-top: var(--sp-5);
    display: inline-flex;
    padding: 6px 11px;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke);
    font-size: var(--fs-micro);
    font-family: var(--ff-mono);
    color: var(--c-ink-3)
}

.console-note {
    margin-top: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--c-ink-3)
}

.strip {
    margin-top: var(--sp-11);
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.strip-track {
    display: flex;
    gap: var(--sp-4);
    width: max-content;
    animation: slide 28s linear infinite
}

.strip:hover .strip-track {
    animation-play-state: paused
}

.strip-track span {
    padding: 9px 16px;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke);
    font-size: var(--fs-xs);
    color: var(--c-ink-2);
    white-space: nowrap
}

@keyframes slide {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* ============================ 6. ONE LINER ============================ */
.oneline {
    padding: var(--sp-9) 0
}

.oneline p {
    max-width: 66ch;
    font-size: clamp(1.05rem, 1rem + .55vw, 1.35rem);
    color: var(--c-ink-0);
    border-left: 2px solid var(--c-red);
    padding-left: var(--sp-5);
    box-shadow: -14px 0 34px -20px rgba(255, 45, 85, .6)
}

/* ============================ 7. OUTCOMES ============================ */
.cards {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: repeat(4, 1fr)
}

.card {
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-2);
    transition: all var(--d-2) var(--e-out);
    display: grid;
    gap: var(--sp-3);
    align-content: start
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 45, 85, .45);
    box-shadow: var(--sh-2), var(--sh-red)
}

.card .ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--glass-bg-3);
    border: 1px solid rgba(255, 45, 85, .35);
    color: var(--c-red);
    font-size: 18px
}

.card h3 {
    font-size: var(--fs-h3)
}

.card p {
    color: var(--c-ink-2);
    font-size: var(--fs-sm)
}

.badge {
    justify-self: start;
    padding: 4px 9px;
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid var(--glass-stroke);
    color: var(--c-ink-3);
    background: var(--c-bg-3)
}

.badge.local {
    border-color: rgba(91, 140, 255, .4);
    color: var(--c-blue-soft)
}

.badge.offline {
    border-color: rgba(185, 140, 255, .42);
    color: var(--c-mauve-soft)
}

.badge.key {
    border-color: rgba(255, 45, 85, .45);
    color: var(--c-red-ink)
}

/* ============================ 8. PILLARS ============================ */
.pillars {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(4, 1fr)
}

.pillar {
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-1);
    display: grid;
    gap: 8px;
    transition: all var(--d-2) var(--e-out)
}

.pillar:hover {
    border-color: rgba(255, 45, 85, .4);
    box-shadow: var(--sh-1), var(--sh-red-sm);
    transform: translateY(-2px)
}

.pillar .k {
    display: flex;
    align-items: center;
    gap: 10px
}

.pillar .k b {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-red);
    letter-spacing: .06em;
    text-transform: uppercase
}

.pillar h3 {
    font-size: 1.02rem
}

.pillar p {
    font-size: var(--fs-sm);
    color: var(--c-ink-2)
}

.pillar .n {
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
    font-family: var(--ff-mono)
}

/* ============================ 9. TABLE (fluorescent red border) ============================ */
.table-wrap {
    margin-top: var(--sp-9);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--tbl-stroke);
    box-shadow: var(--tbl-glow);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat))
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm)
}

thead th {
    background: var(--tbl-head);
    text-align: left;
    padding: 13px 16px;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--tr-cap);
    color: var(--c-ink-2);
    font-weight: 700;
    border-bottom: 1px solid var(--tbl-stroke-soft)
}

tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: var(--c-ink-1);
    vertical-align: top
}

tbody tr {
    transition: background var(--d-1) var(--e-out)
}

tbody tr:hover {
    background: var(--tbl-row-hover)
}

tbody tr:last-child td {
    border-bottom: 0
}

td code {
    font-family: var(--ff-mono);
    font-size: 12.5px;
    color: var(--c-red-ink);
    overflow-wrap: anywhere
}

.table-note {
    margin-top: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
    max-width: 88ch
}

/* ============================ 10. PROMPTS ============================ */
.prompt-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-8);
    align-items: start
}

.rail {
    position: sticky;
    top: calc(var(--hdr) + 24px);
    display: grid;
    gap: var(--sp-4)
}

.rail h3 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tr-cap);
    color: var(--c-ink-3)
}

.track {
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke)
}

.track b {
    display: block;
    color: var(--c-ink-0);
    font-size: var(--fs-sm)
}

.track span {
    font-size: var(--fs-xs);
    color: var(--c-ink-3)
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.chips li {
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: var(--c-bg-3);
    border: 1px solid var(--glass-stroke);
    font-size: var(--fs-micro);
    color: var(--c-ink-2)
}

.prompt-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(3, 1fr)
}

.prompt {
    padding: var(--sp-5);
    border-radius: var(--r-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-1);
    display: grid;
    gap: 8px;
    content-visibility: auto;
    contain-intrinsic-size: 0 170px;
    transition: all var(--d-2) var(--e-out)
}

.prompt:hover {
    border-color: rgba(255, 45, 85, .42);
    box-shadow: var(--sh-1), var(--sh-red-sm);
    transform: translateY(-2px)
}

.prompt .c {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-red)
}

.prompt p {
    font-size: var(--fs-sm);
    color: var(--c-ink-1)
}

.ai-note {
    margin-top: var(--sp-6);
    padding: var(--sp-5);
    border-radius: var(--r-md);
    background: linear-gradient(100deg, rgba(255, 45, 85, .09), rgba(185, 140, 255, .07));
    border: 1px solid rgba(255, 45, 85, .3)
}

.ai-note b {
    color: var(--c-ink-0)
}

.ai-note p {
    font-size: var(--fs-sm);
    color: var(--c-ink-2);
    margin-top: 6px
}

/* ============================ 11. INSTALL ============================ */
.install-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--sp-8);
    align-items: start
}

.steps {
    display: grid;
    gap: var(--sp-5);
    counter-reset: step
}

.steps li {
    display: grid;
    gap: 8px;
    padding-left: 46px;
    position: relative
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--glass-bg-3);
    border: 1px solid rgba(255, 45, 85, .45);
    color: var(--c-ink-0);
    font-size: var(--fs-sm);
    font-weight: 700
}

.steps h3 {
    font-size: 1rem
}

.steps p {
    font-size: var(--fs-sm);
    color: var(--c-ink-2)
}

.code {
    display: block;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    background: var(--c-bg-3);
    border: 1px solid var(--glass-stroke);
    font-family: var(--ff-mono);
    font-size: 12.5px;
    color: var(--c-red-ink);
    overflow-wrap: anywhere
}

.install-card {
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-2);
    display: grid;
    gap: var(--sp-5)
}

.install-card h3 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--tr-cap);
    color: var(--c-ink-3)
}

.filelist {
    display: grid;
    gap: 7px
}

.filelist li {
    font-family: var(--ff-mono);
    font-size: 12.5px;
    color: var(--c-ink-2);
    overflow-wrap: anywhere;
    border-bottom: 1px solid rgba(255, 45, 85, .16);
    padding-bottom: 6px
}

.filelist li:last-child {
    border-bottom: 0
}

.os-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.os-chips span {
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: var(--c-bg-3);
    border: 1px solid var(--glass-stroke);
    font-size: var(--fs-micro);
    color: var(--c-ink-2)
}

.dl {
    display: grid;
    gap: 10px
}

.dl .btn {
    width: 100%
}

.dl small {
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
    text-align: center
}

.reqlist {
    display: grid;
    gap: 8px
}

.reqlist li {
    font-size: var(--fs-sm);
    color: var(--c-ink-2);
    padding-left: 18px;
    position: relative
}

.reqlist li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-red)
}

/* ============================ 12. HONESTY ============================ */
.states {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(4, 1fr)
}

.state {
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-1);
    display: grid;
    gap: 7px
}

.state .tag {
    font-family: var(--ff-mono);
    font-size: var(--fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-ink-3)
}

.state.done {
    border-color: rgba(255, 255, 255, .2)
}

.state.blocked {
    border-color: rgba(255, 45, 85, .5);
    box-shadow: var(--sh-1), var(--sh-red-sm)
}

.state.skipped {
    border-color: rgba(185, 140, 255, .36)
}

.state.failed {
    border-color: rgba(255, 140, 90, .4)
}

.state h3 {
    font-size: 1rem
}

.state p {
    font-size: var(--fs-sm);
    color: var(--c-ink-2)
}

.honesty-notes {
    margin-top: var(--sp-7);
    display: grid;
    gap: 10px;
    max-width: 92ch
}

.honesty-notes li {
    font-size: var(--fs-sm);
    color: var(--c-ink-2);
    padding-left: 20px;
    position: relative
}

.honesty-notes li::before {
    content: "-";
    position: absolute;
    left: 4px;
    color: var(--c-red)
}

/* ============================ 13. FAQ ============================ */
.faq {
    display: grid;
    gap: 10px;
    max-width: var(--maxw-narrow)
}

.faq details {
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-md);
    background: var(--glass-bg);
    transition: border-color var(--d-2) var(--e-out)
}

.faq details[open] {
    border-color: rgba(255, 45, 85, .4);
    box-shadow: var(--sh-red-sm)
}

.faq summary {
    cursor: pointer;
    padding: 15px 18px;
    font-weight: 700;
    color: var(--c-ink-0);
    font-size: var(--fs-sm);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    list-style: none
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary::after {
    content: "+";
    color: var(--c-red);
    font-weight: 700;
    font-size: 18px;
    line-height: 1
}

.faq details[open] summary::after {
    content: "-"
}

.faq p {
    padding: 0 18px 17px;
    font-size: var(--fs-sm);
    color: var(--c-ink-2)
}

/* ============================ 14. CONTACT / FOOTER ============================ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: center
}

.contact-card {
    padding: var(--sp-7);
    border-radius: var(--r-xl);
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-2);
    display: grid;
    gap: var(--sp-4);
    justify-items: start
}

.contact-card a.mail {
    font-size: clamp(1rem, .95rem + .5vw, 1.3rem);
    color: var(--c-red);
    font-weight: 700;
    overflow-wrap: anywhere
}

.contact-card a.mail:hover {
    text-decoration: underline;
    text-underline-offset: 4px
}

.contact small {
    color: var(--c-ink-3);
    font-size: var(--fs-xs)
}

.footer {
    border-top: 1px solid var(--glass-stroke);
    /* The floating Donate pill is centred at the bottom: the footer keeps an empty
       band of the same height so the last row (rights + language links) stays clear. */
    padding-block: var(--sp-10) calc(var(--sp-7) + var(--fab-clearance));
    background: rgba(8, 8, 11, .6)
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--sp-7)
}

.footer h4 {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--tr-cap);
    color: var(--c-ink-3);
    margin-bottom: var(--sp-4)
}

.footer li {
    font-size: var(--fs-sm);
    color: var(--c-ink-2);
    margin-bottom: 9px
}

.footer a:hover {
    color: var(--c-ink-0)
}

.footer .brand {
    margin-bottom: var(--sp-4)
}

.footer .tagline {
    font-size: var(--fs-sm);
    color: var(--c-ink-3);
    max-width: 34ch
}

.footer-bottom {
    margin-top: var(--sp-9);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--glass-stroke);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--c-ink-3)
}

.footer-locales {
    display: flex;
    gap: 14px;
    align-items: center
}

/* ============================ 15. REVEAL / MOTION ============================ */
.rv {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
    transition: opacity var(--d-5) var(--e-cine),
        transform var(--d-5) var(--e-cine), filter var(--d-5) var(--e-cine)
}

.rv.in {
    opacity: 1;
    transform: none;
    filter: none
}

.hero-copy>* {
    opacity: 0;
    animation: heroIn var(--d-6) var(--e-cine) forwards
}

.hero-copy>*:nth-child(1) {
    animation-delay: 0ms
}

.hero-copy>*:nth-child(2) {
    animation-delay: 80ms
}

.hero-copy>*:nth-child(3) {
    animation-delay: 200ms
}

.hero-copy>*:nth-child(4) {
    animation-delay: 320ms
}

.hero-copy>*:nth-child(5) {
    animation-delay: 440ms
}

.console {
    opacity: 0;
    animation: consoleIn var(--d-6) var(--e-cine) 560ms forwards
}

@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(10px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

@keyframes consoleIn {
    from {
        opacity: 0;
        transform: translateY(28px) rotateX(6deg) scale(.97);
        filter: blur(10px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

/* ============================ 16. RESPONSIVE ============================ */
@media (max-width:1180px) {
    .cards {
        grid-template-columns: repeat(3, 1fr)
    }

    .pillars {
        grid-template-columns: repeat(3, 1fr)
    }

    .states {
        grid-template-columns: repeat(2, 1fr)
    }

    .prompt-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:980px) {
    .nav {
        display: none
    }

    .burger {
        display: grid
    }

    .hdr {
        grid-template-columns: auto 1fr;
        gap: var(--sp-3)
    }

    .hdr-right {
        justify-self: end
    }

    .n-donate {
        padding: 9px 11px
    }

    .n-donate-t {
        display: none
    }

    .hero-grid {
        grid-template-columns: 1fr
    }

    .hero-copy,
    .console {
        grid-column: 1/-1
    }

    .hero {
        padding-top: calc(var(--hdr) + 34px)
    }

    .install-grid,
    .contact-grid,
    .footer-grid {
        grid-template-columns: 1fr
    }

    .prompt-shell {
        grid-template-columns: 1fr
    }

    .rail {
        position: static
    }

    .rail .chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px
    }
}

@media (max-width:760px) {

    /* The header never wraps: Donate and the menu stay on screen. The download
       lives in the hero, in the install block and in the footer. */
    .hdr-right .btn-primary {
        display: none
    }

    .cards,
    .pillars,
    .states,
    .prompt-grid {
        grid-template-columns: 1fr
    }

    .table-wrap {
        overflow-x: auto
    }

    table {
        min-width: 640px
    }

    .stats {
        gap: var(--sp-5)
    }

    .footer-bottom {
        justify-content: flex-start
    }
}

@media (max-width:420px) {
    .brand b {
        display: none
    }

    .hdr-right {
        gap: 6px
    }

    .langs a,
    .langs span {
        padding: 5px 7px;
        font-size: 11px
    }

    .hero-cta .btn {
        width: 100%
    }
}

/* ============================ 17. A11Y: REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }

    .rv,
    .hero-copy>*,
    .console,
    .divider {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important
    }

    .strip-track {
        animation: none
    }
}

html[data-motion="off"] .rv,
html[data-motion="off"] .hero-copy>*,
html[data-motion="off"] .console,
html[data-motion="off"] .divider {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important
}

html[data-motion="off"] .strip-track {
    animation: none
}

html[data-motion="off"] #fx {
    display: none
}

html[data-motion="off"] .fx-fallback {
    display: block
}

/* ============================ 18. FLOATING DONATE (whole page) ============================
   The header already carries the canonical Donate button; this one floats over every
   section so the Stripe link is always one click away, on desktop and on mobile.

   It is centred on purpose: the language switcher (PT / EN / EL) sits at the right end
   of the footer, and a bottom-right pill landed exactly on top of it. Centred, with the
   footer reserving its clearance below, the button never covers a link. */
.n-donate-fab {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--fab-offset) + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 17px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 196, 92, .55);
    color: #ffe7bd;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    background: linear-gradient(100deg, rgba(255, 176, 32, .3), rgba(255, 45, 85, .22));
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
    backdrop-filter: blur(14px) saturate(1.35);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 176, 32, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
    transition: transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out),
        color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out)
}

.n-donate-fab:hover {
    color: #fff;
    transform: translateX(-50%) translateY(-2px);
    border-color: rgba(255, 214, 130, .95);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .55), 0 0 42px rgba(255, 176, 32, .6), inset 0 1px 0 rgba(255, 255, 255, .16)
}

.n-donate-fab:active {
    transform: translateX(-50%) scale(.98)
}

.n-donate-fab b {
    display: block;
    font-weight: 800
}

.n-donate-fab small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 231, 189, .74)
}

.n-donate-fab__heart {
    font-size: 15px;
    filter: drop-shadow(0 0 8px rgba(255, 176, 32, .65))
}

@media (max-width:620px) {
    .n-donate-fab {
        padding: 11px 14px;
        font-size: 12.5px
    }

    .n-donate-fab small {
        display: none
    }
}

/* ============================ 19. SIGN UP (lead capture) ============================
   Real Netlify Form, dressed like the rest of the page: a glass card with a
   gradient hairline, pill fields with an icon, a small label above and a neon-red
   focus. Everything here is CSS only - the markup stays a plain HTML form, so it
   still works with JavaScript disabled. */
.signup-grid {
    display: grid;
    grid-template-columns: 1.32fr .68fr;
    gap: var(--sp-8);
    align-items: start
}

.n-form {
    position: relative;
    padding: clamp(22px, 2.6vw, 34px);
    border-radius: 26px;
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(255, 45, 85, .10), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028));
    -webkit-backdrop-filter: blur(26px) saturate(1.45);
    backdrop-filter: blur(26px) saturate(1.45);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-3);
    display: grid;
    gap: var(--sp-5)
}

/* hairline with the brand gradient, painted over the border */
.n-form::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(125deg, rgba(255, 45, 85, .65), rgba(185, 140, 255, .38) 45%, rgba(255, 255, 255, .05) 78%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: .9
}

.n-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4) var(--sp-5)
}

/* ---- field: small label on top, pill box with an icon ---------------- */
.n-field {
    display: grid;
    gap: 8px
}

.n-field__label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tr-cap);
    color: var(--c-ink-3);
    padding-left: 4px
}

.n-field__box {
    position: relative;
    display: block
}

.n-field__box i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-size: 13px;
    color: var(--c-ink-3);
    pointer-events: none;
    transition: color var(--d-2) var(--e-out), text-shadow var(--d-2) var(--e-out)
}

.n-field input,
.n-field textarea {
    width: 100%;
    color: var(--c-ink-0);
    font: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)) rgba(9, 9, 13, .62);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px rgba(0, 0, 0, .35);
    transition: border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out),
        background var(--d-2) var(--e-out)
}

.n-field input {
    height: 54px;
    padding: 0 20px 0 48px;
    border-radius: var(--r-pill)
}

.n-field textarea {
    min-height: 108px;
    padding: 17px 20px 17px 48px;
    border-radius: 22px;
    resize: vertical;
    line-height: 1.55
}

.n-field__box--area i {
    top: 20px;
    transform: none
}

.n-field input:hover,
.n-field textarea:hover {
    border-color: rgba(255, 255, 255, .22);
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) rgba(14, 14, 19, .66)
}

.n-field input:focus,
.n-field textarea:focus {
    outline: none;
    border-color: var(--c-red);
    background: linear-gradient(180deg, rgba(255, 45, 85, .07), rgba(255, 255, 255, .02)) rgba(20, 9, 15, .72);
    box-shadow: 0 0 0 4px rgba(255, 45, 85, .12), var(--sh-red-sm), inset 0 1px 0 rgba(255, 255, 255, .1)
}

.n-field__box:focus-within i {
    color: var(--c-red);
    text-shadow: 0 0 12px rgba(255, 45, 85, .8)
}

.n-field input::placeholder,
.n-field textarea::placeholder {
    color: var(--c-ink-dis)
}

.n-field input:-webkit-autofill,
.n-field textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--c-ink-0);
    -webkit-box-shadow: 0 0 0 40px rgba(20, 20, 26, .95) inset
}

.n-field--wide {
    grid-column: 1 / -1
}

/* helper text under a field: visible, muted, never a placeholder trick */
.n-field__hint {
    padding-left: 6px;
    font-size: var(--fs-xs);
    color: var(--c-ink-3)
}

/* ---- consent --------------------------------------------------------- */
.n-check {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .032);
    border: 1px solid var(--glass-stroke);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: border-color var(--d-2) var(--e-out), background var(--d-2) var(--e-out)
}

.n-check:hover {
    border-color: rgba(255, 45, 85, .38);
    background: rgba(255, 255, 255, .055)
}

.n-check input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(8, 8, 12, .85);
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--d-2) var(--e-out)
}

.n-check input:checked {
    border-color: var(--c-red);
    background: linear-gradient(125deg, var(--c-red), var(--c-red-deep));
    box-shadow: var(--sh-red-sm)
}

.n-check input:checked::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.n-check input:focus-visible {
    outline: 2px solid var(--c-red);
    outline-offset: 3px
}

/* ---- submit + footer ------------------------------------------------- */
.n-form__rule {
    height: 1px;
    margin: 2px 0;
    background: linear-gradient(90deg, transparent, rgba(255, 45, 85, .38), transparent)
}

.n-form__submit {
    width: 100%;
    padding: 16px 24px;
    font-size: var(--fs-sm);
    border-radius: var(--r-pill);
    letter-spacing: .01em;
    box-shadow: 0 12px 30px rgba(255, 45, 85, .32)
}

.n-form__submit:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-red)
}

.n-form__submit:disabled {
    opacity: .7;
    cursor: progress
}

.n-form__note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding-left: 4px;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--c-ink-3)
}

.n-form__note .n-lock {
    font-size: 12px;
    filter: drop-shadow(0 0 6px rgba(255, 176, 32, .5))
}

/* honeypot: no text, no focus, invisible to people */
.n-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

/* ============================ 20. GOOGLE AI PRO (optional) ============================
   A callout under the integrations table: what the plan adds, the three steps to
   connect it, and the honest note that NEURA works without it. */
.google-plan {
    margin-top: var(--sp-9);
    padding: clamp(20px, 2.4vw, 30px);
    border-radius: 24px;
    background:
        radial-gradient(120% 90% at 12% -10%, rgba(91, 140, 255, .12), transparent 58%),
        radial-gradient(90% 80% at 92% 0%, rgba(185, 140, 255, .12), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .028));
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--sh-2);
    display: grid;
    gap: var(--sp-6)
}

.google-plan__head {
    display: grid;
    gap: 12px;
    max-width: 74ch
}

.google-plan__head h3 {
    font-size: var(--fs-h3);
    color: var(--c-ink-0)
}

.google-plan__head p {
    color: var(--c-ink-2);
    font-size: var(--fs-sm)
}

.google-plan__steps {
    display: grid;
    gap: 10px;
    counter-reset: plan;
    max-width: 86ch
}

.google-plan__steps li {
    position: relative;
    padding-left: 34px;
    font-size: var(--fs-sm);
    color: var(--c-ink-1)
}

.google-plan__steps li::before {
    counter-increment: plan;
    content: counter(plan);
    position: absolute;
    left: 0;
    top: -2px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--glass-bg-3);
    border: 1px solid rgba(91, 140, 255, .45);
    color: var(--c-ink-0);
    font-size: 11px;
    font-weight: 700
}

.google-plan__key {
    font-size: var(--fs-sm);
    color: var(--c-ink-1);
    font-family: var(--ff-mono);
    overflow-wrap: anywhere
}

/* the confirmation shown after a successful sign up (no page jump) */
.n-form__done {
    padding: var(--sp-5) var(--sp-6);
    border-radius: 22px;
    background: linear-gradient(100deg, rgba(255, 45, 85, .12), rgba(185, 140, 255, .09));
    border: 1px solid rgba(255, 45, 85, .4);
    box-shadow: var(--sh-red-sm)
}

.n-form__done b {
    display: block;
    color: var(--c-ink-0);
    margin-bottom: 6px
}

.n-form__done p {
    font-size: var(--fs-sm);
    color: var(--c-ink-2)
}

@media (max-width:980px) {
    .signup-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width:620px) {
    .n-form__row {
        grid-template-columns: 1fr
    }
}