/* Ported from Assets/UC/UI/Taxonomy/AboutUC/AboutUCPage.uss */
.about-root {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    background-color: rgb(2, 7, 19);
    color: rgb(245, 248, 255);
    overflow: hidden;
}

.ambient-field {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.ambient-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    left: -90px;
    top: 90px;
    border-radius: 260px;
    background-color: rgba(19, 100, 138, 0.18);
    border-width: 1px;
    border-color: rgba(95, 225, 255, 0.12);
}

.ambient-orbit {
    position: absolute;
    border-width: 1px;
    border-color: rgba(93, 213, 255, 0.13);
    border-radius: 500px;
}

.orbit-one { width: 620px; height: 620px; left: -255px; top: 305px; }
.orbit-two { width: 390px; height: 390px; right: -205px; top: 850px; border-color: rgba(255, 193, 69, 0.12); }

.ambient-star {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: rgb(121, 225, 255);
}

.star-one { left: 12%; top: 18%; }
.star-two { left: 82%; top: 28%; width: 3px; height: 3px; }
.star-three { left: 71%; top: 51%; background-color: rgb(255, 199, 78); }
.star-four { left: 18%; top: 67%; width: 2px; height: 2px; }
.star-five { left: 88%; top: 79%; background-color: rgb(255, 222, 137); }
.star-six { left: 44%; top: 91%; width: 3px; height: 3px; }

.about-header {
    height: 96px;
    min-height: 96px;
    padding-left: 24px;
    padding-right: 20px;
    padding-top: 18px;
    padding-bottom: 12px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(3, 10, 24, 0.96);
    border-bottom-width: 1px;
    border-bottom-color: rgba(101, 222, 255, 0.24);
}

.about-header-rule {
    position: absolute;
    left: 24px;
    right: 20px;
    bottom: -1px;
    height: 2px;
    background-color: rgba(248, 185, 51, 0.75);
}

.about-header-brand { flex-direction: row; align-items: center; }
.about-header-bulb { width: 44px; height: 44px; margin-right: 12px;  }
.about-header-copy { justify-content: center; }
.about-header-eyebrow { font-size: 9px; letter-spacing: 2px; color: rgb(92, 220, 255); font-weight:700; }
.about-header-title { margin-top: 2px; font-size: 22px; color: rgb(251, 249, 240); font-weight:700; }

.about-close-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 14px;
    border-width: 1px;
    border-color: rgba(255, 218, 139, 0.62);
    background-color: rgba(255, 255, 255, 0.07);
    padding: 0;
}

.about-close-button:hover { background-color: rgba(255, 255, 255, 0.14); }
.about-close-line { position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; background-color: rgb(255, 248, 224); }
.close-line-a { rotate: 45deg; }
.close-line-b { rotate: -45deg; }

.about-scroll { flex-grow: 1; background-color: rgba(0, 0, 0, 0); }
.about-scroll .unity-scroll-view__content-container { flex-grow: 1; }
.about-content { flex-grow: 1; align-items: stretch; padding-bottom: 40px; }

.about-hero {
    min-height: 690px;
    padding: 62px 30px 50px 30px;
    align-items: center;
    justify-content: center;
    background-color: rgba(3, 17, 36, 0.60);
    border-bottom-width: 1px;
    border-bottom-color: rgba(94, 219, 255, 0.17);
}

.hero-kicker, .chapter-number {
    font-size: 10px;
    letter-spacing: 2.8px;
    color: rgb(91, 224, 255);
    font-weight:700;
    text-align:center;
}

.hero-emblem { width: 176px; height: 176px; margin-top: 28px; margin-bottom: 28px; align-items: center; justify-content: center; }
.hero-emblem-ring { position: absolute; border-radius: 120px; border-width: 1px; }
.hero-ring-outer { width: 176px; height: 176px; border-color: rgba(255, 196, 64, 0.46); }
.hero-ring-inner { width: 128px; height: 128px; border-color: rgba(93, 224, 255, 0.44); }
.hero-emblem-core { width: 92px; height: 92px; border-radius: 46px; align-items: center; justify-content: center; background-color: rgba(14, 49, 69, 0.94); border-width: 1px; border-color: rgba(255, 206, 99, 0.72); }
.hero-bulb { width: 66px; height: 66px;  }

