/* "LYPA vs alternatives" landing. */
.glass-strong { background: rgba(30, 30, 30, .8); }
.hero { padding-bottom: 96px; }
.hero-in { gap: 60px; }
.hero-intro { max-width: 480px; }

/* Hero: photo with feature chips. */
.hero-art { height: 580px; }
.ha-photo { left: 170px; top: 40px; width: 270px; animation-delay: .35s; }
.ha-photo .print { transform: rotate(-2deg); }
.chip { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 10px; border-radius: 100px; font-weight: 700; font-size: 16px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.chip i { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; font-style: normal; flex-shrink: 0; }
.chip:nth-child(2) { left: 0; top: 30px; animation-delay: .9s; }
.chip:nth-child(3) { right: 0; top: 150px; animation-delay: 1.1s; }
.chip:nth-child(4) { left: 20px; top: 270px; animation-delay: 1.3s; }
.chip:nth-child(5) { right: 20px; top: 380px; animation-delay: 1.5s; }
.chip:nth-child(6) { left: 110px; top: 470px; animation-delay: 1.7s; }

/* In short. */
.summary .in { display: flex; flex-direction: column; gap: 16px; }
.sum-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sum-card { gap: 10px; padding: 32px; }
.sum-card:first-child { border-color: #333; }
.sum-card h3 { font-weight: 800; font-size: 24px; color: #BBBBBB; }
.sum-card:first-child h3 { color: #fff; }
.sum-card p { font-size: 17px; line-height: 1.5; color: #8A8A8A; }
.sum-card:first-child p { color: #BBBBBB; }

/* Feature cards. */
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 400px); }
.ctitle { font-size: 30px; letter-spacing: -1px; }
.csub { font-size: 16.5px; }
.c-style { flex-direction: row; align-items: center; gap: 32px; }
.c-style .c-copy { flex: 1; }
.style-photo { width: 220px; flex-shrink: 0; }
.style-photo .print { transform: rotate(3deg); }
.develop { animation: develop 6s ease-in-out infinite; }
.c-now .nowbox { margin-top: auto; border-radius: 24px; padding: 18px; flex-direction: row; align-items: center; gap: 16px; }
.c-now .nowbox-main { flex: 1; gap: 16px; }
.c-now .nowbox-ring .mono { font-size: 12.5px; }
.c-now .nowbox-text b { font-size: 16px; }
.c-now .nowbox-text span { font-size: 13.5px; }
.c-now .nowbox-actions { display: flex; }
.c-now .nowbox-actions .btn-primary { height: 46px; padding: 0 18px; font-size: 12px; }
.c-now .nowbox-actions .btn-ghost { display: none; }
.chat-art { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.chat-in { align-self: flex-start; display: flex; align-items: flex-end; gap: 10px; }
.chat-thumb { width: 48px; height: 57px; object-fit: cover; flex-shrink: 0; }
.chat-in span, .chat-out { padding: 11px 15px; font-size: 15.5px; line-height: 1.35; }
.chat-in span { border-radius: 18px 18px 18px 6px; background: #1C1C1C; }
.chat-out { align-self: flex-end; max-width: 300px; border-radius: 18px 18px 6px 18px; background: #fff; color: #000; animation-delay: .8s; }
.bubble { animation: bubble 6s cubic-bezier(.34, 1.56, .64, 1) infinite both; }
.price-art { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.price-old, .price-new { display: flex; flex-direction: column; gap: 8px; }
.price-new { align-items: flex-end; }
.price-art .micro { font-size: 11px; color: #6E6E6E; }
.price-new .micro { color: #BBBBBB; }
.pstrike { position: relative; align-self: flex-start; font-size: 36px; font-weight: 700; color: #6E6E6E; }
.pstrike::after { content: ""; position: absolute; left: -6px; right: -6px; top: 52%; height: 4px; background: #D92828; transform-origin: left; animation: pstrike 5s cubic-bezier(.25, 1, .5, 1) infinite; }
.pzero { font-weight: 800; font-size: 96px; line-height: .85; letter-spacing: -4px; animation: pzero 5s cubic-bezier(.34, 1.56, .64, 1) infinite; }

/* Comparison table. */
.compare .in { display: flex; flex-direction: column; gap: 16px; }
.cmp { width: 100%; margin-top: 24px; border-collapse: separate; border-spacing: 0; }
.cmp thead th { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #8A8A8A; padding: 20px 8px; text-align: center; width: 22%; }
.cmp thead th:first-child { width: 34%; }
.cmp thead th.l { background: #161616; color: #fff; border-radius: 20px 20px 0 0; }
.cmp tbody th, .cmp td { padding: 17px 8px; border-top: 1px solid #1C1C1C; text-align: center; vertical-align: middle; }
.cmp .f { text-align: left; padding-left: 0; font-weight: 700; font-size: 18px; }
.cmp td.l { background: #161616; }
.cmp tr.grp > * { padding: 30px 0 10px; border-top: 0; }
.cmp tr.grp th { text-align: left; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #D92828; }
.cmp tbody tr:last-child td.l { border-radius: 0 0 20px 20px; }
.cmp tbody tr:not(.grp):hover > * { background: rgba(255, 255, 255, .02); }
.cmp tbody tr:not(.grp):hover td.l { background: #1A1A1A; }
.cell { display: flex; align-items: center; justify-content: center; gap: 10px; }
.note { font-size: 13px; color: #8A8A8A; }
td.l .note { color: #BBBBBB; }
.ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ok { background: #fff; color: #000; }
.ok2 { background: #2A2A2A; color: #DDDDDD; }
.ic.no { background: transparent; color: #555; border: 1.5px solid #2A2A2A; }
.mid { background: transparent; color: #BBBBBB; border: 1.5px dashed #555; }
.cmp-note { margin-top: 14px; font-size: 11.5px; color: #6E6E6E; }

/* Closing collage. */
.final-art { width: 600px; height: 340px; }
.fa-1 { left: 40px; top: 50px; width: 200px; --r: -11deg; animation-delay: .1s; }
.fa-2 { right: 40px; top: 50px; width: 200px; --r: 10deg; animation-delay: .25s; }
.fa-3 { left: 190px; top: 0; width: 220px; --r: -1deg; animation-delay: .4s; }
.final h2 { font-size: 72px; letter-spacing: -3px; }

@keyframes develop { 0%, 8% { filter: grayscale(1) brightness(1.8) contrast(.5) blur(5px); } 45%, 88% { filter: none; } 100% { filter: grayscale(1) brightness(1.8) contrast(.5) blur(5px); } }
@keyframes bubble { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pstrike { 0%, 15% { transform: scaleX(0); } 30%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pzero { 0%, 32% { opacity: 0; transform: scale(.4); } 42%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

@media (max-width: 1023px) {
    .hero { padding-bottom: 44px; }
    .hero-intro { max-width: none; }

    .hero-art { height: 380px; margin-top: 30px; }
    .ha-photo { left: 85px; width: 180px; }
    .chip { gap: 8px; height: 40px; padding: 0 14px 0 8px; font-size: 13px; }
    .chip i { width: 24px; height: 24px; }
    .chip i svg { width: 13px; height: 13px; }
    .chip:nth-child(2) { top: 8px; }
    .chip:nth-child(3) { top: 104px; }
    .chip:nth-child(4) { left: 0; top: 196px; }
    .chip:nth-child(5) { right: 0; top: 262px; }
    .chip:nth-child(6) { left: 56px; top: 330px; }

    .summary .in { gap: 12px; }
    .summary .head h2 { margin-bottom: 8px; }
    .sum-grid { margin-top: 0; display: flex; flex-direction: column; gap: 12px; }
    .sum-card { gap: 6px; padding: 22px; }
    .sum-card h3 { font-size: 17px; }
    .sum-card p { font-size: 14.5px; line-height: 1.45; }

    .ctitle { font-size: 22px; letter-spacing: -.5px; }
    .csub { font-size: 14.5px; }
    .c-style { gap: 16px; }
    .style-photo { width: 120px; }
    .c-now .nowbox { margin-top: 8px; border-radius: 22px; padding: 14px; flex-direction: column; align-items: stretch; gap: 12px; }
    .c-now .nowbox-main { gap: 14px; }
    .c-now .nowbox-ring .mono { font-size: 11.5px; }
    .c-now .nowbox-text b { font-size: 15px; }
    .c-now .nowbox-text span { font-size: 13px; }
    .c-now .nowbox-actions { display: grid; }
    .c-now .nowbox-actions .btn-primary { height: 44px; padding: 0 12px; }
    .c-now .nowbox-actions .btn-ghost { display: inline-flex; }
    .chat-art { margin-top: 8px; gap: 8px; }
    .chat-thumb { width: 44px; height: 52px; }
    .chat-in span, .chat-out { padding: 10px 14px; font-size: 14.5px; }
    .chat-out { max-width: 230px; }
    .price-art { margin-top: 10px; gap: 12px; }
    .price-old, .price-new { gap: 6px; }
    .price-art .micro { font-size: 10px; }
    .pstrike { font-size: 24px; }
    .pstrike::after { left: -4px; right: -4px; height: 3px; }
    .pzero { font-size: 56px; line-height: .9; letter-spacing: -2px; }

    .compare .in { gap: 12px; }
    .compare .head h2 { margin-bottom: 0; }
    .cmp { margin-top: 6px; }
    .cmp thead th { font-size: 10.5px; letter-spacing: 1.2px; padding: 14px 4px; width: auto; }
    .cmp thead th:first-child { width: 40%; }
    .cmp thead th.l { border-radius: 16px 16px 0 0; }
    .cmp tbody th, .cmp td { padding: 13px 4px; }
    .cmp .f { padding-left: 0; padding-right: 8px; font-size: 13.5px; line-height: 1.3; }
    .cmp tr.grp > * { padding: 22px 0 8px; }
    .cmp tr.grp th { font-size: 10.5px; }
    .cmp tbody tr:last-child td.l { border-radius: 0 0 16px 16px; }
    .cell { flex-direction: column; gap: 4px; }
    .note { font-size: 10px; line-height: 1.2; }
    .ic { width: 24px; height: 24px; }
    .ok svg { width: 14px; height: 14px; }
    .ic.no svg, .mid svg { width: 12px; height: 12px; }
    .cmp-note { margin-top: 10px; font-size: 10.5px; line-height: 1.5; }
    .compare .btn-wide { margin-top: 14px; }

    .final-art { width: 320px; height: 250px; }
    .fa-1 { left: 10px; top: 36px; width: 130px; --r: -10deg; }
    .fa-2 { right: 10px; top: 36px; width: 130px; --r: 9deg; }
    .fa-3 { left: 88px; top: 0; width: 144px; }
    .final h2 { font-size: min(38px, 9.75vw); letter-spacing: -1.6px; }
}