/* The signed-out homepage (Views/Shared/_Landing.cshtml). Colors and fonts are brand.css's. */
.landing h1,
.landing h2,
.landing h3 {
    margin: 0;
    text-wrap: balance;
}
.landing p {
    margin: 0;
}
.landing section {
    padding: 72px 0;
}
.landing .lp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.landing .lp-actions form {
    margin: 0;
}
.landing .lp-actions .btn {
    padding: 11px 22px;
    font-size: 16px;
    font-weight: 500;
}

/* Hero: two iPhone screens beside the pitch */
.lp-hero {
    background-color: var(--fm-ink);
    color: var(--fm-on-ink);
    overflow: hidden;
}
.lp-hero .container {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
    padding-top: 56px;
}
.lp-hero .container::before,
.lp-hero .container::after,
.lp-why::before,
.lp-why::after,
.lp-more::before,
.lp-more::after {
    display: none;
}
.lp-copy {
    padding-bottom: 56px;
    min-width: 0;
}
.lp-eyebrow {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ff8e8c;
    font-weight: 700;
}
.landing .lp-hero h1 {
    font: 700 64px/1.02 var(--fm-display);
    margin-top: 14px;
    letter-spacing: -.01em;
}
.lp-hero h1 em {
    font-style: normal;
    color: var(--fm-red);
}
.landing .lp-lede {
    font-size: 19px;
    color: var(--fm-on-ink-muted);
    margin-top: 18px;
    max-width: 34em;
}
.landing .lp-signin {
    margin-top: 14px;
    font-size: 14px;
    color: var(--fm-on-ink-muted);
}
.lp-signin a {
    color: var(--fm-on-ink);
    text-decoration: underline;
}
.lp-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
}
.lp-stores img {
    height: 46px;
    display: block;
}
.lp-soon {
    height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #5a5250;
    border-radius: 8px;
    color: var(--fm-on-ink);
    font-size: 13px;
    line-height: 1.15;
}
.lp-soon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.lp-soon b {
    display: block;
    font-size: 16px;
}

.lp-phones {
    position: relative;
    height: 520px;
    align-self: end;
}
.lp-phone {
    position: absolute;
    width: 250px;
    border-radius: 40px;
    background: #0b0a0a;
    padding: 9px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 1.5px #4a4442;
}
.lp-phone img {
    display: block;
    width: 100%;
    border-radius: 32px;
}
.lp-phone.front {
    left: 8%;
    top: 20px;
    z-index: 2;
}
.lp-phone.back {
    left: 46%;
    top: 70px;
    transform: rotate(5deg);
}

/* The promise strip */
.lp-promise {
    background-color: var(--fm-surface);
    border-bottom: 1px solid var(--fm-line);
}
/* One row on a wide screen; below that, two columns (the three short ones, then the two longer)
   and on a phone one, each a check in a red circle, the list centered and its lines aligned */