.hero-title {
    font-size: 45px;
    letter-spacing: 1.6px;
    color: rgb(247, 250, 255);
    font-weight:700;
    text-align:center;
    white-space: normal;
}
.hero-title-gold { margin-top: 5px; font-size: 26px; letter-spacing: 3.8px; color: rgb(255, 193, 57); }
.hero-deck { max-width: 380px; margin-top: 25px; font-size: 17px; line-height: 24px; color: rgb(181, 202, 219); white-space: normal; text-align:center; }
.scroll-cue { margin-top: 46px; align-items: center; }
.scroll-cue-label { font-size: 8px; letter-spacing: 2.3px; color: rgb(136, 163, 183); }
.scroll-cue-line { margin-top: 12px; width: 1px; height: 46px; background-color: rgb(255, 192, 56); }

.chapter { padding: 76px 28px; align-items: stretch; }
.chapter-number { text-align:center; }
.chapter-title { margin-top: 18px; font-size: 36px; line-height: 42px; color: rgb(248, 249, 245); font-weight:700; white-space: normal; }
.chapter-body { margin-top: 24px; font-size: 17px; line-height: 27px; color: rgb(183, 204, 220); white-space: normal; }
.chapter-emphasis { margin-top: 34px; padding: 27px 22px; font-size: 23px; line-height: 31px; letter-spacing: 0.5px; color: rgb(255, 213, 113); white-space: normal; font-weight:700; text-align:center; border-top-width: 1px; border-bottom-width: 1px; border-color: rgba(255, 198, 70, 0.46); }

.humanity-card { margin-top: 34px; padding: 22px 21px; background-color: rgba(13, 31, 51, 0.88); border-left-width: 3px; border-left-color: rgb(69, 215, 244); border-radius: 4px; }
.humanity-name { padding-top: 9px; padding-bottom: 9px; font-size: 11px; letter-spacing: 1.35px; color: rgb(214, 229, 239); border-bottom-width: 1px; border-bottom-color: rgba(120, 183, 207, 0.15); white-space: normal; }
.humanity-name-last { border-bottom-width: 0; }

.statement-stage { min-height: 640px; padding: 88px 26px; align-items: center; justify-content: center; background-color: rgb(245, 181, 43); color: rgb(4, 10, 20); }
.statement-small { font-size: 13px; letter-spacing: 2.7px; font-weight:700; text-align:center; }
.statement-large { margin-top: 22px; font-size: 60px; line-height: 62px; letter-spacing: 1px; font-weight:700; text-align:center; white-space: normal; }
.statement-caption { margin-top: 24px; max-width: 350px; font-size: 16px; line-height: 23px; text-align:center; white-space: normal; }
.spark-line { margin-top: 54px; width: 100%; flex-direction: row; justify-content: space-between; border-top-width: 1px; border-top-color: rgba(4, 10, 20, 0.35); }
.spark-node { width: 18%; align-items: center; }
.spark-dot { width: 7px; height: 7px; margin-top: -4px; border-radius: 4px; background-color: rgb(4, 10, 20); }
.spark-label { margin-top: 12px; font-size: 8px; letter-spacing: 0.8px; font-weight:700; }

.awe-chapter { background-color: rgba(9, 22, 45, 0.90); }
.awe-lines { margin-top: 32px; }
.awe-line { margin-bottom: 14px; padding-left: 17px; font-size: 17px; line-height: 25px; color: rgb(205, 222, 236); white-space: normal; border-left-width: 1px; border-left-color: rgba(90, 221, 255, 0.55); }
.awe-emphasis { color: rgb(115, 228, 255); }
.become-lead { margin-top: 48px; font-size: 14px; color: rgb(170, 188, 205); text-align:center; }
.become-title { margin-top: 14px; font-size: 41px; line-height: 45px; letter-spacing: 1.6px; color: rgb(255, 203, 89); font-weight:700; text-align:center; white-space: normal; }

