@font-face {
    font-family: "Redemption";
    src: url("assets/Redemption.ttf");
}

@font-face {
    font-family: "BaiJamjuree";
    src: url("assets/BaiJamjuree.ttf");
}

@font-face {
    font-family: "BaiJamjuree-Bold";
    src: url("assets/BaiJamjuree-Bold.ttf");
}

@font-face {
    font-family: "BaiJamjuree-Italic";
    src: url("assets/BaiJamjuree-Italic.ttf");
}

@font-face {
    font-family: "BaiJamjuree-BoldItalic";
    src: url("assets/BaiJamjuree-BoldItalic.ttf");
}

html {
    font-size: clamp(15px, 1.3vw, 24px);
}

body {
    background-color: #122437;
    font-family: BaiJamjuree, Arial, sans-serif;
    height: 100%;
}

.marketing-container {
    height: 100%;
    width: 100%;
}

.marketing-title {
    font-family: Redemption, Arial, sans-serif;
}

.marketing-mid-title {
    font-family: BaiJamjuree-Bold, Arial, sans-serif;
}

.marketing-mid-title-italic {
    font-family: BaiJamjuree-BoldItalic, Arial, sans-serif;
}

.marketing-header-container {
    --header-padding-block: 0.4rem;
    --logo-height: 2.9rem;
    /*
     * Of `logo.png`'s 200 rows, "OPS" ends at 146 and the red circle at 195. The bar's
     * lower edge sits a third of the way down that gap; the logo hangs by the rest.
     */
    --logo-hang: calc((200 - 146 - (195 - 146) / 3) / 200);
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 0.8rem;
    padding: var(--header-padding-block) 0.8rem;
}

.marketing-header-navigation {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: auto;
    flex-wrap: wrap;
    width: 100%;
}

/*
 * The logo overhangs the bar, by the share set above — see the README. `position: relative`
 * is what puts it in front of the splash, which would otherwise paint over it as the later
 * of two non-positioned images.
 */
.marketing-header-image {
    height: var(--logo-height);
    margin-right: 1rem;
    margin-left: 0.5rem;
    margin-bottom: calc(-1 * (var(--logo-height) * var(--logo-hang) + var(--header-padding-block)));
    align-self: flex-start;
    position: relative;
    z-index: 1;
}

.marketing-header-navigation-link {
    padding: 0.45rem 1rem;
    text-decoration: none;
    color: white;
    text-wrap: nowrap;
}

.marketing-header-navigation-link:visited {
    color: white;
}

.marketing-header-auth-container {
    display: flex;
    justify-content: flex-end;
    font-size: 0.75rem;
}

.marketing-header-auth {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 1.25rem;
}

.marketing-header-auth-link {
    text-wrap: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
    text-decoration: none;
    color: white;
}

.marketing-hamburger-button {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    margin-left: auto;
    margin-right: 1rem;
}

.marketing-hamburger-line {
    width: 2rem;
    height: 0.2rem;
    background-color: white;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.marketing-header-navigation-auth-mobile {
    display: none;
}

.marketing-menu-backdrop {
    display: none;
}

.marketing-splash {
    width: 100%;
}

.marketing-text-with-image-container {
    display: flex;
    padding-left: 1rem;
    padding-right: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4rem;
}

.marketing-text-with-image-body {
    width: 100%;
    max-width: 30rem;
    margin-bottom: 3rem;
    font-size: 1rem;
}

.marketing-text-with-image-p {
    margin-right: 1.6rem;
}

.marketing-blurb-link {
    color: white;
}

.marketing-blurb-link:visited {
    color: white;
}

.marketing-styled-image {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin-bottom: 4rem;
}

.marketing-text-with-image-media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 30rem;
}

.marketing-text-with-image-media .marketing-styled-image-background {
    display: none;
}

