/* ==========================================================
   New in Voila 7.0: Voila AI, Portal, Safari and the plans.
   The section is wrapped in an SSI #if in index.html and
   fr/index.html, so the server only sends it from the
   release time on. Opened locally, the comments are inert
   and the section always shows.
   ========================================================== */

.v7 {
    --v7-grad: linear-gradient(80deg, #89f0f5, #95c3f7, #f2cbea);
    --v7-grad-soft: linear-gradient(80deg, rgba(137, 240, 245, 0.18), rgba(149, 195, 247, 0.18), rgba(242, 203, 234, 0.18));
    --v7-ink: #4c5462;
    --v7-muted: #8a93a3;
    --v7-line: rgba(149, 195, 247, 0.35);
    --v7-shadow: rgba(79, 108, 176, 0.35);

    /* The KingComposer rows around it are floated: without this the
       section's box (and its white background) would ride up over them. */
    float: left;
    clear: both;
    width: 100%;
    position: relative;
    padding: 120px 0;
    background: #ffffff;
    color: var(--v7-ink);
}

.v7 .section-heading {
    max-width: 760px;
    margin: 0 auto;
}

.v7 .section-heading h2:after {
    background: transparent url(../img/2018/05/divider3_small.png) 0% 0%/auto repeat scroll;
}

.v7__badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--v7-grad);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---------- Teasers (Portal, Safari) ---------- */

.v7__teasers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 56px 0 0;
    text-align: left;
}

.v7__teaser {
    margin: 0;
}

.v7__player {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: #05040f;
    box-shadow: 0 34px 70px -30px rgba(40, 30, 110, 0.6), 0 0 0 1px rgba(149, 195, 247, 0.25);
    isolation: isolate;
}

.v7__player img,
.v7__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.v7__player img {
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.4s ease;
}

.v7__player:hover img,
.v7__player:focus-visible img {
    transform: scale(1.03);
    filter: brightness(1.08);
}

.v7__player:focus-visible {
    outline: 3px solid #95c3f7;
    outline-offset: 3px;
}

.v7__play {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px 7px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.5);
    color: var(--v7-ink);
    font-size: 14px;
    font-weight: 700;
    transform: translateX(-50%);
}

.v7__play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--v7-grad);
}

.v7__play-icon svg {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    fill: #ffffff;
}

.v7__player.is-playing .v7__play {
    display: none;
}

.v7__teaser figcaption {
    margin-top: 22px;
    padding: 0 4px;
}

.v7__teaser figcaption h3 {
    margin: 0 0 8px;
    color: var(--v7-ink);
    font-size: 24px;
    font-weight: 700;
}