.mission-chapter { background-color: rgba(3, 12, 25, 0.96); }
.mission-title { font-size: 44px; }
.mission-pairs { margin-top: 38px; }
.mission-pair { margin-bottom: 12px; padding: 20px 20px; background-color: rgba(15, 39, 61, 0.82); border-radius: 7px; border-width: 1px; border-color: rgba(92, 218, 247, 0.20); }
.mission-not { font-size: 10px; letter-spacing: 1.5px; color: rgb(126, 153, 174); }
.mission-but { margin-top: 7px; font-size: 22px; letter-spacing: 0.7px; color: rgb(255, 210, 104); font-weight:700; }
.welcome-card { margin-top: 30px; padding: 31px 22px; align-items: center; border-width: 1px; border-color: rgba(255, 200, 76, 0.56); background-color: rgba(255, 188, 48, 0.07); }
.welcome-title { font-size: 20px; letter-spacing: 1.4px; color: rgb(255, 213, 116); font-weight:700; }
.welcome-body { margin-top: 12px; font-size: 15px; line-height: 23px; color: rgb(219, 226, 229); text-align:center; white-space: normal; }

.soul-chapter { background-color: rgb(6, 15, 29); }
.soul-answer { margin-top: 8px; font-size: 27px; letter-spacing: 1.2px; color: rgb(87, 224, 255); font-weight:700; white-space: normal; }
.question-card { margin-top: 25px; padding: 25px 22px; border-radius: 6px; }
.question-card-muted { background-color: rgba(255, 255, 255, 0.04); border-width: 1px; border-color: rgba(255, 255, 255, 0.10); }
.question-card-bright { margin-top: 12px; background-color: rgba(29, 120, 151, 0.19); border-width: 1px; border-color: rgba(79, 219, 255, 0.44); }
.question-kicker { font-size: 9px; letter-spacing: 2px; color: rgb(255, 196, 68); font-weight:700; }
.question-copy { margin-top: 10px; font-size: 20px; line-height: 27px; color: rgb(240, 244, 246); white-space: normal; }
.measure-card { margin-top: 30px; flex-direction: row; padding: 24px 8px; border-top-width: 1px; border-bottom-width: 1px; border-color: rgba(255, 203, 95, 0.34); }
.measure-half { width: 49%; align-items: center; justify-content: center; }
.measure-divider { width: 1px; height: 62px; background-color: rgba(255, 202, 90, 0.30); }
.measure-label { font-size: 8px; letter-spacing: 1.5px; color: rgb(128, 155, 177); }
.measure-value { margin-top: 10px; font-size: 18px; color: rgb(255, 207, 91); font-weight:700; }
.measure-muted { color: rgb(151, 167, 181); }

.finale { min-height: 830px; padding: 86px 27px 64px 27px; align-items: center; justify-content: center; background-color: rgb(1, 6, 16); }
.finale-number { align-self: center; }
.finale-lead { margin-top: 30px; max-width: 360px; font-size: 17px; line-height: 25px; color: rgb(183, 203, 219); text-align:center; white-space: normal; }
.finale-title { margin-top: 18px; font-size: 42px; line-height: 47px; letter-spacing: 0.9px; color: rgb(250, 249, 244); font-weight:700; text-align:center; white-space: normal; }
.finale-vows { margin-top: 45px; width: 100%; }
.finale-vow { padding: 14px 4px; font-size: 13px; letter-spacing: 1.15px; color: rgb(90, 219, 249); font-weight:700; text-align:center; border-bottom-width: 1px; border-bottom-color: rgba(91, 219, 249, 0.13); white-space: normal; }
.finale-soul { margin-top: 32px; font-size: 22px; color: rgb(255, 207, 102); font-weight:700; }
.finale-mark { margin-top: 56px; align-items: center; }
.finale-bulb { width: 76px; height: 76px;  }
.finale-brand { margin-top: 14px; font-size: 19px; letter-spacing: 2px; color: rgb(247, 249, 249); font-weight:700; }
.finale-tagline { margin-top: 7px; font-size: 9px; letter-spacing: 1.4px; color: rgb(116, 214, 238); }
.return-button { margin-top: 42px; width: 100%; height: 58px; border-radius: 29px; border-width: 1px; border-color: rgb(255, 204, 92); background-color: rgba(255, 193, 58, 0.12); color: rgb(255, 229, 169); font-size: 14px; letter-spacing: 0.7px; font-weight:700; }
.return-button:hover { background-color: rgba(255, 193, 58, 0.23); }