.lp-promise ul {
    list-style: none;
    margin: 0 auto;
    padding: 18px 15px;
    display: flex;
    justify-content: center;
    gap: 28px;
    font-weight: 500;
    font-size: 15px;
}
.lp-promise ul::before,
.lp-promise ul::after {
    display: none; /* .container's clearfix: it would take a place in the row or grid */
}
.lp-promise li {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.lp-promise li::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fm-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.7 2.7L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
@media (max-width: 991px) {
    .lp-promise ul {
        display: grid;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        justify-content: center;
        gap: 12px 56px;
        padding: 22px 15px;
    }
}
@media (max-width: 600px) {
    .lp-promise ul {
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 12px;
    }
    .lp-promise li {
        white-space: normal;
    }
}

.lp-head {
    max-width: 640px;
}
.landing .lp-head h2 {
    font: 700 34px/1.15 var(--fm-display);
}
.landing .lp-head p {
    color: var(--fm-muted);
    margin-top: 10px;
    font-size: 17px;
}

/* Feedmesh itself: feed rows, as the signed-in page draws them */
.lp-browser {
    margin-top: 32px;
    background-color: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(35, 32, 31, .10);
}
/* Chrome on Windows: the tab strip with the window's buttons, then the toolbar */
.lp-browser-tabs {
    display: flex;
    align-items: flex-end;
    height: 42px;
    padding: 0 0 0 8px;
    background-color: #dfe1e5;
}
.lp-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 230px;
    min-width: 0;
    height: 34px;
    padding: 0 10px 0 12px;
    background-color: var(--fm-surface);
    border-radius: 9px 9px 0 0;
    font-size: 12px;
    color: #202124;
}
.lp-tab img {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}
.lp-x {
    margin-left: auto;
}
.lp-x,
.lp-newtab,
.lp-winbtns i {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
}
.lp-x::before,
.lp-x::after,
.lp-newtab::before,
.lp-newtab::after,
.lp-winbtns .lp-close::before,
.lp-winbtns .lp-close::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: 50%;
    height: 1.4px;
    margin-top: -.7px;
    background-color: #5f6368;
}
.lp-x::before,
.lp-winbtns .lp-close::before {
    transform: rotate(45deg);
}
.lp-x::after,
.lp-winbtns .lp-close::after {
    transform: rotate(-45deg);
}
.lp-newtab {
    align-self: center;
    margin: 4px 0 0 10px;
}
.lp-newtab::after {
    transform: rotate(90deg);
}
.lp-winbtns {
    display: flex;
    align-self: stretch;
    margin-left: auto;
}
.lp-winbtns i {
    width: 46px;
    height: auto;
}
.lp-winbtns .min::before,
.lp-winbtns .max::before {
    content: "";
    position: absolute;
    left: 18px;
    width: 10px;
    top: 50%;
}
/* The three marks are a light grey, as a window that isn't the active one */
.lp-winbtns .min::before {
    height: 1px;
    background-color: #b9bbbf;
}
.lp-winbtns .max::before {
    height: 10px;
    margin-top: -5px;
    border: 1px solid #b9bbbf;
}
.lp-winbtns .lp-close::before,
.lp-winbtns .lp-close::after {
    left: 17px;
    right: 17px;
    height: 2px;
    margin-top: -1px;
    background-color: #b9bbbf;
}
.lp-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background-color: var(--fm-surface);
    border-bottom: 1px solid var(--fm-line);
}
.lp-browser-bar svg {
    flex: none;
    width: 30px;
    height: 30px;
    padding: 6px;
    fill: none;
    stroke: #5f6368;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-browser-bar svg circle {
    fill: #5f6368;
    stroke: none;
}
.lp-browser-bar .lp-fwd {
    stroke: #bdc1c6;
}
.lp-omnibox {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 34px;
    margin: 0 4px;
    padding: 0 4px 0 6px;
    border-radius: 17px;
    background-color: #f1f3f4;
    font-size: 14px;
    color: #202124;
}
.lp-omnibox b {
    flex: 1;
    min-width: 0;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-browser-bar .lp-omnibox svg {
    width: 30px;
    height: 30px;
    padding: 8px;
    stroke-width: 2.2;
}
@media (max-width: 600px) {
    .lp-tab {
        width: 150px;
    }
    .lp-browser-bar .lp-fwd,
    .lp-browser-bar .lp-star {
        display: none;
    }
    .lp-winbtns i {
        width: 36px;
    }
    .lp-winbtns .min::before,
    .lp-winbtns .max::before {
        left: 13px;
    }
    .lp-winbtns .lp-close::before,
    .lp-winbtns .lp-close::after {
        left: 12px;
        right: 12px;
    }
}
.lp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 16px 6px;
}
.lp-pills span {
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 4px;
    color: var(--fm-muted);
}
.lp-pills .on {
    background-color: var(--fm-red);
    color: #fff;
}
.lp-feed {
    padding: 8px 16px 16px;
}
.lp-feedtitle {
    display: flex;
    justify-content: space-between;
    background-color: var(--fm-ink-2);
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    padding: 7px 12px;
    border-radius: 3px;
}
.lp-feedtitle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-feedtitle small {
    flex: none;
    margin-left: 12px;
    color: #c9c1bf;
    font-weight: 400;
    font-size: 13px;
}
/* The app's cards: 140 x 180, the picture filling the card, in a row that runs off the edge */
.lp-cards {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow: hidden;
}
.lp-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 154px;
    aspect-ratio: 140 / 180;
    background-color: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: 3px;
    overflow: hidden;
}
a.lp-card,
a.lp-card:hover,
a.lp-card:focus {
    display: flex;
    color: inherit;
    text-decoration: none;
}
a.lp-card:hover .pic b {
    text-decoration: underline;
}
.lp-card .pic,
.lp-card .src,
.lp-card .when {
    display: block;
}
.lp-card .pic {
    position: relative;
    flex: 1;
    background: #4f4f4f center / cover no-repeat;
}
/* As the signed-in page's cards (Site.css .feeditem): the headline on a see-through dark band of
   the same height on every card, then the site's name and the time */
