.content {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: var(--hero-top) auto 13vh;
}

/*
 * Typography comes from .page-title in public/base.css; this page only turns it left-aligned.
 *
 * The row centres its two columns, which on a narrow viewport (where the text beside the slogan
 * grows taller than the slogan itself) would push the title down the screen; anchoring the slogan
 * to the top of the row keeps it the same distance below the topbar as on every other page.
 */
.slogan_box {
    align-self: start;
    text-align: left;
    margin-bottom: 40px;
}

.slogan_sub {
    font-size: var(--font-size-small);
    letter-spacing: normal;
    line-height: 1.4;
    padding-top: 30px;
}

.slogan_text {
    font-size: var(--font-size-medium);
    text-align: left;
}

/*
 * The home video and the stage that opens it.
 *
 * Two states live here. Without public_home.js -- no script, or a reader who asked for reduced
 * motion -- the video is the 75%-wide, 16:9 frame the page has always shown. With it, the video
 * widens as the slogan above it is scrolled off, and is the full width of the page by the moment
 * that slogan has gone under the topbar.
 *
 * Nothing about that holds the page: the stage is an ordinary block in the flow with no runway
 * added underneath it, so a reader who wants what is below the video scrolls straight past it and
 * the video happens to be open by the time they get there.
 *
 * The script writes three numbers here: --video-expand, 0 while the frame is still the page's and
 * 1 once it is the screen's, and --video-stage-w/--video-stage-h, the box the expanded video has
 * to fill. Those last two are pixel lengths read off the layout rather than vw/vh, because vw
 * counts the scrollbar the page has and a video that wide would scroll the page sideways.
 */
.video_stage {
    --video-expand: 0;
    margin-bottom: 150px;
}

.video_stage__frame {
    display: grid;
    place-items: center;
}

.background-video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: var(--r);
}

/* The clips take turns between two videos stacked in the one cell, the next loading behind the one
   playing and fading in over it when that one is about to end (see the bottom of public_home.js,
   which reads the fade's length off the transition here). Transparent rather than taken out of
   the layout, so it keeps loading and is already the right size when it comes to the front. */
.video_stage__frame > .background-video {
    grid-area: 1 / 1;
    transition: opacity 0.8s ease-in-out;
}

.background-video--front {
    z-index: 1;
}

.background-video--waiting {
    opacity: 0;
}

/* A clip then simply follows the last one, as it would with no second video at all. */
@media (prefers-reduced-motion: reduce) {
    .video_stage__frame > .background-video {
        transition: none;
    }
}

/*
 * Both ends of the expansion, interpolated by --video-expand.
 *
 * Width runs from the page's 75% to the whole of it. Height starts at the 16:9 that width implies
 * (0.75 * 9/16) and ends at a screenful -- except on a screen taller than it is wide, where filling
 * that height would crop a 16:9 video down to a letterbox strip of its middle; there the min()
 * stops the crop at 4:3 and the video ends full-width instead of full-screen.
 */
.video_stage--scrubbed .background-video {
    width: calc(var(--video-stage-w) * (0.75 + 0.25 * var(--video-expand)));
    height: calc(
        var(--video-stage-w) * 0.421875 * (1 - var(--video-expand))
        + min(var(--video-stage-h), var(--video-stage-w) * 0.75) * var(--video-expand)
    );
    /* The corners flatten as the frame becomes the screen: a rounded box that reaches the edges
       would read as a window left open rather than as the video having taken the page over. */
    border-radius: calc(var(--r) * (1 - var(--video-expand)));
}

.offer {
    font-size: var(--font-size-medium);
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 150px;
}

.offer_title {
    position: relative;
    width: 100%;
    max-width: 1000px;
    font-family: var(--display);
    font-size: var(--font-size-large);
    font-weight: bold;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-align: center;
    margin: 0 auto 0;
}

.offer_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "detection replay"
        "performance false-positives";
    gap: 40px;
    padding-top: 80px;
}

.offer_grid .detection {
    grid-area: detection;
}