.reveal { opacity: 1; }

/* Runtime layout hardening: the scroll content must grow with its children.
   If these elements are allowed to shrink to the viewport, every chapter is
   compressed into the same screen and the typography appears to overlap. */
.about-scroll {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
    width: 100%;
}

.about-scroll .unity-scroll-view__content-container {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    min-height: 0;
    align-items: stretch;
}

.about-content {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    min-height: 0;
    align-items: stretch;
}

.about-content .unity-label,
.about-content .unity-button,
.about-content > .unity-visual-element {
    flex-shrink: 0;
}

.about-hero,
.chapter,
.statement-stage,
.finale,
.reveal {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
}

.about-hero { min-height: 720px; }
.spark-chapter { min-height: 860px; }
.statement-stage { min-height: 680px; }
.awe-chapter { min-height: 940px; }
.mission-chapter { min-height: 930px; }
.soul-chapter { min-height: 850px; }
.finale {
    min-height: 1080px;
    justify-content: flex-start;
}

.hero-kicker,
.hero-title,
.hero-title-gold,
.hero-deck,
.chapter-number,
.chapter-title,
.chapter-body,
.chapter-emphasis,
.statement-small,
.statement-large,
.statement-caption,
.awe-line,
.awe-emphasis-line,
.become-lead,
.become-title,
.mission-not,
.mission-but,
.welcome-title,
.welcome-body,
.soul-answer,
.question-kicker,
.question-copy,
.measure-label,
.measure-value,
.finale-lead,
.finale-title,
.finale-vow,
.finale-soul,
.finale-brand,
.finale-tagline {
    flex-grow: 0;
    flex-shrink: 0;
    white-space: normal;
}

.hero-title-stack,
.statement-title-stack,
.awe-emphasis-stack,
.become-title-stack,
.finale-title-stack {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    align-items: center;
}

.hero-title-stack { margin-top: 0; }
.hero-title-stack .hero-title { width: 100%; font-size: 42px; }
.statement-title-stack { margin-top: 22px; }
.statement-title-stack .statement-large { width: 100%; margin-top: 0; font-size: 54px; line-height: 58px; }
.awe-emphasis-stack { align-items: stretch; }
.awe-emphasis-line { width: 100%; font-size: 21px; line-height: 30px; color: rgb(115, 228, 255); font-weight:700; text-align:center; }
.become-title-stack { margin-top: 14px; }
.become-title-stack .become-title { width: 100%; margin-top: 0; font-size: 37px; line-height: 42px; }
.finale-title-stack { margin-top: 18px; }
.finale-title-stack .finale-title { width: 100%; margin-top: 0; font-size: 38px; line-height: 44px; }

.humanity-card,
.humanity-name,
.awe-lines,
.mission-pairs,
.mission-pair,
.mission-not,
.mission-but,
.welcome-card,
.question-card,
.question-kicker,
.question-copy,
.measure-card,
.measure-half,
.finale-vows,
.finale-mark,
.return-button {
    flex-grow: 0;
    flex-shrink: 0;
}

.chapter-title,
.chapter-body,
.soul-answer,
.welcome-body,
.question-copy,
.finale-lead,
.finale-vow,
.finale-tagline {
    width: 100%;
}

.finale-soul {
    width: 100%;
    text-align:center;
}

/* Full-screen prologue. The interactive About page remains alive beneath it. */
.about-cinematic {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background-color: rgb(0, 0, 0);
}

