/* Hero homepage animation concept "wall": The Wall. Every rule is scoped under .ha-v-wall.
 * World units are cqw of the .ha box: cells are 60 x 36 with a 3 gap (see v-wall.js). */

/* ------------------------------------------------------------------ camera rig */
.ha-v-wall .wl-view {
    position: absolute;
    inset: -8cqw;
    perspective: 220cqw;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7.5cqw, #000 calc(100% - 7.5cqw), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 7.5cqw, #000 calc(100% - 7.5cqw), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 7.5cqw, #000 calc(100% - 7.5cqw), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 7.5cqw, #000 calc(100% - 7.5cqw), transparent 100%);
    mask-composite: intersect;
}

.ha-v-wall .wl-tilt {
    position: absolute;
    left: 8cqw;
    top: 8cqw;
    width: 100cqw;
    height: 88.842cqw;
    transform-origin: 50% 50%;
}

.ha-v-wall .wl-cam {
    position: absolute;
    left: 0;
    top: 0;
    width: 627cqw;
    height: 399cqw;
    transform-origin: 0 0;
}

.ha-v-wall .wl-grid {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    grid-template-columns: repeat(10, 60cqw);
    grid-template-rows: repeat(6, 36cqw) 9cqw repeat(4, 36cqw);
    gap: 3cqw;
}

.ha-v-wall .wl-c0 { grid-column-start: 1; }
.ha-v-wall .wl-c1 { grid-column-start: 2; }
.ha-v-wall .wl-c2 { grid-column-start: 3; }
.ha-v-wall .wl-c3 { grid-column-start: 4; }
.ha-v-wall .wl-c4 { grid-column-start: 5; }
.ha-v-wall .wl-c5 { grid-column-start: 6; }
.ha-v-wall .wl-c6 { grid-column-start: 7; }
.ha-v-wall .wl-c7 { grid-column-start: 8; }
.ha-v-wall .wl-c8 { grid-column-start: 9; }
.ha-v-wall .wl-c9 { grid-column-start: 10; }
.ha-v-wall .wl-r0 { grid-row-start: 1; }
.ha-v-wall .wl-r1 { grid-row-start: 2; }
.ha-v-wall .wl-r2 { grid-row-start: 3; }
.ha-v-wall .wl-r3 { grid-row-start: 4; }
.ha-v-wall .wl-r4 { grid-row-start: 5; }
.ha-v-wall .wl-r5 { grid-row-start: 6; }
.ha-v-wall .wl-r6 { grid-row-start: 7; }
.ha-v-wall .wl-r7 { grid-row-start: 8; }
.ha-v-wall .wl-r8 { grid-row-start: 9; }
.ha-v-wall .wl-r9 { grid-row-start: 10; }
.ha-v-wall .wl-r10 { grid-row-start: 11; }
.ha-v-wall .wl-s11 { grid-column-end: span 1; grid-row-end: span 1; }
.ha-v-wall .wl-s21 { grid-column-end: span 2; grid-row-end: span 1; }
.ha-v-wall .wl-s22 { grid-column-end: span 2; grid-row-end: span 2; }

/* ------------------------------------------------------------------ home tile */
.ha-stage.ha-v-wall img.wl-clone {
    position: absolute;
    left: 257cqw;
    top: 63.5cqw;
    width: 116cqw;
    height: 103.0526cqw;
    max-width: none;
    opacity: 0;
}

.ha-v-wall .wl-home {
    position: relative;
    border-radius: 7cqw;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.55), 0 2.2cqw 6cqw rgba(6, 52, 50, 0.24);
    opacity: 0;
}

/* ------------------------------------------------------------------ tiles: unlit glass */
.ha-v-wall .wl-tile {
    position: relative;
    border-radius: 5cqw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Cg fill='%23fff' fill-opacity='.24'%3E%3Ccircle cx='9.1' cy='8.9' r='4.3'/%3E%3Crect x='4.6' y='22.6' width='31' height='3.6' rx='1.8'/%3E%3Crect x='4.6' y='28.4' width='19' height='3.6' rx='1.8'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(155deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.07) 60%);
    box-shadow: inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.3);
}

.ha-v-wall .wl-tile.wl-s21 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 36'%3E%3Cg fill='%23fff' fill-opacity='.24'%3E%3Ccircle cx='11.5' cy='18' r='5.2'/%3E%3Crect x='22' y='15.6' width='70' height='4.8' rx='2.4'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(155deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.07) 60%);
}

