/* The promo films' player (promo-film.js). It wears the case films' look
   (cases/film.css: .lf), so the site's films all feel like one family. */
.pf {
    --pf-cream: #FBFAF6;
    --pf-ink: #18211F;
    --pf-muted: #56605B;
    --pf-line: rgba(24, 33, 31, 0.12);
    --pf-brand: #234D6F;
    --pf-panel: #fff;
    display: block;
    font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.pf-box {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: var(--pf-cream);
    box-shadow: 0 0 0 1.5px var(--pf-line), 0 30px 60px -34px rgba(30, 42, 36, 0.4);
}

.pf-box:focus {
    outline: none;
}

/* The picture: wide, or upright on a phone (the upright cut plays there). */
.pf-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f1a26;
}

.pf--up .pf-box {
    width: min(100%, calc((100svh - 170px) * 9 / 16));
    margin: 0 auto;
}

.pf--up .pf-stage {
    aspect-ratio: 9 / 16;
}

.pf-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #0f1a26;
    cursor: pointer;
}

.pf-stage video::cue {
    font-family: Outfit, system-ui, sans-serif;
    font-size: 0.9em;
    background: rgba(15, 34, 54, 0.82);
}

/* Before it starts: the first picture, and a big play button on it. */
.pf-start {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 0 0 9%;
    border: 0;
    background: linear-gradient(to top, rgba(15, 26, 38, 0.38), transparent 46%);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.pf--started .pf-start {
    display: none;
}

.pf-start-ring {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #9D5145;
    box-shadow: 0 0 0 12px rgba(157, 81, 69, 0.22), 0 18px 40px -12px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}

.pf-start:hover .pf-start-ring,
.pf-start:focus-visible .pf-start-ring {
    transform: scale(1.06);
}

.pf-start:focus-visible {
    outline: 3px solid #93C5FD;
    outline-offset: -6px;
}

.pf-start-ring svg {
    width: 36px;
    height: 36px;
    margin-left: 5px;
}

.pf-start-label {
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(15, 34, 54, 0.72);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pf-start-label span {
    font-weight: 400;
    opacity: 0.8;
}

/* The way out to the real thing, while a step is on screen. */
.pf-try {
    position: absolute;
    top: 2.4%;
    right: 1.8%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--pf-brand);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 26px -10px rgba(15, 34, 54, 0.55), 0 0 0 1px rgba(24, 33, 31, 0.08);
    animation: pf-in 0.35s ease both;
}

.pf-try[hidden] {
    display: none;
}

.pf-try svg {
    width: 17px;
    height: 17px;
}

.pf-try:hover {
    background: var(--pf-brand);
    color: #fff;
}

.pf-try:focus-visible {
    outline: 3px solid #93C5FD;
    outline-offset: 2px;
}

@keyframes pf-in {
    from {
        opacity: 0;
        translate: 0 6px;
    }
}

/* The end: the film's own logo above, the two ways in below. */
.pf-end {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
    animation: pf-in 0.5s ease both;
}

.pf-end[hidden] {
    display: none;
}

.pf--up .pf-end {
    bottom: 11%;
    flex-direction: column;
}

.pf-cta {
    min-width: 170px;
    padding: 13px 24px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6);
}

.pf-cta--signup {
    background: #fff;
    color: var(--pf-brand);
}

.pf-cta--login {
    background: #3A6688;
    color: #fff;
}

.pf-cta:hover {
    filter: brightness(1.07);
}

.pf-cta:focus-visible,
.pf-again:focus-visible {
    outline: 3px solid #93C5FD;
    outline-offset: 2px;
}

.pf-again {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.85);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pf-again[hidden] {
    display: none;
}

.pf-again svg {
    width: 18px;
    height: 18px;
}

/* The controls: as the case films have them. */
.pf-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-top: 1.5px solid var(--pf-line);
    background: var(--pf-panel);
}

.pf-key {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--pf-ink);
    font: inherit;
    cursor: pointer;
}

.pf-key svg {
    width: 22px;
    height: 22px;
}

.pf-key:hover {
    background: rgba(24, 33, 31, 0.07);
}

.pf-key:focus-visible {
    outline: 3px solid var(--pf-brand);
    outline-offset: 2px;
}

.pf-key[hidden] {
    display: none;
}

.pf-cc {
    width: auto;
    height: 26px;
    margin: 0 7px;
    padding: 0 7px;
    border: 1.5px solid var(--pf-ink);
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.pf-cc[aria-pressed="true"],
.pf-cc[aria-pressed="true"]:hover {
    background: var(--pf-ink);
    color: #fff;
}

.pf-track {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 60px;
    height: 40px;
    margin: 0 8px 0 6px;
}

.pf-track input {
    width: 100%;
    height: 40px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.pf-track input:focus-visible {
    outline: 3px solid var(--pf-brand);
    outline-offset: -8px;
    border-radius: 12px;
}

.pf-track input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--pf-brand) var(--done, 0%), rgba(24, 33, 31, 0.14) var(--done, 0%));
}

