/* Product illustrations: oversized, tactile HTML objects over soft original photography. */
.kd-more { max-width: 1280px; margin: 0 auto; padding: 112px var(--gutter) 30px; }
.kd-more-head { margin-bottom: 52px; text-align: center; }
.kf-eyebrow { display: block; margin-bottom: 22px; font-size: 11px; font-weight: 500; letter-spacing: .15em; color: var(--ink-3); }
.kd-more-head .kd-sec-title { font-size: clamp(48px, 5.5vw, 78px); line-height: .99; }
.kd-more-head .kd-sec-title span { color: #8e979c; }
.kd-more-lede { margin: 20px auto 0; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.kd-feat { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5.4vw, 80px); padding: 56px 0; }
.kd-feat:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4.5fr); }
.kd-feat:nth-of-type(even) .kd-feat-demo { order: -1; }
.kd-feat + .kd-feat, .kd-more-end { border-top: 1px solid var(--line); }
.kd-feat-n { display: flex; gap: 12px; margin-bottom: 24px; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.kd-feat-n b { font-weight: 400; color: #999fa2; font-variant-numeric: tabular-nums; }
.kd-feat-copy h3, .kd-more-end h3 { font-family: var(--display); font-weight: 500; font-size: clamp(35px, 3.65vw, 52px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.kd-feat-copy p { max-width: 31ch; margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.kd-feat-demo { --kf-scale: 1; position: relative; isolation: isolate; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 26px; background: #d2e0e7; container-type: inline-size; box-shadow: inset 0 0 0 1px #34495412; }
.kd-feat .kd-feat-demo.kd-rise { transition-delay: .08s; }
.kf-scene { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); object-fit: cover; filter: blur(3px) saturate(.8); z-index: -2; transition: transform 1s var(--ease); }
.kd-feat-demo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #e1e8ed35; }
.kf-photo::before, .kf-lock::before, .kf-game::before { background: #123e6780; }
.kf-photo .kf-scene, .kf-lock .kf-scene, .kf-game .kf-scene { filter: blur(6px) saturate(1.25); }
.kf-canvas { position: absolute; width: 640px; height: 480px; left: 50%; top: 50%; margin-left: -320px; margin-top: -240px; transform: scale(var(--kf-scale)); transform-origin: center; font-family: var(--imsg); color: #1c2227; }
.kf-object { position: absolute; transform: rotate(var(--r, 0deg)); transition: transform .8s var(--ease), opacity .6s ease; }
.kd-js .kd-feat-demo:not(.is-in) .kf-object { opacity: 0; transform: translateY(24px) rotate(var(--r, 0deg)); }
.kd-feat-demo.is-in .kf-object:nth-child(2) { transition-delay: .07s; }
.kd-feat-demo.is-in .kf-object:nth-child(3) { transition-delay: .14s; }
.kd-feat-demo.is-in .kf-object:nth-child(4) { transition-delay: .21s; }
.kf-card-line { display: block; height: 1px; background: #e8ecef; margin: 18px 0; }
.kf-faces { display: flex; padding-left: 11px; }
.kf-faces i { width: 42px; height: 42px; margin-left: -11px; border-radius: 50%; border: 3px solid #fff; background: var(--c, #111); display: grid; place-items: center; font: normal 600 14px var(--imsg); color: #fff; overflow: hidden; box-shadow: 0 2px 4px #31424f15; }
.kf-faces i img { width: 100%; height: 100%; }
.kf-group-crew { top: 28px; left: 210px; width: 220px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kf-group-crew > b { font-size: 15px; font-weight: 600; }
.kf-group-crew > small { font-size: 11px; color: #65717a; }
.kf-invite, .kd-poll, .kf-reservation, .kf-spend, .kf-receipt { background: #fff; border-radius: 24px; border: 1px solid #d9e0e7; box-shadow: 0 18px 38px -15px #243b5240, 0 2px 5px #243b5210; }
.kf-invite { --r: -13deg; width: 260px; height: 345px; top: 164px; left: 42px; padding: 25px; }
.kf-card-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: #f5f0e9; font-size: 28px; margin-bottom: 20px; }
.kf-invite > small, .kf-reservation > small { display: block; font-size: 10px; letter-spacing: .08em; color: #7d8790; }
.kf-invite > b { display: block; font-size: 24px; line-height: 1.15; margin: 10px 0 16px; font-weight: 600; letter-spacing: -.03em; }
.kf-invite > p, .kf-reservation > p { font-size: 14px; line-height: 1.6; color: #78838d; }
.kd-poll { --r: -2deg; z-index: 3; top: 125px; left: 168px; width: 308px; padding: 21px; }
.kf-poll-contact { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #77838c; margin-bottom: 19px; }
.kf-poll-contact > img { width: 26px; height: 26px; border-radius: 50%; }
.kf-poll-contact > small { margin-left: auto; font-size: 10px; }
.kd-poll .kf-poll-contact { margin-bottom: 14px; }
.kd-poll > b { display: block; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin-bottom: 15px; }
.kd-poll-row { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: center; height: 41px; padding: 0 11px; margin-top: 8px; font-size: 12px; overflow: hidden; border-radius: 9px; background: #f0f3f6; }
.kd-poll-row::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: -1; width: calc(var(--v) * 25%); background: #e0e6ec; }
.kd-poll-row.is-win { color: #326cad; font-weight: 600; }
.kd-poll-row.is-win::before { background: #d5e7f9; }
.kd-poll-row > small { font-size: 12px; }
.kd-poll > em { display: block; font-style: normal; font-size: 11px; margin: 12px 0; color: #6a7885; }
.kf-poll-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #edf0f3; padding-top: 13px; font-size: 10px; color: #87909a; }
.kf-poll-foot .kf-faces i { width: 25px; height: 25px; font-size: 8px; border-width: 2px; margin-left: -7px; }
.kf-reservation { --r: 13deg; z-index: 2; width: 225px; height: 310px; left: 414px; top: 198px; padding: 23px; }
.kf-book-check { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #e4f0e9; color: #3b9168; font-size: 24px; margin-bottom: 18px; }
.kf-reservation > b { display: block; font-size: 23px; margin: 12px 0; letter-spacing: -.03em; }
.kf-reservation-rule { display: block; height: 1px; background: #e8ecef; margin: 18px 0; }

/* A close crop of the bottom of the phone, just as a real voice note appears. */
.kf-voice .kf-scene { transform: rotate(180deg) scale(1.06); }
.kd-feat .kf-voice-phone { --dev-w: 395px; --r: -3deg; bottom: 30px; left: 122.5px; }
.kf-phone-screen { background: #fff !important; color: #1c1c1e !important; }
.kf-phone-thread { position: absolute; bottom: 77px; left: 16px; right: 16px; display: flex; flex-direction: column; gap: 9px; }
.kd-im-stamp { margin-bottom: 7px; font-size: 11px; text-align: center; color: #999da1; }
.kd-im-row { display: flex; align-items: flex-end; }
.kd-im-row.me { justify-content: flex-end; }
.kd-im-b { position: relative; width: fit-content; max-width: 88%; padding: 10px 14px; border-radius: 19px; font-family: var(--imsg); font-size: 15px; line-height: 1.3; letter-spacing: -.015em; }
.kd-im-b.them { background: #e9e9eb; color: #17191c; }
.kd-im-b.me { background: #579de6; color: #fff; }
.kd-im-b.tail::after { content: ''; position: absolute; bottom: 0; width: 18px; height: 20px; background: inherit; -webkit-mask: var(--tail) center / 100% 100% no-repeat; mask: var(--tail) center / 100% 100% no-repeat; }
.kd-im-b.tail.me::after { right: -5px; }
.kd-im-b.tail.them::after { left: -5px; transform: scaleX(-1); }
.kf-voice .kd-im-b.me { background: #83929f; }
.kf-audio-message { width: 286px; padding: 13px; border-radius: 18px; }
.kf-audio-controls { display: flex; align-items: center; gap: 10px; }
.kd-audio-play { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; position: relative; }
.kd-audio-play::after { content: ''; position: absolute; left: 10px; top: 8px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #83929f; }
.kd-wave { display: flex; flex: 1; align-items: center; gap: 2px; height: 24px; }
.kd-wave i { flex: 1; border-radius: 1px; background: #fff; opacity: .85; }
.kd-wave:empty { background: repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px); height: 12px; }
.kf-audio-controls > small { font-size: 9px; color: #e1e7ed; }
.kf-transcript { display: block; margin-top: 13px; font-size: 11px; line-height: 1.5; color: #e1e7ed; }
.kf-delivered { align-self: flex-end; margin: -4px 9px 6px 0; font-size: 9px; color: #8a9196; }
.kf-delivered > b { font-weight: 400; color: #1684db; margin-left: 4px; }
.kf-phone-compose { position: absolute; left: 14px; right: 14px; bottom: 27px; display: flex; align-items: center; gap: 8px; }
.kf-phone-compose > i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; font: normal 24px var(--sans); color: #41464a; background: #f5f5f6; border-radius: 50%; }
.kf-phone-compose > span { display: flex; align-items: center; justify-content: space-between; flex: 1; border: 1px solid #e5e5e8; border-radius: 30px; padding: 10px 14px; font-size: 12px; color: #b2b5b8; }
.kf-phone-compose svg { width: 17px; height: 17px; }
.kf-home { position: absolute; bottom: 10px; left: 36%; width: 28%; height: 4px; border-radius: 2px; background: #111; }
.kd-feat-demo.is-in .kd-wave i { animation: kfWave 1.3s ease-in-out 3; }
@keyframes kfWave { 50% { transform: scaleY(.4); } }

/* A photo attachment and the reply, enlarged into a two-object composition. */
.kf-photo-attachment { --r: 8deg; top: 30px; left: 267px; width: 324px; overflow: hidden; border-radius: 25px; background: #fff; box-shadow: 0 20px 50px #08162470; }
.kf-photo-attachment > img { display: block; width: 100%; height: 305px; object-fit: cover; }
.kf-photo-attachment > span { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-size: 14px; }
.kf-photo-attachment small { font-size: 11px; color: #8c949b; }
.kf-meal { --r: -5deg; z-index: 2; width: 338px; bottom: 31px; left: 40px; padding: 23px; background: #fff; border: 1px solid #fff9; border-radius: 24px; box-shadow: 0 20px 45px #08162450; }
.kf-meal .kf-poll-contact { margin-bottom: 15px; }
.kf-meal > b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.kf-macros { display: flex; gap: 34px; margin-top: 19px; padding-top: 17px; border-top: 1px solid #edf0f3; }
.kf-macros span { display: flex; flex-direction: column; gap: 5px; }
.kf-macros b { font-size: 33px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.kf-macros small { font-size: 10px; color: #88929b; }

/* One glass Live Activity over a dim, out-of-focus scene. */
.kf-lock-clock { top: 50px; left: 0; width: 100%; text-align: center; color: #e7f3ff7a; }
.kf-lock-clock small { display: block; font-size: 16px; font-weight: 500; }
.kf-lock-clock b { display: block; font-size: 132px; line-height: 1.08; font-weight: 600; letter-spacing: -.04em; }
.kd-live { z-index: 2; top: 227px; left: 53px; width: 534px; padding: 22px 25px 20px; display: grid; grid-template-columns: 49px 1fr auto; align-items: center; gap: 17px 15px; border-radius: 33px; background: #b9cfeb27; backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25); border: 1px solid #ecf5ff3b; box-shadow: 0 18px 45px #07152a35, inset 0 1px 0 #ffffff15; color: #fff; }
.kd-live-ico { position: relative; display: grid; place-items: center; width: 49px; height: 49px; border-radius: 13px; background: #112334; box-shadow: inset 0 1px 0 #ffffff1a; }
.kd-live-ico img { width: 34px; }
.kd-live-ico i { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; background: #61ce91; border: 2px solid #263e57; border-radius: 5px; }
.kd-live-body { display: flex; flex-direction: column; gap: 5px; }
.kd-live-body b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.kd-live-body small { font-size: 14px; color: #c8d9e9; }
.kd-live-when { display: flex; align-items: baseline; gap: 4px; color: #a3eca8; }
.kd-live-when b { font-size: 35px; line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.kd-live-when small { font-size: 13px; }
.kd-live-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #c2dbf52b; overflow: hidden; }
.kd-live-bar i { display: block; width: 68%; height: 100%; border-radius: inherit; background: #a3eca8; }
.kf-live-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 11px; color: #c8d9e9; margin-top: -6px; }

/* The weekly budget and a second spending card form a small fan. */
.kf-budget .kf-scene { transform: scale(1.07); }
.kf-spend { --r: -6deg; top: 28px; left: 89px; z-index: 2; width: 323px; padding: 25px; }
.kf-spend-icon, .kf-receipt-icon { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 13px; margin-bottom: 19px; color: #43805c; background: #e2efe5; }
.kf-spend-icon svg, .kf-receipt-icon svg { width: 31px; height: 31px; }
.kf-spend-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kf-spend-head b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.kf-spend-head small { font-size: 9px; color: #8b949c; }
.kf-spend-total { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 14px; }
.kf-spend-total b { font-size: 49px; font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.kf-spend-total small { font-size: 11px; color: #8b949c; }
.kf-budget-bar { height: 6px; border-radius: 4px; background: #eaf0ed; overflow: hidden; }
.kf-budget-bar i { display: block; width: 57.333%; height: 100%; background: #7eac90; border-radius: inherit; transform-origin: left; }
.kf-budget-left { display: block; margin: 10px 0 20px; font-size: 11px; color: #719181; }
.kf-spend dl { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 12px; color: #87919a; }
.kf-spend dd { color: #47525a; text-align: right; }
.kf-spend > p { border-top: 1px solid #edf0f3; margin-top: 17px; padding-top: 14px; font-size: 11px; line-height: 1.5; color: #75828c; }
.kf-receipt { --r: 12deg; top: 124px; left: 340px; width: 280px; height: 340px; padding: 25px; }
.kf-receipt-icon { color: #4876a0; background: #e5eff8; }
.kf-receipt > small { display: block; font-size: 9px; letter-spacing: .07em; color: #88939c; }
.kf-receipt > b { display: block; font-size: 23px; letter-spacing: -.02em; margin: 14px 0; }
.kf-receipt > strong { display: block; font-size: 33px; font-weight: 500; }
.kf-receipt > p { font-size: 13px; line-height: 1.6; margin: 12px 0; color: #89929a; }

/* Generated gameplay artwork sits inside the native-looking message card. */
.kd-im-game { --r: -7deg; top: 84px; left: 96px; width: 397px; border-radius: 25px; overflow: hidden; background: #fff; box-shadow: 0 30px 65px #07162680; }
.kf-game-label { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; font-size: 11px; color: #80909b; }
.kf-game-label > b { font-weight: 500; }
.kf-game-art { display: block; width: calc(100% - 26px); height: 225px; margin: 0 13px; border-radius: 9px; object-fit: cover; }
.kd-game-meta { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; }
.kd-game-meta b { font-size: 23px; font-weight: 600; letter-spacing: -.03em; }
.kd-game-meta small { color: #80919e; font-size: 12px; }
.kf-game-chat { --r: 5deg; position: absolute; top: 32px; left: 370px; font-size: 16px; background: #eef3f8; box-shadow: 0 8px 20px #07162630; }
.kf-game-reply { --r: 3deg; position: absolute; right: 49px; bottom: 21px; font-size: 16px; box-shadow: 0 8px 20px #07162630; }

@media (hover: hover) {
    .kd-feat-demo:hover .kf-scene { transform: scale(1.035); }
    .kf-voice:hover .kf-scene { transform: rotate(180deg) scale(1.08); }
    .kd-feat-demo:hover .kf-object { transform: translateY(-4px) rotate(var(--r, 0deg)); }
}
/* CSS fallback scaling keeps the illustrations usable without JavaScript. */
@container (max-width: 600px) { .kf-canvas { --kf-scale: .9; } }
@container (max-width: 520px) { .kf-canvas { --kf-scale: .8; } }
@container (max-width: 440px) { .kf-canvas { --kf-scale: .7; } }
@container (max-width: 380px) { .kf-canvas { --kf-scale: .6; } }
@container (max-width: 330px) { .kf-canvas { --kf-scale: .515; } }
@container (max-width: 280px) { .kf-canvas { --kf-scale: .405; } }
@media (max-width: 900px) {
    .kd-more { padding-top: 80px; }
    .kd-more-head { margin-bottom: 20px; }
    .kd-feat, .kd-feat:nth-of-type(even) { grid-template-columns: 1fr; gap: 26px; padding: 40px 0; }
    .kd-feat:nth-of-type(even) .kd-feat-demo { order: 0; }
    .kd-feat-copy p { max-width: 45ch; }
}
@media (max-width: 480px) {
    .kd-more { padding-inline: 20px; }
    .kd-more-head .kd-sec-title { font-size: 43px; }
    .kd-more-lede { font-size: 15px; }
    .kd-feat-copy h3 { font-size: 37px; }
    .kd-feat-copy p { font-size: 15px; margin-top: 13px; }
    .kd-feat-n { margin-bottom: 16px; }
    .kd-feat-demo { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .kf-object, .kf-scene { transition: none; }
    .kd-js .kd-feat-demo:not(.is-in) .kf-object { opacity: 1; transform: rotate(var(--r, 0deg)); }
    .kd-feat-demo.is-in .kd-wave i { animation: none; }
}