.offer_grid .replay {
    grid-area: replay;
}

.offer_grid .performance {
    grid-area: performance;
}

.offer_grid .transparency {
    grid-area: false-positives;
}

.offer_item_title {
    font-size: var(--font-size-medium);
    font-weight: bold;
    text-align: left;
    line-height: 1.1;
    padding-bottom: 15px;
}

.capabilities {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 150px;
    padding-top: 60px;
}

.venn {
    display: block;
    width: 100%;
    height: auto;
}

.venn_shape {
    fill: none;
    stroke: var(--edge-2);
    stroke-width: 1.5;
}

/* Only the plugin is filled: it is the shape you install, and the cloud lobe reads as area added
   onto it rather than as a set that contains it. */
.venn_shape--plugin {
    fill: var(--raise);
}

.venn_title {
    font-family: var(--display);
    font-size: 50px;
    font-weight: bold;
    fill: var(--text);
    letter-spacing: -0.01em;
    text-anchor: middle;
}

.venn_sublabel {
    font-family: var(--sans);
    font-size: 16px;
    fill: var(--text-dim);
    text-anchor: middle;
}

.venn_subheading {
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 600;
    fill: var(--text);
    text-anchor: middle;
}

.venn_item {
    font-family: var(--sans);
    font-size: 20px;
    fill: var(--text-dim);
    text-anchor: middle;
}

/* The way out of the capabilities diagram: centred under the venn, inside the same
   max-width block, so it reads as that section's call to action. */
.capabilities_actions {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

/* Twice the area of the standard button: every length scaled by sqrt(2) off the
   component's own values (0.9rem font, 0.55rem 1.2rem padding, 8px radius in button.css).
   Scaled here rather than in the component, so only this call to action grows. */
.capabilities_actions .button {
    padding: 0.78rem 1.7rem;
    font-size: 1.27rem;
    border-radius: 11px;
}

/* The replay clip in the offer card.
 *
 * Sized to the card rather than to itself: the still it replaced was 759px wide and unstyled, which
 * is wider than the column it sits in below a certain window. The clip is the replay's own 16:9
 * stage, so it is left to find its height from its width. */
.replay_video {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: var(--r);
}

/*
 * A phone.
 *
 * The page's sizes are set for a desktop window: an 83px slogan, 75px section titles and blocks
 * capped at 1000px with nothing to keep text off the edge of a screen narrower than that. Here the
 * type tokens come down (only for this page -- this sheet is the home page's own), every block gets
 * the topbar's 1rem gutter, the offers stack into one column, and the video is the gutter-to-gutter
 * width from the start: public_home.js leaves it alone at this width, since there is no 75% to open
 * out from that would be worth the scroll it holds.
 */
@media (max-width: 700px) {
    :root {
        --font-size-extra-large: 44px;
        --font-size-large: 36px;
        --font-size-medium: 18px;
        --font-size-small: 15px;
        --hero-top: 7vh;
    }

    .content,
    .offer,
    .offer_title {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .content {
        margin-bottom: 48px;
    }

    .slogan_box {
        margin-bottom: 20px;
    }

    .slogan_text {
        line-height: 1.45;
    }

    .video_stage {
        margin-bottom: 80px;
        padding: 0 1rem;
    }

    .background-video {
        width: 100%;
    }

    .offer {
        margin-bottom: 64px;
        line-height: 1.55;
    }

    .offer_grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "detection"
            "replay"
            "performance"
            "false-positives";
        gap: 40px;
        padding-top: 40px;
    }

    .offer_item_title {
        font-size: 22px;
        padding-bottom: 8px;
    }

    .capabilities {
        margin-bottom: 64px;
        padding: 32px 1rem 0;
    }
}

/* The narrowest phones (a 360px Android, a 320px iPhone SE) still fit "Cloud Intelligence" on one line. */
@media (max-width: 380px) {
    :root {
        --font-size-extra-large: 38px;
        --font-size-large: 32px;
    }
}