/* ============================================================
   Agreely landing - surface styles (P4-M3).
   Tokens come from app.css. Indigo-on-light, family signature:
   island nav, numbered mono labels, dot-grid + soft glow,
   scroll reveals, easing cubic-bezier(0.4,0,0.2,1). No bounce.
   ============================================================ */

.landing-body { scroll-behavior: smooth; overflow-x: hidden; }

/* center guide lines (subtle, like the family) */
.grid-guides {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    max-width: 72rem;
    margin: 0 auto;
}
.grid-guide { position: absolute; top: 0; height: 100%; width: 1px; background: var(--border); opacity: 0.4; }
@media (max-width: 820px) { .grid-guides { display: none; } }

.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; position: relative; }
@media (min-width: 768px) { .container { padding: 0 2rem; } }

/* The full-bleed hero starts at the very top, behind the transparent nav. */
.landing-main { padding-top: 0; }

/* Landing leans clean: drop the tech dot-grid + center guides; the illustration
   and generous negative space carry the texture instead (docs keep the grid). */
.landing-body .dotgrid,
.landing-body .grid-guides { display: none; }

/* skip link */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.focus\:not-sr-only:focus { position: fixed; top: 1rem; left: 1rem; width: auto; height: auto; padding: 0.5rem 1rem; background: var(--accent); color: #fff; border-radius: 0.5rem; z-index: 100; clip: auto; white-space: normal; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.1s var(--ease); border-radius: 9999px; line-height: 1; }
.btn:active { transform: scale(0.98); }
.btn-arrow { transition: transform 0.25s var(--ease); flex-shrink: 0; }
.btn:hover .btn-arrow { transform: translateX(0.2rem); }
.btn-primary { background: var(--accent); color: #fff; padding: 0.85rem 1.6rem; font-size: 0.9rem; box-shadow: 0 10px 24px -10px rgba(58, 53, 181, 0.65); }
.btn-primary:hover { background: var(--accent-strong); color: #fff; box-shadow: 0 12px 28px -10px rgba(58, 53, 181, 0.8); }
.btn-ghost { background: var(--bg-surface); color: var(--ink); padding: 0.85rem 1.4rem; font-size: 0.9rem; border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--border-accent); background: var(--accent-glow); color: var(--accent); }

/* ── Shared section chrome ───────────────────────────────── */
.lsec { padding: 5.5rem 0; border-top: 1px solid var(--border); position: relative; }
.lsec-intro { max-width: 50rem; }
.section-heading { font-size: clamp(1.7rem, 3.6vw, 2.55rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); margin: 0 0 1.1rem; max-width: 44rem; }
.section-heading .hero-accent { color: var(--accent); }
/* Emphasized word ("prouver" / "Proving"): an amber highlighter swipe under a
   display italic accent. Tasteful, leaf-style. */
.prove-accent {
    position: relative;
    isolation: isolate;
    font-style: italic;
    color: var(--ink);
    white-space: nowrap;
    padding: 0 0.05em;
}
.prove-accent::before {
    content: "";
    position: absolute;
    left: -0.04em; right: -0.04em;
    bottom: 0.07em;
    height: 0.46em;
    z-index: -1;
    border-radius: 2px;
    background: linear-gradient(101deg, rgba(232,148,60,0) 0%, rgba(232,148,60,0.55) 8%, rgba(232,148,60,0.6) 92%, rgba(232,148,60,0) 100%);
    transform: rotate(-1.4deg);
}
[data-theme="dark"] .prove-accent { color: var(--text-bright); }
[data-theme="dark"] .prove-accent::before { background: linear-gradient(101deg, rgba(240,184,106,0) 0%, rgba(240,184,106,0.42) 8%, rgba(240,184,106,0.46) 92%, rgba(240,184,106,0) 100%); }
.section-lede { font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); max-width: 44rem; margin: 0; }
.section-lede strong { color: var(--accent); font-weight: 700; }
[data-theme="dark"] .section-lede strong { color: var(--accent-strong); }

/* soft ambient glow used in several sections */
.glow { position: absolute; pointer-events: none; z-index: 0; border-radius: 9999px; filter: blur(8px); }

/* ── Hero (full-bleed editorial illustration) ─────────────── */
.hero {
    position: relative;
    display: flex;
    /* Anchor the hero copy near the big brand lockup at the top instead of
       floating it to the vertical centre (that left a large void below the
       logo on tall screens). The art height now follows the content. */
    align-items: flex-start;
    min-height: 0;
    /* Symmetric vertical rhythm: the top padding clears the in-hero header and
       leaves a gap above the headline that EQUALS the gap below the buttons.
       The screenshot below rises 7rem into the bottom padding (its margin-top),
       so padding-bottom is that 7rem of overlap plus the same visible gap. */
    padding: calc(var(--nav-height) + 3.8rem) 0 10.2rem;
    /* Clip horizontally (the cover-scaled art over-spills the sides) but let the
       art spill DOWN past the hero so the heron reaches behind the upper half of
       the app screenshot. clip + visible is the one overflow combo that is NOT
       coerced to auto, so no horizontal scrollbar appears. */
    overflow-x: clip;
    overflow-y: visible;
    isolation: isolate;
}
/* The container must span the full grid so the copy aligns to the page gutter
   (a flex child otherwise collapses to its content width and floats center). */
.hero > .container { width: 100%; }
/* The art box is intentionally taller than the hero (overflow clipped) so the
   cover-scaled image is width-overflowing, which lets object-position-x slide
   the heron horizontally. Pushed toward the right of the source pulls the heron
   and its water further LEFT, drifting under the headline column, while the
   scrim keeps the left-aligned type readable. */
.hero-bg { position: absolute; inset: -2% 0 -52% 0; z-index: -2; display: block; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 92% center; }
/* Scrim: a DIRECTIONAL left-to-right cool-light wash that holds the headline
   column on legible ground, then feathers away so the heron reads full-width and
   crisp on the right. It sits ~0.72 alpha behind the left text (deliberately kept
   light so the dawn wetland shows through on the left; measured composited
   contrast stays ~12:1 for the heading and ~11:1 for the paragraph there, well
   past AA), keeps ~0.40 alpha through the band where the wide H1 lines end (the
   heron's dark head/neck sits there, so that opacity is what carries the heading
   over the bird), then fades fully to transparent by ~78% so the bird, reeds and
   water on the right third are untouched. No solid stops, so there is no hard
   rectangular edge. The scrim extends DOWN with the art (matching .hero-bg's -52%
   bottom) so the warm wash below the hero stays washed to cool canvas on the left
   instead of surfacing as a hard-edged peach block beside the screenshot, and
   .hero-fade dissolves the bottom. */
.hero-scrim {
    position: absolute; inset: 0 0 -52% 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(246,248,252,0.72) 0%, rgba(246,248,252,0.72) 24%, rgba(246,248,252,0.72) 41%, rgba(246,248,252,0.56) 54%, rgba(246,248,252,0.40) 63%, rgba(246,248,252,0.13) 71%, rgba(246,248,252,0) 78%);
}
/* Bottom fade dissolves the heron into the page bg. It is pushed below the hero
   so the raw art stays visible flanking the UPPER HALF of the app screenshot and
   only begins to dissolve around the screenshot's vertical midpoint. Sits behind
   the screenshot (z-index -1; the shot is z-index 2). */
.hero-fade {
    position: absolute; left: 0; right: 0; bottom: -52%; height: 11rem; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(246,248,252,0) 0%, var(--bg-deep) 92%);
}

.hero-copy { position: relative; z-index: 1; max-width: 47rem; }

/* Hero text is pinned to the light palette in both themes (the art is always
   light), so contrast over the illustration stays AA regardless of dark mode. */
