/* =====================================================================
   Host-app compatibility layer for the landing design (style.css)
   ---------------------------------------------------------------------
   The design was authored as a standalone page. This app ships Tailwind
   Preflight, which resets heading sizes to `font-size: inherit`.
   The declarations below restore standard heading font sizes and browser
   defaults for #cuberto-design.
   ===================================================================== */

/* Preflight puts a font stack + line-height on <html>. Restore defaults for cuberto design. */
#cuberto-design {
    font-family: initial;
    line-height: normal;
}

/* Preflight caps replaced elements at max-width:100% and blockifies them. */
#cuberto-design img,
#cuberto-design video,
#cuberto-design canvas {
    max-width: none;
}

#cuberto-design img,
#cuberto-design video,
#cuberto-design svg {
    display: inline;
    vertical-align: baseline;
}

/* The hero video used to be sized by its height="600px" attribute. */
#video video {
    height: 600px;
}

@media (max-width: 768px) {
    #video video {
        height: 100% !important;
    }
}

/* Ensure p3 and p4 video wrappers and videos have identical shapes and fit cleanly */
#cuberto-design #p3-video-wrapper,
#cuberto-design #p4-video-wrapper {
    overflow: hidden;
    border-radius: 300px;
}

#cuberto-design .p3-video-container,
#cuberto-design .p4-video-container {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

#cuberto-design #p3-video-wrapper video,
#cuberto-design #p4-video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Restore normal heading sizes from inherit with zero specificity (:where)
   so component styles in style.css are not overridden. */
:where(#cuberto-design) h1 {
    font-size: 2em;
    font-weight: bold;
}

:where(#cuberto-design) h2 {
    font-size: 1.5em;
    font-weight: bold;
}

:where(#cuberto-design) h3 {
    font-size: 1.17em;
    font-weight: bold;
}

:where(#cuberto-design) h4 {
    font-size: 1em;
    font-weight: bold;
}

:where(#cuberto-design) h5 {
    font-size: 0.83em;
    font-weight: bold;
}

:where(#cuberto-design) h6 {
    font-size: 0.67em;
    font-weight: bold;
}