.ha-v-wall .wl-tile.wl-s22 {
    border-radius: 7cqw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 75'%3E%3Cg fill='%23fff' fill-opacity='.24'%3E%3Crect x='7' y='7' width='17' height='17' rx='5'/%3E%3Crect x='7' y='41' width='54' height='9' rx='4.5'/%3E%3Crect x='7' y='56.5' width='92' height='4.2' rx='2.1'/%3E%3Crect x='7' y='63.5' width='62' height='4.2' rx='2.1'/%3E%3C/g%3E%3Crect x='72' y='7' width='44' height='28' rx='5' fill='%23fff' fill-opacity='.08'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(155deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.07) 60%);
}

.ha-v-wall .wl-tile.wl-deco {
    background: rgba(255, 255, 255, 0.07);
}

/* ------------------------------------------------------------------ tiles: lit skins */
.ha-v-wall .wl-skin {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
}

.ha-v-wall .wl-paper > .wl-skin {
    background: var(--ha-paper);
    box-shadow: inset 0 0 0 0.25cqw rgba(27, 137, 128, 0.12);
}

.ha-v-wall .wl-mint > .wl-skin {
    background: linear-gradient(160deg, #F1FAF9, #DDF1EF);
    box-shadow: inset 0 0 0 0.25cqw rgba(27, 137, 128, 0.12);
}

.ha-v-wall .wl-blush > .wl-skin {
    background: linear-gradient(160deg, #FEF8F7, #FBE9E7);
    box-shadow: inset 0 0 0 0.25cqw rgba(232, 93, 76, 0.14);
}

.ha-v-wall .wl-deep > .wl-skin {
    background: linear-gradient(155deg, #2A9C93 0%, #167A72 100%);
    box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.16);
}

.ha-v-wall .wl-navy > .wl-skin {
    background: linear-gradient(155deg, #253B51 0%, #16232F 100%);
    box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.10);
}

.ha-v-wall .wl-paper,
.ha-v-wall .wl-mint {
    color: #0D514B;
}

.ha-v-wall .wl-blush {
    color: var(--ha-navy);
}

.ha-v-wall .wl-deep,
.ha-v-wall .wl-navy {
    color: #fff;
}

/* Headline skins float a little above the wall. */
.ha-v-wall .wl-s22 > .wl-skin {
    box-shadow: 0 1.2cqw 3cqw rgba(6, 52, 50, 0.20), inset 0 0 0 0.25cqw rgba(27, 137, 128, 0.12);
}

.ha-v-wall .wl-deep.wl-s22 > .wl-skin,
.ha-v-wall .wl-navy.wl-s22 > .wl-skin {
    box-shadow: 0 1.2cqw 3cqw rgba(6, 40, 46, 0.26), inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------ 1x1 and 2x1 tiles */
.ha-v-wall .wl-ic {
    position: absolute;
    left: 4.6cqw;
    top: 4.4cqw;
    font-size: 9cqw;
    opacity: 0;
}

.ha-v-wall .wl-paper .wl-ic,
.ha-v-wall .wl-mint .wl-ic {
    color: var(--ha-ink);
}

.ha-v-wall .wl-blush .wl-ic {
    color: var(--ha-red);
}

.ha-v-wall .wl-deep .wl-ic {
    color: #D2F2EE;
}

.ha-v-wall .wl-navy .wl-ic {
    color: var(--ha-coral);
}

.ha-v-wall .wl-tt {
    position: absolute;
    left: 4.6cqw;
    right: 3.6cqw;
    bottom: 3.7cqw;
    font: 600 7.4cqw/1.05 var(--ha-sans);
    letter-spacing: -0.018em;
    opacity: 0;
}

.ha-v-wall .wl-s21 .wl-ic {
    top: 12.5cqw;
    left: 5.4cqw;
    font-size: 11cqw;
}

.ha-v-wall .wl-s21 .wl-tt {
    left: 22cqw;
    right: 5cqw;
    top: 13.6cqw;
    bottom: auto;
    font-size: 7.6cqw;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ headline tiles */
.ha-v-wall .wl-badge {
    position: absolute;
    left: 7cqw;
    top: 7cqw;
    width: 17cqw;
    height: 17cqw;
    border-radius: 5cqw;
    display: grid;
    place-items: center;
    background: rgba(27, 137, 128, 0.10);
    color: var(--ha-ink);
    opacity: 0;
}

.ha-v-wall .wl-deep .wl-badge,
.ha-v-wall .wl-navy .wl-badge {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}

.ha-v-wall .wl-navy .wl-badge {
    color: var(--ha-coral);
}

.ha-v-wall .wl-badge .ha-icon {
    font-size: 9.6cqw;
}

.ha-v-wall .wl-htx {
    position: absolute;
    left: 7cqw;
    right: 7cqw;
    bottom: 6.4cqw;
}

.ha-v-wall .wl-ht {
    max-width: 66cqw;
    font: 400 11.3cqw/1.0 var(--ha-serif);
    letter-spacing: -0.005em;
    opacity: 0;
}

.ha-v-wall .wl-hl {
    max-width: 109cqw;
    margin-top: 2.2cqw;
    font: 500 6.5cqw/1.24 var(--ha-sans);
    letter-spacing: -0.01em;
    opacity: 0;
}

.ha-v-wall .wl-paper .wl-hl {
    color: #3F6D69;
}

.ha-v-wall .wl-deep .wl-hl,
.ha-v-wall .wl-navy .wl-hl {
    color: rgba(255, 255, 255, 0.84);
}

.ha-v-wall .wl-ring {
    position: absolute;
    inset: -2cqw;
    border-radius: 9cqw;
    border: 0.9cqw solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 5cqw rgba(255, 255, 255, 0.35), inset 0 0 2cqw rgba(255, 255, 255, 0.25);
    opacity: 0;
}

.ha-v-wall .wl-mui {
    position: absolute;
    right: 7cqw;
    top: 7cqw;
    width: 44cqw;
    height: 30cqw;
    opacity: 0;
}

/* kicker tile */
.ha-v-wall .wl-kic {
    position: absolute;
    left: 8cqw;
    top: 8cqw;
    font-size: 11cqw;
    color: var(--ha-coral);
}

.ha-v-wall .wl-kt {
    position: absolute;
    left: 8cqw;
    right: 8cqw;
    bottom: 8cqw;
    font: 400 17cqw/0.95 var(--ha-serif);
    color: #fff;
    opacity: 0;
}

/* ------------------------------------------------------------------ micro UIs */
.ha-v-wall .wl-msvg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ha-v-wall .wl-wave {
    stroke: var(--ha-ink);
    stroke-width: 2.1;
}

.ha-v-wall .wl-rec {
    fill: var(--ha-red);
}

.ha-v-wall .wl-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 1.4cqw;
    height: 9.8cqw;
    padding: 0 3cqw 0 2.6cqw;
    border-radius: 9cqw;
    font: 600 5.6cqw/1 var(--ha-sans);
    letter-spacing: -0.01em;
    white-space: nowrap;
    opacity: 0;
}

.ha-v-wall .wl-chip-ok {
    background: #E1F4F1;
    color: #0D5F58;
}

.ha-v-wall .wl-deep .wl-chip-ok,
.ha-v-wall .wl-navy .wl-chip-ok {
    background: #fff;
    color: #0D5F58;
}

.ha-v-wall .wl-chip-bad {
    background: #FDE9E6;
    color: #B8402F;
}

.ha-v-wall .wl-chip-glass {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.35);
}

.ha-v-wall .wl-chk {
    font-size: 5.6cqw;
    flex: none;
}

.ha-v-wall .wl-flip {
    right: 0;
    top: 10cqw;
}

/* fax */
.ha-v-wall .wl-fx-slot {
    position: absolute;
    left: 7cqw;
    right: 7cqw;
    top: 1.2cqw;
    height: 3.2cqw;
    border-radius: 2cqw;
    background: rgba(255, 255, 255, 0.34);
}

.ha-v-wall .wl-fx-page {
    position: absolute;
    left: 11cqw;
    width: 22cqw;
    top: 3cqw;
    height: 25cqw;
    border-radius: 1.4cqw;
    background:
        linear-gradient(#BFE6E1, #BFE6E1) 3.2cqw 4cqw / 12cqw 1.8cqw no-repeat,
        linear-gradient(#D7EFEC, #D7EFEC) 3.2cqw 8.4cqw / 15cqw 1.4cqw no-repeat,
        linear-gradient(#D7EFEC, #D7EFEC) 3.2cqw 11.6cqw / 13cqw 1.4cqw no-repeat,
        linear-gradient(#D7EFEC, #D7EFEC) 3.2cqw 14.8cqw / 15cqw 1.4cqw no-repeat,
        #fff;
    box-shadow: 0 1cqw 2.4cqw rgba(0, 40, 36, 0.25);
}

.ha-v-wall .wl-fx-ok {
    position: absolute;
    left: 27cqw;
    top: 17cqw;
    width: 10cqw;
    height: 10cqw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ha-coral);
    color: #fff;
    box-shadow: 0 0.8cqw 2cqw rgba(0, 40, 36, 0.25);
    opacity: 0;
}

/* sms */
.ha-v-wall .wl-bub {
    position: absolute;
    opacity: 0;
}

.ha-v-wall .wl-bub-out {
    right: 0;
    top: 1cqw;
    width: 31cqw;
    height: 12.5cqw;
    border-radius: 4.5cqw 4.5cqw 1.2cqw 4.5cqw;
    background:
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) 3.4cqw 3.4cqw / 22cqw 1.8cqw no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)) 3.4cqw 7.2cqw / 14cqw 1.8cqw no-repeat,
        var(--ha-ink);
    transform-origin: 100% 100%;
}

.ha-v-wall .wl-bub-in {
    left: 2cqw;
    top: 16.5cqw;
    min-width: 11cqw;
    height: 10.5cqw;
    padding: 0 3.6cqw;
    border-radius: 4.5cqw 4.5cqw 4.5cqw 1.2cqw;
    background: #E3F3F1;
    color: #0D514B;
    font: 700 6.2cqw/10.5cqw var(--ha-sans);
    text-align: center;
    transform-origin: 0 100%;
}

/* email */
.ha-v-wall .wl-mail {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 17cqw;
    border-radius: 2cqw;
    background:
        radial-gradient(circle at 5.2cqw 5.4cqw, rgba(242, 160, 154, 0.95) 2.2cqw, transparent 2.35cqw),
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) 10cqw 3.8cqw / 20cqw 1.8cqw no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) 10cqw 7.6cqw / 28cqw 1.5cqw no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) 10cqw 11cqw / 23cqw 1.5cqw no-repeat,
        rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.18);
    opacity: 0;
}