.v7__teaser figcaption p:last-child {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- Voila AI: banner, intro, then what it does ---------- */

.v7__ai-block {
    margin-top: 96px;
}

.v7__banner {
    border-radius: 24px;
    overflow: hidden;
    background: #0b0b10;
    box-shadow: 0 40px 80px -36px rgba(20, 20, 40, 0.65), 0 0 0 1px rgba(149, 195, 247, 0.25);
}

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

.v7__ai-intro {
    max-width: 680px;
    margin: 44px auto 0;
    text-align: center;
}

.v7__ai-intro h3 {
    margin: 0 0 14px;
    color: var(--v7-ink);
    font-size: 30px;
    font-weight: 700;
}

.v7__ai-intro p {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.6;
}

.v7__kicker {
    margin: 0 0 6px;
    color: var(--v7-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.v7__ai-intro .v7__kicker {
    margin-bottom: 8px;
}

.v7__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.v7__tags li {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--v7-grad-soft);
    box-shadow: inset 0 0 0 1px var(--v7-line);
    font-size: 12px;
    font-weight: 600;
}

.v7__ai {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.v7__ai li {
    padding: 24px 22px;
    border-radius: 18px;
    background: var(--v7-grad-soft);
    box-shadow: inset 0 0 0 1px var(--v7-line);
}

/* the Voila app each feature lives in: icon + name */
.v7__app {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.v7__app img {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 11px;
}

.v7__app span {
    color: var(--v7-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.v7__ai h4 {
    margin: 0 0 8px;
    color: var(--v7-ink);
    font-size: 16px;
    font-weight: 700;
}

.v7__ai p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- Three ways to Voila ---------- */

.v7__plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.v7__plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 50px -32px var(--v7-shadow), 0 0 0 1px var(--v7-line);
}

/* Pro: the app's Pro paywall look (PaywallComponents.swift) — a near-black
   wash of Constant.Color.proArray, a rotating iridescent border, the title
   in the pink → lilac → cyan gradient and iridescent check marks. */
@property --v7-spin {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.v7__plan.v7__plan--pro {
    --pro-pink: #ffb8f8;
    --pro-lilac: #c9b8ff;
    --pro-cyan: #80f4ff;
    --pro-mint: #b8ffe6;
    --pro-blue: #94bdf5;
    --pro-iridescent: linear-gradient(135deg, var(--pro-pink), var(--pro-lilac), var(--pro-cyan));

    color: rgba(255, 255, 255, 0.86);
    border: 2px solid transparent;
    background:
        radial-gradient(120% 80% at 0% 0%, #080a1c 0%, rgba(8, 10, 28, 0) 60%) padding-box,
        radial-gradient(110% 90% at 100% 15%, #16061e 0%, rgba(22, 6, 30, 0) 60%) padding-box,
        radial-gradient(120% 90% at 30% 100%, #0c0614 0%, rgba(12, 6, 20, 0) 65%) padding-box,
        linear-gradient(#04050c, #04050c) padding-box,
        conic-gradient(from var(--v7-spin), var(--pro-pink), var(--pro-lilac), var(--pro-cyan), var(--pro-mint),
            #ffffff, var(--pro-pink), var(--pro-blue), var(--pro-cyan), var(--pro-pink)) border-box;
    box-shadow: 0 34px 70px -28px rgba(22, 6, 50, 0.7);
    animation: v7-spin 4s linear infinite;
}

@keyframes v7-spin {
    to { --v7-spin: 360deg; }
}

.v7__plan.v7__plan--pro h4 {
    background: var(--pro-iridescent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.v7__plan.v7__plan--pro .v7__plan-for,
.v7__plan.v7__plan--pro .v7__price {
    color: rgba(255, 255, 255, 0.72);
}

.v7__plan.v7__plan--pro .v7__price strong,
.v7__plan.v7__plan--pro .v7__billing,
.v7__plan.v7__plan--pro .v7__vip-price b {
    color: #ffffff;
}

.v7__plan.v7__plan--pro .v7__checks li {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.v7__plan.v7__plan--pro .v7__checks li:before {
    background: var(--pro-iridescent);
    color: #04050c;
}

.v7__plan.v7__plan--pro .v7__was {
    color: rgba(255, 255, 255, 0.5);
}

/* the app's darker pastel savings pill, so white text stays readable */
.v7__plan.v7__plan--pro .v7__off {
    background: linear-gradient(90deg, #1f526b, #2e4275, #572966, #612e4d);
}

.v7__plan.v7__plan--pro .v7__vip-price {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.v7__plan.v7__plan--pro .v7__plan-head img {
    box-shadow: 0 8px 18px -6px rgba(201, 184, 255, 0.35);
}

.v7__plan-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.v7__plan-head img {
    width: 56px;
    height: 56px;
    border-radius: 13px;
    box-shadow: 0 8px 18px -8px rgba(60, 80, 140, 0.45);
}

.v7__plan h4 {
    margin: 0;
    color: var(--v7-ink);
    font-size: 22px;
    font-weight: 700;
}

.v7__plan-for {
    margin: 2px 0 0;
    color: var(--v7-muted);
    font-size: 13px;
}

.v7__checks {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.v7__checks li {
    position: relative;
    padding: 7px 0 7px 28px;
    border-bottom: 1px solid rgba(149, 195, 247, 0.22);
    font-size: 14px;
}

.v7__checks li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--v7-grad);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.v7__checks li.is-off {
    color: #b3bac6;
}

.v7__checks li.is-off:before {
    content: "–";
    background: #e7ebf2;
    color: #9aa3b2;
}

.v7__price {
    margin: 0 0 2px;
    color: var(--v7-muted);
    font-size: 15px;
}

.v7__price strong {
    color: var(--v7-ink);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.v7__billing {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.v7__vip-price {
    margin: 14px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--v7-grad-soft);
    box-shadow: inset 0 0 0 1px var(--v7-line);
    font-size: 13px;
}

.v7__note {
    margin: 32px auto 0;
    max-width: 680px;
    color: var(--v7-muted);
    font-size: 14px;
    text-align: center;
}

/* ---------- Weekly / yearly switch (Basic & Pro) ---------- */

.v7__switch-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 36px;
}

/* centred over the plans (it drives Basic and Pro) */
.v7__switch {
    position: relative;
    grid-column: 1 / -1;
    justify-self: center;
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 24px -16px var(--v7-shadow), 0 0 0 1px var(--v7-line);
}

/* the sliding thumb; v7.js sets its position and adds .is-ready */
.v7__switch:before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: var(--thumb-w, 0);
    border-radius: 999px;
    background: var(--v7-grad);
    box-shadow: 0 6px 14px -6px rgba(79, 108, 176, 0.55);
    transform: translateX(var(--thumb-x, 0));
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), width 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.v7__switch button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--v7-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.25s ease;
}

/* without the script, the selected button carries the gradient itself */
.v7__switch:not(.is-ready) button[aria-checked="true"] {
    background: var(--v7-grad);
}

.v7__switch button[aria-checked="true"] {
    color: #ffffff;
}

.v7__switch button:focus-visible {
    outline: 2px solid #95c3f7;
    outline-offset: 2px;
}

/* ---------- Discounts: original price crossed out, saving next to it ---------- */

.v7__was {
    margin-right: 4px;
    color: #a9b1bf;
    font-size: 15px;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.v7__off {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--v7-grad);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    vertical-align: 4px;
}

/* on the main price, the old price sits on its own line above the new one
   (display: table keeps it as wide as its text, so the strike draws to fit) */
.v7__price .v7__was {
    display: table;
    margin: 0 0 2px;
}

.v7__vip-price .v7__was {
    font-size: 13px;
}

.v7__vip-price b {
    color: var(--v7-ink);
}

.v7__vip-price .v7__off {
    vertical-align: 1px;
    font-size: 11px;
}

/* ---------- Switching period: prices slide in, savings pop ---------- */

.v7__plans [data-period] {
    animation: v7-price-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.v7__plans .v7__off {
    animation: v7-pop 0.45s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.v7__plans .v7__was {
    background: linear-gradient(currentColor, currentColor) 0 55% / 0 1.5px no-repeat;
    text-decoration: none;
    animation: v7-strike 0.35s 0.1s ease-out both;
}

@keyframes v7-price-in {
    from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes v7-pop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: none; }
}

/* the strike-through draws itself across the old price */
@keyframes v7-strike {
    from { background-size: 0 1.5px; }
    to { background-size: 100% 1.5px; }
}

.v7__plans [data-period] {
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .v7__plans [data-period],
    .v7__plans .v7__off,
    .v7__plans .v7__was,
    .v7__switch:before,
    .v7__plan.v7__plan--pro {
        animation: none;
        transition: none;
    }

    .v7__plans .v7__was {
        background-size: 100% 1.5px;
    }
}

.v7__switch-row + .v7__plans {
    margin-top: 20px;
}

.v7__plans[data-billing="yearly"] [data-period="weekly"],
.v7__plans[data-billing="weekly"] [data-period="yearly"] {
    display: none;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 991px) {
    .v7__plans {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .v7__ai {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v7__switch-row {
        display: flex;
        justify-content: center;
    }

    .v7__teasers {
        grid-template-columns: minmax(0, 1fr);
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    .v7 {
        padding: 80px 0;
    }

    .v7__ai-block {
        margin-top: 64px;
    }

    .v7__banner {
        border-radius: 16px;
    }

    .v7__ai {
        grid-template-columns: minmax(0, 1fr);
    }
}