.pf-track input::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(24, 33, 31, 0.14);
}

.pf-track input::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--pf-brand);
}

.pf-track input::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: var(--pf-brand);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -webkit-appearance: none;
}

.pf-track input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--pf-brand);
}

/* Where each step of the film begins. */
.pf-mark {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border: 2px solid var(--pf-brand);
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
}

.pf-time {
    flex: none;
    margin-right: 2px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--pf-muted);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .pf-mute {
        display: none;
    }
}

@media (max-width: 430px) {
    .pf-time {
        display: none;
    }
}

/* The film's steps, under it: each one jumps there. */
.pf-steps {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 8px;
    border-top: 1.5px solid var(--pf-line);
    background: var(--pf-panel);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.pf-steps li {
    flex: 1 1 0;
    min-width: max-content;
}

.pf-steps button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px 11px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: rgba(24, 33, 31, 0.04);
    color: var(--pf-ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.pf-steps b {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #b0843f;
}

.pf-steps i {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--pf-brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.pf-steps button:not(.is-on):not(.is-done) i {
    visibility: hidden;
}

.pf-steps button:hover {
    background: rgba(24, 33, 31, 0.08);
}

.pf-steps button.is-on {
    background: rgba(35, 77, 111, 0.1);
    color: var(--pf-brand);
}

.pf-steps button:focus-visible {
    outline: 3px solid var(--pf-brand);
    outline-offset: -3px;
}

/* Full screen: the picture fills it, the controls stay underneath. */
.pf-box:fullscreen {
    border-radius: 0;
    background: #000;
}

.pf-box:fullscreen .pf-stage {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
}

.pf-box:fullscreen video {
    object-fit: contain;
    background: #000;
}

/* Where the films sit on the pages. */
.about-film {
    margin: 0 0 clamp(56px, 8vw, 96px);
}

.about-film__note,
.cp-film__note {
    margin: 14px 0 0;
    font-size: 15px;
    color: var(--muted, #56605B);
}

.cp-film {
    padding-top: 0;
}

/* In a window over the page (from the sign-in). */
.pf-modal {
    position: fixed;
    inset: 0;
    z-index: 4100;
    display: grid;
    /* one column no wider than the screen, so the steps row scrolls inside it */
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 24px;
    background: rgba(12, 22, 32, 0.72);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pf-modal.is-open {
    opacity: 1;
}

.pf-modal-card {
    position: relative;
    width: min(1100px, 100%, calc((100svh - 190px) * 16 / 9));
    min-width: 0;
}

.pf-modal-card .pf--up .pf-box {
    width: min(100%, calc((100svh - 190px) * 9 / 16));
}

.pf-modal-close {
    position: absolute;
    top: -46px;
    right: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
}

.pf-modal-close svg {
    width: 20px;
    height: 20px;
}

.pf-modal-close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.pf-modal-close:focus-visible {
    outline: 3px solid #93C5FD;
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .pf-modal {
        padding: 56px 12px 16px;
    }

    .pf-modal-card {
        width: 100%;
    }
}

/* The dark page. */
html.dark .pf {
    --pf-line: #374151;
    --pf-ink: #F9FAFB;
    --pf-muted: #9CA3AF;
    --pf-panel: #1F2937;
    --pf-brand: #7FB3DD;
}

html.dark .pf-box {
    box-shadow: 0 0 0 1.5px var(--pf-line), 0 30px 60px -34px rgba(0, 0, 0, 0.7);
}

html.dark .pf-key:hover,
html.dark .pf-steps button:hover {
    background: rgba(255, 255, 255, 0.09);
}

html.dark .pf-steps button {
    background: rgba(255, 255, 255, 0.05);
}

html.dark .pf-steps button.is-on {
    background: rgba(127, 179, 221, 0.16);
}

html.dark .pf-cc[aria-pressed="true"],
html.dark .pf-cc[aria-pressed="true"]:hover {
    color: #111827;
}

html.dark .pf-track input::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--pf-brand) var(--done, 0%), rgba(255, 255, 255, 0.2) var(--done, 0%));
}

html.dark .pf-track input::-moz-range-track {
    background: rgba(255, 255, 255, 0.2);
}

html.dark .pf-mark {
    background: var(--pf-panel);
}

html.dark .pf-try {
    color: #234D6F;
}

@media (prefers-reduced-motion: reduce) {
    .pf-try,
    .pf-end {
        animation: none;
    }

    .pf-start-ring {
        transition: none;
    }
}