.ha-v-wall .wl-mail-chip {
    right: 0;
    top: 19.5cqw;
}

/* billing and collections */
.ha-v-wall .wl-num {
    position: absolute;
    right: 0;
    top: -1cqw;
    font: 400 15cqw/1 var(--ha-serif);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    text-align: right;
    opacity: 0;
}

.ha-v-wall .wl-lab {
    position: absolute;
    right: 0;
    top: 15.4cqw;
    font: 600 5.6cqw/1 var(--ha-sans);
    letter-spacing: -0.01em;
    white-space: nowrap;
    opacity: 0.9;
}

.ha-v-wall .wl-track {
    position: absolute;
    right: 0;
    top: 24.6cqw;
    width: 34cqw;
    height: 2.2cqw;
    border-radius: 2cqw;
    background: rgba(27, 137, 128, 0.14);
    overflow: hidden;
}

.ha-v-wall .wl-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ha-ink), #4CB5AE);
    transform-origin: 0 50%;
}

.ha-v-wall .wl-m-collections .wl-lab {
    opacity: 0;
}

.ha-v-wall .wl-coin {
    position: absolute;
    right: 0;
    top: 21.6cqw;
    width: 8.6cqw;
    height: 8.6cqw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--ha-ink-dark);
    opacity: 0;
}

