/* ==========================================================================
   XTR2 landing page
   Built from the 1280px-wide InDesign artboard. On desktop (>=1024px) every
   dimension is written in DESIGN PIXELS using --u, so numbers here match the
   PDF 1:1 and the whole layout scales proportionally with the viewport
   (capped at 1280px). Below 1024px the layout stacks: text first, images last.
   ========================================================================== */

/* ---- Fonts (self-hosted, SIL OFL) --------------------------------------- */
@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/inter-300.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/open-sans-400.woff2") format("woff2"); }

:root {
    /* Colours sampled from the PDF */
    --bg:    #101112;
    --bar:   #0a1b2b;
    --red:   #d2232a;
    --green: #40ad49;
    --tile:  #e6e6e6;

    /*
     * The design uses Pragmatica (headlines/body) and Tahoma (button + lower copy).
     * Pragmatica is a commercial font, so Inter is the stand-in; its Book weight runs
     * ~4% wide, hence the small negative tracking below. If you license Pragmatica,
     * @font-face it, put it first in --font-main and set both --ls-* to 0.
     */
    --font-main: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-ui:   Tahoma, Verdana, "DejaVu Sans", sans-serif;
    --font-bar:  "Open Sans", "Segoe UI", Arial, sans-serif;
    --ls-book:   -0.018em;
    --ls-light:  -0.01em;

    /* 1 design pixel. 1rem = 16 design px; html font-size scales it with the viewport. */
    --u: calc(1rem / 16);
}

html { font-size: clamp(12.8px, 1.25vw, 16px); -webkit-text-size-adjust: 100%; }

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: #fff;
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
ul  { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }

body:has(dialog[open]) { overflow: hidden; }

/* ==========================================================================
   Header bar (placeholder) - self-contained, safe to delete
   ========================================================================== */
.site-bar {
    position: relative;
    z-index: 5;
    height: calc(49 * var(--u));
    background: var(--bar);
    font-family: var(--font-bar);
}
/* 1px grey edge fading into the page background, as in the artwork */
.site-bar::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 100%;
    height: calc(5 * var(--u));
    background: linear-gradient(#606060 0, #393a3a 20%, #272828 40%, #181819 60%, #131414 80%, var(--bg) 100%);
    pointer-events: none;
}
.site-bar__inner { position: relative; max-width: calc(1280 * var(--u)); height: 100%; margin: 0 auto; }

.site-bar__nav {
    position: absolute; left: calc(121.6 * var(--u)); top: calc(12.7 * var(--u));
    display: flex; gap: calc(33 * var(--u));
    font-size: calc(16 * var(--u)); line-height: calc(21.8 * var(--u));
}
.site-bar__nav a { color: #fff; text-decoration: none; }
.site-bar__nav a:hover { text-decoration: underline; }

.site-bar__search {
    position: absolute; left: calc(946 * var(--u)); top: calc(12.2 * var(--u));
    width: calc(28 * var(--u)); height: calc(28 * var(--u));
    display: grid; place-items: center; padding: 0;
    background: transparent; border: 1px solid #fff; cursor: pointer;
}
.site-bar__search svg { width: 65%; height: 65%; }

.site-bar__lang {
    position: absolute; left: calc(1161.6 * var(--u)); top: calc(7.3 * var(--u));
    width: calc(103.4 * var(--u)); height: calc(33.6 * var(--u));
    padding: 0 calc(24 * var(--u)) 0 calc(8.5 * var(--u));
    font: inherit; font-size: calc(11 * var(--u)); color: #000;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right calc(8 * var(--u)) center;
    border: 0; border-radius: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
}

/* ==========================================================================
   "Book a demo" tab
   ========================================================================== */
.demo-tab {
    position: fixed; z-index: 4; left: 0; top: 50%;
    width: 30px; height: 144px;
    display: grid; place-items: center;
    background: var(--bar); color: #fff; text-decoration: none;
    font: 400 13px/1 var(--font-bar);
    /* Vertical text reading bottom-to-top. The 180deg rotation also flips the
       shape, so the rounded corners are declared on the left to end up on the right. */
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
    border-radius: 16px 0 0 16px;
}
.demo-tab:hover { background: #0f2740; }

/* ==========================================================================
   Hero (desktop)
   ========================================================================== */
.hero__inner {
    display: grid;
    grid-template-columns: calc(524.4 * var(--u)) minmax(0, 1fr);
    column-gap: calc(51.6 * var(--u));
    max-width: calc(1280 * var(--u));
    margin: 0 auto;
    padding-right: calc(80 * var(--u));
    padding-bottom: calc(68 * var(--u));
}
.hero__media   { grid-column: 1; grid-row: 1; }
.hero__content { grid-column: 2; grid-row: 1; margin-top: calc(67.4 * var(--u)); }

/* ---- Footnotes: fixed-width block spanning both columns ------------------- */
.footnotes {
    max-width: calc(1280 * var(--u));
    margin: 0 auto;
    padding: 0 calc(80 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u));
    font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u));
}
.footnotes p + p { margin-top: calc(8 * var(--u)); }

