/* Design tokens taken from www.altivy.com's own stylesheet so this page sits in the
           same family as the rest of the Altivy site: Inter, the #2563eb primary, the slate
           page tint and the dark slate rail. */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --primary: #2563eb;
            --primary-hover: #1d4ed8;
            --primary-active: #1e40af;
            --primary-light: #dbeafe;
            --accent: #0ea5e9;
            --rail: #0f172a;
            --rail-soft: #1e293b;
            --page-tint: #f1f5f9;
            --card: #ffffff;
            --border: #e2e8f0;
            --ink: #0f172a;
            --ink-soft: #334155;
            --muted: #64748b;
            --radius: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --shadow-sm: 0 1px 2px 0 #0000000d;
            --shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
            --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
            --rail-w: 64px;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            color: var(--ink-soft);
            background: var(--card);
            line-height: 1.6;
            padding-left: var(--rail-w);
        }

        h1, h2, h3, h4 { font-family: inherit; color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; }
        a { text-decoration: none; color: inherit; }
        img { max-width: 100%; }

        .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

        /* ─── LEFT RAIL (the Altivy site's standing icon rail) ─── */
        .rail {
            position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w);
            background: var(--rail); z-index: 60;
            display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0;
        }
        /*
         * ⚠ THE RAIL GETS THE MARK, NOT THE LOCKUP. The full logo carries the aircraft, "ALTIVY"
         * and the tagline "Aviation Process Automation" stacked; at the ~38px this slot allows,
         * the tagline renders as about three pixels of grey noise and the wordmark is unreadable.
         *
         * Both files are Altivy's OWN artwork, taken from www.altivy.com/images (they publish
         * altivy-logo-white.png and altivy-logo-white-mark.png and use the mark in their sidebar
         * at 36px, so it is drawn to work this small). The footer and the mobile bar carry the
         * full lockup, where there is room for the wordmark.
         */
        .rail-logo { display: block; width: 36px; margin-bottom: 12px; }
        .rail-logo img { width: 100%; display: block; }
        .rail-sep { width: 30px; height: 1px; background: rgba(255,255,255,0.12); margin: 6px 0 10px; }
        .rail a {
            width: 40px; height: 40px; border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.62); transition: background 0.15s, color 0.15s;
        }
        .rail a:hover { background: rgba(255,255,255,0.08); color: #fff; }
        .rail a.is-active { background: var(--primary); color: #fff; }

        /*
         * ⚠ THE RAIL OVERLAYS, IT DOES NOT PUSH. Widening it inside the flow would reflow the
         * article under the reader's cursor every time they approached the left edge, which is
         * worse than covering a margin the page does not use.
         *
         * Opened on :hover AND :focus-within, so a keyboard reader tabbing into it sees the
         * labels too rather than tabbing blind through eleven identical icons.
         */
        .rail { transition: width 0.18s ease; overflow: hidden; }
        .rail:hover, .rail:focus-within { width: 214px; box-shadow: 4px 0 22px rgba(15,23,42,0.28); }
        .rail a { justify-content: flex-start; padding-left: 10px; gap: 12px; white-space: nowrap; }
        /*
         * ⚠ THE LABEL MUST BE ALLOWED TO SHRINK, or it pushes the icon out of the row. A flex item
         * defaults to min-width:auto, which for `white-space: nowrap` text is the width of the
         * whole string: "Training records" and "Request a demo" then claimed more than the 186px
         * row, and since only the label could not shrink it was the ICON that got squeezed out.
         * Every icon vanished the moment the rail expanded, while measuring a correct 19px box.
         * The label truncates instead, though at 214px none of them actually need to.
         */
        .rail a svg { flex: 0 0 19px; }
        .rail a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        /* The label is laid out from the start but clipped by the rail's width, so opening is a
           single width transition and the icons never jump sideways. */
        .rail a span { opacity: 0; font-size: 0.86rem; font-weight: 600; transition: opacity 0.14s ease; }
        .rail:hover a, .rail:focus-within a { width: 186px; }
        .rail:hover a span, .rail:focus-within a span { opacity: 1; }
        .rail-logo { transition: width 0.18s ease; }
        .rail:hover .rail-logo, .rail:focus-within .rail-logo { width: 92px; }
        .rail:hover .rail-sep, .rail:focus-within .rail-sep { width: 182px; }

        /*
         * ─── GROUPED RAIL ───
         * Thirteen section icons is more than a reader can scan, so they sit in four groups.
         * Collapsed, each group is ONE icon standing for the whole theme: four icons plus
         * Overview and the demo link. Expanded, the group icon gives way to a heading and the
         * sections appear underneath it, so every section is still one hover away.
         *
         * The swap is display, not opacity: an invisible-but-present group icon would keep its
         * 40px row and push the sections down by four rows of dead space.
         */
        .rail-group { display: flex; flex-direction: column; align-items: center; width: 100%; }
        .rail-group__icon {
            display: flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; border-radius: var(--radius);
            color: rgba(255,255,255,0.62);
        }
        .rail-group__title {
            display: none; margin: 0; width: 186px; padding: 12px 10px 4px;
            font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
            color: rgba(255,255,255,0.42);
        }
        /*
         * ⚠ `.rail a` (0,1,1) sets `display: flex` and outranks a bare `.rail-item--child`
         * (0,1,0), so all thirteen sections stayed visible when collapsed. `.rail .rail-item--child`
         * is (0,2,0) and wins, without reaching for !important.
         */
        .rail .rail-item--child { display: none; }
        .rail:hover .rail-group__icon, .rail:focus-within .rail-group__icon { display: none; }
        .rail:hover .rail-group__title, .rail:focus-within .rail-group__title { display: block; }
        .rail:hover .rail-item--child, .rail:focus-within .rail-item--child { display: flex; }
        /* Collapsed, the group icon is the only thing to hover, so it takes the hover styling. */
        .rail-group:hover .rail-group__icon { background: rgba(255,255,255,0.08); color: #fff; }

        /* ─── TOP BAR ─── */
        .topbar {
            position: sticky; top: 0; z-index: 50;
            background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
            border-bottom: 1px solid var(--border);
        }
        .topbar-inner {
            max-width: 1180px; margin: 0 auto; padding: 0 24px;
            height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
        }
        .brand { font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; flex: none; }
        /* Both pills read as one line, so neither wraps to two rows at any width. */
        .nav-cta { display: flex; gap: 10px; align-items: center; flex: none; }
        .nav-cta .btn { white-space: nowrap; flex: none; }
        .brand span { color: var(--primary); }

        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 9px 18px; border-radius: var(--radius); font-weight: 600;
            font-size: 0.875rem; cursor: pointer; border: 1px solid transparent;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }
        .btn-primary { background: var(--primary); color: #fff; }
        .btn-primary:hover { background: var(--primary-hover); }
        .btn-ghost { border-color: var(--border); color: var(--ink); background: #fff; }
        .btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
        .btn-lg { padding: 13px 26px; font-size: 0.95rem; }
        .btn-on-dark { background: #fff; color: var(--ink); }
        .btn-on-dark:hover { background: #e2e8f0; }
        .btn-outline-light { border-color: rgba(255,255,255,0.4); color: #fff; background: transparent; }
        .btn-outline-light:hover { background: rgba(255,255,255,0.12); }

        /*
         * ─── MOBILE TOP BAR ───
         * Copied from altivy.com's own `.mobile-topbar` so the two sites match on a phone: the
         * rules there are a 56px fixed bar on a 90deg gradient from --altivy-sidebar-bg-dark
         * (#0f172a) to --altivy-sidebar-bg (#1e293b), 0 16px padding, --altivy-shadow-lg, and a
         * 40px square button on rgba(255,255,255,0.1) with a 0.5rem radius. Their logo sits at
         * 50x32 (h-8 w-auto) immediately right of the button. Read off the live site rather than
         * eyeballed, because the bar is the first thing a phone visitor sees of both sites.
         *
         * The bar replaces the light sticky header below 900px: the rail is already hidden at
         * 640px and the old header showed no logo at all on a phone.
         */
        .nav-hamburger {
            display: none; align-items: center; justify-content: center;
            width: 40px; height: 40px; flex: none;
            background: rgba(255,255,255,0.1); border: none; border-radius: 0.5rem;
            /* The icon is stroked in currentColor, so this is what makes it white on the dark bar. */
            color: #fff;
            cursor: pointer; padding: 0;
            transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .nav-hamburger:hover { background: rgba(255,255,255,0.2); }
        /*
         * The same icon altivy.com uses: a 20x20 Lucide "menu" glyph, 2px stroke, round caps,
         * currentColor. Their button holds an SVG rather than three divs, so the two sites draw
         * the identical shape instead of a lookalike built from spans.
         */
        .nav-hamburger svg { width: 20px; height: 20px; display: block; }
        .nav-hamburger .icon-menu { display: block; }
        .nav-hamburger .icon-close { display: none; }
        .nav-hamburger.open .icon-menu { display: none; }
        .nav-hamburger.open .icon-close { display: block; }

        /* The white lockup, shown only on the dark mobile bar. */
        .brand-mark { display: none; flex: none; margin-left: 12px; }
        .brand-mark img { display: block; height: 32px; width: auto; }

        .mobile-menu-panel {
            display: none; background: #fff; border-bottom: 1px solid var(--border);
            padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
        }
        /*
         * The panel went from 7 rows to 13 when it took over from the header menu, which is more
         * than a phone screen holds: at ~44px a row plus the two buttons it needs ~640px against
         * the ~730px a 844px-tall phone leaves under the 56px bar. So it scrolls, and the cap is
         * measured from the bar rather than the viewport so the last row and both buttons can
         * always be reached. max-height cannot transition to `none`, so the cap stays a length.
         */
        .mobile-menu-panel.open {
            max-height: calc(100vh - 56px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 18px;
        }
        .mobile-menu-panel ul { list-style: none; }
        .mobile-menu-panel ul li { border-bottom: 1px solid var(--border); }
        .mobile-menu-panel ul a { display: block; padding: 13px 0; color: var(--ink-soft); font-weight: 500; }
        .mobile-menu-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

        /*
         * ⚠ ONE MENU AT A TIME, AND THE BAR GOES WITH IT. The hamburger and the dark bar used to
         * start at 900px while the rail stayed until 640px. Between those widths BOTH menus were
         * on screen, and since the panel is full-bleed the 64px rail sat on top of every row:
         * "Courses" read as "ses". Worse, the CTAs were hidden at 900px too, so 641-900px had a
         * dark bar with no menu button and no buttons at all.
         *
         * The rail IS the menu wherever it is shown, so everything moves to 640px together: above
         * that the rail and the light header with its CTAs; below it the dark bar, the hamburger
         * and the panel. One menu at every width.
         */
        @media (max-width: 640px) {
            .nav-cta { display: none; }

            /* Altivy's bar: dark, fixed, 56px, shadowed. */
            .topbar {
                position: fixed; top: 0; left: 0; right: 0;
                background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
                backdrop-filter: none; border-bottom: none;
                box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
            }
            .topbar-inner {
                height: 56px; padding: 0 16px; gap: 0; justify-content: flex-start;
            }
            /* The hamburger leads, as it does on altivy.com. */
            .nav-hamburger { order: -1; }
            .brand { display: none; }
            .brand-mark { display: block; }
            /* The bar is fixed now, so the page needs its height back. */
            body { padding-top: 56px; }
            .mobile-menu-panel { position: fixed; top: 56px; left: 0; right: 0; z-index: 49; }
        }

        /* ─── HERO (photographic, centred, dark overlay — as on altivy.com) ─── */
        .hero {
            position: relative; text-align: center; color: #fff;
            padding: 92px 0 76px;
            background:
              linear-gradient(180deg, rgba(15,23,42,0.82) 0%, rgba(15,23,42,0.72) 55%, rgba(15,23,42,0.88) 100%),
              linear-gradient(135deg, #1e3a8a 0%, #1e293b 55%, #0f172a 100%);
            background-size: cover; background-position: center;
        }
        .hero-icon {
            width: 58px; height: 58px; border-radius: var(--radius-lg);
            background: var(--primary); color: #fff;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 22px; box-shadow: var(--shadow-lg);
        }
        .hero h1 {
            color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 800;
            max-width: 900px; margin: 0 auto 18px;
        }
        .hero p {
            font-size: 1.1rem; color: rgba(255,255,255,0.82);
            max-width: 660px; margin: 0 auto 32px;
        }
        .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

        /* The hero screenshot sits inside the dark band, not bleeding out of it. */
        .hero-shot {
            max-width: 1080px; margin: 48px auto 0;
            border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg);
            overflow: hidden; box-shadow: 0 24px 50px -18px rgba(0,0,0,0.65);
        }
                /* Same reasoning as the feature thumbnails: show the top of the screen at a readable
           scale rather than the whole thing shrunk into the band. */
        .hero-shot img {
            display: block; width: 100%; height: auto; aspect-ratio: 16 / 8;
            object-fit: cover; object-position: top center;
        }

        /* ─── SECTIONS ─── */
        .section { padding: 76px 0; }
        .section-tint { background: var(--page-tint); }
        .section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
        .eyebrow {
            display: block; color: var(--primary); font-size: 0.78rem; font-weight: 700;
            letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 12px;
        }
        .section-head h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 700; margin-bottom: 12px; }
        .section-head p { color: var(--muted); font-size: 1rem; }

        /* ─── CARD GRIDS ─── */
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
        .card {
            background: var(--card); border: 1px solid var(--border);
            border-radius: var(--radius-lg); padding: 24px;
            box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, border-color 0.15s;
        }
        .card:hover { box-shadow: var(--shadow); border-color: #cbd5e1; }
        .card-icon {
            width: 42px; height: 42px; border-radius: var(--radius);
            background: var(--primary-light); color: var(--primary);
            display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
        }
        .card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 7px; }
        .card p { font-size: 0.9rem; color: var(--muted); }

        /* ─── JUMP LINKS ─── */
        .jump { background: var(--rail); }
        .jump ul {
            max-width: 1180px; margin: 0 auto; padding: 0 24px; list-style: none;
            display: flex; gap: 8px; justify-content: center; overflow-x: auto; scrollbar-width: none;
        }
        .jump ul::-webkit-scrollbar { display: none; }
        .jump a {
            display: block; white-space: nowrap; padding: 14px 10px;
            color: rgba(255,255,255,0.68); font-size: 0.82rem; font-weight: 600;
            border-bottom: 2px solid transparent;
        }
        .jump a:hover { color: #fff; border-bottom-color: var(--primary); }

        /* ─── FEATURE MODULE ───
           Copy beside a THUMBNAIL that opens full size on click, the way the Facilitease product
           pages do it. A desktop screen shrunk into a web column cannot be read inline whatever
           you do to the layout, so the thumbnail is there to be recognised, and the lightbox is
           where it is actually read. */
        .module { padding: 68px 0; border-top: 1px solid var(--border); }
        .module-inner {
            display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
            gap: 52px; align-items: center;
        }
        .module.flip .module-copy { order: 2; }
        .module.flip .module-media { order: 1; }
        .module-copy { max-width: 620px; }
        @media (max-width: 900px) {
            .module-inner { grid-template-columns: 1fr; gap: 28px; }
            .module.flip .module-copy { order: 1; }
            .module.flip .module-media { order: 2; }
        }
        .module-eyebrow {
            display: block; color: var(--primary); font-size: 0.76rem; font-weight: 700;
            letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 12px;
        }
        .module h2 { font-size: clamp(1.5rem, 2.8vw, 2.05rem); font-weight: 700; margin-bottom: 14px; }
        .module h2 span { color: var(--primary); }
        .module-copy > p { color: var(--muted); margin-bottom: 22px; }
        .module-list { list-style: none; display: grid; gap: 11px; text-align: left; }
        .module-list li { position: relative; padding-left: 28px; font-size: 0.93rem; color: var(--ink-soft); }
        .module-list li::before {
            content: ''; position: absolute; left: 2px; top: 7px; width: 13px; height: 7px;
            border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
            transform: rotate(-45deg);
        }
        .module-list strong { color: var(--ink); font-weight: 600; }

        /* The thumbnail. Clicking it opens the full-size image in the lightbox below. */
        .shot { margin: 0; }
        .shot-btn {
            display: block; width: 100%; padding: 0; cursor: zoom-in;
            background: var(--card); border: 1px solid var(--border);
            border-radius: var(--radius-lg); overflow: hidden;
            box-shadow: var(--shadow); transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
        }
        .shot-btn:hover, .shot-btn:focus-visible {
            box-shadow: var(--shadow-lg); border-color: var(--primary); transform: translateY(-2px);
        }
        /* A PREVIEW, not the whole screen shrunk. A 1040px-wide app screen scaled into a web
           column renders its UI far too small to read and looks broken next to crisp page copy.
           So the thumbnail crops to the top of the screen at 16/9 (the Facilitease np-shot
           pattern) and the lightbox is where the screen is actually read. */
        .shot-btn img {
            display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
            object-fit: cover; object-position: top center;
        }
        .shot-zoom {
            display: flex; align-items: center; justify-content: center; gap: 7px;
            padding: 9px 14px; font-size: 0.8rem; font-weight: 600; color: var(--primary);
            border-top: 1px solid var(--border); background: var(--page-tint);
        }
        .shot figcaption { font-size: 0.82rem; color: var(--muted); margin-top: 10px; text-align: center; }

        /* ─── LIGHTBOX ─── */
        .lightbox {
            position: fixed; inset: 0; z-index: 10000;
            display: flex; align-items: center; justify-content: center; gap: 10px;
            padding: 28px; background: rgba(12, 16, 28, 0.93);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        }
        .lightbox[hidden] { display: none; }
        body.lightbox-open { overflow: hidden; }
        .lightbox-figure {
            margin: 0; max-width: min(1500px, 92vw); max-height: 90vh;
            display: flex; flex-direction: column; align-items: center; gap: 13px; min-width: 0;
        }
        /* The screen is 2080px wide; let it render at its own size and scroll if the viewport
           is smaller, so it is read at full resolution rather than shrunk again. */
        /* Fit the whole screen in view, top first. Scroll only when the image is genuinely
           taller than the viewport allows, and then it starts at the top. */
        .lightbox-scroll {
            max-width: 100%; max-height: 80vh; overflow: auto;
            border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,0.6); background: #fff;
        }
        .lightbox-figure img { display: block; width: min(1400px, 92vw); height: auto; max-width: none; }
        .lightbox-figure figcaption {
            color: rgba(255,255,255,0.85); font-size: 0.88rem; text-align: center;
            max-width: 660px; line-height: 1.5;
        }
        .lightbox-close, .lightbox-nav {
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
            color: #fff; border-radius: 50%; cursor: pointer; flex-shrink: 0;
            transition: background 0.2s, transform 0.2s; line-height: 1;
        }
        .lightbox-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; font-size: 1.6rem; }
        .lightbox-nav { width: 50px; height: 50px; font-size: 1.9rem; padding-bottom: 4px; }
        .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.22); transform: scale(1.06); }

        @media (max-width: 700px) {
            .lightbox { padding: 12px; }
            .lightbox-nav { width: 40px; height: 40px; font-size: 1.5rem; }
            .lightbox-close { top: 10px; right: 12px; width: 38px; height: 38px; font-size: 1.3rem; }
        }

        /* ─── CTA ─── */
        .cta {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-active) 100%);
            color: #fff; padding: 72px 0; text-align: center;
        }
        .cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin-bottom: 14px; }
        .cta p { color: rgba(255,255,255,0.88); max-width: 580px; margin: 0 auto 30px; }
        .cta .hero-actions { justify-content: center; }

        /* ─── FOOTER ─── */
        .footer { background: var(--rail); color: rgba(255,255,255,0.6); padding: 40px 24px 26px; }
        .footer-inner {
            max-width: 1180px; margin: 0 auto; display: flex; align-items: center;
            justify-content: space-between; flex-wrap: wrap; gap: 18px;
            padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.09); margin-bottom: 18px;
        }
        .footer-brand { color: #fff; font-weight: 700; display: inline-block; }
        /* The white mark carries the name, so no text beside it. Sized to sit with the nav
           rather than tower over it. */
        .footer-brand img { display: block; width: 132px; height: auto; }

        /* ─── CTA BUTTONS ───
         * The enquiry form lives on altivy.com/contact, so this band just sends people there.
         */
        .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }

        /*
         * ─── BACK TO TOP ───
         * Hidden until the reader is well down the page, because a control to undo scrolling has
         * nothing to undo at the top. Sits clear of the rail on the right.
         */
        .to-top {
            position: fixed; right: 22px; bottom: 22px; z-index: 70;
            width: 42px; height: 42px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--primary); color: #fff; border: none; cursor: pointer;
            box-shadow: 0 6px 20px rgba(37,99,235,0.35);
            opacity: 0; visibility: hidden; transform: translateY(8px);
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        }
        .to-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
        .to-top:hover { background: #1d4ed8; }
        .to-top:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
        @media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
        .footer-brand span { color: #60a5fa; }
        .footer-nav { display: flex; gap: 22px; list-style: none; flex-wrap: wrap; }
        .footer-nav a { color: rgba(255,255,255,0.6); font-size: 0.85rem; }
        .footer-nav a:hover { color: #fff; }
        .footer-bottom { max-width: 1180px; margin: 0 auto; text-align: center; font-size: 0.8rem; }
        .footer-bottom a { color: rgba(255,255,255,0.82); }

        @media (max-width: 640px) {
            :root { --rail-w: 0px; }
            .rail { display: none; }
            /* The rail goes here, so this is where the hamburger takes over as the only menu. */
            .nav-hamburger { display: flex; }
            .mobile-menu-panel { display: block; }
            .hero { padding: 62px 0 56px; }
            .section, .module { padding: 54px 0; }
            .footer-inner { flex-direction: column; text-align: center; }
            .footer-nav { justify-content: center; }
        }

/* ── Sample lesson on learning.html (anonymised, js/learning-sample-*.js) ── */
/* ── Sample lesson (anonymised, js/learning-sample-*.js) ── */
.sl-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; }
.sl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sl-head h3 { font-size: 1.05rem; font-weight: 700; }
.sl-head h3 small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.sl-pill { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #dcfce7; color: #166534; }
.sl-pill.warn { background: #fef3c7; color: #92400e; }
.sl-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sl-facts { padding: 18px 22px; display: grid; gap: 9px; align-content: start; border-right: 1px solid var(--border); }
.sl-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; border-bottom: 1px dashed var(--border); padding-bottom: 7px; }
.sl-facts dt { color: var(--muted); }
.sl-facts dd { color: var(--ink); font-weight: 500; text-align: right; }
.sl-main { padding: 18px 22px; min-width: 0; }
.sl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.sl-stat { background: var(--page-tint); border-radius: var(--radius-lg); padding: 10px 12px; }
.sl-stat-v { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.sl-stat-v small { font-size: 0.75rem; font-weight: 500; color: var(--muted); margin-left: 2px; }
.sl-stat-l { font-size: 0.75rem; color: var(--muted); }
.sl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.sl-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.sl-tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
#sl-map { border-radius: var(--radius-lg); }
.sl-note { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
.sl-wx-summary { font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; font-size: 0.92rem; }
.sl-wx-wrap { overflow-x: auto; }
.sl-wx { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sl-wx th, .sl-wx td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sl-wx th { color: var(--muted); font-weight: 600; }
.sl-app { margin: 0 0 16px; }
.sl-app figcaption { font-size: 0.86rem; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sl-app-label { color: var(--muted); }
.sl-app-label.is-missed { color: #b45309; }
.sl-app svg { width: 100%; height: auto; background: var(--page-tint); border-radius: var(--radius); }
.sl-app svg .ax { stroke: #cbd5e1; }
.sl-app svg .ideal { fill: none; stroke: #94a3b8; stroke-width: 2; stroke-dasharray: 6 5; }
.sl-app svg .flown { fill: none; stroke: var(--primary); stroke-width: 2.5; }
.sl-app svg text { font-size: 11px; fill: var(--muted); }
.sl-key { font-size: 0.8rem; color: var(--muted); display: flex; gap: 14px; align-items: center; }
.sl-key i { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--primary); margin-right: -8px; }
.sl-key i.ideal { border-top: 2px dashed #94a3b8; }
@media (max-width: 860px) {
    .sl-body { grid-template-columns: minmax(0, 1fr); }
    .sl-facts { border-right: 0; border-bottom: 1px solid var(--border); }
    .sl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sl-head, .sl-facts, .sl-main { padding-left: 16px; padding-right: 16px; }
}


        /* ─── ADDITIONS FOR THE PLATFORM HOME AND FEATURE MODULES (Facilitease-style) ─── */
        /* Browser frame around a hero or module screenshot */
        .browser { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: #fff;
            border: 1px solid var(--border); box-shadow: 0 24px 50px -18px rgba(15,23,42,0.45); }
        .browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e2e8f0; border-bottom: 1px solid #cbd5e1; }
        .browser-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
        .browser-dot:nth-child(1) { background: #f87171; } .browser-dot:nth-child(2) { background: #fbbf24; } .browser-dot:nth-child(3) { background: #34d399; }
        .browser-url { margin-left: 10px; font-size: 0.74rem; color: var(--muted); background: #fff; border-radius: 6px; padding: 2px 10px; flex: 1; max-width: 360px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .browser .shot-btn { border: none; border-radius: 0; box-shadow: none; }
        .browser .shot-btn:hover { transform: none; }
        .hero .browser { max-width: 1080px; margin: 48px auto 0; border-color: rgba(255,255,255,0.14); }
        .hero .browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

        /* Two smaller screens under a module's main screenshot */
        .shot-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
        .shot-thumbs .shot-btn img { aspect-ratio: 16 / 10; }
        .shot-thumbs figcaption { font-size: 0.76rem; margin-top: 6px; }

        /* Every module at a glance */
        .mods { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
        .mod a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
            padding: 20px 20px 18px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
        .mod a:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
        .mod-icon { width: 38px; height: 38px; border-radius: var(--radius); background: var(--primary-light); color: var(--primary);
            display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
        .mod h3 { font-size: 0.98rem; font-weight: 600; margin-bottom: 6px; }
        .mod p { font-size: 0.86rem; color: var(--muted); flex: 1; }
        .mod-more { margin-top: 12px; font-size: 0.8rem; font-weight: 600; color: var(--primary); }

        /* "AI you control" and similar fact lists */
        .facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
        .fact { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
        .fact-icon { flex: 0 0 38px; height: 38px; border-radius: var(--radius); background: var(--primary-light); color: var(--primary);
            display: flex; align-items: center; justify-content: center; }
        .fact h3 { font-size: 0.96rem; font-weight: 600; margin-bottom: 5px; }
        .fact p { font-size: 0.87rem; color: var(--muted); }

        /* Live security score band */
        .score { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 36px; align-items: center;
            background: var(--rail); color: #fff; border-radius: var(--radius-xl); padding: 34px 36px; }
        .score-num { font-size: 3.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
        .score-num small { font-size: 1.2rem; font-weight: 600; opacity: 0.7; }
        .score-sub { color: rgba(255,255,255,0.72); font-size: 0.9rem; margin-top: 8px; }
        .score-cats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 22px; }
        .score-cats li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: rgba(255,255,255,0.85);
            border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 7px; }
        .score-cats b { color: #6ee7b7; font-weight: 700; white-space: nowrap; }
        @media (max-width: 760px) { .score { grid-template-columns: 1fr; padding: 26px 22px; } }

        /* Guide cards and FAQ on the platform home */
        .guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
        .guide a { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: border-color 0.15s; }
        .guide a:hover { border-color: var(--primary); }
        .guide h3 { font-size: 0.98rem; font-weight: 600; margin-bottom: 6px; }
        .guide p { font-size: 0.87rem; color: var(--muted); }
        .faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
        .faq details { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0 20px; }
        .faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
        .faq summary::-webkit-details-marker { display: none; }
        .faq summary::after { content: '+'; color: var(--primary); font-size: 1.2rem; line-height: 1; }
        .faq details[open] summary::after { content: '\2212'; }
        .faq details p { padding: 0 0 18px; color: var(--muted); font-size: 0.92rem; }
        .faq code { background: var(--page-tint); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; }

        /* Top-bar links on pages without a rail section list */
        .nav-links { display: flex; gap: 4px; list-style: none; margin-left: 18px; }
        .nav-links a { display: block; padding: 8px 10px; font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); border-radius: var(--radius); }
        .nav-links a:hover, .nav-links a.is-active { color: var(--primary); background: var(--primary-light); }
        @media (max-width: 1100px) { .nav-links { display: none; } }