.ha-v-wall .wl-coin .wl-chk {
    font-size: 5cqw;
}

/* adjudication */
.ha-v-wall .wl-steps {
    position: absolute;
    right: 1cqw;
    top: 3.2cqw;
    width: 38cqw;
    height: 4.4cqw;
}

.ha-v-wall .wl-steps::before {
    content: "";
    position: absolute;
    left: 2cqw;
    right: 2cqw;
    top: 1.6cqw;
    height: 1.2cqw;
    border-radius: 1cqw;
    background: rgba(255, 255, 255, 0.22);
}

.ha-v-wall .wl-steps-fill {
    position: absolute;
    left: 2cqw;
    right: 2cqw;
    top: 1.6cqw;
    height: 1.2cqw;
    border-radius: 1cqw;
    background: #fff;
    transform-origin: 0 50%;
}

.ha-v-wall .wl-step {
    position: absolute;
    top: 0;
    width: 4.4cqw;
    height: 4.4cqw;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1cqw rgba(255, 255, 255, 0.18);
    z-index: 1;
}

.ha-v-wall .wl-step0 { left: 0; }
.ha-v-wall .wl-step1 { left: 16.8cqw; }
.ha-v-wall .wl-step2 { right: 0; }

.ha-v-wall .wl-adj-chip {
    right: 0;
    top: 13cqw;
}

/* era routing */
.ha-v-wall .wl-route {
    stroke: var(--ha-ink);
    stroke-width: 2;
}

.ha-v-wall .wl-route-ends {
    fill: var(--ha-coral);
    stroke: none;
}