.hero-h1 {
    font-size: clamp(2.35rem, 4.9vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 650;
    color: #20235C;
    margin: 0 0 1.4rem;
    text-wrap: balance;
}
.hero-accent { color: var(--accent); }
.hero .hero-accent { color: #3A35B5; }
.hero-lede { font-size: 1.12rem; line-height: 1.62; color: #2C3340; margin: 0 0 2rem; max-width: 34rem; }
.hero-lede strong { color: #14181B; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
/* Hero filled + ghost buttons pinned light so they read over the illustration. */
.hero .btn-primary { background: #3A35B5; box-shadow: 0 12px 28px -12px rgba(58, 53, 181, 0.6); }
.hero .btn-primary:hover { background: #2A2690; }
.hero .btn-ghost { background: rgba(255, 255, 255, 0.85); color: #20235C; border-color: rgba(58, 53, 181, 0.22); }
.hero .btn-ghost:hover { background: #fff; border-color: var(--border-accent); color: var(--accent); }

@media (max-width: 860px) {
    .hero { min-height: auto; padding: calc(var(--nav-height) + 2rem) 0 8rem; align-items: flex-start; }
    /* on small screens the art becomes a calm backdrop; type sits on a top-down
       light wash with the heron peeking through lower in the frame */
    .hero-bg img { object-position: 72% center; }
    .hero-scrim {
        background:
            linear-gradient(180deg, #F6F8FC 0%, rgba(246,248,252,0.92) 38%, rgba(246,248,252,0.55) 64%, rgba(246,248,252,0.2) 100%),
            linear-gradient(90deg, #F6F8FC 0%, rgba(246,248,252,0.55) 70%, rgba(246,248,252,0.2) 100%);
    }
    .hero-fade { height: 7rem; }
    .hero-copy { max-width: 34rem; }
    .hero-lede { max-width: 30rem; }
}
@media (max-width: 560px) {
    .hero-h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
}

/* --- Dark hero -----------------------------------------------------------
   In dark mode the daytime art is swapped for the night-heron illustration and
   the pinned type flips to a light palette. The light <img> is hidden and the
   dark variant paints as a background-image (only fetched when dark is active).
   The theme shim sets [data-theme] before first paint, so the correct variant
   shows with no flash. */
.hero-bg-dark {
    inset: -2% 0 -52% 0;
    background-image: image-set(
        url('/assets/hero/hero-heron-dark.webp') type('image/webp'),
        url('/assets/hero/hero-heron-dark.jpg') type('image/jpeg'));
    /* Fallback for engines without image-set support. */
    background-image: url('/assets/hero/hero-heron-dark.jpg');
    background-image: -webkit-image-set(
        url('/assets/hero/hero-heron-dark.webp') type('image/webp'),
        url('/assets/hero/hero-heron-dark.jpg') type('image/jpeg'));
    background-image: image-set(
        url('/assets/hero/hero-heron-dark.webp') type('image/webp'),
        url('/assets/hero/hero-heron-dark.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: 92% center;
    background-repeat: no-repeat;
    display: none;
}
[data-theme="dark"] .hero-bg-light { display: none; }
[data-theme="dark"] .hero-bg-dark { display: block; }

/* Dark scrim: a left-to-right wash in the deep page ink so the pinned light type
   stays legible over the night scene, then feathers away so the moon, lake and
   heron read crisp on the right. Mirrors the light scrim's stop rhythm. */
[data-theme="dark"] .hero-scrim {
    background: linear-gradient(90deg,
        rgba(12,14,26,0.90) 0%,
        rgba(12,14,26,0.88) 24%,
        rgba(12,14,26,0.82) 41%,
        rgba(12,14,26,0.66) 54%,
        rgba(12,14,26,0.44) 63%,
        rgba(12,14,26,0.16) 71%,
        rgba(12,14,26,0) 80%);
}

/* Pinned type flips to the light palette over the dark scene (AA-safe: the
   headline composites ~14:1 and the lede ~9:1 over the darkened left band). */
[data-theme="dark"] .hero-h1 { color: #F4F6FC; }
[data-theme="dark"] .hero .hero-accent { color: #A7A3FF; }
[data-theme="dark"] .hero-lede { color: #C9CEDE; }
[data-theme="dark"] .hero-lede strong { color: #F4F6FC; }
[data-theme="dark"] .hero .btn-primary { background: #5b55d6; box-shadow: 0 12px 28px -12px rgba(91,85,214,0.7); }
[data-theme="dark"] .hero .btn-primary:hover { background: #4a45c0; }
[data-theme="dark"] .hero .btn-ghost {
    background: rgba(20,24,38,0.55);
    color: #D5D7FF;
    border-color: rgba(123,118,240,0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="dark"] .hero .btn-ghost:hover { background: rgba(28,32,54,0.75); border-color: var(--border-accent); color: #EDEEFF; }

@media (max-width: 860px) {
    /* On small screens the night art becomes a calm backdrop; the type sits on a
       top-down ink wash with the heron peeking through lower in the frame. */
    .hero-bg-dark { background-position: 72% center; }
    [data-theme="dark"] .hero-scrim {
        background:
            linear-gradient(180deg, #0C0E1A 0%, rgba(12,14,26,0.92) 38%, rgba(12,14,26,0.62) 64%, rgba(12,14,26,0.24) 100%),
            linear-gradient(90deg, #0C0E1A 0%, rgba(12,14,26,0.6) 70%, rgba(12,14,26,0.24) 100%);
    }
}

/* Filled accent CTAs: darken in dark mode so white labels keep AA contrast
   (the light-mode #7B76F0 accent fails on white). Light mode is unchanged. */
[data-theme="dark"] .btn-primary { background: #5b55d6; box-shadow: 0 10px 24px -12px rgba(91, 85, 214, 0.7); }
[data-theme="dark"] .btn-primary:hover { background: #4a45c0; }

/* ── Problem: sticky intro + connected vertical sequence ─────────────────── */
.problem-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 4rem; align-items: start; }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.problem-intro { max-width: 30rem; }
@media (min-width: 901px) { .problem-intro { position: sticky; top: calc(var(--nav-height) + 2.5rem); } }
.problem-list { position: relative; }
.prob { display: grid; grid-template-columns: 2.9rem 1fr; gap: 1.4rem; }
.prob-aside { display: flex; flex-direction: column; align-items: center; }
.prob-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.9rem; height: 2.9rem; flex-shrink: 0;
    border-radius: 9999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-accent);
    color: var(--accent);
    box-shadow: 0 10px 24px -14px rgba(58, 53, 181, 0.5);
}
/* the fading rail that links the three pains into one continuous argument */
.prob-line { flex: 1; width: 1.5px; min-height: 1.5rem; margin: 0.55rem 0; background: linear-gradient(180deg, var(--border-accent), rgba(58, 53, 181, 0.04)); }
.prob:last-child .prob-line { display: none; }
.prob-main { padding-bottom: 2.5rem; padding-top: 0.2rem; }
.prob:last-child .prob-main { padding-bottom: 0; }
.prob-k { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); font-feature-settings: "zero" 1; margin-bottom: 0.5rem; }
.prob-h { font-size: 1.18rem; font-weight: 650; color: var(--ink); margin: 0 0 0.5rem; letter-spacing: -0.015em; }
.prob-p { font-size: 0.95rem; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 32rem; }

/* ── How it works: a connected pipeline of icon nodes ─────────────────────
   Four icon nodes strung along a continuous indigo-to-amber track; the nodes
   carry the page-bg fill so the track reads as threaded through them. */
.how-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
/* the continuous track runs between the first and last node centers */
.how-flow::before {
    content: ""; position: absolute; z-index: 0;
    top: 1.5rem; left: 12.5%; right: 12.5%;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 55%, var(--accent-warm-soft) 100%);
    opacity: 0.4;
}
.how-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.how-node {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; flex-shrink: 0;
    border-radius: 9999px;
    background: var(--bg-deep);
    border: 1.5px solid var(--border-accent);
    color: var(--accent);
    box-shadow: 0 10px 24px -12px rgba(58, 53, 181, 0.5);
    margin-bottom: 1.2rem;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.how-step:hover .how-node { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(58, 53, 181, 0.55); }
.how-k { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--accent); font-feature-settings: "zero" 1; margin-bottom: 0.5rem; }
.how-h { font-size: 1.02rem; font-weight: 650; color: var(--ink); margin: 0 0 0.45rem; letter-spacing: -0.01em; text-wrap: balance; }
.how-p { font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 15rem; }
@media (max-width: 820px) {
    .how-flow { grid-template-columns: 1fr; gap: 0; margin-top: 2.5rem; }
    .how-flow::before { top: 0; bottom: 0; left: 1.5rem; right: auto; width: 2px; height: auto; }
    .how-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 1.1rem; padding-bottom: 1.75rem; }
    .how-step:last-child { padding-bottom: 0; }
    .how-node { margin-bottom: 0; }
    .how-text { display: flex; flex-direction: column; }
    .how-p { max-width: none; }
}

/* ── Developers: one grounded console unit ───────────────────────────────
   A single framed surface (family showcase chrome on top) holds the check()
   code-tabs on the left and the two contract notes docked on the right behind
   a shared hairline; the SDK link is the dock footer and the fail-closed
   caption is the console status bar. Nothing floats on the page background. */
.dev-console {
    margin-top: 2.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    box-shadow: 0 34px 70px -40px rgba(20, 24, 92, 0.45);
    overflow: hidden;
}
.dev-console-body { display: grid; grid-template-columns: 1.18fr 0.82fr; align-items: stretch; }
.dev-code { min-width: 0; display: flex; flex-direction: column; }
.dev-code .code-tabs { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; flex: 1; }
.dev-code .code-tab-panel pre { font-size: 0.82rem; }
/* console status bar: one clean mono line (icon + text) under both panes */
.dev-code-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--code-tab-header);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-muted);
    font-feature-settings: "zero" 1;
}
.dev-code-note svg { color: var(--accent); flex-shrink: 0; margin-top: 0.1rem; }
.dev-code-note strong { color: var(--text); font-weight: 600; }
/* the docked contract notes share the console surface, split by hairlines */
.dev-side { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border); background: var(--code-tab-header); }
.dev-feat { padding: 1.4rem 1.5rem; }
.dev-feat + .dev-feat { border-top: 1px solid var(--border); }
.dev-feat-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
.dev-feat-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 0.55rem; background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); flex-shrink: 0; }
.dev-feat-h { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 0; }
.dev-feat-p { font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.dev-feat-p code { font-size: 0.82em; }
.dev-link { margin-top: auto; display: flex; align-items: center; gap: 0.4rem; padding: 1.05rem 1.5rem; border-top: 1px solid var(--border); font-size: 0.9rem; font-weight: 500; color: var(--accent); transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.dev-link:hover { color: var(--accent-strong); background: var(--accent-glow); }
.dev-link svg { transition: transform 0.25s var(--ease); }
.dev-link:hover svg { transform: translateX(0.2rem); }
@media (max-width: 900px) {
    .dev-console-body { grid-template-columns: 1fr; }
    .dev-side { border-left: 0; border-top: 1px solid var(--border); }
}

/* ── Trust cards ─────────────────────────────────────────── */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 3.25rem; position: relative; z-index: 1; }
@media (max-width: 820px) { .trust-grid { grid-template-columns: 1fr; } }
/* Card treatment: a clean panel with a faint diagonal tint for depth, a slim
   top accent rule, and an ambient corner bloom that lights up on hover. The
   busy concentric-arch corner motif has been dropped. */
.trust-card { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(165deg, var(--bg-surface) 0%, var(--bg-surface) 66%, rgba(58, 53, 181, 0.045) 100%); border: 1px solid var(--border); border-radius: 1.1rem; padding: 1.75rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
[data-theme="dark"] .trust-card { background: linear-gradient(165deg, var(--bg-surface) 0%, var(--bg-surface) 66%, rgba(123, 118, 240, 0.08) 100%); }
.trust-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--accent), var(--accent-warm-soft) 55%, transparent); opacity: 0.5; transition: opacity 0.2s var(--ease); z-index: 1; }
/* ambient corner bloom (replaces the concentric-arch motif): off at rest, a
   soft indigo glow on hover */
.trust-card::after { content: ""; position: absolute; right: -3.5rem; bottom: -3.5rem; width: 11rem; height: 11rem; z-index: -1; border-radius: 9999px; background: radial-gradient(circle at center, rgba(58, 53, 181, 0.13), transparent 68%); opacity: 0; transition: opacity 0.3s var(--ease); }
[data-theme="dark"] .trust-card::after { background: radial-gradient(circle at center, rgba(123, 118, 240, 0.18), transparent 68%); }
.trust-card:hover { border-color: var(--border-accent); box-shadow: 0 22px 48px -26px rgba(20, 24, 92, 0.45); transform: translateY(-3px); }
.trust-card:hover::before { opacity: 1; }
.trust-card:hover::after { opacity: 1; }
.trust-card-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.7rem; }
.trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 0.8rem; background: linear-gradient(160deg, var(--accent-glow), rgba(58, 53, 181, 0.02)); color: var(--accent); border: 1px solid var(--border-accent); flex-shrink: 0; }
.trust-h { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.trust-p { font-size: 0.9rem; line-height: 1.65; color: var(--text-muted); margin: 0; }
.trust-p strong { color: var(--text-bright); font-weight: 600; }

/* ── Pricing ──────────────────────────────────────────────── */
.pricing-api { display: flex; align-items: center; gap: 0.75rem; margin-top: 2rem; padding: 0.85rem 1.15rem; background: var(--accent-glow); border: 1px solid var(--border-accent); border-radius: 0.75rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.pricing-api-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.pricing-api code { font-family: var(--font-mono); font-size: 0.85em; color: var(--accent-strong); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.5rem; align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 26rem; margin-left: auto; margin-right: auto; } }

/* Enterprise: a full-width "sur mesure" band in deep indigo so it stands apart
   from the three white self-serve cards above it. */
.price-enterprise {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr 1.45fr auto;
    align-items: center;
    gap: 2.25rem;
    margin-top: 1.1rem;
    padding: 1.85rem 2rem;
    border-radius: 1.1rem;
    background: linear-gradient(120deg, #23265F 0%, #2A2690 100%);
    color: #EDEEFA;
    box-shadow: 0 30px 64px -34px rgba(20, 24, 92, 0.6);
    isolation: isolate;
}
.price-enterprise::after {
    content: ""; position: absolute; right: -6rem; top: -8rem; width: 24rem; height: 24rem; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(123, 118, 240, 0.35), transparent 70%);
}
.price-ent-lead { min-width: 0; }
.price-ent-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.price-ent-name { font-size: 1.35rem; font-weight: 650; color: #fff; margin: 0; letter-spacing: -0.01em; }
.price-ent-price { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #C9CBFF; background: rgba(201, 203, 255, 0.14); border: 1px solid rgba(201, 203, 255, 0.28); border-radius: 9999px; padding: 0.22rem 0.65rem; font-feature-settings: "zero" 1; }
.price-ent-desc { font-size: 0.92rem; line-height: 1.6; color: rgba(237, 238, 250, 0.82); margin: 0; max-width: 26rem; }
.price-ent-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.5rem; }
.price-ent-specs li { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.price-ent-k { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9FA4D6; font-feature-settings: "zero" 1; }
.price-ent-v { font-size: 0.875rem; font-weight: 600; color: #fff; line-height: 1.35; }
.price-ent-cta { background: #fff; color: #20235C; padding: 0.85rem 1.6rem; font-size: 0.9rem; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5); }
.price-ent-cta:hover { background: #EDEEFA; color: #20235C; }
@media (max-width: 900px) {
    .price-enterprise { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.6rem 1.4rem; }
    .price-ent-cta { width: 100%; justify-content: center; }
}
@media (max-width: 480px) { .price-ent-specs { grid-template-columns: 1fr; } }

.price-card { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 0.95rem; padding: 1.5rem 1.35rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.price-card:hover { border-color: var(--border-accent); box-shadow: 0 18px 40px -24px rgba(20, 24, 92, 0.42); transform: translateY(-2px); }
.price-card-popular { border-color: var(--border-accent); box-shadow: 0 18px 44px -24px rgba(20, 24, 92, 0.5); }
.price-card-popular::before { content: ""; position: absolute; top: 0; left: 1.35rem; right: 1.35rem; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(to right, var(--accent), transparent); opacity: 0.85; }
.price-badge { position: absolute; top: -0.7rem; left: 1.35rem; display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: #fff; background: var(--accent); padding: 0.28rem 0.6rem; border-radius: 9999px; box-shadow: 0 6px 16px -6px rgba(58, 53, 181, 0.7); }
.price-badge svg { color: #fff; }

.price-name { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0 0 0.7rem; letter-spacing: -0.01em; }
.price-amount { min-height: 3.4rem; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.price-amount-row { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.price-num { font-size: 2.2rem; font-weight: 680; color: var(--ink); letter-spacing: -0.03em; line-height: 1; font-feature-settings: "zero" 1; white-space: nowrap; }
.price-custom { font-size: 1.5rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; }
.price-suffix { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); font-feature-settings: "zero" 1; white-space: nowrap; }
.price-billed { display: block; margin-top: 0.4rem; font-size: 0.74rem; color: var(--text-muted); }

/* Each feature is a labelled spec, stacked label-over-value. Values wrap only at
   word boundaries (no overflow-wrap:anywhere), so numbers and words never break
   mid-token; the uppercase mono label can never overlap its value. */
.price-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.price-feat { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.price-feat:first-child { padding-top: 0; }
.price-feat:last-child { border-bottom: 0; }
.price-feat-k { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-feature-settings: "zero" 1; }
.price-feat-ico { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.price-feat-ico-off { color: var(--text-muted); opacity: 0.6; }
.price-feat-v { color: var(--text-bright); font-weight: 600; font-size: 0.875rem; line-height: 1.4; overflow-wrap: break-word; }
.price-feat-v-off { color: var(--text-muted); font-weight: 500; }

.price-cta { margin-top: 1.35rem; width: 100%; justify-content: center; }

.pricing-notes { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin-top: 1.5rem; }
.pricing-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; line-height: 1.4; color: var(--text-muted); }
.pricing-note svg { color: var(--accent); flex-shrink: 0; }

/* Professional services: a slim full-width band (integration/onboarding + training),
   modeled on .pricing-api / the enterprise band. Token-driven, with an explicit dark
   pass so the icon chip and CTA stay contrasted. No prices; soft Calendly CTA. */
.pricing-services { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.1rem; padding: 1.15rem 1.5rem; background: var(--accent-glow); border: 1px solid var(--border-accent); border-radius: 1.1rem; }
.pricing-services-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; background: var(--bg-surface); border: 1px solid var(--border-accent); color: var(--accent); flex-shrink: 0; }
.pricing-services-body { flex: 1; min-width: 0; }
.pricing-services-title { font-size: 1.05rem; font-weight: 650; color: var(--ink); margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.pricing-services-desc { font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 44rem; }
.pricing-services-cta { flex-shrink: 0; white-space: nowrap; }
[data-theme="dark"] .pricing-services-ico { background: var(--bg-elevated); }
@media (max-width: 720px) {
    .pricing-services { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.35rem 1.25rem; }
    .pricing-services-cta { width: 100%; justify-content: center; }
}

/* ── Closing CTA (leaf-style gradient card) ──────────────── */
.cta { position: relative; padding: 2rem 0 9.25rem; }
/* A warm, light card (cool-light with an amber dawn tint) so it reads clearly
   distinct from the deep-indigo footer right below it. Leaf-style: faint grid +
   soft glow, with the Calendly action as the brand-indigo primary. */
.cta-card {
    position: relative;
    overflow: hidden;
    max-width: 58rem;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 1.75rem;
    background: linear-gradient(150deg, #FFFFFF 0%, #F1F2FC 46%, #FBF1E6 100%);
    border: 1px solid var(--border);
    box-shadow: 0 40px 80px -42px rgba(20, 24, 92, 0.32);
    isolation: isolate;
}
/* faint grid + soft glow inside the card */
.cta-card-grid {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(58,53,181,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58,53,181,0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 35%, #000 35%, transparent 80%);
    mask-image: radial-gradient(ellipse 75% 75% at 50% 35%, #000 35%, transparent 80%);
}
.cta-card-glow { position: absolute; top: -34%; left: 50%; transform: translateX(-50%); width: 42rem; height: 26rem; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(232,148,60,0.22), transparent 70%); }
.cta-inner { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto; }
/* The card is always a light surface, so the type + buttons are pinned to fixed
   tones (the theme tokens would flip light in dark mode and fail on the card). */
.cta-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: #B45309; margin-bottom: 1rem; display: block; font-feature-settings: "zero" 1; }
.cta-h { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 650; color: #20235C; margin: 0 0 1rem; text-wrap: balance; }
.cta-p { font-size: 1.0625rem; line-height: 1.6; color: #4A5360; margin: 0 0 2rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.cta-btn-light { background: #3A35B5; color: #fff; padding: 0.85rem 1.6rem; font-size: 0.9rem; box-shadow: 0 14px 30px -12px rgba(58, 53, 181, 0.55); }
.cta-btn-light:hover { background: #2A2690; color: #fff; box-shadow: 0 16px 34px -12px rgba(58, 53, 181, 0.7); }
.cta-btn-ghost { background: #FFFFFF; color: #20235C; padding: 0.85rem 1.5rem; font-size: 0.9rem; border: 1px solid rgba(58, 53, 181, 0.24); }
.cta-btn-ghost:hover { background: rgba(58, 53, 181, 0.08); border-color: rgba(58, 53, 181, 0.4); color: #2A2690; }
.cta-link { display: inline-block; margin-top: 1.4rem; font-size: 0.875rem; font-weight: 500; color: #3A35B5; text-decoration: underline; text-underline-offset: 0.2em; }
.cta-link:hover { color: #2A2690; }
@media (max-width: 560px) { .cta-card { padding: 3rem 1.25rem; } .cta-actions .btn { width: 100%; justify-content: center; } }

/* ── App showcase (framed shot emerging from the hero, dissolving below) ─
   The frame is pulled up so it flows directly out of the hero fade (no text
   between them) and its bottom mask blends it into the next section (no line). */
/* Pulled further up so the frosted frame rises into and overlaps the bottom of
   the hero illustration (leaf-style: the shot sits over the art). */
.showcase { position: relative; z-index: 2; padding: 0 0 1.5rem; margin-top: -7rem; }
/* the section right after the screenshot must not draw a hairline under it */
.showcase + .lsec { border-top: 0; }
/* Leaf-style: the shot is mounted in a thick translucent frosted-glass mat
   (a passe-partout), not just a hairline border. The mat is a real glass layer
   (blur + saturate + soft white gradient); the screenshot sits inset inside it
   on its own rounded, bordered panel. */
.showcase-frame {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1.5rem 1.5rem 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-backdrop-filter: blur(2px) saturate(0%);
    backdrop-filter: blur(2px) saturate(0%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 50px 100px -45px rgba(20, 24, 92, 0.5);
    overflow: hidden;
    /* dissolve the whole frame into the page bg toward the bottom */
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
[data-theme="dark"] .showcase-frame {
    border-color: rgba(201, 203, 255, 0.18);
    background: linear-gradient(180deg, rgba(201, 203, 255, 0.13) 0%, rgba(201, 203, 255, 0.04) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 50px 100px -45px rgba(0, 0, 0, 0.65);
}
.showcase-inner {
    border: 1px solid var(--border);
    border-radius: 0.85rem 0.85rem 0 0;
    background: var(--bg-surface);
    box-shadow: 0 12px 32px -18px rgba(20, 24, 92, 0.45);
    overflow: hidden;
}
.showcase-chrome { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
.showcase-dot { width: 0.6rem; height: 0.6rem; border-radius: 9999px; background: var(--border-accent); }
.showcase-dot:nth-child(1) { background: #E5897B; } .showcase-dot:nth-child(2) { background: #E8C06A; } .showcase-dot:nth-child(3) { background: #7FB892; }
.showcase-url { margin-left: 0.85rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); font-feature-settings: "zero" 1; }
.showcase-shot { display: block; }
.showcase-shot img { display: block; width: 100%; height: auto; }
/* Per-theme product shot swap (mirrors the hero light/dark art swap): the light
   picture shows by default, the dark variant only paints under [data-theme="dark"]. */
.showcase-shot .shot-dark { display: none; }
[data-theme="dark"] .showcase-shot .shot-light { display: none; }
[data-theme="dark"] .showcase-shot .shot-dark { display: block; }
@media (max-width: 768px) { .showcase { margin-top: -4rem; } .showcase-url { display: none; } }

/* ── Footer (big, with the Ophelios reveal) ───────────────── */
/* The footer is pinned to the viewport bottom; the landing content sheet lifts
   away to reveal it, with rounded corners on the sheet's bottom edge. */
.landing-body { --footer-h: 30rem; }
.landing-body .landing-main {
    position: relative;
    z-index: 1;
    background: var(--bg-deep);
    border-bottom-left-radius: 2.25rem;
    border-bottom-right-radius: 2.25rem;
    /* lift the sheet so it overlaps the footer top by ~3rem: the purple reads
       BEHIND the sheet's rounded bottom corners when fully revealed. */
    margin-bottom: calc(var(--footer-h) - 3rem);
    box-shadow: 0 1.5rem 3rem -1rem rgba(20, 24, 92, 0.16);
}
/* The reveal footer is fixed BEHIND the page sheet. Until the page is scrolled
   near the bottom it is fully covered by the opaque sheet and visible to nobody,
   so it stays out of the render + a11y tree there (landing.js toggles the class
   just before it is exposed). This also stops contrast checkers from scoring its
   light-on-dark text against the light sheet that overlaps it at the top. */
.landing-body .isl-footer { visibility: hidden; }
.landing-body.footer-revealed .isl-footer { visibility: visible; }
.landing-body .isl-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 0;
    background: linear-gradient(180deg, #20235C 0%, #191C4D 100%);
    /* Solid fallback under the gradient so contrast checkers (and any browser
       that drops the gradient) read the real dark surface, not the light page
       behind the fixed footer. */
    background-color: #191C4D;
    color: #EDEEFA;
    overflow: hidden;
}
/* whisper-subtle dot-grid (the one place the grid returns) */
.isl-footer-dots {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(201, 203, 255, 0.16) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.isl-footer-glow { position: absolute; top: -8rem; left: 50%; transform: translateX(-50%); width: min(50rem, 100%); height: 22rem; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(123, 118, 240, 0.28), transparent 70%); pointer-events: none; }
/* extra top room so the purple clearly sits behind the lifted sheet's corners */
.isl-footer-top { position: relative; z-index: 1; padding: 5.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 1.3fr 2fr; gap: 3rem; }
@media (min-width: 768px) { .isl-footer-top { padding-left: 2rem; padding-right: 2rem; } }
.isl-footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; }
.isl-footer-mark { display: inline-flex; color: #C9CBFF; }
.isl-footer-name { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; color: #fff; }
.isl-footer-tag { color: rgba(237, 238, 250, 0.78); font-size: 0.95rem; line-height: 1.65; max-width: 24rem; margin: 1.1rem 0 1.5rem; }
.isl-footer-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 550; color: #fff; padding: 0.6rem 1.15rem; border: 1px solid rgba(201, 203, 255, 0.4); border-radius: 9999px; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.isl-footer-cta:hover { color: #fff; background: rgba(123, 118, 240, 0.22); border-color: rgba(201, 203, 255, 0.7); }
.isl-footer-cta svg { transition: transform 0.25s var(--ease); }
.isl-footer-cta:hover svg { transform: translateX(0.2rem); }
/* socials: Tabler brand glyphs in soft round chips */
.isl-footer-socials { display: flex; gap: 0.6rem; margin-top: 1.6rem; }
.isl-footer-social { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 9999px; border: 1px solid rgba(201, 203, 255, 0.28); color: rgba(237, 238, 250, 0.82); background: rgba(201, 203, 255, 0.06); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); }
.isl-footer-social:hover { color: #fff; border-color: rgba(201, 203, 255, 0.7); background: rgba(123, 118, 240, 0.22); transform: translateY(-2px); }
.isl-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.25rem; }
.isl-footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.isl-footer-h { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: #9FA4D6; margin-bottom: 0.2rem; }
.isl-footer-col a { color: rgba(237, 238, 250, 0.82); font-size: 0.9rem; transition: color 0.15s var(--ease); width: fit-content; }
.isl-footer-col a:hover { color: #fff; }
.isl-footer-base { position: relative; padding: 1.5rem; border-top: 1px solid rgba(201, 203, 255, 0.16); display: flex; justify-content: space-between; align-items: center; gap: 0.85rem 1.5rem; flex-wrap: wrap; font-size: 0.8125rem; color: rgba(237, 238, 250, 0.7); }
/* left group: copyright + legal links sitting close together */
.isl-footer-base-left { display: inline-flex; align-items: center; gap: 0.55rem 0.8rem; flex-wrap: wrap; }
/* right group: status indicator beside the version */
.isl-footer-base-right { display: inline-flex; align-items: center; gap: 1.25rem; }
.isl-footer-copy a { color: rgba(237, 238, 250, 0.82); text-decoration: none; transition: color 0.15s var(--ease); }
.isl-footer-copy a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.isl-footer-legal { display: inline-flex; align-items: center; gap: 0.6rem; }
.isl-footer-legal a { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(237, 238, 250, 0.7); text-decoration: none; transition: color 0.15s var(--ease); }
.isl-footer-lock { color: #9FA4D6; flex-shrink: 0; }
.isl-footer-a11y-ico { color: #9FA4D6; flex-shrink: 0; }
.isl-footer-legal a:hover { color: #fff; }
.isl-footer-legal a:hover .isl-footer-a11y-ico { color: #fff; }
.isl-footer-legal-sep { color: rgba(201, 203, 255, 0.35); }
/* Canadian data-residency trust seal: subtle bordered pill, not a banner. */
.isl-footer-seal { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border: 1px solid rgba(201, 203, 255, 0.22); border-radius: 9999px; background: rgba(201, 203, 255, 0.05); font-size: 0.75rem; line-height: 1; color: rgba(237, 238, 250, 0.72); }
.isl-footer-seal-ico { color: #9FA4D6; flex-shrink: 0; }
.isl-footer-mono { font-family: var(--font-mono); font-feature-settings: "zero" 1; }
/* service status: green dot + ping, links to the status page (codequill pattern) */
.isl-footer-status { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.01em; color: rgba(237, 238, 250, 0.72); text-decoration: none; transition: color 0.2s var(--ease); }
.isl-footer-status:hover { color: #fff; }
.isl-footer-status-dot { position: relative; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 9999px; background: #22C55E; flex-shrink: 0; }
.isl-footer-status-dot::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: rgba(34, 197, 94, 0.7); animation: status-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.isl-footer-status[data-status="degraded"] .isl-footer-status-dot { background: #F59F0A; }
.isl-footer-status[data-status="degraded"] .isl-footer-status-dot::before { background: rgba(245, 159, 10, 0.7); }
.isl-footer-status[data-status="down"] .isl-footer-status-dot { background: #EF4444; }
.isl-footer-status[data-status="down"] .isl-footer-status-dot::before { background: rgba(239, 68, 68, 0.7); }
@keyframes status-ping { 75%, 100% { transform: scale(2.3); opacity: 0; } }
@media (max-width: 820px) {
    .isl-footer-top { grid-template-columns: 1fr; gap: 2.25rem; }
    /* Mobile declutter: drop the column link groups (product / docs / build).
       The brand, socials + mail, copyright and the legal links stay reachable. */
    .isl-footer-cols { display: none; }
    /* On small screens a fixed footer taller than the viewport cannot fully
       reveal; fall back to normal flow so every link stays reachable. */
    .landing-body .isl-footer { position: static; }
    .landing-body .landing-main { margin-bottom: 0; border-radius: 0; box-shadow: none; }
    /* Center the copyright + base info row on mobile. */
    .isl-footer-base { flex-direction: column; justify-content: center; text-align: center; }
    .isl-footer-base-right { width: 100%; justify-content: center; }
    /* Stack the copyright on its own centered line ABOVE the legal links (and the
       residency seal below), rather than letting them wrap unevenly in a row. */
    .isl-footer-base-left { width: 100%; flex-direction: column; align-items: center; gap: 0.7rem; }
    /* Drop the dangling copy/legal dividers between the stacked groups (the inner
       privacy/terms separator, which lives inside .isl-footer-legal, stays). */
    .isl-footer-base-left > .isl-footer-legal-sep { display: none; }
}

/* ── Dark developer card (inset, rounded, no separators) ───────────────────
   An inset dark card with clear left/right margins (not full-bleed) that brings
   the developer section forward. The code editor and feature panels stay light
   so they read as crisp panels floating on the deep indigo. No hairline above
   or below the card. */
.lsec-dark {
    position: relative;
    overflow: hidden;
    border-top: 0;
    width: calc(100% - 3rem);
    max-width: 75rem;
    margin: 3rem auto;
    padding: 4.25rem 0;
    border-radius: 2rem;
    background: linear-gradient(165deg, #23265F 0%, #1B1E50 60%, #161A45 100%);
    box-shadow: 0 50px 90px -50px rgba(20, 24, 92, 0.7);
    isolation: isolate;
}
/* the section after the inset card must not draw a hairline under it */
.lsec-dark + .lsec { border-top: 0; }
.lsec-dark-grid {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(201, 203, 255, 0.14) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%);
}
.lsec-dark-glow { position: absolute; top: -6rem; right: 0; width: min(34rem, 100%); height: 22rem; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(123,118,240,0.22), transparent 70%); }
.lsec-dark .section-label, .lsec-dark .section-label-dot { color: #9FA4D6; }
.lsec-dark .section-label-number { color: #C9CBFF; }
.lsec-dark .section-heading { color: #fff; }
.lsec-dark .section-heading .hero-accent { color: #C9CBFF; }
.lsec-dark .section-lede { color: rgba(237, 238, 250, 0.82); }
/* the how-it-works pipeline, restyled to read on the dark card */
.lsec-dark .how-flow::before { background: linear-gradient(90deg, #9A96F6 0%, #C9CBFF 55%, var(--accent-warm-soft) 100%); opacity: 0.5; }
.lsec-dark .how-node { background: #1B1E4E; border-color: rgba(201, 203, 255, 0.32); color: #C9CBFF; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55); }
.lsec-dark .how-step:hover .how-node { border-color: rgba(201, 203, 255, 0.6); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.6); }
.lsec-dark .how-k { color: #C9CBFF; }
.lsec-dark .how-h { color: #fff; }
.lsec-dark .how-p { color: rgba(237, 238, 250, 0.78); }
@media (max-width: 560px) { .lsec-dark { padding: 3.25rem 0; border-radius: 1.5rem; } }

/* ── Soft tinted-light panel (section 05) ──────────────────────────────────
   A gentle indigo + amber wash over the cool-light to break the rhythm (leaf
   PHP-section mood). Not flat, not dark; white cards still pop and read AA. */
.lsec-soft {
    border-top: 0;
    background:
        radial-gradient(60rem 26rem at 12% 0%, rgba(58, 53, 181, 0.07), transparent 60%),
        radial-gradient(52rem 24rem at 92% 100%, rgba(232, 148, 60, 0.08), transparent 62%),
        linear-gradient(180deg, var(--bg-deep) 0%, #EEF1FB 50%, var(--bg-deep) 100%);
}
[data-theme="dark"] .lsec-soft {
    background:
        radial-gradient(60rem 26rem at 12% 0%, rgba(123, 118, 240, 0.12), transparent 60%),
        radial-gradient(52rem 24rem at 92% 100%, rgba(232, 162, 76, 0.10), transparent 62%),
        var(--bg-deep);
}

/* ── Trust section (06): its own present cool-indigo plate ──────────────────
   Where section 05 is a faint symmetric wash, section 06 owns a full-bleed
   indigo band, clearly deeper than the plain-light sections, so the tonal
   shift reads the moment you scroll in. Layers: a broad diagonal indigo
   gradient with directional depth, a fine dot-grid keyed to "anyone can
   inspect", a focal halo + visible sonar rings around the receipt, and a hair
   of grain so the wide gradients never band. The dark receipt card and copy
   stay AA on the tint: muted copy is nudged darker in-section and the card /
   panel hairlines are deepened so nothing washes out. */
.lsec-trust {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --text-muted: #474F63;                 /* keep muted copy AA on the indigo tint */
    border-top: 1px solid #BEC6EA;         /* a defined indigo step as you scroll in */
    background:
        radial-gradient(40rem 30rem at 84% 20%, rgba(255, 255, 255, 0.52), transparent 60%),
        radial-gradient(52rem 42rem at 3% 106%, rgba(58, 53, 181, 0.20), transparent 64%),
        linear-gradient(158deg, #E7EAFB 0%, #DCE1F8 48%, #CFD5F2 100%);
}
/* fine technical dot-grid, densest toward the artifact (inspect / verify) */
.lsec-trust::before {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(58, 53, 181, 0.17) 1px, transparent 1.7px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 92% 82% at 80% 30%, #000 0%, rgba(0, 0, 0, 0.35) 46%, transparent 74%);
    mask-image: radial-gradient(ellipse 92% 82% at 80% 30%, #000 0%, rgba(0, 0, 0, 0.35) 46%, transparent 74%);
    opacity: 0.6;
}
/* a whisper of grain so the broad gradients never band on screenshots / JPEG */
.lsec-trust::after {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03;
}
[data-theme="dark"] .lsec-trust {
    --text-muted: #8A92AE;
    border-top: 1px solid #23264C;
    background:
        radial-gradient(42rem 32rem at 84% 20%, rgba(123, 118, 240, 0.16), transparent 62%),
        radial-gradient(54rem 42rem at 2% 104%, rgba(58, 53, 181, 0.22), transparent 66%),
        linear-gradient(158deg, #15182F 0%, #101228 50%, #0C0E20 100%);
}
[data-theme="dark"] .lsec-trust::before {
    background-image: radial-gradient(rgba(123, 118, 240, 0.20) 1px, transparent 1.7px);
    opacity: 0.55;
}
[data-theme="dark"] .lsec-trust::after { opacity: 0.05; }
/* deepen card + panel hairlines so they stay crisp on the tint */
.lsec-trust .trust-card { border-color: #C5CCE8; }
[data-theme="dark"] .lsec-trust .trust-card { border-color: #2B3054; }

/* Proof Ripple + focal halo: a still concentric field, a soft indigo halo, and
   three slow sonar pulses, all centered on the receipt (anyone, anywhere, can
   check). Now that the section has a colored ground, the field and rings read
   at a higher alpha without looking like a widget. The rig lives inside
   .trust-receipt (z-index below the opaque card) so it tracks the card when it
   stacks on mobile. Transform + opacity only, GPU-composited, no JavaScript. */
.trust-ripple {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 50% 44%, rgba(58, 53, 181, 0.20), transparent 58%);
}
[data-theme="dark"] .trust-ripple {
    background: radial-gradient(circle at 50% 44%, rgba(123, 118, 240, 0.24), transparent 58%);
}
.trust-rings {
    position: absolute; left: 50%; top: 50%; width: 46rem; height: 46rem;
    transform: translate(-50%, -50%);
    background: repeating-radial-gradient(circle at center, rgba(58, 53, 181, 0.16) 0, rgba(58, 53, 181, 0.16) 1px, transparent 1px, transparent 3.4rem);
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 62%);
    mask-image: radial-gradient(circle at center, #000 0%, transparent 62%);
}
[data-theme="dark"] .trust-rings {
    background: repeating-radial-gradient(circle at center, rgba(123, 118, 240, 0.18) 0, rgba(123, 118, 240, 0.18) 1px, transparent 1px, transparent 3.4rem);
}
.trust-ripple-ring {
    position: absolute; left: 50%; top: 50%; width: 32rem; height: 32rem;
    border: 1.5px solid rgba(58, 53, 181, 0.42); border-radius: 50%;
    opacity: 0; transform: translate(-50%, -50%) scale(0.15);
    animation: trust-pulse 11s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform, opacity;
}
.trust-ripple-ring:nth-child(3) { animation-delay: -3.66s; }
.trust-ripple-ring:nth-child(4) { animation-delay: -7.33s; }
[data-theme="dark"] .trust-ripple-ring { border-color: rgba(123, 118, 240, 0.44); }
@keyframes trust-pulse {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.15); }
    12%  { opacity: 0.5; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* Reduced motion: freeze the pulses into a designed set of concentric rings so
   the focal treatment still reads as intentional, not empty. */
@media (prefers-reduced-motion: reduce) {
    .trust-ripple-ring { animation: none; }
    .trust-ripple-ring:nth-child(2) { opacity: 0.42; transform: translate(-50%, -50%) scale(0.42); }
    .trust-ripple-ring:nth-child(3) { opacity: 0.28; transform: translate(-50%, -50%) scale(0.66); }
    .trust-ripple-ring:nth-child(4) { opacity: 0.16; transform: translate(-50%, -50%) scale(0.9); }
}

/* intro beside the artifact */
.trust-lead { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 3.5rem; align-items: center; }
.trust-lead .lsec-intro { min-width: 0; }

/* the verifier checklist (replaces the former keyword strip) */
.trust-verify { margin-top: 1.75rem; }
.trust-verify-k { display: block; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--accent); font-feature-settings: "zero" 1; margin-bottom: 0.7rem; }
.trust-verify-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.trust-verify-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; line-height: 1.5; color: var(--text); }
.trust-verify-list svg { color: var(--accent); flex-shrink: 0; margin-top: 0.2rem; }

/* the artifact: a sample consent receipt as a fixed-dark evidence panel
   (family mq-log tones, pinned so it reads AA in both themes) */
.trust-receipt { margin: 0; width: min(26rem, 100%); justify-self: end; display: flex; flex-direction: column; gap: 1.35rem; position: relative; z-index: 1; }
.trust-receipt-card { background: linear-gradient(165deg, #23265F 0%, #1A1D4A 100%); border: 1px solid rgba(201, 203, 255, 0.18); border-radius: 1rem; padding: 1.35rem 1.45rem; box-shadow: 0 32px 66px -32px rgba(20, 24, 92, 0.5), 0 2px 26px -14px rgba(58, 53, 181, 0.32); }
.trust-receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.trust-receipt-title { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: #C9CBFF; font-feature-settings: "zero" 1; }
.trust-receipt-title svg { color: #9A96F6; flex-shrink: 0; }
.trust-receipt-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6EE7A8; background: rgba(110, 231, 168, 0.12); border: 1px solid rgba(110, 231, 168, 0.32); border-radius: 9999px; padding: 0.22rem 0.6rem; white-space: nowrap; }
.trust-receipt-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 1fr 1fr; align-items: center; }
/* Column heads share the exact centering model of the data cells (flex-centered
   in the same grid track), so "FACTURATION" always sits dead over its checks.
   No text-overflow:ellipsis, which would left-anchor a long head off its column. */
.trust-receipt-col { display: flex; align-items: flex-end; justify-content: center; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9FA4D6; text-align: center; padding-bottom: 0.55rem; min-width: 0; overflow: hidden; white-space: nowrap; }
.trust-receipt-row { font-family: var(--font-mono); font-size: 0.74rem; color: #EDEEFA; font-feature-settings: "zero" 1; padding: 0.62rem 0; border-top: 1px solid rgba(201, 203, 255, 0.1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trust-receipt-cell { display: flex; align-items: center; justify-content: center; padding: 0.62rem 0; border-top: 1px solid rgba(201, 203, 255, 0.1); }
.trust-receipt-cell.is-granted { color: #6EE7A8; }
.trust-receipt-cell.is-off { color: rgba(201, 203, 255, 0.38); }
.trust-receipt-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(201, 203, 255, 0.16); }
.trust-receipt-hash { font-family: var(--font-mono); font-size: 0.68rem; color: #C9CBFF; font-feature-settings: "zero" 1; }
.trust-receipt-anchor { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: #C9CBFF; }
.trust-receipt-dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: var(--accent-warm-soft); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(232, 148, 60, 0.18); }
.trust-receipt-cap { font-size: 0.84rem; line-height: 1.55; color: var(--text-muted); text-align: center; margin: 0; }
@media (max-width: 900px) {
    .trust-lead { grid-template-columns: 1fr; gap: 2.25rem; }
    .trust-receipt { justify-self: start; }
}
/* Narrow screens: step the receipt's mono sizes down so the FR column heads
   ("Facturation") never truncate mid-word. */
@media (max-width: 480px) {
    .trust-receipt-card { padding: 1.15rem 1rem; }
    .trust-receipt-title { font-size: 0.62rem; }
    .trust-receipt-col { font-size: 0.55rem; letter-spacing: 0.04em; }
    .trust-receipt-row { font-size: 0.68rem; }
    .trust-receipt-hash { font-size: 0.62rem; }
    .trust-receipt-anchor { font-size: 0.6rem; }
}

/* ── Dark-mode filled-accent AA fixes (white labels) ──────── */
[data-theme="dark"] .isl-cta { background: #5b55d6; box-shadow: 0 6px 18px -6px rgba(91,85,214,0.6); }
[data-theme="dark"] .isl-cta:hover { background: #4a45c0; }
[data-theme="dark"] .price-badge { background: #5b55d6; }

/* Overflow guards so decorative glows never widen the page. */
.landing-body { overflow-x: clip; }
.cta, .lsec-dark, .showcase { overflow-x: clip; }

/* ── Reveal-on-scroll (landing) ──────────────────────────── */
.reveal-on-scroll { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js-anim .reveal-on-scroll:not(.is-visible) { opacity: 0; transform: translateY(1.25rem); }
.js-anim .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
/* staggered children: the container is the observed .reveal-on-scroll */
.reveal-stagger > * { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js-anim .reveal-stagger:not(.is-visible) > * { opacity: 0; transform: translateY(1rem); }
.js-anim .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.js-anim .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js-anim .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js-anim .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
/* scale-reveal variant for marquee blocks (showcase frame, CTA card) */
.reveal-scale { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js-anim .reveal-scale:not(.is-visible) { opacity: 0; transform: translateY(1.5rem) scale(0.975); }
.js-anim .reveal-scale.is-visible { opacity: 1; transform: none; }

/* ── In-hero header: a transparent nav that scrolls with the hero ─────────
   The at-rest spread is the hero's own header row: the prominent brand sits at
   the left, the links + controls at the right, all fully transparent over the
   art (no pill, no frosted chip, no border). It scrolls away with the page
   (app.css makes the landing nav absolute); the frosted island then pops in on
   scroll past the header (handled by app.css .is-scrolled). Type is pinned to
   the light palette since the art is always light, holding AA in both themes. */
.isl-nav[data-mode="landing"] .isl-spread .isl-pill {
    background: none;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0.3rem 0;
}
.isl-nav[data-mode="landing"] .isl-spread .isl-link { color: #20235C; font-weight: 500; }
.isl-nav[data-mode="landing"] .isl-spread .isl-link:hover { color: #20235C; background: rgba(58, 53, 181, 0.12); }
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-text { color: #20235C; }
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-mark { color: #3A35B5; }
/* Spread bar: a true three-column balance so the link group stays centered
   regardless of how wide the right-side controls grow. The brand anchors the
   left and is sized up for presence in the header. */
.isl-nav[data-mode="landing"] .isl-spread-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}
.isl-nav[data-mode="landing"] .isl-spread .isl-left { justify-self: start; }
.isl-nav[data-mode="landing"] .isl-spread .isl-pill { justify-self: center; }
.isl-nav[data-mode="landing"] .isl-spread .isl-right { justify-self: end; gap: 0.6rem; }
/* The brand is the prominent lockup in the header now, so it stays visible at
   rest (no longer hidden behind a separate hero lockup). */
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark { gap: 0.7rem; }
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-text { font-size: 2.2rem; font-weight: 680; letter-spacing: -0.025em; }
.isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-mark svg { width: 44px; height: 44px; }
/* FR/EN selector reads bare over the art (light type, no chip). */
.isl-nav[data-mode="landing"] .isl-spread .isl-lang-current { color: #3A35B5; }
.isl-nav[data-mode="landing"] .isl-spread .isl-lang-link { color: #20235C; }
.isl-nav[data-mode="landing"] .isl-spread .isl-lang-sep { color: rgba(32, 35, 92, 0.35); }

/* Dark hero: the at-rest spread sits over the DARK night-heron art, so the
   palette that is pinned dark-for-light-art above flips to light-on-dark here
   (mirrors the hero's pinned type). Only the landing spread is repinned; the
   docked island themes via tokens (app.css). The founder flagged the wordmark
   as too dark on the night scene, so the mark + text are brightened first. */
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-text { color: #F4F6FC; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-wordmark-mark { color: #A7A3FF; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-link { color: #C9CEDE; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-link:hover { color: #F4F6FC; background: rgba(123, 118, 240, 0.20); }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-lang-current { color: #A7A3FF; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-lang-link { color: #C9CEDE; }
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-lang-sep { color: rgba(201, 203, 255, 0.42); }
/* Toggle / control chips read as defined translucent-glass buttons over the art
   (mirroring the solid white chips the light hero uses), not near-invisible
   surface boxes barely off the night sky. */
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-icon-btn {
    background: rgba(24, 28, 46, 0.58);
    border-color: rgba(123, 118, 240, 0.34);
    color: #D5D7FF;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
[data-theme="dark"] .isl-nav[data-mode="landing"] .isl-spread .isl-icon-btn:hover { color: #F4F6FC; border-color: var(--border-accent); background: rgba(34, 38, 58, 0.72); }

/* ── Mobile menu (landing only, <=820px) ─────────────────────────────────────
   The hamburger toggle (#islMenuToggle) opens a focus-trapped glass dialog that
   carries the full nav: the scroll-spy section links, the FR/EN selector and the
   booking CTA. Desktop + docs are untouched (this markup renders on the landing
   only). The open/close state is driven by site.js: .is-open animates it in and
   the [hidden] attribute keeps the closed menu out of the a11y + tab order. */
.isl-menu-toggle .isl-menu-close { display: none; }
.isl-menu-toggle[aria-expanded="true"] .isl-menu-open { display: none; }
.isl-menu-toggle[aria-expanded="true"] .isl-menu-close { display: inline-flex; }
/* Above the docked island bar, below nothing else. */
.isl-menu-toggle[aria-expanded="true"] { color: #3A35B5; border-color: rgba(58, 53, 181, 0.4); }

.isl-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 49;
    display: flex;
    flex-direction: column;
    padding: 5rem 0.9rem 1.25rem;
    background: rgba(20, 24, 92, 0.42);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    transition: opacity 0.28s var(--ease);
}
.isl-mobile-menu.is-open { opacity: 1; }
.isl-mobile-menu[hidden] { display: none; }
.isl-mobile-panel {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(58, 53, 181, 0.16);
    border-radius: 1.25rem;
    box-shadow: 0 28px 64px -24px rgba(20, 24, 92, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 0.6rem;
    opacity: 0;
    transform: translateY(-0.85rem);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.isl-mobile-menu.is-open .isl-mobile-panel { opacity: 1; transform: translateY(0); }
.isl-mobile-links { display: flex; flex-direction: column; }
.isl-mobile-links a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.85rem 0.9rem;
    font-size: 1.0625rem;
    font-weight: 550;
    color: #20235C;
    text-decoration: none;
    border-radius: 0.75rem;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.isl-mobile-links a:hover, .isl-mobile-links a:active { color: #3A35B5; background: rgba(58, 53, 181, 0.1); }
.isl-mobile-links a + a { border-top: 1px solid rgba(32, 35, 92, 0.08); }
/* live scroll-spy highlight, mirroring the desktop island groups */
.isl-nav[data-active-section="problem"] .isl-mobile-links a[data-section="problem"],
.isl-nav[data-active-section="lawmap"] .isl-mobile-links a[data-section="how"],
.isl-nav[data-active-section="how"] .isl-mobile-links a[data-section="how"],
.isl-nav[data-active-section="developers"] .isl-mobile-links a[data-section="how"],
.isl-nav[data-active-section="compliance"] .isl-mobile-links a[data-section="comp"],
.isl-nav[data-active-section="trust"] .isl-mobile-links a[data-section="comp"],
.isl-nav[data-active-section="pricing"] .isl-mobile-links a[data-section="pricing"] {
    color: #3A35B5;
    background: rgba(58, 53, 181, 0.1);
}
.isl-mobile-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.95rem 0.9rem 0.4rem;
    border-top: 1px solid rgba(32, 35, 92, 0.1);
}
.isl-mobile-foot .isl-lang { font-size: 0.95rem; gap: 0.5rem; justify-content: center; margin-top: 0.35rem; }
.isl-mobile-foot .isl-lang-current { color: #3A35B5; }
.isl-mobile-foot .isl-lang-link { color: #20235C; }
.isl-mobile-foot .isl-lang-link, .isl-mobile-foot .isl-lang-current { padding: 0.35rem 0.25rem; }
.isl-mobile-foot .isl-lang-sep { color: rgba(32, 35, 92, 0.3); }
.isl-cta-block { width: 100%; min-height: 2.85rem; padding: 0 1.3rem; font-size: 0.92rem; }
.isl-mobile-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.85rem;
    border-radius: 9999px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.isl-mobile-book svg { flex-shrink: 0; }
.isl-mobile-book:hover, .isl-mobile-book:active { color: var(--accent); background: var(--accent-glow); }
/* Lock body scroll while the menu is open. */
body.menu-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .isl-mobile-menu, .isl-mobile-panel { transition: none; }
}
/* Dark: the hamburger dialog is a pinned-white glass panel in light mode; in
   dark that reads as a jarring bright card. Flip it to a deep frosted panel with
   light type so it belongs to the night theme (AA: links ~11:1 on the panel). */
[data-theme="dark"] .isl-mobile-menu { background: rgba(6, 8, 18, 0.55); }
[data-theme="dark"] .isl-mobile-panel {
    background: rgba(20, 23, 41, 0.96);
    border-color: rgba(123, 118, 240, 0.22);
    box-shadow: 0 28px 64px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .isl-mobile-links a { color: #E7E9F5; }
[data-theme="dark"] .isl-mobile-links a:hover, [data-theme="dark"] .isl-mobile-links a:active { color: #F4F6FC; background: rgba(123, 118, 240, 0.18); }
[data-theme="dark"] .isl-mobile-links a + a { border-top-color: rgba(201, 203, 255, 0.1); }
[data-theme="dark"] .isl-mobile-foot { border-top-color: rgba(201, 203, 255, 0.12); }
[data-theme="dark"] .isl-mobile-foot .isl-lang-current { color: #A7A3FF; }
[data-theme="dark"] .isl-mobile-foot .isl-lang-link { color: #C9CEDE; }
[data-theme="dark"] .isl-mobile-foot .isl-lang-sep { color: rgba(201, 203, 255, 0.35); }
/* the live scroll-spy highlight on the mobile links, re-toned for dark */
[data-theme="dark"] .isl-nav[data-active-section="problem"] .isl-mobile-links a[data-section="problem"],
[data-theme="dark"] .isl-nav[data-active-section="lawmap"] .isl-mobile-links a[data-section="how"],
[data-theme="dark"] .isl-nav[data-active-section="how"] .isl-mobile-links a[data-section="how"],
[data-theme="dark"] .isl-nav[data-active-section="developers"] .isl-mobile-links a[data-section="how"],
[data-theme="dark"] .isl-nav[data-active-section="compliance"] .isl-mobile-links a[data-section="comp"],
[data-theme="dark"] .isl-nav[data-active-section="trust"] .isl-mobile-links a[data-section="comp"],
[data-theme="dark"] .isl-nav[data-active-section="pricing"] .isl-mobile-links a[data-section="pricing"] {
    color: #A7A3FF;
    background: rgba(123, 118, 240, 0.18);
}

/* ── The Law 25 feature map (Trinsic-style drifting cards) ──── */
.lawmap-sec { overflow: hidden; }
.lawmap-intro { max-width: 46rem; margin: 0 auto; text-align: center; }
.lawmap-intro .section-heading, .lawmap-intro .section-lede { margin-left: auto; margin-right: auto; }
.lawmap-stage {
    position: relative;
    max-width: 60rem;
    margin: 3.5rem auto 0;
    min-height: 38rem;
}
.lawmap-web { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.lawmap-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: min(20rem, 72vw);
    text-align: center;
    /* fixed indigo (not theme tokens) so white text holds AA in dark mode too */
    background: linear-gradient(180deg, #4B46C8 0%, #2A2690 100%);
    color: #fff;
    border-radius: 1.1rem;
    padding: 1.6rem 1.5rem;
    box-shadow: 0 30px 60px -24px rgba(58, 53, 181, 0.6);
}
.lawmap-center-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; background: rgba(255,255,255,0.16); color: #fff; margin-bottom: 0.85rem; }
.lawmap-center-eyebrow { display: block; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.82); margin-bottom: 0.5rem; font-feature-settings: "zero" 1; }
.lawmap-center-h { font-size: 1.4rem; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 0.55rem; color: #fff; }
.lawmap-center-p { font-size: 0.9rem; line-height: 1.55; color: rgba(255,255,255,0.86); margin: 0; }

.lawmap-card {
    position: absolute;
    z-index: 2;
    width: 15.5rem;
    transform: translate(-50%, -50%) translate3d(var(--px, 0px), var(--py, 0px), 0);
    transition: transform 0.4s var(--ease);
    will-change: transform;
}
.lawmap-card-inner {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.05rem 1.15rem;
    box-shadow: 0 18px 40px -26px rgba(20, 24, 92, 0.45);
    animation: lawmap-drift var(--dur, 9s) var(--ease) infinite alternate;
    animation-delay: var(--delay, 0s);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
/* Hover does not trigger a motion of its own: the gentle ambient drift simply
   freezes (pauses) under the pointer, with a quiet border/shadow affordance. */
.lawmap-card-inner:hover { border-color: var(--border-accent); box-shadow: 0 22px 46px -22px rgba(20, 24, 92, 0.5); animation-play-state: paused; }
.lawmap-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 0.55rem; background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); margin-bottom: 0.6rem; }
.lawmap-card-h { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 0 0 0.3rem; letter-spacing: -0.01em; }
.lawmap-card-p { font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); margin: 0 0 0.7rem; }
.lawmap-card-art { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; font-feature-settings: "zero" 1; }
.lawmap-card-art-law { text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.lawmap-card-art-no { color: var(--accent); font-weight: 600; background: var(--accent-glow); border: 1px solid var(--border-accent); border-radius: 9999px; padding: 0.1rem 0.5rem; }
/* In dark mode the indigo accent on the faint accent-glow chip dips below AA;
   brighten the article-citation chips (here, marquee, and ledger) to clear it. */
[data-theme="dark"] .lawmap-card-art-no,
[data-theme="dark"] .mq-art,
[data-theme="dark"] .ledger-art { color: var(--accent-strong); }

/* card anchor points (desktop) */
.lawmap-card-tl { top: 11%;  left: 17%; }
.lawmap-card-ml { top: 50%;  left: 11%; }
.lawmap-card-bl { top: 89%;  left: 17%; }
.lawmap-card-tr { top: 11%;  left: 83%; }
.lawmap-card-mr { top: 50%;  left: 89%; }
.lawmap-card-br { top: 89%;  left: 83%; }

.lawmap-card-ml .lawmap-card-inner { --dur: 11s; --delay: -2s; }
.lawmap-card-tr .lawmap-card-inner { --dur: 10s; --delay: -4s; }
.lawmap-card-bl .lawmap-card-inner { --dur: 12s; --delay: -1s; }
.lawmap-card-mr .lawmap-card-inner { --dur: 9.5s; --delay: -5s; }
.lawmap-card-br .lawmap-card-inner { --dur: 10.5s; --delay: -3s; }

@keyframes lawmap-drift {
    from { transform: translateY(-0.5rem); }
    to   { transform: translateY(0.5rem); }
}

/* Tablet / mobile: drop the constellation, stack into a clean responsive grid */
@media (max-width: 900px) {
    .lawmap-stage { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
    .lawmap-web { display: none; }
    .lawmap-center { position: static; transform: none; width: auto; grid-column: 1 / -1; }
    .lawmap-card { position: static; transform: none; width: auto; }
    .lawmap-card-inner { animation: none; }
}
@media (max-width: 560px) { .lawmap-stage { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .hero-bg img { animation: none; }
    .lawmap-card-inner { animation: none; }
    .lawmap-card { transform: translate(-50%, -50%); }
    .reveal-on-scroll, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ── Proof + governance evidence panel (merged into the feature map) ─────────
   The immutable access-log evidence panel sits below the constellation as one
   cohesive proof unit: an intro lead beside the standout fixed-dark sample-log
   card (the former marquee's best visual; its redundant companion cards dropped). */
.lawmap-proof { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.75rem; align-items: center; margin-top: 4rem; padding-top: 3.5rem; border-top: 1px solid var(--border); }
.lawmap-proof-lead { max-width: 30rem; }
.lawmap-proof-h { font-size: clamp(1.4rem, 2.7vw, 1.95rem); line-height: 1.18; letter-spacing: -0.02em; font-weight: 650; color: var(--ink); margin: 0 0 0.9rem; text-wrap: balance; }
.lawmap-proof-h .hero-accent { color: var(--accent); }
.lawmap-proof-p { font-size: 1rem; line-height: 1.7; color: var(--text-muted); margin: 0; }
.lawmap-proof-note { font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); margin: 1.1rem 0 0; }
.lawmap-proof-panel { margin: 0; }
@media (max-width: 920px) { .lawmap-proof { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.75rem; padding-top: 2.5rem; } }

.mq-hero { display: flex; flex-direction: column; padding: 1.85rem; min-width: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 1.1rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.mq-hero:hover { border-color: var(--border-accent); box-shadow: 0 22px 48px -28px rgba(20, 24, 92, 0.45); transform: translateY(-2px); }
.mq-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.05rem; }
.mq-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 0.65rem; background: var(--accent-glow); color: var(--accent); border: 1px solid var(--border-accent); flex-shrink: 0; }
.mq-art { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; font-feature-settings: "zero" 1; color: var(--accent); font-weight: 600; background: var(--accent-glow); border: 1px solid var(--border-accent); border-radius: 9999px; padding: 0.2rem 0.6rem; line-height: 1.55; }
.mq-h { letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.mq-hero-h { font-size: 1.3rem; font-weight: 650; margin-bottom: 0.6rem; }
.mq-p { color: var(--text-muted); margin: 0; }
.mq-hero-p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; }
/* fixed-dark evidence panel (pinned tones, AA in both themes) */
.mq-log { margin-top: auto; background: linear-gradient(165deg, #23265F 0%, #1A1D4A 100%); border: 1px solid rgba(201, 203, 255, 0.16); border-radius: 0.85rem; padding: 0.9rem 1rem; }
.mq-log-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(201, 203, 255, 0.1); }
.mq-log-row:first-child { padding-top: 0.15rem; }
.mq-log-kind { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; color: #C9CBFF; background: rgba(201, 203, 255, 0.12); border-radius: 4px; padding: 0.16rem 0.4rem; white-space: nowrap; }
.mq-log-cell { font-family: var(--font-mono); font-size: 0.74rem; color: #EDEEFA; font-feature-settings: "zero" 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-log-ok { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.68rem; color: #6EE7A8; white-space: nowrap; }
.mq-log-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.03em; color: #C9CBFF; font-feature-settings: "zero" 1; }
.mq-log-dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: var(--accent-warm-soft); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(232, 148, 60, 0.18); }

/* ── Governance-layer screenshot (replaces the former access-log card) ───────
   The real Centre de conformite, framed in the family app-screenshot treatment
   (glass outer frame + chrome bar), with an eyebrow + caption beneath. */
.lawmap-gov { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.lawmap-gov-frame {
    padding: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1.2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.4) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 30px 64px -34px rgba(20, 24, 92, 0.5);
}
[data-theme="dark"] .lawmap-gov-frame {
    border-color: rgba(201, 203, 255, 0.18);
    background: linear-gradient(180deg, rgba(201, 203, 255, 0.13) 0%, rgba(201, 203, 255, 0.04) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 64px -34px rgba(0, 0, 0, 0.65);
}
.lawmap-gov-frame .showcase-inner { border-radius: 0.78rem; }
.lawmap-gov-cap { display: flex; flex-direction: column; gap: 0.35rem; }
.lawmap-gov-eyebrow { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; color: var(--accent); font-feature-settings: "zero" 1; }
.lawmap-gov-caption { font-size: 0.9rem; line-height: 1.65; color: var(--text-muted); margin: 0; }

/* ── Compliance explainer (the ledger: article -> obligation -> capability) ──
   Fully visible (no hidden accordion) so it reads as "show, don't trust us".
   Desktop: a three-column ledger with grouped sub-headers. Mobile: each row
   stacks with its own labels. */
/* The full article-by-article ledger is a native <details> disclosure: collapsed
   by default so it does not dominate the page, opened by the toggle. The section
   heading and lede stay visible above. Matches the FAQ <details> pattern. */
.ledger-disclosure { margin-top: 2.5rem; }
.ledger-toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.35rem; border: 1px solid var(--border-accent); border-radius: 9999px; background: var(--bg-surface); color: var(--accent); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.ledger-toggle::-webkit-details-marker { display: none; }
.ledger-toggle:hover { background: var(--accent-glow); box-shadow: 0 14px 34px -24px rgba(32, 35, 92, 0.4); }
.ledger-toggle-chevron { flex-shrink: 0; color: var(--accent); transition: transform 0.25s var(--ease); }
.ledger-disclosure[open] .ledger-toggle-chevron { transform: rotate(180deg); }
.ledger-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ledger-disclosure-body { margin: 0; }
.ledger { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: 1.1rem; overflow: hidden; background: var(--bg-surface); box-shadow: 0 30px 70px -44px rgba(20, 24, 92, 0.4); }
.ledger-head { display: grid; grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.25rem; padding: 0.8rem 1.4rem; background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
.ledger-head span { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-feature-settings: "zero" 1; }
.ledger-group-title { margin: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.72rem 1.4rem; background: var(--accent-glow); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-feature-settings: "zero" 1; }
.ledger-group:first-of-type .ledger-group-title { border-top: 0; }
.ledger-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.25rem; padding: 0.9rem 1.4rem; border-top: 1px solid var(--border); align-items: start; transition: background 0.15s var(--ease); }
.ledger-row:hover { background: var(--accent-glow); }
.ledger-art { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--accent); background: var(--accent-glow); border: 1px solid var(--border-accent); border-radius: 9999px; padding: 0.22rem 0.55rem; line-height: 1.4; white-space: nowrap; justify-self: start; font-feature-settings: "zero" 1; }
.ledger-ob, .ledger-cap { font-size: 0.9rem; line-height: 1.5; min-width: 0; }
.ledger-ob { color: var(--text-muted); }
.ledger-cap { color: var(--ink); }
.ledger-cap-body { display: inline-flex; gap: 0.5rem; align-items: flex-start; }
.ledger-cap-body svg { color: var(--accent); flex-shrink: 0; margin-top: 0.15rem; }
.ledger-cell-k { display: none; }
.ledger-note { display: flex; align-items: flex-start; gap: 0.55rem; margin: 1.25rem 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--text-muted); max-width: 54rem; }
.ledger-note svg { color: var(--accent); flex-shrink: 0; margin-top: 0.1rem; }
@media (max-width: 820px) {
    .ledger-head { display: none; }
    .ledger-row { grid-template-columns: 1fr; gap: 0.55rem; padding: 1.1rem 1.25rem; }
    .ledger-cap { display: flex; flex-direction: column; }
    .ledger-cell-k { display: block; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 0.2rem; font-feature-settings: "zero" 1; }
}

/* ----------------------------------------------------------------------------
   Legal pages (Privacy Policy / Terms of Use). Standalone long-form prose on
   the landing surface: the island nav docks, the deep-indigo footer reveals on
   scroll, exactly like the landing. Centered reading column, a prominent
   counsel-review notice at the top. No em-dashes.
---------------------------------------------------------------------------- */
/* Legal pages keep the landing chrome (island nav + deep-indigo footer) but
   opt OUT of the footer-reveal pin: the footer flows as a normal static block
   at the end of the (long) content. This also removes the content-sheet lift,
   so nothing overlaps the footer text and contrast reads true. */
.legal-body .landing-main { margin-bottom: 0; box-shadow: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.legal-body .isl-footer { position: static; }
/* Legal / utility pages carry the relocated language + theme controls in the
   footer, so the footer must stay visible from the top (it flows statically and
   nothing overlaps it here). Overrides the landing's reveal-on-scroll hiding. */
.legal-body .isl-footer { visibility: visible; }

/* ── Minimal header (legal / utility pages) ──────────────────────────────────
   The full landing nav is swapped for a two-side bar: the logo on the left,
   linked to the locale home, and a compact language + theme control group on the
   right. Fixed like the island nav so the legal-main top padding still clears it;
   a calm page-bg bar with a hairline underline. The wordmark and the controls
   inherit --ink / --accent / --text-muted, which resolve to the dark-brightened
   token values in dark mode, so they stay properly contrasted in both themes
   with no special-casing. */
.isl-nav-minimal {
    position: fixed;
    top: 0; left: 0;
    z-index: 50;
    width: 100%;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
}
.isl-minimal-row {
    max-width: 72rem;
    margin: 0 auto;
    min-height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
}
.isl-nav-minimal .isl-logo-link { border-radius: 8px; }
.isl-nav-minimal .isl-wordmark { gap: 0.6rem; }
.isl-nav-minimal .isl-wordmark-text { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.isl-nav-minimal .isl-wordmark-mark { color: var(--accent); }
.isl-nav-minimal .isl-wordmark-mark svg { width: 27px; height: 27px; }
.isl-nav-minimal .isl-logo-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Right-side language + theme controls. The FR/EN selector reuses the shared
   lang-block (.lang-switch hook) and the theme button the shared .js-theme-toggle
   hook, so the existing scripts wire them with no extra JS. Both inherit the
   theme tokens, matching the header bar in light and dark. */
.isl-minimal-controls { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.isl-nav-minimal .isl-icon-btn { width: 1.9rem; height: 1.9rem; }

/* ── 404 / utility error page ────────────────────────────────────────────── */
.error-wrap { text-align: center; padding-top: 3rem; padding-bottom: 3rem; }
.error-code {
    font-family: var(--font-mono);
    font-size: clamp(4.5rem, 16vw, 8rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: var(--accent);
    opacity: 0.9;
}
.error-title { margin-top: 0; }
.error-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; }
.error-link-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.35rem;
    background: var(--accent); color: #fff;
    border-radius: 9999px; font-weight: 500; font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 6px 18px -6px rgba(58, 53, 181, 0.55);
    transition: background 0.2s var(--ease);
}
.error-link-primary:hover { background: var(--accent-strong); color: #fff; }
/* Dark mode: --accent brightens to #7B76F0, which drops white text to 3.68:1.
   Pin the button to a deeper indigo so white clears AA (4.5:1) on the CTA. */
[data-theme="dark"] .error-link-primary { background: #4B46C8; }
[data-theme="dark"] .error-link-primary:hover { background: #5B56D8; }
.error-link-secondary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.35rem;
    border: 1px solid var(--border); color: var(--text);
    border-radius: 9999px; font-weight: 500; font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.error-link-secondary:hover { border-color: var(--border-accent); color: var(--accent); }

.legal-main { padding: calc(var(--nav-height) + 2.5rem) 0 6rem; }
.legal-wrap { max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; position: relative; }
@media (min-width: 768px) { .legal-wrap { padding: 0 2rem; } }

.legal-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin: 0 0 0.75rem; }
.legal-head .prose-h1, .legal-title { font-size: 2.4rem; font-weight: 700; color: var(--ink); margin: 0 0 0.6rem; line-height: 1.15; letter-spacing: -0.02em; }
.legal-lead { font-size: 1.05rem; line-height: 1.7; color: var(--text-muted); margin: 0 0 1.5rem; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 2rem; }

/* Counsel-review notice: deliberately high-contrast, warm, impossible to miss.
   Solid light-amber card with dark text so it is legible and passes contrast in
   BOTH the light and dark themes (the page carries a theme toggle). */
.legal-notice { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1.1rem 1.25rem; margin: 0 0 2.5rem; border: 1px solid #E8A85C; border-left: 4px solid #B45309; border-radius: 0.85rem; background: #FBEEDD; }
.legal-notice-ico { flex-shrink: 0; color: #8A3D02; margin-top: 0.1rem; }
.legal-notice-body { font-size: 0.92rem; line-height: 1.6; color: #4A3214; }
.legal-notice-title { display: block; font-weight: 700; color: #8A3D02; margin-bottom: 0.25rem; letter-spacing: 0.01em; }

/* Reuse the docs .prose rhythm; tighten a couple of long-form details. */
.legal-wrap .prose h2 { scroll-margin-top: calc(var(--nav-height) + 1rem); }
.legal-wrap .prose ul { margin-bottom: 1.25rem; }
.legal-wrap .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; }
.legal-wrap .prose a:hover { color: var(--accent-strong); }
.legal-contact { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: 0.9rem; background: var(--bg-surface); }

/* ── FAQ (08) ─────────────────────────────────────────────────────────────
   Native <details>/<summary> accordion: keyboard- and screen-reader-accessible
   with no JS. The summary is the toggle; the chevron rotates on [open]. */
.faq-list { max-width: 52rem; margin-top: 2.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { border: 1px solid var(--border); border-radius: 0.9rem; background: var(--bg-surface); overflow: hidden; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.faq-item:hover { border-color: var(--border-accent); }
.faq-item[open] { border-color: var(--border-accent); box-shadow: 0 14px 34px -22px rgba(32, 35, 92, 0.35); }
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; font-size: 1.06rem; font-weight: 600; line-height: 1.4; color: var(--ink); letter-spacing: -0.01em; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q-text { flex: 1; }
.faq-chevron { flex-shrink: 0; color: var(--accent); transition: transform 0.25s var(--ease); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 0.9rem; }
.faq-a { padding: 0 1.4rem 1.3rem; }
.faq-a p { margin: 0; font-size: 1rem; line-height: 1.72; color: var(--text-muted); max-width: 46rem; }
.faq-disclaimer { margin-top: 2rem; }
@media (min-width: 768px) {
    .faq-q { padding: 1.25rem 1.6rem; font-size: 1.12rem; }
    .faq-a { padding: 0 1.6rem 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-item, .faq-chevron { transition: none; }
    .ledger-toggle, .ledger-toggle-chevron { transition: none; }
}

/* ============================================================
   FOR CITIZENS - the consumer moment. A deliberate visual shift
   from the cool indigo-on-white B2B page: a warm peach/amber
   field, app-like rounded chrome, and the real citizen app in a
   phone frame. Same fonts + logo + token family, but it clearly
   reads as "a different product for a different person."
   ============================================================ */
.lsec-citizen {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    padding: 6.5rem 0 7rem;
}
.citizen-field {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(130% 90% at 82% -12%, rgba(232, 148, 60, 0.22), transparent 55%),
        radial-gradient(95% 80% at 6% 112%, rgba(58, 53, 181, 0.07), transparent 55%),
        linear-gradient(180deg, #FFF4EA 0%, #FDF1EC 46%, #F6F3F8 100%);
}
[data-theme="dark"] .citizen-field {
    background:
        radial-gradient(130% 90% at 82% -12%, rgba(232, 162, 76, 0.15), transparent 55%),
        radial-gradient(95% 80% at 6% 112%, rgba(123, 118, 240, 0.12), transparent 55%),
        linear-gradient(180deg, #18131d 0%, #131425 50%, var(--bg-deep) 100%);
}

.citizen-wrap {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

/* ── Copy column ── */
.citizen-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    margin-bottom: 1.25rem;
    border-radius: 9999px;
    background: rgba(232, 148, 60, 0.14);
    border: 1px solid rgba(232, 148, 60, 0.3);
    color: var(--accent-warm);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.citizen-eyebrow svg { flex-shrink: 0; }
[data-theme="dark"] .citizen-eyebrow {
    background: rgba(232, 162, 76, 0.14);
    border-color: rgba(232, 162, 76, 0.34);
    color: var(--accent-warm);
}
.lsec-citizen .section-heading { margin-bottom: 1.1rem; }
.lsec-citizen .section-lede { color: var(--text-muted); }

.citizen-values {
    list-style: none;
    margin: 2rem 0 2.25rem;
    padding: 0;
    display: grid;
    gap: 1.15rem;
}
.citizen-value { display: flex; align-items: flex-start; gap: 0.95rem; }
.citizen-value-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.85rem;
    background: linear-gradient(160deg, rgba(232, 148, 60, 0.18), rgba(232, 148, 60, 0.04));
    border: 1px solid rgba(232, 148, 60, 0.26);
    color: var(--accent-warm);
}
[data-theme="dark"] .citizen-value-ico {
    background: linear-gradient(160deg, rgba(232, 162, 76, 0.16), rgba(232, 162, 76, 0.03));
    border-color: rgba(232, 162, 76, 0.28);
    color: var(--accent-warm);
}
.citizen-value-h { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0.15rem 0 0.25rem; letter-spacing: -0.01em; }
.citizen-value-p { font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* ── Access block ── */
.citizen-access { margin-top: 0.5rem; }
.btn.citizen-cta {
    background: var(--accent);
    color: #fff;
    padding: 0.9rem 1.4rem;
    font-size: 0.95rem;
    gap: 0.55rem;
    box-shadow: 0 14px 30px -12px rgba(58, 53, 181, 0.6);
}
.btn.citizen-cta:hover { background: var(--accent-strong); color: #fff; box-shadow: 0 16px 34px -12px rgba(58, 53, 181, 0.75); }
.citizen-cta-host {
    margin-left: 0.2rem;
    padding: 0.16rem 0.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.18);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.citizen-install {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.citizen-install svg { flex-shrink: 0; color: var(--accent-warm); }
.citizen-biz { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.citizen-biz a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--accent); font-weight: 500; }
.citizen-biz a:hover { color: var(--accent-light); }
.citizen-biz a svg { transition: transform 0.25s var(--ease); }
.citizen-biz a:hover svg { transform: translateX(0.15rem); }

/* ── Phone frame (real citizen app screenshot) ── */
.citizen-device { display: flex; justify-content: center; }
.citizen-phone {
    position: relative;
    width: min(300px, 76vw);
    padding: 0.7rem;
    border-radius: 2.8rem;
    background: linear-gradient(160deg, #2b2e4d 0%, #15172c 100%);
    box-shadow:
        0 44px 90px -34px rgba(20, 24, 92, 0.55),
        0 10px 26px -14px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    animation: citizen-float 7s var(--ease) infinite;
}
[data-theme="dark"] .citizen-phone {
    box-shadow:
        0 44px 90px -34px rgba(0, 0, 0, 0.7),
        0 10px 26px -14px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.citizen-phone-glow {
    position: absolute;
    inset: -14% -20%;
    z-index: -1;
    border-radius: 9999px;
    background: radial-gradient(50% 50% at 50% 42%, rgba(232, 148, 60, 0.4), transparent 70%);
    filter: blur(34px);
    pointer-events: none;
}
[data-theme="dark"] .citizen-phone-glow { background: radial-gradient(50% 50% at 50% 42%, rgba(232, 162, 76, 0.32), transparent 70%); }
.citizen-phone-screen {
    position: relative;
    border-radius: 2.1rem;
    overflow: hidden;
    background: #fff;
    line-height: 0;
}
.citizen-phone-screen img { display: block; width: 100%; height: auto; }
.citizen-phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 1.35rem;
    background: #15172c;
    border-radius: 0 0 0.95rem 0.95rem;
    z-index: 2;
}
@keyframes citizen-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
    .lsec-citizen { padding: 5rem 0 5.5rem; }
    .citizen-wrap { grid-template-columns: 1fr; gap: 2.75rem; }
    .citizen-phone { width: min(270px, 68vw); }
}
@media (prefers-reduced-motion: reduce) {
    .citizen-phone { animation: none; }
}