.marketing-grid {
    position: absolute;
    z-index: -1;
    /* Frame only, stretched not tiled. The mesh is the gradient on ::before: tiling a
       hairline lands every repeat on a different subpixel offset, and the antialiasing
       then varies visibly from one tile to the next. */
    /* One source of truth for the corner: the frame's chamfer is 44 of its 52 slice units, so
       it lands at 44/52 of the border width. The mesh clip is derived from this, plus 1px so it
       stops inside the stroke rather than poking past it. */
    --grid-corner: 1.2rem;
    --grid-chamfer: calc(var(--grid-corner) * 44 / 52);
    /* How far the frame's stroke sits inside the box edge: its path runs 2.5 of the SVG's 128
       units in, against a slice of 52. The mesh stops here rather than at the edge, or it pokes
       past the line by that much. */
    --grid-edge: calc(var(--grid-corner) * 2.5 / 52);
    border-style: solid;
    border-width: var(--grid-corner);
    border-image-source: url("assets/grid_frame.svg");
    border-image-slice: 52;
    border-image-width: var(--grid-corner);
    border-image-repeat: stretch;
    /* Two axes, intersected, because they want different shapes. Across: a long ramp that
       reaches zero before the copy. Down: full strength for the whole of the content it wraps,
       fading only in the band above it - which is also where the leftover part-row lands. No
       fade at the bottom, so the mesh's own last line closes the box on a horizontal. */
    mask-image:
        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0.34) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 9%, rgba(0, 0, 0, 1) 100%);
    mask-composite: intersect;
}

