/* v4 homepage: v1's straightforward order in v3's (Concept G) styling.
   Builds on landing.css tokens (--ap-blue, --ap-ink, --ap-mute, --ap-fill). */

/* Hero: contained, rounded video with centered copy (v1 layout). */
.v4-hero { padding: 68px 0 0; }
.v4-hero-frame {
    position: relative; overflow: hidden; border-radius: 28px;
    width: min(var(--ap-wide), calc(100% - 32px)); margin: 0 auto;
    min-height: min(680px, 78vh); display: grid; place-items: center; background: #0f172a;
}
.v4-hero-poster, .v4-hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.v4-hero-video { opacity: 0; transition: opacity .5s ease; }
.v4-hero-frame.is-playing .v4-hero-video { opacity: 1; }
.v4-hero-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,14,25,.30) 0%, rgba(10,14,25,.48) 55%, rgba(10,14,25,.62) 100%);
}
.v4-hero-copy { position: relative; z-index: 2; text-align: center; color: #fff; padding: 56px 24px; max-width: 860px; }
.v4-badge {
    display: inline-block; margin: 0 0 18px; padding: 7px 14px; border-radius: 980px;
    font-size: 13px; font-weight: 500; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(6px);
}
.v4-hero h1 {
    font-size: 60px; line-height: 1.04; letter-spacing: -0.04em; font-weight: 700;
    margin: 0 0 18px; color: #fff;
}
.v4-hero-lede { font-size: 19px; line-height: 1.5; margin: 0 auto 28px; max-width: 640px; color: rgba(255,255,255,.92); }
.v4-hero-actions { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.v4-hero-link { color: #fff !important; font-size: 17px; font-weight: 500; text-decoration: none; }
.v4-hero-link:hover { text-decoration: underline; }
.v4-hero-note { font-size: 13px; color: rgba(255,255,255,.78); margin: 18px 0 0; }

/* Logos */
.v4-logos { padding: 36px 0 8px; }
.v4-logo-strip {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 44px;
}
.v4-logo-strip img { height: 30px; width: auto; filter: grayscale(1); opacity: .6; }

/* Sections */
.v4-section { padding: 104px 0; }
.v4-section-fill { background: var(--ap-fill); }
.v4-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.v4-head h2 { font-size: 52px; line-height: 1.06; letter-spacing: -0.04em; font-weight: 700; margin: 0 0 12px; color: var(--ap-ink); }
.v4-head p { font-size: 19px; color: var(--ap-mute); margin: 0; }
/* Section labels. Scoped under their containers so `.v4-head p` and
   `.v4-row-copy p` (19px / 17px, margin 0) don't blow them up. */
.v4-head .v4-pill, .v4-row-copy .v4-pill, .v4-pill {
    display: inline-block; font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: 0;
    color: var(--ap-blue) !important; background: rgba(69,142,255,.1); border-radius: 980px;
    padding: 6px 12px; margin: 0 0 16px;
}
.v4-row-copy .v4-pill-sm, .v4-pill-sm { font-size: 12px; padding: 5px 11px; margin: 0 0 14px; }

/* How it works */
.v4-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v4-step {
    background: var(--ap-fill); border-radius: 28px; padding: 28px 24px 24px;
    display: flex; flex-direction: column; min-width: 0;
}
.v4-num {
    width: 34px; height: 34px; border-radius: 50%; background: var(--ap-blue); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 15px; margin-bottom: 16px;
}
.v4-step h3 { font-size: 24px; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 8px; font-weight: 700; color: var(--ap-ink); }
.v4-step p { font-size: 15px; line-height: 1.5; color: var(--ap-mute); margin: 0 0 20px; }
.v4-step-media { margin-top: auto; border-radius: 18px; overflow: hidden; position: relative; }
.v4-step-video { aspect-ratio: 4 / 3; }
.v4-step-video .g-video-slot { position: absolute; inset: 0; }
.v4-cta-row { text-align: center; margin-top: 40px; }

/* Feature rows */
.v4-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px;
    align-items: center; margin: 0 0 72px;
}
.v4-row-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.v4-row-flip .v4-row-copy { order: 2; }
.v4-row-copy h3 { font-size: 36px; line-height: 1.1; letter-spacing: -0.035em; font-weight: 700; margin: 0 0 14px; color: var(--ap-ink); }
.v4-row-copy p { font-size: 17px; line-height: 1.55; color: var(--ap-mute); margin: 0; }
.v4-row-media {
    position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10;
    background: #e8e8ed; box-shadow: 0 18px 50px rgba(0,0,0,.08);
}
.v4-row-media > .g-video-slot { position: absolute; inset: 0; }
.v4-media-tag {
    position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,.92);
    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 980px; color: var(--ap-ink);
}
.v4-list { margin: 0; padding: 0; list-style: none; }
.v4-list li {
    position: relative; padding: 0 0 0 28px; margin: 0 0 12px; font-size: 17px; line-height: 1.45; color: #424245;
}
.v4-list li::before {
    content: "✓"; position: absolute; left: 0; top: 0; color: var(--ap-blue); font-weight: 700;
}
.v4-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v4-mini { background: #fff; border-radius: 22px; padding: 24px 22px; }
.v4-mini h3 { font-size: 18px; letter-spacing: -0.02em; margin: 0 0 6px; font-weight: 700; color: var(--ap-ink); }
.v4-mini p { font-size: 14px; line-height: 1.45; color: var(--ap-mute); margin: 0; }

/* Pricing keeps the shared cards (landing.css .g-pricing / .g-plans). */
.v4-pricing { padding: 104px 0 88px; }
.v4-pricing .v4-head { margin-bottom: 20px; }
.v4-pricing .v4-pill { background: #fff; }

/* FAQ */
#faq .v4-head a { color: var(--ap-blue); }
.v4-close h2 { font-size: 60px; }

/* Step 1: photos dragged onto a drop zone (loops; static under reduced motion) */
.v4-drop { aspect-ratio: 4 / 3; background: #fff; }
.v4-drop-zone {
    position: absolute; inset: 12px; border: 2px dashed #d2d2d7; border-radius: 14px;
    animation: v4-zone 9s ease-in-out infinite both;
}
.v4-drop-prompt {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding-bottom: 16%; gap: 4px; text-align: center; animation: v4-prompt 9s ease-in-out infinite both;
}
.v4-drop-prompt strong { font-size: 15px; font-weight: 600; color: var(--ap-ink); letter-spacing: -0.01em; }
.v4-drop-prompt span { font-size: 12px; color: var(--ap-mute); }
.v4-drop-ic {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(69,142,255,.12); position: relative; margin-bottom: 6px;
}
.v4-drop-prompt .v4-drop-ic::before {
    content: ""; position: absolute; left: 50%; top: 11px; width: 2px; height: 14px; margin-left: -1px; background: var(--ap-blue); border-radius: 1px;
}
.v4-drop-prompt .v4-drop-ic::after {
    content: ""; position: absolute; left: 50%; top: 11px; width: 8px; height: 8px; margin-left: -5px;
    border-left: 2px solid var(--ap-blue); border-top: 2px solid var(--ap-blue); transform: rotate(45deg);
}
.v4-drop-grid {
    position: absolute; inset: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px;
}
.v4-drop-grid img {
    width: 100%; height: 100%; min-width: 0; object-fit: cover; border-radius: 8px; display: block;
    animation: v4-thumb 9s cubic-bezier(.2,.8,.2,1) infinite both;
}
.v4-drop-grid img:nth-child(2) { animation-delay: .06s; }
.v4-drop-grid img:nth-child(3) { animation-delay: .12s; }
.v4-drop-grid img:nth-child(4) { animation-delay: .18s; }
.v4-drop-grid img:nth-child(5) { animation-delay: .24s; }
.v4-drop-grid img:nth-child(6) { animation-delay: .30s; }
.v4-drop-grid img:nth-child(7) { animation-delay: .36s; }
.v4-drop-grid img:nth-child(8) { animation-delay: .42s; }
.v4-drop-count {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    background: rgba(255,255,255,.95); color: var(--ap-ink); font-size: 12px; font-weight: 600;
    padding: 6px 12px 6px 28px; border-radius: 980px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.12);
    animation: v4-count 9s ease-out infinite both;
}
.v4-drop-count::before {
    content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
    border-radius: 50%; background: #34c759;
}
.v4-drop-count::after {
    content: ""; position: absolute; left: 14px; top: 50%; width: 3px; height: 6px; margin-top: -4px;
    border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg);
}
.v4-drag {
    position: absolute; left: 34%; top: 13%; width: 32%; aspect-ratio: 4 / 3;
    animation: v4-drag 9s cubic-bezier(.4,0,.2,1) infinite both; z-index: 2;
}
.v4-drag img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
    border: 2px solid #fff; box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.v4-drag img:nth-child(1) { transform: rotate(-9deg) translate(-8%, 4%); }
.v4-drag img:nth-child(2) { transform: rotate(6deg) translate(6%, 2%); }
.v4-drag-badge {
    position: absolute; right: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--ap-blue); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.v4-cursor { position: absolute; right: -14px; bottom: -16px; }
@keyframes v4-drag {
    0% { transform: translate(140%, -120%) rotate(12deg); opacity: 0; }
    5% { opacity: 1; }
    30% { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
    37% { transform: translate(0, 6%) rotate(0) scale(.92); opacity: 1; }
    43% { transform: translate(0, 6%) scale(.55); opacity: 0; }
    100% { transform: translate(0, 6%) scale(.55); opacity: 0; }
}
@keyframes v4-zone {
    0%, 22% { border-color: #d2d2d7; background: transparent; }
    28%, 40% { border-color: var(--ap-blue); background: rgba(69,142,255,.07); }
    46%, 100% { border-color: transparent; background: transparent; }
}
@keyframes v4-prompt {
    0%, 40% { opacity: 1; }
    45%, 95% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes v4-thumb {
    0%, 42% { opacity: 0; transform: scale(.6); }
    50%, 90% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes v4-count {
    0%, 58% { opacity: 0; transform: translate(-50%, 8px); }
    63%, 88% { opacity: 1; transform: translate(-50%, 0); }
    94%, 100% { opacity: 0; transform: translate(-50%, 0); }
}

/* Step 3: the same video in every export shape */
.v4-formats { aspect-ratio: 4 / 3; background: linear-gradient(180deg, #fff 0%, #eef1f6 100%); }
.v4-fmt {
    position: absolute; margin: 0; border-radius: 10px; overflow: hidden; background: #d2d2d7;
    border: 3px solid #fff; box-shadow: 0 10px 26px rgba(0,0,0,.16); box-sizing: border-box;
}
.v4-fmt > img, .v4-fmt > .g-video-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v4-fmt figcaption {
    position: absolute; left: 6px; bottom: 6px; z-index: 2; background: rgba(255,255,255,.94); color: var(--ap-ink);
    font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 980px;
}
.v4-fmt-169 { left: 8%; top: 7%; width: 84%; aspect-ratio: 16 / 9; }
.v4-fmt-169 figcaption { left: auto; right: 6px; bottom: auto; top: 6px; background: var(--ap-blue); color: #fff; }
.v4-fmt-916 { left: 5%; bottom: 5%; width: 23%; aspect-ratio: 9 / 16; }
.v4-fmt-11 { right: 5%; bottom: 5%; width: 32%; aspect-ratio: 1 / 1; }

/* Feature row: scene text over the video, no branding card */
.v4-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
    padding: 64px 28px 24px; display: flex; flex-direction: column; gap: 4px; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
    text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.v4-overlay > * { animation: v4-overlay 8s ease-out infinite both; }
.v4-overlay-kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.v4-overlay strong { font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; animation-delay: .25s; }
.v4-overlay-meta { font-size: 15px; opacity: .92; animation-delay: .5s; }
@keyframes v4-overlay {
    0% { opacity: 0; transform: translateY(12px); }
    8%, 84% { opacity: 1; transform: translateY(0); }
    92%, 100% { opacity: 0; transform: translateY(0); }
}


@media (max-width: 980px) {
    .v4-hero h1 { font-size: 44px; }
    .v4-head h2 { font-size: 40px; }
    .v4-steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .v4-row, .v4-row-flip { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
    .v4-row-flip .v4-row-copy { order: 0; }
    .v4-row-copy h3 { font-size: 30px; }
    .v4-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v4-close h2 { font-size: 44px; }
}
@media (max-width: 560px) {
    .v4-hero { padding-top: 64px; }
    .v4-hero-frame { border-radius: 22px; width: calc(100% - 20px); min-height: 72vh; }
    .v4-hero h1 { font-size: 36px; }
    .v4-hero-lede { font-size: 17px; }
    .v4-section { padding: 72px 0; }
    .v4-head { margin-bottom: 32px; }
    .v4-head h2 { font-size: 32px; }
    .v4-head p { font-size: 17px; }
    .v4-logo-strip { gap: 14px 28px; }
    .v4-logo-strip img { height: 22px; }
    .v4-mini-grid { grid-template-columns: 1fr; }
    .v4-overlay { padding: 48px 18px 16px; }
    .v4-overlay strong { font-size: 24px; }
    .v4-close h2 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .v4-hero-video { display: none !important; }
    .v4-drag, .v4-drop-prompt { display: none; }
    .v4-drop-zone { animation: none; border-color: transparent; }
    .v4-drop-grid img, .v4-overlay > * { animation: none; opacity: 1; transform: none; }
    .v4-drop-count { animation: none; opacity: 1; transform: translateX(-50%); }
}