/* =====================================================
           Same style system as the rest of the site
           ===================================================== */
        *, *::before, *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            /* Safari on iOS inflates text inside any block wider than the viewport,
               so a page carrying a wide diagram gets larger body copy than a page
               without one — which is why Barcrest and OneFile did not match Software
               Creations on a phone despite identical type rules. The diagrams still
               scroll sideways inside their own figure; only the automatic inflation
               is switched off, so every page now sizes text the same way. */
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            line-height: 1.5;
            color: #111;
            background: #fff;
        }

        img {
            max-width: 100%;
            display: block;
        }

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

        a:focus-visible, button:focus-visible {
            outline: 3px solid #111;
            outline-offset: 2px;
        }

        .container {
            width: min(1100px, 100% - 2rem);
            margin-inline: auto;
        }

        .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;
        }

        /* Parallax background layers */
        .parallax-layer {
            position: fixed;
            inset: 0;
            z-index: -3;
            background-size: cover;
            background-position: center;
            transform: translate3d(0, 0, 0);
            will-change: transform;
        }

        .parallax-layer.layer-1 {
            z-index: -3;
            opacity: 0.75;
        }

        .parallax-layer.layer-3 {
            z-index: -1;
            opacity: 0.20;
            mix-blend-mode: overlay;
        }

        .page-overlay {
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, .15) 45%, rgba(255, 255, 255, .85) 78%, rgba(255, 255, 255, .98));
        }

        /* Hero */
        header.hero {
            padding-top: 1rem;
        }

        .hero-card {
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(6px);
        }

        .hero-media {
            position: relative;
            min-height: 260px;
            display: flex;
            align-items: flex-start;
        }

        .hero-media img {
            width: 100%;
            height: clamp(260px, 42vw, 420px);
            object-fit: cover;
            display: block;
        }

        .hero-media img:not(.hero-overlay-img) {
            flex: 1 1 0%;
            min-width: 0;
        }

        .hero-media .hero-overlay-img {
            position: absolute;
            top: 1.2rem;
            left: 1.2rem;
            width: auto;
            height: 60%;
            object-fit: contain;
            background: #fff;
            border-radius: 16px;
            padding: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
            pointer-events: none;
            z-index: 2;
            opacity: 0.98;
            border: 1px solid #eee;
        }

        .hero-badge {
            position: absolute;
            inset: auto 1rem 1rem 1rem;
            z-index: 3;
            color: #fff;
            background: rgba(0, 0, 0, .55);
            padding: .85rem 1rem;
            border-radius: 14px;
            max-width: 70ch;
            box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
        }

        .hero-badge h1 {
            margin: 0 0 .35rem;
            font-size: clamp(1.25rem, 2.2vw + .6rem, 2.4rem);
            line-height: 1.15;
        }

        .hero-badge p {
            margin: 0;
            opacity: .95;
        }

        @media (max-width: 900px) {
            .hero-media .hero-overlay-img {
                width: 68px;
                height: 68px;
                top: .7rem;
                left: .7rem;
                padding: 7px;
            }
        }

        @media (max-width: 560px) {
            .hero-media .hero-overlay-img {
                width: 48px;
                height: 48px;
                top: .4rem;
                left: .4rem;
                padding: 4px;
            }
        }

        /* Primary link bar */
        nav.primary-links {
            background: rgba(255, 255, 255, .92);
            border-top: 1px solid rgba(0, 0, 0, .08);
            padding: .75rem;
        }

        .link-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
            gap: .5rem;
        }

        .link-grid a {
            display: grid;
            place-items: center;
            text-align: center;
            line-height: 1.25;
            padding: .55rem .4rem;
            border-radius: 12px;
            background: rgba(0, 0, 0, .04);
            font-size: .9rem;
            transition: transform .12s ease, background .12s ease;
        }

        /* The second line of a menu item: what the page is, for anybody who cannot tell from a
           one-word label. Small and quiet, so the label still reads as the link. */
        .link-grid a small {
            display: block;
            font-size: .72rem;
            font-weight: 400;
            opacity: .62;
            margin-top: .1rem;
        }


        .link-grid a:hover {
            background: rgba(0, 0, 0, .07);
            transform: translateY(-1px);
        }

        .link-grid a[aria-current="page"] {
            background: #111;
            color: #fff;
        }


        /* =====================================================
           Breadcrumb - sits under the primary links in the header
           ===================================================== */
        nav.breadcrumb {
            background: rgba(255, 255, 255, .92);
            border-top: 1px solid rgba(0, 0, 0, .08);
            padding: .55rem .9rem;
        }

        nav.breadcrumb ol {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .1rem .45rem;
            font-size: .88rem;
        }

        nav.breadcrumb li {
            display: flex;
            align-items: center;
            gap: .45rem;
            color: rgba(0, 0, 0, .62);
        }

        nav.breadcrumb li + li::before {
            content: "/";
            color: rgba(0, 0, 0, .3);
        }

        nav.breadcrumb a {
            border-radius: 6px;
        }

        nav.breadcrumb a:hover {
            text-decoration: underline;
        }

        nav.breadcrumb [aria-current="page"] {
            color: #111;
            font-weight: 600;
        }


        /* Sections */
        main {
            padding: 1.25rem 0 2.5rem;
        }

        .section {
            margin-top: 1.1rem;
            background: rgba(255, 255, 255, .92);
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
        }

        .section-inner {
            padding: 1.25rem;
        }

        .section h2 {
            margin: 0 0 .75rem;
            font-size: 1.35rem;
            line-height: 1.2;
        }

        .section h3 {
            margin: 1.6rem 0 .2rem;
            font-size: 1.05rem;
        }

        .section h3:first-of-type {
            margin-top: .4rem;
        }

        .muted {
            color: rgba(0, 0, 0, .72);
        }

        .crumbs {
            font-size: .92rem;
            margin: 0 0 .6rem;
            color: rgba(0, 0, 0, .65);
        }

        .app-platform {
            display: inline-block;
            font-size: .78rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, .6);
            border: 1px solid rgba(0, 0, 0, .14);
            border-radius: 999px;
            padding: .18rem .6rem;
            margin-bottom: .5rem;
        }

        /* =====================================================
           iPhone frame — wraps a 1290x2796 screenshot
           ===================================================== */
        .phone {
            position: relative;
            display: block;
            width: 100%;
            background: #101114;
            border-radius: 13.5% / 6.2%;
            padding: 2.6%;
            box-shadow: 0 14px 30px rgba(0, 0, 0, .30), 0 0 0 1px rgba(255, 255, 255, .12) inset;
        }

        .phone img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 11% / 5.2%;
            background: #fff;
        }

        .phone::after {
            content: "";
            position: absolute;
            top: 2.4%;
            left: 50%;
            transform: translateX(-50%);
            width: 27.6%;
            height: 3.8%;
            background: #101114;
            border-radius: 999px;
        }

        /* Hero trio at the top of the page */
        /* Three phones, overlapped so each one can be bigger
           than an even three-column split would allow. */
        .hero-shots {
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 620px;
        }

        .hero-shots .phone {
            flex: 0 0 42%;
        }

        .hero-shots .phone:nth-child(1) {
            transform: rotate(-5deg) translateY(8px) scale(.93);
            margin-right: -13%;
        }

        .hero-shots .phone:nth-child(3) {
            transform: rotate(5deg) translateY(8px) scale(.93);
            margin-left: -13%;
        }

        .hero-shots .phone:nth-child(2) {
            z-index: 2;
        }

        /* Overview: text beside the phones */
        .overview {
            display: grid;
            grid-template-columns: 1fr minmax(300px, 46%);
            gap: 1.75rem;
            align-items: start;
        }

        .facts {
            margin: 1rem 0 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: .45rem;
        }

        .facts li {
            display: flex;
            gap: .6rem;
            font-size: .95rem;
        }

        .facts b {
            flex: 0 0 7.5rem;
            color: rgba(0, 0, 0, .6);
            font-weight: 600;
        }

        /* =====================================================
           Screenshot grid — each shot opens the lightbox
           ===================================================== */
        .shot-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.1rem;
            margin: .9rem 0 0;
        }

        .shot {
            margin: 0;
        }

        .shot button {
            display: block;
            width: 100%;
            padding: 0;
            border: 0;
            background: none;
            cursor: zoom-in;
            font: inherit;
            text-align: left;
            transition: transform .14s ease;
        }

        .shot button:hover {
            transform: translateY(-3px);
        }

        .shot figcaption {
            font-size: .88rem;
            color: rgba(0, 0, 0, .72);
            padding: .55rem .15rem 0;
        }

        .shot figcaption strong {
            display: block;
            color: #111;
            font-size: .95rem;
        }

        /* =====================================================
           Lightbox
           ===================================================== */
        dialog#lightbox {
            width: min(880px, calc(100% - 1.5rem));
            border: 0;
            padding: 0;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
            background: #fff;
        }

        dialog::backdrop {
            background: rgba(0, 0, 0, .72);
        }

        .lb-head {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: center;
            padding: .85rem 1rem;
            background: rgba(255, 255, 255, .96);
            border-bottom: 1px solid rgba(0, 0, 0, .08);
        }

        .lb-close, .lb-nav button {
            border: 1px solid rgba(0, 0, 0, .15);
            background: rgba(0, 0, 0, .04);
            border-radius: 12px;
            padding: .45rem .7rem;
            cursor: pointer;
            font-weight: 600;
            font: inherit;
        }

        .lb-close:hover, .lb-nav button:hover {
            background: rgba(0, 0, 0, .09);
        }

        .lb-media {
            background: #0e0f12;
            display: grid;
            place-items: center;
            padding: 1rem;
        }

        .lb-media img {
            width: auto;
            max-width: 100%;
            max-height: 68vh;
            object-fit: contain;
            border-radius: 14px;
        }

        .lb-body {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: .9rem 1rem;
            background: rgba(255, 255, 255, .96);
            border-top: 1px solid rgba(0, 0, 0, .08);
        }

        .lb-nav {
            display: flex;
            gap: .5rem;
            flex: 0 0 auto;
        }

        /* Footer links block */
        footer {
            padding: 1.25rem 0 2rem;
        }

        .footer-links {
            background: rgba(255, 255, 255, .92);
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 18px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
            overflow: hidden;
        }

        .all-links {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: .65rem;
            margin-top: .75rem;
        }

        .all-links a {
            display: block;
            padding: .5rem .6rem;
            border-radius: 12px;
            background: rgba(0, 0, 0, .04);
            font-size: .92rem;
        }

        .all-links a:hover {
            background: rgba(0, 0, 0, .07);
        }

        /* Mobile responsiveness */
        @media (max-width: 900px) {
            .link-grid {
                grid-template-columns: repeat(5, 1fr);
            }

            .overview {
                grid-template-columns: 1fr;
            }

            .hero-shots {
                margin-inline: auto;
            }

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

            .all-links {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 560px) {
            .link-grid {
                display: flex;
                overflow-x: auto;
                gap: .5rem;
                padding-bottom: .25rem;
                scroll-snap-type: x mandatory;
            }

            .link-grid a {
                flex: 0 0 auto;
                min-width: 120px;
                scroll-snap-align: start;
                padding: .7rem .8rem;
                font-size: .95rem;
            }

            .shot-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: .8rem;
            }

            .facts b {
                flex-basis: 6rem;
            }

            .all-links {
                grid-template-columns: repeat(2, 1fr);
            }
        }


        /* =====================================================
           Screenshot carousel
           Same markup contract and behaviour as the carousel on
           firstchoicewindows-2026 (js/carousel.js is shared):
           a native scroll-snap track that works by swipe and
           keyboard before the script loads, with arrows and dots
           layered on top once it does.
           ===================================================== */
        .fc-carousel {
            --gap: 1.1rem;
            --per-view: 1;
            margin-top: 1.25rem;
        }

        /* Three per view. The spacing lives inside the slide rather than
           in a flex gap: the script scrolls by exactly one viewport per
           page, and three slides plus three gaps are wider than that, so
           a real gap would drift the slides out of step page by page. */
        .fc-carousel--3 {
            --per-view: 3;
            --gap: 0rem;
        }

        @media (max-width: 900px) {
            .fc-carousel--3 {
                --per-view: 2;
            }
        }

        @media (max-width: 620px) {
            .fc-carousel--3 {
                --per-view: 1;
            }
        }

        .fc-carousel-frame {
            position: relative;
        }

        .fc-carousel-viewport {
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
            /* room for the hover lift and focus rings */
            padding: 4px 0 8px;
            margin: -4px 0 -8px;
        }

        .fc-carousel-viewport::-webkit-scrollbar {
            display: none;
        }

        .fc-carousel-viewport:focus-visible {
            outline: 3px solid #111;
            outline-offset: 2px;
            border-radius: 16px;
        }

        .fc-carousel-track {
            display: flex;
            gap: var(--gap);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .fc-carousel-item {
            flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
            scroll-snap-align: start;
            display: flex;
        }

        .fc-carousel-item > * {
            flex: 1 1 auto;
        }

        .fc-carousel-btn {
            position: absolute;
            top: 46%;
            transform: translateY(-50%);
            z-index: 3;
            width: 44px;
            height: 44px;
            /* revealed by JS; without it the track is still swipeable */
            display: none;
            place-items: center;
            background: #fff;
            color: #111;
            border: 1px solid rgba(0, 0, 0, .15);
            border-radius: 50%;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
            cursor: pointer;
            transition: background-color .18s ease, color .18s ease, opacity .18s ease;
        }

        .fc-carousel[data-ready] .fc-carousel-btn {
            display: grid;
        }

        .fc-carousel-btn svg {
            width: 18px;
            height: 18px;
        }

        .fc-carousel-btn:hover:not(:disabled) {
            background: #111;
            color: #fff;
        }

        .fc-carousel-btn:disabled {
            opacity: 0;
            pointer-events: none;
        }

        .fc-carousel-prev {
            left: 4px;
        }

        .fc-carousel-next {
            right: 4px;
        }

        .fc-carousel-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1.1rem;
        }

        .fc-carousel-dots {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: .45rem;
            max-width: 34rem;
        }

        .fc-carousel-dot {
            width: 9px;
            height: 9px;
            padding: 0;
            background: rgba(0, 0, 0, .18);
            border: 0;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color .18s ease, width .18s ease;
        }

        .fc-carousel-dot[aria-current="true"] {
            background: #111;
            width: 26px;
            border-radius: 5px;
        }

        /* One screenshot per slide: phone centred, caption beneath */
        .slide {
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            /* stands in for the flex gap - see .fc-carousel--3 above */
            padding-inline: .55rem;
        }

        .slide button {
            width: min(205px, 76%);
            cursor: zoom-in;
        }

        .slide figcaption {
            padding-top: .9rem;
        }

        @media (max-width: 620px) {
            .slide button {
                width: min(250px, 62vw);
            }
        }

        .slide-group {
            display: block;
            font-size: .76rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, .55);
            margin-bottom: .3rem;
        }

        .slide figcaption strong {
            display: block;
            font-size: 1.02rem;
            margin-bottom: .25rem;
        }

        .slide figcaption p {
            margin: 0;
            font-size: .9rem;
            color: rgba(0, 0, 0, .72);
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            .parallax-layer {
                will-change: auto;
            }

            .shot button, .link-grid a {
                transition: none;
            }

            .fc-carousel-viewport {
                scroll-behavior: auto;
            }
        }
        /* =====================================================
           Landscape captures
           Some apps only run on their side. The frame turns with them:
           corner radii swap over, the Dynamic Island goes (these are
           simulator grabs with no status bar), and one fixed ratio with
           contain keeps every frame the same height without cropping the
           slightly different sizes.
           These sit at the end of the stylesheet on purpose - they are
           overrides, and at equal specificity the later rule wins.
           ===================================================== */
        .phone--landscape {
            border-radius: 6.2% / 13.5%;
        }

        .phone.phone--landscape img {
            border-radius: 5.2% / 11%;
        }

        .phone--landscape::after {
            display: none;
        }

        /* Three shots fanned like the portrait cards, only turned through
           ninety degrees: the middle one large and in front, the other two
           tucked behind it above and below rather than left and right.
           All three share one grid cell so they overlap; the padding gives
           the two behind somewhere to show. */
        .shot-fan.shot-fan--landscape,
        .hero-shots.hero-shots--landscape {
            display: grid;
            max-width: none;
            /* the two behind are pushed out by a transform, which does not
               reserve space - without this the card's overflow clips them */
            padding-block: 15%;
        }

        .shot-fan--landscape .phone,
        .hero-shots--landscape .phone {
            grid-area: 1 / 1;
            flex: none;
            width: 100%;
            margin: 0;
        }

        .shot-fan--landscape .phone:nth-child(1),
        .hero-shots--landscape .phone:nth-child(1) {
            width: 86%;
            justify-self: center;
            transform: translateY(-34%) rotate(-2.5deg);
            z-index: 1;
        }

        .shot-fan--landscape .phone:nth-child(2),
        .hero-shots--landscape .phone:nth-child(2) {
            z-index: 3;
        }

        .shot-fan--landscape .phone:nth-child(3),
        .hero-shots--landscape .phone:nth-child(3) {
            width: 86%;
            justify-self: center;
            transform: translateY(34%) rotate(2.5deg);
            z-index: 1;
        }

        /* A landscape frame needs the width, so two per view, one when narrow */
        .fc-carousel.fc-carousel--2 {
            --per-view: 2;
            --gap: 0rem;
        }

        @media (max-width: 900px) {
            .fc-carousel.fc-carousel--2 {
                --per-view: 1;
            }
        }

        .slide.slide--wide button {
            width: 100%;
        }