.marketing-grid::before {
    content: "";
    position: absolute;
    /* Anchored to the framed corner so the last row and column are always whole, and held one
       mesh's own outermost line is the perimeter on those sides. The box is content-sized,
       never a whole number of cells, so the leftover lands at the opposite edge - which is why
       the mask fades hardest there. */
    inset: -1.2rem;
    /* Each layer stops one cell short of the frame line it would otherwise land on, and only
       on its own axis - so verticals still cross the bottom band and horizontals the right
       one. no-repeat matters: letting these tile would reintroduce the subpixel drift. */
    background-image:
        repeating-linear-gradient(to left, #32C2FC 0 1px, transparent 1px 0.8rem),
        repeating-linear-gradient(to top, #32C2FC 0 1px, transparent 1px 0.8rem);
    background-size:
        calc(100% - 0.8rem) calc(100% - var(--grid-edge)),
        calc(100% - var(--grid-edge)) calc(100% - 0.8rem);
    background-position: left top;
    background-repeat: no-repeat;
    /* Cut a shade wider than the frame's chamfer, so the mesh stops inside the diagonal stroke.
       A narrower cut removes less and leaves mesh poking out past it. */
    --cut: calc(var(--grid-chamfer) + 1px);
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
    z-index: -1;
}

/* For a column sitting left of its copy. Mirrors the frame's open edges, the mesh anchor and
   the fade together, so one asset serves both hands. */
.marketing-grid-mirrored {
    transform: scaleX(-1);
}

.marketing-text-with-image-background {
    top: -2rem;
    /* The column carries 4rem of trailing margin below the title, so a positive
       inset here stops the grid just past it rather than out at the awards. */
    bottom: 3rem;
    left: -2.5rem;
    right: -2.5rem;
}




.marketing-video {
    width: 100%;
    margin-bottom: 4rem;
}

.marketing-video-title {
    display: flex;
    flex-direction: row;
    font-size: 1.6rem;
    color: #32C2FC;
    margin-top: 0.6rem;
}

.marketing-video-icon {
    position: relative;
    bottom: 2px;
    margin-right: 0.4rem;
}

.marketing-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-style: solid;
    border-color: #32C2FC;
    border-radius: 0.8rem;
    overflow: hidden;
}

.marketing-video-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.marketing-video-cover {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.marketing-video-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marketing-video-credit {
    position: absolute;
    right: 0.7rem;
    bottom: 0.55rem;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    opacity: 0.85;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    pointer-events: none;
}

.marketing-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.marketing-video-play-plate {
    transition: fill 0.2s ease, fill-opacity 0.2s ease;
}

.marketing-video-cover:hover .marketing-video-play-plate,
.marketing-video-cover:focus-visible .marketing-video-play-plate {
    fill-opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .marketing-video-play {
        transition: none;
    }
}

.marketing-awards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.marketing-awards-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.marketing-awards-image {
    height: 5rem;
    margin: 1.6rem;
}

.marketing-features-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 8rem;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.marketing-blue-line {
    width: 100%;
    max-width: 75rem;
}

.marketing-blue-line-bottom {
    transform: rotate(180deg);
}

.marketing-features-title {
    text-align: center;
    font-size: 4rem;
    margin-top: -1.2rem;
    margin-bottom: -1.2rem;
}

.marketing-features-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.marketing-feature-container {
    max-width: 20rem;
    margin: 2.5rem;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
}

.marketing-feature-image {
    padding: 0.8rem;
    height: 8rem;
}

.marketing-feature-title {
    color: #FC1800;
    font-size: 2.6rem;
}

.marketing-feature-body {
    font-size: 1rem;
    text-align: center;
    max-width: 18rem;
}

.marketing-partnership-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 2.5rem;
    width: 100%;
    margin-top: 4rem;
}

.marketing-partnership-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 20rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.marketing-partnership-card {
    width: 100%;
    margin: 0;
    padding: 0.9rem 0 1.8rem;
    /* No border-width on purpose: it resolves to `medium`, matching the video
       containers above. Setting one here makes this frame lighter than theirs. */
    border-style: solid;
    border-color: #32C2FC;
    border-radius: 0.8rem;
    background-color: #122437;
    overflow: hidden;
}

.marketing-partnership-card-label {
    font-size: 0.8rem;
    letter-spacing: 0.07em;
    color: #32C2FC;
    text-align: center;
    margin-bottom: 0.9rem;
}

.marketing-partnership-image {
    display: block;
    width: 100%;
}

.marketing-partnership-caption {
    font-size: 0.9rem;
    line-height: 140%;
    margin-top: 1rem;
    margin-left: 0.9rem;
    margin-right: 0.9rem;
}

.marketing-partnership-background {
    /* The container already pads 1rem past the card, so these are 1rem tighter than the
       clearance they produce around it. */
    top: -1.4rem;
    bottom: -1.4rem;
    left: -2.75rem;
    right: -2.75rem;
}


.marketing-partnership-body {
    max-width: 40rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.marketing-partnership-blurb {
    font-size: 1rem;
    margin-bottom: 1.6rem;
}

.marketing-partnership-platform {
    font-size: 1.4rem;
    margin-top: .6rem;
    margin-bottom: .6rem;
}

.marketing-partnership-link {
    color: white;
}

.marketing-partnership-link:visited {
    color: white;
}

.marketing-row-container {
    display: grid;
    grid-template-columns: auto 10rem;
}

.marketing-row-body {
    grid-column-start: 1;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: #32C2FC;
    border-width: thin;
    margin-bottom: -1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.marketing-row-body-title {
    font-size: 1.6rem;
    color: #32C2FC;
}

.marketing-row-link {
    display: grid;
    place-items: center;
    grid-column-start: 2;
}

.marketing-row-multilink-container {
    display: flex;
}

.marketing-row-link-container {
    position: relative;
}

.marketing-row-link-image {
    width: 10rem;
}

.marketing-row-link-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
    text-wrap: nowrap;
}

.marketing-testimonials-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 4rem;
}

.marketing-testimonials-image-container {
    display: flex;
    align-items: center;
    position: relative;
    width: 16rem;
}

.marketing-testimonials-image {
    width: 100%;
}

.marketing-testimonials-background {
    max-width: 100%;
    width: 20rem;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(calc(50% + 1rem), -50%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    z-index: -1;
}

.marketing-testimonials-body {
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.marketing-testimonials-title {
    max-width: 42rem;
    width: 100%;
}

.marketing-testimonials-blurb {
    font-size: 1rem;
    margin-bottom: 1.6rem;
}

.marketing-testimonials-videos-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

@media (width <=800px) {
    .marketing-testimonials-videos-wrapper {
        flex-direction: column;
        align-items: center;
    }
}

.marketing-testimonials-videos-container {
    display: flex;
    flex-direction: column;
    margin: 1.6rem;
    margin-bottom: 0;
    max-width: 21rem;
}

.marketing-testimonials-video-container {
    border-style: solid;
    border-color: #32C2FC;
    border-radius: 0.8rem;
    width: 100%;
    max-width: 21rem;
    aspect-ratio: 16 / 9;
}

.marketing-testimonials-video {
    border-radius: 0.8rem;
    width: 100%;
    height: 100%;
}

.marketing-testimonials-video-title {
    font-size: 1.6rem;
    color: #32C2FC;
    margin-top: 0.6rem;
    display: flex;
    flex-direction: row;
    text-wrap: nowrap;
}

.marketing-testimonials-icon {
    position: relative;
    bottom: 2px;
    margin-right: 0.4rem;
}

.marketing-testimonials-video-quote {
    font-family: BaiJamjuree-Italic, Arial, sans-serif;
    font-size: 1rem;
}

.marketing-testimonials-video-text {
    font-size: 1rem;
}

.marketing-tutorials-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem;
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
}

.marketing-tutorials-background {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    height: 26rem;
    max-width: 100%;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.marketing-tutorials-title {
    text-align: center;
    font-size: 4rem;
}

.marketing-tutorials-body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.marketing-tutorial-container {
    display: flex;
    flex-direction: column;
    margin: 1.6rem;
    margin-bottom: 0;
    max-width: 21rem;
}

.marketing-tutorial-video-container {
    border-style: solid;
    border-color: #32C2FC;
    border-radius: 0.8rem;
    width: 100%;
    max-width: 21rem;
    aspect-ratio: 16 / 9;
}

.marketing-tutorial-video {
    border-radius: 0.8rem;
    width: 100%;
    height: 100%;
}

.marketing-tutorial-title {
    font-size: 1.6rem;
    color: #32C2FC;
    margin-top: 0.6rem;
}

.marketing-tutorial-text {
    font-size: 1rem;
}

.marketing-questions-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8rem;
}

.marketing-questions-image-container {
    position: relative;
    width: 16rem;
}

.marketing-questions-image {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(calc(-50% + 6rem), -50%);
    width: 16rem;
    border-radius: 8rem;
}

.marketing-questions-background {
    position: relative;
    height: 29rem;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: -1;
}

.marketing-questions-body {
    position: relative;
}

.marketing-questions-title-small {
    font-size: 2.4rem;
}

.marketing-questions-title-large {
    font-size: 4.6rem;
    margin-top: -1.6rem;
}

.marketing-questions-button {
    position: absolute;
    bottom: -4rem;
    right: 0;
}

.marketing-about-social-container {
    display: flex;
    flex-wrap: wrap;
}

.marketing-about-social-image {
    width: 3.3rem;
    margin: 1.5rem;
}

.marketing-footer-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: #10171E;
    margin-top: 2rem;
}

.marketing-footer-section {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    font-size: 0.8rem;
}

.marketing-footer-title {
    font-size: 1.3rem;
}

.marketing-footer-link {
    text-decoration: none;
    color: white;
}

.marketing-footer-link:visited {
    color: white;
}

.marketing-footer-logo {
    height: 5.8rem;
    margin: 2rem;
}

.marketing-footer-version {
    color: #10171E;
}

.marketing-redbar-container {
    width: 100%;
}

.marketing-redbar-title {
    font-size: 2.6rem;
    line-height: 110%;
}

.marketing-redbar-image {
    width: 100%;
    margin-top: -3.75rem;
}

.marketing-redbar-image-left {
    max-width: 33rem;
    margin-left: -2rem;
    transform: scaleX(-1);
}

.marketing-styled-image-image {
    width: 100%;
}

.marketing-styled-image-background {
    max-width: 100%;
    width: 30rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 4rem), -50%) rotate(180deg);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: -1;
}