.lp-card .pic b {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.25;
    background-color: rgba(0, 0, 0, .65);
}
.lp-card .src {
    padding: 4px 6px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--fm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-card .when {
    font-size: 12px;
    color: #4d4d4d;
    padding: 0 6px 4px;
}

/* Why */
.lp-why {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin-top: 40px;
}
.lp-why > div {
    min-width: 0;
    border-top: 3px solid var(--fm-red);
    padding-top: 14px;
}
.landing .lp-why h3 {
    font-size: 18px;
    font-weight: 700;
}
.landing .lp-why p {
    color: var(--fm-muted);
    margin-top: 6px;
    font-size: 15px;
}

/* Features with screens */
.landing .lp-alt {
    background-color: var(--fm-surface);
    border-top: 1px solid var(--fm-line);
    border-bottom: 1px solid var(--fm-line);
}
.lp-feature {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 56px;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}
.lp-feature + .lp-feature {
    margin-top: 72px;
}
.lp-feature.flip {
    grid-template-columns: 260px 1fr;
}
.lp-feature.flip .lp-shot {
    order: -1;
}
.lp-feature > div {
    min-width: 0;
}
.landing .lp-feature h3 {
    font: 700 30px/1.15 var(--fm-display);
}
.landing .lp-feature p {
    color: var(--fm-muted);
    margin-top: 12px;
    font-size: 17px;
    max-width: 30em;
}
.lp-feature ul {
    margin: 14px 0 0;
    padding-left: 20px;
    color: var(--fm-muted);
    font-size: 16px;
}
.lp-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fm-red);
    margin-bottom: 8px;
}
.lp-shot {
    justify-self: center;
    width: 260px;
    max-width: 100%;
}
.lp-shot .lp-phone {
    position: static;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25), inset 0 0 0 1.5px #4a4442;
}

