@font-face { font-family: 'JetBrains Mono AP2'; src: url('/agency-preview2/font/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono AP2'; src: url('/agency-preview2/font/jetbrains-mono-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caveat AP2'; src: url('/agency-preview2/font/caveat-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Caveat AP2'; src: url('/agency-preview2/font/caveat-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } .ap2-mono { font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace, 'Noto Sans Arabic' !important; } .ap2-root ::selection { background: #DD6E3E; color: #fff; } @keyframes ap2Shimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } @keyframes ap2Pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.28; } } @keyframes ap2Rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes ap2Run { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes ap2RunRev { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes ap2SrIn { from { transform: translateY(104%) rotate(2deg); } to { transform: translateY(0) rotate(0); } } @keyframes ap2Draw { from { stroke-dashoffset: var(--len, 60); } to { stroke-dashoffset: 0; } } @keyframes ap2Grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .ap2-nudge-path { stroke-dasharray: var(--len, 60); animation: ap2Draw 1.1s cubic-bezier(0.16,1,0.3,1) 1.5s backwards; } .ap2-sr { display: inline-block; } .ap2-sr-clip { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; } .ap2-sr-in { display: inline-block; animation: ap2SrIn 1.05s cubic-bezier(0.16,1,0.3,1) backwards; } .ap2-ticker { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); } @media (max-width: 720px) { .ap2-ticker { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%); } } .ap2-ticker-run { display: inline-flex; align-items: center; white-space: nowrap; animation: ap2Run linear infinite; will-change: transform; } .ap2-ticker-run.is-rev { animation-name: ap2RunRev; } .ap2-ticker:hover .ap2-ticker-run { animation-play-state: paused; } .ap2-link { position: relative; text-decoration: none; transition: color .25s ease; } .ap2-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(0.16,1,0.3,1); } .ap2-link:hover::after { transform: scaleX(1); } .ap2-btn { transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease, background .25s ease, opacity .25s ease; } .ap2-btn:hover { transform: translateY(-1px); } .ap2-inline { transition: gap .25s ease; } .ap2-inline:hover { gap: 13px; } .ap2-card { transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(0.16,1,0.3,1); } .ap2-card:hover { border-color: rgba(11,11,12,0.22); box-shadow: 0 14px 46px rgba(11,11,12,0.07); transform: translateY(-2px); } .ap2-pixel { image-rendering: pixelated; image-rendering: crisp-edges; } .ap2-face { position: absolute; will-change: transform; } .ap2-face__disc { display: block; border-radius: 999px; overflow: hidden; background: #1B2340; border: 2px solid rgba(255,255,255,0.42); box-shadow: 0 26px 70px rgba(6,10,20,0.5), 0 0 0 6px rgba(255,255,255,0.07); transition: box-shadow .45s ease, border-color .45s ease; } .ap2-face:hover .ap2-face__disc { border-color: rgba(255,255,255,0.72); box-shadow: 0 26px 70px rgba(6,10,20,0.55), 0 0 0 9px rgba(255,255,255,0.12); } .ap2-face img { width: 100%; height: 100%; object-fit: cover; display: block; } .ap2-face__cap { margin-top: 12px; text-align: center; } .ap2-person__id { position: relative; display: grid; } .ap2-person__role, .ap2-person__name { grid-area: 1 / 1; font-size: 16.85px; font-weight: 660; color: #fff; letter-spacing: -0.018em; line-height: 1.2; transition: opacity .34s ease, transform .34s cubic-bezier(0.16,1,0.3,1); } .ap2-person__name { opacity: 0; transform: translateY(6px); color: #FFD9A8; } .ap2-cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); align-items: stretch; } @media (max-width: 940px) { .ap2-cgrid { grid-template-columns: minmax(0, 1fr); } } .ap2-pin.is-on { position: sticky; top: 0; min-height: calc(100 * var(--ap2-vh, 1vh)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(16px, 3vh, 44px); } .ap2-pin.is-on > * { width: 100%; } .ap2-cc { height: 100%; border: 1px solid rgba(224,225,233,0.9); border-radius: 8px; background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(20px) saturate(1.45); backdrop-filter: blur(20px) saturate(1.45); padding: clamp(17px, 1.85vw, 29px); box-shadow: 0 1px 2px rgba(11,15,20,0.05), 0 12px 30px rgba(11,15,20,0.055); overflow: hidden; } .ap2-cc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.819fr); gap: clamp(18px, 2.4vw, 40px); height: 100%; } .ap2-cc-film { position: relative; border-radius: 6px; overflow: hidden; align-self: stretch; min-height: clamp(349px, 34.9vw, 547px); } .ap2-cc-film .ap2-cf { border-radius: 6px; } .ap2-cc-track { display: block; height: 3px; border-radius: 999px; background: rgba(11,15,20,0.09); overflow: hidden; } .ap2-cc-fill { display: block; height: 100%; border-radius: 999px; background: #0B0B0C; transform-origin: left center; transition: width 1.1s cubic-bezier(0.16,1,0.3,1); } .ap2-cc-more { width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid #E3DFD5; border-radius: 12px; background: #fff; cursor: pointer; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 15px; font-weight: 560; color: #0B0B0C; text-align: start; transition: border-color .3s ease, background .3s ease; } .ap2-cc-more:hover { border-color: rgba(11,11,12,0.24); } @media (max-width: 860px) { .ap2-cc-grid { grid-template-columns: minmax(0, 1fr); } .ap2-cc-film { aspect-ratio: 16 / 10; min-height: 0; order: -1; } } .ap2-cf { position: absolute; inset: 0; overflow: hidden; background: #0A0E1C; } .ap2-cf-plane { position: absolute; inset: -4% 0; } .ap2-cf-vid { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; } .ap2-cf-b { position: absolute; border-radius: 999px; will-change: transform; } .ap2-cf-b1 { width: 96%; aspect-ratio: 1; left: -20%; top: -26%; background: radial-gradient(circle, var(--cf-a) 0%, transparent 66%); opacity: 0.62; animation: ap2CfDrift1 17s ease-in-out infinite; } .ap2-cf-b2 { width: 88%; aspect-ratio: 1; right: -24%; bottom: -28%; background: radial-gradient(circle, var(--cf-b) 0%, transparent 66%); opacity: 0.48; animation: ap2CfDrift2 23s ease-in-out infinite; } .ap2-cf-b3 { width: 72%; aspect-ratio: 1; left: 18%; top: 20%; background: radial-gradient(circle, var(--cf-c) 0%, transparent 66%); opacity: 0.54; animation: ap2CfDrift3 29s ease-in-out infinite; } .ap2-cf-grid { position: absolute; inset: -20%; background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 42px 42px; animation: ap2CfPan 24s linear infinite; } .ap2-cf-sweep { position: absolute; inset: -30% -60%; background: linear-gradient(72deg, transparent 40%, rgba(255,255,255,0.20) 50%, transparent 60%); animation: ap2CfRake 11s ease-in-out infinite; } .ap2-cf-noise { position: absolute; inset: -6%; opacity: 0.10; background-image: radial-gradient(rgba(255,255,255,0.85) 0.5px, transparent 0.5px), radial-gradient(rgba(4,8,18,0.85) 0.5px, transparent 0.5px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; will-change: transform; animation: ap2CfJitter 0.9s steps(3) infinite; } .ap2-cf-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(126% 104% at 50% 46%, transparent 52%, rgba(4,8,18,0.52) 100%), linear-gradient(to top, rgba(4,8,18,0.48), transparent 42%); } .ap2-cf-scan { position: absolute; left: 0; right: 0; height: 26%; top: -26%; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.07), transparent); will-change: transform; animation: ap2CfScan 7s linear infinite; } .ap2-cf-frame { position: absolute; inset: 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.40); pointer-events: none; } .ap2-cf-corner { position: absolute; width: 16px; height: 16px; border: 1.5px solid rgba(255,255,255,0.46); opacity: 0; } .ap2-cf.is-live .ap2-cf-corner { opacity: 1; animation: ap2CfCorner .6s cubic-bezier(0.16,1,0.3,1) .15s backwards; } .ap2-cf-c1 { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; transform-origin: top left; } .ap2-cf-c2 { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; transform-origin: top right; } .ap2-cf-c3 { bottom: 26px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; transform-origin: bottom left; } .ap2-cf-c4 { bottom: 26px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; transform-origin: bottom right; } .ap2-cf-bar { position: absolute; left: 15px; right: 15px; bottom: 13px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.26); overflow: hidden; } .ap2-cf-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--cf-a); transform-origin: left center; transform: scaleX(0); animation: ap2CfPlay 9s linear infinite; } .ap2-cf .ap2-cf-b, .ap2-cf .ap2-cf-grid, .ap2-cf .ap2-cf-sweep, .ap2-cf .ap2-cf-noise, .ap2-cf .ap2-cf-scan, .ap2-cf .ap2-cf-bar i { animation-play-state: paused; } .ap2-cf.is-live .ap2-cf-b, .ap2-cf.is-live .ap2-cf-grid, .ap2-cf.is-live .ap2-cf-sweep, .ap2-cf.is-live .ap2-cf-noise, .ap2-cf.is-live .ap2-cf-scan, .ap2-cf.is-live .ap2-cf-bar i { animation-play-state: running; } @keyframes ap2CfCorner { from { transform: scale(0.45); } to { transform: scale(1); } } @keyframes ap2CfDrift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(16%,10%,0) scale(1.14); } 66% { transform: translate3d(6%,-8%,0) scale(0.92); } } @keyframes ap2CfDrift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.06); } 40% { transform: translate3d(-18%,-12%,0) scale(0.9); } 70% { transform: translate3d(-6%,6%,0) scale(1.18); } } @keyframes ap2CfDrift3 { 0%,100% { transform: translate3d(0,0,0) scale(0.9); } 50% { transform: translate3d(-14%,14%,0) scale(1.22); } } @keyframes ap2CfPan { from { transform: translate3d(0,0,0); } to { transform: translate3d(42px,42px,0); } } @keyframes ap2CfRake { 0% { transform: translate3d(-38%,0,0); } 55%,100% { transform: translate3d(38%,0,0); } } @keyframes ap2CfJitter { 0% { transform: translate3d(0,0,0); } 33% { transform: translate3d(-1.5%,1%,0); } 66% { transform: translate3d(1%,-1.5%,0); } 100% { transform: translate3d(0,0,0); } } @keyframes ap2CfScan { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,485%,0); } } @keyframes ap2CfPlay { 0% { transform: scaleX(0); } 96% { transform: scaleX(1); } 100% { transform: scaleX(1); } } .ap2-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); align-items: stretch; padding-block-start: 84px; } .ap2-act-slot { position: relative; display: flex; align-items: stretch; } .ap2-act-slot > .ap2-act { flex: 1 1 auto; min-width: 0; } .ap2-act { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; padding: clamp(18px, 1.8vw, 28px); padding-block-start: calc(75px + clamp(13px, 1.3vw, 21px)); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .ap2-act-face { position: absolute; inset-inline: 0; inset-block-start: -74.5px; margin-inline: auto; z-index: 3; inline-size: 149px; block-size: 149px; border-radius: 50%; overflow: hidden; background: #E9EAF0; box-shadow: 0 0 0 5px #F4F2EC, 0 0 0 6px rgba(11, 15, 20, 0.06), 0 6px 18px rgba(11, 15, 20, 0.16); transition: transform .22s ease; } .ap2-act-slot[data-terminal='true'] .ap2-act-face { background: #2A2D36; box-shadow: 0 0 0 5px #F4F2EC, 0 0 0 6px rgba(11, 15, 20, 0.10), 0 6px 18px rgba(0, 0, 0, 0.28); } .ap2-act-face img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .ap2-act-slot:hover .ap2-act-face img { transform: scale(1.06); } .ap2-act-slot:hover .ap2-act, .ap2-act-slot:hover .ap2-act-face { transform: translateY(-2px); } .ap2-spine { height: 2px !important; } .ap2-act-wash { position: absolute; inset: 0; pointer-events: none; } .ap2-act-mark { transition: transform .5s cubic-bezier(0.16,1,0.3,1); } .ap2-act:hover .ap2-act-mark { transform: scale(1.06) rotate(-4deg); } .ap2-spine { position: relative; height: 2px; margin: 0 auto clamp(26px, 3vw, 44px); width: calc(100% - 2 * clamp(20px, 2vw, 32px) - 74px); max-width: 100%; } .ap2-spine-track { position: absolute; inset: 0; background: rgba(11,15,20,0.10); border-radius: 999px; } .ap2-spine-fill { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(to right, #4A82AC, #B9873F 52%, #DD6E3E); transform-origin: left center; transition: transform 1.5s cubic-bezier(0.16,1,0.3,1) .18s; } .ap2-spine-node { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 999px; border: 3px solid #F4F2EC; transition: opacity .5s ease, transform .7s cubic-bezier(0.16,1,0.3,1); } @media (max-width: 1020px) { .ap2-acts { grid-template-columns: minmax(0, 1fr); } .ap2-spine { display: none; } .ap2-acts { row-gap: 96px; } } .ap2-audit-btn { position: relative; margin-top: 22px; align-self: center; width: 100%; max-width: 300px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--edge, #E0E1E9); background: #FFFFFF; color: #191B23; font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(11,15,20,0.05); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(0.16,1,0.3,1); } .ap2-audit-btn:hover { background: #FCFCFD; box-shadow: 0 4px 14px rgba(11,15,20,0.09); transform: translateY(-1px); } .ap2-audit-btn:active { transform: none; box-shadow: 0 1px 2px rgba(11,15,20,0.05); } .ap2-audit-btn:focus-visible { outline: 2px solid #DD6E3E; outline-offset: 2px; } .ap2-audit-btn svg { transition: transform .35s cubic-bezier(0.16,1,0.3,1); } .ap2-audit-btn > span { flex: 1; text-align: center; } .ap2-audit-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .62s cubic-bezier(0.16,1,0.3,1); } .ap2-audit-wrap[data-open="true"] { grid-template-rows: 1fr; } .ap2-audit-clip { overflow: hidden; min-height: 0; } .ap2-audit { margin-top: clamp(16px, 1.8vw, 26px); border: 1px solid #E0E1E9; border-radius: 6px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(11,15,20,0.06); padding: clamp(20px, 2.4vw, 38px); opacity: 0; transform: translateY(-10px); transition: opacity .38s ease, transform .5s cubic-bezier(0.16,1,0.3,1); } .ap2-audit-wrap[data-open="true"] .ap2-audit { opacity: 1; transform: none; transition-delay: .12s; } .ap2-audit-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: clamp(18px, 2vw, 28px); border-bottom: 1px solid #E0E1E9; } .ap2-audit-h { margin: 0 0 8px; font-size: clamp(18.2px, 1.5vw, 24.2px); font-weight: 600; line-height: 1.25; color: #191B23; } .ap2-audit-lede { margin: 0; max-width: 64ch; font-size: 15.35px; font-weight: 460; line-height: 1.6; color: #4B4F58; } .ap2-audit-count { font-size: 12.4px; letter-spacing: 0.13em; text-transform: uppercase; color: #6C707A; white-space: nowrap; padding-bottom: 3px; } .ap2-audit-headside { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; } .ap2-audit-all { appearance: none; border: 1px solid #E0E1E9; background: #FFFFFF; border-radius: 999px; padding: 7px 14px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 13.2px; font-weight: 550; color: #33373F; cursor: pointer; white-space: nowrap; transition: border-color .2s ease, background .2s ease, color .2s ease; } .ap2-audit-all:hover { border-color: #C9CBD4; background: #F7F7FA; } .ap2-audit-all:focus-visible { outline: 2px solid #DD6E3E; outline-offset: 2px; } .ap2-audit-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2vw, 34px); align-items: start; } .ap2-audit-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ap2-audit-group { border: 1px solid #E9EAEF; border-radius: 8px; background: #FDFDFE; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .ap2-audit-group:hover { border-color: #D9DBE3; } .ap2-audit-group[data-open='true'] { border-color: #D9DBE3; background: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 15, 20, 0.05); } .ap2-audit-gh { margin: 0; font-size: inherit; font-weight: inherit; } .ap2-audit-gbtn { appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 13px 14px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 15.55px; font-weight: 600; line-height: 1.3; color: #191B23; text-align: start; cursor: pointer; } .ap2-audit-gbtn:focus-visible { outline: 2px solid #DD6E3E; outline-offset: -2px; border-radius: 8px; } .ap2-audit-gt { flex: 1; min-width: 0; } .ap2-audit-gc { flex: none; font-size: 12.2px; font-weight: 600; letter-spacing: 0.06em; color: #6C707A; background: #F1F2F6; border-radius: 999px; padding: 3px 9px; } .ap2-audit-group[data-open='true'] .ap2-audit-gc { background: #FBEDE6; color: #B4552A; } .ap2-audit-gv { flex: none; color: #8A8F99; transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1); } .ap2-audit-group[data-open='true'] .ap2-audit-gv { transform: rotate(180deg); } .ap2-audit-gwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(0.16, 1, 0.3, 1); } .ap2-audit-group[data-open='true'] .ap2-audit-gwrap { grid-template-rows: 1fr; } .ap2-audit-gclip { overflow: hidden; min-height: 0; padding-inline: 14px; } .ap2-audit-group[data-open='true'] .ap2-audit-gclip { padding-block-end: 12px; } .ap2-audit-gn { font-size: 12.4px; font-weight: 600; letter-spacing: 0.1em; color: #DD6E3E; flex: none; } @media (max-width: 900px) { .ap2-audit-cols { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } } .ap2-audit-note { margin: 0 0 9px; font-size: 13.5px; font-weight: 460; line-height: 1.5; color: #6C707A; } .ap2-audit-items { margin: 0; padding: 0; list-style: none; } .ap2-audit-items li { position: relative; padding: 4px 0; padding-inline-start: 15px; font-size: 14.35px; font-weight: 450; line-height: 1.5; color: #33373F; } .ap2-audit-items li::before { content: ''; position: absolute; inset-inline-start: 0; top: 11.5px; width: 5px; height: 5px; border-radius: 999px; background: rgba(11,15,20,0.24); } @media (prefers-reduced-motion: reduce) { .ap2-audit-wrap, .ap2-audit, .ap2-audit-btn, .ap2-audit-btn svg { transition: none; } .ap2-audit-btn:hover { transform: none; } } .ap2-plan-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .62s cubic-bezier(0.16,1,0.3,1); } .ap2-plan-wrap[data-open="true"] { grid-template-rows: 1fr; } .ap2-plan-clip { overflow: hidden; min-height: 0; } .ap2-plan { margin-top: clamp(16px, 1.8vw, 26px); opacity: 0; transform: translateY(-10px); transition: opacity .38s ease, transform .5s cubic-bezier(0.16,1,0.3,1); } .ap2-plan-wrap[data-open="true"] .ap2-plan { opacity: 1; transform: none; transition-delay: .1s; } .ap2-plan-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: clamp(18px, 2vw, 26px); border-bottom: 1px solid #E0E1E9; } .ap2-plan-h { margin: 0 0 8px; font-size: clamp(19px, 1.55vw, 25px); font-weight: 500; letter-spacing: -0.014em; line-height: 1.25; color: #1F2328; } .ap2-plan-lede { margin: 0; max-width: 68ch; font-size: 15.5px; font-weight: 400; line-height: 1.65; color: #5C6370; } .ap2-plan-count { font-size: 12.4px; letter-spacing: 0.13em; text-transform: uppercase; color: #4B4F58; white-space: nowrap; padding-bottom: 3px; } .ap2-plan-split { display: grid; grid-template-columns: minmax(292px, 27%) minmax(0, 1fr); gap: 0; border: 1px solid #E6E7EE; border-radius: 16px; background: #FFFFFF; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 12px 36px rgba(16,24,40,0.05); align-items: stretch; } .ap2-plan-index { display: flex; flex-direction: column; gap: clamp(25px, 2.1vw, 36px); padding: clamp(20px, 1.9vw, 30px) clamp(13px, 1.1vw, 18px); background: #FAFAFC; border-inline-end: 1px solid #ECEDF3; } .ap2-plan-fam { display: block; } .ap2-plan-famh { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; padding-inline: 4px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.006em; color: #0B0B0C; } .ap2-plan-famn { font-size: 11.6px; font-weight: 500; color: var(--tone); } .ap2-plan-famname { flex: 1 1 auto; min-inline-size: 0; } .ap2-plan-famc { flex: none; min-inline-size: 22px; padding: 2px 7px; border-radius: 999px; background: #EFF0F5; font-size: 11px; font-weight: 500; text-align: center; color: rgba(11,11,12,0.72); } .ap2-plan-fambar { display: block; block-size: 2px; border-radius: 999px; margin-block-end: 11px; background: var(--tone); opacity: 0.55; } @supports (background: color-mix(in srgb, red 5%, white)) { .ap2-plan-fambar { opacity: 1; background: linear-gradient( to right, var(--tone) 0 30px, color-mix(in srgb, var(--tone) 22%, transparent) 30px ); } [dir="rtl"] .ap2-plan-fambar { background: linear-gradient( to left, var(--tone) 0 30px, color-mix(in srgb, var(--tone) 22%, transparent) 30px ); } } .ap2-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .ap2-plan-row { position: relative; inline-size: 100%; display: flex; align-items: center; gap: 12px; padding-block: 14.5px; padding-inline: 15px 13px; border: 0; border-radius: 11px; background: transparent; text-align: start; cursor: pointer; color: rgba(11,11,12,0.874); transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .ap2-plan-row::before { content: ''; position: absolute; inset-block: 9px; inset-inline-start: 0; inline-size: 3px; border-radius: 999px; background: var(--tone); opacity: 0; transition: opacity .18s ease; } .ap2-plan-row:hover { background: rgba(11,11,12,0.038); color: #0B0B0C; } .ap2-plan-row:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; } .ap2-plan-row.is-on { background: #FFFFFF; color: #0B0B0C; box-shadow: 0 0 0 1px #E3E4EC, 0 2px 4px rgba(16,24,40,0.05), 0 8px 18px rgba(16,24,40,0.05); } .ap2-plan-row.is-on::before { opacity: 1; inset-block: 5px; inline-size: 3.5px; } .ap2-plan-rowtile { flex-shrink: 0; inline-size: 37px; block-size: 37px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #F2F3F7; border: 1px solid #E4E5EC; color: var(--brand); } .ap2-plan-rowtile svg { inline-size: 21px; block-size: 21px; } @supports (background: color-mix(in srgb, red 5%, white)) { .ap2-plan-rowtile { background: color-mix(in srgb, var(--brand) 11%, #FFFFFF); border-color: color-mix(in srgb, var(--brand) 24%, #FFFFFF); } } .ap2-plan-rowtile[data-logo] { background: #FFFFFF; border-color: #E4E5EC; } .ap2-plan-rowname { flex: 1 1 auto; min-inline-size: 0; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 16.4px; font-weight: 450; letter-spacing: -0.008em; line-height: 1.3; } .ap2-plan-rown { flex-shrink: 0; min-inline-size: 22px; padding: 2px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 500; text-align: center; color: rgba(11,11,12,0.685); } .ap2-plan-row.is-on .ap2-plan-rown { color: var(--tone); background: #F3F4F8; } .ap2-plan-row:hover .ap2-plan-rown { background: #F3F4F8; } .ap2-plan-stage { position: relative; min-inline-size: 0; block-size: 100%; } .ap2-plan-pane { position: relative; overflow: hidden; min-block-size: 100%; background: #FFFFFF; padding: clamp(26px, 2.4vw, 44px); } .ap2-plan-pane::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: var(--tone); opacity: 0.5; } .ap2-plan-pane { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: clamp(18px, 1.6vw, 26px); } .ap2-plan-pane[hidden] { display: none; } .ap2-plan-pane .ap2-plan-note, .ap2-plan-pane .ap2-plan-sd, .ap2-plan-pane .ap2-plan-st { max-inline-size: 74ch; } @media (min-width: 1180px) { .ap2-plan-pane { grid-template-rows: auto 1fr; } .ap2-plan-panerail { border-block-end: 1px solid #ECEDF3; padding-block-end: clamp(16px, 1.4vw, 24px); } .ap2-plan-pane .ap2-plan-note { max-inline-size: 86ch; } .ap2-plan-pane .ap2-plan-sd, .ap2-plan-pane .ap2-plan-st { max-inline-size: none; } .ap2-plan-pane .ap2-plan-steps { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(14px, 1.2vw, 20px); block-size: 100%; grid-auto-rows: minmax(min-content, 1fr); } .ap2-plan-pane .ap2-plan-steps li, .ap2-plan-pane .ap2-plan-steps li:first-child, .ap2-plan-pane .ap2-plan-steps li:last-child { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: clamp(18px, 1.6vw, 28px); padding: clamp(20px, 1.7vw, 30px) clamp(20px, 1.8vw, 32px); border: 1px solid #E6E7EE; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 10px 24px rgba(16,24,40,0.04); } .ap2-plan-pane .ap2-plan-steps li .ap2-plan-art { display: block; align-self: center; inline-size: clamp(180px, 18.7vw, 290px); aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid #E6E7EE; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(16,24,40,0.05); line-height: 0; color: var(--tone); } .ap2-plan-pane .ap2-plan-steps li .ap2-plan-art > svg, .ap2-plan-pane .ap2-plan-steps li .ap2-plan-art > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .ap2-plan-pane .ap2-plan-steps li .ap2-plan-step { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(7px, 0.6vw, 11px); } .ap2-plan-pane .ap2-plan-steps li .ap2-plan-sd { max-inline-size: 64ch; } .ap2-plan-pane .ap2-plan-steps li .ap2-plan-rail::before { content: none; } .ap2-plan-pane .ap2-plan-steps li .ap2-plan-rail { display: block; block-size: 22px; inline-size: 22px; align-self: start; margin-block-start: 1px; margin-block-end: 0; } .ap2-plan-split { align-items: stretch; } .ap2-plan-pane { min-block-size: 100%; } .ap2-plan-panebody { display: grid; } .ap2-plan-pane .ap2-plan-steps { align-content: start; } .ap2-plan-pane .ap2-plan-note { font-size: 17.2px; } .ap2-plan-pane .ap2-plan-st { font-size: 18.2px; line-height: 1.34; } .ap2-plan-pane .ap2-plan-sd { font-size: 15.8px; line-height: 1.72; } .ap2-plan-pane .ap2-plan-name { font-size: 22px; font-weight: 450; } .ap2-plan-pane .ap2-plan-step { gap: 7px; } } .ap2-plan-panerail { min-inline-size: 0; } .ap2-plan-panebody { min-inline-size: 0; } @media (prefers-reduced-motion: no-preference) { .ap2-plan-pane { animation: ap2PlanPane .3s cubic-bezier(0.16,1,0.3,1) both; } } @keyframes ap2PlanPane { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ap2-plan-pane:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; } .ap2-plan-panehead { display: flex; align-items: center; gap: 14px; margin-block-end: clamp(12px, 1vw, 16px); } .ap2-plan-paneid { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; } .ap2-plan-panefam { font-size: 11.3px; font-weight: 500; letter-spacing: 0.08em; color: var(--tone); } @media (max-width: 1080px) { .ap2-plan-split { grid-template-columns: minmax(0, 1fr); gap: 0; } .ap2-plan-art { display: none; } .ap2-plan-index { position: static; border-inline-end: 0; border-block-end: 1px solid #ECEDF3; } } .ap2-plan-tile { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #F2F3F7; border: 1px solid #E4E5EC; color: var(--brand); } @supports (background: color-mix(in srgb, red 5%, white)) { .ap2-plan-tile { background: color-mix(in srgb, var(--brand) 12%, #FFFFFF); border-color: color-mix(in srgb, var(--brand) 26%, #FFFFFF); } } .ap2-plan-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } .ap2-plan-tile[data-logo] { background: #FFFFFF; border-color: #E4E5EC; box-shadow: none; } @supports (background: color-mix(in srgb, red 5%, white)) { .ap2-plan-tile[data-logo] { background: #FFFFFF; border-color: color-mix(in srgb, var(--brand) 20%, #E4E5EC); } } .ap2-plan-name { margin: 0; font-size: 18.4px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; color: #1F2328; } .ap2-plan-note { margin: 0; padding-inline-start: 0; font-size: 15.3px; font-weight: 400; line-height: 1.62; color: #5C6370; min-block-size: 3.2em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .ap2-plan-card.is-open .ap2-plan-note { -webkit-line-clamp: unset; overflow: visible; } .ap2-plan-steps { position: relative; margin: 0; padding: 0; list-style: none; } .ap2-plan-rail { position: relative; flex: 0 0 22px; align-self: stretch; } .ap2-plan-rail::before { content: ''; position: absolute; inset-block-start: 22px; inset-block-end: -30px; inset-inline-start: 10.5px; width: 1px; background: #E6E7EC; } @supports (background: color-mix(in srgb, red 5%, white)) { .ap2-plan-rail::before { background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 34%, transparent) 0%, color-mix(in srgb, var(--tone) 14%, transparent) 100%); } } .ap2-plan-steps li:last-child .ap2-plan-rail::before { content: none; } .ap2-plan-steps li { position: relative; display: flex; align-items: stretch; gap: 12px; padding: 15px 0; } .ap2-plan-steps li:last-child { padding-bottom: 0; } .ap2-plan-steps li:first-child { padding-top: 0; } .ap2-plan-step { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ap2-plan-st { font-size: 15.8px; font-weight: 500; letter-spacing: -0.008em; line-height: 1.36; color: #1F2328; } .ap2-plan-sd { font-size: 14.4px; font-weight: 400; line-height: 1.62; color: #5C6370; } .ap2-plan-n { position: relative; flex-shrink: 0; width: 22px; height: 22px; min-width: 22px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #FFFFFF; border: 1px solid #E6E7EC; font-size: 11.3px; font-weight: 500; letter-spacing: 0.02em; color: var(--tone); } .ap2-plan-steps li .ap2-plan-n { margin-top: 0; } .ap2-plan-steps li .ap2-plan-n { position: absolute; inset-block-start: 0; inset-inline-start: 0; } @supports (background: color-mix(in srgb, red 5%, white)) { .ap2-plan-n { border-color: color-mix(in srgb, var(--tone) 34%, #FFFFFF); } } .ap2-plan-steps li:last-child .ap2-plan-n { background: var(--tone); border-color: var(--tone); color: #FFFFFF; } @media (max-width: 1180px) { .ap2-plan-groups { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 3vw, 46px); } } @media (max-width: 620px) { .ap2-audit-btn { display: none; } } @media (prefers-reduced-motion: reduce) { .ap2-plan-wrap, .ap2-plan, .ap2-plan-card { transition: none; } .ap2-plan-card:hover { transform: none; } .ap2-plan-fold, .ap2-plan-chev { transition: none; } } .ap2-sign { position: relative; overflow: hidden; margin-top: clamp(22px, 2.6vw, 36px); padding: clamp(20px, 2.2vw, 30px); border-radius: 20px; border: 1px solid #E3DFD5; background: #fff; display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); flex-wrap: wrap; box-shadow: 0 2px 4px rgba(11,15,20,0.04), 0 18px 46px rgba(11,15,20,0.05); } .ap2-sign-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 160% at 6% 50%, rgba(221,110,62,0.10) 0%, transparent 58%); } .ap2-sign-face { width: 82px; height: 82px; border-radius: 999px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 3px 16px rgba(11,15,20,0.22); transition: transform .45s cubic-bezier(0.16,1,0.3,1); } .ap2-sign-face img { width: 100%; height: 100%; object-fit: cover; display: block; } .ap2-sign:hover .ap2-sign-face:first-child { transform: translateX(-7px) rotate(-3deg); } .ap2-sign:hover .ap2-sign-face:last-child { transform: translateX(7px) rotate(3deg); } .ap2-prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; } .ap2-prog > span { display: block; height: 100%; width: 100%; background: linear-gradient(to right, #4A82AC, #DD6E3E); transform: scaleX(0); transform-origin: left center; } .ap2-seam { padding: 14px 0; overflow: hidden; } .ap2-seam-rail { position: relative; flex: 1; height: 1px; min-width: 40px; overflow: hidden; } .ap2-seam-rail i { position: absolute; top: -1px; left: 0; width: 30px; height: 3px; border-radius: 999px; animation: ap2Packet 4.5s linear infinite; } @keyframes ap2Packet { 0% { transform: translateX(-40px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(100% + 40px)); opacity: 0; } } .ap2-btn { position: relative; overflow: hidden; } .ap2-btn::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.30), transparent); transition: left .65s cubic-bezier(0.16,1,0.3,1); pointer-events: none; } .ap2-btn:hover::after { left: 130%; } .ap2-chip { transition: transform .3s cubic-bezier(0.16,1,0.3,1), border-color .3s ease, background .3s ease; } .ap2-chip:hover { transform: translateY(-2px); } .ap2-cc:hover .ap2-cf-plane { transform: scale(1.09); } .ap2-cf-plane { transition: transform .9s cubic-bezier(0.16,1,0.3,1); } .ap2-faq-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 0; transition: background .3s ease, padding-left .35s cubic-bezier(0.16,1,0.3,1); } .ap2-faq-row:hover { background: rgba(255,255,255,0.55); } .ap2-faq-tag { min-width: 74px; text-align: center; justify-self: start; font-size: 14.75px; padding: 4px 9px; border: 1px solid transparent; border-radius: 999px; } @media (max-width: 720px) { .ap2-faq-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'tag plus' 'q plus'; column-gap: 12px; row-gap: 7px; padding: 15px 0; } .ap2-faq-tag { grid-area: tag; min-width: 0; font-size: 12.6px; padding: 3px 8px; } .ap2-faq-q { grid-area: q; } .ap2-faq-plus { grid-area: plus; align-self: center; } } .ap2-chan { transition: transform .4s cubic-bezier(0.16,1,0.3,1), border-color .4s ease, box-shadow .4s ease; } .ap2-chan:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,15,20,0.08); } @media (prefers-reduced-motion: reduce) { .ap2-seam-rail i, .ap2-prog > span { animation: none !important; } .ap2-btn::after { display: none; } } .ap2-wr-clip { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.22em; margin-bottom: -0.14em; } .ap2-wr-in { display: inline-block; transform: translateY(136%) rotate(1.6deg); opacity: 0; transition: transform .95s cubic-bezier(0.16,1,0.3,1), opacity .7s ease; } .ap2-wr.is-in .ap2-wr-in { transform: translateY(0) rotate(0); opacity: 1; } .ap2-type-at { position: relative; } .ap2-type-at::after { content: ''; position: absolute; inset-inline-start: calc(100% + 0.055em); top: 50%; margin-top: -0.51em; width: 0.075em; height: 1.02em; background: currentColor; pointer-events: none; animation: ap2Caret 1.05s steps(1, end) infinite; } .ap2-type-at.is-start::after { inset-inline-start: 0; } .ap2-type-at.is-done::after { animation: ap2CaretOut .45s ease .35s forwards; } @keyframes ap2Caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes ap2CaretOut { to { opacity: 0; } } .ap2-type-new { animation: ap2TypeIn .16s ease both; } @keyframes ap2TypeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ap2-type-at::after { display: none; } .ap2-type-new { animation: none; } } .ap2-shine { position: relative; } .ap2-shine::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.55), transparent 42%); z-index: 0; } .ap2-shine:hover::before { opacity: 1; } .ap2-shine--dark::before { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.13), transparent 46%); } .ap2-shine::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease; padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--edge, rgba(221,110,62,0.85)), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; z-index: 1; } .ap2-shine:hover::after { opacity: 1; } .ap2-spot { position: relative; } .ap2-spot > .ap2-spot-light { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--slit, 0) * 1); transition: opacity .6s ease; background: radial-gradient(560px circle at var(--sx, 50%) var(--sy, 50%), rgba(221,110,62,0.16), rgba(91,138,175,0.10) 34%, transparent 62%); z-index: 0; } .ap2-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ap2-roll { display: inline-block; overflow: hidden; vertical-align: middle; height: 1.35em; line-height: 1.35em; transition: transform .55s cubic-bezier(0.16,1,0.3,1); } .ap2-roll > i { display: block; font-style: normal; line-height: 1.35em; } .ap2-roll > i[data-roll]::before { content: attr(data-roll); } .ap2-roll:hover, a:hover > .ap2-roll { transform: translateY(-1.35em); } .ap2-nav { transition: transform .5s cubic-bezier(0.16,1,0.3,1), background .45s ease, border-color .45s ease; } .ap2-nav.is-away { transform: translateY(-102%); } .ap2-person img { filter: saturate(0.82) contrast(1.02); } .ap2-face__disc img { transition: transform 1.2s cubic-bezier(0.16,1,0.3,1); } .ap2-face:hover .ap2-face__disc img { transform: scale(1.07); } .ap2-beam { position: relative; isolation: isolate; } .ap2-beam::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--beam, 0deg), transparent 0turn, #DD6E3E 0.12turn, transparent 0.24turn, transparent 1turn); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: ap2Beam 4.5s linear infinite; z-index: -1; } @property --beam { syntax: '<angle>'; initial-value: 0deg; inherits: false; } @keyframes ap2Beam { to { --beam: 360deg; } } .ap2-ticker-run { transform: translateX(calc(var(--vel, 0) * -26px)); } .ap2-edge { position: absolute; top: 0; left: 0; right: 0; height: 1px; overflow: hidden; } .ap2-edge > i { display: block; height: 100%; width: 100%; background: linear-gradient(to right, transparent, #DD6E3E, transparent); transform: scaleX(0); transform-origin: center; transition: transform 1.4s cubic-bezier(0.16,1,0.3,1) .1s; } .ap2-edge.is-in > i { transform: scaleX(1); } .ap2-draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); } .is-in .ap2-draw { transition: stroke-dashoffset 1.6s cubic-bezier(0.16,1,0.3,1) .15s; stroke-dashoffset: 0; } .ap2-dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); } .is-in .ap2-dot { transition: opacity .4s ease, transform .6s cubic-bezier(0.16,1,0.3,1); opacity: 1; transform: scale(1); } .ap2-bar { transform-box: fill-box; transform-origin: bottom center; transform: scaleY(0); } .is-in .ap2-bar { transition: transform .9s cubic-bezier(0.16,1,0.3,1); transform: scaleY(1); } .ap2-arc { stroke-dasharray: var(--arc, 0) 999; stroke-dashoffset: var(--arc, 0); } .is-in .ap2-arc { transition: stroke-dashoffset 1.4s cubic-bezier(0.16,1,0.3,1) .2s; stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { .ap2-wr-in { transform: none !important; opacity: 1 !important; } .ap2-shine::before, .ap2-shine::after, .ap2-spot > .ap2-spot-light { display: none; } .ap2-beam::before { animation: none; } .ap2-ticker-run { transform: none; } .ap2-edge > i, .ap2-draw, .ap2-dot, .ap2-bar, .ap2-arc { transition: none !important; } .ap2-edge > i { transform: scaleX(1); } .ap2-draw, .ap2-arc { stroke-dashoffset: 0; } .ap2-dot { opacity: 1; transform: none; } .ap2-bar { transform: none; } .ap2-nav.is-away { transform: none; } .ap2-nav { transition: background .45s ease, border-color .45s ease; } } .ap2-hs { position: absolute; inset: 0; overflow: hidden; } .ap2-hs-l { position: absolute; inset: -34px -20px; display: block; background-repeat: no-repeat; background-position: center 58%; background-size: cover; image-rendering: pixelated; will-change: transform; } .ap2-hs-clouds { background-repeat: repeat-x; background-size: 1024px auto; animation: ap2HeroDrift 190s linear infinite; } @keyframes ap2HeroDrift { from { background-position-x: 0px; } to { background-position-x: -1024px; } } .ap2-hs-sun { position: absolute; left: 89.5%; top: 17%; width: 0; height: 0; pointer-events: none; } .ap2-hs-sun::before { content: ""; position: absolute; left: -34vw; top: -24vw; width: 68vw; height: 48vw; max-width: 1060px; max-height: 740px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,250,224,0.48) 0%, rgba(255,244,206,0.28) 26%, rgba(246,238,206,0.16) 50%, rgba(244,238,208,0.08) 74%); animation: ap2HeroSun 13s ease-in-out infinite; } @keyframes ap2HeroSun { 0%, 100% { transform: scale(1); opacity: 0.80; } 50% { transform: scale(1.05); opacity: 1; } } .ap2-hs-petal { position: absolute; top: -4%; translate: calc(var(--gd-px, 0) * var(--pull, 12) * 1px) calc(var(--gd-py, 0) * var(--pull, 12) * 0.55px); transition: translate .9s cubic-bezier(0.16, 1, 0.3, 1); width: 8px; height: 5px; border-radius: 62% 12% 62% 12%; background: linear-gradient(140deg, #FBF3DC 0%, #EEDCAE 52%, #D8C088 100%); box-shadow: 0 0 3px rgba(255,246,220,0.4); opacity: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; animation-name: ap2HeroPetal; animation-timing-function: linear; animation-iteration-count: infinite; } .ap2-hs-petal.is-back { width: 5px; height: 4px; opacity: 0; filter: saturate(0.72); animation-duration: 21s; } @keyframes ap2HeroPetal { 0% { opacity: 0; transform: translate3d(0, -30px, 0) rotate(0deg) rotateY(0deg); } 7% { opacity: 0.92; } 25% { transform: translate3d(calc(var(--dx, 0px) * 1.6), 26vh, 0) rotate(calc(var(--spin, 1) * 120deg)) rotateY(180deg); } 50% { transform: translate3d(calc(var(--dx, 0px) * -0.8), 52vh, 0) rotate(calc(var(--spin, 1) * 250deg)) rotateY(360deg); } 75% { transform: translate3d(calc(var(--dx, 0px) * 1.9), 78vh, 0) rotate(calc(var(--spin, 1) * 380deg)) rotateY(540deg); } 93% { opacity: 0.7; } 100% { opacity: 0; transform: translate3d(calc(var(--dx, 0px) * 0.4), 104vh, 0) rotate(calc(var(--spin, 1) * 500deg)) rotateY(720deg); } } .ap2-hs-gust { position: absolute; translate: calc(var(--gd-px, 0) * var(--pull, 16) * 1px) calc(var(--gd-py, 0) * var(--pull, 16) * 0.5px); transition: translate 1.1s cubic-bezier(0.16, 1, 0.3, 1); width: 8px; height: 5px; border-radius: 62% 12% 62% 12%; background: linear-gradient(140deg, #FCF4DE 0%, #EDD9A6 54%, #D4BA80 100%); opacity: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; animation-name: ap2HeroGust; animation-timing-function: cubic-bezier(0.32, 0.06, 0.55, 1); animation-iteration-count: infinite; } .ap2-hs-gust.is-right { width: 6px; height: 4px; } @keyframes ap2HeroGust { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg); } 6% { opacity: 0.95; } 30% { transform: translate3d(17vw, 26px, 0) rotate(calc(var(--spin,1) * 200deg)) rotateY(220deg); } 60% { transform: translate3d(38vw, 18px, 0) rotate(calc(var(--spin,1) * 430deg)) rotateY(520deg); } 85% { opacity: 0.62; transform: translate3d(58vw, 62px, 0) rotate(calc(var(--spin,1) * 690deg)) rotateY(880deg); } 100% { opacity: 0; transform: translate3d(72vw, 96px, 0) rotate(calc(var(--spin,1) * 820deg)) rotateY(1080deg); } } .ap2-slk-copy { position: relative; } @keyframes ap2SlkPulse { 0% { box-shadow: 0 0 0 0 rgba(76,175,122,0.5); } 70% { box-shadow: 0 0 0 8px rgba(76,175,122,0); } 100% { box-shadow: 0 0 0 0 rgba(76,175,122,0); } } @keyframes ap2SlkCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes ap2SlkTypeShow { 0% { opacity: 0; } 12%, 76% { opacity: 1; } 100% { opacity: 0; } } @keyframes ap2SlkDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { } @media (max-width: 620px) { } @media (max-width: 760px) { .ap2-case-ghost { display: none; } } .ap2-rp { zoom: 0.848; margin-inline: auto; margin-top: clamp(18px, 3.4vw, 40px); border: 1px solid #DADCE0; border-radius: 8px; background: #FFFFFF; overflow: hidden; box-shadow: 0 1px 3px 0 rgba(60,64,67,0.30), 0 4px 8px 3px rgba(60,64,67,0.15); } .ap2-rp-chrome { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #F1F3F4; border-bottom: 1px solid #DADCE0; } .ap2-rp-dots { display: inline-flex; gap: 6px; flex-shrink: 0; } .ap2-rp-dots i { width: 10px; height: 10px; border-radius: 50%; background: #DADCE0; } .ap2-rp-dots i:first-child { background: #1A73E8; opacity: 0.5; } .ap2-rp-path { font-size: 13.3px; font-weight: 400; letter-spacing: 0.01em; color: #5F6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap2-rp-panel { padding: clamp(18px, 1.9vw, 28px); min-width: 0; } .ap2-rp-panel-in { animation: ap2RpIn .5s cubic-bezier(0.16,1,0.3,1) both; } @keyframes ap2RpIn { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } } .ap2-rp-panel-head { display: flex; align-items: flex-start; gap: 16px; } .ap2-rp-live { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace, 'Noto Sans Arabic'; font-size: 13.1px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(11,11,12,0.76); border: 1px solid #E3DFD5; border-radius: 999px; padding: 5px 11px; } .ap2-rp-live i { width: 7px; height: 7px; border-radius: 50%; animation: ap2Pulse 2.4s infinite; } .ap2-rp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } .ap2-rp-stat { position: relative; overflow: hidden; padding: 13px 15px 12px; border: 1px solid #DADCE0; border-radius: 8px; background: #FFFFFF; } .ap2-rp-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone, #DD6E3E); } .ap2-rp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 10px; margin-bottom: 14px; border: 1px solid rgba(11,11,12,0.10); border-radius: 11px; background: linear-gradient(180deg, #fff, rgba(11,11,12,0.02)); } .ap2-rp-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(11,11,12,0.06); } .ap2-rp-seg > b, .ap2-rp-seg > i { font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.7px; font-weight: 700; font-style: normal; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.04em; } .ap2-rp-seg > b { background: #0B0B0C; color: #fff; } .ap2-rp-seg > i { color: rgba(11,11,12,0.82); } .ap2-rp-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 13.3px; font-weight: 600; letter-spacing: -0.006em; padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tone, #DD6E3E) 30%, transparent); background: color-mix(in srgb, var(--tone, #DD6E3E) 9%, #fff); color: color-mix(in srgb, var(--tone, #DD6E3E) 76%, #000); } .ap2-rp-pill.is-ghost { border-color: rgba(11,11,12,0.14); background: #fff; color: rgba(11,11,12,0.847); } .ap2-rp-bar-end { margin-inline-start: auto; display: inline-flex; gap: 8px; } @media (max-width: 720px) { .ap2-rp-bar-end { margin-inline-start: 0; } } .ap2-rp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 1.8vw, 26px); align-items: start; } .ap2-rp-chart { padding: 16px; border-radius: 13px; min-width: 0; border: 1px solid color-mix(in srgb, var(--tone, #DD6E3E) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--tone, #DD6E3E) 7%, #fff) 0%, #fff 62%); display: flex; align-items: center; justify-content: center; } .ap2-rp-chart svg { width: 100%; height: auto; } .ap2-rp-table { min-width: 0; } .ap2-rp-tr { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.7fr); gap: 10px; align-items: center; padding: 11px 12px; border-bottom: 1px solid rgba(11,11,12,0.17); border-radius: 8px; animation: ap2RpRow .5s cubic-bezier(0.16,1,0.3,1) both; transition: background .25s ease; } .ap2-rp-tr:nth-child(even) { background: rgba(11,11,12,0.025); } .ap2-rp-tr:not(.ap2-rp-tr--head):hover { background: color-mix(in srgb, var(--tone, #DD6E3E) 9%, #fff); } .ap2-rp-tr--head { padding: 9px 12px; margin-bottom: 4px; border-bottom: none; animation: none; background: #0B0B0C; border-radius: 8px; } .ap2-rp-tr--head > span { color: rgba(255,255,255,0.91) !important; } .ap2-rp-tr:last-child { border-bottom: none; } @keyframes ap2RpRow { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } @media (max-width: 1000px) { .ap2-rp-body { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .ap2-rp-stats { grid-template-columns: minmax(0, 1fr); } .ap2-rp-panel-head { flex-direction: column; gap: 10px; } } .ap2-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(12px, 1.3vw, 20px); margin-top: clamp(30px, 3.4vw, 52px); } .ap2-cap { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(20px, 1.9vw, 28px); border: 1px solid rgba(255,255,255,0.13); border-radius: 16px; background: rgba(255,255,255,0.045); transition: border-color .5s ease, background .5s ease, transform .55s cubic-bezier(0.16,1,0.3,1); } .ap2-cap:hover { background: rgba(255,255,255,0.075); border-color: rgba(255,255,255,0.24); transform: translateY(-4px); } .ap2-cap-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 110% at 88% 0%, var(--tone) 0%, transparent 58%); opacity: 0.16; transition: opacity .5s ease; } .ap2-cap:hover .ap2-cap-wash { opacity: 0.3; } .ap2-cap-head { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .ap2-cap-n { font-size: 12.4px; font-weight: 750; letter-spacing: 0.14em; color: var(--tone); flex-shrink: 0; } .ap2-cap-rule { flex: 1; height: 1px; background: rgba(255,255,255,0.14); overflow: hidden; } .ap2-cap-rule > i { display: block; width: 100%; height: 100%; background: linear-gradient(to right, var(--tone), rgba(255,255,255,0)); transform-origin: left center; transition: transform 1s cubic-bezier(0.16,1,0.3,1); } .ap2-cap-fig { position: relative; font-size: clamp(28.5px, 2.6vw, 42.5px); font-weight: 760; letter-spacing: -0.042em; line-height: 1; color: var(--tone); margin-bottom: 6px; } .ap2-cap h3 { position: relative; font-size: clamp(16.5px, 1.2vw, 19.5px); font-weight: 620; letter-spacing: -0.02em; line-height: 1.25; color: #fff; margin: 0 0 14px; } .ap2-cap p { position: relative; margin: auto 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 15px; font-weight: 480; line-height: 1.55; color: rgba(255,255,255,0.928); } .ap2-fig { display: block; overflow: visible; } .ap2-fig .ap2-fig-a, .ap2-fig .ap2-fig-b { opacity: 1; transform: none; transition: opacity .55s ease, transform .7s cubic-bezier(0.16,1,0.3,1); } .ap2-fig .ap2-fig-dot, .ap2-fig .ap2-fig-tick { opacity: 1; transition: opacity .4s ease, transform .5s cubic-bezier(0.16,1,0.3,1); } .ap2-fig .ap2-fig-col { transform: scaleY(1); transition: transform .75s cubic-bezier(0.16,1,0.3,1); } .ap2-fig .ap2-fig-line { transform: scaleX(1); transition: transform .6s cubic-bezier(0.16,1,0.3,1); } .ap2-fig .ap2-fig-ring { stroke-dasharray: var(--arc) var(--arc); stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(0.16,1,0.3,1); } .ap2-fig:not(.is-in) .ap2-fig-a { opacity: 0; transform: translateX(-10px); } .ap2-fig:not(.is-in) .ap2-fig-b { opacity: 0; transform: translateX(12px); } .ap2-fig:not(.is-in) .ap2-fig-dot { opacity: 0; } .ap2-fig:not(.is-in) .ap2-fig-tick { opacity: 0; } .ap2-fig:not(.is-in) .ap2-fig-col { transform: scaleY(0.06); } .ap2-fig:not(.is-in) .ap2-fig-line { transform: scaleX(0); } .ap2-fig:not(.is-in) .ap2-fig-ring { stroke-dashoffset: var(--arc); } @media (max-width: 940px) { .ap2-com { grid-template-columns: 3px auto minmax(0, 1fr); } .ap2-com-proof { grid-column: 2 / -1; } } @media (max-width: 560px) { .ap2-com { grid-template-columns: 3px minmax(0, 1fr); align-items: start; } .ap2-com-n { grid-column: 2; } .ap2-com-body, .ap2-com-proof { grid-column: 2; } } .ap2-mix, .ap2-90 { border: 1px solid rgba(11,11,12,0.10); border-radius: 18px; background: #FCFBF8; padding: clamp(16px, 1.8vw, 26px); } .ap2-90 { margin-top: clamp(12px, 1.3vw, 20px); } .ap2-mix-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 15px; } .ap2-mix-head > .ap2-mono { font-size: 13.35px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(11,11,12,0.811); } .ap2-mix-count { font-size: 15.75px; font-weight: 480; color: rgba(11,11,12,0.82); } .ap2-mix-count b { font-weight: 760; color: #0B0B0C; font-size: 17.75px; } .ap2-mix-cap { font-size: 14.35px; font-weight: 450; line-height: 1.5; color: rgba(11,11,12,0.793); margin: 14px 0 0; } .ap2-picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 0.9vw, 12px); } .ap2-picks > li { display: flex; } .ap2-pick { position: relative; overflow: hidden; width: 100%; height: 100%; text-align: start; cursor: pointer; display: block; padding: 13px 14px 12px; border-radius: 12px; border: 1px solid rgba(11,11,12,0.10); background: #fff; transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(0.16,1,0.3,1); } .ap2-pick:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(11,15,20,0.09); } .ap2-pick.is-on { border-color: var(--brand); box-shadow: 0 10px 26px rgba(11,15,20,0.08); } .ap2-pick.is-core { cursor: default; } .ap2-pick.is-core:hover { transform: none; } .ap2-pick-wash { position: absolute; inset: 0; pointer-events: none; background: var(--brand); opacity: 0; transition: opacity .45s ease; } .ap2-pick.is-on .ap2-pick-wash { opacity: 0.07; } .ap2-pick.is-core .ap2-pick-wash { opacity: 0.11; } .ap2-pick-top { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 11px; } .ap2-pick-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--brand); flex-shrink: 0; opacity: 0.4; transition: opacity .4s ease; } .ap2-pick.is-on .ap2-pick-dot { opacity: 1; } .ap2-pick-tag { font-size: 11.55px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(11,11,12,0.766); transition: color .4s ease; white-space: nowrap; } .ap2-pick.is-on .ap2-pick-tag { color: var(--brand); } .ap2-pick-box { margin-inline-start: auto; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(11,11,12,0.16); color: rgba(11,11,12,0.73); background: #fff; transition: background .4s ease, border-color .4s ease, color .4s ease; } .ap2-pick-box.is-on { background: var(--brand); border-color: var(--brand); color: #fff; } .ap2-pick-name { position: relative; display: block; font-size: 16.85px; font-weight: 650; letter-spacing: -0.02em; color: #0B0B0C; } .ap2-pick-note { position: relative; display: block; font-size: 13.65px; font-weight: 460; color: #45464C; margin-top: 3px; } .ap2-cmh { max-width: 1200px; } .ap2-cmh-k { display: flex; align-items: center; gap: 9px; font-size: 16.45px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #9E3B22; margin-block-end: clamp(20px, 2.4vw, 32px); opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1); } .ap2-cmh-sq { width: 7px; height: 7px; background: #DD6E3E; flex: none; } .ap2-cmh-h { margin: 0; font-size: clamp(40px, 4.608vw, 71px); font-weight: 700; letter-spacing: -0.042em; line-height: 1.02; color: #0B0B0C; opacity: 0; transform: translateY(24px); filter: blur(7px); transition: opacity .9s cubic-bezier(0.16,1,0.3,1) .06s, transform .9s cubic-bezier(0.16,1,0.3,1) .06s, filter .9s cubic-bezier(0.16,1,0.3,1) .06s; } .ap2-cmh-em { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient(#DD6E3E, #DD6E3E); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 clamp(5px, 0.55vw, 9px); transition: background-size .85s cubic-bezier(0.16,1,0.3,1) .42s; } [dir="rtl"] .ap2-cmh-em { background-position: 100% 100%; } .ap2-cmh[data-on="true"] .ap2-cmh-em { background-size: 100% clamp(5px, 0.55vw, 9px); } .ap2-cmh-rule { display: none; } .ap2-cmh-p { margin: clamp(22px, 2.6vw, 36px) 0 0; max-width: 44em; font-size: clamp(20.5px, 1.4vw, 23.5px); font-weight: 490; line-height: 1.64; color: rgba(11,11,12,0.97); opacity: 0; transform: translateY(18px); transition: opacity .9s ease .28s, transform .9s cubic-bezier(0.16,1,0.3,1) .28s; } .ap2-cmh[data-on="true"] .ap2-cmh-k, .ap2-cmh[data-on="true"] .ap2-cmh-p { opacity: 1; transform: translateY(0); } .ap2-cmh[data-on="true"] .ap2-cmh-h { opacity: 1; transform: translateY(0); filter: blur(0); } @media (prefers-reduced-motion: reduce) { .ap2-cmh-k, .ap2-cmh-h, .ap2-cmh-p, .ap2-cmh-em { transition: none; } } .ap2-shl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; } .ap2-shl > b { font-size: clamp(17px, 1.24vw, 20.4px); font-weight: 750; letter-spacing: -0.026em; line-height: 1.2; color: #0B0B0C; } .ap2-shl > i { display: block; inline-size: 26px; block-size: 2px; border-radius: 1px; background: var(--shl-tone); flex: none; } .ap2-shl > span { font-size: 12.4px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--shl-tone); } .ap2-cm-two { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 3.4vw, 64px); align-items: start; } .ap2-cms { display: flex; flex-direction: column; gap: 0; margin-top: 0; } @media (max-width: 1040px) { .ap2-cm-two { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 40px); } } .ap2-cm { position: relative; display: flex; flex-direction: column; border-radius: 0; border: 0; border-block-start: 1px solid rgba(11,11,12,0.16); background: transparent; transition: border-color .45s ease; } .ap2-cm:hover { border-block-start-color: rgba(11,11,12,0.34); } .ap2-cm-h { margin: 0; font-size: inherit; font-weight: inherit; } .ap2-cm-btn { appearance: none; width: 100%; display: flex; align-items: center; gap: 14px; border: 0; background: none; cursor: pointer; padding: clamp(15px, 1.5vw, 21px) 0; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; text-align: start; color: #0B0B0C; } .ap2-cm-btn:focus-visible { outline: 2px solid #DD6E3E; outline-offset: -2px; } .ap2-cm-t { flex: 1; min-width: 0; font-size: clamp(19px, 1.5vw, 23px); font-weight: 700; letter-spacing: -0.024em; line-height: 1.2; } .ap2-cm-v { flex: none; color: rgba(11,11,12,0.739); transition: transform .32s cubic-bezier(0.16,1,0.3,1); } .ap2-cm[data-open='true'] .ap2-cm-v { transform: rotate(180deg); } .ap2-cm-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(0.16, 1, 0.3, 1); } .ap2-cm[data-open='true'] .ap2-cm-wrap { grid-template-rows: 1fr; } .ap2-cm-clip { overflow: hidden; min-height: 0; } .ap2-cm[data-open='true'] .ap2-cm-clip { padding-block-end: clamp(14px, 1.4vw, 20px); } .ap2-cm-n { flex: none; font-size: 13.9px; font-weight: 800; letter-spacing: 0.18em; color: var(--tone); } .ap2-cm-proof { font-size: 12.1px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(11,11,12,0.784); text-align: end; } @media (max-width: 720px) { .ap2-cm-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'n t v' 'n p v'; column-gap: 12px; row-gap: 4px; align-items: center; } .ap2-cm-n { grid-area: n; align-self: center; } .ap2-cm-t { grid-area: t; align-self: end; } .ap2-cm-proof { grid-area: p; align-self: start; text-align: start; } .ap2-cm-v { grid-area: v; align-self: center; } } .ap2-cm-rule { display: block; height: 1px; background: rgba(11,11,12,0.10); } .ap2-cm-rule > i { display: block; height: 100%; background: var(--tone); transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(0.22, 1, 0.28, 1); } .ap2-cm-body { display: flex; flex-direction: column; flex: 1; } .ap2-cm p { font-size: clamp(16.2px, 1.18vw, 17.4px); font-weight: 480; line-height: 1.64; color: rgba(11,11,12,0.955); margin: 0 0 20px; max-width: 60ch; } .ap2-cm-proofrow { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 24px); margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(11,11,12,0.10); } .ap2-cm-art { flex: 1; min-width: 0; display: block; } .ap2-cm-art > svg { width: 100%; max-width: 122px; height: auto; display: block; } .ap2-cm-proofnum { text-align: end; flex-shrink: 0; padding: 11px 15px 12px; border-radius: 12px; background: var(--tint); border: 1px solid var(--tint2); } .ap2-cm-proofnum b { display: block; font-size: clamp(25px, 2.05vw, 34px); font-weight: 800; letter-spacing: -0.042em; line-height: 1; } .ap2-cm-proofnum em { display: block; font-style: normal; font-size: 14.4px; font-weight: 560; line-height: 1.34; color: rgba(11,11,12,0.892); margin-top: 6px; max-width: 18ch; } @media (max-width: 1100px) { .ap2-cms { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .ap2-cms { grid-template-columns: minmax(0, 1fr); } } .ap2-quote { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(10px, 1vw, 18px); align-items: start; padding-inline-end: clamp(0px, 12vw, 260px); } .ap2-quote-who { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; width: 218px; padding-top: 20px; transition: opacity 1s cubic-bezier(0.16,1,0.3,1) .55s; } .ap2-quote-arc { position: absolute; left: -74px; top: 66px; pointer-events: none; } .ap2-quote-who img { width: 172px; height: 172px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(11,11,12,0.06), 0 18px 34px -18px rgba(11,11,12,0.5); } .ap2-quote-who figcaption { text-align: center; margin-top: 11px; } .ap2-quote-who figcaption b { display: block; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 16.6px; font-weight: 560; letter-spacing: -0.012em; color: #0B0B0C; } .ap2-proof { position: relative; height: 100%; display: flex; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 34%), linear-gradient(168deg, #191D24 0%, #10141A 58%, #0A0D12 100%); border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(11,15,20,0.18), 0 18px 44px rgba(11,15,20,0.20); } .ap2-proof-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 52% at 14% 2%, rgba(221,110,62,0.26) 0%, rgba(221,110,62,0.07) 44%, rgba(221,110,62,0) 74%), radial-gradient(60% 50% at 92% 98%, rgba(91,138,175,0.22) 0%, rgba(91,138,175,0) 72%), radial-gradient(90% 60% at 50% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 60%); } .ap2-proof-in { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 2.4vw, 38px); width: 100%; } .ap2-proof-kicker { display: flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono AP2', ui-monospace, monospace; font-size: 13.9px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.955); margin: 0 0 15px; } .ap2-proof-tick { width: 7px; height: 7px; background: #DD6E3E; flex-shrink: 0; } .ap2-proof-h { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: clamp(30.5px, 2.56vw, 42px); font-weight: 550; letter-spacing: -0.036em; line-height: 1.1; color: #fff; margin: 0 0 16px; text-wrap: balance; } .ap2-proof-em { color: #F0894F; } .ap2-proof-offer { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.13); border-radius: 14px; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0) 60%), rgba(255,255,255,0.035); padding: clamp(20px, 1.8vw, 27px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .ap2-proof-offer::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 62%; block-size: 2px; background: linear-gradient(to right, #F0894F, rgba(240,137,79,0)); } .ap2-proof-num { position: absolute; top: -0.24em; inset-inline-end: -0.06em; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: clamp(96px, 9vw, 148px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: rgba(255,255,255,0.055); pointer-events: none; user-select: none; } .ap2-proof-lead { margin: 0 0 clamp(15px, 1.4vw, 20px); font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: clamp(19.5px, 1.42vw, 23.5px); font-weight: 600; line-height: 1.28; letter-spacing: -0.018em; color: #fff; max-width: 22em; } .ap2-proof-yes { list-style: none; margin: 0 0 clamp(18px, 1.6vw, 24px); padding: 0; display: grid; gap: 11px; } .ap2-proof-yes > li { display: flex; align-items: flex-start; gap: 11px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 15.9px; font-weight: 480; line-height: 1.4; color: rgba(255,255,255,0.964); } .ap2-proof-tickmark { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(240,137,79,0.16); color: #F0894F; } .ap2-proof-rule { display: block; height: 1px; margin: 24px 0; background: linear-gradient(90deg, rgba(240,137,79,0.85) 0%, rgba(255,255,255,0.16) 62%, rgba(255,255,255,0) 100%); transform-origin: left center; transition: transform 1.1s cubic-bezier(0.16,1,0.3,1) 0.25s; } .ap2-proof-cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 12px 19px; border: 1px solid #DD6E3E; border-radius: 4px; background: #DD6E3E; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 16.4px; font-weight: 600; color: #fff; text-decoration: none; transition: border-color .25s ease, background .25s ease, transform .25s cubic-bezier(0.16,1,0.3,1); } .ap2-proof-cta svg { transition: transform .3s cubic-bezier(0.16,1,0.3,1); } .ap2-proof-cta:hover { border-color: #C85C2F; background: #C85C2F; transform: translateY(-1px); } .ap2-proof-cta:hover svg { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .ap2-proof-rule { transition: none; transform: scaleX(1) !important; } .ap2-proof-cta, .ap2-proof-cta svg { transition: none; } } .ap2-litground { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(78% 62% at 4% 96%, rgba(2,3,7,0.55) 0%, rgba(2,3,7,0.34) 26%, rgba(2,3,7,0.13) 52%, rgba(2,3,7,0) 76%), radial-gradient(58% 52% at 44% 14%, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.050) 24%, rgba(255,255,255,0.022) 46%, rgba(255,255,255,0.007) 66%, rgba(255,255,255,0) 82%), radial-gradient(64% 44% at 62% 104%, rgba(221,110,62,0.075) 0%, rgba(221,110,62,0.034) 34%, rgba(221,110,62,0.012) 60%, rgba(221,110,62,0) 80%), linear-gradient(to bottom, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0) 42%, rgba(2,3,7,0.09) 100%); } .ap2-ask { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 12px; border-radius: 999px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 14px; font-weight: 560; line-height: 1; white-space: nowrap; color: rgba(11,11,12,0.919); background: rgba(255,255,255,0.86); border: 1px solid rgba(11,11,12,0.12); text-decoration: none; max-width: 100%; transition: border-color .22s ease, color .22s ease, background .22s ease, transform .22s cubic-bezier(0.16,1,0.3,1); } .ap2-ask svg { flex: none; display: block; } .ap2-ask:hover { color: #0B0B0C; border-color: rgba(221,110,62,0.55); background: #fff; transform: translateY(-1px); } .ap2-ask.is-dark { color: rgba(255,255,255,0.964); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.26); } .ap2-ask.is-dark:hover { color: #fff; background: rgba(255,255,255,0.17); border-color: rgba(255,255,255,0.44); } @media (max-width: 1420px) { .ap2-ask { white-space: normal; line-height: 1.24; } } .ap2-face__cap .ap2-ask { align-self: center; width: max-content; max-width: 100%; } .ap2-quote-who figcaption span { display: block; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 14.7px; font-weight: 500; color: rgba(11,11,12,0.892); margin-top: 2px; } @media (max-width: 1060px) { .ap2-quote { grid-template-columns: minmax(0, 1fr); } .ap2-quote-who { flex-direction: row; gap: 14px; width: auto; padding-top: 4px; } .ap2-quote-who img { width: 76px; height: 76px; } .ap2-quote-who figcaption { text-align: start; margin-top: 0; } .ap2-quote-arc { display: none; } } .ap2-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); margin-bottom: clamp(12px, 1.2vw, 16px); } .ap2-rail > i { display: block; height: 4px; border-radius: 1px; background: linear-gradient(to right, var(--tone), color-mix(in srgb, var(--tone) 55%, #fff)); transform: scaleX(0); transform-origin: left center; transition: transform 1.15s cubic-bezier(0.22,1,0.28,1); } .ap2-rail.is-on > i { transform: scaleX(1); } .ap2-rail.is-on > i:nth-child(2) { transition-delay: .55s; } .ap2-rail.is-on > i:nth-child(3) { transition-delay: 1.1s; } .ap2-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); margin-bottom: clamp(16px, 1.8vw, 24px); } .ap2-phase { position: relative; overflow: hidden; padding: 21px 21px 20px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--tone) 30%, rgba(11,11,12,0.09)); background: color-mix(in srgb, var(--tone) 4.5%, #fff); box-shadow: 0 1px 2px -1px rgba(11,11,12,0.10); opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1); } .ap2-phase.is-on { opacity: 1; transform: none; } .ap2-phase-ghost { position: absolute; right: -4px; top: -14px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 86px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: color-mix(in srgb, var(--tone) 12%, transparent); pointer-events: none; } .ap2-phase-top { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; } .ap2-phase-days { font-size: 13.7px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tone); padding: 3px 8px 2px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); background: color-mix(in srgb, var(--tone) 9%, #fff); } .ap2-phase h3 { position: relative; display: inline-block; font-size: 24.4px; font-weight: 720; letter-spacing: -0.026em; color: #0B0B0C; margin: 0 0 12px; padding-bottom: 8px; } .ap2-phase h3 > i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0; background: var(--tone); transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(0.22,1,0.28,1); } .ap2-phase.is-on h3 > i { transform: scaleX(1); } .ap2-phase p { position: relative; font-size: 16.4px; font-weight: 470; line-height: 1.6; color: rgba(11,11,12,0.973); margin: 0; } @media (max-width: 860px) { .ap2-rail, .ap2-phases { grid-template-columns: minmax(0, 1fr); } .ap2-phase-ghost { font-size: 70px; } } .ap2-gantt { position: relative; margin-top: 4px; border-top: 1px solid rgba(11,11,12,0.09); padding-top: 16px; } .ap2-gantt-scale { display: grid; grid-template-columns: 212px minmax(0, 1fr) 96px; gap: 14px; align-items: end; margin-bottom: 11px; } .ap2-gantt-scale > i { display: block; } .ap2-gantt-scale > span { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ap2-gantt-scale > span > b { font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.3px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(11,11,12,0.775); padding-inline-start: 10px; border-inline-start: 1px solid rgba(11,11,12,0.14); } .ap2-gantt-scale > span > b:last-child { color: #C05B2C; border-left-color: rgba(192,91,44,0.34); } .ap2-grow { position: relative; display: grid; grid-template-columns: 212px minmax(0, 1fr) 96px; gap: 14px; align-items: center; padding: 8px 0; animation: ap2GrowIn .5s cubic-bezier(0.16,1,0.3,1) both; } @keyframes ap2GrowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .ap2-grow + .ap2-grow { border-top: 1px solid rgba(11,11,12,0.05); } .ap2-grow-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14.8px; font-weight: 600; color: #0B0B0C; white-space: nowrap; } .ap2-grow-name > i { width: 10px; height: 10px; border-radius: 3px; background: var(--brand); flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); } .ap2-grow-name > em { font-style: normal; font-size: 10.8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #C05B2C; border: 1px solid rgba(192,91,44,0.34); border-radius: 999px; padding: 2px 8px; } .ap2-grow-track { position: relative; height: 30px; border-radius: 8px; overflow: hidden; background: rgba(11,11,12,0.045); } .ap2-grow-track::before, .ap2-grow-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.55); z-index: 2; pointer-events: none; } .ap2-grow-track::before { left: 33.333%; } .ap2-grow-track::after { left: 66.666%; } .ap2-grow-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(to right, color-mix(in srgb, var(--brand) 88%, #000 4%) 0%, var(--brand) 34%, color-mix(in srgb, var(--brand) 45%, #DD6E3E) 74%, #DD6E3E 100%); transition: transform 1.6s cubic-bezier(0.22,1,0.28,1); } .ap2-grow-fill::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: rgba(255,255,255,0.72); } .ap2-grow-fill.is-on { transform: scaleX(1); } .ap2-grow-build { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding: 0 12px; font-size: 12.7px; font-weight: 560; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .35s ease; text-shadow: 0 1px 4px rgba(0,0,0,0.42); } .ap2-grow:hover .ap2-grow-build { opacity: 1; } .ap2-grow:hover .ap2-grow-track { box-shadow: 0 0 0 1px rgba(11,11,12,0.14); } .ap2-grow-done { display: inline-flex; align-items: center; gap: 6px; justify-self: end; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #C05B2C; white-space: nowrap; border: 1px solid rgba(192,91,44,0.30); border-radius: 999px; padding: 4px 9px; background: rgba(192,91,44,0.06); opacity: 0; transform: translateX(-6px); transition: opacity .5s ease, transform .6s cubic-bezier(0.16,1,0.3,1); } .ap2-grow-done.is-on { opacity: 1; transform: none; } @media (max-width: 1000px) { .ap2-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .ap2-phases { grid-template-columns: minmax(0, 1fr); } .ap2-gantt-scale { display: none; } .ap2-grow { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 13px 0; } .ap2-grow-done { justify-self: start; } } @media (max-width: 520px) { .ap2-picks { grid-template-columns: minmax(0, 1fr); } } .ap2-act-fig { position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border: 1px solid; border-radius: 11px; padding: 10px 14px; margin-bottom: 18px; } .ap2-act-fig > span { font-size: clamp(23.5px, 2.1vw, 32.5px); font-weight: 760; letter-spacing: -0.04em; line-height: 1; } .ap2-act-fig > em { font-style: normal; font-size: 14.4px; font-weight: 560; line-height: 1.38; opacity: 0.96; } .ap2-scene { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; } .ap2-scene-l { position: absolute; inset: -22px 0; display: block; background-repeat: no-repeat; background-position: center center; background-size: cover; image-rendering: pixelated; will-change: transform; } .ap2-scene-l.is-tiled { background-repeat: repeat-x; background-size: 1600px 100%; } @keyframes ap2SceneDrift { from { background-position-x: 0px; } to { background-position-x: -1600px; } } .ap2-scene-clouds { animation: ap2SceneDrift 128s linear infinite; } .ap2-scene-birds { animation: ap2SceneDrift 232s linear infinite; opacity: 0.85; } .ap2-scene-sun { position: absolute; left: 82.8%; top: 13.2%; width: 0; height: 0; pointer-events: none; } .ap2-scene-sun::before { content: ""; position: absolute; left: -230px; top: -230px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,248,214,0.62) 0%, rgba(255,240,196,0.26) 34%, rgba(255,238,192,0) 66%); animation: ap2SunBreath 9s ease-in-out infinite; } @keyframes ap2SunBreath { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.13); opacity: 1; } } .ap2-scene-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(251,250,246,0.52) 0%, rgba(251,250,246,0.16) 26%, rgba(251,250,246,0.30) 56%, rgba(251,250,246,0.88) 84%, #FBFAF6 100%), linear-gradient(90deg, rgba(251,250,246,0.80) 0%, rgba(251,250,246,0.30) 34%, rgba(251,250,246,0) 62%); } .ap2-svc-row.is-on .ap2-svc-row-n, @keyframes ap2SvcIn { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes ap2SvcPt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 1040px) { } .ap2-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 64px); align-items: center; } @media (min-width: 1280px) { .ap2-hero-grid { grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); } } @media (min-width: 1440px) { .ap2-hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } } .ap2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 26px); } .ap2-two-a { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); } .ap2-two-b { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); } .ap2-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .ap2-split-l { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 64px); align-items: end; } .ap2-headrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: clamp(28px, 4vw, 64px); align-items: end; } .ap2-faq { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 68px); align-items: start; } .ap2-faq--centred { align-items: center; } .ap2-close { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1.24fr); min-height: 0; } @media (min-width: 900px) and (min-height: 620px) { .ap2-close { min-height: calc(92 * var(--ap2-vh, 1vh)); min-height: max(calc(92 * var(--ap2-svh, 1svh)), calc(57 * var(--ap2-vw, 1vw))); } } .ap2-nav-links { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); } .ap2-skip { content-visibility: auto; contain-intrinsic-size: auto 720px; } .ap2-engine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 2.5vw, 48px); align-items: center; } .ap2-engine-panel { margin-inline-end: calc(-1 * clamp(0px, 3.3vw, 48px)); min-width: 0; } @media (min-width: 1181px) { .ap2-cta-row { width: max-content; flex-wrap: nowrap; } } .ap2-heroscene { position: relative; min-height: clamp(340px, 34vw, 520px); } .ap2-pledge { position: absolute; right: 25%; top: 70%; display: flex; align-items: flex-start; gap: 12px; max-width: 430px; transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1) 1.25s; pointer-events: none; } .ap2-pledge-arc { flex-shrink: 0; margin: -46px -2px 0 0; align-self: flex-start; } .ap2-pledge-txt { margin: 0; font-family: 'Caveat AP2', 'Caveat', 'Segoe Script', cursive; font-size: 31.5px; font-weight: 500; line-height: 1.58; letter-spacing: 0.012em; color: #fff; text-shadow: none; } .ap2-pledge-txt > span { background: #DD6E3E; box-shadow: 0 6px 18px -8px rgba(120,44,14,0.7); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 3px 9px 5px; border-radius: 3px; } .ap2-pledge-txt b { font-weight: 700; font-size: 32.5px; letter-spacing: 0.01em; } @media (max-width: 1180px) { .ap2-pledge { position: static; margin-top: 20px; max-width: none; } .ap2-pledge-arc { display: none; } } @media (min-width: 1041px) { .ap2-faq-aside { position: sticky; top: clamp(96px, 12vh, 132px); } } @media (max-width: 1180px) { .ap2-nav-links { display: none; } } @media (max-width: 1080px) { .ap2-hero-grid { grid-template-columns: minmax(0, 1fr); } .ap2-heroscene { display: none; } } @media (max-width: 1200px) { .ap2-engine { grid-template-columns: minmax(0, 1fr); } .ap2-engine-panel { margin-inline-end: 0; } } @media (max-width: 1040px) { .ap2-split, .ap2-split-l, .ap2-faq { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 940px) { .ap2-headrow { grid-template-columns: minmax(0, 1fr); align-items: start; } } @media (max-width: 900px) { .ap2-two, .ap2-two-a, .ap2-two-b { grid-template-columns: minmax(0, 1fr); } .ap2-close { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; } } @media (prefers-reduced-motion: reduce) { .ap2-root *, .ap2-root *::before, .ap2-root *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; } .ap2-ticker-run, .ap2-sr-in, .ap2-nudge-path { animation: none !important; } .ap2-sr-in { transform: none !important; } .ap2-cf .ap2-cf-b, .ap2-cf .ap2-cf-grid, .ap2-cf .ap2-cf-sweep, .ap2-cf .ap2-cf-noise, .ap2-cf .ap2-cf-scan, .ap2-cf .ap2-cf-bar i { animation: none !important; } .ap2-cf .ap2-cf-bar i { transform: scaleX(0.34); } .ap2-cf .ap2-cf-corner { opacity: 1; } .ap2-scene-clouds, .ap2-scene-birds, .ap2-scene-sun::before { animation: none !important; } .ap2-hs-clouds, .ap2-hs-sun::before { animation: none !important; } .ap2-hs-petal, .ap2-hs-gust { display: none; } .ap2-fig * { transition: none !important; } .ap2-com-rule > i, .ap2-grow-fill, .ap2-grow-done { transition: none !important; } .ap2-grow { animation: none !important; } } .ap2-nav-shell { display: flex; align-items: center; gap: clamp(16px, 1.7vw, 28px); } .ap2-nav-links { gap: clamp(13px, 1.5vw, 26px); } @media not all and (max-width: 1180px) { .ap2-nav-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .ap2-nav-brand { justify-self: start; } .ap2-nav-right { justify-self: end; margin-inline-start: 0; } } .ap2-nav-right { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; flex-shrink: 1; min-width: 0; } .ap2-nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .ap2-nav-mark { flex-shrink: 0; transition: filter .45s ease; } .ap2-nav-mark path { transition: stroke .45s ease; } .ap2-nav-mark { transition: filter .45s ease, transform .5s cubic-bezier(0.16, 1, 0.3, 1); } .ap2-nav-brand:hover .ap2-nav-mark { transform: translateY(-2px); } .ap2-nav-word { white-space: nowrap; } .ap2-nav-stop { display: inline-block; width: 5px; height: 5px; margin-inline-start: 7px; background: #DD6E3E; vertical-align: baseline; animation: ap2NavStop 2s steps(1, end) infinite; } @keyframes ap2NavStop { 0% { opacity: 1; } 50% { opacity: 0; } } .ap2-lang { position: relative; flex-shrink: 0; } .ap2-lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background .28s ease, border-color .38s ease, color .38s ease; } .ap2-lang-btn.is-clear { background: transparent; border-color: rgba(255, 255, 255, 0.34); color: rgba(255,255,255,0.964); } .ap2-lang-btn.is-clear:hover, .ap2-lang-btn.is-clear[aria-expanded="true"] { background: rgba(10, 12, 20, 0.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, 0.66); color: #FFFFFF; } .ap2-lang-btn.is-solid { background: transparent; border-color: rgba(11, 11, 12, 0.20); color: rgba(11,11,12,0.883); } .ap2-lang-btn.is-solid:hover, .ap2-lang-btn.is-solid[aria-expanded="true"] { background: rgba(11, 11, 12, 0.05); border-color: rgba(11, 11, 12, 0.42); color: #0B0B0C; } .ap2-lang-btn:focus-visible { outline: 2px solid #DD6E3E; outline-offset: 2px; } .ap2-lang-code { font-size: 13.3px; font-weight: 650; letter-spacing: 0.13em; } .ap2-lang-caret { opacity: 0.62; transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), opacity .28s ease; } .ap2-lang-btn:hover .ap2-lang-caret { opacity: 1; } .ap2-lang-btn[aria-expanded="true"] .ap2-lang-caret { transform: rotate(180deg); opacity: 1; } .ap2-lang-menu { position: absolute; top: calc(100% + 9px); right: 0; z-index: 5; min-width: 176px; padding: 5px; background: #FBFAF7; border: 1px solid #E3DFD5; border-radius: 10px; box-shadow: 0 16px 40px rgba(11, 11, 12, 0.18); transform-origin: top right; animation: ap2LangIn .26s cubic-bezier(0.16, 1, 0.3, 1); max-height: min(calc(100 * var(--ap2-vh, 1vh) - 108px), 420px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-padding-block: 5px; } @keyframes ap2LangIn { from { opacity: 0; transform: translateY(-6px) scale(0.975); } to { opacity: 1; transform: none; } } .ap2-lang-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: #0B0B0C; text-align: start; cursor: pointer; transition: background .2s ease; } .ap2-lang-item:hover { background: #F2F0E9; } .ap2-lang-item:focus-visible { background: #F2F0E9; outline: 2px solid #DD6E3E; outline-offset: -2px; } .ap2-lang-item .ap2-lang-code { color: rgba(11,11,12,0.874); font-size: 12.4px; } .ap2-lang-name { font-size: 15.1px; font-weight: 520; letter-spacing: -0.008em; } .ap2-lang-item[aria-current="true"] .ap2-lang-code { color: #DD6E3E; } .ap2-lang-item[aria-current="true"] .ap2-lang-name { font-weight: 640; } .ap2-lang-dot { width: 5px; height: 5px; margin-inline-start: auto; background: #DD6E3E; opacity: 0; flex-shrink: 0; } .ap2-lang-item[aria-current="true"] .ap2-lang-dot { opacity: 1; } .ap2-lang-item.is-soon { opacity: 0.52; cursor: not-allowed; } .ap2-lang-item.is-soon:hover { background: transparent; } .ap2-lang-item.is-soon:focus-visible { background: #F2F0E9; } .ap2-lang-soon { margin-inline-start: auto; flex-shrink: 0; font-size: 11.6px; font-weight: 600; letter-spacing: 0.07em; color: rgba(11,11,12,0.775); border: 1px solid rgba(11, 11, 12, 0.18); border-radius: 999px; padding: 1px 6px 2px; white-space: nowrap; } .ap2-bgsw { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 3px; border-radius: 999px; border: 1px solid transparent; flex-shrink: 1; max-width: 44vw; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); transition: background .3s ease, border-color .45s ease; } .ap2-bgsw::-webkit-scrollbar { width: 0; height: 0; } .ap2-hp { position: relative; flex-shrink: 0; } .ap2-hp-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .ap2-hp.is-clear .ap2-hp-btn { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: #fff; } .ap2-hp.is-solid .ap2-hp-btn { background: rgba(11, 15, 20, 0.045); border-color: rgba(11, 15, 20, 0.12); color: #17202C; } .ap2-hp.is-clear .ap2-hp-btn:hover { background: rgba(255, 255, 255, 0.2); } .ap2-hp.is-solid .ap2-hp-btn:hover { background: rgba(11, 15, 20, 0.08); } .ap2-hp-aa { font-size: 14.4px; font-weight: 640; letter-spacing: -0.01em; } .ap2-hp-n { font-size: 12.2px; font-weight: 700; opacity: 0.72; } .ap2-hp-pop { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 60; display: grid; grid-template-columns: repeat(6, 34px); gap: 5px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid rgba(11, 15, 20, 0.11); box-shadow: 0 2px 6px rgba(11, 15, 20, 0.06), 0 24px 48px -22px rgba(11, 15, 20, 0.34); } .ap2-hp-div { grid-column: 1 / -1; height: 1px; margin: 3px 2px; background: rgba(11, 15, 20, 0.12); } .ap2-hp-cell { height: 30px; border-radius: 7px; border: 1px solid rgba(11, 15, 20, 0.10); background: #FBFBFC; font-size: 12.4px; font-weight: 700; color: #4A5260; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; } .ap2-hp-cell:hover { background: #F1F2F5; color: #17202C; } .ap2-hp-cell[aria-pressed="true"] { background: #17202C; border-color: #17202C; color: #fff; } @media (max-width: 1080px) { .ap2-hp { display: none; } } .ap2-bgsw.is-clear { background: rgba(10, 12, 20, 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, 0.36); } .ap2-bgsw.is-solid { background: rgba(255, 255, 255, 0.66); border-color: rgba(11, 11, 12, 0.20); } .ap2-bgsw-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 28px; padding: 0; flex-shrink: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; transition: background .25s ease; } .ap2-bgsw.is-clear .ap2-bgsw-btn:hover { background: rgba(255, 255, 255, 0.12); } .ap2-bgsw.is-solid .ap2-bgsw-btn:hover { background: rgba(11, 11, 12, 0.06); } .ap2-bgsw.is-clear .ap2-bgsw-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.22); } .ap2-bgsw.is-solid .ap2-bgsw-btn[aria-pressed="true"] { background: rgba(11, 11, 12, 0.10); } .ap2-bgsw-btn:focus-visible { outline: 2px solid #DD6E3E; outline-offset: 2px; } @media (max-width: 860px) { .ap2-lang-caret { display: none; } } @media (max-width: 1080px) { .ap2-bgsw { display: none; } } .ap2-bgsw-no { font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 10.9px; font-weight: 650; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; pointer-events: none; } .ap2-bgsw.is-clear .ap2-bgsw-no { color: rgba(255,255,255,0.874); } .ap2-bgsw.is-solid .ap2-bgsw-no { color: rgba(11,11,12,0.802); } .ap2-bgsw.is-clear .ap2-bgsw-btn:hover .ap2-bgsw-no { color: rgba(255, 255, 255, 0.98); } .ap2-bgsw.is-solid .ap2-bgsw-btn:hover .ap2-bgsw-no { color: rgba(11,11,12,0.937); } .ap2-bgsw-btn[aria-pressed='true'] .ap2-bgsw-no { color: #DD6E3E; font-weight: 720; } @media (max-width: 560px) { .ap2-nav-word { display: none; } .ap2-lang-btn { padding: 0 10px; } .ap2-lang-menu { right: auto; left: 0; transform-origin: top left; } } .ap2-navburger { display: none; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; } .ap2-navburger-box { display: grid; gap: 4px; width: 20px; } .ap2-navburger-box > i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease; } .ap2-navburger.is-on .ap2-navburger-box > i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .ap2-navburger.is-on .ap2-navburger-box > i:nth-child(2) { opacity: 0; } .ap2-navburger.is-on .ap2-navburger-box > i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1180px) { .ap2-navburger { display: inline-flex; } } .ap2-navsheet { position: fixed; inset-block-start: 74px; inset-inline: 0; z-index: 99; height: calc(100 * var(--ap2-vh, 1vh) - 74px); height: calc(100dvh / var(--ap2-zoom, 1) - 74px); display: flex; flex-direction: column; padding: clamp(18px, 5vw, 30px) clamp(18px, 5vw, 30px) calc(clamp(18px, 5vw, 30px) + env(safe-area-inset-bottom)); background: #FAF9F6; border-top: 1px solid rgba(11, 15, 20, 0.08); animation: ap2SheetIn .34s cubic-bezier(0.16, 1, 0.3, 1) both; overflow-y: auto; overscroll-behavior: contain; } @keyframes ap2SheetIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .ap2-navsheet-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; } .ap2-navsheet-list > li { animation: ap2SheetItem .42s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes ap2SheetItem { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .ap2-navsheet-link { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 2px; border-bottom: 1px solid rgba(11, 15, 20, 0.08); font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #0B0F14; text-decoration: none; } .ap2-navsheet-n { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; color: rgba(11,15,20,0.721); } .ap2-navsheet-link:active { color: #DD6E3E; } .ap2-navsheet-cta { margin-block-start: auto; display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 10px; background: #0B0F14; color: #fff; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 17px; font-weight: 620; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .ap2-nav:has(.ap2-navburger.is-on) { background: rgba(250, 249, 246, 0.97) !important; backdrop-filter: blur(24px) saturate(1.6) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; border-bottom-color: transparent !important; } .ap2-nav:has(.ap2-navburger.is-on) .ap2-navburger { color: #0B0F14 !important; } @media (prefers-reduced-motion: reduce) { .ap2-navsheet, .ap2-navsheet-list > li { animation: none; } .ap2-navburger-box > i { transition: none; } } @media (prefers-reduced-motion: reduce) { .ap2-lang-menu { animation: none; } .ap2-lang-btn, .ap2-lang-item, .ap2-lang-caret, .ap2-nav-mark, .ap2-nav-mark path, .ap2-nav-step { transition: none; } .ap2-nav-stop { animation: none; opacity: 1; transform: none; } .ap2-nav-brand:hover .ap2-nav-mark { transform: none; } .ap2-bgsw, .ap2-bgsw-btn { transition: none; } } .ap2-hand, .ap2-pledge-txt { font-family: 'Caveat AP2', 'Caveat', 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', sans-serif; font-synthesis: none; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; -webkit-font-smoothing: antialiased; } .ap2-hand-nudge { display: inline-block; white-space: normal; font-size: clamp(29.5px, 2.3vw, 38.5px); font-weight: 660; line-height: 1.12; letter-spacing: 0; word-spacing: 0.05em; text-transform: none; color: #17204A; transform: rotate(-2.2deg); transform-origin: 0 60%; color: #FFF4E4; text-shadow: none; } .ap2-hero-light .ap2-hand-nudge { color: #16204A; } .ap2-h1-beatless .ap2-sr.is-em { color: var(--h1-accent, inherit); } .ap2-h1-beatless .ap2-hs-line:nth-child(1) .ap2-sr.is-em { color: var(--h1-e1, #A9C6DC); } .ap2-h1-beatless .ap2-hs-line:nth-child(2) .ap2-sr.is-em { color: var(--h1-e2, #D8B489); } .ap2-h1-beatless .ap2-hs-line:nth-child(3) .ap2-sr.is-em { color: var(--h1-e3, #FFA872); } .ap2-hero-light .ap2-h1-beatless { --h1-e1: #1F3A55; --h1-e2: #3F6484; --h1-e3: #DD6E3E; } @keyframes ap2SrInH1Rise { 0% { transform: translateY(126%) rotate(2.6deg) scale(0.955); opacity: 0; } 34% { opacity: 1; } 100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } } .ap2-hs-h1 .ap2-sr-in { animation-name: ap2SrInH1Rise; } .ap2-hs-h1 { font-weight: 600; letter-spacing: -0.042em; line-height: 0.97; } .ap2-h1-beatless .ap2-hs-line { font-size: 0.88em; } .ap2-h1-beatless .ap2-hs-line:nth-child(3) { font-size: 1em; } .ap2-h1-beatless .ap2-hs-line .ap2-sr:not(.is-em) { font-weight: 540; } .ap2-ht1 .ap2-hs-h1 { font-weight: 540; letter-spacing: -0.034em; line-height: 1.14; } .ap2-ht1 .ap2-h1-beatless .ap2-hs-line, .ap2-ht1 .ap2-h1-beatless .ap2-hs-line:nth-child(3) { font-size: 0.9em; } .ap2-ht1 .ap2-h1-beatless .ap2-hs-line .ap2-sr { font-weight: 540; } .ap2-ht1 .ap2-hs-h1 .ap2-sr.is-em .ap2-sr-clip { box-shadow: inset 0 -0.03em 0 rgba(36, 26, 43, 0.18); --hc-step: -0.19s; --hc-lag: -0.8s; animation-name: ap2HwAuroraRule; animation-duration: 10.5s; animation-timing-function: ease-in-out; } .ap2-ht1 .ap2-h1-beatless { --h1-e1: #241A2B; --h1-e2: #241A2B; --h1-e3: #241A2B; } .ap2-ht1 .ap2-hs-h1 { --h1-accent: #241A2B; } @media (prefers-reduced-motion: reduce) { .ap2-hs-h1 .ap2-sr.is-em .ap2-sr-clip { animation: none !important; } } .ap2-hs-h1 .ap2-hs-line { translate: calc(var(--gd-px, 0) * var(--h1-lean, 3px)) calc(var(--gd-py, 0) * var(--h1-lean, 3px) * 0.55); transition: translate 0.55s cubic-bezier(0.16,1,0.3,1); } .ap2-hs-h1 .ap2-hs-line:nth-child(1) { --h1-lean: 2px; } .ap2-hs-h1 .ap2-hs-line:nth-child(2) { --h1-lean: 4.5px; } .ap2-hs-h1 .ap2-hs-line:nth-child(3) { --h1-lean: 7px; } .ap2-hs-h1 { max-width: 15em; } @media (min-width: 1081px) { .ap2-hs-h1 { width: max-content; max-width: calc(100% + 11vw); } [dir="rtl"] .ap2-hs-h1 { width: auto; max-width: 15em; } } .ap2-hs-h1 .ap2-sr-clip { padding-bottom: 0.19em; margin-bottom: -0.19em; } @keyframes ap2SrInH1 { from { transform: translateY(126%) rotate(2deg); } to { transform: translateY(0) rotate(0); } } .ap2-hs-h1 .ap2-sr-in { animation-name: ap2SrInH1; } .ap2-nudge-arrow, .ap2-pledge-arc { filter: url(#ap2-hand-pen); } .ap2-hand-nudge { filter: url(#ap2-hand-ink); } .ap2-heroscene { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } .ap2-face { position: relative; margin: 0 6% 0 0; } .ap2-pledge { position: relative; display: block; right: auto; top: auto; align-self: flex-end; margin: 74px calc(11% + 15px) 0 0; max-width: 540px; transform: rotate(-1.9deg); transform-origin: 100% 0; } .ap2-pledge-arc { position: absolute; display: block; left: 26px; bottom: calc(100% - 6px); margin: 0; z-index: 3; } .ap2-pledge-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: clamp(22.4px, 2.16vw, 32.4px); font-weight: 620; line-height: 1.38; letter-spacing: 0.002em; word-spacing: 0.05em; color: #16204A; text-shadow: none; filter: url(#ap2-hand-ink); } .ap2-pledge-txt > span { position: relative; z-index: 0; background: none; box-shadow: none; padding: 4px 14px 9px; font-size: calc(1em * var(--sc, 1)); margin-inline-start: var(--off, 0px); margin-top: var(--dy, 0px); transform: rotate(var(--tilt, 0deg)); transform-origin: 0 62%; } .ap2-pledge-txt > span::before { content: ""; position: absolute; z-index: -1; inset: 1px -7px 2px -6px; border-radius: 5px 9px 4px 7px / 9px 4px 8px 5px; background: linear-gradient(91.5deg, #FFFFFF 0%, #FFFDF9 26%, #FFFFFF 58%, #FEFCF7 82%, #FFFFFF 100%); box-shadow: 0 1px 2px rgba(24,18,10,0.16), 0 10px 26px -12px rgba(24,18,10,0.42); filter: url(#ap2-hand-marker); } .ap2-pledge-txt > span.is-lead { font-weight: 700; font-size: calc(1.08em * var(--sc, 1)); letter-spacing: 0.004em; } .ap2-hand-word { display: inline-block; transform: rotate(var(--wt, 0deg)) translateY(var(--wy, 0px)); transform-origin: 50% 70%; font-weight: var(--wg, 620); } .ap2-pledge-txt > span.is-lead .ap2-hand-word { font-weight: calc(var(--wg, 620) + 55); } .ap2-pledge-txt b { font-size: inherit; font-weight: 700; } @media (max-width: 1080px) { .ap2-heroscene { display: none; } } .ap2-hs-l { inset: -44px; transition: translate 0.14s linear; will-change: transform, translate; } .ap2-hs { isolation: isolate; } .ap2-hs-glow { position: absolute; left: 50%; top: 46%; width: min(calc(96 * var(--ap2-vw, 1vw)), 1500px); height: min(calc(74 * var(--ap2-vw, 1vw)), 1080px); margin: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,222,168,0.16) 0%, rgba(252,200,150,0.10) 34%, rgba(244,184,146,0.045) 62%, rgba(238,178,146,0) 84%); translate: calc(var(--gd-px, 0) * 24vw) calc(var(--gd-py, 0) * 13vh); transform: translate(-50%, -50%); opacity: calc(0.8 + var(--gd-v, 0) * 0.28); transition: translate 0.18s linear, opacity 0.7s ease; will-change: translate, opacity; } .ap2-hs-sun { left: 93.4%; top: 18.2%; translate: calc(var(--gd-px, 0) * 22px) calc(var(--gd-py, 0) * 15px); transition: translate 0.2s linear; } .ap2-hs-sun::before { left: 0; top: 0; width: min(calc(88 * var(--ap2-vw, 1vw)), 1340px); height: min(calc(62 * var(--ap2-vw, 1vw)), 950px); max-width: none; max-height: none; translate: -50% -50%; background: radial-gradient(ellipse, rgba(255,214,150,0.50) 0%, rgba(255,192,132,0.31) 22%, rgba(252,170,120,0.17) 44%, rgba(240,158,120,0.08) 66%, rgba(230,150,120,0) 84%); animation: ap2HeroSunBloom 17s ease-in-out infinite; } @keyframes ap2HeroSunBloom { 0%, 100% { transform: scale(0.97); opacity: 0.78; } 46% { transform: scale(1.07); opacity: 1; } } @supports (mask-image: radial-gradient(#000, transparent)) or (-webkit-mask-image: radial-gradient(#000, transparent)) { .ap2-hs-sun::after { content: ""; position: absolute; left: 0; top: 0; width: min(calc(58 * var(--ap2-vw, 1vw)), 880px); height: min(calc(58 * var(--ap2-vw, 1vw)), 880px); translate: -50% -50%; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255,208,148,0.20) 0deg 3.2deg, rgba(255,208,148,0) 3.2deg 16deg); -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0) 14%, rgba(0,0,0,0.9) 38%, rgba(0,0,0,0) 82%); mask-image: radial-gradient(closest-side, rgba(0,0,0,0) 14%, rgba(0,0,0,0.9) 38%, rgba(0,0,0,0) 82%); will-change: opacity; animation: ap2HeroRayBreath 19s ease-in-out infinite; will-change: transform, opacity; } } @keyframes ap2HeroRayBreath { 0%, 100% { opacity: 0.34; } 50% { opacity: 0.66; } } .ap2-hs-petal { translate: calc(var(--gd-px, 0) * var(--pull, 12) * 1px * (1 + var(--gd-v, 0) * 1.8)) calc(var(--gd-py, 0) * var(--pull, 12) * 0.55px * (1 + var(--gd-v, 0) * 1.2)); } .ap2-hs-gust { translate: calc(var(--gd-px, 0) * var(--pull, 16) * 1px * (1 + var(--gd-v, 0) * 2.2)) calc(var(--gd-py, 0) * var(--pull, 16) * 0.5px * (1 + var(--gd-v, 0) * 1.4)); } .ap2-face { will-change: transform, translate; } .ap2-face__disc { position: relative; transform: perspective(820px) rotateY(calc(var(--gd-px, 0) * 3.2deg)) rotateX(calc(var(--gd-py, 0) * -2.6deg)); transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.45s ease; } .ap2-face { position: relative; } .ap2-face::before { content: ""; position: absolute; left: 50%; top: 0; width: 168%; aspect-ratio: 1; transform: translate(-50%, -22%); border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(255,246,214,0.34) 0%, rgba(255,242,206,0.15) 46%, rgba(255,240,200,0) 74%); translate: calc(var(--gd-px, 0) * -14%) calc(var(--gd-py, 0) * -11%); transition: translate 0.16s linear; } .ap2-face__disc, .ap2-face__cap { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .ap2-hs-h1 .ap2-hs-line { translate: none; transition: none !important; } .ap2-hs-sun::before, .ap2-hs-sun::after { animation: none !important; } .ap2-hs-sun::after { opacity: 0.4; } .ap2-hs-l, .ap2-hs-sun, .ap2-hs-glow, .ap2-face__disc, .ap2-face::before { transition: none !important; } } @media (max-width: 1080px) { .ap2-heroscene { display: flex; align-items: flex-start; justify-content: flex-start; margin-top: clamp(22px, 4vw, 34px); } .ap2-heroscene .ap2-face { display: none; } .ap2-pledge-arc { display: none; } .ap2-pledge { position: relative; inset: auto; align-self: flex-start; width: 100%; max-width: none; padding: 0; transform: rotate(-1.4deg); } .ap2-pledge-txt { text-align: start; } .ap2-pledge-txt > span { font-size: clamp(21.5px, 5.6vw, 27.5px); } } @media (max-width: 1100px) { .ap2-hs-eyebrow { width: auto !important; max-width: 100% !important; } .ap2-hs-eyebrow > span { white-space: normal !important; max-width: 100%; } } .ap2-hand-nudge { max-width: 21ch; } @media (min-width: 1640px) { .ap2-hs-nudge { margin-inline-start: 0; } .ap2-hand-nudge { max-width: 14ch; } } @media (max-width: 1639.98px) { .ap2-hs-nudge { flex-basis: 100%; margin-inline-start: 0; } } .ap2-hs-eyebrow-in { gap: 11px; padding: 9px 19px 9px 15px; } .ap2-hs-eyebrow-tx { font-size: 17.6px; } @media (max-width: 620px) { .ap2-hs-eyebrow-in { gap: 8px; padding: 7px 13px 7px 11px; } .ap2-hs-eyebrow-tx { font-size: 15.1px; } .ap2-hand-nudge { font-size: 24.5px; } .ap2-hs-lede { line-height: 1.52 !important; } .ap2-pledge { display: none; } p.ap2-hs-offer { margin-block-start: 20px; padding-block: 11px 11px; border-block-end: 1px solid color-mix(in srgb, currentColor 15%, transparent); font-size: 14.4px; line-height: 1.42; } .ap2-hs-offer .ap2-hs-offer-rail { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%); } .ap2-heroscene { display: none; } } @keyframes ap2HwAuroraRule { 0%, 20%, 60%, 74%, 100% { color: #241A2B; box-shadow: inset 0 -0.03em 0 rgba(36, 26, 43, 0.18); } 4% { color: #2B4E9B; box-shadow: inset 0 -0.05em 0 rgba(43, 78, 155, 0.3); } 9% { color: #5B3E96; box-shadow: inset 0 -0.05em 0 rgba(91, 62, 150, 0.3); } 14% { color: #8E2A55; box-shadow: inset 0 -0.05em 0 rgba(142, 42, 85, 0.3); } 64% { color: #9A4526; box-shadow: inset 0 -0.05em 0 rgba(154, 69, 38, 0.3); } 69% { color: #8A5520; box-shadow: inset 0 -0.05em 0 rgba(138, 85, 32, 0.3); } } .ap2-hs-plate { position: relative; width: 78.75%; max-width: 630px; margin-inline-start: auto; margin-inline-end: 2%; margin-block-start: -6%; padding-block-end: 12px; } .ap2-hs-plate .ap2-ovb { position: relative; isolation: isolate; aspect-ratio: 540 / 440; width: 100%; } .ap2-hs-art { position: relative; isolation: isolate; aspect-ratio: 540 / 560; width: 100%; container-type: inline-size; --ap2-face-disc: 25.5cqw; --ap2-face-name: max(18px, 2.63cqw); --ap2-face-pill: max(15.9px, 2.32cqw); --ap2-face-gap: max(11.4px, 1.66cqw); } .ap2-hs-art > svg { display: block; width: 100%; height: 100%; overflow: visible; } .ap2-hs-art .ap2-hs-in { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: ap2HsRise 900ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes ap2HsRise { from { opacity: 0; transform: translate(0, 22px) scale(0.955); } to { opacity: 1; transform: translate(0, 0) scale(1); } } .ap2-hs-art .ap2-hs-fl { transform-box: fill-box; transform-origin: 50% 50%; animation: ap2HsDrift 10s ease-in-out infinite alternate; } @keyframes ap2HsDrift { from { transform: translate(0, calc(var(--amp, 5px) * -1)); } to { transform: translate(0, var(--amp, 5px)); } } @media (prefers-reduced-motion: reduce) { .ap2-hs-art .ap2-hs-in, .ap2-hs-art .ap2-hs-fl { animation: none; opacity: 1; transform: none; } } .ap2-hs-pick { position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; max-inline-size: 100%; gap: 2px; z-index: 6; } .ap2-hs-pick-btn { inline-size: 16px; block-size: 16px; border-radius: 5px; border: 1px solid currentColor; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: inherit; opacity: 0.42; font: 600 9.5px/1 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Segoe UI', Tahoma, Arial, sans-serif; cursor: pointer; transition: opacity 160ms ease, background 160ms ease; } .ap2-hs-pick-btn:hover { opacity: 0.8; } .ap2-hs-pick-btn[aria-pressed='true'] { opacity: 1; background: currentColor; color: #FFFFFF; } .ap2-hs-pick-btn[aria-pressed='true'] { mix-blend-mode: difference; color: #FFFFFF; } .ap2-hs-pick-btn:focus-visible { outline: 2px solid #DD6E3E; outline-offset: 2px; opacity: 1; } .ap2-hs-plate .ap2-face { position: absolute; inset-block-end: 0; inset-inline-end: 2%; display: flex; flex-direction: column; align-items: flex-end; gap: var(--ap2-face-gap, 10px); max-width: 46%; width: auto !important; margin: 0; text-align: end; z-index: 2; } .ap2-hs-plate .ap2-face figcaption { min-width: 0; } .ap2-hs-plate .ap2-face .ap2-ask { white-space: normal; line-height: 1.22; text-align: center; font-size: var(--ap2-face-pill, 14px); } .ap2-hs-plate .ap2-face img, .ap2-hs-plate .ap2-face > :first-child { flex: none; } .ap2-heroscene { padding-block-end: 0; } .ap2-hs-offer { display: block; margin: 4px 0 0; padding-block-start: 18px; border-block-start: 1px solid color-mix(in srgb, currentColor 15%, transparent); max-width: 626px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: clamp(17.2px, 1.211vw, 20.5px); line-height: 1.5; } .ap2-hs-offer-rail { display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); } .ap2-hs-offer-set { display: inline-flex; align-items: center; gap: clamp(10px, 0.8vw, 16px); white-space: nowrap; margin-inline-end: clamp(10px, 0.8vw, 16px); } .ap2-hs-offer b { font-weight: 620; letter-spacing: -0.012em; } .ap2-hs-offer .ap2-hs-offer-set > span { font-weight: 440; opacity: 0.78; } .ap2-hs-offer-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.42; margin-inline: clamp(2px, 0.4vw, 8px); } @media (max-width: 1080px) { .ap2-heroscene { display: block; padding-block-end: 0; } .ap2-hs-art { --ap2-face-disc: 132px; --ap2-face-name: 15.85px; --ap2-face-pill: 14px; --ap2-face-gap: 10px; } .ap2-hs-plate { width: 89%; max-width: none; margin-inline-start: 0; margin-inline-end: 0; margin-block-start: 26px; padding-block-end: 0; } .ap2-hs-plate .ap2-face { position: static; justify-content: flex-end; margin-block-start: 16px; max-width: 100%; transform: none !important; translate: none !important; } } .ap2-hs-reviews { display: inline-flex; align-items: center; gap: 9px; border-radius: 8px; padding: 12px 20px; border: 1px solid transparent; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; white-space: nowrap; line-height: 1; } .ap2-hs-stars { display: inline-flex; gap: 1px; } .ap2-hs-stars svg { display: block; } .ap2-hs-rating { font-size: 16.8px; font-weight: 700; letter-spacing: -0.01em; } .ap2-hs-revrule { display: inline-block; width: 1px; height: 15px; margin-inline: 3px; background: currentColor; opacity: 0.28; } .ap2-hs-revcount { font-size: 16.8px; font-weight: 700; letter-spacing: -0.01em; } .ap2-hs-revlabel { font-size: 13.4px; font-weight: 470; opacity: 0.72; } @media (max-width: 520px) { .ap2-hs-reviews { padding: 11px 16px; gap: 7px; } .ap2-hs-revlabel { display: none; } } .ap2-hs.is-lens { background: radial-gradient(96% 92% at 20% 14%, #FFFFFF 0%, #FDFEFE 48%, #FAFCFD 100%), linear-gradient(172deg, #FFFFFF 0%, #FCFDFE 62%, #F7FAFC 100%); } .ap2-hs.is-lens .ap2-hs-sun, .ap2-hs.is-lens .ap2-hs-glow { display: none; } .ap2-hs.is-lens::before, .ap2-hs.is-lens::after { content: ''; position: absolute; inset: -12%; z-index: 0; pointer-events: none; border-radius: 50%; will-change: transform, opacity; } .ap2-hs.is-lens::before { background: radial-gradient(closest-side, var(--ln-bloom-a, rgba(255, 250, 238, 0.9)) 0%, rgba(255, 250, 238, 0) 72%); width: 62%; height: 78%; inset: -14% auto auto -8%; animation: ap2LnBloomA calc(37s * var(--ln-tempo, 1)) ease-in-out infinite; } .ap2-hs.is-lens::after { background: radial-gradient(closest-side, var(--ln-bloom-b, rgba(226, 240, 255, 0.82)) 0%, rgba(226, 240, 255, 0) 70%); width: 54%; height: 66%; inset: auto -10% -12% auto; animation: ap2LnBloomB calc(29s * var(--ln-tempo, 1)) ease-in-out infinite; } @keyframes ap2LnBloomA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; } 50% { transform: translate3d(7%, 5%, 0) scale(1.12); opacity: 1; } } @keyframes ap2LnBloomB { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); opacity: 0.78; } 50% { transform: translate3d(-6%, -4%, 0) scale(0.94); opacity: 1; } } .ap2-hs.is-lens .ap2-ln-stage { z-index: 1; } .ap2-ln-stage { position: absolute; inset: 0; pointer-events: none; } .ap2-ln-disc { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; pointer-events: none; background: var(--ln-wash, rgba(96, 118, 156, 0.062)); animation-name: ap2LnDrift; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: transform; } .ap2-ln-disc.is-warm { background: rgba(196, 86, 44, 0.055); } @keyframes ap2LnDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(calc(var(--ln-dx) * var(--ln-reach, 1)), calc(var(--ln-dy) * var(--ln-reach, 1)), 0); } 66% { transform: translate3d(calc(var(--ln-dy) * var(--ln-reach, 1)), calc(var(--ln-dx) * var(--ln-reach, 1)), 0); } } .ap2-ln-disc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.26); opacity: 0; animation-name: ap2LnTide; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: opacity; } @keyframes ap2LnTide { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .ap2-ln-disc:nth-child(1)::before { animation-duration: calc(43s * var(--ln-tempo, 1)); animation-delay: -23s; } .ap2-ln-disc:nth-child(2)::before { animation-duration: calc(53s * var(--ln-tempo, 1)); animation-delay: -61s; } .ap2-ln-disc:nth-child(3)::before { animation-duration: calc(59s * var(--ln-tempo, 1)); animation-delay: -97s; } .ap2-ln-disc:nth-child(4)::before { animation-duration: calc(67s * var(--ln-tempo, 1)); animation-delay: -134s; } .ap2-ln-disc:nth-child(5)::before { animation-duration: calc(41s * var(--ln-tempo, 1)); animation-delay: -11s; } .ap2-ln-lift { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(56% 54% at 6% 12%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.44) 46%, rgba(255,255,255,0) 78%); } .ap2-ln-lift { transform-origin: 6% 12%; animation: ap2LnPool calc(61s * var(--ln-tempo, 1)) ease-in-out infinite; will-change: transform, opacity; } @keyframes ap2LnPool { 0%, 100% { opacity: 0.88; transform: scale(1); } 50% { opacity: 1; transform: scale(1.045); } } .ap2-ln-stage { transform-origin: 54% 46%; animation: ap2LnSwell calc(79s * var(--ln-tempo, 1)) ease-in-out infinite, ap2LnCam calc(97s * var(--ln-tempo, 1)) cubic-bezier(0.36, 0.02, 0.22, 1) infinite; will-change: transform, translate; } @keyframes ap2LnSwell { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1 + 0.035 * var(--ln-swell, 1))); } } .ap2-hs.is-lens .ap2-ln-disc:nth-child(1) { translate: calc(var(--gd-px, 0) * 10px) calc(var(--gd-py, 0) * 6px); } .ap2-hs.is-lens .ap2-ln-disc:nth-child(2) { translate: calc(var(--gd-px, 0) * 13px) calc(var(--gd-py, 0) * 7.5px); } .ap2-hs.is-lens .ap2-ln-disc:nth-child(3) { translate: calc(var(--gd-px, 0) * 11px) calc(var(--gd-py, 0) * 6.5px); } .ap2-hs.is-lens .ap2-ln-disc:nth-child(4) { translate: calc(var(--gd-px, 0) * 15px) calc(var(--gd-py, 0) * 8.5px); } .ap2-hs.is-lens .ap2-ln-disc:nth-child(5) { translate: calc(var(--gd-px, 0) * 6px) calc(var(--gd-py, 0) * 3.5px); } .ap2-hs.is-lens .ap2-ln-lift { translate: calc(var(--gd-px, 0) * -7px) calc(var(--gd-py, 0) * -4px); } .ap2-ln-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(74, 130, 172, 0.10); opacity: 0; animation: ap2LnRing calc(89s * var(--ln-tempo, 1)) ease-in-out infinite; } .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: rgba(196, 86, 44, 0.10); } @keyframes ap2LnRing { 0%, 100% { opacity: 0; transform: scale(calc(1 - 0.03 * var(--ln-ring-amp, 1))); } 50% { opacity: 1; transform: scale(calc(1 + 0.03 * var(--ln-ring-amp, 1))); } } .ap2-hs.is-lens .ap2-ln-disc:nth-child(1) { scale: calc(1 + var(--gd-py, 0) * 0.030); } .ap2-hs.is-lens .ap2-ln-disc:nth-child(2) { scale: calc(1 + var(--gd-py, 0) * 0.040); } .ap2-hs.is-lens .ap2-ln-disc:nth-child(3) { scale: calc(1 - var(--gd-py, 0) * 0.034); } .ap2-hs.is-lens .ap2-ln-disc:nth-child(4) { scale: calc(1 + var(--gd-py, 0) * 0.046); } .ap2-hs.is-lens .ap2-ln-disc:nth-child(5) { scale: calc(1 - var(--gd-py, 0) * 0.026); } @keyframes ap2LnCam { 0% { translate: 0px 0px; } 16% { translate: -16px 5px; } 44% { translate: -22px -4px; } 61% { translate: 8px -10px; } 81% { translate: 13px 3px; } 100% { translate: 0px 0px; } } .ap2-ln-stage::before { content: ""; position: absolute; left: 46%; top: 16%; width: 820px; height: 340px; pointer-events: none; opacity: 0; background: radial-gradient(58% 62% at 30% 48%, rgba(204, 116, 60, 0.026) 0%, rgba(206, 124, 74, 0.019) 42%, rgba(208, 132, 88, 0.008) 72%, rgba(208, 132, 88, 0) 100%); animation: ap2LnCaustic calc(83s * var(--ln-tempo, 1)) cubic-bezier(0.32, 0.02, 0.24, 1) infinite; will-change: transform, opacity; } @keyframes ap2LnCaustic { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 6% { opacity: 1; transform: translate3d(60px, -6px, 0); } 30% { opacity: 1; transform: translate3d(360px, -18px, 0); } 64% { opacity: 0.78; transform: translate3d(650px, 4px, 0); } 88% { opacity: 0; transform: translate3d(860px, 22px, 0); } 100% { opacity: 0; transform: translate3d(940px, 26px, 0); } } .ap2-ln-stage::after { content: ""; position: absolute; left: 60%; top: -240px; width: 200px; height: 200px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(255, 248, 238, 0.72) 0%, rgba(255, 241, 224, 0.52) 30%, rgba(255, 235, 213, 0.24) 58%, rgba(255, 233, 209, 0.07) 80%, rgba(255, 233, 209, 0) 100%); animation: ap2LnGhost calc(51s * var(--ln-tempo, 1)) cubic-bezier(0.24, 0.04, 0.20, 1) infinite; will-change: transform, opacity; } @keyframes ap2LnGhost { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.58); } 3% { opacity: 0.85; transform: translate3d(-11px, 105px, 0) scale(0.67); } 14% { opacity: 1; transform: translate3d(-47px, 455px, 0) scale(0.92); } 29% { opacity: 0.95; transform: translate3d(-89px, 800px, 0) scale(1.12); } 43% { opacity: 0.60; transform: translate3d(-117px, 1055px, 0) scale(1.24); } 52% { opacity: 0; transform: translate3d(-130px, 1215px, 0) scale(1.30); } 100% { opacity: 0; transform: translate3d(-130px, 1215px, 0) scale(1.30); } } .ap2-ln-disc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(255, 238, 218, 0.30); opacity: 0; animation-name: ap2LnLit; animation-duration: calc(83s * var(--ln-tempo, 1)); animation-timing-function: cubic-bezier(0.18, 0.04, 0.28, 1); animation-iteration-count: infinite; will-change: opacity; } .ap2-ln-disc.is-warm::after { background: rgba(255, 234, 208, 0.34); } @keyframes ap2LnLit { 0%, 100% { opacity: 0; } 5% { opacity: 1; } 19% { opacity: 0.34; } 36% { opacity: 0; } } .ap2-ln-disc:nth-child(1)::after { animation-delay: 4s; background: rgba(255, 238, 218, 0.20); } .ap2-ln-disc:nth-child(2)::after { animation-delay: -9s; } .ap2-ln-disc:nth-child(3)::after { animation-delay: -21s; } .ap2-ln-disc:nth-child(4)::after { animation-delay: -3s; } .ap2-ln-disc:nth-child(5)::after { animation-delay: 4s; } @media (prefers-reduced-motion: reduce) { .ap2-hs.is-lens::before, .ap2-hs.is-lens::after { animation: none !important; } .ap2-hs.is-lens .ap2-ln-lift::after, .ap2-hs.is-lens .ap2-ln-lift::before { display: none !important; } .ap2-hs.is-lens .ap2-ln-disc { animation: none; transform: translate3d(var(--ln-dx), var(--ln-dy), 0); } .ap2-hs.is-lens .ap2-ln-disc::before { animation: none !important; opacity: 0; } .ap2-hs.is-lens .ap2-ln-stage { animation: none !important; transform: none; } .ap2-hs.is-lens .ap2-ln-lift { animation: none !important; opacity: 1; transform: none; } .ap2-hs.is-lens .ap2-ln-disc { translate: none; } .ap2-hs.is-lens .ap2-ln-lift { translate: none; } .ap2-ln-ring { animation: none; opacity: 0.55; transform: none; } .ap2-hs.is-lens .ap2-ln-disc { scale: none; } .ap2-hs.is-lens .ap2-ln-stage { translate: none; } .ap2-hs.is-lens .ap2-ln-stage::before, .ap2-hs.is-lens .ap2-ln-stage::after { animation: none !important; opacity: 0; } .ap2-hs.is-lens .ap2-ln-disc::after { animation: none !important; opacity: 0; } } .ap2-hs.is-lens.is-v1 { background: radial-gradient(120% 92% at 8% -8%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0) 58%), repeating-radial-gradient(circle at 50% 42%, rgba(96,140,186,0.028) 0 1px, rgba(96,140,186,0) 1px 34px), radial-gradient(78% 70% at 12% 4%, rgba(74,132,190,0.36) 0%, rgba(74,132,190,0) 74%), radial-gradient(72% 64% at 96% 30%, rgba(152,112,196,0.31) 0%, rgba(152,112,196,0) 70%), radial-gradient(76% 68% at 60% 108%, rgba(82,172,136,0.29) 0%, rgba(82,172,136,0) 72%), linear-gradient(172deg, #FFFFFF 0%, #F8FBFE 58%, #EFF4FA 100%); --ln-wash: rgba(120,160,200,0.055); --ln-swell: 1.71; --ln-tempo: 0.422; --ln-bloom-a: rgba(255, 249, 232, 0.94); --ln-bloom-b: rgba(214, 232, 255, 0.86); --ln-reach: 1.7; } .ap2-hs.is-lens.is-v1 .ap2-ln-disc { box-shadow: inset 0 1.5px 0 -0.5px rgba(255, 255, 255, 0.82), inset 0 -26vh 34vh -30vh rgba(38, 74, 116, 0.16), 0 3vh 7vh -5vh rgba(38, 74, 116, 0.11); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc:nth-child(1) { background: rgba(120,170,215,0.070); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc:nth-child(2) { background: rgba(168,150,205,0.068); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc:nth-child(3) { background: rgba(132,196,162,0.070); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc:nth-child(4) { background: rgba(226,186,120,0.066); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc.is-warm { background: rgba(235,140,96,0.062); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: rgba(74,132,190,0.15); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: rgba(140,110,196,0.135); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: rgba(70,170,124,0.135); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: rgba(198,152,76,0.125); } .ap2-hs.is-lens.is-v1 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: rgba(221,110,62,0.135); } .ap2-hs.is-lens.is-v4 { background: radial-gradient(118% 88% at 92% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0) 56%), repeating-radial-gradient(circle at 50% 46%, rgba(78,110,152,0.030) 0 1px, rgba(78,110,152,0) 1px 26px), radial-gradient(74% 66% at 6% 4%, rgba(72,96,158,0.34) 0%, rgba(72,96,158,0) 70%), radial-gradient(66% 58% at 96% 14%, rgba(158,86,130,0.27) 0%, rgba(158,86,130,0) 66%), radial-gradient(72% 64% at 74% 108%, rgba(64,140,138,0.30) 0%, rgba(64,140,138,0) 70%), radial-gradient(58% 52% at 26% 104%, rgba(198,160,98,0.22) 0%, rgba(198,160,98,0) 64%), linear-gradient(172deg, #FFFFFF 0%, #F7FAFD 60%, #ECF1F7 100%); --ln-wash: rgba(104,132,172,0.058); --ln-swell: 2.38; --ln-tempo: 0.26; --ln-ring-amp: 2.5; --ln-bloom-a: rgba(232, 244, 255, 0.92); --ln-bloom-b: rgba(255, 238, 226, 0.80); --ln-reach: 1.7; } .ap2-hs.is-lens.is-v4 .ap2-ln-disc { box-shadow: inset 0 1.5px 0 -0.5px rgba(255, 255, 255, 0.82), inset 0 -26vh 34vh -30vh rgba(30, 58, 104, 0.16), 0 3vh 7vh -5vh rgba(30, 58, 104, 0.11); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc:nth-child(1) { background: rgba(104,134,196,0.078); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc:nth-child(2) { background: rgba(92,178,176,0.078); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc:nth-child(3) { background: rgba(190,124,166,0.074); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc:nth-child(4) { background: rgba(220,190,136,0.072); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc.is-warm { background: rgba(226,144,104,0.062); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: rgba(58,86,152,0.15); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: rgba(40,136,134,0.135); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: rgba(154,80,128,0.125); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: rgba(186,148,84,0.125); } .ap2-hs.is-lens.is-v4 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: rgba(194,112,72,0.085); } .ap2-hs.is-lens.is-v5 { background: radial-gradient(116% 90% at 24% -10%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 60%), radial-gradient(58% 50% at 34% 30%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0) 68%), radial-gradient(66% 58% at 14% 4%, rgba(72,108,152,0.40) 0%, rgba(72,108,152,0) 66%), radial-gradient(74% 66% at 98% 26%, rgba(168,138,110,0.21) 0%, rgba(168,138,110,0) 70%), radial-gradient(80% 72% at 56% 110%, rgba(56,72,112,0.32) 0%, rgba(56,72,112,0) 74%), linear-gradient(172deg, #FFFFFF 0%, #FCFCFB 62%, #F5F6F8 100%); --ln-wash: rgba(96,112,142,0.070); --ln-swell: 2.17; --ln-tempo: 0.26; --ln-ring-amp: 2.75; --ln-bloom-a: rgba(255, 246, 230, 0.90); --ln-bloom-b: rgba(222, 233, 250, 0.82); --ln-reach: 1.7; } .ap2-hs.is-lens.is-v5 .ap2-ln-disc:nth-child(1) { background: rgba(80,114,156,0.092); } .ap2-hs.is-lens.is-v5 .ap2-ln-disc:nth-child(2) { background: rgba(172,142,112,0.080); } .ap2-hs.is-lens.is-v5 .ap2-ln-disc:nth-child(3) { background: rgba(86,96,140,0.092); } .ap2-hs.is-lens.is-v5 .ap2-ln-disc:nth-child(4) { background: rgba(178,162,124,0.086); } .ap2-hs.is-lens.is-v5 .ap2-ln-disc.is-warm { background: rgba(192,146,116,0.072); } .ap2-hs.is-lens.is-v5 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: rgba(70,102,142,0.105); } .ap2-hs.is-lens.is-v5 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: rgba(166,134,104,0.10); } .ap2-hs.is-lens.is-v5 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: rgba(72,82,126,0.105); } .ap2-hs.is-lens.is-v5 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: rgba(178,146,74,0.105); } .ap2-hs.is-lens.is-v5 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: rgba(186,140,110,0.09); } .ap2-hs.is-lens.is-v6 { background: radial-gradient(116% 90% at 20% -10%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 60%), radial-gradient(58% 50% at 36% 30%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0) 68%), radial-gradient(74% 66% at 10% 4%, rgba(52,164,124,0.40) 0%, rgba(52,164,124,0) 70%), radial-gradient(70% 62% at 98% 24%, rgba(186,168,124,0.23) 0%, rgba(186,168,124,0) 68%), radial-gradient(80% 72% at 58% 110%, rgba(48,116,114,0.30) 0%, rgba(48,116,114,0) 74%), linear-gradient(172deg, #FFFFFF 0%, #FBFDFA 62%, #F5F8F2 100%); --ln-wash: rgba(72,146,118,0.070); --ln-swell: 1.99; --ln-tempo: 0.326; --ln-ring-amp: 2.19; --ln-bloom-a: rgba(240, 255, 240, 0.90); --ln-bloom-b: rgba(255, 248, 226, 0.80); --ln-reach: 1.7; } .ap2-hs.is-lens.is-v6 .ap2-ln-disc:nth-child(1) { background: rgba(62,162,124,0.094); } .ap2-hs.is-lens.is-v6 .ap2-ln-disc:nth-child(2) { background: rgba(48,130,130,0.092); } .ap2-hs.is-lens.is-v6 .ap2-ln-disc:nth-child(3) { background: rgba(142,166,86,0.094); } .ap2-hs.is-lens.is-v6 .ap2-ln-disc:nth-child(4) { background: rgba(186,170,120,0.086); } .ap2-hs.is-lens.is-v6 .ap2-ln-disc.is-warm { background: rgba(192,152,116,0.072); } .ap2-hs.is-lens.is-v6 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: rgba(46,150,112,0.105); } .ap2-hs.is-lens.is-v6 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: rgba(28,116,116,0.10); } .ap2-hs.is-lens.is-v6 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: rgba(134,158,58,0.105); } .ap2-hs.is-lens.is-v6 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: rgba(180,162,116,0.105); } .ap2-hs.is-lens.is-v6 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: rgba(186,146,112,0.09); } .ap2-hs.is-lens.is-v8 { background: radial-gradient(118% 92% at 6% -12%, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0) 50%), repeating-radial-gradient(circle at 50% 46%, rgba(58,62,190,0.038) 0 1px, rgba(58,62,190,0) 1px 28px), radial-gradient(104% 94% at 0% 2%, rgba(58,62,190,0.58) 0%, rgba(58,62,190, 0) 72%), radial-gradient(104% 94% at 100% 100%, rgba(230,160,26,0.58) 0%, rgba(230,160,26, 0) 72%), radial-gradient(78% 62% at 52% 52%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0) 68%), linear-gradient(172deg, #FFFFFF 0%, #F4F4FE 56%, #FEF8EA 100%); --ln-bloom-a: rgba(226, 228, 255, 0.98); --ln-bloom-b: rgba(255, 244, 214, 0.94); --ln-wash: rgba(58,62,190,0.10); --ln-swell: 3.36; --ln-tempo: 0.26; --ln-ring-amp: 3.25; --ln-sweep: rgba(255, 250, 236, 0.80); --ln-sweep-t: 19s; --ln-reach: 2; } .ap2-hs.is-lens.is-v8 .ap2-ln-disc:nth-child(1) { background: rgba(58,62,190,0.148); } .ap2-hs.is-lens.is-v8 .ap2-ln-disc:nth-child(2) { background: rgba(230,160,26,0.138); } .ap2-hs.is-lens.is-v8 .ap2-ln-disc:nth-child(3) { background: rgba(58,62,190,0.130); } .ap2-hs.is-lens.is-v8 .ap2-ln-disc:nth-child(4) { background: rgba(230,160,26,0.124); } .ap2-hs.is-lens.is-v8 .ap2-ln-disc.is-warm { background: rgba(230,160,26,0.112); } .ap2-hs.is-lens.is-v8 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: rgba(58,62,190,0.32); } .ap2-hs.is-lens.is-v8 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: rgba(230,160,26,0.30); } .ap2-hs.is-lens.is-v8 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: rgba(58,62,190,0.28); } .ap2-hs.is-lens.is-v8 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: rgba(230,160,26,0.26); } .ap2-hs.is-lens.is-v8 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: rgba(230,160,26,0.24); } .ap2-hs.is-lens.is-v9 { background: radial-gradient(118% 92% at 6% -12%, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0) 50%), repeating-radial-gradient(circle at 50% 46%, rgba(12,158,106,0.038) 0 1px, rgba(12,158,106,0) 1px 28px), radial-gradient(104% 94% at 0% 2%, rgba(12,158,106,0.58) 0%, rgba(12,158,106, 0) 72%), radial-gradient(104% 94% at 100% 100%, rgba(238,92,76,0.58) 0%, rgba(238,92,76, 0) 72%), radial-gradient(78% 62% at 52% 52%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0) 68%), linear-gradient(172deg, #FFFFFF 0%, #F1FBF6 56%, #FEF2F0 100%); --ln-bloom-a: rgba(216, 255, 236, 0.98); --ln-bloom-b: rgba(255, 230, 224, 0.94); --ln-wash: rgba(12,158,106,0.10); --ln-swell: 3.22; --ln-tempo: 0.34; --ln-ring-amp: 3; --ln-sweep: rgba(255, 252, 244, 0.76); --ln-sweep-t: 27s; --ln-reach: 2; } .ap2-hs.is-lens.is-v9 .ap2-ln-disc:nth-child(1) { background: rgba(12,158,106,0.148); } .ap2-hs.is-lens.is-v9 .ap2-ln-disc:nth-child(2) { background: rgba(238,92,76,0.138); } .ap2-hs.is-lens.is-v9 .ap2-ln-disc:nth-child(3) { background: rgba(12,158,106,0.130); } .ap2-hs.is-lens.is-v9 .ap2-ln-disc:nth-child(4) { background: rgba(238,92,76,0.124); } .ap2-hs.is-lens.is-v9 .ap2-ln-disc.is-warm { background: rgba(238,92,76,0.114); } .ap2-hs.is-lens.is-v9 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: rgba(12,158,106,0.32); } .ap2-hs.is-lens.is-v9 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: rgba(238,92,76,0.30); } .ap2-hs.is-lens.is-v9 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: rgba(12,158,106,0.28); } .ap2-hs.is-lens.is-v9 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: rgba(238,92,76,0.26); } .ap2-hs.is-lens.is-v9 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: rgba(238,92,76,0.24); } .ap2-hs.is-lens.is-v17 { background: radial-gradient(96% 80% at 22% -12%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0) 52%), linear-gradient(118deg, rgba(255,255,255,0) 22%, rgba(142,164,218,0.26) 33%, rgba(255,255,255,0) 44%), linear-gradient(118deg, rgba(255,255,255,0) 43%, rgba(226,176,150,0.25) 54%, rgba(255,255,255,0) 65%), linear-gradient(118deg, rgba(255,255,255,0) 64%, rgba(136,192,182,0.24) 75%, rgba(255,255,255,0) 86%), linear-gradient(172deg, #FFFFFF 0%, #FCFBFA 58%, #F4F3F6 100%); --ln-bloom-a: rgba(244, 246, 254, 0.96); --ln-bloom-b: rgba(253, 246, 242, 0.88); --ln-wash: rgba(90,102,140,0.042); --ln-swell: 2.04; --ln-tempo: 0.422; --ln-ring-amp: 1.94; --ln-reach: 1.9; } .ap2-hs.is-lens.is-v17 .ap2-ln-disc:nth-child(1) { background: rgba(112,134,196,0.056); } .ap2-hs.is-lens.is-v17 .ap2-ln-disc:nth-child(2) { background: rgba(196,146,120,0.052); } .ap2-hs.is-lens.is-v17 .ap2-ln-disc:nth-child(3) { background: rgba(96,166,156,0.05); } .ap2-hs.is-lens.is-v17 .ap2-ln-disc:nth-child(4) { background: rgba(112,134,196,0.044); } .ap2-hs.is-lens.is-v17 .ap2-ln-disc.is-warm { background: rgba(196,146,120,0.044); } .ap2-hs.is-lens.is-v17 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: rgba(112,134,196,0.21); } .ap2-hs.is-lens.is-v17 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: rgba(196,146,120,0.2); } .ap2-hs.is-lens.is-v17 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: rgba(96,166,156,0.19); } .ap2-hs.is-lens.is-v17 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: rgba(112,134,196,0.18); } .ap2-hs.is-lens.is-v17 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: rgba(196,146,120,0.17); } .ap2-hs.is-lens.is-v18 .ap2-ln-disc::before, .ap2-hs.is-lens.is-v21 .ap2-ln-disc::before, .ap2-hs.is-lens.is-v23 .ap2-ln-disc::before { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 100%); } .ap2-hs.is-lens.is-v18 .ap2-ln-disc::after, .ap2-hs.is-lens.is-v21 .ap2-ln-disc::after, .ap2-hs.is-lens.is-v23 .ap2-ln-disc::after { background: radial-gradient(closest-side, rgba(255, 246, 236, 0.40) 0%, rgba(255, 246, 236, 0) 100%); } .ap2-hs.is-lens.is-v18 .ap2-ln-ring, .ap2-hs.is-lens.is-v21 .ap2-ln-ring, .ap2-hs.is-lens.is-v23 .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v18 { background: radial-gradient(84% 66% at 4% -12%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0) 46%), radial-gradient(58% 54% at 84% 6%, rgba(59,130,246,0.32) 0%, rgba(59,130,246,0) 66%), radial-gradient(54% 50% at 100% 64%, rgba(244,114,182,0.17) 0%, rgba(244,114,182,0) 64%), radial-gradient(66% 58% at 54% 112%, rgba(20,184,166,0.34) 0%, rgba(20,184,166,0) 68%), radial-gradient(48% 44% at 16% 88%, rgba(245,158,11,0.26) 0%, rgba(245,158,11,0) 64%), linear-gradient(168deg, #FFFFFF 0%, #FCFDFE 54%, #F2F6F8 100%); --ln-bloom-a: rgba(255, 255, 255, 0.44); --ln-bloom-b: rgba(236, 246, 250, 0.42); --ln-wash: rgba(59,130,246,0.05); --ln-swell: 2.1; --ln-tempo: 0.313; --ln-ring-amp: 1.25; --ln-reach: 3.2; --ln-band: rgba(255, 252, 244, 0.34); --ln-band-t: 38s; } .ap2-hs.is-lens.is-v18 .ap2-ln-disc:nth-child(1) { background: radial-gradient(closest-side, rgba(59,130,246,0.40) 0%, rgba(59,130,246,0) 100%); } .ap2-hs.is-lens.is-v18 .ap2-ln-disc:nth-child(2) { background: radial-gradient(closest-side, rgba(244,114,182,0.24) 0%, rgba(244,114,182,0) 100%); } .ap2-hs.is-lens.is-v18 .ap2-ln-disc:nth-child(3) { background: radial-gradient(closest-side, rgba(20,184,166,0.40) 0%, rgba(20,184,166,0) 100%); } .ap2-hs.is-lens.is-v18 .ap2-ln-disc:nth-child(4) { background: radial-gradient(closest-side, rgba(56,189,248,0.30) 0%, rgba(56,189,248,0) 100%); } .ap2-hs.is-lens.is-v18 .ap2-ln-disc.is-warm { background: radial-gradient(closest-side, rgba(251,146,60,0.30) 0%, rgba(251,146,60,0) 100%); } .ap2-hs.is-lens.is-v18 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v18 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v18 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v18 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v18 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v21 { background: radial-gradient(76% 62% at 6% -12%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0) 46%), conic-gradient(from 208deg at 76% 34%, rgba(244,114,182,0.22) 0deg, rgba(251,191,36,0.18) 62deg, rgba(52,211,153,0.20) 132deg, rgba(96,165,250,0.22) 210deg, rgba(167,139,250,0.22) 288deg, rgba(244,114,182,0.22) 360deg), linear-gradient(168deg, #FFFFFF 0%, #FDFCFF 56%, #F6F4FB 100%); --ln-bloom-a: rgba(255, 252, 255, 0.44); --ln-bloom-b: rgba(244, 246, 255, 0.40); --ln-wash: rgba(150,140,220,0.045); --ln-swell: 1.88; --ln-tempo: 0.34; --ln-ring-amp: 1.25; --ln-sweep: rgba(255, 255, 255, 0.44); --ln-sweep-t: 30s; --ln-reach: 3; --ln-band: rgba(255, 228, 240, 0.30); --ln-band-t: 42s; } .ap2-hs.is-lens.is-v21 .ap2-ln-disc:nth-child(1) { background: radial-gradient(closest-side, rgba(167,139,250,0.30) 0%, rgba(167,139,250,0) 100%); } .ap2-hs.is-lens.is-v21 .ap2-ln-disc:nth-child(2) { background: radial-gradient(closest-side, rgba(52,211,153,0.26) 0%, rgba(52,211,153,0) 100%); } .ap2-hs.is-lens.is-v21 .ap2-ln-disc:nth-child(3) { background: radial-gradient(closest-side, rgba(96,165,250,0.28) 0%, rgba(96,165,250,0) 100%); } .ap2-hs.is-lens.is-v21 .ap2-ln-disc:nth-child(4) { background: radial-gradient(closest-side, rgba(244,114,182,0.24) 0%, rgba(244,114,182,0) 100%); } .ap2-hs.is-lens.is-v21 .ap2-ln-disc.is-warm { background: radial-gradient(closest-side, rgba(251,191,36,0.24) 0%, rgba(251,191,36,0) 100%); } .ap2-hs.is-lens.is-v21 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v21 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v21 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v21 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v21 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v23 { background: radial-gradient(56% 40% at 10% -8%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 52%), radial-gradient(circle at 80% 86%, rgba(251,146,60,0.36) 0 84px, rgba(251,146,60,0.15) 168px, rgba(251,146,60,0) 340px), radial-gradient(64% 46% at 14% 104%, rgba(167,139,250,0.22) 0%, rgba(167,139,250,0) 64%), linear-gradient(178deg, #FFFFFF 0%, #FEF8F3 34%, #FAEDE8 66%, #EEE6F4 100%); --ln-bloom-a: rgba(255, 250, 244, 0.46); --ln-bloom-b: rgba(244, 238, 252, 0.42); --ln-wash: rgba(180,130,140,0.045); --ln-swell: 1.93; --ln-tempo: 0.354; --ln-ring-amp: 1.25; --ln-reach: 3; --ln-band: rgba(255, 226, 208, 0.32); --ln-band-t: 36s; --ln-sweep: rgba(255, 246, 236, 0.40); --ln-sweep-t: 23s; } .ap2-hs.is-lens.is-v23 .ap2-ln-disc:nth-child(1) { background: radial-gradient(closest-side, rgba(251,146,60,0.30) 0%, rgba(251,146,60,0) 100%); } .ap2-hs.is-lens.is-v23 .ap2-ln-disc:nth-child(2) { background: radial-gradient(closest-side, rgba(244,114,182,0.24) 0%, rgba(244,114,182,0) 100%); } .ap2-hs.is-lens.is-v23 .ap2-ln-disc:nth-child(3) { background: radial-gradient(closest-side, rgba(167,139,250,0.28) 0%, rgba(167,139,250,0) 100%); } .ap2-hs.is-lens.is-v23 .ap2-ln-disc:nth-child(4) { background: radial-gradient(closest-side, rgba(248,113,113,0.22) 0%, rgba(248,113,113,0) 100%); } .ap2-hs.is-lens.is-v23 .ap2-ln-disc.is-warm { background: radial-gradient(closest-side, rgba(253,186,116,0.28) 0%, rgba(253,186,116,0) 100%); } .ap2-hs.is-lens.is-v23 .ap2-ln-disc:nth-child(1) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v23 .ap2-ln-disc:nth-child(2) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v23 .ap2-ln-disc:nth-child(3) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v23 .ap2-ln-disc:nth-child(4) .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens.is-v23 .ap2-ln-disc.is-warm .ap2-ln-ring { border-color: transparent; } .ap2-hs.is-lens .ap2-ln-lift::after { content: ''; position: absolute; inset: -20% -60%; z-index: 0; pointer-events: none; background: linear-gradient(104deg, transparent 0%, var(--ln-sweep, transparent) 46%, var(--ln-sweep, transparent) 54%, transparent 100%); opacity: 0; animation: ap2LnSweep var(--ln-sweep-t, 24s) linear infinite; } .ap2-hs.is-lens .ap2-ln-lift::after { display: none; } .ap2-hs.is-lens.is-v8 .ap2-ln-lift::after, .ap2-hs.is-lens.is-v9 .ap2-ln-lift::after, .ap2-hs.is-lens.is-v21 .ap2-ln-lift::after, .ap2-hs.is-lens.is-v23 .ap2-ln-lift::after { display: block; } @keyframes ap2LnSweep { 0% { transform: translate3d(-46%, 0, 0) rotate(0.0001deg); opacity: 0; } 18% { opacity: 0.9; } 82% { opacity: 0.9; } 100% { transform: translate3d(46%, 0, 0) rotate(0.0001deg); opacity: 0; } } .ap2-hs.is-lens .ap2-ln-lift::before { content: ''; position: absolute; inset: -34% -74%; z-index: 0; pointer-events: none; display: none; background: linear-gradient(64deg, transparent 0%, var(--ln-band, transparent) 38%, var(--ln-band, transparent) 62%, transparent 100%); opacity: 0; animation: ap2LnBand var(--ln-band-t, 46s) linear infinite; will-change: transform, opacity; } @keyframes ap2LnBand { 0% { transform: translate3d(34%, 16%, 0) rotate(0.0001deg); opacity: 0; } 24% { opacity: 1; } 76% { opacity: 1; } 100% { transform: translate3d(-34%, -16%, 0) rotate(0.0001deg); opacity: 0; } } .ap2-hs.is-lens.is-v18 .ap2-ln-lift::before, .ap2-hs.is-lens.is-v21 .ap2-ln-lift::before, .ap2-hs.is-lens.is-v23 .ap2-ln-lift::before { display: block; } .ap2-person-cell { position: relative; } .ap2-person { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.22); background: #1B1F2B; transition: transform .34s cubic-bezier(0.16,1,0.3,1), border-color .28s ease, box-shadow .34s ease; } .ap2-person__frame { aspect-ratio: 1 / 1.34; overflow: hidden; } .ap2-person__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(9,11,19,0.90) 0%, rgba(9,11,19,0.80) 16%, rgba(9,11,19,0.58) 30%, rgba(9,11,19,0.30) 44%, rgba(9,11,19,0.10) 60%, rgba(9,11,19,0.02) 78%, rgba(9,11,19,0) 100%); } .ap2-person__cap { text-shadow: 0 1px 2px rgba(6,8,14,0.62), 0 2px 10px rgba(6,8,14,0.42); } .ap2-person__cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 13px 13px 12px; } .ap2-person__tag, .ap2-person__id, .ap2-person__stack { flex: 0 0 auto; } .ap2-person__tag { display: inline-block; align-self: flex-start; margin: 0 0 7px; padding: 3.5px 6px 3.5px 8px; border: 1px solid rgba(242,164,114,0.34); border-radius: 3px; background: rgba(9,11,19,0.78); font-size: 12px; line-height: 1.15; letter-spacing: 0.085em; text-transform: uppercase; color: #F2A472; } .ap2-person__id { display: flex; flex-direction: column; align-items: flex-start; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 17px; line-height: 1.22; min-height: 0; justify-content: flex-end; } .ap2-person__role, .ap2-person__name { font-size: inherit; line-height: inherit; letter-spacing: -0.016em; opacity: 1; transform: none; transition: color .24s ease; } .ap2-person__name { order: 0; font-weight: 700; font-size: 0.86em; color: #FFD9A8; } .ap2-person__role { order: 1; font-weight: 650; font-size: 1em; letter-spacing: -0.021em; color: #FFFFFF; } .ap2-person__stack { display: grid; align-content: end; min-height: 2.6em; margin-top: 3px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 13.6px; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,0.946); } .ap2-tmrail { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; margin-inline: calc(-1 * clamp(18px, 4vw, 56px)); padding-inline: clamp(18px, 4vw, 56px); scroll-padding-inline: clamp(18px, 4vw, 56px); } .ap2-tmrail::-webkit-scrollbar { display: none; } .ap2-tmrail.is-pinned { overflow-x: hidden; scroll-snap-type: none; } .ap2-tmtrack { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(10px, 1.1vw, 18px); width: max-content; will-change: transform; } .ap2-tmtrack > li { flex: 0 0 clamp(186px, 14.34vw, 223px); scroll-snap-align: start; } .ap2-tmrail-wrap { position: relative; } .ap2-tmrail-wrap .ap2-tmrail { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 94%, transparent 100%); } .ap2-tmnav { display: flex; align-items: center; gap: 12px; margin-top: clamp(14px, 1.6vw, 20px); } .ap2-tmarrow { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.946); cursor: pointer; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s cubic-bezier(0.16,1,0.3,1); } .ap2-tmarrow svg { width: 18px; height: 18px; display: block; } .ap2-tmarrow:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.42); color: #fff; } .ap2-tmarrow:active { transform: scale(0.94); } .ap2-tmarrow:focus-visible { outline: 2px solid #DD6E3E; outline-offset: 3px; } .ap2-tmrule { flex: 1 1 auto; height: 2px; background: rgba(255, 255, 255, 0.14); position: relative; overflow: hidden; } .ap2-tmrule::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--rail-p, 0%); background: #DD6E3E; } .ap2-tmhint { display: flex; align-items: center; gap: 10px; margin-top: clamp(14px, 1.6vw, 20px); } .ap2-tmhint i { flex: 1 1 auto; height: 2px; background: rgba(255, 255, 255, 0.14); position: relative; overflow: hidden; } .ap2-tmhint i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--rail-p, 0%); background: #DD6E3E; } @media (max-width: 940px) { .ap2-tmhint { display: none; } } @media (prefers-reduced-motion: reduce) { .ap2-tmhint { display: none; } } @media (max-width: 760px) { .ap2-split-l { gap: 6px; } } .ap2-cm-proof { color: rgba(11,11,12,0.883); } .ap2-cm-proofnum em { color: rgba(11,11,12,0.91); } .ap2-cm-proofrow { position: relative; } .ap2-cm-proofrow::before { content: ''; position: absolute; z-index: 2; top: -1px; left: 0; right: 0; height: 1px; background: var(--tone); opacity: 0.62; transform: scaleX(1); transform-origin: left center; transition: height .28s ease, opacity .28s ease; pointer-events: none; } .ap2-cm.is-lit .ap2-cm-proofrow::before { animation: ap2CmSweep .95s cubic-bezier(0.16,1,0.3,1) calc(var(--d) + .18s) both; } .ap2-cm-proofrow::after { content: ''; position: absolute; z-index: 0; inset: 0 -16px -16px; background: var(--tone); opacity: 0; transition: opacity .4s ease; pointer-events: none; } .ap2-cm-art, .ap2-cm-proofnum { position: relative; z-index: 1; } .ap2-cm-fw { display: inline-block; } .ap2-cm.is-lit .ap2-cm-fw { animation: ap2CmWord .78s cubic-bezier(0.16,1,0.3,1) calc(var(--d) + .42s + var(--w, 0) * .1s) both; } .ap2-cm.is-lit .ap2-cm-proofnum em { animation: ap2CmLabel .7s cubic-bezier(0.16,1,0.3,1) calc(var(--d) + .66s) both; } @keyframes ap2CmSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes ap2CmWord { from { opacity: 0; transform: translateY(0.4em); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes ap2CmLabel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ap2-cmfig--pulse.is-in .ap2-fig-dot { animation-name: ap2CmHop, ap2CmWait; animation-duration: 1s, 3.6s; animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out; animation-delay: var(--d), calc(var(--d) + 1.05s); animation-iteration-count: 1, infinite; animation-fill-mode: both, none; } .ap2-cmfig--pulse.is-in .ap2-cmp-in { animation: ap2CmLand 1.05s cubic-bezier(0.16,1,0.3,1) var(--d) both; } @keyframes ap2CmHop { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: 1; transform: translateY(-3.5px); } 55% { opacity: 1; transform: translateY(0); } 78% { opacity: 1; transform: translateY(-2px); } 100% { opacity: .82; transform: translateY(0); } } @keyframes ap2CmWait { 0%, 100% { opacity: .78; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1.4px); } } @keyframes ap2CmLand { 0% { opacity: 0; transform: translate(14px, 10px) scale(.86); } 62% { opacity: 1; } 100% { opacity: 1; transform: none; } } .ap2-cmfig--week .ap2-fig-tick { stroke-dasharray: 26; stroke-dashoffset: 0; } .ap2-cmfig--week.is-in .ap2-fig-tick { animation-name: ap2CmTick, ap2CmTickHold; animation-duration: .62s, 4.6s; animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out; animation-delay: var(--d), calc(var(--d) + .8s); animation-iteration-count: 1, infinite; animation-fill-mode: both, none; } .ap2-cmfig--week.is-in .ap2-cmw-day { animation: ap2CmDay .62s cubic-bezier(0.16,1,0.3,1) var(--d) both; } @keyframes ap2CmTick { from { opacity: 1; stroke-dashoffset: 26; } to { opacity: 1; stroke-dashoffset: 0; } } @keyframes ap2CmTickHold { 0%, 100% { opacity: .88; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } } @keyframes ap2CmDay { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .ap2-cmfig--ring.is-in .ap2-fig-ring { animation: ap2CmRing 1.15s linear var(--d) both; } .ap2-cmfig--ring.is-in .ap2-fig-dot { animation-name: ap2CmNode, ap2CmNodeIdle; animation-duration: .5s, 5.2s; animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out; animation-delay: var(--d), calc(var(--d) + 1.4s); animation-iteration-count: 1, infinite; animation-fill-mode: both, none; } @keyframes ap2CmRing { 0% { stroke-dashoffset: var(--arc); } 25% { stroke-dashoffset: calc(var(--arc) * .68); } 50% { stroke-dashoffset: calc(var(--arc) * .40); } 75% { stroke-dashoffset: calc(var(--arc) * .17); } 100% { stroke-dashoffset: 0; } } @keyframes ap2CmNode { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } } @keyframes ap2CmNodeIdle { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } } .ap2-cmfig--ledger.is-in .ap2-fig-line { animation: ap2CmWrite .5s cubic-bezier(0.16,1,0.3,1) var(--d) both; } .ap2-cml-caret { opacity: .9; } .ap2-cmfig--ledger.is-in .ap2-cml-caret { animation-name: ap2CmCaretIn, ap2CmCaret; animation-duration: .4s, 2.6s; animation-timing-function: cubic-bezier(0.16,1,0.3,1), ease-in-out; animation-delay: var(--d), calc(var(--d) + .5s); animation-iteration-count: 1, infinite; animation-fill-mode: both, none; } @keyframes ap2CmWrite { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes ap2CmCaretIn { from { opacity: 0; transform: translateY(4px); } to { opacity: .9; transform: none; } } @keyframes ap2CmCaret { 0%, 100% { opacity: .42; } 50% { opacity: 1; } } .ap2-cm-art > svg { max-width: 128px; transform-origin: left center; transition: transform .5s cubic-bezier(0.16,1,0.3,1); } .ap2-cm-proofnum b { transition: transform .5s cubic-bezier(0.16,1,0.3,1); } .ap2-cm-proofnum em { transition: color .35s ease; } .ap2-cm:hover .ap2-cm-proofrow::before { height: 2px; opacity: 1; } .ap2-cm:hover .ap2-cm-proofrow::after { opacity: .065; } .ap2-cm:hover .ap2-cm-art > svg { transform: translateX(2px) scale(1.05); } .ap2-cm:hover .ap2-cm-proofnum b { transform: translateY(-2px); } .ap2-cm:hover .ap2-cm-proofnum em { color: rgba(11,11,12,0.964); } @media (prefers-reduced-motion: reduce) { .ap2-cmfig *, .ap2-cm-fw, .ap2-cm-proofnum b, .ap2-cm-proofnum em, .ap2-cm-art > svg, .ap2-cm-proofrow::before, .ap2-cm-proofrow::after { animation: none !important; transition: none !important; } .ap2-cm-fw, .ap2-cm-proofnum em { opacity: 1; transform: none; filter: none; } .ap2-cm-art > svg { transform: none; } .ap2-cm-proofrow::before { transform: scaleX(1); } .ap2-cmfig .ap2-fig-tick { stroke-dashoffset: 0; } .ap2-cmfig .ap2-fig-dot, .ap2-cmfig .ap2-cml-caret, .ap2-cmfig .ap2-cmw-day { opacity: .9; transform: none; } .ap2-cmfig .ap2-cmp-in { opacity: 1; transform: none; } } .ap2-cmp-dial { stroke-dasharray: 81.68px; stroke-dashoffset: 81.68px; opacity: 0.45; } .ap2-cmfig--pulse.is-in .ap2-cmp-dial { animation: ap2CmDial 7.2s linear 1.4s infinite; } .ap2-cmfig--pulse.is-in .ap2-cmp-hand { transform-origin: 106px 26px; animation: ap2CmHand 7.2s cubic-bezier(0.4, 0, 0.2, 1) 1.4s infinite; } .ap2-cmfig--pulse.is-in .ap2-cmp-in { animation: ap2CmReply 7.2s ease-in-out 1.4s infinite; } @keyframes ap2CmDial { 0% { stroke-dashoffset: 81.68px; } 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes ap2CmHand { 0% { transform: rotate(0deg); } 86% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes ap2CmReply { 0%, 44% { transform: translateY(7px) scale(0.94); opacity: 0; } 54%, 92% { transform: none; opacity: 1; } 100% { transform: translateY(7px) scale(0.94); opacity: 0; } } .ap2-cmw-walk { opacity: 0; } .ap2-cmfig--week.is-in .ap2-cmw-walk { animation: ap2CmWalk 7.2s cubic-bezier(0.5, 0, 0.2, 1) 1.5s infinite; } @keyframes ap2CmWalk { 0% { transform: translateX(0); opacity: 0; } 6% { transform: translateX(0); opacity: 0.6; } 20% { transform: translateX(24px); } 34% { transform: translateX(48px); } 48% { transform: translateX(72px); } 62% { transform: translateX(96px); opacity: 0.6; } 74% { transform: translateX(96px); opacity: 0; } 80%, 100% { transform: translateX(0); opacity: 0; } } .ap2-cmfig--week.is-in .ap2-cmw-tick { animation: ap2CmReTick 7.2s ease-out 1.5s infinite; } @keyframes ap2CmReTick { 0%, 78% { transform: scale(1); } 86% { transform: scale(1.28); } 100% { transform: scale(1); } } .ap2-cmr-orbit { transform-origin: 66px 46px; opacity: 0; } .ap2-cmfig--ring.is-in .ap2-cmr-orbit { animation: ap2CmOrbit 7.2s linear 1.7s infinite; } @keyframes ap2CmOrbit { 0% { transform: rotate(0deg); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: rotate(360deg); opacity: 0; } } .ap2-cml-turn { opacity: 0; } .ap2-cmfig--ledger.is-in .ap2-cml-turn { animation: ap2CmTurn 7.2s cubic-bezier(0.5, 0, 0.2, 1) 1.8s infinite; } @keyframes ap2CmTurn { 0%, 40% { transform: rotateY(0deg) translateX(0); opacity: 0; } 46% { transform: rotateY(0deg) translateX(0); opacity: 1; } 72% { transform: rotateY(-64deg) translateX(-16px); opacity: 0.9; } 84% { transform: rotateY(-92deg) translateX(-22px); opacity: 0; } 100% { transform: rotateY(0deg) translateX(0); opacity: 0; } } .ap2-com:hover .ap2-cmfig, .ap2-com:hover .ap2-cmfig * { animation-duration: 4.4s; } @media (prefers-reduced-motion: reduce) { .ap2-cmp-dial, .ap2-cmp-hand, .ap2-cmp-in, .ap2-cmw-walk, .ap2-cmw-tick, .ap2-cmr-orbit, .ap2-cml-turn { animation: none !important; } .ap2-cmw-walk, .ap2-cmr-orbit, .ap2-cml-turn { opacity: 0; } .ap2-cmp-in { opacity: 1; transform: none; } .ap2-cmp-dial { stroke-dashoffset: 0; } } .ap2-slk { align-items: stretch; } .ap2-slk-copy { --pl: clamp(22px, 2.2vw, 32px); position: relative; padding-inline-start: var(--pl); padding-top: 4px; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(22px, 2.1vw, 30px); } .ap2-slk-node { position: absolute; left: -3.5px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: #DD6E3E; box-shadow: 0 0 0 4px rgba(221,110,62,0.14); transform-origin: center; transform: scale(0); opacity: 0; transition: transform .75s cubic-bezier(0.16,1,0.3,1) .06s, opacity .5s ease .06s; z-index: 2; } .ap2-slk.is-in .ap2-slk-node { transform: scale(1); opacity: 1; } .ap2-slk-rail { position: absolute; left: 0; top: 13px; bottom: 2px; width: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; } .ap2-slk-rail::before { content: ''; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, #DD6E3E 0%, rgba(221,110,62,0.52) 62%, rgba(221,110,62,0.09) 100%); transform: scaleY(0); transform-origin: top center; transition: transform 1.15s cubic-bezier(0.16,1,0.3,1) .14s; } .ap2-slk.is-in .ap2-slk-rail::before { transform: scaleY(1); } .ap2-slk-rail > i { position: absolute; left: 0; top: -74px; width: 2px; height: 74px; border-radius: 2px; background: linear-gradient(180deg, rgba(221,110,62,0) 0%, #EFA179 30%, #FFFFFF 52%, #DD6E3E 72%, rgba(221,110,62,0) 100%); opacity: 0; } .ap2-slk.is-in .ap2-slk-rail > i { animation: ap2SlkSend .90s cubic-bezier(0.36,0,0.28,1) .78s both; } @keyframes ap2SlkSend { 0% { opacity: 0; top: -74px; } 14% { opacity: 1; } 76% { opacity: 1; } 100% { opacity: 0; top: 100%; } } .ap2-slk-kick { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; opacity: 0; transform: translateX(-9px); transition: opacity .8s cubic-bezier(0.16,1,0.3,1) .12s, transform .8s cubic-bezier(0.16,1,0.3,1) .12s; } .ap2-slk.is-in .ap2-slk-kick { opacity: 1; transform: none; } .ap2-slk-kicker { font-size: 14.95px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(11,11,12,0.901); } .ap2-slk-h2 { margin: 0 0 18px; } .ap2-slk-h2 .ap2-slk-reply { display: block; color: #DD6E3E; } .ap2-slk-say { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: clamp(17.1px, 1.16vw, 19.9px); font-weight: 470; line-height: 1.66; color: rgba(11,11,12,0.946); margin: 0; max-width: 33em; } .ap2-slk-w { display: inline-block; opacity: 0; filter: blur(5px); transform: translateY(7px); transition: opacity .6s cubic-bezier(0.16,1,0.3,1) var(--d, 0s), filter .6s cubic-bezier(0.16,1,0.3,1) var(--d, 0s), transform .6s cubic-bezier(0.16,1,0.3,1) var(--d, 0s); } .ap2-slk.is-in .ap2-slk-w { opacity: 1; filter: blur(0); transform: none; } .ap2-slk-st { position: relative; opacity: 0; transform: translateX(-10px); transition: opacity .66s cubic-bezier(0.16,1,0.3,1) var(--d, 0s), transform .66s cubic-bezier(0.16,1,0.3,1) var(--d, 0s); } .ap2-slk.is-in .ap2-slk-st { opacity: 1; transform: none; } .ap2-slk-stnode { position: absolute; inset-inline-start: calc(var(--pl) * -1 - 2.5px); top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #DD6E3E; box-shadow: 0 0 0 3px rgba(221,110,62,0.13); transform: scale(0); transition: transform .62s cubic-bezier(0.34,1.4,0.5,1) var(--d, 0s); } .ap2-slk.is-in .ap2-slk-stnode { transform: scale(1); } .ap2-slk-sthair { position: absolute; inset-inline-start: calc(var(--pl) * -1 + 6px); top: 7px; width: calc(var(--pl) - 12px); height: 1px; background: rgba(221,110,62,0.40); transform: scaleX(0); transform-origin: left center; transition: transform .62s cubic-bezier(0.16,1,0.3,1) calc(var(--d, 0s) + .08s); } .ap2-slk.is-in .ap2-slk-sthair { transform: scaleX(1); } .ap2-slk-stl { display: block; font-size: 13.4px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #9E3B22; } .ap2-slk-stbody { display: flex; align-items: flex-start; gap: 13px; margin: 8px 0 0; } .ap2-slk-stt { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: clamp(15.7px, 1.02vw, 16.9px); font-weight: 460; line-height: 1.6; color: rgba(11,11,12,0.937); margin: 0; max-width: 34em; } .ap2-slk-faces { display: inline-flex; flex-shrink: 0; padding-top: 1px; } .ap2-slk-faces img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; display: block; border: 2px solid #EFF4F8; box-shadow: 0 1px 3px rgba(11,15,20,0.14); } .ap2-slk-faces img + img { margin-inline-start: -10px; } .ap2-slk-panel { position: relative; background: #FFFFFF; border: 1px solid #E3DFD5; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 64px rgba(11,15,20,0.10); } .ap2-slk-panel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #DD6E3E 0%, rgba(221,110,62,0.36) 56%, rgba(221,110,62,0.08) 100%); transform: scaleY(0); transform-origin: top center; transition: transform 1.05s cubic-bezier(0.16,1,0.3,1) 1.20s; z-index: 2; } .ap2-slk.is-in .ap2-slk-panel::before { transform: scaleY(1); } .ap2-slk-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; overflow: hidden; pointer-events: none; z-index: 3; } .ap2-slk-edge > i { position: absolute; left: 0; top: -88px; width: 2px; height: 88px; border-radius: 2px; background: linear-gradient(180deg, rgba(221,110,62,0) 0%, #EFA179 30%, #FFFFFF 52%, #DD6E3E 72%, rgba(221,110,62,0) 100%); opacity: 0; } .ap2-slk.is-in .ap2-slk-edge > i { animation: ap2SlkRun 1.10s cubic-bezier(0.34,0,0.3,1) 1.30s both; } @keyframes ap2SlkRun { 0% { opacity: 0; top: -88px; } 10% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; top: 100%; } } .ap2-slk-head { display: flex; align-items: center; gap: 10px; padding-block: 14px; padding-inline: 22px 18px; border-bottom: 1px solid rgba(11,11,12,0.12); } .ap2-slk-dot { width: 8px; height: 8px; border-radius: 999px; background: #4CAF7A; box-shadow: 0 0 0 3px rgba(76,175,122,0.16); flex-shrink: 0; } .ap2-slk-chan { font-size: 13.9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(11,11,12,0.91); } .ap2-slk-when { margin-inline-start: auto; font-size: 13.7px; letter-spacing: 0.1em; color: rgba(11,11,12,0.892); white-space: nowrap; } .ap2-slk-thread { list-style: none; margin: 0; padding-block: 20px; padding-inline: 22px 20px; display: grid; gap: 17px; } .ap2-slk-msg { display: flex; gap: 12px; align-items: flex-start; min-width: 0; opacity: 0; transform: translateY(12px); transition: opacity .62s cubic-bezier(0.16,1,0.3,1) var(--d, 0s), transform .62s cubic-bezier(0.16,1,0.3,1) var(--d, 0s); } .ap2-slk.is-in .ap2-slk-msg { opacity: 1; transform: none; } .ap2-slk-av { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #FBEEE6; border: 1px solid rgba(221,110,62,0.26); font-size: 14.9px; font-weight: 600; color: rgba(11,11,12,0.874); } .ap2-slk-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .ap2-slk-msg.is-them .ap2-slk-av { background: #EFF4F8; border-color: rgba(91,138,175,0.28); } .ap2-slk-body { min-width: 0; flex: 1 1 auto; } .ap2-slk-meta { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; } .ap2-slk-who { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 15.85px; font-weight: 660; color: #0B0B0C; } .ap2-slk-time { font-size: 13.65px; color: rgba(11,11,12,0.892); } .ap2-slk-bub { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 15.85px; font-weight: 460; line-height: 1.56; color: rgba(11,11,12,0.955); margin: 7px 0 0; padding: 11px 15px; border-radius: 4px 12px 12px 12px; background: rgba(221,110,62,0.055); border: 1px solid rgba(221,110,62,0.20); } .ap2-slk-msg.is-them .ap2-slk-bub { background: #EFF4F8; border-color: rgba(91,138,175,0.24); } .ap2-slk-close { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding-block: 13px 14px; padding-inline: 22px 18px; border-top: 1px solid rgba(11,11,12,0.12); background: linear-gradient(180deg, rgba(251,238,230,0) 0%, rgba(251,238,230,0.55) 100%); opacity: 0; transform: translateY(8px); transition: opacity .7s cubic-bezier(0.16,1,0.3,1) 2.24s, transform .7s cubic-bezier(0.16,1,0.3,1) 2.24s; } .ap2-slk.is-in .ap2-slk-close { opacity: 1; transform: none; } .ap2-slk-elapsed { font-size: 13.7px; font-weight: 700; letter-spacing: 0.1em; color: #9E3B22; background: #FBEEE6; border: 1px solid rgba(158,59,34,0.20); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .ap2-slk-closetxt { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 15.65px; font-weight: 500; color: rgba(11,11,12,0.928); } @media (max-width: 1040px) { .ap2-slk-copy { margin-bottom: 6px; gap: 26px; } } @media (max-width: 560px) { .ap2-slk-stbody { flex-direction: column; gap: 11px; } .ap2-slk-faces img { width: 32px; height: 32px; } } @media (prefers-reduced-motion: reduce) { .ap2-slk-kick, .ap2-slk-w, .ap2-slk-msg, .ap2-slk-close, .ap2-slk-node, .ap2-slk-st { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .ap2-slk-rail::before, .ap2-slk-panel::before, .ap2-slk-sthair, .ap2-slk-stnode { transform: scaleX(1) scaleY(1) !important; transition: none !important; } .ap2-slk-rail > i, .ap2-slk-edge > i { display: none !important; } .ap2-slk > * { transition: none !important; } } .ap2-slk-view { position: relative; flex: 0 0 auto; height: clamp(316px, 25.5vw, 424px); margin-inline-start: calc(var(--pl) * -1 - 6px); padding-block: 2px 0; padding-inline: calc(var(--pl) + 6px) 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent 100%); } .ap2-slk-view::-webkit-scrollbar { width: 0; height: 0; } .ap2-slk-track { display: flex; flex-direction: column; gap: clamp(24px, 2.3vw, 34px); padding-bottom: 40px; } .ap2-slk-stl { font-size: 14.7px; letter-spacing: 0.13em; } .ap2-slk-stt { font-size: clamp(16.5px, 1.08vw, 17.9px); line-height: 1.62; color: rgba(11,11,12,0.946); } .ap2-slk-stnode { width: 9px; height: 9px; top: 5px; } .ap2-slk-faces img { width: 38px; height: 38px; } .ap2-slk-sel { -webkit-box-decoration-break: clone; box-decoration-break: clone; background: rgba(221,110,62,0.30); box-shadow: 0 0 0 3px rgba(221,110,62,0.30); border-radius: 2px; color: #17110C; } .ap2-slk-say { color: #17110C; } .ap2-slk-say ::selection { background: rgba(221,110,62,0.58); } @media (prefers-reduced-motion: reduce) { .ap2-slk-view { scroll-behavior: auto; } } @media (max-width: 620px) { .ap2-slk-section { display: none; } } [data-sec="channels"] .ap2-quote { grid-template-columns: minmax(0, 780px) 229px; column-gap: clamp(154px, 10.8vw, 178px); padding-inline-end: 0; justify-content: start; } [data-sec="channels"] .ap2-quote-who img { width: 206px; height: 206px; } [data-sec="channels"] .ap2-quote-who figcaption { margin-top: 13px; } [data-sec="channels"] .ap2-quote-who figcaption b { font-size: 16.6px; font-weight: 560; letter-spacing: -0.022em; color: rgba(11,11,12,0.964); } [data-sec="channels"] .ap2-quote-who figcaption span { font-size: 15.2px; color: rgba(11,11,12,0.874); } [data-sec="channels"] .ap2-chmark { position: absolute; pointer-events: none; overflow: visible; } [data-sec="channels"] .ap2-chmark path { fill: none; stroke: #E0362B; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); } [data-sec="channels"] .ap2-chmark.is-on path { animation: ap2Draw .95s cubic-bezier(0.16,1,0.3,1) both; } [data-sec="channels"] .ap2-chmark.is-on .ap2-chmark-shaft { animation-delay: .95s; } [data-sec="channels"] .ap2-chmark.is-on .ap2-chmark-barb { animation-duration: .26s; animation-timing-function: cubic-bezier(0.22,1,0.3,1); animation-delay: 1.86s; } [data-sec="channels"] .ap2-chmark.is-on .ap2-chmark-barb + .ap2-chmark-barb { animation-delay: 1.96s; } [data-sec="channels"] .ap2-chmark-side { right: 200px; top: 110px; } [data-sec="channels"] .ap2-chmark-up { display: none; } @media (max-width: 1060px) { [data-sec="channels"] .ap2-quote { grid-template-columns: minmax(0, 1fr); column-gap: clamp(10px, 1vw, 18px); } [data-sec="channels"] .ap2-quote-who img { width: 91px; height: 91px; } [data-sec="channels"] .ap2-quote-who figcaption { margin-top: 0; } [data-sec="channels"] .ap2-chmark path { stroke-width: 3.2; } [data-sec="channels"] .ap2-chmark-side { display: none; } [data-sec="channels"] .ap2-chmark-up { display: block; left: 6px; top: -46px; } } @media (prefers-reduced-motion: reduce) { [data-sec="channels"] .ap2-chmark path { animation: none !important; stroke-dashoffset: 0 !important; } } [data-sec="channels"] .ap2-mix-head > .ap2-mono { color: rgba(11,11,12,0.883); } [data-sec="channels"] .ap2-mix-count { color: rgba(11,11,12,0.883); } [data-sec="channels"] .ap2-mix-cap { color: rgba(11,11,12,0.883); } [data-sec="channels"] .ap2-pick:not(.is-on) .ap2-pick-tag { color: rgba(11,11,12,0.883); } [data-sec="channels"] .ap2-pick-box:not(.is-on) { color: rgba(11,11,12,0.874); } .ap2-pick::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1.8px solid var(--brand); opacity: 0; pointer-events: none; animation: ap2PickSweep 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.1s); } .ap2-picks .ap2-pick { animation: ap2PickLift 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.1s); } @keyframes ap2PickSweep { 0% { opacity: 0; } 3% { opacity: 1; } 9% { opacity: 0.85; } 15% { opacity: 0; } 100% { opacity: 0; } } @keyframes ap2PickLift { 0% { transform: translateY(0); box-shadow: none; } 4% { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(11,15,20,0.10); } 12% { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11,15,20,0.07); } 18% { transform: translateY(0); box-shadow: none; } 100% { transform: translateY(0); box-shadow: none; } } .ap2-picks:hover .ap2-pick::after, .ap2-picks:focus-within .ap2-pick::after { animation: none; opacity: 0; } .ap2-picks:hover .ap2-pick, .ap2-picks:focus-within .ap2-pick { animation: none; } @media (prefers-reduced-motion: reduce) { .ap2-pick::after, .ap2-picks .ap2-pick { animation: none; opacity: 0; } .ap2-picks .ap2-pick { opacity: 1; transform: none; box-shadow: none; } } @media (max-width: 620px) { [data-sec="channels"] .ap2-pick-tag { font-size: 12px; } } [data-sec="channels"] .ap2-orbit { display: flex; flex-direction: column; margin: 18px 0 0; } [data-sec="channels"] .ap2-orbit-pick { display: flex; flex-direction: column; gap: 10px; align-self: center; inline-size: 172px; } [data-sec="channels"] .ap2-orbit-hint { font-size: 13.3px; line-height: 1.3; color: rgba(11,11,12,0.82); text-align: center; } [data-sec="channels"] .ap2-orbit-seg { position: relative; display: grid; grid-template-rows: repeat(var(--n, 4), minmax(0, 1fr)); gap: 2px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,0.86); border: 1px solid rgba(11,11,12,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 12px 30px -20px rgba(11,15,20,0.5); } [data-sec="channels"] .ap2-orbit-seg-block { position: absolute; inset-inline: 6px; block-size: calc((100% - 12px - 2px * (var(--n, 4) - 1)) / var(--n, 4)); top: calc(6px + var(--i, 0) * ((100% - 12px - 2px * (var(--n, 4) - 1)) / var(--n, 4) + 2px)); border-radius: 11px; background: linear-gradient(180deg, #1A1B20 0%, #101114 100%); box-shadow: 0 10px 22px -12px rgba(11,15,20,0.75); transition: top .46s cubic-bezier(0.16,1,0.3,1); } [data-sec="channels"] .ap2-orbit-seg-block::after { content: ''; position: absolute; inset-inline-end: -4px; top: 50%; inline-size: 9px; block-size: 9px; transform: translateY(-50%) rotate(45deg); border-radius: 2px; background: #101114; } [data-sec="channels"] .ap2-orbit-chip { position: relative; z-index: 1; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 10px; border: 0; background: transparent; border-radius: 11px; text-align: start; cursor: pointer; color: rgba(11,11,12,0.874); transition: color .3s ease; } [data-sec="channels"] .ap2-orbit-chipmark { display: inline-flex; align-items: center; justify-content: center; inline-size: 26px; block-size: 26px; border-radius: 8px; background: rgba(11,11,12,0.05); color: rgba(11,11,12,0.847); transition: background .3s ease, color .3s ease; } [data-sec="channels"] .ap2-orbit-chipname { min-inline-size: 0; font-size: 15.1px; font-weight: 560; letter-spacing: -0.012em; line-height: 1.2; } [data-sec="channels"] .ap2-orbit-chip:hover { color: rgba(11,11,12,0.95); } [data-sec="channels"] .ap2-orbit-chip:hover .ap2-orbit-chipmark { background: rgba(11,11,12,0.09); } [data-sec="channels"] .ap2-orbit-chip.is-on, [data-sec="channels"] .ap2-orbit-chip.is-on:hover { color: #FFFFFF; } [data-sec="channels"] .ap2-orbit-chip.is-on .ap2-orbit-chipmark, [data-sec="channels"] .ap2-orbit-chip.is-on:hover .ap2-orbit-chipmark { background: var(--lead, #1E40AF); color: #FFFFFF; } [data-sec="channels"] .ap2-orbit-chip svg { flex: none; } [data-sec="channels"] .ap2-orbit-body { display: grid; grid-template-columns: minmax(266px, 0.41fr) auto minmax(0, 1fr); gap: clamp(18px, 2.1vw, 40px); align-items: start; } [data-sec="channels"] .ap2-orbit-side { display: flex; flex-direction: column; min-inline-size: 0; } [data-sec="channels"] .ap2-orbit-groups { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; } [data-sec="channels"] .ap2-orbit-group { padding: 12px 16px 8px; border: 1px solid rgba(11,11,12,0.1); border-radius: 14px; background: rgba(255,255,255,0.76); transition: border-color .3s ease, box-shadow .3s ease; } [data-sec="channels"] .ap2-orbit-group.is-lit { border-color: var(--tone); box-shadow: 0 10px 26px rgba(11,15,20,0.07); } [data-sec="channels"] .ap2-orbit-ghead { display: flex; align-items: baseline; gap: 10px; } [data-sec="channels"] .ap2-orbit-gnum { font-size: 13.4px; font-weight: 700; color: var(--tone); opacity: 0.7; } [data-sec="channels"] .ap2-orbit-ghead b { flex: 1 1 auto; min-inline-size: 0; font-size: clamp(16.3px, calc(1.1vw + 0.9px), 18.3px); font-weight: 600; letter-spacing: -0.018em; color: #0B0B0C; } [data-sec="channels"] .ap2-orbit-ghead em { font-style: normal; font-size: clamp(17.1px, calc(1.24vw + 0.9px), 20.4px); font-weight: 700; color: var(--tone); font-variant-numeric: tabular-nums; } [data-sec="channels"] .ap2-orbit-gbar { display: block; block-size: 6px; margin: 11px 0 4px; border-radius: 999px; background: rgba(11,11,12,0.07); overflow: hidden; } [data-sec="channels"] .ap2-orbit-gbar > i { display: block; block-size: 100%; border-radius: inherit; background: var(--tone); } [data-sec="channels"] .ap2-orbit-items { margin: 0; padding: 0; list-style: none; } [data-sec="channels"] .ap2-orbit-item { border-top: 1px solid rgba(11,11,12,0.07); } [data-sec="channels"] .ap2-orbit-itembtn { inline-size: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 2px; border: 0; background: transparent; text-align: start; cursor: pointer; } [data-sec="channels"] .ap2-orbit-dot { flex: none; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--shade); box-shadow: 0 0 0 1px var(--edge, transparent), 0 0 0 3px rgba(255,255,255,0.9); } [data-sec="channels"] .ap2-orbit-itembtn b { flex: 1 1 auto; min-inline-size: 0; font-size: 15px; font-weight: 550; letter-spacing: -0.008em; color: rgba(11,11,12,0.937); transition: color .24s ease; } [data-sec="channels"] .ap2-orbit-chev { display: inline-flex; color: rgba(11,11,12,0.721); transition: transform .3s cubic-bezier(0.16,1,0.3,1), color .24s ease; } [data-sec="channels"] .ap2-orbit-item.is-open .ap2-orbit-chev { transform: rotate(180deg); color: var(--tone); } [data-sec="channels"] .ap2-orbit-item.is-lit .ap2-orbit-itembtn b { color: #0B0B0C; } [data-sec="channels"] .ap2-orbit-item.is-lit { background: rgba(11,11,12,0.022); } [data-sec="channels"] .ap2-orbit-desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(0.16,1,0.3,1); } [data-sec="channels"] .ap2-orbit-item.is-open .ap2-orbit-desc { grid-template-rows: 1fr; } [data-sec="channels"] .ap2-orbit-desc > p { overflow: hidden; margin: 0; padding-inline-start: 19px; font-size: 14.8px; line-height: 1.5; color: rgba(11,11,12,0.865); } [data-sec="channels"] .ap2-orbit-item.is-open .ap2-orbit-desc > p { padding-block-end: 10px; } [data-sec="channels"] .ap2-orbit-stage { position: relative; inline-size: 100%; margin-inline: auto; } [data-sec="channels"] .ap2-orbit-stage.is-cropped { max-inline-size: 500px; } [data-sec="channels"] .ap2-orbit-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; } [data-sec="channels"] .ap2-ob-aura { position: absolute; left: 50%; top: 50%; inline-size: calc(100% * 560 / var(--vbw, 930)); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--lead, #DD6E3E), transparent 72%); opacity: 0.13; pointer-events: none; } [data-sec="channels"] .ap2-ob-ticks line { stroke: rgba(11,11,12,0.2); stroke-width: 1.5; stroke-linecap: round; } [data-sec="channels"] .ap2-ob-dashring { fill: none; stroke: rgba(11,11,12,0.15); stroke-width: 1.3; stroke-dasharray: 2 10; stroke-linecap: round; transform-box: view-box; transform-origin: var(--ob-ox, 465px) var(--ob-oy, 300px); animation: ap2ObSpin 140s linear infinite; } @keyframes ap2ObSpin { to { transform: rotate(360deg); } } [data-sec="channels"] .ap2-ob-band { stroke: rgba(255,255,255,0.9); stroke-width: 1.1; stroke-linejoin: round; opacity: 0.95; transition: opacity .3s ease; } [data-sec="channels"] .ap2-ob-band.is-lit { opacity: 1; } [data-sec="channels"] .ap2-ob-wedge { stroke: var(--edge, rgba(255,255,255,0.95)); stroke-width: 1.3; stroke-linejoin: round; transform-box: view-box; transform-origin: var(--ob-ox, 465px) var(--ob-oy, 300px); transition: opacity .26s ease, transform .3s cubic-bezier(0.16,1,0.3,1); cursor: default; } [data-sec="channels"] .ap2-ob-wedge.is-dim { opacity: 0.32; } [data-sec="channels"] .ap2-ob-wedge.is-lit { transform: scale(1.03); } [data-sec="channels"] .ap2-ob-gloss { pointer-events: none; } [data-sec="channels"] .ap2-ob-hub { fill: #FFFFFF; } [data-sec="channels"] .ap2-ob-hubring { fill: none; stroke: rgba(11,11,12,0.09); stroke-width: 1.3; } [data-sec="channels"] .ap2-orbit-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); inline-size: calc(100% * 168 / var(--vbw, 930)); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; pointer-events: none; } [data-sec="channels"] .ap2-orbit-hub svg { color: var(--lead, #DD6E3E); } [data-sec="channels"] .ap2-orbit-hub .ap2-mono { font-size: clamp(12.8px, calc(0.9vw + 0.9px), 14.4px); color: rgba(11,11,12,0.847); } [data-sec="channels"] .ap2-orbit-hub b { font-size: clamp(15.4px, calc(1.32vw + 0.9px), 20.8px); font-weight: 620; letter-spacing: -0.024em; line-height: 1.1; color: #0B0B0C; } [data-sec="channels"] .ap2-orbit-bandpct { position: absolute; transform: translate(-50%, -50%); font-size: clamp(13px, calc(1.06vw + 0.9px), 16.8px); font-weight: 680; color: #FFFFFF; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(11,15,20,0.3); pointer-events: none; white-space: nowrap; } [data-sec="channels"] .ap2-mix-cap { display: flex; align-items: flex-start; gap: 14px; margin: 18px 0 0; max-inline-size: none; padding: 16px 20px 17px 16px; border-radius: 18px; border: 1px solid rgba(11,11,12,0.055); background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,247,249,0.86)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 28px rgba(11,15,20,0.055); } [data-sec="channels"] .ap2-mix-cap > p { margin: 0; font-size: clamp(15.5px, calc(1.02vw + 0.9px), 17.3px); line-height: 1.54; font-weight: 500; color: rgba(11,11,12,0.91); } [data-sec="channels"] .ap2-mix-cap-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border-radius: 12px; background: var(--lead, #1E40AF); color: #FFFFFF; box-shadow: 0 6px 16px rgba(11,15,20,0.18); transition: background .5s ease; } [data-sec="channels"] .ap2-ob-lead { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; transition: opacity .28s ease, stroke-width .28s ease; } [data-sec="channels"] .ap2-ob-lead.is-lit { opacity: 1; stroke-width: 2.4; } [data-sec="channels"] .ap2-ob-leaddot { opacity: 0.9; } [data-sec="channels"] .ap2-ob-leads, [data-sec="channels"] .ap2-orbit-label { opacity: 0; transition: opacity .42s ease; } [data-sec="channels"] .ap2-orbit.is-labelled .ap2-ob-leads, [data-sec="channels"] .ap2-orbit.is-labelled .ap2-orbit-label { opacity: 1; } [data-sec="channels"] .ap2-orbit-label { position: absolute; transform: translateY(-50%); inline-size: calc(100% * 160 / var(--vbw, 930)); font-size: clamp(13.3px, calc(0.97vw + 0.9px), 15.1px); font-weight: 560; letter-spacing: -0.012em; line-height: 1.26; color: rgba(11,11,12,0.964); transition: color .28s ease, opacity .42s ease; } [data-sec="channels"] .ap2-orbit-label.is-r { text-align: left; } [data-sec="channels"] .ap2-orbit-label.is-l { text-align: right; } [data-sec="channels"] .ap2-orbit-label.is-lit { color: #0B0B0C; text-shadow: 0 0 10px rgba(255,255,255,0.9); } [data-sec="channels"] .ap2-ob-wheel { opacity: 0; transform: rotate(-16deg) scale(0.9); transform-box: view-box; transform-origin: var(--ob-ox, 465px) var(--ob-oy, 300px); transition: opacity .85s ease, transform 1.15s cubic-bezier(0.16,1,0.3,1); } [data-sec="channels"] .ap2-orbit.is-on .ap2-ob-wheel { opacity: 1; transform: none; } [data-sec="channels"] .ap2-ob-hub, [data-sec="channels"] .ap2-ob-hubring { opacity: 0; transform: scale(0.82); transform-box: view-box; transform-origin: var(--ob-ox, 465px) var(--ob-oy, 300px); transition: opacity .6s ease .34s, transform .8s cubic-bezier(0.16,1,0.3,1) .34s; } [data-sec="channels"] .ap2-orbit.is-on .ap2-ob-hub, [data-sec="channels"] .ap2-orbit.is-on .ap2-ob-hubring { opacity: 1; transform: none; } [data-sec="channels"] .ap2-orbit-hub, [data-sec="channels"] .ap2-orbit-bandpct { opacity: 0; transition: opacity .6s ease .62s; } [data-sec="channels"] .ap2-orbit.is-on .ap2-orbit-hub, [data-sec="channels"] .ap2-orbit.is-on .ap2-orbit-bandpct { opacity: 1; } @media (max-width: 979px) { [data-sec="channels"] .ap2-orbit-body { grid-template-columns: minmax(0, 1fr); gap: 22px; } [data-sec="channels"] .ap2-orbit-pick { order: -2; inline-size: 100%; max-inline-size: 460px; margin-inline: auto; } [data-sec="channels"] .ap2-orbit-seg { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-sec="channels"] .ap2-orbit-seg-block { display: none; } [data-sec="channels"] .ap2-orbit-chip.is-on { background: #101114; color: #FFFFFF; } [data-sec="channels"] .ap2-orbit-side { order: -1; } [data-sec="channels"] .ap2-orbit-stage.is-cropped { max-inline-size: 430px; } } @media (max-width: 620px) { [data-sec="channels"] .ap2-orbit-chipname { font-size: 14.5px; } [data-sec="channels"] .ap2-orbit-chip { padding: 8px 9px; gap: 8px; } [data-sec="channels"] .ap2-mix-cap { padding: 14px 16px 15px 14px; gap: 12px; } } @media (prefers-reduced-motion: reduce) { [data-sec="channels"] .ap2-ob-dashring { animation: none; } [data-sec="channels"] .ap2-ob-wheel, [data-sec="channels"] .ap2-ob-hub, [data-sec="channels"] .ap2-ob-hubring, [data-sec="channels"] .ap2-orbit-hub, [data-sec="channels"] .ap2-orbit-bandpct, [data-sec="channels"] .ap2-orbit-desc, [data-sec="channels"] .ap2-ob-leads, [data-sec="channels"] .ap2-orbit-seg-block { opacity: 1; transform: none; transition: none; } [data-sec="channels"] .ap2-orbit-hub, [data-sec="channels"] .ap2-orbit-bandpct { opacity: 1; } [data-sec="channels"] .ap2-orbit-label { opacity: 1; transform: translateY(-50%); transition: none; } } .ap2-svgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 26px); align-items: stretch; } .ap2-sv { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; background: #FFFFFF; border: 1px solid #DDD8CC; transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(0.16,1,0.3,1); } .ap2-sv:hover { transform: translateY(-2px); border-color: var(--tone); box-shadow: 0 18px 44px rgba(11,15,20,0.09); } .ap2-sv::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--tone); } .ap2-sv-stage { position: relative; padding: clamp(30px, 3vw, 46px) clamp(24px, 2.3vw, 38px) clamp(22px, 2.2vw, 32px); background: #FBFAF7; border-bottom: 1px solid #E7E3DA; } .ap2-sv-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--tone) 11%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--tone) 11%, transparent) 1px, transparent 1px); background-size: 26px 26px; background-position: 0 0; opacity: 0.9; } .ap2-sv-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(251,250,247,0) 0%, #FBFAF7 94%); } .ap2-sv-grid { z-index: 0; } .ap2-sv-fig { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; } .ap2-sv-fig text { font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .ap2-sv-th { font-size: 9.6px; font-weight: 700; letter-spacing: 0.13em; fill: rgba(11,11,12,0.62); } .ap2-sv-rv { font-size: 12.1px; font-weight: 700; fill: var(--tone); } .ap2-sv-src { fill: color-mix(in srgb, var(--tone) 24%, #FFFFFF); stroke: color-mix(in srgb, var(--tone) 58%, #FFFFFF); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 0; } .ap2-sv-flow { fill: var(--tone); transform-box: fill-box; transform-origin: 0 50%; } .ap2-sv-dim { fill: none; stroke: rgba(11,11,12,0.42); stroke-width: 1; } .ap2-sv-dv { font-size: 10.4px; font-weight: 700; letter-spacing: 0.01em; fill: var(--tone); } .ap2-sv-box { fill: #FFFFFF; stroke: color-mix(in srgb, var(--tone) 52%, #FFFFFF); stroke-width: 1.4; } .ap2-sv-nt { font-size: 11.4px; font-weight: 600; fill: rgba(11,11,12,0.82); } .ap2-sv-wire { fill: none; stroke: color-mix(in srgb, var(--tone) 46%, #FFFFFF); stroke-width: 1.6; } .ap2-sv-corebox { fill: var(--tone); } .ap2-sv-ct { font-size: 11.2px; font-weight: 700; letter-spacing: 0.11em; fill: #FFFFFF; } .ap2-sv-ct2 { font-size: 11.2px; font-weight: 700; letter-spacing: 0.11em; fill: rgba(255,255,255,0.86); } .ap2-sv-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(22px, 2.2vw, 34px) clamp(24px, 2.3vw, 38px) clamp(24px, 2.3vw, 36px); } .ap2-sv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .ap2-sv-n { font-size: 15.1px; font-weight: 700; letter-spacing: 0.06em; color: var(--tone); } .ap2-sv-tick { width: 14px; height: 1px; background: rgba(11,11,12,0.28); } .ap2-sv-label { font-size: 14.7px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(11,11,12,0.901); } .ap2-sv-title { font-size: clamp(23px, 1.95vw, 30px); font-weight: 700; letter-spacing: -0.032em; line-height: 1.14; color: #0B0B0C; margin: 0 0 12px; } .ap2-sv-lead { font-size: clamp(16.7px, 1.08vw, 17.9px); font-weight: 460; line-height: 1.6; color: rgba(11,11,12,0.928); margin: 0 0 clamp(18px, 1.9vw, 24px); max-width: 34em; } .ap2-sv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ap2-sv-chips li { padding: 7px 11px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--tone) 30%, #FFFFFF); background: color-mix(in srgb, var(--tone) 7%, #FFFFFF); font-size: 13.9px; font-weight: 600; letter-spacing: 0.02em; color: color-mix(in srgb, var(--tone) 68%, #0B0B0C); opacity: 0; transform: translateY(6px); } .ap2-sv.is-in .ap2-sv-chips li { animation: ap2SvChip .46s cubic-bezier(0.16,1,0.3,1) calc(var(--d) + .5s + var(--k) * .05s) both; } .ap2-sv-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; flex: 1 1 auto; grid-auto-rows: minmax(94px, 1fr); align-content: stretch; } .ap2-sv-menu li { min-width: 0; } .ap2-sv-menu a { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 15px 15px 14px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--tone) 26%, #FFFFFF); background: #FFFFFF; text-decoration: none; color: #0B0B0C; transition: border-color .26s ease, background .26s ease, transform .26s cubic-bezier(0.16,1,0.3,1), box-shadow .26s ease; } .ap2-sv-menu a:hover { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 6%, #FFFFFF); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(11,15,20,0.5); } .ap2-sv-menu a:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; } .ap2-sv-mhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ap2-sv-gl { flex-shrink: 0; fill: var(--tone); opacity: 0.8; transition: opacity .26s ease; } .ap2-sv-menu a:hover .ap2-sv-gl { opacity: 1; } .ap2-sv-mi { display: block; font-size: clamp(15.4px, 1.02vw, 16.8px); font-weight: 640; letter-spacing: -0.012em; line-height: 1.28; margin-bottom: 5px; } .ap2-sv-mn { display: block; font-size: clamp(14.2px, 0.92vw, 15.1px); font-weight: 450; line-height: 1.46; color: rgba(11,11,12,0.865); flex: 1 1 auto; } .ap2-sv-mfoot { display: flex; align-items: center; justify-content: flex-end; } .ap2-sv-badge { flex-shrink: 0; padding: 3px 8px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--tone) 34%, #FFFFFF); background: color-mix(in srgb, var(--tone) 10%, #FFFFFF); font-size: 12.4px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--tone) 76%, #0B0B0C); } .ap2-sv-arw { flex-shrink: 0; color: color-mix(in srgb, var(--tone) 55%, #FFFFFF); transition: transform .26s cubic-bezier(0.16,1,0.3,1), color .22s ease; } .ap2-sv-menu a:hover .ap2-sv-arw { transform: translateX(3px); color: var(--tone); } .ap2-sv-menu li { opacity: 0; transform: translateY(6px); } .ap2-sv.is-in .ap2-sv-menu li { animation: ap2SvChip .46s cubic-bezier(0.16,1,0.3,1) calc(var(--d) + .3s + var(--k) * .06s) both; } @media (max-width: 560px) { .ap2-sv-menu { grid-template-columns: minmax(0, 1fr); } } .ap2-sv-foot { margin-top: auto; padding-top: clamp(20px, 2.1vw, 30px); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .ap2-sv-proof { display: grid; gap: 9px; min-width: 0; } .ap2-sv-proof > span { display: grid; gap: 1px; } .ap2-sv-proof b { font-size: 18px; font-weight: 760; letter-spacing: -0.026em; line-height: 1.1; color: var(--tone); } .ap2-sv-proof em { font-style: normal; font-size: 14.4px; font-weight: 460; line-height: 1.35; color: rgba(11,11,12,0.901); } .ap2-sv-note { font-size: 14.85px; font-weight: 500; color: rgba(11,11,12,0.883); margin: clamp(22px, 2.4vw, 34px) 0 0; text-align: center; } .ap2-sv-fig .ap2-sv-th { opacity: 0; } .ap2-sv.is-in .ap2-sv-th { animation: ap2SvFade .5s ease calc(var(--d) + .1s + var(--i, 0) * .09s) both; } .ap2-sv-fig .ap2-sv-rv { opacity: 0; } .ap2-sv.is-in .ap2-sv-rv { animation: ap2SvFade .5s ease calc(var(--d) + .1s + var(--i, 0) * .09s) both; } .ap2-sv-fig .ap2-sv-dim, .ap2-sv-fig .ap2-sv-dv, .ap2-sv-fig .ap2-sv-src, .ap2-sv-fig .ap2-sv-flow { opacity: 0; } .ap2-sv.is-in .ap2-sv-dim, .ap2-sv.is-in .ap2-sv-dv { animation: ap2SvFade .44s ease calc(var(--d) + .1s + var(--i) * .09s) both; } .ap2-sv.is-in .ap2-sv-dim.is-drawn { animation: ap2SvDraw .62s cubic-bezier(0.16,1,0.3,1) calc(var(--d) + .1s + var(--i) * .09s) both; } .ap2-sv.is-in .ap2-sv-src { animation: ap2SvFill .5s cubic-bezier(0.16,1,0.3,1) calc(var(--d) + .06s) both; } .ap2-sv.is-in .ap2-sv-flow { animation: ap2SvFlow .68s cubic-bezier(0.22,0.7,0.3,1) calc(var(--d) + .2s + var(--i) * .09s) both; } .ap2-sv-fig .ap2-sv-node { opacity: 0; transform: translateY(6px); } .ap2-sv.is-in .ap2-sv-node { animation: ap2SvNode .48s cubic-bezier(0.16,1,0.3,1) calc(var(--d) + var(--i) * .08s) both; } .ap2-sv-fig .ap2-sv-wire { stroke-dasharray: 260; stroke-dashoffset: 260; } .ap2-sv.is-in .ap2-sv-wire { animation: ap2SvDraw .7s cubic-bezier(0.16,1,0.3,1) calc(var(--d) + .26s + var(--i) * .07s) both; } .ap2-sv-fig .ap2-sv-core { opacity: 0; transform: scale(0.9); transform-origin: 153px 86px; } .ap2-sv.is-in .ap2-sv-core { animation: ap2SvPop .5s cubic-bezier(0.34,1.3,0.5,1) calc(var(--d) + .44s) both; } @media (hover: hover) and (pointer: fine) { .ap2-sv:hover .ap2-sv-src { animation: ap2SvFill .42s cubic-bezier(0.16,1,0.3,1) .02s both; } .ap2-sv:hover .ap2-sv-dim, .ap2-sv:hover .ap2-sv-dv { animation: ap2SvFade .38s ease calc(.04s + var(--i) * .07s) both; } .ap2-sv:hover .ap2-sv-dim.is-drawn { animation: ap2SvDraw .5s cubic-bezier(0.16,1,0.3,1) calc(.04s + var(--i) * .07s) both; } .ap2-sv:hover .ap2-sv-flow { animation: ap2SvFlow .56s cubic-bezier(0.22,0.7,0.3,1) calc(.1s + var(--i) * .07s) both; } .ap2-sv:hover .ap2-sv-th, .ap2-sv:hover .ap2-sv-rv { animation: ap2SvFade .4s ease calc(.04s + var(--i, 0) * .07s) both; } .ap2-sv:hover .ap2-sv-node { animation: ap2SvNode .42s cubic-bezier(0.16,1,0.3,1) calc(var(--i) * .06s) both; } .ap2-sv:hover .ap2-sv-wire { animation: ap2SvDraw .6s cubic-bezier(0.16,1,0.3,1) calc(.18s + var(--i) * .06s) both; } .ap2-sv:hover .ap2-sv-core { animation: ap2SvPop .44s cubic-bezier(0.34,1.3,0.5,1) .34s both; } } @keyframes ap2SvFade { from { opacity: 0; } to { opacity: 1; } } @keyframes ap2SvFill { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } } @keyframes ap2SvFlow { from { opacity: 0.35; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } @keyframes ap2SvNode { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes ap2SvDraw { to { stroke-dashoffset: 0; } } @keyframes ap2SvPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes ap2SvChip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .ap2-svgrid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .ap2-sv-foot { align-items: flex-start; } .ap2-sv-chips li { font-size: 13.4px; padding: 6px 9px; } .ap2-sv-menu a { gap: 10px; padding: 11px 10px; } } @media (prefers-reduced-motion: reduce) { .ap2-sv, .ap2-sv:hover { transform: none; } .ap2-sv-th, .ap2-sv-rv, .ap2-sv-node, .ap2-sv-wire, .ap2-sv-core, .ap2-sv-chips li, .ap2-sv-src, .ap2-sv-flow, .ap2-sv-dim, .ap2-sv-dv, .ap2-sv:hover .ap2-sv-node, .ap2-sv:hover .ap2-sv-wire, .ap2-sv:hover .ap2-sv-core, .ap2-sv:hover .ap2-sv-src, .ap2-sv:hover .ap2-sv-flow, .ap2-sv:hover .ap2-sv-dim, .ap2-sv:hover .ap2-sv-dv, .ap2-sv:hover .ap2-sv-th, .ap2-sv:hover .ap2-sv-rv { animation: none !important; } .ap2-sv-fig .ap2-sv-th, .ap2-sv-fig .ap2-sv-rv, .ap2-sv-fig .ap2-sv-node, .ap2-sv-fig .ap2-sv-core, .ap2-sv-fig .ap2-sv-dim, .ap2-sv-fig .ap2-sv-dv, .ap2-sv-fig .ap2-sv-src, .ap2-sv-fig .ap2-sv-flow { opacity: 1; transform: none; } .ap2-sv-chips li { opacity: 1; transform: none; } .ap2-sv-fig .ap2-sv-wire { stroke-dashoffset: 0; } .ap2-sv-fig .ap2-sv-dim { stroke-dashoffset: 0 !important; } } .ap2-engine-ground { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(78% 62% at 4% 96%, rgba(0,8,20,0.58) 0%, rgba(0,8,20,0.34) 26%, rgba(0,8,20,0.13) 52%, rgba(0,8,20,0) 76%), radial-gradient(58% 52% at 40% 12%, rgba(186,214,255,0.13) 0%, rgba(186,214,255,0.070) 24%, rgba(186,214,255,0.028) 46%, rgba(186,214,255,0.008) 66%, rgba(186,214,255,0) 82%), radial-gradient(64% 46% at 68% 102%, rgba(201,162,39,0.115) 0%, rgba(201,162,39,0.052) 34%, rgba(201,162,39,0.018) 60%, rgba(201,162,39,0) 80%), linear-gradient(to bottom, rgba(214,232,255,0.045) 0%, rgba(214,232,255,0) 42%, rgba(0,8,20,0.12) 100%); } .ap2-eg-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 0; max-width: 646px; } .ap2-eg-strip > li { font-size: 13.8px; letter-spacing: 0.055em; text-transform: uppercase; color: rgba(255,255,255,0.919); white-space: nowrap; } .ap2-eg-strip > li + li::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 11px 0 11px; vertical-align: 0.32em; background: #C9A227; } .ap2-ovb-ph-ox { animation: ap2OvbDriftIn 41s ease-in-out infinite; } .ap2-ovb-ph-an { animation: ap2OvbDriftIn 53s ease-in-out infinite reverse; } @keyframes ap2OvbDriftIn { 0%, 100% { transform: scale(1.02); } 50% { transform: scale(1.09); } } .ap2-ovb-ph-run { stroke-dashoffset: var(--run-len, 750); animation: ap2OvbSeamRun 12.5s cubic-bezier(0.4, 0, 0.4, 1) infinite; } @keyframes ap2OvbSeamRun { 0% { stroke-dashoffset: var(--run-len, 750); opacity: 0; } 12% { opacity: 0.85; } 70% { opacity: 0.85; } 100% { stroke-dashoffset: 0; opacity: 0; } } .ap2-ovb-ph-draw { stroke-dashoffset: var(--draw-len, 1000); animation: ap2OvbPhDraw 15s cubic-bezier(0.3, 0, 0.24, 1) infinite; } @keyframes ap2OvbPhDraw { 0% { stroke-dashoffset: var(--draw-len, 1000); opacity: 0.35; } 10% { opacity: 0.9; } 38%, 88% { stroke-dashoffset: 0; opacity: 0.9; } 100% { stroke-dashoffset: 0; opacity: 0; } } .ap2-ovb-ph-sheen { animation: ap2OvbPhSheen 11s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes ap2OvbPhSheen { 0% { transform: translateX(0); opacity: 0; } 18% { opacity: 1; } 76% { opacity: 1; } 100% { transform: translateX(700px); opacity: 0; } } .ap2-eg-plates { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; width: max-content; max-width: 100%; margin: 0 0 12px; padding: 3px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.07); } .ap2-eg-plate-btn { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 650; line-height: 1; color: rgba(255,255,255,0.847); transition: background .22s ease, color .22s ease; } .ap2-eg-plate-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .ap2-eg-plate-btn[aria-pressed='true'] { background: rgba(255, 255, 255, 0.2); color: #C9A227; font-weight: 720; } .ap2-eg-plate-btn:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; } .ap2-engine-panel .ap2-ovb { position: relative; isolation: isolate; aspect-ratio: 540 / 440; width: 100%; color: #F5F2EA; } .ap2-ovb-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; overflow: visible; } @media (max-width: 620px) { .ap2-engine-panel .ap2-ovb { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ap2-ovb-ph-ox, .ap2-ovb-ph-an, .ap2-ovb-ph-run, .ap2-ovb-ph-draw, .ap2-ovb-ph-sheen { animation: none !important; } .ap2-ovb-ph-draw { stroke-dashoffset: 0; opacity: 0.9; } .ap2-ovb-ph-run, .ap2-ovb-ph-sheen { opacity: 0; } .ap2-ovb-ph-ox, .ap2-ovb-ph-an { transform: scale(1.05); } } [data-sec="reporting"] .ap2-quote { grid-template-columns: minmax(0, 780px) 258px; column-gap: clamp(134px, 9.6vw, 158px); padding-inline-end: 0; justify-content: start; } [data-sec="reporting"] .ap2-quote-who img { width: 234.9px; height: 234.9px; } [data-sec="reporting"] .ap2-quote-who figcaption { margin-top: 12px; } [data-sec="reporting"] .ap2-quote-who figcaption b { font-size: 17.4px; font-weight: 560; } [data-sec="reporting"] .ap2-quote-who figcaption span { font-size: 15.7px; color: rgba(11,11,12,0.901); } [data-sec="reporting"] .ap2-rp-arrow { position: absolute; pointer-events: none; overflow: visible; } [data-sec="reporting"] .ap2-rp-arrow path { fill: none; stroke: #E0362B; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); } [data-sec="reporting"] .ap2-rp-arrow.is-in path { animation: ap2Draw .95s cubic-bezier(0.16,1,0.3,1) both; } [data-sec="reporting"] .ap2-rp-arrow.is-in .ap2-rp-arrow-shaft { animation-delay: .95s; } [data-sec="reporting"] .ap2-rp-arrow.is-in .ap2-rp-arrow-barb { animation-duration: .26s; animation-timing-function: cubic-bezier(0.22,1,0.3,1); animation-delay: 1.86s; } [data-sec="reporting"] .ap2-rp-arrow.is-in .ap2-rp-arrow-barb + .ap2-rp-arrow-barb { animation-delay: 1.96s; } [data-sec="reporting"] .ap2-rp-arrow-side { inset-inline-end: 210px; top: 160px; } [data-sec="reporting"] .ap2-rp-arrow-up { display: none; } @media (max-width: 1060px) { [data-sec="reporting"] .ap2-quote { grid-template-columns: minmax(0, 1fr); column-gap: clamp(10px, 1vw, 18px); } [data-sec="reporting"] .ap2-quote-who img { width: 86.6px; height: 86.6px; } [data-sec="reporting"] .ap2-quote-who figcaption { margin-top: 0; } [data-sec="reporting"] .ap2-rp-arrow path { stroke-width: 3.2; } [data-sec="reporting"] .ap2-rp-arrow-side { display: none; } [data-sec="reporting"] .ap2-rp-arrow-up { display: block; left: 6px; top: -46px; } } @media (prefers-reduced-motion: reduce) { [data-sec="reporting"] .ap2-rp-arrow path { animation: none !important; stroke-dashoffset: 0 !important; } } .ap2-rp-chart { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; padding: 14px 14px 12px; } .ap2-rp-figh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(11,11,12,0.10); } .ap2-rp-figt { min-width: 0; font-size: 12.9px; font-weight: 500; letter-spacing: 0; color: #3C4043; } .ap2-rp-figw { flex-shrink: 0; font-size: 11.6px; font-weight: 500; letter-spacing: 0; color: #5F6368; border: 1px solid #DADCE0; border-radius: 999px; padding: 2px 9px; } .ap2-rp-figbody { min-width: 0; display: flex; align-items: center; justify-content: center; } .ap2-rp-cap { margin: 0; font-size: 13.7px; font-weight: 460; line-height: 1.5; color: rgba(11,11,12,0.892); } .ap2-rp-table .ap2-rp-cap { margin-top: 10px; } .ap2-rp-chart svg text { fill: #5F6368; } .ap2-rp-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .ap2-rp-key li { display: inline-flex; align-items: center; gap: 6px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(11,11,12,0.901); } .ap2-rp-key li span { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; } .ap2-rp-donut svg { width: 132px; height: 132px; flex: 0 0 auto; } .ap2-rp-donut-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; } .ap2-rp-donut-key li { display: flex; align-items: center; gap: 8px; min-width: 0; } .ap2-rp-donut-key li > span:first-child { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; } .ap2-rp-donut-key li > span:last-child { font-size: 15.55px; font-weight: 500; min-width: 0; } .ap2-rp-hold { margin-inline-start: 8px; padding: 2px 7px; border-radius: 999px; font-size: 12.7px; font-weight: 700; letter-spacing: 0.1em; color: #9A3B26; background: rgba(196,84,58,0.14); } .ap2-rp-moves { display: flex; flex-wrap: wrap; gap: 6px; } .ap2-rp-tile .ap2-rp-move { border-radius: 3px; } .ap2-rp-move { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.7px; font-weight: 700; padding: 4px 9px; border-radius: 999px; } .ap2-rp-move::before { content: ""; width: 0; height: 0; border-left: 3.2px solid transparent; border-right: 3.2px solid transparent; } .ap2-rp-move.is-up::before { border-bottom: 4.4px solid currentColor; } .ap2-rp-move.is-down::before { border-top: 4.4px solid currentColor; } .ap2-rp-move.is-flat::before { display: none; } .ap2-rp-move.is-up { color: #188038; background: #E6F4EA; } .ap2-rp-move.is-down { color: #D93025; background: #FCE8E6; } .ap2-rp-move.is-flat { color: #5F6368; background: #F1F3F4; } .ap2-rp-tile .ap2-rp-d, .ap2-rp-tile .ap2-rp-d.is-good, .ap2-rp-tile .ap2-rp-d.is-bad, .ap2-rp-tile .ap2-rp-d.is-flat { background: transparent; border-radius: 0; padding: 0; gap: 3px; } .ap2-rp-d { display: inline-flex; align-items: center; gap: 4px; font-size: 13.1px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; padding: 2px 7px; border-radius: 4px; white-space: nowrap; } .ap2-rp-d.is-good { color: #188038; background: #E6F4EA; } .ap2-rp-d.is-bad { color: #D93025; background: #FCE8E6; } .ap2-rp-d.is-flat { color: #5F6368; background: #F1F3F4; } .ap2-rp-statv { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .ap2-rp-stamp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.9px; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: rgba(11,11,12,0.892); background: #fff; border: 1px solid rgba(11,11,12,0.14); border-radius: 999px; padding: 4px 10px; } .ap2-rp-stamp i { width: 6px; height: 6px; border-radius: 50%; background: #3E9E6C; animation: ap2Pulse 2.4s infinite; } .ap2-rp-tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.82fr) minmax(0, 0.78fr) minmax(0, 0.64fr); gap: 8px; } .ap2-rp-spark { display: none; } .ap2-rp-tr > span:first-child, .ap2-rp-tr--head > span:first-child { position: relative; padding-inline-start: 22px; } .ap2-rp-rn { position: absolute; inset-inline-start: 0; inline-size: 14px; text-align: end; font-style: normal; font-size: 0.82em; font-variant-numeric: tabular-nums; color: #80868B; } .ap2-rp-metric { position: relative; padding-block-end: 7px; } .ap2-rp-cellbar { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; border-radius: 2px; background: #E8EAED; overflow: hidden; } .ap2-rp-cellbar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w, 0%); border-radius: 2px; background: var(--tone, #1A73E8); } .ap2-rp-tfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-start: 10px; } .ap2-rp-tfoot .ap2-rp-cap { margin: 0; min-inline-size: 0; } .ap2-rp-pager { flex: 0 0 auto; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.2px; font-weight: 400; font-variant-numeric: tabular-nums; color: #5F6368; } .ap2-rp-pagen { direction: ltr; unicode-bidi: isolate; } .ap2-rp-pagea { inline-size: 0; block-size: 0; border-block: 4px solid transparent; border-inline-start: 5px solid #5F6368; border-inline-end: 0; } .ap2-rp-pagea.is-off { border-inline-start: 0; border-inline-end: 5px solid #DADCE0; } .ap2-rp-tr > span:not(:first-child), .ap2-rp-tr > .ap2-rp-d { justify-self: end; text-align: end; font-variant-numeric: tabular-nums; } .ap2-rp-tr > span.ap2-rp-metric { justify-self: stretch; } .ap2-rp-tr--head > span { color: #5F6368 !important; font-size: 13.55px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; } .ap2-rp-sort { display: inline-block; width: 0; height: 0; margin-inline-start: 5px; vertical-align: middle; border-left: 3.4px solid transparent; border-right: 3.4px solid transparent; border-top: 4.2px solid #5F6368; } .ap2-rp-seg > i { color: rgba(11,11,12,0.883); } .ap2-rp-pill.is-ghost { border-color: rgba(11,11,12,0.16); color: rgba(11,11,12,0.901); } [data-sec='reporting'] .ap2-pin.is-on { block-size: max(calc(96 * var(--ap2-vh, 1vh)), 540px); min-block-size: 0; } [data-sec='reporting'] .ap2-pin.is-on { padding-block: clamp(8px, 1.4vh, 18px); } [data-sec='reporting'] .ap2-pin.is-on > .ap2-rp { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; margin-top: 0; } [data-sec='reporting'] .ap2-pin.is-on > .ap2-rp > .ap2-rp-rail { flex: 1 1 auto; min-block-size: 0; } [data-sec='reporting'] .ap2-pin.is-on > .ap2-rp-note { flex: 0 0 auto; margin: clamp(12px, 1.4vh, 20px) 0 0; padding: clamp(14px, 1.5vh, 22px) clamp(22px, 2.6vw, 40px); } [data-sec='reporting'] .ap2-pin.is-on > .ap2-rp > .ap2-rp-chrome, [data-sec='reporting'] .ap2-pin.is-on > .ap2-rp > .ap2-rp-top, [data-sec='reporting'] .ap2-pin.is-on > .ap2-rp > .ap2-rp-foot { flex: 0 0 auto; } .ap2-rp-rail { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 14px; background: #F1F3F4; } .ap2-rp-rail::-webkit-scrollbar { display: none; } .ap2-rp-rail.is-pinned { overflow-x: hidden; scroll-snap-type: none; } .ap2-rp-tiles { list-style: none; margin: 0; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: max-content; align-items: stretch; gap: 14px; padding: 14px; width: max-content; block-size: 100%; will-change: transform; } .ap2-rp-tiles:focus-visible { outline: 2px solid #1A73E8; outline-offset: -4px; } .ap2-rp-tile { block-size: min(100%, 880px, calc(92 * var(--ap2-vw, 1vw) / 1.6)); inline-size: auto; aspect-ratio: 16 / 10; align-self: center; justify-self: center; } @media (max-width: 939.98px) { .ap2-rp-tile { block-size: auto; inline-size: min(calc(88 * var(--ap2-vw, 1vw)), 620px); } } .ap2-rp-rule { position: relative; display: block; flex: 1; max-inline-size: 190px; block-size: 3px; border-radius: 2px; background: rgba(11,11,12,0.10); overflow: hidden; } .ap2-rp-rule i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--rail-p, 0%); border-radius: 2px; background: #1A73E8; } .ap2-rp-rail:not(.is-pinned) ~ .ap2-rp-foot .ap2-rp-rule { display: none; } .ap2-rp-top-t, .ap2-rp-top .ap2-rp-live, .ap2-rp-seg > b, .ap2-rp-seg > i, .ap2-rp-pill, .ap2-rp-stamp { font-family: 'Inter', 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Arial, sans-serif; } .ap2-rp-seg > b, .ap2-rp-seg > i { letter-spacing: 0.01em; font-weight: 500; } .ap2-rp-seg { background: #F1F3F4; border-radius: 999px; padding: 3px; } .ap2-rp-seg > b, .ap2-rp-seg > i { font-size: 12.7px; padding: 4px 12px; border-radius: 999px; } .ap2-rp-seg > b { background: #E8F0FE; color: #1A73E8; } .ap2-rp-seg > i { color: #5F6368; } .ap2-rp-pill { font-size: 12.7px; font-weight: 500; letter-spacing: 0; border-radius: 999px; padding: 5px 12px; border: 1px solid #D2E3FC; background: #E8F0FE; color: #1A73E8; } .ap2-rp-pill.is-ghost { border-color: #DADCE0; background: #FFFFFF; color: #5F6368; } .ap2-rp-stamp { font-size: 12.4px; font-weight: 400; letter-spacing: 0; color: #5F6368; background: transparent; border: 0; padding: 4px 2px; } .ap2-rp-stamp i { background: #188038; } .ap2-rp-tools > .ap2-rp-pill.is-ghost:last-child { border-color: transparent; background: transparent; color: #1A73E8; padding-inline: 8px; } .ap2-rp-top .ap2-rp-live { font-size: 11.4px; font-weight: 500; letter-spacing: 0.06em; color: #5F6368; border-color: #DADCE0; } .ap2-rp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: #FFFFFF; border-bottom: 1px solid #DADCE0; } .ap2-rp-top-t { margin: 0; min-width: 0; font-size: 16px; font-weight: 500; letter-spacing: 0; color: #202124; } .ap2-rp-top .ap2-rp-live { font-size: 12.4px; padding: 3px 9px; gap: 6px; } .ap2-rp-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; } @media (max-width: 1260px) { .ap2-rp-opt { display: none; } } .ap2-rp-foot { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: #FFFFFF; border-top: 1px solid #E3DFD5; } .ap2-rp-count { font-size: 12.6px; font-weight: 700; letter-spacing: 0.1em; color: rgba(11,11,12,0.892); font-variant-numeric: tabular-nums; } .ap2-rp-count, .ap2-rp-mini-count { direction: ltr; unicode-bidi: isolate; } .ap2-rp-foot-end { margin-inline-start: auto; display: inline-flex; gap: 8px; } .ap2-rp-step { appearance: none; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; inline-size: 30px; block-size: 30px; border: 1px solid rgba(11,11,12,0.16); border-radius: 8px; background: #FFFFFF; color: rgba(11,11,12,0.901); cursor: pointer; transition: background .22s ease, border-color .22s ease, opacity .22s ease; } .ap2-rp-step:hover:not(:disabled) { background: rgba(11,11,12,0.04); border-color: rgba(11,11,12,0.3); } .ap2-rp-step:disabled { opacity: 0.3; cursor: default; } .ap2-rp-step:focus-visible { outline: 2px solid #1A73E8; outline-offset: 2px; } [dir='rtl'] .ap2-rp-step svg { transform: scaleX(-1); } .ap2-rp-tile { scroll-snap-align: start; flex: 0 0 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid #DADCE0; border-radius: 8px; background: #FFFFFF; contain: layout paint; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15); overflow: hidden; --rp-tag: 11.6px; --rp-h: 16.4px; --rp-hw: 500; --rp-hls: 0; --rp-q: 12.8px; --rp-qw: 400; --rp-statn: 24px; --rp-statw: 400; --rp-statc: #202124; --rp-statl: 12px; } .ap2-rp-tile::before { content: ""; display: block; block-size: 3px; flex-shrink: 0; background: var(--tone, #1A73E8); } .ap2-rp-tile .ap2-rp-chrome { flex: 0 0 auto; gap: 8px; padding: 7px 12px; background: #F1F3F4; border-bottom: 1px solid #DADCE0; } .ap2-rp-tile .ap2-rp-dots { gap: 4px; } .ap2-rp-tile .ap2-rp-dots i { width: 7px; height: 7px; background: #DADCE0; } .ap2-rp-tile .ap2-rp-dots i:first-child { background: var(--tone, #1A73E8); opacity: 0.55; } .ap2-rp-tile .ap2-rp-path { font-size: 12.4px; font-weight: 500; letter-spacing: 0.015em; color: rgba(11,11,12,0.775); } .ap2-rp-tile .ap2-rp-panel-in { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; padding: 0 0 13px; } .ap2-rp-tile .ap2-rp-panel-head { padding: 10px 13px 11px; background: #FFFFFF; border-bottom: 1px solid rgba(11,11,12,0.09); } .ap2-rp-tile .ap2-rp-stats, .ap2-rp-tile .ap2-rp-body { margin-inline: 13px; } .ap2-rp-tile .ap2-rp-panel-head { grid-row: 1; } .ap2-rp-tile .ap2-rp-stats { grid-row: 2; align-content: start; } .ap2-rp-tile .ap2-rp-body { grid-row: 3; } .ap2-rp-tile .ap2-rp-blurb { display: none; } .ap2-rp-tile .ap2-rp-body { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 18px; align-items: stretch; } .ap2-rp-tile .ap2-rp-table { border-inline-start: 1px solid rgba(11,11,12,0.09); padding-inline-start: 18px; min-inline-size: 0; display: flex; flex-direction: column; } .ap2-rp-tile .ap2-rp-table .ap2-rp-tr { flex: 1 1 auto; max-block-size: 96px; } .ap2-rp-tile .ap2-rp-table .ap2-rp-tr--head { flex: 0 0 auto; } .ap2-rp-tile .ap2-rp-table .ap2-rp-tfoot { margin-block-start: auto; padding-block-start: 10px; } .ap2-rp-tile .ap2-rp-cap { font-size: 12.9px; line-height: 1.44; } .ap2-rp-tile .ap2-rp-tr { padding: 5px 7px; gap: 6px; border-radius: 0; } @media (min-width: 940px) { .ap2-rp-tile .ap2-rp-tr, .ap2-rp-tile .ap2-rp-tr--head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.82fr) minmax(0, 0.78fr) minmax(0, 0.64fr) 58px; } .ap2-rp-tile .ap2-rp-spark { display: inline-flex; align-items: center; justify-content: flex-end; min-inline-size: 0; } .ap2-rp-tile .ap2-rp-band { display: grid; } } .ap2-rp-tile .ap2-rp-tr > span, .ap2-rp-tile .ap2-rp-tr > .ap2-rp-d { font-size: 12.9px !important; } .ap2-rp-tile .ap2-rp-tr--head { background: #F8F9FA !important; border-bottom: 1px solid #DADCE0; border-radius: 0; margin-bottom: 0; } .ap2-rp-tile .ap2-rp-tr--head > span { color: #5F6368 !important; font-size: 12.4px !important; font-weight: 500; letter-spacing: 0.01em; text-transform: none; } .ap2-rp-tile .ap2-rp-sort { border-top-color: #5F6368; } .ap2-rp-tile .ap2-rp-tr:last-of-type { border-bottom: none; } .ap2-rp-tile .ap2-rp-panel-head { gap: 10px; display: block; } .ap2-rp-tag-row { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .ap2-rp-tag-row .ap2-rp-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap2-rp-swatch { inline-size: 9px; block-size: 9px; flex-shrink: 0; border-radius: 2px; background: var(--tone, #1A73E8); } .ap2-rp-kebab { margin-inline-start: auto; display: inline-flex; flex-direction: column; gap: 2px; flex-shrink: 0; padding-inline-start: 8px; } .ap2-rp-kebab i { inline-size: 2.5px; block-size: 2.5px; border-radius: 50%; background: rgba(11,11,12,0.42); } .ap2-rp-tile .ap2-rp-panel-head .ap2-mono:not(.ap2-rp-tag) { margin-bottom: 4px !important; } .ap2-rp-tag-row .ap2-rp-tag { margin-bottom: 0 !important; } .ap2-rp-tile .ap2-rp-panel-head h3 { margin-bottom: 5px !important; } .ap2-rp-tile .ap2-rp-q { line-height: 1.4; } .ap2-rp-tile .ap2-rp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-block: 0; } .ap2-rp-tile .ap2-rp-stat { padding: 9px 10px 8px; border-radius: 8px; border-color: #DADCE0; background: #FFFFFF; } .ap2-rp-tile .ap2-rp-stat::before { display: none; } .ap2-rp-tile .ap2-rp-statv { gap: 5px; font-variant-numeric: tabular-nums; } .ap2-rp-tile .ap2-rp-d { font-size: 12.4px; padding: 0; gap: 3px; } .ap2-rp-tile .ap2-rp-body { min-height: 0; } .ap2-rp-tile .ap2-rp-chart { flex: 1; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } .ap2-rp-tile .ap2-rp-figh { padding-bottom: 7px; } .ap2-rp-tile .ap2-rp-figbody { flex: 1; min-block-size: 0; } .ap2-rp-tile .ap2-rp-band { grid-column: 1 / -1; padding-block-start: 13px; border-block-start: 1px solid rgba(11,11,12,0.09); grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 13px; } .ap2-rp-tile .ap2-rp-band > * + * { border-inline-start: 1px solid rgba(11,11,12,0.09); padding-inline-start: 13px; } .ap2-rp-bandline { display: block; min-inline-size: 0; } .ap2-rp-band { display: none; } .ap2-rp-tile .ap2-rp-figbody > * { max-inline-size: 100%; max-block-size: 100%; } .ap2-rp-tile .ap2-rp-figbody svg { max-block-size: 100%; } .ap2-rp-tile .ap2-rp-figt { font-size: 12.9px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(11,11,12,0.847); } .ap2-rp-tile .ap2-rp-figw { font-size: 12.4px; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 3px; } .ap2-rp-tile .ap2-rp-cap { font-size: 13px; line-height: 1.46; } .ap2-rp-tile .ap2-rp-key li { font-size: 12.9px; } .ap2-rp-tile .ap2-rp-key { gap: 4px 11px; } .ap2-rp-tile .ap2-rp-donut svg { width: 116px; height: 116px; } .ap2-rp-tile .ap2-rp-donut-key { gap: 4px; } .ap2-rp-tile .ap2-rp-donut-key li > span:last-child { font-size: 11.9px; } .ap2-rp-tile .ap2-rp-donut-key li > span:first-child { width: 7px; height: 7px; } .ap2-rp-tile .ap2-rp-move { font-size: 12.4px; padding: 3px 8px; } .ap2-rp-tile .ap2-rp-moves { gap: 5px; } .ap2-rp-tile.is-ask { border-style: dashed; border-color: #D2E3FC; background: #E8F0FE; align-items: center; justify-content: center; text-align: center; gap: 22px; padding: 28px clamp(24px, 4vw, 72px); } .ap2-rp-tile.is-ask::before { display: none; } .ap2-rp-ask-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 68px; block-size: 68px; flex-shrink: 0; border: 1px solid #D2E3FC; border-radius: 8px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 38px; font-weight: 400; line-height: 1; color: #1A73E8; background: #FFFFFF; } .ap2-rp-tile.is-ask p { margin: 0; max-width: 26ch; font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: -0.008em; color: rgba(11,11,12,0.955); } .ap2-rp-hbar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); } .is-in .ap2-rp-hbar { transition: transform .9s cubic-bezier(0.16,1,0.3,1); transform: scaleX(1); } .ap2-rp-cell { opacity: 0; } .is-in .ap2-rp-cell { transition: opacity .5s ease; opacity: 1; } .ap2-rp-fband { transform-box: fill-box; transform-origin: center; transform: scaleX(0.22); opacity: 0; } .is-in .ap2-rp-fband { transition: transform .8s cubic-bezier(0.16,1,0.3,1), opacity .5s ease; transform: scaleX(1); opacity: 1; } @media (prefers-reduced-motion: reduce) { .ap2-rp-hbar, .ap2-rp-cell, .ap2-rp-fband { transition: none !important; transform: none; opacity: 1; } .ap2-rpn-p, .ap2-rpn-slot, .ap2-rpn-plus { animation: none !important; } .ap2-rpn-p { opacity: var(--o, 0.6); } .ap2-rpn-plus { transform: none; } } @media (max-width: 560px) { .ap2-rp-tr { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 0.8fr); } .ap2-rp-tr > .ap2-rp-d, .ap2-rp-tr--head > span:nth-child(4) { display: none; } .ap2-rp-figh { flex-wrap: wrap; } } .ap2-rp-mini-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 360px); gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline-offset: 4px; } .ap2-rp-mini-list::-webkit-scrollbar { display: none; } .ap2-rp-mini { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; } .ap2-rp-mini .ap2-rp-mini-win { flex: 1; display: flex; flex-direction: column; contain-intrinsic-size: auto 470px; } .ap2-rp-mini .ap2-rp-mini-scale { flex: 1; } .ap2-rp-mini-wrap { position: relative; } .ap2-rp-mini-head { display: flex; align-items: center; gap: 12px; margin-block-end: 12px; } .ap2-rp-mini-count { font-size: 12.2px; font-weight: 700; letter-spacing: 0.08em; color: rgba(11,15,20,0.811); font-variant-numeric: tabular-nums; flex-shrink: 0; } .ap2-rp-mini-pips { display: flex; align-items: center; gap: 5px; margin-inline-start: auto; min-width: 0; } .ap2-rp-mini-pip { appearance: none; border: 0; background: none; padding: 7px 3px; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; } .ap2-rp-mini-pip::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 999px; background: rgba(11, 15, 20, 0.22); transition: inline-size .3s cubic-bezier(0.16, 1, 0.3, 1), background .3s ease; } .ap2-rp-mini-pip.is-on::before { inline-size: 18px; background: var(--tone, #1A73E8); } .ap2-rp-mini-next { appearance: none; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; inline-size: 30px; block-size: 30px; border-radius: 999px; border: 1px solid rgba(11, 15, 20, 0.16); background: #fff; color: rgba(11,15,20,0.874); cursor: pointer; transition: opacity .25s ease, border-color .25s ease; } .ap2-rp-mini-next:disabled { opacity: 0.3; cursor: default; } [dir='rtl'] .ap2-rp-mini-next svg { transform: scaleX(-1); } .ap2-rp-mini-wrap { --rp-fade: 90deg; } [dir='rtl'] .ap2-rp-mini-wrap { --rp-fade: 270deg; } .ap2-rp-mini-wrap:not([data-at='end']) .ap2-rp-mini-list { -webkit-mask-image: linear-gradient(var(--rp-fade), #000 0, #000 calc(100% - 46px), transparent 100%); mask-image: linear-gradient(var(--rp-fade), #000 0, #000 calc(100% - 46px), transparent 100%); } .ap2-rp-mini-t { display: flex; align-items: baseline; gap: 9px; margin: 0 0 9px; font-size: 15.6px; font-weight: 640; letter-spacing: -0.008em; color: #14161D; } .ap2-rp-mini-n { font-size: 12.4px; font-weight: 700; letter-spacing: 0.06em; flex-shrink: 0; } .ap2-rp-mini-win { position: relative; overflow: hidden; border: 1px solid #E3E4EA; border-radius: 10px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(11,15,20,0.05), 0 12px 28px -18px rgba(11,15,20,0.28); content-visibility: auto; contain-intrinsic-size: auto 860px; } .ap2-rp-mini-win::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--tone, #1A73E8); z-index: 2; } .ap2-rp-mini-scale { padding: 4px 0 2px; --rp-tag: 10.4px; --rp-h: 17.2px; --rp-q: 12.9px; --rp-statn: 17.6px; --rp-statl: 10.2px; } .ap2-rp-mini-scale .ap2-rp-panel { padding: 13px 12px 15px; } .ap2-rp-mini-scale .ap2-rp-blurb { display: none; } .ap2-rp-mini-scale .ap2-rp-chart .ap2-rp-cap { display: none; } .ap2-rp-mini-scale .ap2-rp-table { display: flex; flex-direction: column; margin-block-start: 10px; } .ap2-rp-mini-scale .ap2-rp-tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.72fr) minmax(0, 0.56fr); gap: 7px; padding-block: 6px; } .ap2-rp-mini-scale .ap2-rp-tr > span:nth-child(2), .ap2-rp-mini-scale .ap2-rp-tr--head > span:nth-child(2) { display: none; } .ap2-rp-mini-scale .ap2-rp-tr > .ap2-rp-d { display: inline-flex; } .ap2-rp-mini-scale .ap2-rp-tr--head > span:nth-child(4) { display: block; } .ap2-rp-mini-scale .ap2-rp-tr > span:first-child { font-size: 12.9px; } .ap2-rp-mini-scale .ap2-rp-rn { inline-size: 11px; } .ap2-rp-mini-scale .ap2-rp-pager { font-size: 10.4px; gap: 6px; } .ap2-rp-mini-scale .ap2-rp-tr > span:nth-child(3) { font-size: 12.6px; } .ap2-rp-mini-scale .ap2-rp-tr--head > span { font-size: 11.1px; letter-spacing: 0.01em; text-transform: none; } .ap2-rp-mini-scale .ap2-rp-table .ap2-rp-cap { font-size: 10.6px; line-height: 1.4; margin-top: 7px; } .ap2-rp-mini-scale .ap2-rp-q { margin-block-start: 3px; line-height: 1.36; } .ap2-rp-mini-scale .ap2-rp-stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; margin-block: 12px 12px; } .ap2-rp-mini-scale .ap2-rp-stat { padding: 8px 8px 7px 10px; border-radius: 8px; background: #FFFFFF; border-color: #DADCE0; } .ap2-rp-mini-scale .ap2-rp-chart { background: #FFFFFF; border-color: #DADCE0; border-radius: 8px; } .ap2-rp-mini-scale .ap2-rp-tr--head { background: #F8F9FA !important; border-bottom: 1px solid #DADCE0; border-radius: 0; margin-bottom: 0; } .ap2-rp-mini-scale .ap2-rp-tr--head > span { color: #5F6368 !important; } .ap2-rp-mini-scale .ap2-rp-sort { border-top-color: #5F6368; } .ap2-rp-mini-scale .ap2-rp-tr:nth-child(even), .ap2-rp-tile .ap2-rp-tr:nth-child(even) { background: transparent; } .ap2-rp-mini-scale .ap2-rp-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } .ap2-rp-mini-scale .ap2-rp-stat::before { display: none; } .ap2-rp-mini-scale .ap2-rp-statv { gap: 4px; } .ap2-rp-mini-scale .ap2-rp-statl { line-height: 1.28; } .ap2-rp-mini-scale .ap2-rp-d { font-size: 10.7px; padding: 1px 5px; gap: 3px; } .ap2-rp-mini-scale .ap2-rp-chart { padding: 10px; border-radius: 10px; } .ap2-rp-mini-scale .ap2-rp-figh { gap: 7px; flex-wrap: nowrap; padding-bottom: 7px; } .ap2-rp-mini-scale .ap2-rp-donut-key { gap: 5px; } .ap2-rp-mini-scale .ap2-rp-donut-key li > span:last-child { font-size: 11.5px; } .ap2-rp-mini-scale .ap2-rp-donut svg { width: 104px; height: 104px; } .ap2-rp-mini-scale .ap2-rp-key li { font-size: 11.3px; } .ap2-rp-mini-scale .ap2-rp-move { font-size: 10.8px; padding: 3px 7px; } .ap2-rp-mini-scale .ap2-rp-moves { gap: 5px; } .ap2-rp-mini-scale .ap2-rp-figt { font-size: 11.6px; letter-spacing: 0; line-height: 1.3; } .ap2-rp-mini-scale .ap2-rp-figw { font-size: 10.3px; letter-spacing: 0.055em; padding: 2px 6px; } .ap2-rp-mini-scale .ap2-rp-panel-head > div { flex: 1 1 auto; } .ap2-rp-mini-bar { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-bottom: 1px solid #ECEDF2; background: #FBFBFD; } .ap2-rp-mini-dots { display: inline-flex; gap: 4px; flex-shrink: 0; } .ap2-rp-mini-dots i { width: 7px; height: 7px; border-radius: 50%; background: #D8DAE2; } .ap2-rp-mini-dots i:first-child { background: var(--tone, #1A73E8); opacity: 0.55; } .ap2-rp-mini-path { font-size: 11.1px; letter-spacing: 0.02em; color: rgba(11,15,20,0.775); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 620px) { .ap2-rp { display: none; } } .ap2-rp-note { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.2vw, 36px); margin: 30px 0 0; padding: clamp(22px, 2.2vw, 34px) clamp(22px, 2.6vw, 40px); border-radius: 18px; background: radial-gradient(120% 160% at 6% 0%, rgba(221,110,62,0.24) 0%, rgba(221,110,62,0) 58%), linear-gradient(180deg, #17181C 0%, #0E0F12 100%); box-shadow: 0 24px 60px -30px rgba(11,11,12,0.7), inset 0 1px 0 rgba(255,255,255,0.07); } .ap2-rp-note-mark { flex: none; display: inline-flex; color: #E0865A; } @keyframes ap2RpnWave { 0%, 100% { opacity: var(--o, 0.6); } 50% { opacity: calc(var(--o, 0.6) + 0.24); } } @keyframes ap2RpnAnts { to { stroke-dashoffset: -6.8; } } @keyframes ap2RpnPlus { 0%, 62%, 100% { transform: scale(1); opacity: 0.9; } 76% { transform: scale(1.16); opacity: 1; } } @keyframes ap2RpnSlot { 0%, 100% { opacity: 0.62; } 76% { opacity: 1; } } .ap2-rpn-p { opacity: var(--o, 0.6); animation: ap2RpnWave 3.4s ease-in-out infinite; } .ap2-rpn-slot { opacity: 0.62; stroke-dashoffset: 0; animation: ap2RpnAnts 3.4s linear infinite, ap2RpnSlot 3.4s ease-in-out infinite; } .ap2-rpn-plus { opacity: 0.9; transform-box: fill-box; transform-origin: center; animation: ap2RpnPlus 3.4s cubic-bezier(0.16,1,0.3,1) infinite; } .ap2-rp-note > p { margin: 0; max-width: 62ch; font-size: clamp(17.6px, 1.38vw, 22.4px); font-weight: 460; line-height: 1.52; letter-spacing: -0.006em; color: rgba(255,255,255,0.955); } @media (max-width: 760px) { .ap2-rp-note { align-items: flex-start; gap: 14px; margin-block-start: 22px; padding: 18px 18px 20px; border-radius: 14px; } .ap2-rp-note-mark svg { width: 34px; height: 34px; } .ap2-rp-note > p { font-size: 16.2px; } } @media (min-width: 940px) { .ap2-rp-tile .ap2-rp-chrome { padding: 5px 11px; } .ap2-rp-tile .ap2-rp-path { font-size: 11.4px; } .ap2-rp-tile .ap2-rp-panel-head { padding: 7px 11px 8px; } .ap2-rp-tile .ap2-rp-panel-head h3 { font-size: 15.4px !important; margin-bottom: 2px !important; } .ap2-rp-tile .ap2-rp-tag { font-size: 11.1px !important; } .ap2-rp-tile .ap2-rp-q { display: none; } .ap2-rp-tile .ap2-rp-kebab { display: none; } .ap2-rp-tile .ap2-rp-stats { gap: 6px; } .ap2-rp-tile .ap2-rp-stat { padding: 4px 8px; } .ap2-rp-tile .ap2-rp-statv span { font-size: 16.2px !important; } .ap2-rp-tile .ap2-rp-statl { font-size: 10.5px !important; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ap2-rp-tile .ap2-rp-stat .ap2-rp-d { font-size: 10.5px; } .ap2-rp-tile .ap2-rp-body { gap: 10px; } .ap2-rp-tile .ap2-rp-cap { display: none; } .ap2-rp-tile .ap2-rp-figh { font-size: 10.5px; padding-bottom: 4px; } .ap2-rp-tile .ap2-rp-figbody { min-block-size: 48px; } .ap2-rp-tile .ap2-rp-tr, .ap2-rp-tile .ap2-rp-tr--head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.82fr) minmax(0, 0.78fr) minmax(0, 0.6fr); gap: 4px; padding: 3px 5px; } .ap2-rp-tile .ap2-rp-spark { display: none; } .ap2-rp-tile .ap2-rp-table .ap2-rp-tr > span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.24; } .ap2-rp-tile .ap2-rp-figbody { overflow: hidden; } .ap2-rp-tile .ap2-rp-table .ap2-rp-tr--head { max-block-size: none; align-items: end; } .ap2-rp-tile .ap2-rp-tr--head > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.16; } .ap2-rp-tile .ap2-rp-move { font-size: 11.1px; padding: 2px 6px; } .ap2-rp-tile .ap2-rp-moves { gap: 4px; } .ap2-rp-tile .ap2-rp-tr > span, .ap2-rp-tile .ap2-rp-tr > .ap2-rp-d { font-size: 11.3px !important; } .ap2-rp-tile .ap2-rp-tr--head > span { font-size: 10.3px !important; letter-spacing: 0.03em; } .ap2-rp-tile .ap2-rp-table { padding-inline-start: 12px; } .ap2-rp-tile .ap2-rp-table .ap2-rp-tr { max-block-size: 42px; } .ap2-rp-tile .ap2-rp-band { padding-block-start: 8px; display: grid; column-gap: 10px; } .ap2-rp-tile .ap2-rp-band > * + * { padding-inline-start: 10px; } .ap2-rp-tile.is-ask p { font-size: 18.4px; line-height: 1.5; max-width: 30ch; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; } .ap2-rp-tile.is-ask { gap: 16px; } .ap2-rp-tile.is-ask .ap2-rp-ask-mark { font-size: 30px; inline-size: 54px; block-size: 54px; border-radius: 16px; } } @media (min-width: 940px) and (max-height: 880px) { .ap2-rp-tile .ap2-rp-chrome { padding: 4px 10px; } .ap2-rp-tile .ap2-rp-dots i { width: 6px; height: 6px; } .ap2-rp-tile .ap2-rp-path { font-size: 10.6px; } .ap2-rp-tile .ap2-rp-panel-head { padding: 6px 10px 7px; } .ap2-rp-tile .ap2-rp-panel-head h3 { font-size: 14.4px !important; } .ap2-rp-tile .ap2-rp-stat { padding: 4px 7px; } .ap2-rp-tile .ap2-rp-statv span { font-size: 14.8px !important; } .ap2-rp-tile .ap2-rp-statl { font-size: 9.9px !important; -webkit-line-clamp: 1; } .ap2-rp-tile .ap2-rp-tr > span, .ap2-rp-tile .ap2-rp-tr > .ap2-rp-d { font-size: 10.6px !important; } .ap2-rp-tile .ap2-rp-tr--head > span { font-size: 9.7px !important; } .ap2-rp-tile .ap2-rp-tr, .ap2-rp-tile .ap2-rp-tr--head { padding: 2px 4px; } .ap2-rp-tile .ap2-rp-table .ap2-rp-tr { max-block-size: 30px; } .ap2-rp-tile .ap2-rp-figbody { min-block-size: 36px; } .ap2-rp-tile .ap2-rp-donut svg { width: 72px; height: 72px; } .ap2-rp-tile .ap2-rp-move { font-size: 9.9px; padding: 1px 5px; } .ap2-rp-tile .ap2-rp-moves { gap: 3px; } .ap2-rp-tile .ap2-rp-donut-key li > span:last-child { font-size: 10.7px; } .ap2-rp-tile .ap2-rp-donut-key { gap: 3px; } .ap2-rp-tile .ap2-rp-band { padding-block-start: 6px; } .ap2-rp-tile.is-ask p { font-size: 16.2px; -webkit-line-clamp: 8; } } @media (min-width: 940px) and (min-height: 1190px) { .ap2-rp-tile .ap2-rp-tr, .ap2-rp-tile .ap2-rp-tr--head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.82fr) minmax(0, 0.78fr) minmax(0, 0.6fr) 52px; } .ap2-rp-tile .ap2-rp-spark { display: inline-flex; align-items: center; justify-content: flex-end; min-inline-size: 0; } .ap2-rp-tile .ap2-rp-donut svg { width: 152px; height: 152px; } .ap2-rp-tile .ap2-rp-donut-key li > span:last-child { font-size: 12.6px; } } .ap2-rw-switch { display: inline-flex; align-items: center; gap: 3px; padding: 4px; margin: 0 0 clamp(22px, 2.4vw, 34px); border-radius: 999px; border: 1px solid rgba(15,23,31,0.10); background: rgba(255,255,255,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgba(15,23,31,0.04); } .ap2-rw-tab { appearance: none; border: 0; cursor: pointer; background: transparent; border-radius: 999px; padding: 9px 20px; font-size: 14.2px; font-weight: 560; line-height: 1; letter-spacing: -0.005em; transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease; } .ap2-rw-tab:hover { background: rgba(15,23,31,0.045); } .ap2-rw-tab.is-on { background: #FFFFFF; box-shadow: 0 1px 2px rgba(15,23,31,0.10), 0 0 0 1px rgba(15,23,31,0.06); } .ap2-rw-tab:focus-visible { outline: 2px solid #DD6E3E; outline-offset: 2px; } .ap2-rw-rail { position: relative; } .ap2-rw-view { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; } .ap2-rw-track { display: flex; gap: clamp(14px, 1.4vw, 22px); align-items: stretch; padding-block-end: 6px; } .ap2-rw-track > * { scroll-snap-align: start; } .ap2-rw-track:focus-visible { outline: 2px solid #DD6E3E; outline-offset: 4px; border-radius: 8px; } .ap2-rw-rail[data-pinned='true'] .ap2-rw-view { position: sticky; inset-block-start: 87px; block-size: calc(100 * var(--ap2-vh, 1vh) - 87px); display: flex; align-items: center; overflow: hidden; scroll-snap-type: none; contain: layout paint; } .ap2-rw-rail[data-pinned='true'] .ap2-rw-view { padding-block-end: 18vh; } .ap2-rw-rail[data-pinned='true'] .ap2-rw-track { will-change: transform; } @supports (animation-timeline: view()) { .ap2-rw-rail[data-pinned='true'] { view-timeline-name: --ap2rw; view-timeline-axis: block; } .ap2-rw-rail[data-pinned='true'] .ap2-rw-track { animation: ap2RwSlide linear both; animation-timeline: --ap2rw; animation-range: contain 0% contain 100%; } .ap2-rw-rail[data-pinned='true'] .ap2-rw-prog > i { animation: ap2RwFill linear both; animation-timeline: --ap2rw; animation-range: contain 0% contain 100%; } .ap2-rw-rail[data-pinned='true'] .ap2-rw-slog-line { animation: ap2RwSloganSlide linear both; animation-timeline: --ap2rw; animation-range: contain 0% contain 100%; } } @keyframes ap2RwSlide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--ap2-rw-span, 0px)), 0, 0); } } @keyframes ap2RwSloganSlide { from { transform: translate3d(0, 0, 0); } 20.00% { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--ap2-rw-sspan, 0px)), 0, 0); } } @keyframes ap2RwFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .ap2-rw-rail[data-pinned='true'] .ap2-rw-card { flex-basis: clamp(261.95px, 52.39vh, 523.91px); } .ap2-rw-rail[data-pinned='true'] .ap2-rw-card { transition: none; } .ap2-rw-rail[data-pinned='true'] .ap2-rw-card:hover { transform: none; box-shadow: 0 1px 2px rgba(15,23,31,0.04), 0 10px 26px -22px rgba(15,23,31,0.5); } .ap2-rw-prog { position: absolute; inset-block-end: 3.1vh; inset-inline: 0; block-size: 3px; border-radius: 999px; background: rgba(15, 23, 31, 0.10); overflow: hidden; } .ap2-rw-prog > i { display: block; block-size: 100%; inline-size: 100%; border-radius: inherit; background: #DD6E3E; transform: scaleX(var(--ap2-rw-p, 0)); transform-origin: left center; } [dir="rtl"] .ap2-rw-prog > i { transform-origin: right center; } .ap2-rw-slog-line { margin: 0; font-size: clamp(19px, 2.2vw, 34px); font-weight: 640; letter-spacing: -0.028em; line-height: 1.26; color: rgba(11,23,31,0.955); } .ap2-rw-slog-line > span { color: #DD6E3E; } .ap2-rw-slog-tail { display: inline-block; inline-size: 13vw; } .ap2-rw-slog[data-run='true'] { position: absolute; inset-inline: 0; inset-block-end: 10vh; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to right, #000 0 94%, transparent 100%); mask-image: linear-gradient(to right, #000 0 94%, transparent 100%); } .ap2-rw-slog[data-run='true'] .ap2-rw-slog-line { white-space: nowrap; transform: translate3d(0, 0, 0); will-change: transform; } .ap2-rw-slog[data-run='false'] { margin-block-start: clamp(22px, 3vw, 44px); } .ap2-rw-slog[data-run='false'] .ap2-rw-slog-tail { display: none; } @media (prefers-reduced-motion: reduce) { .ap2-rw-slog[data-run='true'] .ap2-rw-slog-line { animation: none; transform: none; } } .ap2-rw-card { flex: 0 0 clamp(260.39px, 20.19vw, 304.78px); } .ap2-rw-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; border: 1px solid rgba(15,23,31,0.10); background: #FFFFFF; box-shadow: 0 1px 2px rgba(15,23,31,0.04), 0 10px 26px -22px rgba(15,23,31,0.5); transition: box-shadow 260ms cubic-bezier(0.16,1,0.3,1), transform 260ms cubic-bezier(0.16,1,0.3,1); } .ap2-rw-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15,23,31,0.05), 0 22px 44px -26px rgba(15,23,31,0.55); } .ap2-rw-head { padding: 19px 18px 16px; background: #FFFFFF; } .ap2-rw-top { display: flex; align-items: center; gap: 10px; min-height: 22px; } .ap2-rw-logo { display: block; height: 21px; width: auto; max-width: 78%; object-fit: contain; } .ap2-rw-lockup { display: flex; align-items: center; gap: 9px; min-width: 0; } .ap2-rw-logo.is-symbol { flex: none; max-width: none; } .ap2-rw-name { font-size: 16.5px; font-weight: 600; letter-spacing: 0.09em; color: #14181F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap2-rw-name.is-split b { font-weight: 700; letter-spacing: 0.035em; } .ap2-rw-name.is-split span { font-size: 12.5px; font-weight: 500; letter-spacing: 0.22em; color: #545D69; } .ap2-rw-stats { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; margin-top: 14px; min-height: 44px; } .ap2-rw-stats.is-empty { min-height: 44px; } .ap2-rw-stat { min-width: 0; text-align: center; } .ap2-rw-stat + .ap2-rw-stat { padding-inline-start: 12px; } .ap2-rw-stat + .ap2-rw-stat { box-shadow: inset 1px 0 0 rgba(15,23,31,0.10); } .ap2-rw-fig { display: block; font-size: 19.5px; font-weight: 660; letter-spacing: -0.018em; line-height: 1.15; color: #14181F; } .ap2-rw-stat + .ap2-rw-stat .ap2-rw-fig { color: #37805A; } .ap2-rw-skel { display: inline-block; width: 46px; height: 13px; border-radius: 3px; margin: 4px 0 5px; background: rgba(15,23,31,0.09); } .ap2-rw-cap { display: block; margin-top: 2px; font-size: 12.4px; font-weight: 470; line-height: 1.3; color: #6B7480; } .ap2-rw-shot { position: relative; display: block; flex: 1 1 auto; aspect-ratio: 0.8165; overflow: hidden; } .ap2-rw-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 520ms cubic-bezier(0.16,1,0.3,1); } .ap2-rw-card:hover .ap2-rw-shot img { transform: scale(1.035); } .ap2-rw-shot.is-blank { display: grid; place-items: center; } .ap2-rw-initial { font-size: clamp(52px, 6vw, 78px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: rgba(255,255,255,0.16); } @media (prefers-reduced-motion: reduce) { .ap2-rw-card, .ap2-rw-shot img { transition: none; } .ap2-rw-card:hover { transform: none; } .ap2-rw-card:hover .ap2-rw-shot img { transform: none; } } .ap2-silk { position: absolute; inset: 0; overflow: hidden; isolation: isolate; pointer-events: none; } .ap2-silk-ribbon { position: absolute; inset: -14% -10%; mix-blend-mode: screen; will-change: transform; } .ap2-silk-ribbon > svg { display: block; width: 100%; height: 100%; overflow: visible; } .ap2-silk-band { opacity: 0.92; } .ap2-silk-thread { stroke-width: 1.4px; stroke-linecap: round; opacity: 0.95; } .ap2-silk-ribbon.is-warm { animation: ap2SilkWarm 17s ease-in-out infinite alternate; } .ap2-silk-ribbon.is-violet { animation: ap2SilkViolet 23s ease-in-out infinite alternate; } .ap2-silk-ribbon.is-cool { animation: ap2SilkCool 29s ease-in-out infinite alternate; opacity: 0.85; } .ap2-silk-grain { position: absolute; inset: 0; display: block; z-index: 2; opacity: 0.22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>"); background-size: 160px 160px; } .ap2-silk-spark { position: absolute; display: block; z-index: 3; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,226,210,0.55) 0%, rgba(255,190,160,0.12) 45%, rgba(255,190,160,0) 70%); animation: ap2SilkSpark 5.5s ease-in-out infinite; } .ap2-silk-spark::after { content: ''; position: absolute; inset: -40%; background: radial-gradient(circle, #FFFFFF 0%, #FFE6D8 30%, rgba(255,214,190,0) 66%); clip-path: polygon(50% 0%, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0% 50%, 44% 44%); } .ap2-silk.is-light .ap2-silk-ribbon { mix-blend-mode: multiply; } .ap2-silk.is-light .ap2-silk-band { opacity: 0.62; } .ap2-silk.is-light .ap2-silk-thread { opacity: 0.9; } .ap2-silk.is-light .ap2-silk-ribbon.is-cool { opacity: 0.7; } .ap2-silk.is-light .ap2-silk-grain { opacity: 0.14; mix-blend-mode: multiply; } .ap2-silk.is-light .ap2-silk-spark { background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,214,190,0.35) 45%, rgba(255,214,190,0) 70%); } .ap2-silk.is-light .ap2-silk-spark::after { background: radial-gradient(circle, #FFFFFF 0%, #FFFFFF 26%, rgba(233,103,58,0.55) 48%, rgba(233,103,58,0) 70%); } @keyframes ap2SilkWarm { from { transform: translate3d(-2.5%, 1%, 0) scaleY(1); } to { transform: translate3d(2.5%, -3%, 0) scaleY(1.14); } } @keyframes ap2SilkViolet { from { transform: translate3d(2%, 2%, 0) rotate(-1.4deg); } to { transform: translate3d(-2.5%, -2%, 0) rotate(1.2deg) scaleY(1.1); } } @keyframes ap2SilkCool { from { transform: translate3d(-1.5%, -1%, 0) scaleY(0.94); } to { transform: translate3d(2%, 2.5%, 0) scaleY(1.08); } } @keyframes ap2SilkSpark { 0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.55) rotate(0deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); } } @media (prefers-reduced-motion: reduce) { .ap2-silk-ribbon, .ap2-silk-spark { animation: none; } .ap2-silk-spark { opacity: 0.8; } } .ap2-faq-cred { position: relative; isolation: isolate; margin-top: 30px; max-width: 540px; padding: 8px 8px 6px; border-radius: 24px; color: #1A1822; background: radial-gradient(120% 60% at 50% 0%, rgba(255,214,196,0.35) 0%, rgba(255,214,196,0) 60%), linear-gradient(180deg, #FFFFFF 0%, #FBF8F7 100%); border: 1px solid rgba(23,22,40,0.09); box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(23,20,35,0.05), 0 16px 34px -20px rgba(140,80,100,0.28), 0 34px 64px -40px rgba(60,40,80,0.30); } .ap2-faq-cred-plate { position: relative; isolation: isolate; overflow: hidden; height: 260px; border-radius: 17px; display: flex; align-items: flex-end; background: radial-gradient(90% 80% at 15% 0%, #FFF1E8 0%, rgba(255,241,232,0) 70%), radial-gradient(90% 90% at 100% 100%, #F1ECFA 0%, rgba(241,236,250,0) 70%), linear-gradient(180deg, #FFF9F5 0%, #F8F3F7 100%); box-shadow: inset 0 0 0 1px rgba(23,22,40,0.06); } .ap2-faq-cred-plate > .ap2-silk { inset: -14% -4% 22% -4%; } .ap2-faq-cred-plate::after { content: ''; position: absolute; inset: 34% 0 0 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(255,250,247,0) 0%, rgba(255,250,247,0.78) 46%, rgba(255,251,249,0.96) 100%); } .ap2-faq-cred-tray { position: relative; z-index: 4; width: 100%; list-style: none; margin: 0; padding: 0 18px 22px; display: flex; align-items: center; justify-content: space-evenly; gap: 18px; } .ap2-faq-cred-tray > li { display: flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 0; } .ap2-faq-cred-tray img { display: block; width: auto; max-width: 100%; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(90,50,80,0.10)); transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); } .ap2-faq-cred-tray img[data-mark='ovb'] { height: 92px; } .ap2-faq-cred-tray img[data-mark='ituseed'] { height: 34px; } .ap2-faq-cred-tray > li:hover img { transform: translateY(-2px); } .ap2-faq-cred-line { margin: 0; padding: 18px 16px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 9px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.4; color: rgba(26,24,34,0.66); text-align: center; } .ap2-faq-cred-line > b { font-weight: 600; color: #16141D; letter-spacing: -0.01em; } .ap2-faq-cred-dot { display: block; flex: none; width: 6px; height: 6px; border-radius: 999px; background: linear-gradient(135deg, #FFB08A 0%, #E9673A 100%); box-shadow: 0 0 8px rgba(233,103,58,0.55); } .ap2-faq-cred-list { list-style: none; margin: 0; padding: 0 6px; border-top: 1px solid rgba(23,22,40,0.08); } .ap2-faq-cred-list > li { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 10px; border-radius: 12px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 16.4px; font-weight: 500; line-height: 1.42; color: #1B1923; text-wrap: pretty; transition: background .25s ease; } .ap2-faq-cred-list > li + li::before { content: ''; position: absolute; top: 0; inset-inline: 10px; height: 1px; background: rgba(23,22,40,0.07); } .ap2-faq-cred-list > li:hover { background: rgba(255,236,226,0.55); } .ap2-faq-cred-ico { --tick: 233,103,58; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: radial-gradient(circle at 35% 30%, rgba(var(--tick),0.78) 0%, rgba(var(--tick),1) 70%); box-shadow: 0 0 0 4px rgba(var(--tick),0.12), 0 6px 14px -6px rgba(var(--tick),0.8), inset 0 1px 0 rgba(255,255,255,0.4); } .ap2-faq-cred-list > li:nth-child(2) .ap2-faq-cred-ico { --tick: 157,88,168; } .ap2-faq-cred-list > li:nth-child(3) .ap2-faq-cred-ico { --tick: 64,112,166; } .ap2-faq-cred-ico svg { width: 14px; height: 14px; } @media (max-width: 1040px) { .ap2-faq-cred { max-width: none; } } @media (max-width: 640px) { .ap2-faq-cred { margin-top: 24px; border-radius: 20px; } .ap2-faq-cred-plate { height: 212px; border-radius: 14px; } .ap2-faq-cred-tray { padding: 0 12px 18px; gap: 12px; } .ap2-faq-cred-tray img { height: 48px; } .ap2-faq-cred-tray img[data-mark='ovb'] { height: 70px; } .ap2-faq-cred-tray img[data-mark='ituseed'] { height: 25px; } .ap2-faq-cred-line { font-size: 15.4px; padding: 16px 10px 12px; } .ap2-faq-cred-list { padding: 0 2px; } .ap2-faq-cred-list > li { font-size: 15.8px; gap: 12px; padding: 12px 8px; } } @media (prefers-reduced-motion: reduce) { .ap2-faq-cred-list > li, .ap2-faq-cred-tray img { transition: none; } } .ap2-close-gust { position: absolute; left: -30%; width: 46%; height: calc(var(--h, 1px) * 46); pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.26) 38%, rgba(255,255,255,0.38) 52%, rgba(255,255,255,0) 100%); animation-name: ap2CloseGust; animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); animation-iteration-count: infinite; } @keyframes ap2CloseGust { 0% { opacity: 0; transform: translate3d(0, 0, 0) scaleY(1); } 14% { opacity: 0.85; } 60% { opacity: 0.7; transform: translate3d(150%, -14px, 0) scaleY(1.25); } 100% { opacity: 0; transform: translate3d(280%, -26px, 0) scaleY(1); } } .ap2-close-grass { position: absolute; left: -4%; right: -4%; bottom: 0; height: 22%; pointer-events: none; transform-origin: 50% 100%; background: linear-gradient(to top, rgba(84,132,74,0.30) 0%, rgba(108,156,88,0.16) 46%, rgba(126,170,96,0) 100%); animation: ap2CloseLean 11s ease-in-out infinite; } @keyframes ap2CloseLean { 0%, 100% { transform: skewX(0deg) translateX(0); } 32% { transform: skewX(-2.6deg) translateX(-5px); } 64% { transform: skewX(1.4deg) translateX(3px); } } .ap2-close-bird { position: absolute; left: -6%; width: 13px; height: 7px; --ink: rgba(48,58,74,0.72); pointer-events: none; opacity: 0; animation-name: ap2CloseBird; animation-timing-function: linear; animation-iteration-count: infinite; } .ap2-close-bird::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 46%, var(--ink) 46%, var(--ink) 58%, transparent 58%) left / 52% 100% no-repeat, linear-gradient(to bottom left, transparent 46%, var(--ink) 46%, var(--ink) 58%, transparent 58%) right / 52% 100% no-repeat; transform-origin: 50% 50%; animation: ap2CloseFlap var(--flap, 0.7s) ease-in-out infinite; } .ap2-close-bird.is-mid { width: 11px; height: 6px; --ink: rgba(48,58,74,0.56); } .ap2-close-bird.is-high { width: 9px; height: 5px; --ink: rgba(48,58,74,0.42); } @keyframes ap2CloseFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-0.55); } } @keyframes ap2CloseBird { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 8% { opacity: 0.8; } 30% { transform: translate3d(34vw, calc(var(--wob, 1) * -22px), 0); } 60% { transform: translate3d(66vw, calc(var(--wob, 1) * 12px), 0); } 90% { opacity: 0.8; } 100% { opacity: 0; transform: translate3d(118vw, calc(var(--wob, 1) * -16px), 0); } } .ap2-close-leaf { position: absolute; left: -5%; width: 13px; height: 9px; pointer-events: none; opacity: 0; border-radius: 68% 12% 68% 12%; background: linear-gradient(132deg, #F0B06A 0%, #D9803F 52%, #9E4E22 100%); box-shadow: 0 1px 0 rgba(84, 40, 16, 0.34); transform-origin: 50% 50%; animation-name: ap2CloseLeaf; animation-timing-function: linear; animation-iteration-count: infinite; } .ap2-close-leaf.is-far { width: 9px; height: 6.5px; opacity: 0; filter: saturate(0.7); } @keyframes ap2CloseLeaf { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); } 7% { opacity: 0.92; } 35% { transform: translate3d(32vw, calc(var(--fall, 40px) * 0.35), 0) rotate(calc(var(--spin, 1) * 210deg)); } 70% { transform: translate3d(68vw, calc(var(--fall, 40px) * 0.78), 0) rotate(calc(var(--spin, 1) * 470deg)); } 92% { opacity: 0.7; } 100% { opacity: 0; transform: translate3d(112vw, var(--fall, 40px), 0) rotate(calc(var(--spin, 1) * 700deg)); } } @media (prefers-reduced-motion: reduce) { .ap2-close-gust, .ap2-close-bird, .ap2-close-leaf { display: none; } .ap2-close-grass { animation: none; transform: none; } } .ap2-close-light { position: absolute; inset: -10% -30%; pointer-events: none; background: linear-gradient(105deg, rgba(255,244,206,0) 34%, rgba(255,240,196,0.22) 47%, rgba(255,236,186,0.30) 52%, rgba(255,240,196,0.18) 58%, rgba(255,244,206,0) 72%); animation: ap2CloseLight 34s ease-in-out infinite; } @keyframes ap2CloseLight { 0% { transform: translate3d(-42%, 0, 0); opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translate3d(42%, 0, 0); opacity: 0; } } .ap2-close-mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.34) 58%, transparent 72%); animation-name: ap2CloseMote; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes ap2CloseMote { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 12% { opacity: 0.9; } 40% { transform: translate3d(26vw, calc(var(--rise, -20px) * 1.4), 0); } 70% { transform: translate3d(52vw, calc(var(--rise, -20px) * 0.3), 0); } 88% { opacity: 0.55; } 100% { opacity: 0; transform: translate3d(84vw, calc(var(--rise, -20px) * 1.1), 0); } } @media (prefers-reduced-motion: reduce) { .ap2-close-mote { display: none; } .ap2-close-light { animation: none; opacity: 0; } } .ap2-close-ask { position: relative; align-self: start; width: 100%; } .ap2-close-h { margin: 0 0 clamp(18px, 2vw, 26px); font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: clamp(31.35px, 2.732vw, 46.35px); font-weight: 560; letter-spacing: -0.032em; line-height: 1.08; color: #fff; max-width: 15em; } .ap2-close-h-em { color: #FFD9A8; } @media (prefers-reduced-motion: reduce) { .ap2-close-chat-dots i { animation: none; opacity: 0.6; } } .ap2-close-float { width: min(100%, 380px); } .ap2-ox-stage { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 240 / 394; pointer-events: none; content-visibility: auto; contain-intrinsic-size: auto 100% auto 1000px; } .ap2-ox { position: absolute; inset: 0; display: block; width: 100%; height: 100%; shape-rendering: crispEdges; } .ap2-ox-sprite { position: absolute; display: block; shape-rendering: crispEdges; overflow: visible; } .ap2-ox-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,242,190,0.34) 0%, rgba(255,242,190,0.20) 42%, rgba(255,242,190,0) 72%); animation: ap2OxGlow 9s ease-in-out infinite; } .ap2-ox-ray { position: absolute; transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(255,248,214,0) 0%, rgba(255,248,214,0.34) 14%, rgba(255,248,214,0.17) 50%, rgba(255,248,214,0) 100%); animation-name: ap2OxRay; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes ap2OxRay { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.78; } } @keyframes ap2OxGlow { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } } .ap2-ox-hand { transform-origin: 50% 50%; animation-name: ap2OxSpin; animation-timing-function: linear; animation-iteration-count: infinite; } .ap2-ox-hand.is-min { animation-duration: 24s; } .ap2-ox-hand.is-hour { animation-duration: 288s; } @keyframes ap2OxSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ap2-ox-flag { transform-origin: 18% 50%; animation: ap2OxFlag 1.1s ease-in-out infinite; } @keyframes ap2OxFlag { 0%, 100% { transform: scaleX(1) skewY(0deg); } 35% { transform: scaleX(0.82) skewY(-7deg); } 70% { transform: scaleX(0.94) skewY(5deg); } } .ap2-ox-lit { opacity: 0.14; animation-name: ap2OxLit; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes ap2OxLit { 0%, 100% { opacity: 0.14; } 42% { opacity: 0.95; } 64% { opacity: 0.5; } } .ap2-ox-tree { transform-origin: 50% 100%; animation-name: ap2OxSway; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes ap2OxSway { 0%, 100% { transform: skewX(0deg); } 30% { transform: skewX(-2.4deg); } 66% { transform: skewX(1.6deg); } } .ap2-ox-refl { animation-name: ap2OxRefl; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes ap2OxRefl { 0%, 100% { transform: translateX(0) scaleX(1); } 34% { transform: translateX(18%) scaleX(1.18); } 68% { transform: translateX(-12%) scaleX(0.9); } } .ap2-ox-glint { opacity: 0; animation-name: ap2OxGlint; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes ap2OxGlint { 0%, 100% { opacity: 0; transform: translateX(0); } 40% { opacity: 0.8; } 100% { transform: translateX(280%); } } .ap2-ox-punt { animation: ap2OxPunt 74s linear infinite; animation-delay: -22s; } .ap2-ox-punt.is-far { animation-name: ap2OxPuntFar; animation-duration: 104s; animation-delay: -58s; transform-origin: 50% 100%; } @keyframes ap2OxPunt { from { transform: translateX(-130%); } to { transform: translateX(1240%); } } @keyframes ap2OxPuntFar { from { transform: translateX(1240%) scale(0.82); } to { transform: translateX(-130%) scale(0.82); } } .ap2-ox-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: ap2OxBob 3.4s ease-in-out infinite; } @keyframes ap2OxBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-0.7px) rotate(0.7deg); } } .ap2-ox-pole { transform-box: fill-box; transform-origin: 50% 92%; animation: ap2OxPole 3.4s ease-in-out infinite; } @keyframes ap2OxPole { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(11deg) translateY(-1px); } } .ap2-ox-swan { animation: ap2OxSwan 96s linear infinite; } .ap2-ox-swan.is-two { animation-name: ap2OxSwanTwo; animation-duration: 124s; animation-delay: -47s; transform-origin: 50% 100%; } @keyframes ap2OxSwan { from { transform: translateX(2280%); } to { transform: translateX(-190%); } } @keyframes ap2OxSwanTwo { from { transform: translateX(-190%) scale(0.86); } to { transform: translateX(2280%) scale(0.86); } } .ap2-ox-cloud { animation-name: ap2OxCloud; animation-timing-function: linear; animation-iteration-count: infinite; } .ap2-ox-cloud.is-low { animation-duration: 132s; opacity: 0.95; } .ap2-ox-cloud.is-mid { animation-duration: 178s; opacity: 0.8; } .ap2-ox-cloud.is-high { animation-duration: 236s; opacity: 0.55; } @keyframes ap2OxCloud { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ap2-ox-shade { position: absolute; background: linear-gradient(90deg, rgba(30,68,38,0) 0%, rgba(30,68,38,0.2) 50%, rgba(30,68,38,0) 100%); animation-name: ap2OxShade; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes ap2OxShade { from { transform: translateX(0); } to { transform: translateX(420%); } } .ap2-ox-sweep { position: absolute; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(234,249,255,0.4) 50%, rgba(255,255,255,0) 100%); animation: ap2OxSweep 21s ease-in-out infinite; } @keyframes ap2OxSweep { 0% { opacity: 0; transform: translateX(0); } 16% { opacity: 0.9; } 78% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(500%); } } .ap2-ox-depth { position: absolute; pointer-events: none; background: linear-gradient(to bottom, rgba(74, 56, 28, 0) 0%, rgba(74, 56, 28, 0.07) 46%, rgba(64, 46, 22, 0.16) 82%, rgba(58, 42, 20, 0.2) 100%); } .ap2-ox-eight { animation: ap2OxEight 118s linear infinite; animation-delay: -74s; } @keyframes ap2OxEight { from { transform: translateX(680%); } to { transform: translateX(-115%); } } .ap2-ox-oars { transform-box: fill-box; transform-origin: 50% 6%; animation: ap2OxOars 2.6s cubic-bezier(0.45, 0, 0.3, 1) infinite; } @keyframes ap2OxOars { 0%, 100% { transform: rotate(-9deg); } 42% { transform: rotate(8deg); } 70% { transform: rotate(2deg); } } .ap2-ox-daw { top: 1%; animation-name: ap2OxDaw; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes ap2OxDaw { 0% { transform: translate(0, 0) scaleX(1); } 25% { transform: translate(420%, 260%) scaleX(1); } 50% { transform: translate(880%, 60%) scaleX(-1); } 75% { transform: translate(430%, -230%) scaleX(-1); } 100% { transform: translate(0, 0) scaleX(1); } } .ap2-ox-wing { transform-box: fill-box; transform-origin: 50% 50%; animation: ap2OxWing 0.42s ease-in-out infinite; } @keyframes ap2OxWing { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-0.6); } } .ap2-ox-cyclist { animation: ap2OxCyclist 86s linear infinite; animation-delay: -31s; } @keyframes ap2OxCyclist { from { transform: translateX(-260%); } to { transform: translateX(3900%); } } .ap2-ox-cloud { translate: calc(var(--gd-px, 0) * 2px) calc(var(--gd-py, 0) * 1px); } .ap2-ox-glow, .ap2-ox-ray { translate: calc(var(--gd-px, 0) * 3px) calc(var(--gd-py, 0) * 1.5px); } .ap2-ox-flag, .ap2-ox-daw, .ap2-ox-hand, .ap2-ox-lit { translate: calc(var(--gd-px, 0) * 5px) calc(var(--gd-py, 0) * 2.4px); } .ap2-ox-tree, .ap2-ox-still { translate: calc(var(--gd-px, 0) * 7px) calc(var(--gd-py, 0) * 3.4px); } .ap2-ox-glint, .ap2-ox-refl, .ap2-ox-sweep, .ap2-ox-shade { translate: calc(var(--gd-px, 0) * 10px) calc(var(--gd-py, 0) * 4.8px); } .ap2-ox-punt, .ap2-ox-swan, .ap2-ox-eight, .ap2-ox-pole, .ap2-ox-bob, .ap2-ox-cyclist { translate: calc(var(--gd-px, 0) * 13px) calc(var(--gd-py, 0) * 6.2px); } @media (prefers-reduced-motion: reduce) { .ap2-ox-glow, .ap2-ox-hand, .ap2-ox-flag, .ap2-ox-tree, .ap2-ox-refl, .ap2-ox-bob, .ap2-ox-pole, .ap2-ox-cloud, .ap2-ox-shade, .ap2-ox-oars, .ap2-ox-wing { animation: none; } .ap2-ox-flag.is-gate { animation: none; } .ap2-ox-eight { animation: none; transform: translateX(210%); } .ap2-ox-cyclist { animation: none; transform: translateX(1400%); } .ap2-ox-daw { animation: none; transform: translate(430%, -230%) scaleX(-1); } .ap2-ox-daw.is-1 { transform: translate(880%, 60%) scaleX(-1); } .ap2-ox-daw.is-2 { transform: translate(420%, 260%); } .ap2-ox-cloud.is-low, .ap2-ox-cloud.is-mid, .ap2-ox-cloud.is-high { animation: none; } .ap2-ox-ray { animation: none; opacity: 0.44; } .ap2-ox-shade { transform: translateX(200%); } .ap2-ox-sweep { animation: none; opacity: 0.5; transform: translateX(200%); } .ap2-ox-hand.is-min, .ap2-ox-hand.is-hour { animation: none; } .ap2-ox-glint { animation: none; opacity: 0.5; } .ap2-ox-lit { animation: none; opacity: 0.85; } .ap2-ox-punt { animation: none; transform: translateX(300%); } .ap2-ox-punt.is-far { animation: none; transform: translateX(830%) scale(0.82); } .ap2-ox-swan { animation: none; transform: translateX(1300%); } .ap2-ox-swan.is-two { animation: none; transform: translateX(1700%) scale(0.86); } .ap2-ox-stage [class*="ap2-ox-"] { translate: none; } } @media (prefers-reduced-motion: reduce) { .ap2-ccm-b1, .ap2-ccm-b2, .ap2-ccm-b3, .ap2-ccm-b4 { animation: none !important; transform: none; opacity: 1; } } .ap2-close-chat { position: relative; margin-top: clamp(20px, 2.2vw, 30px); border: 1px solid rgba(11, 15, 20, 0.10); border-radius: 22px; background: #fff; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(11, 15, 20, 0.05), 0 8px 26px rgba(6, 26, 48, 0.13), 0 28px 72px rgba(6, 26, 48, 0.26); } .ap2-close-chat::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: linear-gradient(90deg, #DD6E3E, #C98A63, #16204A, #2E9E62, #DD6E3E); z-index: 2; } .ap2-close-chat::after { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 42%; block-size: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); z-index: 3; animation: ap2ChatSweep 5.4s ease-in-out infinite; pointer-events: none; } @keyframes ap2ChatSweep { 0%, 62% { transform: translateX(-110%); } 92%, 100% { transform: translateX(300%); } } .ap2-close-chat-top { display: flex; align-items: center; gap: 12px; padding: clamp(14px, 1.4vw, 18px) clamp(15px, 1.6vw, 20px); border-bottom: 1px solid rgba(11, 15, 20, 0.07); background: radial-gradient(58px 44px at 26px 50%, rgba(38, 53, 110, 0.09) 0%, rgba(38, 53, 110, 0) 72%), linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%); } .ap2-close-chat-av { position: relative; flex-shrink: 0; display: inline-flex; line-height: 0; } .ap2-close-chat-mark { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: radial-gradient(120% 110% at 26% 18%, #FFFFFF 0%, rgba(255,255,255,0) 62%), linear-gradient(158deg, #F7F9FD 0%, #E8ECF6 100%); border: 1px solid rgba(22, 32, 74, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(11, 15, 20, 0.07), 0 0 0 4px rgba(38, 53, 110, 0.045); color: #26356E; } .ap2-ccm-b1, .ap2-ccm-b2, .ap2-ccm-b3, .ap2-ccm-b4 { transform-box: fill-box; transform-origin: center bottom; will-change: transform; } .ap2-ccm-b1 { animation: ap2CcmBar 1.9s ease-in-out infinite; } .ap2-ccm-b2 { animation: ap2CcmBar 2.6s ease-in-out infinite -0.4s; } .ap2-ccm-b3 { animation: ap2CcmBar 2.2s ease-in-out infinite -1.1s; } .ap2-ccm-b4 { animation: ap2CcmBar 3.1s ease-in-out infinite -0.7s; } @keyframes ap2CcmBar { 0%, 100% { transform: scaleY(0.42); opacity: 0.55; } 50% { transform: scaleY(1); opacity: 1; } } .ap2-close-chat-id { flex: 1; min-width: 0; display: grid; gap: 1px; } .ap2-close-chat-name { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 16px; font-weight: 650; letter-spacing: -0.014em; line-height: 1.22; color: #0D1420; text-transform: capitalize; } .ap2-close-chat-state { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.25; letter-spacing: 0.002em; color: rgba(11,15,20,0.757); } .ap2-close-chat-dot { position: absolute; inset-block-end: -1px; inset-inline-end: -1px; width: 11px; height: 11px; border-radius: 50%; background: #2E9E62; border: 2px solid #FBFCFE; box-shadow: 0 0 7px rgba(46, 158, 98, 0.6); animation: ap2Pulse 2.4s infinite; } .ap2-close-chat-log { height: clamp(116px, 9.4vw, 138px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: clamp(14px, 1.5vw, 18px) clamp(15px, 1.6vw, 20px) 0; } .ap2-close-chat-log > *:first-child { margin-top: auto; } .ap2-close-chat-turn { display: flex; align-items: flex-start; gap: 9px; max-width: 94%; align-self: flex-start; } .ap2-close-chat-turn.is-me { align-self: flex-end; max-width: 88%; } .ap2-close-chat-face { width: 28px; height: 28px; flex-shrink: 0; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(22, 32, 74, 0.09); color: #16204A; } @media (max-width: 620px) { .ap2-close-chat-log { height: auto; min-height: 96px; max-height: 46vh; } } .ap2-close-chat-msg { margin: 0; min-width: 0; padding: 10px 14px; border: 1px solid rgba(11, 15, 20, 0.09); border-radius: 18px 18px 18px 5px; background: #fff; box-shadow: 0 1px 2px rgba(11, 15, 20, 0.05); font-size: 15.3px; font-weight: 450; line-height: 1.5; color: rgba(11,15,20,0.928); } .ap2-close-chat-turn.is-me .ap2-close-chat-msg { border-color: transparent; border-radius: 18px 18px 5px 18px; background: linear-gradient(160deg, #26356E 0%, #16204A 100%); box-shadow: 0 2px 8px rgba(22, 32, 74, 0.24); font-weight: 500; color: rgba(255, 255, 255, 0.96); } .ap2-close-chat-msg.is-err { color: #B4471F; } .ap2-close-chat-dots { display: inline-flex; gap: 4px; } .ap2-close-chat-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(11, 15, 20, 0.32); animation: ap2ChatDot 1.1s ease-in-out infinite; } .ap2-close-chat-dots i:nth-child(2) { animation-delay: 0.18s; } .ap2-close-chat-dots i:nth-child(3) { animation-delay: 0.36s; } @keyframes ap2ChatDot { 0%, 100% { opacity: 0.28; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } .ap2-close-chat-chips { display: flex; gap: 8px; margin: 0; padding: clamp(14px, 1.4vw, 16px) clamp(15px, 1.6vw, 20px) 0; overflow-x: auto; scrollbar-width: none; } .ap2-close-chat-chips::-webkit-scrollbar { display: none; } .ap2-close-chat-chip { flex-shrink: 0; padding: 8px 14px; border: 1px solid rgba(11, 15, 20, 0.14); border-radius: 999px; background: #fff; font-family: inherit; font-size: 13.6px; font-weight: 500; color: rgba(11,15,20,0.892); cursor: pointer; white-space: nowrap; transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; } .ap2-close-chat-chip:hover { border-color: rgba(221, 110, 62, 0.7); background: rgba(221, 110, 62, 0.07); color: #16204A; box-shadow: 0 2px 8px rgba(221, 110, 62, 0.14); } .ap2-close-chat-bar { display: flex; align-items: center; gap: 8px; margin: clamp(14px, 1.4vw, 16px) clamp(15px, 1.6vw, 20px) clamp(14px, 1.5vw, 18px); padding: 6px 6px 6px 15px; border: 1px solid rgba(11, 15, 20, 0.14); border-radius: 12px; background: rgba(11, 15, 20, 0.028); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .ap2-close-chat-bar:focus-within { border-color: rgba(221, 110, 62, 0.8); background: #fff; box-shadow: 0 0 0 3px rgba(221, 110, 62, 0.14); } .ap2-close-chat-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; padding: 0; font-size: 15.2px; font-weight: 450; color: #16204A; } .ap2-close-chat-in::placeholder { color: rgba(11,15,20,0.739); } .ap2-close-chat-go { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; cursor: pointer; background: linear-gradient(160deg, #26356E 0%, #16204A 100%); color: #fff; box-shadow: 0 2px 8px rgba(22, 32, 74, 0.26); transition: opacity .2s ease, background .2s ease, transform .2s cubic-bezier(0.16, 1, 0.3, 1); } .ap2-close-chat-go:hover:not(:disabled) { background: linear-gradient(160deg, #E8834F 0%, #DD6E3E 100%); transform: scale(1.06); } .ap2-close-chat-go:disabled { opacity: 0.28; cursor: not-allowed; box-shadow: none; } [dir='rtl'] .ap2-close-chat-go svg { transform: scaleX(-1); } .ap2-close-foot { position: relative; border-top: 1px solid rgba(255,255,255,0.20); margin-top: clamp(24px, 2.6vw, 40px); padding-top: clamp(19px, 2vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(13px, 1.4vw, 19px); } .ap2-close-foot-id { min-width: 0; } .ap2-close-where { display: grid; gap: clamp(20px, 2.2vw, 30px); margin-block-end: clamp(26px, 2.8vw, 40px); padding-block-end: clamp(24px, 2.6vw, 36px); border-bottom: 1px solid rgba(255, 255, 255, 0.16); } .ap2-close-where-h { margin: 0 0 11px; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.4px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.829); } .ap2-close-where-addr { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 21px; font-weight: 560; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.32); padding-block-end: 2px; } .ap2-close-where-addr:hover { border-bottom-color: #DD6E3E; } .ap2-close-where-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .ap2-close-office { display: grid; gap: 10px; min-width: 0; } .ap2-close-office-pic { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); display: block; } .ap2-close-office-body { display: grid; gap: 4px; min-width: 0; } .ap2-close-office-city { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size:16.5px; font-weight: 620; color: #fff; } .ap2-close-office-lines { display: grid; gap: 1px; } .ap2-close-office-lines > span { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size:14.5px; font-weight: 450; line-height: 1.45; color: rgba(255,255,255,0.937); } .ap2-close-office-map { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 4px; font-size:13.9px; font-weight: 600; color: #FFD9A8; text-decoration: none; } .ap2-close-office-map:hover { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 760px) { .ap2-close-office-map, .ap2-close-where-addr { min-height: 44px; align-items: center; padding-block: 11px; margin-block: -11px; } } @media (max-width: 620px) { .ap2-close-where-grid { grid-template-columns: minmax(0, 1fr); } } .ap2-close-foot-nav { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px clamp(18px, 2.2vw, 36px); margin-top: clamp(16px, 1.7vw, 22px); } .ap2-close-foot-menu { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; } .ap2-close-foot-badge { display: inline-flex; align-items: center; flex-shrink: 0; opacity: 0.78; transition: opacity .3s ease; } .ap2-close-foot-badge:hover { opacity: 1; } .ap2-close-foot-badge img { display: block; width: 88px; height: auto; } .ap2-close-foot-badge-text { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 12px; font-weight: 500; white-space: nowrap; color: rgba(255,255,255,0.874); } .ap2-close-foot-langs { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: clamp(15px, 1.6vw, 20px); } .ap2-close-foot-base { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px clamp(18px, 2.2vw, 36px); margin-top: clamp(18px, 1.9vw, 24px); color: rgba(255,255,255,0.829); } .ap2-close-foot-legal { margin: 0; line-height: 1.45; white-space: pre-line; } .ap2-close-foot-legal-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px clamp(14px, 1.6vw, 26px); order: -1; margin-block-end: 4px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 12.5px; font-weight: 460; } .ap2-close-foot-legal-links a { color: rgba(255,255,255,0.865); } .ap2-close-foot-legal-links a:hover { color: #fff; } .ap2-close-foot-legal-links button { font: inherit; color: rgba(255,255,255,0.865); } .ap2-close-foot-legal-links button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .ap2-close-foot-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; justify-self: start; white-space: normal; } @media (max-width: 620px) { .ap2-close-foot-menu .ap2-link, .ap2-close-foot-nav > .ap2-link, .ap2-close-foot-langs .ap2-link { padding-block: 7px; } .ap2-close-foot-menu { gap: 0 20px; } .ap2-close-foot-langs { gap: 0 16px; } .ap2-close-foot-nav { gap: 0 clamp(18px, 2.2vw, 36px); } } .ap2-close-lockup { font-size:12.4px; } @media (max-width: 620px) { .ap2-close-terms-k { font-size: 12px; } .ap2-close-lockup { font-size: 12.7px; } .ap2-close-chat-in { min-height: 34px; } } @media (max-width: 620px) { .ap2-close-art { display: none; } } .ap2-ct-eyebrow-sm { margin: 0; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.8px; font-weight: 620; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(11,11,12,0.892); } .ap2-ct-eyebrow-sm.is-spaced { margin-top: 4px; } .ap2-ct-offices { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ap2-ct-office { border-radius: 4px; overflow: hidden; background: #fff; border: 1px solid rgba(11, 11, 12, 0.12); transition: border-color .2s ease; } .ap2-ct-office:hover { border-color: rgba(221, 110, 62, 0.55); } .ap2-ct-photo { display: block; width: 100%; height: clamp(96px, 9.4vw, 124px); object-fit: cover; border-bottom: 1px solid rgba(11, 11, 12, 0.07); background: #EEECE8; } .ap2-ct-office-body { padding: 13px 15px 15px; } .ap2-ct-city { display: block; font-size: 15.4px; font-weight: 700; letter-spacing: -0.012em; color: #0B0B0C; } .ap2-ct-addr { display: grid; margin-top: 3px; font-style: normal; font-size: 13.5px; font-weight: 450; line-height: 1.44; color: rgba(11,11,12,0.919); } .ap2-ct-dirs { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.2px; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; color: #9E3B22; text-decoration: none; transition: color .2s ease, gap .2s ease; } .ap2-ct-dirs:hover { color: #DD6E3E; gap: 8px; } @media (max-width: 760px) { .ap2-ct-dirs { min-height: 44px; align-items: center; padding-block: 12px; margin-block: -12px; } } @media (max-width: 1080px) { .ap2-pg .ap2-ct-photo { height: 118px; } .ap2-pg .ap2-ct-office { display: block; } } @keyframes ap2CtIn { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .ap2-pg * { animation: none !important; transition: none !important; } } .ap2-ct-office { border-radius: 4px; background: #fff; border: 1px solid rgba(11, 11, 12, 0.12); box-shadow: none; } .ap2-ct-office:hover { border-color: rgba(221, 110, 62, 0.55); box-shadow: none; } .ap2-ct-head { max-width: none; } .ap2-ct-two { display: grid; grid-template-columns: minmax(0, 0.87fr) minmax(0, 1fr); gap: clamp(18px, 2.2vw, 34px); align-items: start; margin-top: clamp(22px, 2.6vw, 38px); } @media (max-width: 1080px) { .ap2-ct-two { grid-template-columns: minmax(0, 1fr); } } .ap2-ct-left { display: grid; gap: clamp(12px, 1.4vw, 18px); align-content: start; min-width: 0; } .ap2-ct-formband { margin-top: clamp(16px, 1.8vw, 26px); scroll-margin-top: 84px; } .ap2-ct-two + .ap2-ct-reachcard { margin-top: clamp(16px, 1.8vw, 26px); } .ap2-ct-reachcard { display: grid; gap: clamp(15px, 1.6vw, 21px); padding: clamp(17px, 1.8vw, 25px); border-radius: 6px; border: 1px solid rgba(23, 27, 46, 0.11); background: rgba(255, 255, 255, 0.58); -webkit-backdrop-filter: blur(24px) saturate(1.32); backdrop-filter: blur(24px) saturate(1.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 1px 2px -1px rgba(23, 27, 46, 0.09); } .ap2-ct-reach-half { min-width: 0; } .ap2-ct-reach-half + .ap2-ct-reach-half { border-top: 1px solid rgba(11, 11, 12, 0.09); padding-top: clamp(15px, 1.6vw, 21px); } .ap2-ct-base-people { min-width: 0; padding: clamp(19px, 2vw, 28px); border-radius: 6px; border: 1px solid rgba(23, 27, 46, 0.11); background: rgba(255, 255, 255, 0.58); -webkit-backdrop-filter: blur(24px) saturate(1.32); backdrop-filter: blur(24px) saturate(1.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 1px 2px -1px rgba(23, 27, 46, 0.09); } .ap2-ct-base-people .ap2-ct-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .ap2-ct-people > .ap2-ct-person:nth-child(2n) { border-inline-start: 1px solid rgba(11, 11, 12, 0.09); padding-inline-start: clamp(12px, 0.98vw, 14px); } .ap2-ct-people > .ap2-ct-person:nth-child(2n+1) { padding-inline-end: clamp(12px, 0.98vw, 14px); } .ap2-ct-people > .ap2-ct-person:nth-child(n+3) { border-block-start: 1px solid rgba(11, 11, 12, 0.09); padding-block-start: clamp(19px, 2vw, 28px); margin-block-start: clamp(19px, 2vw, 28px); } .ap2-ct-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 13px; } .ap2-ct-people { list-style: none; margin: 15px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); } .ap2-ct-person { display: grid; align-content: start; justify-items: start; gap: 3px; min-width: 0; } .ap2-ct-face { display: block; margin-inline: auto; width: 100%; max-width: 263px; aspect-ratio: 1 / 1; height: auto; border-radius: 999px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 16px rgba(11, 15, 20, 0.14), 0 0 0 1px rgba(11, 11, 12, 0.05); margin-bottom: 11px; } .ap2-ct-person-name { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 17.9px; font-weight: 640; letter-spacing: -0.012em; color: #16204A; } .ap2-ct-person-role { font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.9px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(11,11,12,0.802); line-height: 1.35; } .ap2-ct-ask { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 13px; border: 1px solid rgba(11, 11, 12, 0.16); border-radius: 999px; background: #fff; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 15px; font-weight: 560; color: #16204A; text-decoration: none; transition: border-color .25s ease, background .25s ease; } .ap2-ct-ask:hover { border-color: rgba(221, 110, 62, 0.55); background: rgba(221, 110, 62, 0.06); } .ap2-ct-ask svg { color: currentColor; flex-shrink: 0; } .ap2-ct-ask.is-in svg { color: #0A66C2; } @media (max-width: 720px) { } .ap2-cs-formband { margin-top: clamp(16px, 1.8vw, 26px); scroll-margin-top: 84px; } .ap2-cs-formband .ap2-ct-card { border-radius: 6px; padding: clamp(22px, 2.6vw, 34px); background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(23, 27, 46, 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 1px 2px -1px rgba(23, 27, 46, 0.10); margin-top: 0; } .ap2-pg-field { width: 100%; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 16.4px; font-weight: 450; line-height: 1.5; color: #0B0B0C; background: #fff; border: 1px solid rgba(11, 11, 12, 0.16); border-radius: 4px; padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .ap2-pg-field::placeholder { color: rgba(11,11,12,0.739); } .ap2-pg-field:hover { border-color: rgba(11,11,12,0.22); background: rgba(255,255,255,0.9); } .ap2-pg-field:focus { outline: none; border-color: #DD6E3E; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(221,110,62,0.16), inset 0 1px 0 rgba(255,255,255,0.9); } .ap2-pg-field.is-bad { border-color: #C4543A; background: rgba(253,246,244,0.92); } .ap2-pg-field.is-bad:focus { box-shadow: 0 0 0 3px rgba(196,84,58,0.20); } .ap2-pg-label { display: block; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 12.9px; font-weight: 620; letter-spacing: 0.045em; text-transform: uppercase; color: rgba(11,11,12,0.829); margin-block-end: 8px; } .ap2-pg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 700px) { .ap2-pg-grid { grid-template-columns: 1fr; } } .ap2-pg-submit[aria-busy='true'] { opacity: 0.72; cursor: progress; } .ap2-bk { border: 1px solid rgba(23, 27, 46, 0.13); border-radius: 6px; background: #fff; padding: clamp(20px, 2vw, 28px); box-shadow: 0 1px 2px -1px rgba(23, 27, 46, 0.11); min-height: 660px; } @media (min-width: 1000px) { .ap2-bk { min-height: 0; } .ap2-bk-whenbody { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(24px, 2.6vw, 40px); align-items: start; } .ap2-bk-cal { grid-column: 1; } .ap2-bk-slots { grid-column: 2; margin-top: 0; align-self: start; } .ap2-bk-bands { max-height: 344px; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%); } } .ap2-bk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ap2-bk-kicker { font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.4px; font-weight: 660; letter-spacing: 0.15em; text-transform: uppercase; color: #B7521F; } .ap2-bk-dur { font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.4px; font-weight: 620; letter-spacing: 0.08em; color: rgba(11,11,12,0.847); border: 1px solid rgba(11, 11, 12, 0.14); border-radius: 4px; padding: 3px 8px 2px; } .ap2-bk-h { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: clamp(21px, 1.8vw, 27px); font-weight: 700; letter-spacing: -0.022em; line-height: 1.12; color: #0B0B0C; margin: 13px 0 0; } .ap2-bk-p { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 15.6px; font-weight: 450; line-height: 1.55; color: rgba(11,11,12,0.901); margin: 9px 0 0; max-width: 46ch; } .ap2-bk-cal { margin-top: clamp(12px, 1.3vw, 16px); } .ap2-bk-month { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(11, 11, 12, 0.12); } .ap2-bk-month > b { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 16.8px; font-weight: 650; letter-spacing: -0.012em; color: #0B0B0C; text-transform: capitalize; } .ap2-bk-arrows { display: inline-flex; gap: 6px; } .ap2-bk-arrows button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(11, 11, 12, 0.16); border-radius: 4px; background: #fff; color: rgba(11,11,12,0.919); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .ap2-bk-arrows button:hover:not(:disabled) { background: #F4F3F0; border-color: rgba(11, 11, 12, 0.3); } .ap2-bk-arrows button:disabled { opacity: 0.34; cursor: default; } .ap2-bk-heads, .ap2-bk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .ap2-bk-heads { margin-top: 10px; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 11.9px; font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(11,11,12,0.775); } .ap2-bk-heads > span { text-align: center; padding-bottom: 7px; } .ap2-bk-grid { gap: 1px; background: rgba(11, 11, 12, 0.10); border: 1px solid rgba(11, 11, 12, 0.10); } .ap2-bk-day { aspect-ratio: auto; height: 38px; min-height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.86); font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 13.8px; font-weight: 560; color: #0B0B0C; cursor: pointer; transition: background .18s ease, color .18s ease; } .ap2-bk-day:hover:not(:disabled) { background: #FBEEE7; } .ap2-bk-day.is-out { color: rgba(11,11,12,0.739); } .ap2-bk-day:disabled { color: rgba(11, 11, 12, 0.24); background: rgba(252, 252, 251, 0.7); cursor: default; } .ap2-bk-day.is-on { background: #B7521F; color: #fff; font-weight: 680; } .ap2-bk-day.is-on:hover { background: #A4471B; } .ap2-bk-slots { margin-top: clamp(12px, 1.3vw, 16px); } .ap2-bk-sub { margin: 0; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.1px; font-weight: 620; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(11,11,12,0.829); } .ap2-bk-hint { margin: 10px 0 0; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 14.8px; font-weight: 450; color: rgba(11,11,12,0.829); } .ap2-bk-bands { margin-top: 10px; max-height: clamp(200px, 30vh, 320px); overflow-y: auto; padding-inline-end: 4px; overscroll-behavior: contain; } .ap2-bk-band + .ap2-bk-band { margin-top: 12px; } .ap2-bk-bandh { margin: 0; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 12.4px; font-weight: 600; color: rgba(11,11,12,0.793); } .ap2-bk-times { margin-top: 7px; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; } .ap2-bk-time { padding: 9px 6px; border: 1px solid rgba(11, 11, 12, 0.16); border-radius: 4px; background: #fff; font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 13.8px; font-weight: 600; color: #0B0B0C; cursor: pointer; font-variant-numeric: tabular-nums; transition: background .18s ease, border-color .18s ease, color .18s ease; } .ap2-bk-time:hover { border-color: rgba(221, 110, 62, 0.7); background: #FBEEE7; } .ap2-bk-time.is-on { background: #0B0B0C; border-color: #0B0B0C; color: #fff; } .ap2-bk-tz { margin: 11px 0 0; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 13.4px; font-weight: 450; color: rgba(11,11,12,0.802); } .ap2-bk-form { margin-top: clamp(15px, 1.6vw, 20px); padding-top: clamp(15px, 1.6vw, 20px); border-top: 1px solid rgba(11, 11, 12, 0.12); } .ap2-bk-when { margin-top: clamp(16px, 1.7vw, 22px); padding-top: clamp(14px, 1.5vw, 18px); border-top: 1px dashed rgba(11, 11, 12, 0.18); } .ap2-bk-whenhead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; } .ap2-bk-whenh { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; text-transform: none; line-height: 1.3; color: #0B0B0C; } .ap2-bk-opt { font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 11.8px; font-weight: 660; letter-spacing: 0.1em; text-transform: uppercase; color: #9E3B22; background: #FBEEE6; border: 1px solid #F5CDB6; border-radius: 999px; padding: 4px 10px 3px; } .ap2-bk-optnote { margin: 8px 0 0; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 14.4px; font-weight: 500; line-height: 1.5; color: rgba(11, 11, 12, 0.78); } .ap2-bk-whenhead .ap2-bk-dur { margin-inline-start: auto; } .ap2-bk-whenbody .ap2-bk-cal { margin-top: clamp(12px, 1.3vw, 16px); } .ap2-bk-toggle { display: none; } @media (max-width: 700px) { .ap2-bk-toggle { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 4px; padding: 10px 14px; border: 1px solid rgba(11, 11, 12, 0.2); border-radius: 4px; background: #fff; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 15px; font-weight: 620; color: #0B0B0C; cursor: pointer; } .ap2-bk-toggle:hover { background: #F4F3F0; border-color: rgba(11, 11, 12, 0.34); } .ap2-bk-when:not(.is-open) .ap2-bk-whenbody { display: none; } } .ap2-bk-vh { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .ap2-bk.is-follow { min-height: 0; } .ap2-bk.is-follow .ap2-bk-form { margin-top: 0; padding-top: 0; border-top: 0; } .ap2-bk-when.is-follow { margin-top: 12px; padding-top: 0; border-top: 0; } .ap2-bk-as { margin: 0; padding: 10px 13px; background: #F7F6F2; border: 1px solid rgba(11, 11, 12, 0.1); border-radius: 4px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 14.6px; font-weight: 500; line-height: 1.5; color: rgba(11, 11, 12, 0.874); overflow-wrap: anywhere; } .ap2-bk-trap { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .ap2-bk-chosen { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 13px; padding: 10px 13px; border: 1px solid rgba(221, 110, 62, 0.34); border-inline-start: 2px solid #DD6E3E; border-radius: 4px; background: #FDF5F0; } .ap2-bk-chosen > b { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 15.4px; font-weight: 650; color: #0B0B0C; } .ap2-bk-chosen > span { font-family: 'JetBrains Mono AP2', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 14.2px; font-weight: 620; color: #B7521F; font-variant-numeric: tabular-nums; } .ap2-bk-form > .ap2-bk-chosen { margin: 14px 0 0; } .ap2-bk-x { margin-inline-start: auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(183, 82, 31, 0.32); border-radius: 4px; background: #fff; color: #B7521F; cursor: pointer; transition: background .18s ease, border-color .18s ease; } .ap2-bk-x:hover { background: #FBEEE7; border-color: rgba(183, 82, 31, 0.6); color: #A4471B; } .ap2-bk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ap2-bk-err { margin: 12px 0 0; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 14.2px; font-weight: 550; color: #B3261E; } .ap2-bk-go { margin-top: 14px; width: 100%; padding: 13px 18px; border: 1px solid #B7521F; border-radius: 4px; background: #B7521F; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 16.2px; font-weight: 640; color: #fff; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .ap2-bk-go:hover:not(:disabled) { background: #A4471B; border-color: #A4471B; } .ap2-bk-go:disabled { opacity: 0.62; cursor: default; } .ap2-bk-done { display: grid; gap: 13px; align-content: start; } .ap2-bk-quiet { padding: 11px 18px; border: 1px solid rgba(11, 11, 12, 0.2); border-radius: 4px; background: #fff; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 14.6px; font-weight: 600; color: rgba(11,11,12,0.874); cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } .ap2-bk-quiet:hover:not(:disabled) { background: #F4F3F0; color: #0B0B0C; border-color: rgba(11, 11, 12, 0.34); } .ap2-bk-quiet:disabled { opacity: 0.55; cursor: default; } .ap2-bk-join { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 10px 16px; border-radius: 4px; background: #EAF5EE; border: 1px solid #BFDECB; color: #1B5E3A; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 14.8px; font-weight: 620; text-decoration: none; } .ap2-bk-join:hover { background: #DDEEE4; border-color: #9CCBB0; } .ap2-bk-moving { margin: 9px 0 0; padding: 10px 13px; background: #FBEEE7; border: 1px solid rgba(221, 110, 62, 0.36); border-radius: 4px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 14.6px; font-weight: 500; line-height: 1.5; color: #7A3A18; } .ap2-ty { max-width: 880px; } .ap2-ty > p, .ap2-ty-sooner > p { max-width: 62ch; } .ap2-ty-sooner { margin-top: clamp(30px, 3.4vw, 48px); padding-top: clamp(24px, 2.6vw, 36px); border-top: 1px solid rgba(11, 11, 12, 0.12); } .ap2-ty-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(22px, 2.4vw, 32px); } .ap2-ty-go { width: auto; margin-top: 0; display: inline-flex; align-items: center; text-decoration: none; } .ap2-bk-done .ap2-link, .ap2-ty-links .ap2-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(183, 82, 31, 0.55); } .ap2-bk-done .ap2-link::after, .ap2-ty-links .ap2-link::after { display: none; } .ap2-bk-privacy { display: block; margin-top: 12px; font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', sans-serif; font-size: 13.6px; font-weight: 450; line-height: 1.6; color: rgba(11, 11, 12, 0.66); } @media (max-width: 1080px) { .ap2-pg .ap2-ct-two { grid-template-columns: minmax(0, 1fr); } .ap2-ct-two > .ap2-ct-right { order: -1; } .ap2-bk { min-height: 0; } } @media (max-width: 620px) { .ap2-pg .ap2-ct-offices { grid-template-columns: minmax(0, 1fr); } .ap2-pg .ap2-ct-photo { height: auto; aspect-ratio: 16 / 9; } .ap2-pg .ap2-ct-base-people .ap2-ct-people { grid-template-columns: minmax(0, 1fr); } .ap2-pg .ap2-ct-people > .ap2-ct-person:nth-child(2n) { border-inline-start: 0; padding-inline-start: 0; } .ap2-pg .ap2-ct-people > .ap2-ct-person:nth-child(2n+1) { padding-inline-end: 0; } .ap2-pg .ap2-ct-people > .ap2-ct-person:nth-child(n+2) { border-block-start: 1px solid rgba(11, 11, 12, 0.09); padding-block-start: 22px; margin-block-start: 22px; } .ap2-bk-fields { grid-template-columns: minmax(0, 1fr); } .ap2-bk-day { height: 36px; min-height: 36px; font-size: 13.6px; } } [lang="ar"] .ap2-rp-pill, [lang="ar"] .ap2-quote-who figcaption b, [lang="ar"] .ap2-quote-who figcaption span, [lang="ar"] .ap2-phase-ghost, [lang="ar"] .ap2-rp-key li, [lang="ar"] .ap2-slk-say, [lang="ar"] .ap2-slk-stt, [lang="ar"] .ap2-slk-who, [lang="ar"] .ap2-slk-bub, [lang="ar"] .ap2-slk-closetxt, [lang="ar"] .ap2-person__id, [lang="ar"] .ap2-person__stack { font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Plus Jakarta Sans Fallback Roboto', 'Noto Sans Arabic', 'Geeza Pro', 'SF Arabic', 'Segoe UI', Tahoma, 'Arial Unicode MS', sans-serif; } [lang="ar"], [lang="ar"] * { letter-spacing: normal !important; word-spacing: normal !important; } [lang="ar"] { line-height: 1.75; } .ap2-ltr, [lang="ar"] .ap2-person__name, [lang="ar"] .ap2-person__stack, [lang="ar"] .ap2-slk-who, [lang="ar"] .ap2-eg-id, [lang="ar"] .ap2-rp-path, [lang="ar"] .ap2-quote-who figcaption b { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .ap2-nudge-arrow, [dir="rtl"] .ap2-pledge-arc, [dir="rtl"] .ap2-rp-arrow { transform: scaleX(-1); } [dir="rtl"] .ap2-spine-fill, [dir="rtl"] .ap2-cc-fill { transform-origin: right center; background-image: linear-gradient(to left, #4A82AC, #B9873F 52%, #DD6E3E); } [dir="rtl"] .ap2-rp-figbody, [dir="rtl"] .ap2-rp-figbody svg, [dir="rtl"] .ap2-rp-donut, [dir="rtl"] .ap2-rp-donut svg { direction: ltr; } [dir="rtl"] .ap2-hs, [dir="rtl"] .ap2-heroscene, [dir="rtl"] .ap2-scene, [dir="rtl"] .ap2-ox-stage { direction: ltr; } [dir="rtl"] .ap2-hs [lang], [dir="rtl"] .ap2-heroscene .ap2-pledge, [dir="rtl"] .ap2-heroscene figcaption { direction: rtl; } [dir="rtl"] .ap2-litground { transform: scaleX(-1); } [dir="rtl"] .ap2-rw-stat + .ap2-rw-stat { box-shadow: inset -1px 0 0 rgba(15,23,31,0.10); } [data-live="0"] .ap2-close-gust, [data-live="0"] .ap2-close-bird, [data-live="0"] .ap2-close-bird::before, [data-live="0"] .ap2-close-grass, [data-live="0"] .ap2-close-mote, [data-live="0"] .ap2-close-light, [data-live="0"] .ap2-close-leaf, [data-live="0"] .ap2-ox-glow, [data-live="0"] .ap2-ox-hand, [data-live="0"] .ap2-ox-flag, [data-live="0"] .ap2-ox-lit, [data-live="0"] .ap2-ox-tree, [data-live="0"] .ap2-ox-refl, [data-live="0"] .ap2-ox-glint, [data-live="0"] .ap2-ox-punt, [data-live="0"] .ap2-ox-bob, [data-live="0"] .ap2-ox-pole, [data-live="0"] .ap2-ox-swan, [data-live="0"] .ap2-ox-cloud, [data-live="0"] .ap2-ox-ray, [data-live="0"] .ap2-ox-shade, [data-live="0"] .ap2-ox-sweep, [data-live="0"] .ap2-ox-eight, [data-live="0"] .ap2-ox-oars, [data-live="0"] .ap2-ox-daw, [data-live="0"] .ap2-ox-wing, [data-live="0"] .ap2-ox-cyclist, [data-live="0"] .ap2-cmp-dial, [data-live="0"] .ap2-cmp-hand, [data-live="0"] .ap2-cmp-in, [data-live="0"] .ap2-cmw-walk, [data-live="0"] .ap2-cmw-tick, [data-live="0"] .ap2-cmr-orbit, [data-live="0"] .ap2-cml-turn, [data-live="0"] .ap2-pick, [data-live="0"] .ap2-pick::after, [data-live="0"] .ap2-ob-dashring, [data-live="0"] .ap2-rpn-p, [data-live="0"] .ap2-rpn-slot, [data-live="0"] .ap2-rpn-plus, [data-live="0"] .ap2-hs-clouds, [data-live="0"] .ap2-hs-sun::before, [data-live="0"] .ap2-hs-sun::after, [data-live="0"] .ap2-md-leaf, [data-live="0"] .ap2-md-leaf > i, [data-live="0"] .ap2-md-wind, [data-live="0"] .ap2-md-warm, [data-live="0"] .ap2-hs-petal, [data-live="0"] .ap2-hs-gust, [data-live="0"] .ap2-lk-fly, [data-live="0"] .ap2-lk-ring, [data-live="0"] .ap2-lk-mist, [data-live="0"] .ap2-lk-star, [data-live="0"] .ap2-tr-sheen, [data-live="0"] .ap2-tr-fly, [data-live="0"] .ap2-tr-fly::after, [data-live="0"] .ap2-tr-spill, [data-live="0"] .ap2-lk-lamp::before, [data-live="0"] .ap2-lk-lamp::after, [data-live="0"] .ap2-st-lattice, [data-live="0"] .ap2-st-mote, [data-live="0"] .ap2-st-arc, [data-live="0"] .ap2-st-orbit, [data-live="0"] .ap2-prz-field, [data-live="0"] .ap2-prz-mark.is-turning svg, [data-live="0"] .ap2-prz-glass, [data-live="0"] .ap2-prz-beam, [data-live="0"] .ap2-prz-fan, [data-live="0"] .ap2-prz-band, [data-live="0"] .ap2-prz-halo, [data-live="0"] .ap2-prz-caustic, [data-live="0"] .ap2-prz-bow, [data-live="0"] .ap2-prz-rain, [data-live="0"] .ap2-cr-w, [data-live="0"] .ap2-cr-bloom, [data-live="0"] .ap2-cr-sweep, [data-live="0"] .ap2-cr-mote, [data-live="0"] .ap2-cr-crest, [data-live="0"] .ap2-cr-deep, [data-live="0"] .ap2-cr-horizon, [data-live="0"] .ap2-cr-spark, [data-live="0"] .ap2-st-trace, [data-live="0"] .ap2-st-pt, [data-live="0"] .ap2-st-dim, [data-live="0"] .ap2-st-lead, [data-live="0"] .ap2-st-area, [data-live="0"] .ap2-scene-clouds, [data-live="0"] .ap2-scene-birds, [data-live="0"] .ap2-scene-sun::before, [data-live="0"] .ap2-ticker-run, [data-live="0"] .ap2-cf-b1, [data-live="0"] .ap2-cf-b2, [data-live="0"] .ap2-cf-b3, [data-live="0"] .ap2-cf-grid, [data-live="0"] .ap2-cf-sweep, [data-live="0"] .ap2-cf-noise, [data-live="0"] .ap2-cf-scan, [data-live="0"] .ap2-cf-bar i, [data-live="0"] .ap2-eg-live, [data-live="0"] .ap2-rp-live i, [data-live="0"] .ap2-rp-stamp i, [data-live="0"] .ap2-cn-cover, [data-live="0"] .ap2-cn-glow, [data-live="0"] .ap2-cn-halo, [data-live="0"] .ap2-cn-lift, [data-live="0"] .ap2-cn-mote, [data-live="0"] .ap2-cn-ring, [data-live="0"] .ap2-ln-disc, [data-live="0"] .ap2-ln-lift, [data-live="0"] .ap2-ln-ring, [data-live="0"] .ap2-ln-stage, [data-live="0"] .ap2-ln-stage::before, [data-live="0"] .ap2-ln-stage::after, [data-live="0"] .ap2-hs-h1 .ap2-sr.is-em .ap2-sr-clip, [data-live="0"] .ap2-hs-fl, [data-live="0"] .ap2-hs-in, [data-live="0"] .ap2-seam-rail i, [data-live="0"] .ap2-beam::before, [data-live="0"] .ap2-close-chat-dot, [data-live="0"] .ap2-close-chat-dots i, [data-live="0"] .ap2-close-chat::after, [data-live="0"] .ap2-cmfig--ledger.is-in .ap2-cml-caret, [data-live="0"] .ap2-cmfig--pulse.is-in .ap2-fig-dot, [data-live="0"] .ap2-cmfig--ring.is-in .ap2-fig-dot, [data-live="0"] .ap2-cmfig--week.is-in .ap2-fig-tick, [data-live="0"] .ap2-type-at::after, [data-live="0"] .ap2-hs.is-lens::before, [data-live="0"] .ap2-hs.is-lens::after, [data-live="0"] .ap2-ln-lift::after, [data-live="0"] .ap2-ln-lift::before, [data-live="0"] .ap2-ln-disc::before, [data-live="0"] .ap2-ln-disc::after, [data-live="0"] .ap2-ovb-ph-ox, [data-live="0"] .ap2-ovb-ph-an, [data-live="0"] .ap2-ovb-ph-run, [data-live="0"] .ap2-ovb-ph-draw, [data-live="0"] .ap2-ovb-ph-sheen, [data-live="0"] .ap2-silk-ribbon.is-warm, [data-live="0"] .ap2-silk-ribbon.is-violet, [data-live="0"] .ap2-silk-ribbon.is-cool, [data-live="0"] .ap2-silk-spark { animation-play-state: paused; }