/* ---- Images ------------------------------------------------------------- */
.hero__media {
    display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;
    margin-top: calc(55.2 * var(--u));
    padding-left: calc(56 * var(--u));
}
.thumbs {
    position: relative; z-index: 1;
    flex: 0 0 calc(82.4 * var(--u));
    margin: calc(89.4 * var(--u)) calc(-1.1 * var(--u)) 0 0;
    display: flex; flex-direction: column; gap: calc(19.2 * var(--u));
}
.thumb {
    display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
    aspect-ratio: 82.4 / 82;
    outline-offset: 3px;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.thumb:hover img { opacity: .8; }
.hero__image { width: calc(387.1 * var(--u)); flex: none; }

/* ---- Text --------------------------------------------------------------- */
.logo { width: calc(254.7 * var(--u)); }

.headline {
    margin-top: calc(23.3 * var(--u)); margin-left: calc(-1.5 * var(--u));
    font-size: calc(48.42 * var(--u)); line-height: calc(48.4 * var(--u));
    font-weight: 400; letter-spacing: var(--ls-book);
    white-space: nowrap;
}
.headline__strong { font-weight: 700; letter-spacing: 0.004em; color: #fff; }
.headline__red    { color: var(--red); }

.features {
    display: grid;
    grid-template-columns: calc(138.5 * var(--u)) calc(209 * var(--u)) 1fr;
    margin-top: calc(23.9 * var(--u));
}
.features h2 {
    font-size: calc(19.37 * var(--u)); line-height: calc(17 * var(--u));
    font-weight: 700; letter-spacing: 0;
}
.features p {
    margin-top: calc(19.6 * var(--u));
    font-size: calc(14.53 * var(--u)); line-height: calc(17 * var(--u));
    font-weight: 400; letter-spacing: var(--ls-book);
}
.features li { padding-left: calc(1.5 * var(--u)); }

.buy-btn {
    display: block; width: 100%;
    margin-top: calc(47.8 * var(--u));
    padding: calc(13.3 * var(--u)) calc(16 * var(--u)) calc(15.9 * var(--u)) calc(12 * var(--u));
    background: var(--green); color: #fff;
    border: 0; border-radius: calc(16.5 * var(--u));
    font-family: var(--font-ui); text-align: center; cursor: pointer;
    transition: background-color .15s;
}
.buy-btn:hover { background: #369a3f; }
.buy-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.buy-btn__title { display: block; font-size: calc(21.32 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; }
.buy-btn__sub   { display: block; font-size: calc(13.57 * var(--u)); line-height: calc(17 * var(--u)); }

/* "Calculate your savings": same shape as the buy button, lime with black text */
.buy-btn--calc {
    flex: 0 0 100%;
    margin-top: calc(18 * var(--u));
    background: #cdd600; color: #000;
    text-decoration: none;
}
.buy-btn--calc:hover { background: #b9c100; }
.buy-btn--calc .buy-btn__title { display: flex; align-items: center; justify-content: center; gap: 0.4em; }
.buy-btn__icon { flex: none; width: 1.05em; height: 1.05em; }

.explore {
    width: calc(640 * var(--u));
    margin-top: calc(38.9 * var(--u));
    font-family: var(--font-ui);
}
.explore__label { font-size: calc(17.44 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 700; }
.explore__title { margin-top: calc(25.7 * var(--u)); font-size: calc(25.19 * var(--u)); line-height: calc(27.1 * var(--u)); font-weight: 700; }
.explore__list  { margin-top: calc(34.3 * var(--u)); font-size: calc(17.44 * var(--u)); line-height: calc(21 * var(--u)); }
.explore__list li::before { content: "\2022\00a0"; }

/* ==========================================================================
   Modals (native <dialog>)
   ========================================================================== */
.modal {
    position: fixed; inset: 0; margin: auto;
    padding: 0; border: 0; overflow: visible;
    background: #fff; color: #000;
    max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
}
.modal::backdrop { background: rgba(0, 0, 0, .8); } /* 80% black, per the artwork */

.modal__close {
    position: absolute; top: 2px; right: 0; z-index: 2;
    width: 40px; height: 40px; padding: 0;
    background: none; border: 0; cursor: pointer;
    font: 700 19.37px/1 var(--font-main); color: #808080;
}
.modal__close:hover { color: #000; }

/* ---- Partner modal ------------------------------------------------------ */
.modal--partners {
    width: 620px; min-height: 480px;
    padding: 67.3px 20px 72.7px;
    overflow-y: auto;
    text-align: center;
}
.modal--partners[open] { display: block; }
.modal__logo  { width: 130.4px; margin: 0 auto; }
.modal__title { margin-top: 18.5px; font-size: 19.37px; line-height: 24px; font-weight: 700; }

.partners {
    --gap-x: 22.7px; --gap-y: 22px;
    /* Flex (not grid) so an incomplete last row is centred rather than left-aligned */
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--gap-y) var(--gap-x);
    max-width: calc(var(--cols, 4) * 98px + (var(--cols, 4) - 1) * var(--gap-x));
    margin: 29.9px auto 0;
}
.partners li { flex: 0 0 auto; width: min(98px, calc((100% - (var(--cols, 4) - 1) * var(--gap-x)) / var(--cols, 4))); }
.partner {
    display: grid; place-items: center;
    width: 100%; aspect-ratio: 1; padding: 10px;
    background: var(--tile);
    outline: 0 solid var(--red); outline-offset: -2px;
}
.partner img { width: 100%; height: 100%; object-fit: contain; }
/* 4px red frame straddling the tile edge, matching the highlighted tile in the PDF */
.partner:hover, .partner:focus-visible { outline-width: 4px; }

/* ---- Lightbox ----------------------------------------------------------- */
.modal--lightbox { background: transparent; overflow: visible; }
.modal--lightbox[open] { display: block; }
.modal--lightbox img {
    /* Source images are 461px wide; don't upscale past that or they go soft */
    width: min(90vw, 461px); max-height: calc(100dvh - 48px);
    object-fit: contain; background: #000;
}
.modal--lightbox .modal__close { top: -40px; right: -2px; color: #fff; }
.modal--lightbox .modal__close:hover { color: #ccc; }

/* ==========================================================================
   Stacked layout: tablets & phones. Text first, images at the bottom.
   ========================================================================== */
@media (max-width: 1023px) {
    :root { --u: 1px; }
    html { font-size: 16px; }

    /* Header bar: compact placeholder */
    .site-bar { height: 49px; }
    .site-bar__inner { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
    .site-bar__nav, .site-bar__search, .site-bar__lang { position: static; }
    .site-bar__nav { gap: clamp(9px, 2.8vw, 28px); font-size: clamp(12px, 3.3vw, 16px); margin-right: auto; min-width: 0; white-space: nowrap; }
    .site-bar__search { flex: none; width: 28px; height: 28px; }
    .site-bar__lang { flex: none; width: 84px; height: 32px; font-size: 12px; padding: 0 22px 0 8px; background-position: right 8px center; }

    .demo-tab { width: 24px; height: 120px; font-size: 12px; }

    .hero__inner {
        display: flex; flex-direction: column;
        max-width: 720px; padding: 28px 36px 56px;
    }
    .hero__content, .hero__media { margin-top: 0; }
    .hero__content { width: 100%; }
    .footnotes { max-width: 720px; padding: 0 36px 40px; font-size: 12px; line-height: 16px; }

    .logo { width: clamp(150px, 46vw, 200px); }

    .headline {
        margin-top: 22px; white-space: normal;
        font-size: clamp(28px, 7.6vw, 46px); line-height: 1.04;
    }
    .br-desktop { display: none; }

    .features { grid-template-columns: 1fr; gap: 22px; margin-top: 26px; }
    .features li { padding-left: 0; }
    .features h2 { font-size: 19px; line-height: 17px; }
    .features p  { margin-top: 12px; font-size: 15px; line-height: 18px; }

    .buy-btn { margin-top: 32px; padding: 14px 12px 15px; border-radius: 16px; }
    .buy-btn__title { font-size: clamp(14px, 4.2vw, 21px); line-height: 24px; }
    .buy-btn__sub   { font-size: 13px; line-height: 17px; }

    .explore { width: auto; margin-top: 34px; }
    .explore__label { font-size: 17px; }
    .explore__title { margin-top: 20px; font-size: clamp(20px, 5.6vw, 25px); line-height: 1.08; }
    .explore__list  { margin-top: 20px; font-size: 17px; line-height: 22px; }

    /* Images */
    .hero__media {
        display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;
        margin-top: 28px; padding-left: 0;
    }
    .buy-btn--calc { order: -2; flex: none; margin: 0 0 24px; }
    .hero__image { order: -1; width: min(100%, 340px); }
    .thumbs {
        flex: none; width: 100%; max-width: 420px;
        margin: 20px 0 0; flex-direction: row; gap: 12px;
    }
    .thumbs li { flex: 1 1 0; min-width: 0; }
    .thumb { aspect-ratio: 1; }

    /* Modal */
    .modal--partners { width: min(620px, calc(100vw - 24px)); padding: 52px 16px 36px; min-height: 0; }
    .modal__title { font-size: 18px; }
    .partners { --gap-x: 12px; --gap-y: 12px; }
    .partner { padding: 8px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .features { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

@media (max-width: 480px) {
    .site-bar__search { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}