/* Small product demonstrations, using unmodified app screenshots. */
.product-visual{--visual-sage:#bfd3a9;--visual-paper:#eef2e8;position:relative;margin:28px 0 8px;min-width:0;text-align:left;isolation:isolate}
.visual-stage{position:relative;height:320px;overflow:hidden;border:1px solid #b9cfb222;border-radius:18px;background:radial-gradient(ellipse at 50% 65%,#34473755,transparent 72%),#101d26;isolation:isolate}
.visual-stage:after{content:'';position:absolute;inset:auto 0 0;height:45px;background:linear-gradient(transparent,#101d26);pointer-events:none;z-index:7}
.product-visual figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:#8fa59f;font-size:10px;line-height:1.6;letter-spacing:.015em;font-weight:400}
.visual-replay{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;border:1px solid #aec59c35;border-radius:20px;background:transparent;color:#c5d5bc;padding:5px 9px;font:inherit;cursor:pointer}
.visual-replay:hover{background:#b8ceb412}.visual-replay:focus-visible{outline:2px solid #d9e997;outline-offset:3px}
.visual-piece{position:absolute;transform-origin:center center;will-change:transform}
.mini-window{border:1px solid #ffffff26;border-radius:12px;overflow:hidden;background:#192b43;box-shadow:0 20px 40px #0005}
.mini-toolbar{display:flex;align-items:center;gap:4px;height:24px;padding:0 11px;background:#243749;color:#bdcbbf;font:7px Outfit,sans-serif;letter-spacing:.13em;white-space:nowrap}
.mini-toolbar i{width:4px;height:4px;border-radius:50%;background:#8aa785;opacity:.8}.mini-toolbar span{margin-left:5px}
.ui-slice{position:relative;overflow:hidden;aspect-ratio:1.65;background:#192b43}
.ui-slice img{position:absolute;display:block;width:100%;height:auto;max-width:none;left:0;top:0;transform:translateY(var(--crop-y,-32%));pointer-events:none}
.ui-slice.crop-chart{--crop-y:-64%;aspect-ratio:1.5}.ui-slice.crop-calendar{--crop-y:-14%;aspect-ratio:1.7;background:#fff}.ui-slice.crop-result{--crop-y:-21%;aspect-ratio:1.65;background:#fff}.ui-slice.crop-table{--crop-y:-48%;aspect-ratio:1.7;background:#fff}
.visual-chip{position:absolute;display:flex;align-items:center;gap:7px;padding:8px 12px;background:#edf2e7;color:#30472f;border:1px solid #ffffff55;border-radius:7px;box-shadow:0 10px 25px #0003;font-size:10px;font-weight:600;white-space:nowrap;z-index:6}
.visual-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}.visual-chip.dark{background:#294136;color:#dce8ca;border-color:#b8ceb433}
.visual-kicker{position:absolute;top:20px;left:22px;color:#98ad9b;font:9px Outfit,sans-serif;letter-spacing:.17em;z-index:6}
/* Market: the chart and its explanation become two separate layers. */
.visual-market .visual-back{width:70%;left:7%;top:60px;rotate:-5deg;opacity:.7}
.visual-market .visual-front{width:74%;left:20%;top:135px;rotate:3deg;z-index:3}
.visual-market .visual-chip{left:8%;top:242px;rotate:-3deg}
.visual-market .visual-chip.dark{left:auto;right:9%;top:53px;rotate:4deg}
/* Calendar: a date tile, the schedule and the published explanation. */
.visual-calendar .date-tile{position:absolute;top:58px;left:7%;width:70px;height:84px;border-radius:11px;background:#e8eee0;color:#2d4935;box-shadow:0 16px 30px #0004;rotate:-7deg;text-align:center;padding-top:12px;z-index:3}
.date-tile small{font:9px Outfit,sans-serif;letter-spacing:.12em;display:block}.date-tile b{font:500 37px Outfit,sans-serif;display:block;margin-top:4px}
.visual-calendar .visual-back{width:72%;left:21%;top:45px;rotate:4deg}
.visual-calendar .visual-front{width:68%;left:11%;top:164px;rotate:-4deg;z-index:4}
.visual-calendar .visual-chip{right:6%;top:248px}
.visual-calendar .visual-arrow{position:absolute;left:8%;top:150px;width:25px;height:44px;color:#a7c18b;font-size:30px;z-index:4}
/* Read the real summary, then the numbers underneath it. */
.visual-reading .visual-back{width:75%;left:8%;top:53px;rotate:-4deg}
.visual-reading .visual-front{width:76%;left:18%;top:168px;rotate:3deg;z-index:3}
.visual-reading .visual-chip{right:8%;top:39px}.visual-reading .visual-chip.dark{right:auto;left:6%;top:260px}
/* Multilingual reading: visual language tiles around the original app. */
.visual-languages .locale-halo{position:absolute;width:226px;height:226px;border:1px solid #b8ceb423;border-radius:50%;left:calc(50% - 113px);top:35px;rotate:-20deg}
.locale-halo:after{content:'';position:absolute;inset:20px;border:1px dashed #b8ceb41c;border-radius:50%}
.visual-languages .visual-back{width:62%;left:19%;top:116px;rotate:-3deg;z-index:2}
.locale-tile{position:absolute;display:grid;place-items:center;width:66px;height:74px;border:1px solid #d3dfb960;border-radius:13px;background:#d9e3d2;color:#304933;box-shadow:0 17px 32px #0004;z-index:4;font:600 29px/1 Georgia,serif;rotate:var(--r,0deg)}
.locale-tile small{font:8px Outfit,sans-serif;letter-spacing:.12em;align-self:start}.locale-tile strong{align-self:end;padding-bottom:8px;font-weight:500}
.locale-ko{left:9%;top:49px;--r:-9deg}.locale-en{right:12%;top:40px;--r:8deg;background:#293e33;color:#dce8ce}.locale-ja{right:7%;top:220px;--r:6deg;background:#c8d9a4}
.visual-languages .visual-chip{left:7%;top:265px;font-size:9px}
/* Planned API: app data branches into small product windows. */
.visual-api .api-visual-brand{position:absolute;top:37px;left:calc(50% - 31px);width:62px;height:62px;border-radius:15px;background:#e3ebdc;border:1px solid #ffffff88;box-shadow:0 10px 30px #0004;z-index:4;padding:11px}
.api-visual-brand img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}
.api-visual-lines{position:absolute;top:78px;left:0;width:100%;height:140px;fill:none;stroke:#b9d19c;stroke-width:1.3;stroke-dasharray:500;stroke-dashoffset:0;opacity:.7}
.api-mini{position:absolute;top:165px;width:29%;border:1px solid #bccca13a;border-radius:9px;overflow:hidden;background:#172a23;box-shadow:0 15px 30px #0003;z-index:3}
.api-mini:nth-of-type(1){left:3%;rotate:-5deg}.api-mini:nth-of-type(2){left:35.5%;top:182px}.api-mini:nth-of-type(3){right:3%;rotate:5deg}
.api-mini .ui-slice{aspect-ratio:1.1}.api-mini>span{display:block;padding:9px 3px;text-align:center;font-size:9px;color:#dce7d0}
.visual-api .visual-chip{top:109px;left:calc(50% - 49px);font-size:8px;padding:6px 9px}
/* Delivery: distinct, recognisable iPhone and Android silhouettes. */
.visual-devices .mini-phone{position:absolute;top:28px;left:20%;width:133px;height:290px;border:5px solid #687269;background:#122031;border-radius:24px;overflow:hidden;box-shadow:0 16px 40px #0005;rotate:-10deg}
.mini-phone img{width:100%;display:block;height:auto}.mini-phone:after{content:'';position:absolute;top:6px;left:calc(50% - 18px);width:36px;height:10px;background:#030807;border-radius:20px}
.visual-devices .mini-phone.android{left:auto;right:13%;top:65px;rotate:9deg;border-radius:18px;border-color:#415d54;width:133px;height:283px}
.mini-phone.android:after{width:7px;height:7px;left:calc(50% - 3px)}
.visual-devices .visual-chip{left:6%;top:216px}.visual-devices .visual-chip.dark{left:auto;right:6%;top:36px}
/* Card motion runs only while visible, once per entry; replay is optional. */
.product-visual.is-playing .visual-back{animation:visual-rise 1.4s cubic-bezier(.16,1,.3,1) both}
.product-visual.is-playing .visual-front{animation:visual-extract 1.8s cubic-bezier(.16,1,.3,1) .45s both}
.product-visual.is-playing .visual-chip{animation:visual-chip-in 1s cubic-bezier(.16,1,.3,1) 1s both}
.product-visual.is-playing .visual-chip.dark{animation-delay:.25s}
.product-visual.is-playing .date-tile{animation:visual-date-in 1.4s cubic-bezier(.16,1,.3,1) .2s both}
.product-visual.is-playing .visual-arrow{animation:visual-rise 1s .6s both}
.product-visual.is-playing .locale-tile{animation:visual-locale-in 1.6s cubic-bezier(.16,1,.3,1) var(--locale-delay,.2s) both}
.product-visual .locale-en{--locale-delay:.6s}.product-visual .locale-ja{--locale-delay:1s}
.product-visual.is-playing .locale-halo{animation:visual-halo 4s ease-out both}
.product-visual.is-playing .api-visual-lines{animation:visual-connect 2.5s ease .4s both}
.product-visual.is-playing .api-visual-brand{animation:visual-rise 1s cubic-bezier(.16,1,.3,1) both}
.product-visual.is-playing .api-mini{animation:visual-rise 1.4s cubic-bezier(.16,1,.3,1) 1s both}
.product-visual.is-playing .api-mini:nth-of-type(2){animation-delay:1.25s}.product-visual.is-playing .api-mini:nth-of-type(3){animation-delay:1.5s}
.product-visual.is-playing .mini-phone{animation:visual-phone-in 1.7s cubic-bezier(.16,1,.3,1) both}.product-visual.is-playing .mini-phone.android{animation-delay:.3s}
.product-visual:not(.visual-on-screen) *{animation-play-state:paused!important}
@keyframes visual-rise{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes visual-extract{0%{opacity:0;transform:translate(-28px,-30px) scale(.8)}100%{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes visual-chip-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes visual-date-in{from{opacity:0;transform:translateY(-28px) rotate(-14deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes visual-locale-in{from{opacity:0;transform:translateY(30px) scale(.6)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes visual-halo{from{opacity:0;transform:rotate(-50deg) scale(.7)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes visual-connect{from{stroke-dashoffset:500;opacity:.1}to{stroke-dashoffset:0;opacity:.7}}
@keyframes visual-phone-in{from{opacity:0;transform:translateY(65px) rotate(10deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
/* Large editorial illustrations and compact product cards share the same art. */
.editorial-title .product-visual{margin-top:34px;max-width:470px}.editorial:has(.product-visual){gap:55px;grid-template-columns:1.05fr 1.2fr;align-items:center}
.editorial:has(.product-visual) .editorial-title{position:relative;top:auto}
.page-art>.product-visual{margin:35px 0 0;width:100%}.page-art>.product-visual .visual-stage{height:470px}.page-art>.product-visual .visual-stage>*{transform-origin:center}
.page-art>.product-visual .visual-languages .visual-back{top:190px;width:70%;left:15%}.page-art>.product-visual .locale-ko{top:102px}.page-art>.product-visual .locale-en{top:76px}.page-art>.product-visual .locale-ja{top:310px}.page-art>.product-visual .locale-halo{width:300px;height:300px;left:calc(50% - 150px);top:65px}.page-art>.product-visual .visual-chip{top:379px}
.page-art>.product-visual .api-visual-brand{top:95px}.page-art>.product-visual .api-visual-lines{top:137px}.page-art>.product-visual .api-mini{top:230px}.page-art>.product-visual .api-mini:nth-of-type(2){top:250px}.page-art>.product-visual .visual-api .visual-chip{top:175px}
.download-grid .product-visual{width:100%;order:-1;margin:0 0 20px}.download-grid .visual-stage{height:230px}.download-grid .visual-devices .mini-phone{top:30px;left:calc(50% - 67px);rotate:-7deg}.download-grid .visual-devices .mini-phone.android{right:auto;left:calc(50% - 67px);top:26px;rotate:7deg}.download-grid .product-visual figcaption{font-size:9px}
.visual-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:25px 0 18px}.visual-strip .product-visual{margin:0}.visual-strip .visual-stage{height:290px}.visual-strip .visual-front{top:146px}.visual-strip .visual-kicker{font-size:8px}.visual-strip .visual-chip{font-size:9px}.visual-strip .visual-chip.dark{font-size:8px}
.language-panel .product-visual{width:100%;margin:0}.language-panel .visual-stage{height:360px}.api-flow>.product-visual{margin:0 0 22px}.api-flow>.product-visual .visual-stage{height:300px}.api-flow>.product-visual .api-mini>span{font-size:9px;margin:0;color:#dce7d0}.api-flow>.product-visual figcaption{font-size:10px}.api-flow>.product-visual .mini-toolbar span{margin:0 0 0 5px}
.feature-panel .panel-image{position:relative}.feature-panel .panel-image:after{content:'';position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,#14232f);pointer-events:none}
@media(max-width:1100px){.visual-stage{height:300px}.visual-market .visual-front{top:145px}.visual-strip{gap:14px}.visual-strip .visual-stage{height:260px}.visual-strip .visual-chip{top:225px}.visual-strip .visual-chip.dark{top:48px}.editorial:has(.product-visual){gap:35px}}
@media(max-width:760px){.editorial:has(.product-visual){grid-template-columns:1fr;gap:25px}.editorial-title .product-visual{max-width:none;margin-top:25px}.visual-stage{height:300px}.product-visual figcaption{font-size:9px}.visual-strip{grid-template-columns:1fr;gap:27px;margin-top:30px}.visual-strip .visual-stage{height:300px}.visual-strip .visual-chip{top:245px}.visual-strip .visual-chip.dark{top:48px}.page-art>.product-visual{margin:0}.page-art>.product-visual .visual-stage{height:330px}.page-art:has(>.product-visual){height:auto;min-height:360px;background:none}.page-art>.product-visual .visual-languages .visual-back{top:140px}.page-art>.product-visual .locale-ko{top:60px}.page-art>.product-visual .locale-en{top:42px}.page-art>.product-visual .locale-ja{top:235px}.page-art>.product-visual .locale-halo{width:230px;height:230px;left:calc(50% - 115px);top:38px}.page-art>.product-visual .visual-chip{top:278px}.page-art>.product-visual .api-visual-brand{top:38px}.page-art>.product-visual .api-visual-lines{top:80px}.page-art>.product-visual .api-mini{top:165px}.page-art>.product-visual .api-mini:nth-of-type(2){top:183px}.page-art>.product-visual .visual-api .visual-chip{top:110px}.language-panel .visual-stage{height:310px}.visual-devices .mini-phone{left:17%}.visual-devices .mini-phone.android{right:10%}.download-grid .visual-stage{height:220px}.visual-replay{min-height:28px;padding:5px 10px}.api-flow>.product-visual{width:100%}}
@media(prefers-reduced-motion:reduce){.product-visual *{animation:none!important;will-change:auto}.visual-replay{display:none}}
.api-flow .product-visual span{margin-right:0}
.api-flow .product-visual .visual-chip{display:flex;font-size:8px;color:#30472f}
.api-flow .product-visual figcaption>span{font-size:10px;line-height:1.6;color:#8fa59f}
.api-flow .product-visual .visual-replay span{color:inherit;font:inherit}
.product-visual:not(.visual-on-screen) .visual-piece{will-change:auto}
@media(min-width:761px){.api-flow{width:410px;max-width:100%}}