.cinematic-bulb-stage {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.cinematic-bulb-glow {
    position: absolute;
    border-radius: 500px;
    opacity: 0;
}

.cinematic-bulb-glow-outer {
    width: 178px;
    height: 178px;
    background-color: rgba(255, 169, 22, 0.12);
    border-width: 1px;
    border-color: rgba(255, 195, 64, 0.28);
}

.cinematic-bulb-glow-inner {
    width: 118px;
    height: 118px;
    background-color: rgba(255, 205, 64, 0.16);
    border-width: 1px;
    border-color: rgba(255, 226, 130, 0.38);
}

.cinematic-intro-bulb {
    width: 92px;
    height: 112px;
    flex-grow: 0;
    flex-shrink: 0;
    opacity: 0;
}

.cinematic-skip {
    position: absolute;
    right: 18px;
    top: 39px;
    width: 58px;
    height: 32px;
    min-width: 58px;
    padding: 0;
    border-width: 1px;
    border-radius: 16px;
    border-color: rgb(66, 222, 143);
    background-color: rgba(0, 0, 0, 0.28);
    color: rgb(126, 255, 191);
    font-size: 11px;
    letter-spacing: 0.6px;
    font-weight:700;
}

.cinematic-skip:hover {
    background-color: rgba(37, 191, 114, 0.18);
    border-color: rgb(121, 255, 190);
}

.cinematic-title-stage {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 10.5%;
    height: 31%;
    align-items: center;
    overflow: visible;
}

.cinematic-brand-bloom {
    position: absolute;
    top: -23px;
    left: 50%;
    margin-left: -158px;
    width: 316px;
    height: 120px;
    border-radius: 80px;
    background-color: rgba(255, 190, 54, 0.12);
    opacity: 0;
}

.cinematic-title-spark-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 190px;
    overflow: visible;
}

.cinematic-title-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 4px;
    background-color: rgba(255, 229, 157, 0.96);
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-color: rgba(255, 255, 255, 0.9);
    border-right-color: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.9);
    border-left-color: rgba(255, 255, 255, 0.9);
    opacity: 0;
}

.cinematic-title-spark-one { left: 13%; top: 36px; }
.cinematic-title-spark-two { right: 14%; top: 18px; width: 3px; height: 3px; }
.cinematic-title-spark-three { left: 24%; top: 88px; width: 3px; height: 3px; }
.cinematic-title-spark-four { right: 24%; top: 98px; }
.cinematic-title-spark-five { left: 34%; top: 132px; width: 3px; height: 3px; }
.cinematic-title-spark-six { right: 35%; top: 150px; width: 4px; height: 4px; }

.cinematic-brand-logo {
    width: 250px;
    height: 62px;
    flex-grow: 0;
    flex-shrink: 0;
}

.cinematic-brand-sweep {
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -35px;
    width: 70px;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(255, 246, 210, 0.95);
    opacity: 0;
}

.cinematic-title-rule {
    width: 48px;
    height: 1px;
    margin-top: 13px;
    margin-bottom: 18px;
    background-color: rgba(255, 196, 68, 0.70);
}

.cinematic-curious,
.cinematic-awe {
    width: 100%;
    white-space: normal;
    text-align:center;
}

.cinematic-curious {
    color: rgb(238, 244, 248);
    font-size: 25px;
    letter-spacing: 1px;
}

.cinematic-awe {
    margin-top: 9px;
    color: rgb(255, 193, 60);
    font-size: 18px;
    letter-spacing: 2.2px;
    font-weight:700;
}

.cinematic-manifesto-viewport {
    position: absolute;
    left: 25px;
    right: 25px;
    top: 38.5%;
    bottom: 4%;
    overflow: hidden;
}

.cinematic-manifesto-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 120px;
}

.cinematic-opening,
.cinematic-copy,
.cinematic-kicker,
.cinematic-statement {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    white-space: normal;
    text-align:center;
}

.cinematic-opening {
    margin-top: 0;
    color: rgb(246, 247, 242);
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0.25px;
    font-weight:700;
}

