/* ==================================================
   CAMPAIGN PAGE (/campaign) — scenes only. Shared product-page pieces are in product-v3.css,
   the base design in home-v2.css. Accent: the campaign icon indigo (.pv-page--campaign).
   ================================================== */

/* hero demo: flow-builder canvas + two floating cards in the hero's right column */
.cmp-demo { position: relative; width: 100%; max-width: 520px; min-height: 560px; margin: 0 auto; padding-bottom: 36px; }
.cmp-demo__phone { position: relative; width: 340px; margin: 0 auto; filter: drop-shadow(0 24px 40px rgba(91, 79, 224, 0.16)); }
.cmp-demo__phone .pv-scene { border-radius: 22px; }

/* nodes light up in order; the loop is 10 s */
.cmp-node { opacity: 0.35; animation: cmp-node 10s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes cmp-node { 0% { opacity: 0.35; } 6%, 90% { opacity: 1; } 98%, 100% { opacity: 0.35; } }
.cmp-chip { opacity: 0; transform: translateY(6px); transform-box: fill-box; animation: cmp-chip 10s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes cmp-chip { 0% { opacity: 0; transform: translateY(6px); } 5%, 90% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
/* dot running down a connector: the same dasharray trick as .pv-travel, on a 10 s loop so it stays in step with the nodes */
.cmp-run { stroke-dasharray: 10 600; stroke-dashoffset: 10; animation: cmp-run 10s linear infinite; animation-delay: var(--d, 0s); }
@keyframes cmp-run { 0% { stroke-dashoffset: 10; } 8% { stroke-dashoffset: -200; } 100% { stroke-dashoffset: -200; } }

.cmp-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #EEF0F4;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.10);
    font-family: 'Inter', sans-serif;
    opacity: 0;
    transform: translateY(8px);
    animation: cmp-float-in 10s ease-out infinite;
}
.cmp-float__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; }
.cmp-float__icon--fail { background: #FEF3F2; }
.cmp-float__icon--wa   { background: #EDF8EF; }
.cmp-float__icon--rep  { background: #F1F0FD; }
.cmp-float__icon img { display: block; }
.cmp-float__body { display: flex; flex-direction: column; line-height: 1.25; }
.cmp-float__body strong { font-size: 13px; font-weight: 600; color: var(--f2h-ink); }
.cmp-float__body em { font-size: 12px; font-style: normal; color: var(--f2h-muted); font-family: 'Inter', ui-monospace, monospace; }
.cmp-float__body b { font-weight: 700; color: #3E9141; }
.cmp-float__dot { width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: #5B4FE0; animation: cmp-ping 1.2s ease-out infinite; }
/* the cards sit on the empty parts of the canvas: top right beside the SMS node, and the lower left column below the RCS branch */
.cmp-float--fail { right: -8px; top: 2%;   animation-delay: 2.2s; }
/* the two left cards live in one stack pinned to the canvas's bottom-left corner, under the left branch's last chip */
.cmp-float-stack { position: absolute; left: -12px; top: 68%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cmp-float-stack .cmp-float { position: static; }
.cmp-float--wa   { animation-delay: 3.4s; }
.cmp-float--rep  { animation-delay: 5s; }
@keyframes cmp-float-in { 0% { opacity: 0; transform: translateY(8px); } 4%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes cmp-ping { 0% { box-shadow: 0 0 0 0 rgba(91, 79, 224, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(91, 79, 224, 0); } }

/* journey strip: contact list → SMS → WhatsApp → voice, with a dot travelling each hop */
.cmp-journey { padding: 28px 32px 22px; border-radius: var(--f2h-radius); }
.cmp-journey .pv-scene { max-width: 1000px; margin: 0 auto; }
.cmp-journey__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: #475467; }
.cmp-journey__legend li { display: inline-flex; align-items: center; gap: 8px; }
.cmp-journey__legend i { width: 10px; height: 10px; border-radius: 50%; }

/* flow builder mock: node list on the left, step settings on the right */
.cmp-builder { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 14px; padding: 14px; }
.cmp-nodes { display: flex; flex-direction: column; gap: 6px; }
.cmp-nodes__item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid #E4E7EC; background: #FFFFFF; font-size: 12px; color: #344054; }
.cmp-nodes__item.is-on { border-color: #5B4FE0; background: #F1F0FD; }
.cmp-nodes__item img { display: block; width: 22px; height: 22px; }
.cmp-nodes__item b { display: block; font-size: 12.5px; font-weight: 600; color: var(--f2h-ink); }
.cmp-nodes__item small { display: block; font-size: 10.5px; color: #98A2B3; }
.cmp-nodes__item em { font-size: 10.5px; font-style: normal; font-weight: 600; color: #5B4FE0; }
.cmp-nodes__when { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px 14px; font-size: 10.5px; font-weight: 600; color: #98A2B3; }
.cmp-nodes__when::before { content: ""; width: 2px; height: 14px; border-radius: 1px; background: #DCD9F9; }
.cmp-nodes__when i { padding: 2px 8px; border-radius: 10px; font-style: normal; background: #FEF3F2; color: #B42318; }
.cmp-nodes__when i.is-ok { background: #ECFDF3; color: #027A48; }
.cmp-delay { display: flex; gap: 6px; margin-top: 4px; }
.cmp-delay span { flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid #E4E7EC; text-align: center; font-size: 11.5px; font-weight: 600; color: #475467; text-transform: none; letter-spacing: 0; }
.cmp-delay span.is-on { border-color: #5B4FE0; background: #F1F0FD; color: #4338CA; }

/* report: per-channel rows with cost */
.cmp-report__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 14px 8px; font-size: 11px; color: #475467; }
.cmp-report__legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.cmp-channel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--f2h-ink); }
.cmp-channel img { width: 16px; height: 16px; }

/* journey recipes */
.cmp-recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.cmp-recipe { padding: 22px 24px; border-radius: var(--f2h-radius); }
.cmp-recipe h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--f2h-ink); }
.cmp-recipe > p { margin: 0 0 14px; font-size: 14px; line-height: 22px; color: #475467; }
.cmp-recipe ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cmp-recipe li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 20px; background: #F8F9FC; border: 1px solid #EAECF0; font-size: 12.5px; font-weight: 600; color: #344054; }
.cmp-recipe li img { width: 18px; height: 18px; }
.cmp-recipe li.is-when { padding: 4px 9px; background: #FFFFFF; border-style: dashed; font-weight: 500; color: #98A2B3; font-size: 11.5px; }
.cmp-recipe li.is-fail { color: #B42318; }
.cmp-recipe small { display: block; margin-top: 12px; font-size: 12.5px; color: var(--f2h-muted); }

/* channel strip under the hero stats */
.cmp-channels { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.cmp-channels li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 30px; background: #FFFFFF; border: 1px solid #EEF0F4; font-size: 13px; font-weight: 600; color: #344054; }
.cmp-channels li img { width: 20px; height: 20px; }
.cmp-channels li a { color: inherit; text-decoration: none; }

@media (min-width: 1025px) {
    /* the hero card must fit the first screen: canvas width follows the viewport height, as the phones do on the other pages */
    .pv-page .cmp-demo { min-height: 0; max-width: min(520px, 100%); }
    .pv-page .cmp-demo__phone { width: clamp(230px, calc((100vh - 270px) * 0.66), 340px); }
    .pv-page .cmp-float--fail { top: 2%; right: 0; }
    .pv-page .cmp-float-stack { left: 0; top: 68%; }
}
@media (max-width: 1200px) {
    .cmp-demo { max-width: 460px; min-height: 520px; }
    .cmp-float--fail { right: 0; }
    .cmp-float-stack { left: 0; }
}
@media (max-width: 1024px) {
    .cmp-demo { min-height: 0; padding: 20px 0 8px; }
    .cmp-demo__phone { width: 300px; }
    .cmp-float--fail { right: 0; top: 22px; }
    .cmp-float-stack { left: 0; top: 68%; }
    .cmp-recipes { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    /* a phone is too narrow for cards to float over the canvas without hiding nodes: stack them under it instead */
    .cmp-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .cmp-demo__phone { width: min(300px, 100%); }
    .cmp-float-stack { position: static; display: contents; }
    .cmp-float { position: static; width: 100%; max-width: 300px; padding: 8px 12px 8px 8px; opacity: 1; transform: none; animation: none; }
    .cmp-float__body strong { font-size: 12px; }
    .cmp-float__body em { font-size: 11px; }
    .cmp-journey { padding: 18px 14px 14px; }
    .cmp-builder { grid-template-columns: 1fr; }
    .cmp-recipe { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp-node { opacity: 1; animation: none; }
    .cmp-chip, .cmp-float { opacity: 1; transform: none; animation: none; }
    .cmp-run, .cmp-float__dot { animation: none; }
}