.marketing-help-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.marketing-help-iframe {
    height: 100%;
    width: 100%;
}

@media (width <=1120px) {
    .marketing-header-container {
        padding: 0.4rem;
        position: relative;
    }

    .marketing-header-image {
        margin-right: 0.5rem;
        /* No overhang here: the open nav panel is opaque and would clip it. */
        margin-bottom: 0;
        align-self: center;
    }

    .marketing-hamburger-button {
        display: flex;
    }

    .marketing-header-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: #122437;
        border-bottom: 2px solid #32C2FC;
        transform: scaleY(0);
        transform-origin: top;
        z-index: 100;
    }

    .marketing-header-container:has(.marketing-hamburger-button:focus) .marketing-header-navigation,
    .marketing-header-container:has(.marketing-hamburger-button:active) .marketing-header-navigation {
        transition: transform 0.3s ease;
    }

    .marketing-header-navigation.menu-open {
        transform: scaleY(1);
    }

    .marketing-header-navigation>div {
        border-bottom: 1px solid rgba(50, 194, 252, 0.2);
    }

    .marketing-header-navigation-link {
        display: block;
        padding: 1rem;
        text-align: center;
        width: 100%;
    }

    .marketing-header-navigation-auth-mobile {
        display: block;
    }

    .marketing-header-auth-container {
        display: none;
    }

    .marketing-header-auth {
        padding-right: 0;
    }

    .marketing-header-auth-signup {
        display: none;
    }

    .marketing-menu-backdrop {
        display: block;
        position: fixed;
        top: 4rem;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 50;
    }
}

@media (width <=1200px) {
    .marketing-row-container {
        border-top-style: solid;
        border-bottom-style: solid;
        border-color: #32C2FC;
        border-width: thin;
        margin-bottom: -1px;
        grid-template-columns: auto;
    }

    .marketing-row-number {
        border: none;
    }

    .marketing-row-body {
        border: none;
        margin-right: 0;
    }

    .marketing-row-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .marketing-row-link {
        grid-column-start: 1;
        grid-column-end: 2;
    }
}