.cinematic-divider {
    width: 50px;
    height: 1px;
    margin-top: 44px;
    margin-bottom: 35px;
    background-color: rgba(255, 193, 60, 0.72);
}

.cinematic-copy {
    margin-top: 30px;
    color: rgb(201, 213, 223);
    font-size: 17px;
    line-height: 27px;
}

.cinematic-copy-muted { color: rgb(150, 170, 186); }
.cinematic-copy-emphasis { color: rgb(250, 244, 224); font-size: 19px; line-height: 29px; }

.cinematic-kicker {
    margin-top: 76px;
    color: rgb(93, 226, 255);
    font-size: 11px;
    line-height: 17px;
    letter-spacing: 2.5px;
    font-weight:700;
}

.cinematic-kicker-gold { color: rgb(255, 196, 66); }

.cinematic-statement {
    margin-top: 20px;
    color: rgb(248, 249, 245);
    font-size: 33px;
    line-height: 40px;
    letter-spacing: 1px;
    font-weight:700;
}

.cinematic-closing { margin-top: 82px; }
.cinematic-final-vow { margin-top: 52px; line-height: 22px; }
.cinematic-final-line { margin-top: 38px; }

.cinematic-final-bulb-stage {
    position: relative;
    width: 220px;
    height: 220px;
    margin-top: 48px;
    margin-bottom: 150px;
    align-self: center;
    flex-grow: 0;
    flex-shrink: 0;
    z-index: 50;
}

.cinematic-final-bulb {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -38px;
    margin-top: -38px;
    width: 76px;
    height: 76px;
    flex-grow: 0;
    flex-shrink: 0;
    
    z-index: 52;
}

.cinematic-final-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 140px;
    border-width: 2px;
    border-color: rgba(255, 199, 57, 0.62);
    background-color: rgba(255, 196, 54, 0.025);
    z-index: 51;
}

.cinematic-final-wave-one {
    width: 98px;
    height: 98px;
    margin-left: -49px;
    margin-top: -49px;
}

.cinematic-final-wave-two {
    width: 140px;
    height: 140px;
    margin-left: -70px;
    margin-top: -70px;
}

.cinematic-final-wave-three {
    width: 184px;
    height: 184px;
    margin-left: -92px;
    margin-top: -92px;
}

/* The copy vanishes into the fixed title lockup instead of crossing it. */
.cinematic-manifesto-fade {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
}

.cinematic-manifesto-fade-strong {
    top: -4px;
    height: 15px;
    background-color: rgba(0, 0, 0, 0.99);
}

.cinematic-manifesto-fade-mid {
    top: 11px;
    height: 14px;
    background-color: rgba(0, 0, 0, 0.78);
}

.cinematic-manifesto-fade-soft {
    top: 25px;
    height: 22px;
    background-color: rgba(0, 0, 0, 0.38);
}

/* Web widescreen: reserve the title's actual height before the scrolling copy.
   The fade stays inside its viewport, and narrative lines have a reading measure. */
.web-cinematic-wide {
    align-items: center;
    padding-bottom: 24px;
}

.web-cinematic-wide .cinematic-title-stage {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 620px;
    height: auto;
    flex-shrink: 0;
}

.web-cinematic-wide .cinematic-title-rule,
.web-cinematic-wide .cinematic-curious,
.web-cinematic-wide .cinematic-awe {
    flex-shrink: 0;
}

.web-cinematic-wide .cinematic-manifesto-viewport {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 640px;
    min-height: 0;
    flex-basis: 0;
    flex-grow: 1;
    margin-top: 24px;
}

.web-cinematic-short .cinematic-brand-logo { width: 210px; height: 48px; }
.web-cinematic-short .cinematic-title-rule { margin-top: 8px; margin-bottom: 10px; }
.web-cinematic-short .cinematic-curious { font-size: 22px; }
.web-cinematic-short .cinematic-awe { margin-top: 6px; font-size: 16px; }
.web-cinematic-short .cinematic-manifesto-viewport { margin-top: 16px; }