/* voip */
.ha-v-wall .wl-ph {
    position: absolute;
    left: 3cqw;
    top: 3cqw;
    width: 15cqw;
    height: 15cqw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--ha-ink-dark);
    opacity: 0;
}

.ha-v-wall .wl-ph-ic {
    position: relative;
    font-size: 7.4cqw;
}

.ha-v-wall .wl-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 0.6cqw solid rgba(255, 255, 255, 0.9);
    opacity: 0;
}

.ha-v-wall .wl-ph-chip {
    left: 3cqw;
    top: 21cqw;
}

/* apps */
.ha-v-wall .wl-phone {
    position: absolute;
    left: 7cqw;
    top: 0;
    width: 13cqw;
    height: 22cqw;
    border-radius: 3cqw;
    background:
        linear-gradient(#C9EBE7, #C9EBE7) 2.2cqw 4.6cqw / 8.6cqw 3.4cqw no-repeat,
        linear-gradient(#E3F4F2, #E3F4F2) 2.2cqw 9.6cqw / 8.6cqw 1.6cqw no-repeat,
        linear-gradient(#E3F4F2, #E3F4F2) 2.2cqw 12.6cqw / 6cqw 1.6cqw no-repeat,
        #fff;
    box-shadow: inset 0 0 0 0.7cqw var(--ha-ink), 0 1cqw 2.4cqw rgba(6, 52, 50, 0.16);
    opacity: 0;
}

.ha-v-wall .wl-phone::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 1.6cqw;
    width: 4cqw;
    height: 1.2cqw;
    margin-left: -2cqw;
    border-radius: 1cqw;
    background: var(--ha-ink);
}

.ha-v-wall .wl-phone2 {
    left: 25cqw;
    border-radius: 2.2cqw;
}

.ha-v-wall .wl-phone2::after {
    width: 1.6cqw;
    height: 1.6cqw;
    margin-left: -0.8cqw;
    border-radius: 50%;
}

.ha-v-wall .wl-plab {
    position: absolute;
    top: 23.6cqw;
    width: 18cqw;
    font: 600 5.6cqw/1 var(--ha-sans);
    text-align: center;
    opacity: 0;
}

.ha-v-wall .wl-plab1 { left: 4.5cqw; }
.ha-v-wall .wl-plab2 { left: 22.5cqw; }

/* pdmp */
.ha-v-wall .wl-report-rows {
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 3;
}

.ha-v-wall .wl-report-checks {
    stroke: var(--ha-coral);
    stroke-width: 2.4;
}

/* epcs */
.ha-v-wall .wl-sig {
    stroke: var(--ha-ink-dark);
    stroke-width: 1.7;
}

.ha-v-wall .wl-sig .wl-sig-base {
    stroke: rgba(27, 137, 128, 0.3);
    stroke-width: 1;
}

.ha-v-wall .wl-sig-chip {
    right: 0;
    top: -0.5cqw;
}

/* ------------------------------------------------------------------ outro and footnote */
.ha-v-wall .wl-scrim {
    position: absolute;
    inset: -8cqw;
    background: radial-gradient(ellipse 70% 54% at 50% 46%, rgba(7, 40, 44, 0.88) 0%, rgba(7, 40, 44, 0.66) 46%, rgba(7, 40, 44, 0.22) 80%, rgba(7, 40, 44, 0) 100%);
    opacity: 0;
}

.ha-v-wall .wl-outro {
    position: absolute;
    left: 0;
    right: 0;
    top: 26cqw;
    color: #fff;
    text-align: center;
    font: 400 12.5cqw/1.02 var(--ha-serif);
    letter-spacing: -0.01em;
    text-shadow: 0 0.6cqw 3cqw rgba(0, 30, 30, 0.35);
}

.ha-v-wall .wl-o2 {
    position: relative;
    display: inline-block;
}

.ha-v-wall .wl-w {
    display: inline-block;
    opacity: 0;
}

.ha-v-wall .wl-ul {
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -2.6cqw;
    width: 104%;
    height: 3.4cqw;
    fill: var(--ha-red);
}

.ha-v-wall .wl-foot {
    position: absolute;
    left: 3cqw;
    bottom: 2cqw;
    max-width: 71cqw;
    padding: 0.9cqw 2cqw 1cqw;
    border-radius: 2cqw;
    background: rgba(10, 42, 48, 0.72);
    color: rgba(255, 255, 255, 0.96);
    font: 500 2.85cqw/1.28 var(--ha-sans);
    opacity: 0;
}