/* The little things */
.lp-more {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}
.lp-more > div {
    background-color: var(--fm-surface);
    border: 1px solid var(--fm-line);
    border-radius: 8px;
    padding: 20px;
    min-width: 0;
}
.landing .lp-more h3 {
    font-size: 17px;
    font-weight: 700;
    display: flex;
    gap: 10px;
    align-items: center;
}
.lp-more svg {
    width: 22px;
    height: 22px;
    flex: none;
    stroke: var(--fm-red);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.landing .lp-more p {
    color: var(--fm-muted);
    margin-top: 8px;
    font-size: 15px;
}

/* Closing band */
.landing .lp-closing {
    background-color: var(--fm-ink-2);
    color: var(--fm-on-ink);
    text-align: center;
}
.landing .lp-closing h2 {
    font: 700 36px/1.15 var(--fm-display);
}
.landing .lp-closing p {
    color: var(--fm-on-ink-muted);
    margin-top: 10px;
    font-size: 17px;
}
.lp-closing .lp-actions {
    justify-content: center;
}

@media (max-width: 991px) {
    .lp-hero .container {
        grid-template-columns: 1fr;
        padding-top: 40px;
    }
    .lp-copy {
        padding-bottom: 0;
    }
    .lp-phones {
        height: 400px;
    }
    .lp-phone {
        width: 200px;
    }
    .lp-phone.front {
        left: calc(50% - 190px);
    }
    .lp-phone.back {
        left: calc(50% - 10px);
    }
    .lp-why {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lp-more {
        grid-template-columns: 1fr 1fr;
    }
    .lp-feature,
    .lp-feature.flip {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .lp-feature.flip .lp-shot {
        order: 0;
    }
}
@media (max-width: 600px) {
    .landing .lp-hero h1 {
        font-size: 44px;
    }
    .landing section {
        padding: 52px 0;
    }
    .lp-why,
    .lp-more {
        grid-template-columns: 1fr;
    }
    .lp-phones {
        height: 330px;
    }
    .lp-phone {
        width: 160px;
        border-radius: 28px;
        padding: 6px;
    }
    .lp-phone img {
        border-radius: 23px;
    }
    .lp-phone.front {
        left: calc(50% - 150px);
    }
    .lp-phone.back {
        left: calc(50% - 10px);
        top: 50px;
    }
}


/* The Apps page (Views/Home/Apps.cshtml) */
.apps-lede {
    font-size: 18px;
    color: var(--fm-muted);
    margin: 0 0 30px;
}
.apps-platform {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
    padding: 30px 0;
    border-top: 1px solid var(--fm-line);
}
.apps-copy h2 {
    font: 700 28px/1.15 var(--fm-display);
    margin: 0 0 8px;
}
.apps-copy p {
    font-size: 16px;
    color: var(--fm-muted);
}
.apps-copy ul {
    margin: 12px 0 20px;
    padding-left: 20px;
    font-size: 16px;
}
.apps-copy li + li {
    margin-top: 4px;
}
.apps-badge {
    height: 46px;
}
.apps-shots {
    display: flex;
    gap: 18px;
}
.apps-shots .lp-phone {
    position: static;
    width: 200px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .2), inset 0 0 0 1.5px #4a4442;
}
@media (max-width: 767px) {
    .apps-platform {
        grid-template-columns: 1fr;
    }
    .apps-shots .lp-phone {
        width: calc(50% - 9px);
        padding: 6px;
        border-radius: 26px;
    }
    .apps-shots .lp-phone img {
        border-radius: 20px;
    }
}

/* Long headlines: three lines, so the picture still shows. The space above and below is
   transparent border, not padding (the band's color shows through it): overflow is clipped at
   the padding edge, so a fourth line would show through bottom padding. */
.lp-card .pic b {
    height: calc(3.75em + 11px);
    padding: 0 6px;
    border-top: 5px solid transparent;
    border-bottom: 6px solid transparent;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* An Android phone drawn as a Pixel 10: thin even bezels, an aluminum rim, a centered punch-hole
   camera and the power and volume buttons on the right. The bezel is in pixels, about 3% of the
   phone's width, set for each size below (a padding percentage would be of the box around the
   phone, not the phone: the hero's came out thick). Corners are width / height percentages of the
   phone itself (it's twice as tall as wide) so they stay round. */
.lp-phone.android {
    padding: 8px;
    border-radius: 14% / 7%;
    background: #050505;
    box-shadow: 0 0 0 1.5px #55555a, 0 0 0 3px #1c1c1e, 0 24px 48px rgba(0, 0, 0, .3);
}
.lp-phones .lp-phone.android {
    box-shadow: 0 0 0 1.5px #5d5d62, 0 0 0 3px #1c1c1e, 0 30px 60px rgba(0, 0, 0, .5);
}
.lp-phone.android img {
    border-radius: 11.5% / 5.75%;
}
.lp-shot .lp-phone.android,
.apps-shots .lp-phone.android {
    position: relative;
}
.lp-phone.android::before {
    content: "";
    position: absolute;
    top: 2.5%;
    left: 50%;
    width: 3.6%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2d3b55 0, #0a0c10 45%, #000 70%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.lp-phone.android::after {
    content: "";
    position: absolute;
    top: 20%;
    right: -3.2%;
    width: 1.8%;
    min-width: 2px;
    height: 23%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(to bottom, #3c3c40 0, #3c3c40 24%, transparent 24%, transparent 36%, #3c3c40 36%, #3c3c40 100%);
}
.apps-shots .lp-phone.android {
    padding: 6px;
}
@media (max-width: 991px) {
    .lp-phones .lp-phone.android {
        padding: 6px;
    }
}
@media (max-width: 600px) {
    .lp-phones .lp-phone.android {
        padding: 5px;
    }
}
@media (max-width: 767px) {
    .apps-shots .lp-phone.android {
        padding: 5px;
    }
}

/* Motion (Scripts/landing.js sets --p, 0 to 1, as the page scrolls). Without the script, or with
   "reduce motion", each part shows its finished, still state. */

/* Hero: the back phone starts upright, partly behind the front one, and slides out tilting a
   little to the right (hover does it too) */
.lp-phones {
    --pp: max(var(--p, 1), var(--h, 0));
}
.lp-phones:hover {
    --h: 1;
}
.lp-phones .lp-phone.back {
    transform: translateX(calc((1 - var(--pp)) * -28%)) translateY(calc((1 - var(--pp)) * 10px)) rotate(calc(var(--pp) * 5deg)) scale(calc(.93 + var(--pp) * .07));
    filter: brightness(calc(.6 + var(--pp) * .4));
}
.lp-motion .lp-phones .lp-phone.back {
    transition: transform .35s ease-out, filter .35s ease-out;
}

/* A phone screen with moving parts over its screenshot */
.lp-phone .lp-screen {
    position: relative;
    overflow: hidden;
    border-radius: 11.5% / 5.75%;
}
.lp-phone.android .lp-screen img {
    border-radius: 0;
}
.lp-win {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
}
/* Search: the results list, below the search box (from 410 of the screen's 2160 pixels, 1700 tall) */
.lp-search-win {
    top: 18.981%;
    height: 78.704%;
}
.lp-phone .lp-search-win .lp-search-list {
    transform: translateY(calc(var(--p, 0) * -67.906%));
}
/* Add Feeds: the topic tiles (from 525, 275 tall); the strip is 4.825 screens wide */
.lp-topics-win {
    top: 24.306%;
    height: 12.731%;
}
.lp-phone .lp-topics-win .lp-topics-strip {
    width: 482.5%;
    max-width: none;
    transform: translateX(calc(var(--p, 0) * -79.275%));
}

/* Reading: Dark and Blackout over Light, each from a slanted edge (red, like the split picture) */
.lp-layer {
    position: absolute;
    inset: 0;
    filter: drop-shadow(-3px 0 0 var(--fm-red));
}
.lp-layer img {
    height: 100%;
    clip-path: polygon(calc(var(--x) + 10%) 0, 110% 0, 110% 100%, calc(var(--x) - 10%) 100%);
}
.lp-layer-dark {
    --x: var(--x1, 33%);
}
.lp-layer-blackout {
    --x: var(--x2, 67%);
}
.lp-themes.lp-picked .lp-layer img {
    transition: clip-path .6s ease-in-out;
}
.lp-theme-pick {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}
.lp-theme-pick button {
    border: 1px solid var(--fm-line);
    background-color: var(--fm-surface);
    color: var(--fm-text);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.lp-theme-pick button[aria-pressed="true"] {
    background-color: var(--fm-red);
    border-color: var(--fm-red);
    color: #fff;
}
.lp-theme-pick button:focus-visible {
    outline: 2px solid var(--fm-red);
    outline-offset: 2px;
}

/* The front phone sets the pair's height, with room below it at every size (the back one may run
   off the bottom, behind it) */
.lp-phones {
    height: auto;
    padding-bottom: 36px;
}
.lp-phones .lp-phone.front {
    position: relative;
    top: 0;
    margin-top: 20px;
}
@media (max-width: 600px) {
    .lp-phones {
        padding-bottom: 28px;
    }
}

/* Where the pair is centered under the copy, it stays centered while the back phone comes out:
   the front one moves left and the back one right, half the way each */
@media (max-width: 991px) {
    .lp-phones .lp-phone.front {
        transform: translateX(calc((1 - var(--pp)) * 14%));
    }
    .lp-phones .lp-phone.back {
        transform: translateX(calc((1 - var(--pp)) * -14%)) translateY(calc((1 - var(--pp)) * 10px)) rotate(calc(var(--pp) * 5deg)) scale(calc(.93 + var(--pp) * .07));
    }
    .lp-motion .lp-phones .lp-phone.front {
        transition: transform .35s ease-out;
    }
}