@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; 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: "Inter"; src: url("assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; 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; } :root { --bar-h: 68px; --bar-h-float: 60px; --hdr-h: calc(var(--bar-h) + var(--panel-inset)); --bar-max: 1280px; --blue: #24abff; --blue-ink: #24abff; --on-blue: #ffffff; --page: #f5f5f7; --card: #ffffff; --card-inner: #ffffff; --panel: #ebebed; --canvas: var(--page); --bg: var(--card); --surface: var(--card-inner); --surface-2: var(--card); --ink: #000000; --ink-head: #121212; --ink-2: #333333; --muted: #727272; --grey: #9f9f9f; --line: #e3e3e3; --line-strong: #cfcfcf; --navy: #000000; --sky: #ffffff; --on-navy: #ffffff; --on-navy-2: #9f9f9f; --dark-card: #121212; --dark-hover: #1d1d1f; --success: #12924f; --danger: #dd1122; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --fs-display: clamp(2.125rem, 1.2rem + 3.4vw, 4rem); --fs-h1: clamp(2.125rem, 1.2rem + 3.4vw, 4rem); --fs-h2: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem); --fs-h3: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); --fs-tile: 1.25rem; --fs-lead: 1.125rem; --fs-body: 1rem; --fs-eyebrow: 1.125rem; --fs-small: .875rem; --lh-heading: 1.15; --lh-title: 1.25; --lh-tile: 1.3; --lh-lead: 1.556; --lh-text: 1.625; --gap-head: var(--s7); --gap-cards: var(--s4); --gap-foot: var(--s5); --card-pad: var(--s6); --gap-label: var(--s2); --gap-text: var(--s3); --gap-action: var(--s5); --fs-micro: .75rem; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --section: clamp(64px, 5vw + 40px, 112px); --panel-inset: clamp(12px, 2.5vw, 32px); --gutter-in: clamp(20px, 3.4vw, 48px); --gutter: calc(var(--gutter-in) + var(--panel-inset)); --max: 1440px; --panel-max: calc(var(--max) + 2 * var(--gutter-in)); --panel-side: max(var(--panel-inset), (100% - var(--panel-max)) / 2); --glass-light: rgb(255 255 255 / .8); --glass-dark: rgb(18 18 18 / .55); --glass-blur: blur(20px) saturate(1.8); --r-card: 20px; --r-input: 10px; --r-tile: 10px; --r-pill: 20px; --r-label: 6px; --h-btn: 44px; --h-btn-sm: 36px; --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --shadow-1: 0 1px 2px rgb(0 0 0 / .05); --shadow-2: 0 2px 6px rgb(0 0 0 / .05), 0 16px 40px rgb(0 0 0 / .08); --shadow-lift: 0 2px 6px rgb(0 0 0 / .04), 0 14px 32px -8px rgb(0 0 0 / .10); --shadow-device: 0 24px 48px -18px rgb(0 0 0 / .28), 0 10px 20px -10px rgb(0 0 0 / .18); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --t-fast: 160ms; --t-base: 280ms; --t-slow: 600ms; --t-bar: 500ms; --ease-bar: cubic-bezier(.4, 0, .2, 1); --t-zoom: 900ms; --t-lift: 500ms; --t-crossfade: 1400ms; --t-drift: 6s; --ease-soft: cubic-bezier(.25, .8, .25, 1); color-scheme: light; } [data-bg="light"], [data-bg="white"], [data-bg="grey"], [data-bg="tint"], [data-tone="light"], [data-tone="white"], [data-tone="grey"], [data-tone="tint"] { --canvas: var(--page); --bg: var(--card); --surface: var(--card-inner); --surface-2: var(--card); --ink: #000000; --ink-head: #121212; --ink-2: #333333; --muted: #727272; --line: #e3e3e3; --line-strong: #cfcfcf; --sky: #ffffff; --navy: #000000; color-scheme: light; } [data-bg="white"] { --canvas: var(--page); } [data-bg="grey"] { --canvas: var(--panel); } [data-bg="tint"] { --canvas: #ebf6ff; } [data-bg="black"], [data-tone="black"] { --canvas: #000000; --bg: #121212; --surface: #1d1d1f; --surface-2: #1d1d1f; --ink: #ffffff; --ink-head: #ffffff; --ink-2: #cfcfcf; --muted: #9f9f9f; --line: #262626; --line-strong: #373737; --sky: #121212; --navy: #121212; color-scheme: dark; } [data-bg] { background: var(--canvas); color: var(--ink); } [data-bg="black"] { --bg: #1d1d1f; --surface: #262626; } [data-bg="black"] :is(.link, h1, h2, h3, .quote) { color: #fff; } main > [data-section$="/hero"] { --inset: var(--panel-inset); --gutter: var(--gutter-in); margin: calc(var(--inset) - var(--hdr-h)) var(--panel-side) var(--s6); border-top: calc(var(--hdr-h) - var(--inset)) solid transparent; border-radius: calc(var(--r-card) + 16px); } @media (max-width: 600px) { main > [data-section$="/hero"] { border-radius: calc(var(--r-tile) + 4px); } } main > [data-section$="/hero"][data-menu="above"] { margin-top: var(--s2); border-top: 0; } .section--panel { --gutter: var(--gutter-in); margin-inline: var(--panel-side); border-radius: var(--r-card); } .section--panel + .section--panel { margin-top: var(--s3); } @media (max-width: 600px) { :root { --card-pad: var(--s5); --panel-inset: var(--s3); --gutter-in: 16px; } } @media (max-width: 600px) { .section--panel { border-radius: var(--r-tile); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-text); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--blue); color: #fff; } .container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: none; } :is(.review__body, .stage__caption) { --ink: #000000; --ink-head: #121212; --ink-2: #333333; --muted: #727272; color: var(--ink); } [data-bg] :is(.review__body, .stage__caption) :is(.link, h2, h3) { color: var(--ink-head); } .section { padding-block: var(--section); } .section--tint { background: var(--canvas); } .section--sky > .container { background: var(--bg); border-radius: var(--r-card); padding: clamp(28px, 4vw, 64px); width: auto; margin-inline: var(--gutter); } @media (min-width: 1505px) { .section--sky > .container { margin-inline: auto; max-width: var(--max); } } .section--navy { background: var(--navy); color: var(--on-navy); } .section--navy .text-2, .section--navy .lead { color: var(--on-navy-2); } .section--navy .h1, .section--navy .h2, .section--navy .h3, .section--navy .display { color: #fff; } .nowrap { white-space: nowrap; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .display, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -.025em; line-height: 1.09; margin: 0; text-wrap: balance; color: inherit; } .display { font-size: var(--fs-display); line-height: 1.09; } .h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -.02em; } @media (max-width: 600px) { .tile__body > .h2 { font-size: 1.75rem; line-height: 1.2; } } .h3 { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: var(--lh-title); } .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: 52ch; margin: 0; text-wrap: pretty; } .text { max-width: 62ch; margin: 0; text-wrap: pretty; } .chapter { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -.02em; max-width: 26ch; margin: 0 0 var(--gap-head); text-wrap: balance; color: inherit; } .chapter span { color: var(--muted); } .chapter--center { margin-inline: auto; text-align: center; } .chapter:has(+ .lead) { margin-bottom: var(--s4); } .chapter + .lead { margin-bottom: var(--gap-head); } .section-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--gap-foot); } .section-foot .carousel__nav { margin: 0 0 0 auto; padding: 0; } .muted { color: var(--muted); } .small { font-size: var(--fs-small); } .label, .eyebrow { font-size: var(--fs-eyebrow); line-height: 1.33; font-weight: 500; color: var(--muted); margin: 0; } .stack > * + * { margin-top: var(--s4); } .mark { color: var(--blue); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-btn); padding: 0 20px; line-height: 1; border-radius: var(--r-pill); border: 0; font-weight: 500; font-size: 1rem; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } .btn:active { transform: translateY(1px) scale(.985); } .btn--primary { background: var(--blue); color: var(--on-blue); } .btn--primary:hover { background: #0f9ef5; } .btn--secondary { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); } .btn--secondary:hover { background: rgb(36 171 255 / .1); } .btn--on-navy { background: var(--blue); color: #fff; } .btn--sm { height: var(--h-btn-sm); padding: 0 16px; font-size: .9375rem; } .btn .arrow, .link::after { width: 16px; height: 16px; flex: none; font-size: 0; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; } .btn .arrow { transition: transform var(--t-base) var(--ease-out); } .btn:hover .arrow { transform: translateX(3px); } .btn--light { background: #fff; color: #121212; } .btn--light:hover { background: #ededed; } .link { color: var(--ink-head); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .link::after { content: ""; color: var(--blue); transition: transform var(--t-base) var(--ease-out); } .link:hover::after { transform: translateX(3px); } .link:hover { text-decoration: underline; text-underline-offset: 4px; } .section--navy .link { color: #fff; } .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); } .chip { display: inline-flex; align-items: center; gap: 8px; height: var(--h-btn-sm); padding: 0 14px; border-radius: var(--r-pill); border: 0; background: var(--bg); color: var(--ink); font-size: .9375rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--t-base), box-shadow var(--t-base), color var(--t-base); } .chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); } .chip[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: none; } .badge-new { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-label); background: var(--blue); color: #fff; font-size: var(--fs-micro); font-weight: 600; line-height: 1; letter-spacing: .01em; } .live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-head); } .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgb(36 171 255 / .5); animation: live 2s var(--ease-out) infinite; } @keyframes live { 0% { box-shadow: 0 0 0 0 rgb(36 171 255 / .55); } 100% { box-shadow: 0 0 0 10px rgb(36 171 255 / 0); } } .flow-map-wrap { padding-block: 0; } .flow-map { background: var(--bg); border-radius: var(--r-card); padding: var(--s5) clamp(20px, 2.5vw, 32px); } .flow-map__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; margin-bottom: var(--s5); } .flow-map__label { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); } .flow-map__label b { color: var(--ink-head); font-weight: 600; } .flow-map .link { font-size: var(--fs-small); } .flow-map__groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); } .flow-map__group { position: relative; padding: 22px var(--s4) 0 0; } .flow-map__group::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; border-top: 1px solid var(--line-strong); } .flow-map__group:last-child::before { right: auto; width: 9px; } .flow-map__group::after { content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); } .flow-map__group.is-here::after { background: var(--blue); box-shadow: 0 0 0 4px rgb(36 171 255 / .18); } .flow-map__name { display: block; text-decoration: none; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--muted); } .flow-map__group.is-here .flow-map__name { color: var(--ink-head); } a.flow-map__name:hover { color: var(--ink-head); } .flow-map__items { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); } .flow-map__items :is(a, [aria-current]) { text-decoration: none; white-space: nowrap; } .flow-map__items a:hover { color: var(--ink-head); text-decoration: underline; text-underline-offset: 3px; } .flow-map__items [aria-current] { color: var(--ink-head); font-weight: 600; } .flow-map__items .sep { opacity: .6; } @media (max-width: 900px) { .flow-map__groups { grid-template-columns: 1fr; } .flow-map__group { display: grid; grid-template-columns: 9.5rem 1fr; gap: 2px var(--s4); padding: 0 0 var(--s4) 26px; } .flow-map__group:last-child { padding-bottom: 0; } .flow-map__group::before { top: 10px; bottom: -10px; left: 4px; right: auto; border-top: 0; border-left: 1px solid var(--line-strong); } .flow-map__group:last-child::before { display: none; } .flow-map__group::after { top: 6px; } .flow-map__items { margin: 0; } } @media (max-width: 600px) { .flow-map { border-radius: var(--r-tile); } .flow-map__group { grid-template-columns: 1fr; } } .flow-map--feature { padding: 0; background: none; border-radius: 0; } .flow-map__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-cards); } .flow-map__card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); } .flow-map--feature .flow-map__name { font-size: var(--fs-tile); line-height: var(--lh-tile); color: var(--ink-head); text-decoration: none; } .flow-map--feature a.flow-map__name:hover { text-decoration: underline; text-underline-offset: 4px; } .flow-map__desc { margin: var(--gap-text) 0 0; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); } .flow-map__products { align-self: start; list-style: none; margin: var(--gap-action) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line-strong); display: grid; gap: var(--s2); font-size: .9375rem; line-height: var(--lh-tile); } .flow-map__products :is(a, span) { color: var(--ink-head); text-decoration: none; } .flow-map__products a:hover { color: var(--ink-head); text-decoration: underline; text-underline-offset: 3px; } .flow-map__card.is-here { box-shadow: 0 2px 6px rgb(0 0 0 / .06), 0 16px 40px -8px rgb(0 0 0 / .14); } .flow-map__products [aria-current="page"] { position: relative; font-weight: 600; } .flow-map__products [aria-current="page"]::before { content: ""; position: absolute; top: 50%; left: -14px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--blue); } .flow-map__foot { margin: var(--gap-foot) 0 0; } @media (max-width: 1080px) { .flow-map__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-map__card:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 600px) { .flow-map__cards { grid-template-columns: 1fr; gap: var(--s2); } .flow-map__card { border-radius: var(--r-tile); } .flow-map__products { margin-top: var(--s4); padding-top: var(--s3); } } .site-header { position: sticky; top: 0; z-index: 50; height: var(--hdr-h); padding-top: var(--panel-inset); color: var(--ink); transition: color var(--t-bar) var(--ease-bar), padding var(--t-bar) var(--ease-bar); } .site-header__bar { height: var(--bar-h); max-width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s5); border: 1px solid transparent; box-shadow: 0 8px 24px rgb(0 0 0 / 0); -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); transition-property: height, width, max-width, margin, padding, border-radius, background-color, border-color, box-shadow, -webkit-backdrop-filter, backdrop-filter; transition-duration: var(--t-bar); transition-timing-function: var(--ease-bar); } .site-header.is-scrolled { color: var(--ink); pointer-events: none; padding-top: 10px; } .site-header.is-scrolled, .mega { --ink: #000000; --ink-2: #333333; --line: #e3e3e3; --line-strong: #cfcfcf; } .site-header.is-scrolled :is(.site-header__bar, .mega) { pointer-events: auto; } .site-header:not(.is-scrolled) .site-header__bar { max-width: calc(var(--panel-max) + 2 * var(--panel-inset)); margin-inline: auto; padding-inline: var(--gutter); } .site-header.is-scrolled .site-header__bar, .mega { width: calc(100% - 2 * var(--s3)); max-width: var(--bar-max); margin-inline: auto; border-radius: var(--r-card); } .site-header:not(.is-scrolled) .mega { max-width: var(--panel-max); } .site-header.is-scrolled .mega { width: 100%; } .site-header.is-scrolled .site-header__bar { height: var(--bar-h-float); padding-inline: var(--s4) 10px; background: var(--glass-light); border-color: var(--line); box-shadow: 0 8px 24px rgb(0 0 0 / .06); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .mega__inner.container { padding-inline: var(--s5); } .site-header__logo img { width: 50px; height: auto; } .nav { display: flex; gap: 4px; color: var(--ink-2); justify-self: start; transition: color var(--t-bar) var(--ease-bar); } .site-header.is-scrolled .nav { color: var(--ink-2); } .nav__item { background: none; border: 0; color: inherit; padding: 8px 14px; border-radius: var(--r-pill); font-weight: 500; font-size: .9375rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--t-fast), color var(--t-bar) var(--ease-bar); } .nav__item:hover, .nav__item[aria-expanded="true"], .nav__item[aria-current] { background: rgb(0 0 0 / .06); background: color-mix(in srgb, currentColor 10%, transparent); color: var(--ink); } .site-header.is-scrolled .nav__item:is(:hover, [aria-expanded="true"], [aria-current]) { color: var(--ink); } .nav__item .chev { width: 10px; height: 10px; transition: transform var(--t-base) var(--ease-out); } .nav__item[aria-expanded="true"] .chev { transform: rotate(180deg); } .site-header__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--s4); font-size: .9375rem; font-weight: 500; } .site-header__right a { text-decoration: none; } .lang { color: var(--grey); } .site-header__right .lang { color: var(--ink-2); } .lang-menu { position: relative; } .lang-menu__btn { color: var(--ink-2); } .lang-menu__list { position: absolute; right: 0; top: calc(100% + 10px); min-width: 180px; margin: 0; padding: 6px; list-style: none; border-radius: var(--r-card); background: #fff; color: #000; box-shadow: 0 24px 48px rgb(0 0 0 / .12); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base); } .lang-menu__list.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .lang-menu__list a { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 10px 12px; border-radius: var(--r-tile); font-weight: 500; transition: background-color var(--t-fast); } .lang-menu__list a:hover { background: #f5f5f7; } .lang-menu__list a span { font-size: var(--fs-small); color: var(--grey); } .lang-menu__list a[aria-current] { color: var(--blue); } .lang-menu__list a[aria-current] span { color: inherit; } .burger { display: none; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: transparent; color: inherit; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--t-bar) var(--ease-bar); } .site-header.is-scrolled .burger { border-color: var(--line-strong); } .mega { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--dark-card); color: #fff; box-shadow: 0 24px 48px rgb(0 0 0 / .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base); } .mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .mega__inner { padding-block: var(--s6) var(--s5); display: grid; grid-template-columns: repeat(5, 1fr) 1.35fr; gap: var(--s5); } :is(.mega__group, .mega__feature) h3 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin: 0 0 4px; } .mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .mega__link { display: flex; gap: 10px; align-items: center; padding: 8px; margin-inline: -8px; border-radius: var(--r-tile); text-decoration: none; transition: background-color var(--t-fast); } .mega__link:hover { background: var(--dark-hover); } .mega__link b { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.3; } .mega__link small { display: block; font-size: .8125rem; color: var(--grey); line-height: 1.35; } .mega__feature { background: var(--dark-hover); border-radius: var(--r-card); padding: var(--s4); display: grid; gap: var(--s3); align-content: start; } .mega__feature img { border-radius: var(--r-tile); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .mega__feature-title { margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.3; } .mega__feature .link { font-size: var(--fs-small); font-weight: 400; } .mega__foot { grid-column: 1 / -1; border-top: 1px solid #262626; padding-top: var(--s4); display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--grey); } .mega .link, .mega a { color: #fff; } .mega .h3 { color: #fff; } @media (min-width: 1081px) { .mega { overflow: hidden; background: #fff; color: var(--ink); box-shadow: 0 32px 64px rgb(0 0 0 / .16); } .mega a, .mega .link { color: var(--ink); } .mega__inner { padding-block: var(--s7) 0; gap: var(--s6) var(--s4); } .mega__inner:not(:has(.mega__foot)) { padding-bottom: var(--s7); } #mega-platform .mega__inner { grid-template-columns: repeat(6, minmax(0, 1fr)); } #mega-who .mega__inner { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr); } #mega-res .mega__inner { grid-template-columns: 1fr 1fr 2fr; } :is(.mega__group, .mega__feature) h3 { font-size: var(--fs-tile); font-weight: 700; line-height: var(--lh-tile); letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 0; } .mega__group h3 + .mega__list { margin-top: var(--s3); } .mega__list { gap: 2px; } .mega__link { align-items: flex-start; padding: 10px 12px; margin-inline: -12px; } .mega__link:hover { background: #f5f5f7; } .mega__link small { margin-top: 2px; color: var(--muted); } .mega__feature { background: none; border-radius: 0; padding: 0 0 0 var(--s4); border-left: 1px solid var(--line); } .mega__feature img { aspect-ratio: 4 / 3; } .mega__feature-title { text-wrap: balance; font-size: var(--fs-lead); font-weight: 600; line-height: var(--lh-tile); letter-spacing: -.01em; } .mega__feature .link { justify-self: start; white-space: nowrap; } .mega__foot { margin-inline: calc(-1 * var(--s5)); padding: var(--s4) var(--s5); border: 0; background: var(--panel); color: var(--ink-2); } .mega :is(.link, a, .h3) { color: var(--ink); } .mega__story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s5); align-items: center; padding: var(--s3); border-radius: var(--r-card); background: var(--page); text-decoration: none; transition: background-color var(--t-fast); } .mega__story:hover { background: var(--panel); } .mega__story img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-tile); } .mega__story > span { display: grid; gap: var(--gap-label); padding-right: var(--s3); } .mega__story small { font-size: var(--fs-small); color: var(--muted); } .mega__story b { font-size: var(--fs-lead); font-weight: 600; line-height: var(--lh-tile); letter-spacing: -.01em; text-wrap: balance; } .mega__story .link { margin-top: var(--s2); font-size: var(--fs-small); font-weight: 400; } .mega-scrim { position: fixed; inset: 0; z-index: 49; background: rgb(0 0 0 / .18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base); } .site-header:has(.mega.is-open) + .mega-scrim { opacity: 1; visibility: visible; transition-delay: 0s; } } @media (max-width: 1080px) { .mega-scrim, .mega__story { display: none; } } .site-footer { color: var(--muted); margin-bottom: var(--s3); padding-block: var(--s8) var(--s6); font-size: var(--fs-small); } @media (max-width: 600px) { .site-footer { margin-bottom: var(--s2); } } .site-footer { border-top: 1px solid transparent; } .site-footer a { text-decoration: none; } main:has(> .section--panel[data-bg="white"]:last-child) > .section--panel:last-child { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } main:has(> .section--panel[data-bg="white"]:last-child) + .site-footer { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; } .site-footer a:hover { color: var(--ink); } .site-footer__cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s6); } .site-footer h2 { font-size: var(--fs-small); color: var(--ink); margin: 0 0 var(--s4); font-weight: 600; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .site-footer__bottom { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between; color: var(--muted); } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; } .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-cards); } .bento > * { grid-column: span 2; } .bento .c3 { grid-column: span 3; } .bento .c4 { grid-column: span 4; } .bento .c6 { grid-column: span 6; } .bento .r2 { grid-row: span 2; } .tile { position: relative; display: flex; flex-direction: column; gap: var(--gap-text); padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; min-height: 220px; transition: transform var(--t-lift) var(--ease-soft), box-shadow var(--t-lift) var(--ease-soft); } a.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .tile--white { background: var(--bg); } .tile--sky { background: var(--sky); } .tile--navy { background: var(--dark-card); color: #fff; } .tile--navy .tile__title { color: #fff; } .tile--navy .link { color: #fff; } .tile__title { font-size: var(--fs-tile); font-weight: 600; letter-spacing: -.01em; line-height: var(--lh-tile); margin: 0; color: var(--ink-head); } .tile__text { margin: 0; color: var(--ink-2); max-width: 44ch; } .tile__media { margin-top: auto; border-radius: var(--r-tile); overflow: hidden; } .tile__media :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; } .tile--img-top .tile__media { margin-top: 0; order: -1; margin-bottom: var(--s2); } .tile--img-full { padding: 0; gap: 0; } .tile--img-full .tile__media { order: -1; margin: 0; border-radius: 0; aspect-ratio: 16 / 10; } .tile--img-full.r2 .tile__media { aspect-ratio: auto; flex: 1; min-height: 260px; } .tile--img-full .tile__body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--gap-text); } .tile--photo { padding: 0; min-height: 360px; background: #121212; color: #fff; } .tile--photo .tile__title { color: #fff; } .tile--photo .tile__media { position: absolute; inset: 0; margin: 0; border-radius: 0; z-index: -2; } .tile--photo .tile__media img { transition: transform var(--t-zoom) var(--ease-soft); } a.tile--photo:hover .tile__media img { transform: scale(1.03); } .tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .tile--photo.top::after { background: linear-gradient(180deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .28) 42%, transparent 68%); } .tile--photo.bottom { justify-content: flex-end; } .tile--photo.bottom::after { background: linear-gradient(0deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .28) 45%, transparent 70%); } .tile--photo .tile__body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--gap-text); max-width: 48ch; } .tile--photo .tile__text { color: rgb(255 255 255 / .86); } .bento--tidy .tile { background: var(--card); } .bento--tidy .tile--photo { min-height: min(460px, 90vw); } .bento--tidy .tile:not(.tile--photo) .tile__media { aspect-ratio: 16 / 9; margin-top: auto; } .bento--tidy .tile:not(.tile--photo) > .link { margin-top: auto; } .bento--tidy .tile__title .badge-new { margin-left: 6px; vertical-align: 3px; } .bento--tidy .tile--fill .tile__media { flex: 1; aspect-ratio: auto; min-height: 200px; position: relative; } .bento--tidy .tile--fill .tile__media img { position: absolute; inset: 0; } @media (max-width: 900px) { .tile:not(.tile--photo) .tile__media.tile__media--square { aspect-ratio: 1 / 1; } .tile__media--square img { object-fit: cover; object-position: 50% 50%; } } @media (max-width: 900px) { .bento--tidy .tile--fill .tile__media { flex: none; aspect-ratio: 16 / 9; } } .tile-slides { padding: 0; } .tile-slides__slide { position: absolute; inset: 0; display: flex; flex-direction: column; isolation: isolate; color: inherit; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity 0s var(--t-crossfade), visibility 0s var(--t-crossfade); } .tile-slides__slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity var(--t-crossfade) var(--ease-soft); } .tile-slides__slide .tile__media { position: absolute; inset: 0; z-index: -1; } .tile-slides__slide .tile__media img { scale: 1.05; transition: scale 0s var(--t-crossfade), transform var(--t-zoom) var(--ease-soft); } .tile-slides__slide.is-active .tile__media img { scale: 1; transition: scale var(--t-drift) var(--ease-out), transform var(--t-zoom) var(--ease-soft); } @media (prefers-reduced-motion: reduce) { .tile-slides__slide .tile__media img { scale: none; } } .tile-slides__slide:hover .tile__media img { transform: scale(1.03); } .tile-slides__slide::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .28) 42%, transparent 68%); } .tile-slides.tile--photo::after { content: none; } .tile-slides .photo-card__ph { inset: auto 0 45%; color: #9f9f9f; } .tile-slides__tabs:not(:focus-within) { clip-path: inset(50%); opacity: 0; } .tile-slides__tabs { position: absolute; left: 50%; bottom: var(--s4); z-index: 2; display: flex; align-items: center; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transform: translateX(-50%); } .tile-slides__tab { display: flex; align-items: center; height: 28px; padding: 0 5px; border: 0; background: none; cursor: pointer; } .tile-slides__bar { position: relative; width: 8px; height: 8px; border-radius: 4px; background: rgb(255 255 255 / .42); overflow: hidden; transition: width var(--t-base) var(--ease-out), background var(--t-base); } .tile-slides__tab:hover .tile-slides__bar { background: rgb(255 255 255 / .62); } .tile-slides__tab[aria-selected="true"] .tile-slides__bar { width: 32px; } .tile-slides__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left; } .tile-slides__tab[aria-selected="true"] .tile-slides__bar::after { transform: none; } .sense-media { background: var(--surface); } .sense-media img { object-position: 0 0; } .hero-media { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--surface); } .hero-media > img, .hero-media > video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-media--wide { aspect-ratio: 1584 / 720; } @media (max-width: 600px) { .hero-media--wide { aspect-ratio: 4 / 3; } } .media { border-radius: var(--r-card); overflow: hidden; background: var(--surface); } .media img { width: 100%; height: 100%; object-fit: cover; } .device { position: relative; background: #121212; box-shadow: var(--shadow-device); } .device img { width: 100%; height: 100%; object-fit: cover; } .device--tablet { border-radius: 22px; padding: 12px; aspect-ratio: 16 / 10; } .device--tablet img { border-radius: 12px; } .device--kiosk { border-radius: 26px; padding: 10px 10px 34px; aspect-ratio: 9 / 17.2; } .device--kiosk img { border-radius: 14px; } .device--kiosk:has(> .device__screen) { flex: none; width: 232px; } .device--kiosk .device__screen { border-radius: 14px; } .device--screen { border-radius: 10px; padding: 8px; aspect-ratio: 16 / 9.4; } .device--screen img { border-radius: 4px; } .device--phone { width: 232px; height: 420px; border-radius: 36px; padding: 8px; } .device--handheld { width: 196px; height: 360px; border-radius: 26px; padding: 7px; } .device__screen { height: 100%; overflow: hidden; border-radius: 12px; background: #fff; color: #121212; } .device--phone .device__screen { border-radius: 28px; } .device--handheld .device__screen { border-radius: 20px; } .faq { border-top: 1px solid var(--line); } .faq summary { color: var(--ink-head); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s5) 0; font-weight: 600; font-size: 1.0625rem; line-height: var(--lh-tile); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 14px; height: 14px; flex: none; margin-top: calc((1lh - 14px) / 2); background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; transition: transform var(--t-base) var(--ease-out); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details.is-closing summary::after { transform: none; } .faq .faq__a { padding: 0 0 var(--s5); color: var(--ink-2); max-width: 64ch; } .field { display: grid; gap: 6px; } .field label { font-size: var(--fs-small); font-weight: 600; } .input { height: 48px; width: 100%; padding: 0 16px; border-radius: var(--r-input); border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .input::placeholder { color: var(--muted); } .input:hover { border-color: var(--grey); } .input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgb(36 171 255 / .22); } .field--error .input { border-color: var(--danger); } .field__help { font-size: .8125rem; color: var(--muted); } .field__error { font-size: .8125rem; color: var(--danger); font-weight: 700; } .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); scrollbar-width: thin; } .rail > * { scroll-snap-align: start; } .marquee { --gap: clamp(40px, 5vw, 72px); --speed: 48s; display: flex; overflow: hidden; gap: var(--gap); padding-block: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--gap); flex-shrink: 0; min-width: 100%; justify-content: space-around; animation: marquee var(--speed) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } } @media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; justify-content: center; } .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 24px; } .marquee__track[aria-hidden="true"] { display: none; } } .carousel--bleed { margin-block: -12px; } .carousel--bleed .carousel__track { grid-auto-columns: min(380px, 82vw); padding: 20px max(var(--gutter), calc((100% - var(--max)) / 2)) 44px; scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); } .spotlight-card { position: relative; display: flex; flex-direction: column; height: min(580px, 140vw); padding: var(--card-pad) var(--card-pad) 0; border-radius: var(--r-card); background: var(--bg); color: var(--ink); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform var(--t-lift) var(--ease-soft), box-shadow var(--t-lift) var(--ease-soft); } .spotlight-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .spotlight-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .spotlight-card--dark { background: #121212; color: #fff; } .spotlight-card__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin: 0 0 var(--gap-label); } .spotlight-card__title { display: block; font-size: 1.75rem; line-height: var(--lh-title); font-weight: 700; letter-spacing: -.015em; } .spotlight-card__text { margin: var(--gap-text) 0 0; font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink-2); font-weight: 500; } .spotlight-card--dark .spotlight-card__text { color: #cfcfcf; } .spotlight-card__media { position: relative; flex: 1; min-height: 0; margin: var(--s5) calc(-1 * var(--s6)) 0; overflow: hidden; } .spotlight-card__media > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-zoom) var(--ease-soft); } .spotlight-card__media--screen { margin-inline: 0; border-radius: var(--r-tile) var(--r-tile) 0 0; } .spotlight-card__media--screen > img { object-fit: cover; object-position: top left; } .spotlight-card:hover .spotlight-card__media > img { transform: scale(1.05); } .spotlight-card__lottie { position: absolute; inset: 0; } .spotlight-card__media--lottie { margin: var(--s5) 0 var(--s6); } .spotlight-card__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s5); text-align: center; border: 1.5px dashed var(--line-strong); border-radius: var(--r-tile); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-text); } .spotlight-card--dark .spotlight-card__ph { border-color: #373737; color: #9f9f9f; } .spotlight-card__ph b { color: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-micro); } .spotlight-card__ph code { font: 600 .8125rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--blue); } .spotlight-card__ph span { max-width: 30ch; } .spotlight-card__lottie svg { display: block; } .spotlight-card--photo { background: #121212; color: #fff; } .spotlight-card__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); } .spotlight-card--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .6) 30%, rgb(0 0 0 / .15) 55%, transparent 70%); } .spotlight-card--photo .spotlight-card__eyebrow { color: rgb(255 255 255 / .8); } .spotlight-card--photo .spotlight-card__text { color: rgb(255 255 255 / .86); } .spotlight-card--photo:hover .spotlight-card__bg { transform: scale(1.05); } .spotlight-card__bg--low { top: auto; height: 86%; -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); } @media (max-width: 600px) { .spotlight-card { border-radius: var(--r-tile); } .spotlight-card__media { margin-inline: calc(-1 * var(--card-pad)); } .spotlight-card__media--lottie { margin: var(--s4) 0 var(--s5); } } .carousel { position: relative; } .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--s4)) / 4); gap: var(--s4); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; padding-block: 8px 32px; margin-block: -8px -32px; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track > * { scroll-snap-align: start; } .carousel__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: var(--s4); } .carousel__nav[hidden] { display: none; } [hidden] { display: none !important; } .carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; opacity: .9; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out); } .carousel__btn:hover { opacity: 1; } .carousel__btn:active { transform: scale(.94); } .carousel__btn[disabled] { opacity: .3; cursor: default; } @media (max-width: 1080px) { .carousel__track { grid-auto-columns: calc((100% - var(--s4)) / 2); } } @media (max-width: 600px) { .carousel__track { grid-auto-columns: 85%; } } .plan-addons__head { max-width: 64rem; margin: 0 auto var(--gap-head); text-align: center; } .plan-addons__head .chapter { max-width: none; margin: 0 auto; } .plan-addons { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap-cards); max-width: 1080px; margin-inline: auto; } .plan-addons:has(> :only-child) { grid-template-columns: 1fr; max-width: 640px; } .plan-card, .addon-card { border-radius: var(--r-card); padding: var(--card-pad); } .plan-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--bg); } .plan-card__label { margin: 0 0 var(--gap-label); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); } .plan-card__name { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; letter-spacing: -.01em; } .plan-card__price { margin: var(--gap-text) 0 0; font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; } .plan-card__price small { margin-left: 6px; font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; color: var(--muted); } .plan-card__text { max-width: 30ch; margin: var(--gap-text) 0 0; color: var(--muted); text-wrap: balance; } .plan-card .ctas { justify-content: center; margin-top: var(--gap-action); } .plan-card__after { max-width: 30ch; margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); text-wrap: balance; } .addon-card { display: flex; flex-direction: column; justify-content: center; background: var(--bg); } [data-bg="grey"] .addon-card { background: var(--surface); } .addon-card__label { margin: 0; font-size: var(--fs-small); font-weight: 500; color: var(--muted); } .addon-card__list { list-style: none; margin: var(--gap-label) 0 0; padding: 0; } .addon-card__list li { padding: var(--s4) 0; border-top: 1px solid var(--line-strong); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); } .addon-card__list li:first-child { border-top: 0; padding-top: var(--s2); } .addon-card__list li:last-child { padding-bottom: 0; } .addon-card__list b { display: block; margin-bottom: 2px; font-size: var(--fs-body); font-weight: 600; color: var(--ink); } @media (min-width: 901px) { .plan-addons:not(.plan-addons--full) .addon-card { justify-content: flex-start; padding-block: calc(var(--card-pad) + 3px) var(--card-pad); } .plan-addons:not(.plan-addons--full) .addon-card__list { flex: 1; display: flex; flex-direction: column; } .plan-addons:not(.plan-addons--full) .addon-card__list li { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } .plan-addons:not(.plan-addons--full) .addon-card__list li:first-child { justify-content: flex-start; } .plan-addons:not(.plan-addons--full) .addon-card__list li:last-child { justify-content: flex-end; } } .addon-card--row { margin-top: var(--gap-cards); } .addon-card--row .addon-card__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s6); } .addon-card--row .addon-card__list li, .addon-card--row .addon-card__list li:first-child { padding: 0; border-top: 0; } @media (max-width: 900px) { .addon-card--row .addon-card__list { grid-template-columns: 1fr; gap: var(--s4); } } @media (max-width: 600px) { .addon-card--row { border-radius: var(--r-tile); } } .plan-contents { display: grid; gap: var(--gap-cards); } .plan-contents__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); } .plan-contents__title { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .plan-contents__price { margin: 0; color: var(--muted); } .plan-contents__price b { font-size: var(--fs-tile); font-weight: 700; color: var(--ink-head); } .plan-contents__groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-cards); } .plan-contents__group { display: flex; flex-direction: column; padding: var(--s2) var(--s2) var(--s5); border-radius: var(--r-card); background: var(--card); } .plan-contents__img { display: block; aspect-ratio: 4 / 3; margin-bottom: var(--s4); overflow: hidden; border-radius: calc(var(--r-tile) - 2px); background: var(--panel); } .plan-contents__img img { width: 100%; height: 100%; object-fit: cover; } .plan-contents__name, .plan-contents__desc, .plan-contents__products { margin-inline: var(--s3); } .plan-contents__name { margin-block: 0 2px; font-size: var(--fs-body); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .plan-contents__desc { margin-block: 0 var(--s4); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); } .plan-contents__products { list-style: none; padding: var(--s3) 0 0; border-top: 1px solid var(--line); display: grid; align-content: start; gap: 6px; font-size: var(--fs-small); line-height: var(--lh-text); } .plan-contents__products li { display: flex; align-items: center; gap: 8px; } .plan-contents__products a { color: var(--ink); text-decoration: none; } .plan-contents__products a:hover { text-decoration: underline; text-underline-offset: 3px; } .plan-contents__check { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-head); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .plan-contents__label { margin: var(--s5) 0 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .plan-contents__extras { list-style: none; margin: 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s7); } .plan-contents__extra { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-content: start; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); } .plan-contents__extra > :not(.plan-contents__plus) { grid-column: 2; } .plan-contents__extra b { font-size: var(--fs-body); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .plan-contents__plus { grid-column: 1; grid-row: 1; align-self: center; display: grid; place-items: center; } .plan-contents__plus svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-head); stroke-width: 1.8; stroke-linecap: round; } @media (max-width: 900px) { .plan-contents__extras { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } } @media (max-width: 1080px) { .plan-contents__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-contents__group:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--s3); padding-bottom: var(--s2); } .plan-contents__group:last-child:nth-child(odd) .plan-contents__img { grid-column: 1; grid-row: 1 / span 3; margin: 0; } .plan-contents__group:last-child:nth-child(odd) > :not(.plan-contents__img) { grid-column: 2; } .plan-contents__group:last-child:nth-child(odd) .plan-contents__name { margin-top: var(--s3); } } @media (max-width: 600px) { .plan-contents__groups { grid-template-columns: minmax(0, 1fr); } .plan-contents__group:last-child:nth-child(odd) { display: flex; padding-bottom: var(--s5); } .plan-contents__group:last-child:nth-child(odd) .plan-contents__img { margin-bottom: var(--s4); } .plan-contents__group:last-child:nth-child(odd) .plan-contents__name { margin-top: 0; } .plan-contents__group { border-radius: var(--r-tile); } } .plan-addons__notes { max-width: 72ch; margin: var(--gap-foot) auto 0; text-align: center; font-size: var(--fs-micro); line-height: var(--lh-text); color: var(--muted); text-wrap: balance; } .plan-addons--full, .plan-addons--full:has(> :only-child) { grid-template-columns: 1fr; max-width: 1080px; } .plan-addons--full .plan-card { padding: clamp(32px, 3.5vw, 48px) clamp(32px, 4.5vw, 64px); } .plan-addons--full .plan-card__after { max-width: 44ch; } .plan-card__main { display: flex; flex-direction: column; align-items: center; text-align: center; } .plan-card__groups { width: 100%; margin: var(--s6) 0 0; padding-top: var(--s6); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: var(--s6) var(--s5); text-align: left; } .plan-card__groups dt { margin-bottom: var(--gap-label); font-size: var(--fs-small); line-height: var(--lh-text); font-weight: 500; color: var(--muted); } .plan-card__groups dd { margin: 0; line-height: var(--lh-text); } .plan-card__groups a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-head); text-decoration: none; text-underline-offset: 4px; } .plan-card__groups a::after { content: ""; flex: none; width: 6px; height: 10px; background: var(--muted); transition: transform var(--t-base) var(--ease-out); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='m1 1 4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='m1 1 4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .plan-card__groups a:hover { text-decoration: underline; } .plan-card__groups a:hover::after { transform: translateX(2px); } @media (max-width: 1080px) { .plan-card__groups { grid-template-columns: repeat(auto-fill, minmax(max(11rem, calc((100% - 2 * var(--s5)) / 3)), 1fr)); justify-content: stretch; } } .plan-addons--full .addon-card { padding: var(--card-pad) clamp(32px, 4.5vw, 64px); } .plan-addons--full .addon-card__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s5); } .plan-addons--full .addon-card__list li, .plan-addons--full .addon-card__list li:first-child { padding: var(--s2) 0 0; border-top: 0; } @media (max-width: 900px) { .plan-addons--full .plan-card { padding: var(--card-pad); } } @media (max-width: 600px) { .plan-card__groups { gap: var(--s5); } .plan-addons--full .addon-card { padding: var(--card-pad); } .plan-addons--full .addon-card__list { grid-template-columns: 1fr; gap: var(--s4); } } .plan-addons__notes a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 900px) { .plan-addons { grid-template-columns: 1fr; max-width: 40rem; } } @media (max-width: 600px) { .plan-addons { gap: var(--s3); } .plan-card, .addon-card { border-radius: var(--r-tile); } } .closing { min-height: 560px; } .closing .tile__body { max-width: 560px; } [data-section$="/closing"] > .container:has(> .closing) { max-width: calc(var(--panel-max) + 2 * var(--panel-inset)); padding-inline: var(--panel-inset); } .closing { container-type: inline-size; } .closing .tile__body { box-sizing: content-box; padding-inline: max(var(--gutter-in), (100cqi - var(--max)) / 2); } .tile__body > .ctas { margin-top: calc(var(--gap-action) - var(--gap-text)); } .closing.tile--photo.bottom::after { background: linear-gradient(0deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .42) 45%, rgb(0 0 0 / .22) 100%); } @media (max-width: 600px) { .closing.tile--photo.bottom::after { background: linear-gradient(0deg, rgb(0 0 0 / .86) 0%, rgb(0 0 0 / .74) 60%, rgb(0 0 0 / .5) 100%); } } .photo-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; isolation: isolate; background: var(--bg); color: var(--ink); text-decoration: none; } .photo-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .photo-card__media { position: absolute; inset: 0 0 var(--s6); z-index: -1; display: block; } .photo-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); } .photo-card:hover .photo-card__media > img, .photo-card:focus-visible .photo-card__media > img { transform: scale(1.04); } .photo-card__body { display: block; padding: var(--s5); background: var(--bg); } .photo-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 26px; } .photo-card__name { display: block; min-width: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; letter-spacing: -.01em; color: var(--ink-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .photo-card__logos { flex: none; list-style: none; display: flex; margin: 0; padding: 0; } .photo-card__logos li + li { margin-left: -4px; } .photo-card__logos img { display: block; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 0 0 2px var(--bg); } .photo-card__more { display: grid; grid-template-rows: 1fr; } .photo-card__more > span { overflow: hidden; } .photo-card__line { display: block; padding-top: var(--gap-label); color: var(--ink-2); } .photo-card__ph { position: absolute; inset: 0 0 auto; padding: var(--s6) var(--s5); text-align: center; font-size: var(--fs-small); color: var(--muted); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .photo-card__more { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-lift) var(--ease-soft), opacity var(--t-lift) var(--ease-soft); } .photo-card:hover .photo-card__more, .photo-card:focus-visible .photo-card__more { grid-template-rows: 1fr; opacity: 1; } } .photo-rail .carousel--bleed .carousel__track { grid-auto-columns: min(290px, 70vw); } @media (max-width: 600px) { .photo-card { border-radius: var(--r-tile); } .photo-rail .carousel--bleed .carousel__track { grid-auto-columns: 78vw; } .photo-card__name { font-size: 1.125rem; } .photo-rail .photo-card__media, .product-grid .photo-card__media { position: relative; inset: auto; z-index: auto; flex: 1 1 0; min-height: 0; } .photo-rail .photo-card__media > img, .product-grid .photo-card__media > img { position: absolute; inset: 0; object-position: center; } .photo-rail .photo-card__body, .product-grid .photo-card__body { flex: none; height: calc(2 * var(--s5) + 34px + var(--gap-label) + 2lh); } .photo-rail .photo-card__line, .product-grid .photo-card__line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } .stack-cards { --top: calc(var(--hdr-h) + var(--s2)); --head: 0px; --peek: 12px; } .stack-cards__head { position: sticky; top: var(--top); z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding-block: var(--s3) var(--gap-head); background: var(--canvas); } .stack-cards__head .chapter { margin: 0; } .stack-card { position: sticky; top: calc(var(--top) + var(--head) + var(--i) * var(--peek)); display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; height: min(440px, max(360px, calc(100vh - var(--top) - var(--head) - 6 * var(--peek) - var(--s5)))); margin-bottom: var(--s6); padding: var(--s2); border-radius: var(--r-card); background: var(--bg); transform-origin: 50% 0; scale: var(--s, 1); will-change: scale; } .stack-card > * { opacity: var(--fade, 1); } .stack-card:last-child { margin-bottom: 0; } .stack-card__media { position: relative; height: 100%; border-radius: calc(var(--r-card) - var(--s2)); overflow: hidden; background: var(--surface); } .stack-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .stack-card__panel { display: flex; flex-direction: column; align-items: flex-start; padding: var(--card-pad); } .stack-card__step { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--muted); } .stack-card__step span { color: var(--ink-head); font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; } .stack-card__title { margin: var(--gap-label) 0 0; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: var(--lh-heading); font-weight: 700; letter-spacing: -.025em; color: var(--ink-head); text-wrap: balance; } .stack-card__line { margin: var(--gap-text) 0 0; max-width: 34ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); text-wrap: pretty; } .stack-card__link { margin-top: var(--gap-action); } .stack-card__media--device { display: grid; place-items: center; padding: clamp(16px, 4%, 40px); } .stack-card__media--device .device { width: 100%; max-height: 100%; } .stack-card__media--device .device img { position: static; } @media (max-width: 900px) { .stack-card { grid-template-columns: 1fr; height: auto; } .stack-card__media { height: auto; aspect-ratio: 2 / 1; } .stack-card__panel { padding: var(--card-pad); } } @media (max-width: 600px) { .stack-cards__head { position: static; padding-top: 0; } .stack-card { border-radius: var(--r-tile); margin-bottom: var(--s4); padding: 6px; } .stack-card__media { border-radius: 6px; } } .scroll-story { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); } .scroll-story__steps { position: relative; } .scroll-story__rail { position: absolute; left: 19px; top: 30px; bottom: 30px; width: 2px; background: var(--line); } .scroll-story__rail span { position: absolute; inset: 0 0 auto 0; height: 0; background: var(--blue); transition: height var(--t-slow) var(--ease-out); } .step { cursor: pointer; } .step:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: var(--r-tile); } .step { position: relative; min-height: min(64vh, 560px); padding-left: var(--s8); display: flex; flex-direction: column; justify-content: center; } .step:first-child { min-height: min(46vh, 400px); justify-content: flex-start; padding-top: var(--s3); } .step:last-child { min-height: min(52vh, 460px); } .step__dot { position: absolute; left: 8px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); display: grid; place-items: center; transition: border-color var(--t-base), background-color var(--t-base); } .step:first-child .step__dot { top: 26px; } .step__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background-color var(--t-base); } .step.is-active .step__dot { border-color: var(--blue); } .step.is-active .step__dot::after { background: var(--blue); } .step__who { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-small); line-height: var(--lh-text); font-weight: 700; color: var(--muted); margin-bottom: var(--gap-label); } .step h3 { transition: color var(--t-base); color: var(--muted); } .step.is-active h3 { color: var(--ink); } .step p { margin: var(--gap-text) 0 0; color: var(--ink-2); max-width: 40ch; } .step__line a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; } .step__line a:hover { text-decoration-color: currentColor; } .step__line .badge-new { vertical-align: 2px; margin-left: 2px; } .scroll-story--focus .step { transition: opacity var(--t-base) var(--ease-out); } .scroll-story--focus .step:not(.is-active) { opacity: .4; } @media (max-width: 900px) { .scroll-story--focus .step:not(.is-active) { opacity: 1; } } .step__img { display: none; } .stage { position: sticky; top: calc(var(--hdr-h) + var(--s5)); height: min(72vh, 600px); border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); } .stage__layer { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); } .stage__layer.is-active { opacity: 1; transform: none; } .stage__layer > img { width: 100%; height: 100%; object-fit: cover; } .stage__layer--device { display: grid; place-items: center; background: var(--surface); } .stage__layer--device .device--kiosk { width: 34%; } .stage__screen { width: 88%; aspect-ratio: 16 / 12.7; } .step__img--screen { background: var(--surface); } .step__img--screen img { object-position: 0 0; } .stage__caption { position: absolute; left: 20px; bottom: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font-size: var(--fs-small); font-weight: 600; } @media (max-width: 900px) { .scroll-story { grid-template-columns: 1fr; } .stage { display: none; } .step, .step:first-child, .step:last-child { min-height: 0; padding-block: 0 var(--s7); justify-content: flex-start; } .step__dot, .step:first-child .step__dot { top: 4px; translate: none; } .scroll-story__rail { top: 16px; } .step__img { display: block; margin-top: var(--gap-action); border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); } .step__img img { width: 100%; height: 100%; object-fit: cover; } } .hero.hero--center { --pad: calc(var(--gutter) - var(--inset)); position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 112px) var(--pad); text-align: center; } main > .hero--center[data-bg="grey"] { background: var(--canvas) border-box; } .hero--center .container { position: relative; } .hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--card-inner); font-size: var(--fs-small); font-weight: 500; line-height: 1.4; margin: 0 0 var(--s5); } .hero__badge::before, .hero__badge::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .hero__title { font-size: clamp(2.5rem, 1rem + 5.6vw, 5.75rem); line-height: 1.09; letter-spacing: -.045em; max-width: 14ch; margin-inline: auto; } .hero__title:has(.hero__rotator) { max-width: none; font-size: clamp(2.25rem, 1rem + 4.2vw, 4.5rem); } .hero__rotator { display: inline-grid; justify-items: start; color: var(--blue); white-space: nowrap; transition: width .8s var(--ease-out); } .hero__rotator > span { grid-area: 1 / 1; transform-origin: 0 60%; padding-bottom: .06em; opacity: 0; translate: 0 .2em; filter: blur(.08em); transition: opacity .9s var(--ease-out), translate 1.1s var(--ease-out), filter .9s var(--ease-out); } .hero__rotator > span.is-in, .hero__rotator > span:first-child:not(.is-out) { opacity: 1; translate: 0 0; filter: none; } .hero__rotator > span.is-out { opacity: 0; translate: 0 -.2em; filter: blur(.08em); transition-duration: .6s; } .hero--center .lead { max-width: 40rem; margin: var(--s5) auto 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: var(--lh-lead); color: var(--muted); text-wrap: balance; } .hero--center .lead b { color: var(--ink); font-weight: 500; } .hl { display: inline-block; padding: 0 .4em; border-radius: 8px; background: var(--card-inner); color: var(--ink); font-weight: 500; line-height: 1.55; } .hl--ink { background: var(--ink); color: #fff; } .hero--center .ctas { justify-content: center; margin-top: var(--s6); } .hero__media { display: grid; grid-template-columns: 4fr 3fr; gap: var(--s4); margin-top: clamp(48px, 6vw, 80px); text-align: left; } .hero__media > * { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--surface); margin: 0; } .hero__media > :last-child { aspect-ratio: 6 / 5; } .hero__media :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__media figcaption { position: absolute; left: var(--s4); bottom: var(--s4); padding: 6px 12px; border-radius: var(--r-pill); background: var(--glass-dark); color: #fff; font-size: var(--fs-small); font-weight: 500; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .hero--center .container:first-of-type > * { animation: rise-in var(--t-reveal) var(--ease-out) both; } .hero--center .container:first-of-type > :nth-child(2) { animation-delay: 80ms; } .hero--center .container:first-of-type > :nth-child(3) { animation-delay: 160ms; } .hero--center .container:first-of-type > :nth-child(4) { animation-delay: 240ms; } .hero__media { animation: settle-in 1.2s var(--ease-out) 300ms both; } .is-still :is(.hero--center .container:first-of-type > *, .hero__media) { animation: none; } @media (prefers-reduced-motion: reduce) { .hero--center .container:first-of-type > *, .hero__media { animation: none; } } @media (max-width: 900px) { .hero__media { grid-template-columns: 1fr; } .hero__media > :first-child { aspect-ratio: 3 / 2; } } @media (max-width: 600px) { .hero__media { padding-inline: var(--s2); gap: var(--s2); } .hero__media > * { border-radius: var(--r-tile); } .hero__media > :first-child { display: none; } .hero--center .ctas .btn { flex: 1 1 100%; } } .hero__title--split { max-width: none; font-size: clamp(2.25rem, 1.1rem + 3.6vw, 4rem); line-height: 1.09; letter-spacing: -.03em; text-wrap: balance; } .hero__title--split .hero__line--sub { color: var(--muted); } .hero--center .container:first-of-type > .hero__title[data-title] { animation: none; } [data-title="reveal"] .hw { display: inline-block; opacity: 0; filter: blur(.12em); translate: 0 .22em; animation: word-in 1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); } @keyframes word-in { to { opacity: 1; filter: blur(0); translate: 0 0; } } [data-title="reveal"] .hero__line--sub .hw { color: color-mix(in srgb, var(--ink-head) calc(var(--f, 0) * 100%), var(--muted)); } .hero__mark { position: relative; white-space: nowrap; } .hero__spark { position: absolute; left: .02em; right: .02em; bottom: -.12em; height: .3em; pointer-events: none; clip-path: inset(-50% 100% -50% -2%); animation: spark-draw 1.2s var(--ease-in-out) 1.15s forwards; } .hero__spark svg { display: block; width: 100%; height: 100%; overflow: visible; } .hero__spark path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; } .hero__spark i { position: absolute; right: -4px; top: calc(10% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--blue); scale: 0; animation: spark-dot .5s var(--ease-out) 2.25s forwards; } @keyframes spark-draw { to { clip-path: inset(-50% -2% -50% -2%); } } @keyframes spark-dot { to { scale: 1; } } .hero--center .lead .br-wide { display: none; } @media (min-width: 901px) { .hero--center .lead .br-wide { display: inline; } .hero--center .lead:has(.br-wide) { max-width: none; } } .logos { --logo-k: 1.1; padding-block: clamp(32px, 4vw, 56px); } .logos__row { display: flex; align-items: center; gap: clamp(32px, 4vw, 64px); } .logos__intro { display: flex; align-items: center; gap: var(--s4); flex: none; padding-right: clamp(32px, 4vw, 64px); border-right: 1px solid var(--line); min-height: 88px; } .logos__faces { display: flex; list-style: none; margin: 0; padding: 0; } .logos__faces li + li { margin-left: -14px; } .logos__faces, .logos__faces li, .logos__faces img { flex: none; } .logos__text { min-width: 0; } .logos__faces img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--canvas); background: #fff; } .logos__text { margin: 0; max-width: 17em; font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; letter-spacing: -.01em; color: var(--muted); } .logos .marquee { --gap: clamp(48px, 5vw, 80px); --speed: 70s; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 70%, transparent); } .logos .marquee img { height: calc(var(--h, 40px) * var(--logo-k, 1)); width: auto; max-width: none; object-fit: contain; filter: grayscale(1) brightness(.35) contrast(1.2); } @media (max-width: 900px) { .logos__row { flex-direction: column; align-items: stretch; gap: var(--s5); } .logos__intro { border-right: 0; padding-right: 0; min-height: 0; justify-content: center; } .logos .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } } .logos--in-hero { margin-top: clamp(32px, 4vw, 56px); padding-block: 0; text-align: left; } .logos--in-hero .logos__intro { border-right: 0; padding-right: 0; } @media (max-width: 600px) { .logos { --logo-k: .85; } .logos__faces img { width: 44px; height: 44px; } .logos__text { font-size: var(--fs-body); } } .review { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: #fff; isolation: isolate; } .review__photo { position: absolute; inset: 0; z-index: -1; } .review__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-zoom) var(--ease-soft); } .review__body { position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s5); max-width: 480px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--s5); border-radius: var(--r-tile); isolation: isolate; } .review__body::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .review__quote { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; } .review__foot { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); } .review__who { display: flex; align-items: center; gap: var(--s3); margin: 0; font-size: var(--fs-small); line-height: var(--lh-tile); color: var(--muted); } .review__who b { color: var(--ink); font-weight: 600; } .review__logo { width: 48px; height: 48px; border-radius: var(--r-tile); flex: none; object-fit: cover; background: #fff; display: grid; place-items: center; font-size: var(--fs-small); font-weight: 700; color: var(--muted); } .review__bar { display: none; } .review__mark { display: none; } .review__open { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; } .review__open:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; } .review.is-active .review__open { display: none; } .review__body:focus { outline: none; } @media (min-width: 901px) { .reviews .carousel__track { --narrow: clamp(110px, 11vw, 170px); --open: calc(100cqw - (var(--reviews, 4) - 1) * (var(--narrow) + var(--gap-cards))); --reveal-at: calc(var(--t-zoom) * .45); container-type: inline-size; display: flex; gap: var(--gap-cards); overflow: visible; padding-block: 0; margin-block: 0; height: clamp(420px, 38vw, 540px); } .reviews .carousel__track > .review { flex: 0 0 var(--narrow); transition: flex-basis var(--t-zoom) var(--ease-in-out), opacity var(--t-reveal) var(--ease-out), scale var(--t-reveal) var(--ease-out); } .reviews .carousel__track > .review.is-active { flex-basis: var(--open); } .review__who { flex-wrap: nowrap; white-space: nowrap; } .review__foot { flex-wrap: wrap; } .review__foot > .link { white-space: nowrap; } .review__body { right: auto; width: min(480px, calc(var(--open) - 2 * var(--s5))); transition: translate var(--t-slow) var(--ease-out) var(--reveal-at); } .review:not(.is-active) .review__body { translate: 0 12px; transition: translate 0s var(--t-fast); } .review:not(.is-active) :is(.review__quote, .review__who, .review__foot > .link, .review__bar) { opacity: 0; visibility: hidden; transition: opacity var(--t-fast) linear, visibility 0s var(--t-fast); } .review:not(.is-active) .review__body::before { opacity: 0; transition: opacity var(--t-fast) linear; } .review.is-active :is(.review__quote, .review__who, .review__foot > .link, .review__bar) { transition: opacity var(--t-slow) var(--ease-out) var(--reveal-at), visibility 0s var(--reveal-at); } .review.is-active .review__body::before { transition: opacity var(--t-slow) var(--ease-out) var(--reveal-at); } .is-timed .review__bar { display: block; position: relative; align-self: stretch; height: 3px; border-radius: 2px; background: rgb(0 0 0 / .1); overflow: hidden; } .review__bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; } .review__mark { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s3); background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); pointer-events: none; transition: opacity var(--t-slow) var(--ease-out) var(--reveal-at), background-color var(--t-base) var(--ease-out); } .review__mark img { width: min(70%, 88px); height: 88px; object-fit: contain; filter: brightness(0) invert(1); } .review__mark--name { font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 700; letter-spacing: -.01em; color: #fff; text-align: center; text-wrap: balance; } .review.is-active .review__mark { opacity: 0; transition: opacity var(--t-fast) linear; } } @media (min-width: 901px) and (hover: hover) and (pointer: fine) { .review:not(.is-active):hover .review__photo img { scale: 1.04; } .review:not(.is-active):hover .review__mark { background-color: rgb(18 18 18 / .25); } } @media (prefers-reduced-motion: reduce) { .reviews .carousel__track > .review, .review__body, .review__body::before, .review__body *, .review__mark { transition: none !important; } } @media (max-width: 900px) { .reviews .carousel__track { grid-auto-columns: 60%; } .review { display: flex; flex-direction: column; } .review__photo { position: relative; inset: auto; z-index: auto; aspect-ratio: 4 / 3; } .review__body { position: static; max-width: none; flex: 1; justify-content: space-between; padding: var(--card-pad); } .review__body::before { content: none; } .review__foot { flex-wrap: wrap; } .review__open { display: none; } } @media (max-width: 600px) { .review { border-radius: var(--r-tile); } .reviews .carousel__track { grid-auto-columns: 88%; } } .quote { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); line-height: var(--lh-title); font-weight: 650; letter-spacing: -.02em; margin: 0; max-width: 30ch; text-wrap: balance; } .who { margin-top: var(--s5); color: var(--muted); font-weight: 600; } .quote-row { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: start; } .quote-row img { width: 120px; height: auto; opacity: .85; } @media (max-width: 600px) { .quote-row { grid-template-columns: 1fr; } .quote-row img { width: 96px; } } .quote-row--photo { display: grid; grid-template-columns: 5fr 6fr; gap: 0; align-items: stretch; margin: 0; padding: 0; background: var(--bg); border-radius: var(--r-card); overflow: hidden; min-height: min(520px, 56vw); } .quote-row--photo .quote-row__photo { position: relative; margin: 0; background: var(--surface); } .quote-row--photo .quote-row__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; } .quote-row--photo .quote-row__photo .screen-tabs__ph { inset: var(--s5); border-radius: var(--r-tile); } .quote-row--photo .quote-row__body { display: flex; flex-direction: column; justify-content: center; gap: var(--s6); padding: clamp(32px, 5vw, 80px); } .quote-row--photo .quote { max-width: 24ch; font-size: var(--fs-h3); line-height: var(--lh-title); font-weight: 600; letter-spacing: -.02em; color: var(--ink-head); text-wrap: pretty; } .quote-row--photo .quote { text-indent: -.42em; } .quote-row--photo .quote:has(em) { color: var(--muted); } .quote-row--photo .quote em { font-style: normal; color: var(--ink-head); } .quote-row--photo .who { display: flex; align-items: center; gap: var(--s3); margin: 0; padding-top: var(--s5); border-top: 1px solid var(--line); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-tile); color: var(--muted); } .quote-row--photo .who img { width: 48px; height: 48px; border-radius: var(--r-tile); object-fit: cover; opacity: 1; flex: none; } .quote-row--photo .who b { display: block; color: var(--ink-head); font-weight: 600; } @media (max-width: 900px) { .quote-row--photo { grid-template-columns: 1fr; min-height: 0; } .quote-row--photo .quote-row__photo { aspect-ratio: 16 / 10; } } @media (max-width: 600px) { .quote-row--photo { border-radius: var(--r-tile); } .quote-row--photo .quote-row__body { padding: var(--card-pad); gap: var(--s5); } .quote-row--photo .who img { width: 40px; height: 40px; } } .price-hero { padding-block: clamp(40px, 5vw, 80px) clamp(28px, 3vw, 44px); } @media (min-width: 901px) { .price-hero { display: flex; flex-direction: column; min-height: min(calc(100vh - 2 * var(--panel-inset)), 804px); min-height: min(calc(100svh - 2 * var(--panel-inset)), 804px); } .price-hero > .container { flex: 1; display: flex; flex-direction: column; width: 100%; } .price-hero__grid { margin-block: auto; } } .price-hero__title { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .price-hero__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--s7) clamp(48px, 7vw, 120px); } .price-hero__price { display: flex; align-items: flex-start; gap: var(--s4); margin: var(--s5) 0 0; color: var(--ink-head); } .price-hero__amount { font-size: clamp(5rem, 2.5rem + 9.5vw, 11rem); line-height: .82; font-weight: 700; letter-spacing: -.06em; margin-left: -.035em; } .price-hero__per { padding-top: .6em; font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; color: var(--muted); } .price-hero__copy { max-width: 34rem; padding-bottom: var(--s2); } .price-hero__is { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-title); font-weight: 600; letter-spacing: -.015em; color: var(--ink-head); text-wrap: balance; } .price-hero__copy .lead { margin-top: var(--gap-text); color: var(--muted); } .price-hero__copy .ctas { margin-top: var(--gap-action); } .price-hero__notes { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s7); margin: clamp(40px, 5vw, 64px) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line-strong); list-style: none; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); } @media (max-width: 900px) { .price-hero__grid { grid-template-columns: 1fr; gap: var(--s6); } .price-hero__notes { flex-direction: column; } } .detail-hero { padding-block: clamp(40px, 5vw, 80px) clamp(28px, 3vw, 44px); } .detail-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .detail-hero__group, .overview-hero .detail-hero__group, .careers-hero .detail-hero__group { margin: 0 0 var(--s4); font-size: var(--fs-small); font-weight: 600; color: var(--muted); } .detail-hero__group a { text-decoration: none; } .detail-hero__group a:hover { color: var(--ink); } .detail-hero h1, .overview-hero h1, .careers-hero h1, .legal-hero h1, [data-section="contact/hero"] h1, .error-hero h1, .article-hero h1, .form-hero h1 { margin: 0; max-width: none; font-size: clamp(2.75rem, 1.2rem + 5vw, 5.5rem); line-height: 1.09; letter-spacing: -.045em; font-weight: 700; color: var(--ink-head); text-wrap: balance; } .detail-hero__is { margin: var(--s4) 0 0; max-width: 20ch; font-size: var(--fs-h3); line-height: var(--lh-title); font-weight: 600; letter-spacing: -.015em; color: var(--ink-2); text-wrap: balance; } .detail-hero .hero__copy .lead, .overview-hero__copy .lead, .careers-hero .article-hero__text .lead, .legal-hero .lead, [data-section="contact/hero"] .lead, .error-hero .article-hero__lead { margin-top: var(--s5); color: var(--muted); max-width: 46ch; } .detail-hero .hero__copy .ctas { margin-top: var(--s6); } .detail-hero__photo { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-card); overflow: hidden; background: var(--surface); } .detail-hero__photo img { width: 100%; height: 100%; object-fit: cover; } .detail-hero__facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(40px, 5vw, 72px) 0 0; border-top: 1px solid var(--line); } .detail-hero__facts > div { padding: var(--s5) var(--s5) 0 0; } .detail-hero__facts > div + div { padding-left: var(--s5); border-left: 1px solid var(--line); } .detail-hero__facts dt { font-size: var(--fs-small); font-weight: 500; color: var(--muted); } .detail-hero__facts dd { margin: 4px 0 0; font-weight: 600; line-height: 1.45; color: var(--ink-head); } @media (max-width: 900px) { .detail-hero__grid { grid-template-columns: 1fr; } .detail-hero__facts { grid-template-columns: 1fr 1fr; } .detail-hero__facts > div:nth-child(3) { padding-left: 0; border-left: 0; } .detail-hero__facts > div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: var(--s5); } } @media (max-width: 600px) { .detail-hero__photo { border-radius: var(--r-tile); } .detail-hero__facts { grid-template-columns: 1fr; } .detail-hero__facts > div, .detail-hero__facts > div + div { padding: var(--s4) 0; border-left: 0; margin: 0; } .detail-hero__facts > div + div { border-top: 1px solid var(--line); } } .screen-tabs { --n: 6; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(var(--n), auto) 1fr; column-gap: clamp(32px, 5vw, 80px); } .screen-tabs__item { display: contents; } .screen-tabs__tab { grid-column: 1; display: block; width: 100%; padding: var(--s5) 0; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; text-align: left; color: var(--muted); cursor: pointer; transition: color var(--t-base); } .screen-tabs__item:last-child .screen-tabs__tab { border-bottom: 1px solid var(--line); } .screen-tabs__tab:hover, .screen-tabs__tab[aria-expanded="true"] { color: var(--ink-head); } .screen-tabs__tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } .screen-tabs__title { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-tile); font-weight: 600; line-height: var(--lh-tile); letter-spacing: -.01em; } .screen-tabs__title .badge-new { flex: none; } .screen-tabs__line { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out); } .screen-tabs__line > span { overflow: hidden; } .screen-tabs__line > span > span { display: block; padding-top: var(--gap-text); max-width: 44ch; color: var(--ink-2); } .screen-tabs__lead { display: none; } .screen-tabs__tab[aria-expanded="true"] .screen-tabs__line { grid-template-rows: 1fr; opacity: 1; } .screen-tabs__media { grid-column: 2; grid-row: 1 / span var(--n); align-self: start; position: sticky; top: calc(var(--hdr-h) + var(--s5)); display: grid; place-items: center; aspect-ratio: 4 / 3; padding: clamp(20px, 5%, 48px); border-radius: var(--r-card); background: var(--card-inner); opacity: 0; visibility: hidden; transition: opacity var(--t-slow) var(--ease-out), visibility 0s var(--t-slow); } .screen-tabs__media.is-active { opacity: 1; visibility: visible; transition: opacity var(--t-slow) var(--ease-out); } .screen-tabs__media .device { width: 100%; } .screen-tabs__media :is(.screen-tabs__ph, .spotlight-card__ph) { inset: clamp(20px, 5%, 48px); } .screen-tabs__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s4); text-align: center; border: 1.5px dashed var(--line-strong); border-radius: inherit; color: var(--muted); font-size: var(--fs-small); } .screen-tabs__ph b { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-micro); } .screen-tabs__ph code { font: 600 .8125rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--blue); } .screen-tabs__ph span { max-width: 30ch; } .screen-tabs__media .spotlight-card__lottie { inset: clamp(20px, 5%, 48px); } @media (max-width: 900px) { .screen-tabs { display: block; } .screen-tabs__item { display: block; padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--line); } .screen-tabs__tab, .screen-tabs__item:last-child .screen-tabs__tab { padding: 0; border: 0; color: var(--ink-head); cursor: default; } .screen-tabs__line { grid-template-rows: 1fr; opacity: 1; } .screen-tabs__media { position: relative; top: auto; margin-top: var(--s4); opacity: 1; visibility: visible; } } @media (max-width: 600px) { .screen-tabs__media--ui { aspect-ratio: 1; }  .screen-tabs__media { border-radius: var(--r-tile); padding: var(--s4); } .screen-tabs__media .device--tablet { padding: 6px; border-radius: 12px; } .screen-tabs__media .device--tablet img { border-radius: 7px; } } .screen-tabs__spot { --pad: 12px; position: absolute; left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--x)); top: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--y)); width: calc((100% - 2 * var(--pad)) * var(--w)); height: calc((100% - 2 * var(--pad)) * var(--h)); border: 2px solid var(--blue); border-radius: 10px; box-shadow: 0 0 0 5px rgba(36, 171, 255, .18); opacity: 0; transform: scale(1.04); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); pointer-events: none; } @media (min-width: 901px) { .screen-tabs--stage { align-items: center; column-gap: clamp(32px, 5vw, 80px); row-gap: var(--s1); } .screen-tabs--stage .screen-tabs__item .screen-tabs__tab { padding: var(--s5) var(--s6); border: 0; border-radius: var(--r-card); color: var(--ink-head); transition: background-color var(--t-base), box-shadow var(--t-base) var(--ease-out); } .screen-tabs--stage .screen-tabs__tab:hover { background-color: rgb(255 255 255 / .55); } .screen-tabs--stage .screen-tabs__tab[aria-expanded="true"] { background-color: var(--card); box-shadow: var(--shadow-lift); } .screen-tabs--stage .screen-tabs__line { grid-template-rows: 1fr; opacity: 1; } .screen-tabs--stage .screen-tabs__line > span > span { color: var(--muted); } .screen-tabs--stage .screen-tabs__media { position: relative; top: auto; align-self: center; aspect-ratio: 5 / 4; border: var(--s4) solid var(--card); border-radius: calc(var(--r-card) + var(--s4)); box-shadow: 0 0 0 1px rgb(0 0 0 / .04), var(--shadow-lift); } .screen-tabs--stage .fui { font-size: clamp(10.5px, 3.1cqmin, 19px); } .screen-tabs--stage .screen-tabs__media.is-active .screen-tabs__spot { opacity: 1; transform: none; transition-delay: 350ms; } .screen-tabs--stage .screen-tabs__media { transform: translateY(12px) scale(.985); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility 0s var(--t-slow); } .screen-tabs--stage .screen-tabs__media.is-active { transform: none; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); } .screen-tabs--stage .screen-tabs__media--photo { padding: 0; overflow: hidden; } .screen-tabs--stage .screen-tabs__media--photo img { width: 100%; height: 100%; object-fit: cover; } .screen-tabs--stage.is-playing .screen-tabs__tab[aria-expanded="true"] { background-image: linear-gradient(var(--blue), var(--blue)); background-repeat: no-repeat; background-position: 0 100%; animation: tab-progress var(--auto-dur, 5s) linear forwards; } } .screen-tabs--stage .screen-tabs__media.screen-tabs__media--ui { background: var(--card); } @keyframes tab-progress { from { background-size: 0 2px; } to { background-size: 100% 2px; } } @media (prefers-reduced-motion: reduce) { .screen-tabs--stage .screen-tabs__media { transform: none !important; } } .screen-tabs.screen-tabs--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(min(460px, 62vh), auto); gap: var(--gap-cards); } .screen-tabs--grid > .screen-tabs__item { --span-d: 1; --span-t: 2; grid-column: span var(--span-d); display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: var(--r-card); background: var(--bg); overflow: hidden; } .screen-tabs--grid > :is(.screen-tabs__item:nth-child(6n+1), .screen-tabs__item:nth-child(6n)) { --span-d: 2; --span-t: 4; } .screen-tabs--grid > :is(.screen-tabs__item:nth-child(6n+4):nth-last-child(2), .screen-tabs__item:nth-child(6n+5):last-child, .screen-tabs__item:nth-child(6n+2):last-child) { --span-d: 2; } .screen-tabs--grid > .screen-tabs__item:nth-child(6n+2):last-child { --span-t: 4; } .screen-tabs--grid > :is(.screen-tabs__item:nth-child(6n+4):last-child, .screen-tabs__item:nth-child(6n+1):last-child) { --span-d: 4; --span-t: 4; } .screen-tabs--grid .screen-tabs__item .screen-tabs__tab { padding: var(--card-pad) var(--card-pad) var(--s5); border: 0; color: var(--ink-head); cursor: default; } .screen-tabs--grid .screen-tabs__line { grid-template-rows: 1fr; opacity: 1; } .screen-tabs--grid .screen-tabs__line > span > span { padding-top: var(--gap-text); color: var(--muted); } .screen-tabs.screen-tabs--grid .screen-tabs__media { position: relative; top: auto; display: block; flex: 1; min-height: 200px; align-self: stretch; margin: 0 var(--card-pad) var(--card-pad); aspect-ratio: auto; padding: 0; border-radius: var(--r-tile); background: var(--surface); opacity: 1; visibility: visible; transition: none; } @media (max-width: 900px) { .screen-tabs--grid > .screen-tabs__item { grid-column: span var(--span-t); } .screen-tabs.screen-tabs--grid { grid-auto-rows: minmax(400px, auto); } } @media (max-width: 600px) { .screen-tabs--grid > .screen-tabs__item { grid-column: span 4; border-radius: var(--r-tile); } .screen-tabs.screen-tabs--grid { grid-auto-rows: minmax(340px, auto); } } .before-after__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); grid-template-columns: repeat(3, 1fr); grid-template-areas: "menu menu kit" "bill happy happy"; } .before-after__row--menu { grid-area: menu; } .before-after__row--kit { grid-area: kit; } .before-after__row--happy { grid-area: happy; } .before-after__row--bill { grid-area: bill; } .before-after__row { display: flex; flex-direction: column; gap: var(--s4); padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); overflow: hidden; min-height: 466px; } .before-after__row--menu, .before-after__row--happy { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s5); align-items: stretch; } .before-after__text { display: flex; flex-direction: column; justify-content: center; height: 100%; } .before-after__row p { margin: 0; } .before-after__row--photo { position: relative; isolation: isolate; justify-content: flex-end; padding: var(--s2); } .before-after__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; } .before-after__row--photo .before-after__text { height: auto; padding: var(--s4) var(--s5) var(--s5); border-radius: calc(var(--r-card) - var(--s2)); background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .before-after__row--photo .before-after__was { color: rgb(255 255 255 / .72); } .before-after__row--photo .before-after__now { color: #fff; font-size: var(--fs-tile); line-height: var(--lh-tile); } .before-after__was { font-size: var(--fs-body); line-height: var(--lh-text); color: var(--muted); } .before-after__was span:last-child { background: linear-gradient(currentColor, currentColor) 0 55% / 0 1.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 900ms var(--ease-out) 300ms; } .before-after__row.in .before-after__was span:last-child, .before-after__row:not(.reveal) .before-after__was span:last-child { background-size: 100% 1.5px; } .before-after__now { margin-top: var(--s2) !important; font-size: var(--fs-h3); line-height: var(--lh-title); font-weight: 700; letter-spacing: -.02em; color: var(--ink-head); text-wrap: balance; } .before-after__row--happy { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .before-after__row--happy .before-after__media { order: -1; margin: auto auto auto 0; } .before-after__media { width: 100%; aspect-ratio: 720 / 400; max-height: 240px; margin: auto 0 auto auto; } [data-lottie-box] > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-tile); } .before-after__note { margin: var(--s4) 0 0; font-size: var(--fs-small); color: var(--muted); } @media (max-width: 900px) { .before-after__list { grid-template-columns: repeat(2, 1fr); grid-template-areas: "menu menu" "kit bill" "happy happy"; } } @media (max-width: 600px) { .before-after__list { grid-template-columns: 1fr; grid-template-areas: "menu" "kit" "happy" "bill"; } .before-after__row { border-radius: var(--r-tile); min-height: 0; } .before-after__row--photo { min-height: 280px; padding: 6px; } .before-after__row--photo .before-after__text { border-radius: 6px; padding: var(--s4); } .before-after__row--menu, .before-after__row--happy { display: flex; } .before-after__row--happy .before-after__media { order: 0; } .before-after__media { max-height: none; width: calc(100% + 2 * var(--s3)); margin: 0 calc(-1 * var(--s3)); } } :root { --rise: 28px; --t-reveal: 900ms; } @media (max-width: 600px) { :root { --rise: 16px; --t-reveal: 700ms; } } .reveal { opacity: 0; translate: 0 var(--rise); transition: opacity var(--t-reveal) var(--ease-out), translate var(--t-reveal) var(--ease-out), transform var(--t-lift) var(--ease-soft); } .reveal.in { opacity: 1; translate: none; } .carousel__track > .reveal { translate: none; scale: .97; transition: opacity var(--t-reveal) var(--ease-out), scale var(--t-reveal) var(--ease-out), transform var(--t-lift) var(--ease-soft); } .carousel__track > .reveal.in { scale: none; } .chapter.reveal span { opacity: 0; transition: opacity var(--t-reveal) var(--ease-out) 220ms; } .chapter.reveal.in span { opacity: 1; } .reveal [data-settle] { scale: 1.08; transition: scale 1.6s var(--ease-out), opacity var(--t-slow) var(--ease-out), transform var(--t-zoom) var(--ease-soft); } .reveal.in [data-settle] { scale: 1; } @keyframes rise-in { from { opacity: 0; translate: 0 var(--rise); } } @keyframes settle-in { from { opacity: 0; scale: 1.04; } } :is(.hero__copy, .hero__head, .hero__head > div) > * { animation: rise-in var(--t-reveal) var(--ease-out) both; } :is(.hero__copy, .hero__head > div) > :nth-child(2) { animation-delay: 100ms; } :is(.hero__copy, .hero__head > div) > :nth-child(3) { animation-delay: 200ms; } .hero__head > div { animation: none; } :is(.hero__visual, .hero__product, .hero-media--wide) { animation: settle-in 1.2s var(--ease-out) 150ms both; } .is-still :is(.hero__copy, .hero__head, .hero__head > div) > *, .is-still :is(.hero__visual, .hero__product, .hero-media--wide) { animation: none; } @supports (animation-timeline: view()) { @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { @keyframes drift { to { transform: scale(1.08); } } @keyframes ease-in-view { from { transform: scale(1.12); } } .hero__product img { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 800px; } .closing .tile__media img { animation: ease-in-view linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; } .is-still .hero__product img, .is-still .closing .tile__media img { animation: none; } } } @media (max-width: 1080px) { .site-header__logo img { width: 40px; } .site-header__right .hide-m { display: none; } .burger { display: inline-flex; } .nav { display: none; } html.menu-open { overflow: hidden; } .site-header.is-menu-open { color: #fff; --ink: #ffffff; --ink-2: #cfcfcf; --line: #262626; --line-strong: #373737; } .site-header.is-menu-open, .site-header.is-menu-open :is(.site-header__bar, .nav, .burger) { transition: none; } .site-header.is-menu-open .site-header__bar { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .site-header.is-menu-open .site-header__bar { background: #121212; } .site-header.is-menu-open .burger { border-color: #373737; } .site-header.is-menu-open .nav { display: flex; flex-direction: column; gap: 0; position: fixed; inset: 0; justify-self: stretch; z-index: -1; pointer-events: auto; background: #121212; color: #fff; padding: calc(var(--hdr-h) + var(--s4)) var(--gutter) var(--s6); overflow-y: auto; overscroll-behavior: contain; } .nav__group { border-bottom: 1px solid #262626; } .nav__item { width: 100%; justify-content: space-between; padding: 18px 0; border-radius: 0; font-size: 1.125rem; font-weight: 600; } .nav__item:hover, .nav__item[aria-expanded="true"], .nav__item[aria-current] { background: none; color: inherit; } .nav__item .chev { width: 12px; height: 12px; } .mega, .site-header.is-scrolled .mega { position: static; display: none; width: auto; max-width: none; margin: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; } .mega.is-open, .site-header.is-scrolled .mega.is-open { display: block; } .mega__inner, .mega__inner.container, .mega .container[style] { display: block; padding: 0 0 var(--s4); max-width: none; } .mega__group, .mega__feature { margin: 0; } .mega__group h3 + .mega__list { margin: 0; padding: 0 0 var(--s3); } .mega__group > h3 { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 12px 0; font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; cursor: pointer; } .mega__group > h3::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--grey); } .mega__group.is-open > h3::after { content: "\2212"; } .mega__group:has(> h3) .mega__list { display: none; } .mega__group.is-open .mega__list { display: grid; } #mega-res .mega__group > h3 { display: none; } #mega-res .mega__group .mega__list { display: grid; padding: 0; } .mega__link { margin: 0; padding: 10px 0 10px var(--s4); } .mega__link:hover { background: none; } .mega__link b { font-size: 1rem; font-weight: 500; } .mega__feature { background: none; padding: 8px 0; border-radius: 0; gap: 0; } .mega__feature img, .mega__feature-title { display: none; } .mega__feature h3 { padding: 12px 0 4px; } .mega__foot { flex-direction: column; gap: var(--s2); border-top: 1px solid #262626; padding-top: var(--s4); margin-top: var(--s2); } .site-header .nav__foot { display: grid; gap: var(--s4); margin-top: auto; padding-top: var(--s6); } .nav__foot .btn { justify-content: center; } .nav__meta { display: flex; gap: var(--s5); align-items: center; font-weight: 500; } .nav__meta a { color: #fff; text-decoration: none; } } .nav__foot { display: none; } .nav__group--login { display: none; } @media (max-width: 1080px) { .nav__group--login { display: block; } .site-header.is-menu-open .site-header__right .lang-menu.hide-m { display: block; } .site-header.is-menu-open .site-header__right .lang-menu__list { left: 0; right: auto; top: calc(100% + 8px); min-width: 200px; } .site-header__logo img { width: 48px; } } .burger__close { display: none; } .site-header.is-menu-open .burger__open { display: none; } .site-header.is-menu-open .burger__close { display: inline; } @media (max-width: 900px) { .split, .grid-2 { grid-template-columns: 1fr; } .site-footer__cols { grid-template-columns: 1fr 1fr; } .site-footer__cols > :first-child { grid-column: 1 / -1; } } @media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .bento > *, .bento .c3, .bento .c4, .bento .c6 { grid-column: auto; } .bento .r2 { grid-row: auto; } .tile { min-height: 0; border-radius: var(--r-tile); } .hero-media { border-radius: var(--r-tile); } .tile--photo { min-height: 320px; } :root { --bar-h: 68px; --bar-h-float: 60px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal, .chapter.reveal span { opacity: 1; translate: none; } .carousel__track > .reveal { scale: none; } .reveal [data-settle] { scale: none; } :is(.hero__copy, .hero__head, .hero__head > div) > *, :is(.hero__visual, .hero__product, .hero-media--wide) { animation: none; } } .hero { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); } .hero__grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero--wide { padding-bottom: clamp(40px, 5vw, 72px); } .hero__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); } .hero__head .ctas { margin-top: var(--s5); } @media (max-width: 900px) { .hero__head { grid-template-columns: 1fr; } } .hero__copy .lead { margin-top: var(--s5); } .hero__copy .ctas { margin-top: var(--s6); } .hero__visual { position: relative; } .hero__photo { aspect-ratio: 6 / 5; border-radius: var(--r-card); overflow: hidden; } .hero__photo :is(img, video) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; } .hero__product { aspect-ratio: 21 / 9; border-radius: var(--r-card); overflow: hidden; } .hero__product img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; } @media (max-width: 600px) { .hero__product { aspect-ratio: 4 / 3; border-radius: var(--r-tile); } } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } } .screen-tabs__media--photo { padding: 0; overflow: hidden; } .screen-tabs__media--photo img { width: 100%; height: 100%; object-fit: cover; } .screen-tabs__media--bleed { place-items: start; padding: clamp(20px, 5%, 48px) 0 0 clamp(20px, 5%, 48px); overflow: hidden; } .screen-tabs__media--bleed > .device--screen { width: max(960px, 150%); aspect-ratio: auto; } .screen-tabs__media--bleed img { display: block; width: 100%; height: auto; } .faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 5vw, 80px); align-items: start; } @media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } } .price { font-size: clamp(4.5rem, 3.4rem + 4.6vw, 7.5rem); font-weight: 800; letter-spacing: -.035em; line-height: .9; margin: 8px 0 6px; } .price small { font-size: 1.25rem; letter-spacing: -.01em; font-weight: 650; color: var(--ink-2); } .tab-list { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } .tab-list__table { align-self: stretch; } .tab-list__tabs { position: relative; display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--s5); border-radius: calc(var(--r-pill) + 4px); background: var(--bg); } .tab-list__tabs button { height: var(--h-btn-sm); padding: 0 18px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font: 500 .9375rem var(--font); cursor: pointer; transition: background var(--t-fast), color var(--t-lift) var(--ease-soft); } .tab-list__tabs button:hover { color: var(--ink-head); } .tab-list__tabs button[aria-selected="true"] { background: var(--blue); color: #fff; } .tab-list__tabs[style] button { position: relative; z-index: 1; } .tab-list__tabs[style]::before { content: ""; position: absolute; top: 4px; left: 0; width: var(--w); height: var(--h-btn-sm); border-radius: var(--r-pill); background: var(--blue); translate: var(--x) 0; } .tab-list__tabs.is-ready::before { transition: translate var(--t-lift) var(--ease-soft), width var(--t-lift) var(--ease-soft); } .tab-list__tabs[style] button[aria-selected="true"] { background: none; } .tab-list__table { overflow: hidden; } .tab-list__table { padding: var(--s2) var(--card-pad); border-radius: var(--r-card); background: var(--bg); } .tab-list__head { display: flex; justify-content: space-between; padding-right: 0; margin: 0; padding: var(--s4) 0 var(--s3); border-bottom: 1px solid var(--line); font-size: var(--fs-small); font-weight: 500; color: var(--muted); } .tab-list__rows { list-style: none; margin: 0; padding: 0; } .tab-list__rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); } .tab-list__rows li:last-child { border-bottom: 0; } .tab-list__card-name { display: flex; align-items: center; gap: var(--s4); font-weight: 500; color: var(--ink-head); } .tab-list__logo { width: 40px; height: 26px; object-fit: contain; flex: none; } .tab-list__value { display: grid; grid-template-columns: 4.5rem 1.25rem 6.5rem; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; } .tab-list__value > :first-child { text-align: right; } .tab-list__fee { font-weight: 600; color: var(--ink-head); } .tab-list__fee--muted { font-weight: 400; color: var(--muted); } .tab-list__plus { color: var(--muted); text-align: center; } .tab-list__note { text-align: center; margin: var(--s4) 0 0; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); } .tab-list__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 600px) { .tab-list__table { padding: 0 var(--s4); border-radius: var(--r-tile); } .tab-list__rows li { flex-direction: column; align-items: flex-start; gap: var(--s1); } .tab-list__card-name { gap: var(--s3); } .tab-list__value { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0 .3em; padding-left: calc(40px + var(--s3)); } .tab-list__value > :first-child { text-align: left; } } .closing-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: var(--surface); } .promise-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--gap-cards); } .promise-cards:has(> :nth-child(3):last-child) { --n: 3; } .promise-card { display: flex; flex-direction: column; padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); overflow: hidden; } @media (max-width: 900px) { .promise-card .qr-ui__tabs { margin: 0; } .promise-card .device__screen { max-width: 100%; } } .promise-card__title { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .promise-card__text { margin: var(--gap-text) 0 0; color: var(--muted); line-height: var(--lh-text); } .promise-cards__quote { margin-top: var(--gap-cards); } .quote-row--photo.promise-cards__quote { grid-template-columns: calc((100% - 2 * var(--gap-cards)) / 3) minmax(0, 1fr); min-height: 0; } .promise-cards__quote .quote-row__body { gap: var(--s5); padding: var(--card-pad) var(--card-pad) var(--card-pad) var(--s7); } .promise-cards__quote .quote { max-width: 46ch; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; } .promise-cards__quote .who { padding-top: var(--s4); } .promise-cards__quote .who img { width: 40px; height: 40px; } @media (max-width: 900px) { .quote-row--photo.promise-cards__quote { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .promise-cards__quote .quote-row__photo { aspect-ratio: auto; } .promise-cards__quote .quote-row__body { padding: var(--card-pad); } } @media (max-width: 600px) { .quote-row--photo.promise-cards__quote { grid-template-columns: 1fr; } .promise-cards__quote .quote-row__photo { aspect-ratio: 2 / 1; } } .promise-card:has(.promise-card__media) .promise-card__text { margin-bottom: var(--s4); } .promise-card__media { position: relative; margin-top: auto; aspect-ratio: 9 / 4; border-radius: var(--r-tile); overflow: hidden; background: var(--surface); } [data-bg="grey"] .promise-card__media { background: var(--bg); } .promise-card__media > img { width: 100%; height: 100%; object-fit: cover; } .promise-card__media [data-lottie-box] { position: absolute; inset: 0; } @media (max-width: 600px) { .promise-card__media:has([data-lottie-box]) { flex: none; height: 240px; } } @media (max-width: 600px) { .before-after__row--menu, .before-after__row--happy { grid-template-columns: 1fr; } .before-after__row:has([data-lottie-box]) { min-height: 0; } .before-after__row [data-lottie-box] { height: 240px; min-height: 0; width: 100%; margin: 0; } } @media (max-width: 600px) { .before-after__row:has([data-lottie-box]) { justify-content: center; } .before-after__row:has([data-lottie-box]) .before-after__text { height: auto; } } .promise-card__media .screen-tabs__ph { border-radius: inherit; } .promise-card__media--ph { aspect-ratio: auto; height: 328px; background: none; } .promise-card .promise-card__media--art { aspect-ratio: auto; height: 328px; margin: auto calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); border-radius: 0 0 var(--r-card) var(--r-card); background: none; display: flex; justify-content: center; padding-top: var(--s2); } .promise-card__media--art .device { flex: none; } .phone-ui { display: flex; flex-direction: column; align-items: center; padding: 34px var(--s4) 0; text-align: center; } .phone-ui__timer circle:first-child { stroke: var(--card); } .phone-ui__timer circle:last-child { stroke: var(--blue); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--done, .5)); } .phone-ui__limit, .phone-ui__list { align-self: stretch; text-align: left; } .phone-ui__step i:first-child:not(:last-child) { background: none; color: var(--ink-head); box-shadow: inset 0 0 0 1px var(--line-strong); } .is-full .phone-ui__step i:last-child { background: var(--card); color: var(--grey); } .print-ui { flex: none; width: 232px; display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s4); filter: drop-shadow(0 12px 24px rgb(0 0 0 / .08)); } .print-ui__langs { align-self: center; display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--card-inner); } .print-ui__langs button { height: 32px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: var(--fs-small); font-weight: 500; color: var(--muted); cursor: pointer; } .print-ui__langs button[aria-pressed="true"] { background: var(--blue); color: #fff; } .print-ui__langs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .print-ui__paper { flex: 1; padding: var(--s5) var(--s5) 0; background: #fff; color: #121212; font: 500 14px/1.9 ui-monospace, SFMono-Regular, Menlo, "PingFang SC", "Microsoft YaHei", monospace; -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; } .print-ui__head { margin: 0 0 var(--s2); padding-bottom: var(--s2); display: flex; flex-direction: column; align-items: center; border-bottom: 1px dashed var(--line-strong); } .print-ui__head b { font-size: 22px; line-height: 1.4; font-weight: 700; } .print-ui__head span { font-size: 12px; color: var(--muted); } .print-ui__items { list-style: none; margin: 0; padding: 0; } .print-ui__items b { font-weight: 700; } @media (max-width: 900px) { .promise-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promise-cards:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } } @media (max-width: 600px) { .promise-cards { grid-template-columns: 1fr; } .promise-card { border-radius: var(--r-tile); } } .step-row { --icon: 48px; list-style: none; margin: 0; padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--gap-cards); } .step-row:has(> :nth-child(3):last-child) { --n: 3; } .step-row__step { position: relative; display: flex; flex-direction: column; padding-top: var(--s2); } .step-row__step::before { content: ""; position: absolute; top: calc(var(--s2) + var(--icon) / 2); left: calc(var(--icon) + 16px); right: calc(-1 * var(--gap-cards)); height: 1px; background: var(--line-strong); } .step-row__step:last-child::before { display: none; } .step-row__icon { display: grid; place-items: center; width: var(--icon); height: var(--icon); border-radius: 50%; background: var(--ink-head); color: #fff; } .step-row__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .step-row__title { margin: var(--s5) 0 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .step-row__text { margin: var(--gap-text) 0 0; max-width: 30ch; color: var(--muted); line-height: var(--lh-text); } @media (max-width: 900px) { .step-row:not(:has(> :nth-child(3):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s7); } .step-row:not(:has(> :nth-child(3):last-child)) .step-row__step:nth-child(2n)::before { display: none; } } @media (max-width: 600px) { .step-row, .step-row:not(:has(> :nth-child(3):last-child)) { grid-template-columns: 1fr; row-gap: var(--s6); } .step-row:not(:has(> :nth-child(3):last-child)) .step-row__step:nth-child(2n):not(:last-child)::before { display: block; } .step-row__step { display: grid; grid-template-columns: var(--icon) 1fr; column-gap: var(--s4); padding-top: 0; } .step-row__step::before { display: block; top: calc(var(--icon) + 8px); bottom: calc(-1 * var(--s6) + 8px); left: calc(var(--icon) / 2); right: auto; width: 1px; height: auto; } .step-row__step:last-child::before { display: none; } .step-row { border-radius: var(--r-tile); } .step-row__icon { grid-row: 1 / span 2; } .step-row__title { margin-top: 12px; } } .answer-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); } .answer-card { display: flex; flex-direction: column; min-height: 500px; padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); overflow: hidden; } .answer-card--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--s6); } .answer-card--full { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 420px; } .answer-card__label { margin: 0 0 var(--gap-label); font-size: var(--fs-small); line-height: var(--lh-text); font-weight: 500; color: var(--muted); } .answer-card__title { margin: 0; font-size: 1.5rem; line-height: var(--lh-title); font-weight: 700; letter-spacing: -.015em; color: var(--ink-head); text-wrap: balance; } .answer-card__text { margin: var(--gap-text) 0 0; max-width: 40ch; color: var(--ink-2); line-height: var(--lh-text); text-wrap: pretty; } .answer-card__media { position: relative; margin: var(--s6) 0 0; flex: 1; min-height: 240px; border-radius: var(--r-tile); overflow: hidden; } .answer-card--wide .answer-card__media { margin: 0; min-height: 0; } .answer-card__media--photo { background: var(--surface); } .answer-card--wide .answer-card__media--photo { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0; border-radius: 0; } .answer-card__media--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .answer-card__media--art { display: flex; align-items: center; justify-content: center; padding: var(--s5); background: var(--page); } .answer-card__media--ph { background: none; } .answer-card__quote { position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s5); margin: 0; padding: var(--s5); border-radius: var(--r-tile); background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--ink); } .answer-card__quote blockquote { margin: 0; font-size: var(--fs-body); line-height: var(--lh-text); font-weight: 600; color: var(--ink-head); text-wrap: pretty; } .answer-card__quote .who { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); font-size: var(--fs-small); font-weight: 400; line-height: var(--lh-tile); color: var(--muted); } .answer-card__quote .who img { width: 32px; height: 32px; border-radius: var(--r-label); flex: none; } .answer-card__quote .who b { display: block; color: var(--ink-head); font-weight: 600; } .doc-ui { width: min(100%, 272px); margin: 0; padding: var(--s5); border-radius: var(--r-tile); background: var(--card-inner); box-shadow: 0 12px 28px rgb(0 0 0 / .08); font-size: var(--fs-small); line-height: var(--lh-tile); } .doc-ui p { margin: 0; display: flex; justify-content: space-between; gap: var(--s3); white-space: nowrap; } .doc-ui__head { padding-bottom: var(--s4); color: var(--muted); } .doc-ui__head b { color: var(--ink-head); font-size: var(--fs-body); } .doc-ui__row { padding: var(--s3) 0; border-top: 1px solid var(--line); color: var(--ink-2); } .doc-ui__row b { color: var(--ink-head); font-weight: 600; white-space: nowrap; } .doc-ui__row--muted, .doc-ui__row--muted b { color: var(--muted); font-weight: 400; } .grow-ui { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 400px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .grow-ui__item { display: flex; flex-direction: column; gap: 6px; padding: var(--s4); border-radius: var(--r-tile); background: var(--card-inner); box-shadow: inset 0 0 0 1px var(--line); opacity: .6; font-size: var(--fs-small); line-height: var(--lh-tile); } .grow-ui__item b { color: var(--ink-head); font-weight: 600; } .grow-ui__item span { color: var(--muted); } .grow-ui__item.is-now { opacity: 1; box-shadow: 0 10px 24px rgb(0 0 0 / .08); } .grow-ui__item.is-now span { align-self: flex-start; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-label); background: var(--blue); color: #fff; font-size: var(--fs-micro); font-weight: 600; } @media (max-width: 1080px) { .answer-cards { grid-template-columns: 1fr; } .answer-card, .answer-card--wide, .answer-card--full { grid-column: auto; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s6); } .answer-card .answer-card__media { margin: 0; min-height: 0; } .answer-card .answer-card__media--photo { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0; border-radius: 0; } } @media (max-width: 600px) { .answer-card, .answer-card--wide { display: flex; min-height: 0; border-radius: var(--r-tile); } .answer-card .answer-card__media { flex: none; height: 260px; margin-top: var(--s5); } .answer-card .answer-card__media--art { height: auto; padding-block: var(--s6); } .answer-card .answer-card__media--photo { height: 340px; margin: var(--s5) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); } .answer-card__title { font-size: var(--fs-tile); line-height: var(--lh-tile); } } .process-timeline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .process-timeline__head { position: sticky; top: calc(var(--bar-h) + var(--s7)); } .process-timeline__head .chapter { margin-bottom: 0; } .process-timeline__note { margin: var(--s5) 0 0; max-width: 34ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); text-wrap: pretty; } .process-timeline__head .ctas { margin-top: var(--gap-action); } .process-timeline__steps { --num: 48px; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-cards); } .process-timeline__step { position: relative; display: grid; grid-template-columns: var(--num) minmax(0, 1fr); column-gap: var(--s5); } .process-timeline__step:not(:last-child)::before, .process-timeline__step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--num) / 2 - 1px); top: var(--num); height: calc(100% - var(--num) + var(--gap-cards)); width: 2px; background: var(--line-strong); } .process-timeline__step:not(:last-child)::after { background: var(--ink-head); transform: scaleY(var(--fill, 0)); transform-origin: top; } .process-timeline__icon { position: relative; z-index: 1; display: grid; place-items: center; width: var(--num); height: var(--num); color: var(--muted); transition: color var(--t-base); } .process-timeline__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .process-timeline__step.is-past .process-timeline__icon { color: var(--ink-head); } .process-timeline__card { padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); } .process-timeline__step.is-open .process-timeline__card { outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; } .process-timeline__phase { margin: 0 0 var(--gap-label); font-size: var(--fs-small); line-height: var(--lh-text); font-weight: 500; color: var(--muted); } .process-timeline__title { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; letter-spacing: -.01em; color: var(--ink-head); } .process-timeline__text { margin: var(--gap-text) 0 0; max-width: 52ch; color: var(--ink-2); line-height: var(--lh-text); text-wrap: pretty; } .process-timeline__you { display: flex; gap: var(--s3); margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); } .process-timeline__you b { flex: none; color: var(--ink-head); font-weight: 600; } .process-timeline__step--optional { margin-top: var(--s7); } .process-timeline__step:has(+ .process-timeline__step--optional)::before { height: calc(100% - var(--num) + var(--gap-cards) + var(--s7)); background: repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 12px); } .process-timeline__step:has(+ .process-timeline__step--optional)::after { display: none; } .process-timeline__step--optional .process-timeline__icon, .process-timeline__step--optional.is-past .process-timeline__icon { color: var(--muted); } .process-timeline__step--optional .process-timeline__card { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); } @media (max-width: 900px) { .process-timeline { grid-template-columns: 1fr; gap: var(--gap-head); } .process-timeline__head { position: static; } } @media (max-width: 600px) { .process-timeline__steps { --num: 36px; } .process-timeline__step { column-gap: var(--s3); } .process-timeline__icon svg { width: 22px; height: 22px; } .process-timeline__card { border-radius: var(--r-tile); } .process-timeline__you { flex-direction: column; gap: 2px; } } .blog-hero, .article-hero { padding-block: var(--s7); } .blog-hero .chapter { margin-bottom: var(--s3); } .post-feature { display: grid; grid-template-columns: 6fr 5fr; gap: var(--s3); padding: var(--s3); border-radius: var(--r-card); background: #fff; } .post-feature__media { display: block; aspect-ratio: 16 / 9;  border-radius: calc(var(--r-card) - var(--s3)); overflow: hidden; background: var(--surface); } .post-feature__media :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-zoom) var(--ease-soft); } .post-feature:hover .post-feature__media :is(img, video) { transform: scale(1.03); } .post-feature__body { display: flex; flex-direction: column; justify-content: center; padding: var(--card-pad); } .post-feature__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-title); letter-spacing: -.015em; font-weight: 700; text-wrap: balance; } .post-feature__title a { color: var(--ink-head); text-decoration: none; } .post-feature__title .badge-new { margin-left: 6px; vertical-align: 5px; } .post-feature__title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } .post-feature__text { margin: var(--gap-text) 0 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: 44ch; } .post-feature__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--gap-action) 0 0; font-size: var(--fs-small); color: var(--muted); } @media (max-width: 900px) { .post-feature { grid-template-columns: 1fr; } .post-feature__body { padding: var(--s4) var(--s3) var(--s3); } } @media (max-width: 600px) { .post-feature, .post-feature__media { border-radius: var(--r-tile); } .post-feature__text { font-size: var(--fs-body); } } .blog-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--gap-head); flex-wrap: wrap; } .blog-tools__chips { display: flex; gap: var(--s2); flex-wrap: wrap; } .blog-search { position: relative; display: block; width: min(340px, 100%); color: var(--muted); } .blog-search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; pointer-events: none; } .blog-search input { width: 100%; height: var(--h-btn); padding: 0 var(--s4) 0 42px; border: 0; border-radius: var(--r-pill); background: var(--bg); color: var(--ink); font: inherit; font-size: .9375rem; } .blog-search input::placeholder { color: var(--ink-2); opacity: .8; } .blog-search input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--gap-cards); list-style: none; margin: 0; padding: 0; } .post-card > a { display: flex; flex-direction: column; color: inherit; text-decoration: none; border-radius: var(--r-card); } .post-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: var(--r-card); overflow: hidden; background: var(--bg); } .post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); } .post-card > a:hover .post-card__media img, .post-card > a:focus-visible .post-card__media img { transform: scale(1.04); } .post-card__ph { font-size: var(--fs-small); color: var(--ink-2); } .post-card__media > .post-card__logo { position: static; width: 88px; height: 88px; border-radius: var(--r-tile); } .post-card__media > .post-card__logo--wordmark { width: 55%; height: auto; border-radius: 0; object-fit: contain; } .post-card__meta { margin-top: var(--gap-label); font-size: var(--fs-small); color: var(--ink-2); } .post-card__title { margin-top: var(--s4); font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); text-wrap: pretty; } .post-card > a:hover .post-card__title { text-decoration: underline; text-underline-offset: 4px; } .post-grid__empty { padding: var(--s8) 0; text-align: center; color: var(--ink-2); } .post-grid__empty p { margin: 0; } .post-grid__empty-title { font-size: var(--fs-tile); font-weight: 600; color: var(--ink-head); margin-bottom: var(--s2) !important; } .post-grid__reset { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .post-grid__foot { margin-top: var(--s7); } .post-grid__foot { justify-content: center; } @media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--gap-cards); } } @media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } .post-card__media { border-radius: var(--r-tile); } .blog-search { width: 100%; } } .article-hero__crumb { margin: 0 0 var(--s4); padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); } .article-hero__crumb a { color: var(--ink-2); text-decoration: none; } .article-hero__crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .article-hero__crumb span { margin-inline: 6px; color: var(--line-strong); } .article-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; } .article-hero__lead { margin: var(--s5) 0 0; max-width: 48ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); text-wrap: pretty; } .article-hero__meta { margin: var(--s4) 0 0; font-size: var(--fs-small); color: var(--ink-2); } .article-hero__media { aspect-ratio: 16 / 9; } @media (max-width: 900px) { .article-hero__grid { grid-template-columns: 1fr; gap: var(--s6); } } @media (max-width: 600px) { .article-hero__media { border-radius: var(--r-tile); } } .article__grid { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 52rem); gap: var(--s8); align-items: start; } .article__toc { position: sticky; top: calc(var(--hdr-h) + var(--s5)); font-size: var(--fs-small); } .article__toc-title { margin: 0 0 var(--s3); font-weight: 600; color: var(--ink-head); } .article__toc ol, .article__contents ol { list-style: none; margin: 0; padding: 0; } .article__toc li + li { margin-top: 2px; } .article__toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--line); color: var(--ink-2); text-decoration: none; line-height: var(--lh-tile); transition: color var(--t-base), border-color var(--t-base); } .article__toc a:hover { color: var(--ink); } .article__toc a[aria-current="true"] { border-left-color: var(--blue); color: var(--ink-head); font-weight: 600; } .article__contents { display: none; margin-bottom: var(--s6); border-radius: var(--r-tile); background: var(--bg); } .article__contents summary { padding: var(--s4) var(--s5); font-weight: 600; cursor: pointer; } .article__contents ol { padding: 0 var(--s5) var(--s4); } .article__contents li + li { margin-top: var(--s2); } .article__contents a { color: var(--ink-2); text-decoration: none; } .article__contents a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .prose { font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-2); } .prose > h2 { margin: var(--s8) 0 var(--s4); font-size: var(--fs-h3); line-height: var(--lh-title); letter-spacing: -.015em; font-weight: 700; color: var(--ink-head); scroll-margin-top: calc(var(--hdr-h) + var(--s5)); text-wrap: balance; } .prose > p { margin: 0 0 var(--s5); text-wrap: pretty; } .article__answer { margin: 0 0 var(--s7); padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); } .article__answer p { margin: 0; } .article__answer-label { margin-bottom: var(--gap-label) !important; font-size: var(--fs-small); font-weight: 600; color: var(--ink-head); } .article__figure { margin: var(--s7) 0; } .article__statement { margin: var(--s7) 0 !important; padding: clamp(32px, 5vw, 64px) var(--card-pad); border-radius: var(--r-card); background: #fff; font-size: var(--fs-h3); line-height: var(--lh-title); letter-spacing: -.015em; font-weight: 700; color: var(--ink-head); text-wrap: balance; } .article__wide { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: var(--s7) 0; border-radius: var(--r-card); } .article__wide--fit { aspect-ratio: auto; object-fit: contain; } .article__wide--logo { width: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; } .article__wide--small { width: min(100%, 360px); margin-left: auto; margin-right: auto; } .article__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-cards); margin: var(--s7) 0; } .article__pair img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); } .article__figure img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); } .article__figure figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--ink-2); } .article__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-top: var(--s8); padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); } .article__cta-title { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); text-wrap: balance; } @media (max-width: 1080px) { .article__grid { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: var(--s7); } } @media (max-width: 900px) { .article__grid { grid-template-columns: minmax(0, 1fr); } .article__toc { display: none; } .article__contents { display: block; } .article__cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .prose { font-size: var(--fs-body); line-height: var(--lh-text); } .prose > h2 { margin-top: var(--s7); font-size: 1.5rem; } .article__figure img, .article__wide, .article__pair img, .article__statement { border-radius: var(--r-tile); } .article__statement { font-size: 1.5rem; } .article__pair { gap: var(--s2); } } .story-uses { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; } .story-uses a:hover { box-shadow: inset 0 0 0 1px var(--line-strong); } .story-hero__media { aspect-ratio: 4 / 3; } .story-facts { position: sticky; top: calc(var(--hdr-h) + var(--s5)); padding: var(--card-pad); border-radius: var(--r-card); background: #fff; font-size: var(--fs-small); } .story-facts__logo { display: block; width: 64px; height: 64px; border-radius: var(--r-tile); margin-bottom: var(--s5); } .story-facts dl { margin: 0; } .story-facts dl > div + div { margin-top: var(--s4); } .story-facts dt { font-weight: 600; color: var(--ink-head); } .story-facts dd { margin: 2px 0 0; color: var(--ink-2); line-height: var(--lh-text); } .story-facts a:not(.btn) { color: var(--ink-head); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } .story-facts a:hover { text-decoration-color: currentColor; } .story-quote { margin: var(--s7) 0; padding: clamp(28px, 4vw, 48px) var(--card-pad); border-radius: var(--r-card); background: #fff; } .story-quote blockquote { margin: 0; } .story-quote blockquote p { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-title); letter-spacing: -.015em; font-weight: 700; color: var(--ink-head); text-wrap: balance; } .story-quote figcaption { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); font-size: var(--fs-small); color: var(--ink-2); } .story-quote figcaption img { width: 40px; height: 40px; border-radius: 8px; } .story-quote figcaption b { color: var(--ink-head); font-weight: 600; } @media (max-width: 900px) { .story-facts { position: static; margin-bottom: var(--s6); } } @media (max-width: 600px) { .story-facts, .story-quote { border-radius: var(--r-tile); } .story-quote blockquote p { font-size: 1.375rem; } } .article__video { margin: var(--s7) 0; } .article__video-play { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #121212; } .article__video-play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity var(--t-base), transform var(--t-zoom) var(--ease-soft); } .article__video-play:hover img { opacity: 1; transform: scale(1.02); } .article__video-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--ink-head); box-shadow: 0 8px 24px rgb(0 0 0 / .25); transition: scale var(--t-base) var(--ease-out); } .article__video-play:hover .article__video-btn { scale: 1.06; } .article__video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-card); } .prose > :is(ul, ol) { margin: 0 0 var(--s5); padding-left: 1.25em; } .prose > :is(ul, ol) li + li { margin-top: var(--s2); } .prose a { color: var(--ink-head); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } .prose a:hover { text-decoration-color: currentColor; } .prose > .article__cta a, .prose > .article__contents a { text-decoration: none; } .prose a.btn--primary { color: #fff; } .article__wide, .article__pair img, .article__figure img { height: auto; } .article__quote { margin: var(--s7) 0; padding-left: var(--s5); border-left: 3px solid var(--blue); } .article__quote p { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-lead); font-weight: 600; color: var(--ink-head); } @media (max-width: 600px) { .article__video-play, .article__video iframe { border-radius: var(--r-tile); } } .legal .prose > h3 { margin: var(--s5) 0 var(--s2); font-size: var(--fs-body); font-weight: 600; color: var(--ink-head); } .legal .prose > p { margin-bottom: var(--s3); } .legal .prose > :is(ul, ol) { margin-bottom: var(--s4); } .legal__contact { margin-top: var(--s8) !important; padding-top: var(--s5); color: var(--ink-2); } .error-hero .ctas { margin-top: var(--s6); } .error-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .error-help { margin: var(--s6) 0 0; color: var(--ink-2); } .error-help a { color: var(--ink-head); } .role-list { margin: 0; padding: 0; list-style: none; } .role-list li + li { margin-top: var(--s2); } .role-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s5); padding: var(--s5) var(--card-pad); border-radius: var(--r-card); background: var(--bg); color: var(--ink-2); text-decoration: none; transition: transform var(--t-lift) var(--ease-soft), box-shadow var(--t-lift) var(--ease-soft), background-color var(--t-base); } .role-list a::after { content: none; } .role-list__meta { font-size: var(--fs-small); } .role-list__go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--blue); font-weight: 600; transition: transform var(--t-base) var(--ease-out); } .role-list a:hover .role-list__go { transform: translateX(3px); } .role-list__lead { margin: 0 0 var(--s6); color: var(--ink-2); } .role-list a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .role-list b { font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .section--panel[data-bg="white"] .role-list a { background: var(--canvas); } .role-facts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; } .role-facts li { display: inline-flex; align-items: center; height: var(--h-btn-sm); padding: 0 14px; border-radius: var(--r-tile); background: #fff; color: var(--ink-head); font-size: .9375rem; font-weight: 500; } [data-section="about/hero"] .lead { margin-top: var(--s5); } .careers-hero .ctas, [data-section="contact/hero"] .ctas, [data-section="about/hero"] .ctas { margin-top: var(--s6); } .apply__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; } .apply__intro .lead { color: var(--ink-2); } .apply__intro .lead b { color: var(--ink-head); font-weight: 600; } .apply-form { min-height: 480px; padding: var(--s5); border-radius: var(--r-card); background: #fff; } .apply-form.is-loaded .apply-form__fallback { display: none; } .apply-form__fallback { margin: 0; color: var(--ink-2); } .vacancy-facts .btn { margin-top: var(--s5); } @media (max-width: 900px) { .vacancy-facts { display: none; } .apply__grid { grid-template-columns: 1fr; gap: var(--s5); } } @media (max-width: 600px) { .apply-form { padding: var(--s3); } } .vacancy { font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-2); } .vacancy h2 { margin: var(--s7) 0 var(--s4); font-size: var(--fs-h3); line-height: var(--lh-title); letter-spacing: -.015em; font-weight: 700; color: var(--ink-head); scroll-margin-top: calc(var(--hdr-h) + var(--s5)); } .vacancy p { margin: 0 0 var(--s4); } .vacancy__intro { color: var(--ink-head); text-wrap: pretty; } .vacancy ul { margin: 0 0 var(--s4); } .vacancy ul { padding-left: 1.2em; list-style: disc; } .vacancy li + li { margin-top: var(--s2); } .vacancy li::marker { color: var(--ink-2); } .vacancy__offer { max-width: 46rem; margin-top: var(--s7); padding: var(--card-pad); border-radius: var(--r-card); background: #fff; } .vacancy__offer h2 { margin-top: 0; } .vacancy__offer ul { margin: 0; padding: 0; list-style: none; } .vacancy__offer li { position: relative; padding-left: 26px; } .vacancy__offer li + li { margin-top: var(--s3); } .vacancy__offer li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); } .vacancy-grid { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); } .vacancy p, .vacancy__intro, .vacancy ul { max-width: 68ch; } .careers-hero .article-hero__text .lead { font-size: var(--fs-lead); } .careers-hero .story-hero__media { aspect-ratio: 5 / 4; } @media (max-width: 900px) { .careers-hero .story-hero__media { aspect-ratio: 4 / 3; } } .life { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; } .life__photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: var(--gap-cards); } .life__photos img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); } .life__photos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .life__offer { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; } .life__offer li { display: flex; flex-direction: column; gap: var(--s1); } .life__offer b, .life__office b { font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .life__offer span, .life__office span { color: var(--ink-2); } .life__office { display: flex; flex-direction: column; gap: var(--s1); margin: var(--s7) 0 0; padding-top: var(--s5); } .life__office .link { margin-top: var(--s3); } @media (max-width: 900px) { .life { grid-template-columns: 1fr; gap: var(--s6); } .vacancy-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .vacancy h2 { font-size: 1.5rem; } } @media (max-width: 600px) { .role-list a { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); padding: var(--s4) var(--s5); border-radius: var(--r-tile); } .role-list b { grid-column: 1; } .role-list__meta { grid-column: 1; grid-row: 2; font-size: var(--fs-small); } .role-list__go { grid-column: 2; grid-row: 1 / span 2; } } .article__pair--links { align-items: start; } .device-link { display: flex; flex-direction: column; gap: var(--s3); color: var(--ink-head); text-decoration: none !important; } .device-link img { transition: transform var(--t-zoom) var(--ease-soft), box-shadow var(--t-base); } .device-link:hover img, .device-link:focus-visible img { transform: scale(1.02); box-shadow: 0 0 0 3px var(--blue); } .device-link__name { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; } .device-link__name::after { content: "→"; color: var(--blue); transition: transform var(--t-base) var(--ease-out); } .device-link:hover .device-link__name::after { transform: translateX(4px); } .device-link:hover .device-link__name { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 600px) { .device-link__name { font-size: var(--fs-body); } } .contact-route__lines dt { font-size: var(--fs-small); color: var(--muted); } .contact-route__lines a { color: inherit; text-decoration: none; } .contact-route__lines a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } .contact-route__hours { font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); } .contact-route__hours b { display: block; margin-bottom: 2px; font-size: var(--fs-body); font-weight: 600; color: var(--ink-head); } .contact-routes__more { margin: var(--s5) 0 0; color: var(--ink-2); } .contact-routes-section { padding-top: var(--s7); } .contact-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); margin: 0; padding: 0; list-style: none; } .contact-route { display: flex; flex-direction: column; gap: var(--gap-text); padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); color: var(--ink-2); } .contact-route__title { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .contact-route__text { margin: 0; } .contact-route__lines { display: grid; gap: var(--s4); margin: var(--s5) 0 0; } .contact-route__lines dd { margin: 2px 0 0; font-size: var(--fs-lead); line-height: 1.35; font-weight: 600; color: var(--ink-head); font-variant-numeric: tabular-nums; } .contact-route__foot { margin: auto 0 0; padding-top: var(--s5); } .visit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: center; } .visit__photo { display: block; border-radius: var(--r-card); overflow: hidden; } .visit__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); } .visit__photo:hover img { transform: scale(1.03); } .visit .chapter { margin-bottom: var(--s5); } .visit__address { font-style: normal; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-head); } .visit__meta { margin: var(--s4) 0 var(--s5); font-size: var(--fs-small); color: var(--ink-2); } @media (max-width: 900px) { .visit { grid-template-columns: 1fr; gap: var(--s6); } } @media (max-width: 600px) { .contact-routes { grid-template-columns: 1fr; } .contact-route, .visit__photo { border-radius: var(--r-tile); } } .feature-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap-cards); } .feature-row .post-feature { grid-template-columns: minmax(0, 1fr); align-content: start; } .feature-row .post-feature__media { aspect-ratio: 16 / 8; } .feature-row .post-feature__body { padding: var(--s5) var(--s4) var(--s4); } .feature-side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap-cards); margin: 0; padding: 0; list-style: none; } .side-card > a:hover .side-card__media img { transform: scale(1.04); } .side-card > a:hover .side-card__title { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 900px) { .feature-row { grid-template-columns: minmax(0, 1fr); } .feature-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; } } @media (max-width: 600px) { .feature-side { grid-template-columns: minmax(0, 1fr); } } .ticket-stage { display: grid; place-items: center; min-height: 420px; } .ticket { width: min(380px, 100%); border-radius: var(--r-card); background: #fff; overflow: hidden; box-shadow: 0 24px 48px rgb(18 18 18 / .12); rotate: -2deg; transition: transform 600ms var(--ease-out), opacity 400ms var(--ease-out); } .ticket__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--s3); padding: var(--s4) var(--s5); background: #121212; color: #fff; } .ticket__head b { font-size: var(--fs-tile); font-weight: 600; } .ticket__head span { grid-row: 2; font-size: var(--fs-small); color: #cfcfcf; } .ticket__timer { grid-row: 1 / span 2; grid-column: 2; padding: 6px 12px; border-radius: var(--r-tile); background: #262626; font-size: var(--fs-lead); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--t-base); } .ticket__timer.is-late { background: var(--blue); } .ticket__items { margin: 0; padding: var(--s3) var(--s5); list-style: none; } .ticket__items li { display: grid; grid-template-columns: 2.25em 1fr; gap: var(--s2); padding: var(--s3) 0; } .ticket__items li + li { border-top: 1px dashed var(--line); } .ticket__qty { font-weight: 600; color: var(--ink-head); } .ticket__items b { display: block; font-weight: 600; color: var(--ink-head); } .ticket__items small { font-size: var(--fs-small); color: var(--ink-2); } .ticket__foot { padding: 0 var(--s5) var(--s5); } .ticket__bump { width: 100%; height: var(--h-btn); border: 0; border-radius: var(--r-tile); background: var(--bg); color: var(--ink-head); font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--t-base), transform var(--t-fast); } .ticket__bump:hover { background: #e2e2e6; } .ticket__bump:active { transform: scale(.98); } .ticket.is-bumped { transform: translate(40%, -60%) rotate(12deg); opacity: 0; } .ticket-done { display: flex; flex-direction: column; gap: var(--s1); max-width: 320px; margin: 0; text-align: center; color: var(--ink-2); } .ticket-done b { font-size: var(--fs-h3); line-height: var(--lh-title); color: var(--ink-head); } .error-hero .ctas { margin-top: var(--s7); } @media (prefers-reduced-motion: reduce) { .ticket { rotate: none; } .ticket.is-bumped { transform: none; } } .promise-cards--3 { --n: 3; } [data-bg="grey"] .promise-card { background: var(--surface); } .promise-cards--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .promise-cards--bento > .promise-card { grid-column: span 2; } .promise-cards--bento > .promise-card--wide { grid-column: span 4; } @media (max-width: 900px) { .promise-cards--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promise-cards--bento > .promise-card { grid-column: span 1; } .promise-cards--bento > .promise-card--wide { grid-column: span 2; } } @media (max-width: 600px) { .promise-cards--bento { grid-template-columns: minmax(0, 1fr); } .promise-cards--bento > .promise-card--wide { grid-column: auto; } } .promise-cards--feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "a f b" "c f d"; } .promise-cards--feature > :nth-child(1) { grid-area: f; } .promise-cards--feature > :nth-child(2) { grid-area: a; } .promise-cards--feature > :nth-child(3) { grid-area: c; } .promise-cards--feature > :nth-child(4) { grid-area: b; } .promise-cards--feature > :nth-child(5) { grid-area: d; } .promise-card--feature { position: relative; overflow: hidden; isolation: isolate; container-type: inline-size; background: #dcf0ff;  text-align: center; } .promise-card--feature .promise-card__title { font-size: var(--fs-h3); line-height: var(--lh-title); font-weight: 700; letter-spacing: -.02em; } .promise-card--feature .promise-card__text { max-width: 34ch; margin-inline: auto; color: var(--ink-2); } .promise-cards--feature .promise-card :is(.promise-card__media--art, .promise-card__media--photo) { height: 300px; } .promise-card__media--feature { --phone-w: min(352px, 100cqw - 2 * var(--s6)); --phone-top: max(var(--s6), 100% - var(--phone-w) * 2.067 + var(--s8)); position: relative; flex: 1; min-height: calc(var(--phone-w) * 1.6); aspect-ratio: auto; margin: var(--s5) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); border-radius: 0; background: none; overflow: hidden; container-type: inline-size; } .promise-card__word { position: absolute; z-index: -1; left: 50%; top: calc(var(--phone-top) + var(--phone-w) * .3); translate: -50% 0; white-space: nowrap; font-size: min(27cqw, 200px); line-height: 1; font-weight: 700; letter-spacing: -.05em; color: rgb(36 171 255 / .2); pointer-events: none; } .promise-card__media--feature > .device--phone { position: absolute; left: 50%; top: var(--phone-top); translate: -50% 0; width: var(--phone-w); height: auto; aspect-ratio: 300 / 620; border-radius: 46px; padding: 10px; } .promise-card__media--feature .device__screen { border-radius: 36px; } .promise-card__media--feature .device--phone::before { content: ""; position: absolute; z-index: 1; top: 22px; left: 50%; translate: -50% 0; width: 84px; height: 24px; border-radius: 12px; background: #121212; } .qr-ui { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; padding: 0 12px; text-align: left; font-size: 11px; line-height: 1.3; background: #fff; } .qr-ui__status { margin: 0; height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 13px; } .qr-ui > * { flex: none; } .qr-ui__status span { width: 22px; height: 11px; border-radius: 3px; background: #121212; } .qr-ui__top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 10px; } .qr-ui__top > b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; } .qr-ui__icons { display: flex; gap: 6px; } .qr-ui__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #f2f2f4; } .qr-ui__ic svg { width: 16px; height: 16px; fill: none; stroke: #121212; stroke-width: 1.7; stroke-linecap: round; } .qr-ui__tabs { flex: none; list-style: none; margin: 0 -12px; padding: 0 12px 2px; display: flex; gap: 6px; overflow: hidden; } .qr-ui__tabs li { flex: none; padding: 5px 10px; border-radius: 999px; background: #eaf6ff; color: var(--blue); font-weight: 600; } .qr-ui__tabs .is-on { box-shadow: inset 0 0 0 1px var(--blue); background: #fff; } .qr-ui__head { margin: 14px 0 10px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .qr-ui__head i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #f5f5f7; font-style: normal; font-size: 8px; letter-spacing: -1px; color: #e8590c; } .qr-ui__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .qr-ui__grid li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 6px 7px; border-radius: 10px; background: #f7f7f9; text-align: center; } .qr-ui__price { position: absolute; top: 7px; left: 7px; padding: 2px 6px; border-radius: 999px; background: #fff; font-size: 9px; font-weight: 700; } .qr-ui__add { position: absolute; top: 6px; right: 7px; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--blue); display: grid; place-items: center; color: var(--blue); font-size: 13px; line-height: 1; font-weight: 500; } .qr-ui .qr-ui__img { width: 56%; height: auto; aspect-ratio: 1; margin-top: 12px; object-fit: contain; } .qr-ui__grid b { margin-top: 4px; font-size: 11px; font-weight: 700; } .qr-ui__grid small { margin-top: 2px; font-size: 8.5px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qr-ui__allergens { display: flex; gap: 2px; margin-top: 4px; } .qr-ui .qr-ui__allergens img { width: 11px; height: 11px; } .qr-ui__foot { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 0; padding: 12px 0 80px; background: #fff; box-shadow: 0 -10px 0 #fff, 0 -11px 0 #ececf0; } .qr-ui__round { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--blue) calc(var(--done) * 100%), #e6e6ea 0); mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent 0 10%); } .qr-ui__bar { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; } .qr-ui__bar > * { white-space: nowrap; } .qr-ui__bar > :nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .qr-ui__count { padding: 5px 9px; border-radius: 8px; background: var(--blue); color: #fff; font-variant-numeric: tabular-nums; } .qr-ui__btn { margin-left: auto; padding: 8px 12px; border-radius: 8px; background: var(--blue); color: #fff; } .promise-card__media--feature:has(> .hand-shot) { min-height: calc(var(--phone-w) * 1.9); } .promise-card__media--feature:has(> .hand-shot) .promise-card__word { top: calc(100% - min(100% - var(--s4), 860px) * .89); translate: -50% -50%; } .hand-shot { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: calc(100% - var(--s4)); max-height: 860px; aspect-ratio: 329 / 692; container-type: inline-size; } .hand-shot > img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 24px 30px rgb(18 18 18 / .12)); } .hand-shot__print { position: absolute; left: 27.7%; top: 38.6%; width: 38%; height: 28.6%; padding: 3.2cqw 3cqw; display: flex; flex-direction: column; font-size: 2.85cqw; line-height: 1.3; color: #1a1a1a; text-align: left; mix-blend-mode: multiply; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .hand-shot__print p, .hand-shot__print ul { margin: 0; } .hand-shot__no { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: .5em; border-bottom: 1px dashed #9a9a9a; } .hand-shot__no b { font-family: var(--font, Inter, sans-serif); font-size: 2.4em; line-height: 1; font-weight: 800; letter-spacing: -.03em; } .hand-shot__no span { font-size: .8em; color: #555; } .hand-shot__name { margin-top: .6em !important; font-weight: 700; } .hand-shot__print ul { list-style: none; padding: 0; margin-top: .3em; } .hand-shot__venue { margin-top: auto !important; padding-top: .4em; border-top: 1px dashed #9a9a9a; text-align: center; font-size: .8em; color: #555; } .promise-card__media--feature:has(> .device--kiosk) .promise-card__word { top: 0; font-size: min(22cqw, 150px); } .promise-card__media--feature > .device--kiosk { position: absolute; left: 50%; top: max(var(--phone-top), min(22cqw, 150px) * .8); translate: -50% 0; width: calc(var(--phone-w) * 1.08); aspect-ratio: 9 / 16; padding: 12px 12px 40px; border-radius: 30px; } .device--kiosk-white { background: #fbfbfd; box-shadow: inset 0 0 0 1px rgb(18 18 18 / .06), var(--shadow-device); } .device--kiosk-white .device__screen { border-radius: 16px; box-shadow: 0 0 0 1px rgb(18 18 18 / .08); } .qr-ui--kiosk { padding: 14px 14px 0; } .qr-ui__lang { padding: 4px 9px; border-radius: 999px; background: #f2f2f4; font-size: 10px; font-weight: 600; } .qr-ui--kiosk .qr-ui__head { margin: 10px 0 2px; font-size: 18px; } .qr-ui__sub { margin: 0 0 12px; font-size: 11px; color: var(--muted); } .qr-ui__grid--stores li { padding: 10px 6px 9px; } .qr-ui__grid--stores li.is-on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); } .qr-ui__grid--stores .qr-ui__img { margin-top: 0; width: 60%; } .qr-ui__cart { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .qr-ui__store { padding: 9px 10px; border-radius: 10px; background: #f7f7f9; } .qr-ui__store-head { margin: 0 0 6px; display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); } .qr-ui__store-head span { font-size: 12px; font-weight: 600; color: #121212; } .qr-ui__store-head b { color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .qr-ui__line { margin: 0; display: flex; align-items: center; gap: 9px; } .qr-ui .qr-ui__line img { flex: none; width: 38px; height: 38px; object-fit: contain; } .qr-ui__line span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .qr-ui__line b { font-size: 12px; font-weight: 700; } .qr-ui__line small { font-size: 10px; color: var(--muted); } .qr-ui__line em { font-style: normal; font-size: 12px; font-weight: 600; } .qr-ui__split { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ececf0; } .qr-ui__split p { margin: 0; display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; } .qr-ui__split b { font-size: 16px; } .qr-ui__note { margin: 8px 0 0; text-align: center; font-size: 10px; color: var(--muted); } .qr-ui__split .qr-ui__split-note { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; color: var(--muted); } .qr-ui__cta { margin: 14px 0 0; padding: 11px; border-radius: 10px; background: var(--blue); color: #fff; text-align: center; font-size: 13px; font-weight: 600; } @media (max-width: 1080px) { .promise-cards--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "f f" "a b" "c d"; } } @media (max-width: 600px) { .promise-cards--feature { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; } .promise-cards--feature > :nth-child(n) { grid-area: auto; } .promise-card__media--feature { --phone-w: min(280px, 100vw - 2 * var(--gutter) - 2 * var(--s5));  min-height: calc(var(--phone-w) * 1.8); } } .promise-card__media--art:has(> .device-group) { container-type: inline-size; } .device-group > .device:not(:nth-child(2)) { margin-top: var(--s5); scale: .9; opacity: .85; } .device-group > .device:first-child { transform: rotateY(18deg); transform-origin: right center; } .device-group > .device:last-child { transform: rotateY(-18deg); transform-origin: left center; } .device-group > .device:nth-child(2) { z-index: 1; margin-inline: clamp(-120px, (100cqw - 728px) / 2, var(--s4)); } .ui-stack { position: relative; flex: none; width: min(300px, 100% - 2 * var(--card-pad)); height: 100%; } .ui-card { position: absolute; margin: 0; padding: var(--s4) var(--s5); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-2); color: var(--ink-head); } .ui-card--behind { scale: .9; opacity: .6; box-shadow: none; } .ui-card__label { margin: 0; font-size: 12px; line-height: var(--lh-tile); color: var(--muted); } .ui-card__title { margin: 0; font-size: 17px; line-height: var(--lh-tile); font-weight: 700; } .ui-card__big { margin: var(--s1) 0 0; font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ui-card__big span { font-size: 24px; color: var(--muted); letter-spacing: 0; } .ui-card__bar { display: block; height: 8px; margin-top: var(--s4); border-radius: 4px; background: linear-gradient(90deg, var(--blue) calc(var(--done, .5) * 100%), var(--card) 0); } .ui-card__note { margin: var(--s2) 0 0; font-size: 13px; font-weight: 500; color: var(--blue); } .ui-card--limit { top: var(--s5); left: 0; width: 84%; } .ui-card--row { top: 196px; right: 0; width: 79%; padding-inline: var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .ui-card--row p { margin: 0; display: flex; flex-direction: column; } .ui-card--row p b { font-size: 15px; white-space: nowrap; } .ui-card--row p span { font-size: 12px; color: var(--muted); } .ui-card--dish.ui-card--behind { top: 0; right: 0; width: 74%; transform-origin: top right; } .ui-card--dish:not(.ui-card--behind) { top: 112px; left: 0; width: 90%; } .ui-card--dish .ui-card__label { margin-top: var(--s3); } .ui-card--behind .ui-card__title { font-size: 15px; } .ui-timer { position: absolute; top: var(--s3); left: 50%; translate: -50% 0; width: 228px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; } .ui-timer circle:first-child { stroke: var(--surface); } .ui-timer circle:last-child { stroke: var(--blue); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--done, .5)); } .ui-card--chip { bottom: var(--s5); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5) var(--s3) var(--s3); border-radius: var(--r-pill); white-space: nowrap; } .ui-card--chip i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; font-size: 15px; } .ui-card--chip span { display: flex; flex-direction: column; font-size: 12px; line-height: var(--lh-tile); color: var(--muted); } .ui-card--chip b { font-size: 14px; color: var(--ink-head); } .promise-card .print-ui__paper { rotate: -2deg; transform-origin: top center; } .ui-card .phone-ui__list { margin-top: var(--s2); } .ui-card .phone-ui__list li:last-child { border-bottom: 0; padding-bottom: 0; } .ui-card--row > b { font-size: 15px; font-variant-numeric: tabular-nums; } .ui-card--status { top: var(--s3); left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); } .ui-card--status ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); } .ui-card--status li { width: fit-content; padding: 2px 10px; border-radius: var(--r-label); font-size: 22px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-head); } .ui-card--status li.is-new { background: var(--blue); color: #fff; } .ui-card--status .ui-card__label { padding-left: 10px; } .promise-card .promise-card__media--board { justify-content: flex-start; padding: var(--s2) 0 0 var(--card-pad); } .promise-card__media--board > .device--screen { width: 960px; aspect-ratio: auto; } .promise-card__media--board img { display: block; width: 100%; height: auto; } .phone-ui__list .phone-ui__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .walkthrough { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: var(--gap-foot) var(--s7); align-items: stretch; } .walkthrough__moments { margin: 0; padding: calc(var(--card-pad) - var(--s4)) 0 0; list-style: none; display: flex; flex-direction: column; } .walkthrough__moment { --dot: calc(var(--s4) + 13px); position: relative; padding-left: var(--s6); } .walkthrough__moment::before { content: ""; position: absolute; z-index: 2; left: 2px; top: calc(var(--dot) - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--canvas); box-shadow: inset 0 0 0 2px var(--line-strong); transition: box-shadow var(--t-base); } .walkthrough__moment::after { content: ""; position: absolute; left: 7px; top: var(--dot); height: 100%; width: 2px; background: var(--line); } .walkthrough__moment:last-child::after { height: calc(100% - var(--dot) - var(--s5)); } .walkthrough__moment:last-child:not(.is-open)::after { display: none; } .walkthrough__moment.is-done::before { box-shadow: inset 0 0 0 2px var(--ink-head); } .walkthrough__moment.is-open::before { box-shadow: inset 0 0 0 4px var(--ink-head); } .walkthrough__tab { display: flex; align-items: baseline; gap: var(--s3); width: 100%; padding: var(--s4) 0; border: 0; background: none; font: inherit; text-align: left; color: var(--muted); cursor: pointer; transition: color var(--t-base), padding-bottom var(--t-slow) var(--ease-out); } .walkthrough__moment.is-open .walkthrough__tab { padding-bottom: var(--gap-label); } .walkthrough__tab:hover, .walkthrough__moment.is-open .walkthrough__tab { color: var(--ink-head); } .walkthrough__tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--r-label); } .walkthrough__time { flex: none; width: 3.25rem; font-size: var(--fs-small); line-height: var(--lh-text); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); } .walkthrough__name { font-size: var(--fs-body); line-height: var(--lh-tile); font-weight: 600; } .walkthrough__bar { position: absolute; z-index: 1; left: 7px; top: var(--dot); width: 2px; height: 100%; opacity: 0; transition: opacity var(--t-base); } .walkthrough__moment:last-child .walkthrough__bar { height: calc(100% - var(--dot) - var(--s5)); } .walkthrough__bar::after { content: ""; position: absolute; inset: 0; background: var(--ink-head); transform: scaleY(var(--p, 0)); transform-origin: top; transition: transform 100ms linear; } .walkthrough__moment.is-done .walkthrough__bar { --p: 1; opacity: 1; } .walkthrough.is-playing .walkthrough__moment.is-open .walkthrough__bar { opacity: 1; } .walkthrough__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease-out); } .walkthrough__detail > div { overflow: hidden; } .walkthrough__detail > div > div { padding: 0 0 var(--s5) calc(3.25rem + var(--s3)); opacity: 0; transition: opacity var(--t-base) var(--ease-out); } .walkthrough__moment.is-open .walkthrough__detail { grid-template-rows: 1fr; } .walkthrough__moment.is-open .walkthrough__detail > div > div { opacity: 1; } @media (prefers-reduced-motion: reduce) { .walkthrough__tab, .walkthrough__detail, .walkthrough__detail > div > div { transition: none; } } .walkthrough__title { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 700; color: var(--ink-head); text-wrap: balance; } .walkthrough__text { margin: var(--gap-text) 0 0; max-width: 40ch; color: var(--ink-2); line-height: var(--lh-text); text-wrap: pretty; } .walkthrough__stage { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; align-items: center; border-radius: var(--r-card); background: var(--bg); padding: var(--card-pad); } .walkthrough__panel { grid-area: 1 / 1; min-width: 0; } .walkthrough__panel[hidden] { display: block !important; visibility: hidden; } .walkthrough__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-tile); overflow: hidden; } .walkthrough__media > img { display: block; width: 100%; height: 100%; object-fit: cover; } .walkthrough__media [data-lottie-box] { position: absolute; inset: 0; } .walkthrough__panel:not([hidden]) .walkthrough__media { animation: walkthrough-in var(--t-slow) var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .walkthrough__panel .walkthrough__media { animation: none !important; } } .is-still .walkthrough__media { animation: none !important; } .walkthrough__media--scene { container-type: inline-size; color: var(--ink-head); } .scene-card { position: absolute; top: 7%; right: 3%; width: min(42%, 264px); padding: var(--s4) var(--s5); border-radius: var(--r-card); background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-2); } .scene-card p { margin: 0; } .scene-card__label { font-size: 12px; line-height: var(--lh-tile); color: var(--muted); } .scene-card__title { margin-top: var(--s2) !important; font-size: clamp(16px, 3.4cqw, 22px); line-height: var(--lh-tile); font-weight: 700; } .scene-card__text { margin-top: 2px !important; font-size: 13px; color: var(--ink-2); } .scene-card__done { margin-top: var(--s4) !important; display: flex; align-items: center; justify-content: center; gap: var(--s2); height: 40px; border-radius: var(--r-pill); background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; } .scene-card__done i { font-style: normal; } .scene-chip { position: absolute; margin: 0; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-2); font-size: 13px; font-weight: 500; white-space: nowrap; } .scene-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); } .scene-chip--bl { left: 5%; bottom: 7%; } @media (max-width: 600px) { .scene-card { top: 6%; right: 4%; width: 50%; padding: var(--s3); border-radius: var(--r-tile); } .scene-card__label { font-size: 10px; } .scene-card__text { font-size: 11px; } .scene-card__done { height: 28px; margin-top: var(--s2) !important; font-size: 12px; } .scene-chip { display: none; } } .walkthrough__views { display: flex; justify-content: center; align-items: flex-end; gap: var(--s6); } .walkthrough__view { flex: none; display: flex; flex-direction: column-reverse; align-items: center; gap: var(--s3); min-width: 0; } .walkthrough__view:has(> .device--tablet) { flex: 0 1 400px; } .walkthrough__views .device--tablet { width: 100%; } .walkthrough__where { margin: 0; font-size: var(--fs-small); line-height: var(--lh-text); font-weight: 500; color: var(--muted); } .walkthrough__panel:not([hidden]) .walkthrough__view { animation: walkthrough-in var(--t-slow) var(--ease-out) both; } .walkthrough__panel:not([hidden]) .walkthrough__view + .walkthrough__view { animation-delay: 80ms; } @keyframes walkthrough-in { from { opacity: 0; transform: translateY(12px); } } @media (prefers-reduced-motion: reduce) { .walkthrough__panel .walkthrough__view { animation: none !important; } } .is-still .walkthrough__view { animation: none !important; } .walkthrough__nav { display: none; } .walkthrough__foot { grid-column: 1 / -1; margin: 0; } @media (max-width: 1080px) { .walkthrough { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--s6); } .walkthrough__views { gap: var(--s4); } .walkthrough__views .device--phone { width: 196px; height: 380px; } .walkthrough__views .device--tablet { zoom: .85; } .walkthrough__detail > div > div { padding-left: 0; } } @media (max-width: 900px) { .walkthrough { grid-template-columns: 1fr; } .walkthrough__stage { order: -1; } .walkthrough__views .device--tablet { zoom: 1; } .walkthrough__views .device--phone { width: 232px; height: 420px; } .walkthrough__moment::before, .walkthrough__moment::after { display: none; } .walkthrough__moments { display: grid; justify-content: stretch; padding-top: 0; } .walkthrough__moment { grid-area: 1 / 1; } .walkthrough__moment:not(.is-open) { visibility: hidden; } .walkthrough__moment .walkthrough__detail { grid-template-rows: 1fr; } .walkthrough__moment .walkthrough__detail > div > div { opacity: 1; } .walkthrough__moment { padding-left: 0; } .walkthrough__tab { display: none; } .walkthrough__detail, .walkthrough__detail > div > div { transition: none; } .walkthrough__detail > div > div { padding: 0; } .walkthrough__nav { position: relative; grid-area: 2 / 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-strong); } .walkthrough__nav::before { content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 2px; background: var(--ink-head); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; transition: transform 100ms linear, opacity var(--t-base); } .walkthrough.is-playing .walkthrough__nav::before { opacity: 1; } .walkthrough__now { margin: 0; font-weight: 600; line-height: var(--lh-tile); color: var(--ink-head); text-align: center; } .walkthrough__now span { margin-right: var(--s1); font-size: var(--fs-small); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; } .walkthrough__nav .carousel__btn { flex: none; } } @media (max-width: 600px) { .walkthrough__stage { border-radius: var(--r-tile); padding-inline: 0; } .walkthrough__views { justify-content: flex-start; align-items: flex-end; gap: var(--s4); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--card-pad); scroll-padding-inline: var(--card-pad); padding-bottom: var(--s5); margin-bottom: calc(-1 * var(--s5)); } .walkthrough__views::-webkit-scrollbar { display: none; } .walkthrough__view { flex: none; scroll-snap-align: start; } .walkthrough__view:has(> .device--tablet) { flex: none; width: min(68vw, 300px); } .walkthrough__views .device--phone { width: 216px; height: 352px; } .walkthrough__nav { margin-top: var(--s4); padding-top: var(--s3); } .walkthrough__nav { margin-inline: var(--card-pad); } } .walkthrough__ticket { width: 248px; padding: var(--s4) var(--s5) var(--s7); background: #fff; color: #121212; box-shadow: var(--shadow-2); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; } .walkthrough__langs { display: flex; gap: var(--s1); margin-bottom: var(--s4); padding: var(--s1); border-radius: var(--r-tile); background: var(--card); } .walkthrough__langs button { flex: 1; height: 32px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: var(--fs-small); font-weight: 500; color: var(--muted); cursor: pointer; } .walkthrough__langs button[aria-pressed="true"] { background: #fff; color: #121212; box-shadow: var(--shadow-1); } .walkthrough__langs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .walkthrough__print { font: 500 .875rem/1.6 ui-monospace, SFMono-Regular, Menlo, "PingFang SC", "Microsoft YaHei", monospace; } .walkthrough__print p { margin: 0; } .walkthrough__print p:first-child { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px dashed #cfcfcf; } .mock { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; font-size: 13px; line-height: 1.3; } .mock-res { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: #f2f2f4; } .mock-paid span:last-child { font-size: 11px; color: #727272; } .setup-list { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); padding: var(--card-pad); border-radius: var(--r-card); background: var(--bg); } .setup-list__label { margin: 0 0 var(--gap-label); font-size: var(--fs-small); line-height: var(--lh-text); font-weight: 500; color: var(--muted); } .setup-list__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .setup-list__items > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .setup-list__items > li:last-child:nth-child(odd) .setup-item__text { flex: 0 0 calc(50% - (var(--s2) + var(--s5) + var(--s3)) / 2 - 76px - 2 * var(--s4) - 6px); } .setup-item { display: flex; align-items: center; gap: var(--s4); height: 100%; padding: var(--s2) var(--s5) var(--s2) var(--s2); border-radius: var(--r-tile); background: var(--surface); color: inherit; text-decoration: none; } .setup-item__img { flex: none; width: 76px; height: 76px; border-radius: var(--r-label); object-fit: cover; } @media (min-width: 901px) { .setup-list__main { display: flex; flex-direction: column; } .setup-list__items { flex: 1; grid-auto-rows: 1fr; } .setup-item__img { align-self: stretch; width: auto; height: auto; min-height: 76px; max-height: 168px; aspect-ratio: 1; contain: size; } .setup-list__items > li:last-child:nth-child(odd) .setup-item { width: calc(50% - var(--s3) / 2); } .setup-list__items > li:last-child:nth-child(odd) .setup-item__text { flex: 1; } } .setup-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .setup-item__text b { font-weight: 600; line-height: var(--lh-tile); color: var(--ink-head); text-underline-offset: 4px; } .setup-item__text span { font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); } .setup-item::after { content: ""; flex: none; width: 6px; height: 10px; background: var(--muted); transition: transform var(--t-base) var(--ease-out); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='m1 1 4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='m1 1 4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .setup-item:hover b { text-decoration: underline; } .setup-item:hover::after { transform: translateX(2px); } .setup-item:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .setup-list__more { margin-top: var(--s5); } .setup-more { max-width: 62ch; margin: 0; text-wrap: pretty; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); } .setup-more + .setup-more { margin-top: var(--s3); } .setup-more > span { display: block; color: var(--muted); } .setup-more :is(a, b) { white-space: nowrap; color: inherit; font-weight: inherit; text-decoration: none; text-underline-offset: 3px; } .setup-more a:hover { color: var(--ink-head); text-decoration: underline; } .setup-list__plan { display: flex; flex-direction: column; margin-left: var(--card-pad); padding-left: var(--card-pad); border-left: 1px solid var(--line-strong); } .setup-list__plan-name { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; letter-spacing: -.01em; color: var(--ink-head); } .setup-list__price { margin: var(--gap-text) 0 0; font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: var(--ink-head); white-space: nowrap; } .setup-list__price small { margin-left: 6px; font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; color: var(--muted); } .setup-list__plan-text { max-width: 30ch; margin: var(--gap-text) 0 0; color: var(--muted); line-height: var(--lh-text); } .setup-list__plan-foot { margin-top: auto; padding-top: var(--gap-action); } .setup-list__plan .ctas { margin: 0; } .setup-list__plan-after { max-width: 46ch; margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); } .setup-list__plan .ctas .btn { width: 100%; justify-content: center; } .setup-list + .plan-addons__notes { max-width: none; margin-inline: 0; text-align: left; } @media (max-width: 1080px) { .setup-list { grid-template-columns: 1fr; } .setup-list__plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); margin: var(--s6) 0 0; padding: var(--s6) 0 0; border-left: 0; border-top: 1px solid var(--line-strong); } .setup-list__plan > :not(.setup-list__plan-foot) { grid-column: 1; } .setup-list__plan-foot { grid-column: 2; grid-row: 1 / span 3; align-self: end; max-width: 18rem; padding-top: 0; } .setup-list__plan > .setup-list__more { grid-column: 1 / -1; } } @media (max-width: 600px) { .setup-list { border-radius: var(--r-tile); } .setup-list__plan { display: flex; } .setup-list__plan-foot { max-width: none; padding-top: var(--gap-action); } .setup-list__items { grid-template-columns: 1fr; gap: var(--s2); } .setup-item__img { width: 56px; height: 56px; } .setup-list__items > li:last-child:nth-child(odd) .setup-item__text { flex: 1; } .setup-item { gap: var(--s2); padding-right: var(--s4); } .setup-item__text b { font-size: .9375rem; } } .connection-map { --map-h: clamp(580px, calc(100vh - 300px), 640px); --inset: var(--s5); --pad: var(--s4); --row: 12px; --panel-w: 24.5rem; position: relative; border-radius: var(--r-card); background: var(--bg); overflow: clip; } .connection-map__stage { position: relative; height: var(--map-h); } .connection-map.is-flat .connection-map__stage { display: none; } .connection-map__stage canvas { display: block; width: 100%; height: 100%; } .connection-map__pins { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .connection-pin { position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity var(--t-base); } .connection-pin.is-on { opacity: 1; pointer-events: auto; } .connection-pin::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #fff; } .connection-pin.is-main::after { width: 14px; height: 14px; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgb(36 171 255 / .25); } .connection-pin__name { position: absolute; bottom: calc(100% + 4px); left: 50%; padding: 4px 10px; border-radius: var(--r-pill); background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--ink-head); white-space: nowrap; opacity: 0; translate: -50% 4px; pointer-events: none; transition: opacity var(--t-fast), translate var(--t-fast); } .connection-pin.is-named .connection-pin__name { opacity: 1; translate: -50% 0; } .connection-pin.is-below .connection-pin__name { bottom: auto; top: calc(100% + 4px); } .connection-pin.is-main .connection-pin__name { background: var(--blue); color: var(--on-blue); } .connection-pin__name:not([data-n=""])[data-n] { display: flex; align-items: center; gap: 6px; padding-left: 4px; } .connection-pin__name:not([data-n=""])[data-n]::before { content: attr(data-n); width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: .6875rem; line-height: 1; color: var(--blue); } .connection-flow { position: absolute; left: 0; top: 0; padding: 3px 8px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 1px rgb(36 171 255 / .35), 0 2px 6px rgb(0 0 0 / .06); font-size: .6875rem; font-weight: 600; line-height: 1.3; color: var(--ink-head); white-space: nowrap; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity var(--t-base); } .connection-flow.is-on { opacity: 1; } .connection-map.is-still .connection-pin, .connection-map.is-still .connection-flow { transition: none; } .connection-pin.is-ping::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgb(36 171 255 / .35); animation: connection-ping 1.1s ease-out both; } @keyframes connection-ping { from { scale: .6; opacity: 1; } to { scale: 3; opacity: 0; } } .connection-live { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); background: var(--card-inner); box-shadow: 0 2px 10px rgb(0 0 0 / .1); font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--ink-head); white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; pointer-events: none; transition: opacity var(--t-base), transform var(--t-base); } .connection-live::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } .connection-live.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); } .connection-live.is-below { transform: translate(-50%, 14px); } .connection-live.is-below.is-on { transform: translate(-50%, 10px); } .connection-live.is-on { animation: connection-live-in var(--t-base) ease-out; } @keyframes connection-live-in { from { opacity: 0; } } .connection-screen { display: grid; align-items: start; gap: 3px; min-width: 10.5rem; padding: 9px 12px 11px; border-radius: var(--r-tile); font-size: 11.5px; font-weight: 500; line-height: 1.3; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 10px 24px -8px rgb(18 18 18 / .22); } .connection-screen::before { display: none; } .connection-screen .fui-label { margin: 0 0 1px; font-size: .85em; } .connection-screen .fui-title { margin: 0; font-size: 1.1em; } .connection-screen .fui-sub { margin: 0; } .connection-screen__row { margin: 0; color: var(--ink-2); animation: connection-row .3s ease-out both; } .connection-screen__row:first-of-type { margin-top: 3px; padding-top: 5px; border-top: 1px solid #ececee; } @keyframes connection-row { from { opacity: 0; translate: 0 3px; } } .connection-screen__state { display: grid; justify-items: start; margin: 5px 0 0; } .connection-screen__state em { grid-area: 1 / 1; padding: 2px 9px; border-radius: var(--r-pill); font-style: normal; font-size: .9em; font-weight: 600; transition: opacity var(--t-base); } .connection-screen__state .is-pending { background: #f4f4f6; color: var(--ink-head); } .connection-screen__state .is-done { background: var(--blue); color: var(--on-blue); opacity: 0; } .connection-screen.is-done .is-pending { opacity: 0; } .connection-screen.is-done .is-done { opacity: 1; } .connection-screen:not(:has(.is-pending)) .is-done { animation: connection-row .3s ease-out both; } .connection-screen__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 3px; } .connection-screen__cols > div { display: flex; flex-wrap: wrap; align-content: start; gap: 4px; min-width: 0; } .connection-screen__cols small { flex: 0 0 100%; font-size: .85em; font-weight: 600; color: var(--muted); } .connection-screen__cols b { min-width: 2.1em; padding: 2px 5px; border-radius: 6px; background: #f4f4f6; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .connection-screen__cols > div:last-child .is-num { display: none; background: var(--blue); color: var(--on-blue); } .connection-screen.is-done .connection-screen__cols > div:first-child .is-num { display: none; } .connection-screen.is-done .connection-screen__cols > div:last-child .is-num { display: block; animation: connection-row .3s ease-out both; } .connection-ticket { position: absolute; left: 0; top: 0; padding: 3px 9px; border-radius: var(--r-pill); background: var(--blue); box-shadow: 0 2px 10px rgb(36 171 255 / .4); font-size: .6875rem; font-weight: 600; line-height: 1.3; color: var(--on-blue); white-space: nowrap; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); } .connection-ticket.is-on { opacity: 1; } .connection-map__panel { position: absolute; top: var(--inset); left: var(--inset); max-height: calc(var(--map-h) - 2 * var(--inset)); width: var(--panel-w); display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); border-radius: var(--r-card); background: var(--panel); } .connection-map__panel [data-tab-panel][hidden] { display: none; } .connection-map__tabs { flex: none; display: flex; padding: 3px; border-radius: var(--r-pill); background: rgb(0 0 0 / .05); } .connection-map__tab { flex: 1; height: 30px; border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: var(--fs-small); font-weight: 500; color: var(--muted); cursor: pointer; transition: background-color var(--t-base), color var(--t-base); } .connection-map__tab[aria-selected="true"] { background: var(--card-inner); color: var(--ink-head); box-shadow: 0 1px 3px rgb(0 0 0 / .08); } .connection-map__tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; } .connection-map.has-pick .connection-map__hint { display: none; } .connection-map__hint { flex: none; margin: 0 var(--s1); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); } .connection-map__list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s2); overflow-y: auto; scrollbar-width: none; } .connection-map__list::-webkit-scrollbar { display: none; } .connection-map__card { flex: none; border-radius: var(--r-tile); background: var(--card); transition: box-shadow var(--t-base); } .connection-map__card:has([aria-expanded="true"]) { box-shadow: var(--shadow-lift); } .connection-map__item { position: relative; width: 100%; display: flex; align-items: center; gap: var(--s2); border: 0; background: none; font: inherit; text-align: left; color: var(--ink-2); cursor: pointer; } .connection-map__item::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background-color var(--t-fast), box-shadow var(--t-fast); } .connection-map__item[aria-pressed="true"]::before { background: var(--blue); box-shadow: 0 0 0 3px rgb(36 171 255 / .22); } .connection-map__item:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-radius: var(--r-tile); } .connection-map__card .connection-map__item { min-height: 48px; padding: 0 var(--s4) 0 14px; font-size: .9375rem; font-weight: 500; color: var(--ink-head); } .connection-map__card .connection-map__item::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px -2px 4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); rotate: 45deg; translate: 0 -3px; transition: rotate var(--t-base); } .connection-map__card .connection-map__item[aria-expanded="true"]::after { rotate: -135deg; translate: 0 0; } .connection-map__card .connection-map__item:hover::before { background: var(--muted); } .connection-map__card .connection-map__item[aria-pressed="true"]:hover::before { background: var(--blue); } .connection-map__item-name { flex: 1; } .connection-map__meta { flex: none; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); } .connection-map__body { padding: 0 var(--s4) var(--s4) 14px; } .connection-map__stepnav { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); } .connection-map__bar { flex: 1; display: flex; gap: 4px; } .connection-map__seg { flex: 1; display: flex; align-items: center; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; } .connection-map__seg i { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(var(--ink-head) 0 0) no-repeat 0 0 / 0 100%, var(--line); } .connection-map__seg.is-done i, .connection-map__seg[aria-current] i { background-size: 100% 100%; } .is-playing .connection-map__seg[aria-current] i { animation: connection-fill 3.6s linear both; } @keyframes connection-fill { from { background-size: 0 100%; } to { background-size: 100% 100%; } } .connection-map__seg:hover i { background-color: var(--line-strong); } .connection-map__seg:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } .connection-map__again { flex: none; padding: 0 var(--s1); border: 0; background: none; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--ink-head); cursor: pointer; } .connection-map__again[hidden] { display: none; } .connection-map__stepnav .carousel__btn { flex: none; width: 32px; height: 32px; color: var(--ink-head); } .connection-map__steps { margin: 0; padding: 0; list-style: none; counter-reset: step; } .connection-map__steps > li { counter-increment: step; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--s3); padding: 6px 0; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--muted); cursor: pointer; transition: color var(--t-fast); } .connection-map__steps > li::before { content: counter(step); width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--page); font-size: var(--fs-micro); font-weight: 600; line-height: 1; color: var(--muted); transition: background-color var(--t-fast), color var(--t-fast); } .connection-map__steps > li.is-done { color: var(--ink-2); } .connection-map__steps > li.is-current { color: var(--ink-head); } .connection-map__steps > li.is-current::before { background: var(--blue); color: var(--on-blue); } .connection-map__steps > li:hover { color: var(--ink-head); } .connection-map__next { display: inline-flex; align-items: center; gap: 6px; margin: var(--s3) 0 0 32px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--ink-head); cursor: pointer; } .connection-map__next .arrow { color: var(--blue); transition: translate var(--t-fast); } .connection-map__next:hover .arrow { translate: 3px 0; } .connection-map__next[hidden] { display: none; } .connection-map__list[data-tab-panel="systems"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; } .connection-map__list.is-scrolled { -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px); } .connection-map__list.is-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); } .connection-map__list.is-scrolled.is-more { -webkit-mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 24px), transparent); } .connection-map__col { display: flex; flex-direction: column; gap: var(--s2); } .connection-map__group { display: grid; align-content: start; gap: 2px; padding: 6px; border-radius: var(--r-tile); background: var(--card); } .connection-map__group:last-child { flex: 1; } .connection-map__label { margin: 4px 0 4px 8px; font-size: var(--fs-micro); line-height: 1.3; font-weight: 600; color: var(--ink-head); } .connection-map__group .connection-map__item { min-height: 28px; padding: 4px 20px 4px 8px; border-radius: 7px; font-size: var(--fs-small); line-height: 1.3; } .connection-map__group .connection-map__item::before { position: absolute; right: 8px; top: calc(50% - 3px); width: 6px; height: 6px; background: transparent; } .connection-map__group .connection-map__item:hover { background: var(--page); color: var(--ink-head); } .connection-map__group .connection-map__item[aria-pressed="true"] { background: var(--page); color: var(--ink-head); font-weight: 600; } .connection-map__group .connection-map__item[aria-pressed="true"]::before { background: var(--blue); box-shadow: none; } .connection-map.has-system .connection-map__list[data-tab-panel="systems"] { display: none; } .connection-map__detail { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: var(--s3) var(--s4) var(--s4); border-radius: var(--r-tile); background: var(--card); } .connection-map__back { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: var(--r-pill); background: var(--card); font: inherit; font-size: var(--fs-small); font-weight: 500; color: var(--ink-head); cursor: pointer; transition: background-color var(--t-fast); } .connection-map__back[hidden] { display: none; } .connection-map__live { flex: none; margin-top: auto; padding: var(--s2) 6px 6px; border-radius: var(--r-tile); background: var(--card); } .connection-map__live[hidden], .connection-map.is-flat .connection-map__live { display: none; } .connection-map__live-head { display: flex; align-items: center; gap: 8px; margin: 0 8px 4px; font-size: var(--fs-micro); line-height: 1.3; font-weight: 600; color: var(--ink-head); } .connection-map__live-head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgb(36 171 255 / .22); animation: connection-live 2s ease-in-out infinite; } @keyframes connection-live { 50% { box-shadow: 0 0 0 6px rgb(36 171 255 / 0); } } .connection-map__now { min-height: 76px; padding: 0 8px 4px; } .connection-map__now-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: 2px 0 10px; } .connection-map__now-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); font-weight: 600; color: var(--ink-head); } .connection-map__follow { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-head); cursor: pointer; } .connection-map__follow::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid var(--blue); border-top: 1.5px solid var(--blue); rotate: 45deg; transition: translate var(--t-fast); } .connection-map__follow:hover::after { translate: 2px 0; } .connection-map__follow:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } .connection-map__track { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .connection-map__track li { position: relative; display: grid; gap: 6px; align-content: start; font-size: var(--fs-micro); line-height: 1.25; color: var(--muted); transition: color var(--t-base); } .connection-map__track li::before { content: ""; position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); transition: background-color var(--t-base), box-shadow var(--t-base); } .connection-map__track li:not(:last-child)::after { content: ""; position: absolute; top: 4px; left: 10px; right: 0; height: 2px; background: linear-gradient(var(--blue) 0 0) no-repeat 0 0 / 0 100%, var(--line); transition: background-size .6s ease-out; } .connection-map__track li.is-done { color: var(--ink-2); } .connection-map__track li.is-done::before { background: var(--blue); } .connection-map__track li.is-done::after { background-size: 100% 100%; } .connection-map__track li.is-current { color: var(--ink-head); font-weight: 600; } .connection-map__track li.is-current::before { background: var(--blue); box-shadow: 0 0 0 4px rgb(36 171 255 / .22); } .connection-map.is-still .connection-map__track li, .connection-map.is-still .connection-map__track li::before, .connection-map.is-still .connection-map__track li::after { transition: none; } .connection-map.is-focus .connection-map__tabs, .connection-map.is-focus .connection-map__hint, .connection-map.is-focus .connection-map__live { display: none; } .connection-map.is-focus .connection-map__card:not(:has([aria-expanded="true"])) { display: none; } .connection-map.is-focus .connection-map__card .connection-map__item::after { display: none; } .connection-map__back:hover { background: var(--card-inner); box-shadow: var(--shadow-lift); } .connection-map__back:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } .connection-map__where { margin: 0 0 2px; font-size: var(--fs-micro); line-height: 1.3; font-weight: 600; color: var(--muted); } .connection-map__detail.is-empty { display: none; } .connection-map__detail > [hidden] { display: none; } .connection-map__name { margin: 0 0 var(--s2); font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .connection-map__text { margin: 0; font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); } .connection-map__price { margin: var(--s1) 0 0; font-size: var(--fs-micro); line-height: var(--lh-text); color: var(--muted); } .connection-map__detail .link { display: inline-flex; margin-top: var(--s3); font-size: var(--fs-small); } .connection-map__connects { margin-top: var(--s3); } .connection-map__connects p { margin: 0 0 6px; font-size: var(--fs-micro); line-height: 1.3; font-weight: 600; color: var(--muted); } .connection-map__connects div { display: flex; flex-wrap: wrap; gap: 4px; } .connection-map__chip { height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--page); font: inherit; font-size: var(--fs-micro); font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); } .connection-map__chip:hover { background: var(--panel); color: var(--ink-head); } .connection-map__chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; } .connection-map.is-still .connection-map__card, .connection-map.is-still .connection-map__item::after { transition: none; } @media (max-width: 1080px) { .connection-map { --map-h: min(clamp(300px, 62vw, 540px), 45vh); --map-h: min(clamp(300px, 62vw, 540px), 45svh); } .connection-map__stage { position: sticky; top: var(--hdr-h); z-index: 2; background: var(--bg); } .connection-map__panel { position: static; width: auto; max-height: none; margin: 0 var(--s3) var(--s3); } .connection-map__tabs { align-self: flex-start; width: min(100%, 20rem); } .connection-map__list { overflow: visible; } .connection-map__list[data-tab-panel="systems"] { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); align-items: stretch; } .connection-map__col { display: contents; } .connection-map__group:last-child { flex: none; } .connection-map__group .connection-map__item { min-height: 36px; } } @media (max-width: 600px) { .connection-map { border-radius: var(--r-tile); } .connection-map { --map-h: min(clamp(240px, 66vw, 400px), 40vh); --map-h: min(clamp(240px, 66vw, 400px), 40svh); } .connection-map__panel { margin: 0 var(--s2) var(--s2); padding: var(--s2); } .connection-map__tabs { width: 100%; } .connection-map__list[data-tab-panel="systems"] { grid-template-columns: minmax(0, 1fr); } .connection-map__group { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2px; } .connection-map__label { grid-column: 1 / -1; } .connection-live { padding: 3px 8px 3px 6px; font-size: .6875rem; } .connection-screen { min-width: 8.5rem; padding: 7px 10px 9px; font-size: 10px; } .connection-ticket { padding: 2px 7px; font-size: .625rem; } } .overview-hero__copy { margin-bottom: var(--s7); } .overview-hero__copy .lead { font-size: var(--fs-lead); } .apply--panel .apply__grid { align-items: start; } .apply--panel .chapter { margin-bottom: var(--s4); } .apply__role { margin-top: var(--s6); padding: var(--card-pad); border-radius: var(--r-card); background: #fff; } .apply__role-label { margin: 0; font-size: var(--fs-small); color: var(--ink-2); } .apply__role-name { margin: var(--gap-label) 0 0; font-size: var(--fs-h3); line-height: var(--lh-title); font-weight: 700; letter-spacing: -.015em; color: var(--ink-head); } .apply__role .role-facts li { background: var(--canvas); } @media (max-width: 600px) { .apply__role { border-radius: var(--r-tile); } } .legal-hero .lead, [data-section="contact/hero"] .lead, .error-hero .article-hero__lead { font-size: var(--fs-lead); } .article-hero__lead { color: var(--muted); } .blog-hero--split .container { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5) var(--s7); } .blog-hero--split h1 { font-size: var(--fs-h1); } .blog-hero--split .lead { flex: 1 1 18rem; max-width: 26rem; margin: 0; } .blog-hero--map { padding-block: var(--s5); } .blog-hero__side { flex: 1 1 22rem; max-width: 30rem; display: grid; gap: var(--s4); } .blog-hero__side .lead { max-width: none; } .blog-hero__side .ctas { margin: 0; } .blog-hero--map > .container + .container { display: block; margin-top: var(--s5); } .connection-map--hero { --inset: var(--s4); } .connection-map--hero .connection-map__hint { display: none; } @media (min-width: 1081px) { .blog-hero--map { display: flex; flex-direction: column; height: clamp(640px, calc(100svh - 2 * var(--panel-inset)), 1000px); } .blog-hero--map > .container:last-child { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; } .connection-map--hero { flex: 1; min-height: 0; --map-h: 100%; } .connection-map--hero .connection-map__panel { max-height: calc(100% - 2 * var(--inset)); } } @media (min-width: 1081px) and (max-height: 760px) { .blog-hero--map { padding-top: var(--s3); } .blog-hero--map > .container + .container { margin-top: var(--s4); } .connection-map--hero { --inset: var(--s3); } .connection-map--hero .connection-map__panel { gap: var(--s2); } .connection-map--hero .connection-map__card .connection-map__item { min-height: 42px; } } .apply--panel .apply__grid { padding: var(--card-pad); border-radius: var(--r-card); background: #fff; gap: var(--s8); } .apply--panel .apply-form { padding: 0; border-radius: 0; background: none; min-height: 480px; } .apply--panel .apply__role { margin-top: var(--s6); padding: var(--s5); background: var(--canvas); } .apply--panel .chapter { font-size: var(--fs-h3); line-height: var(--lh-title); letter-spacing: -.015em; } @media (max-width: 900px) { .apply--panel .apply__grid { gap: var(--s6); } } @media (max-width: 600px) { .apply--panel .apply__grid { padding: var(--s5); border-radius: var(--r-tile); } } .apply--panel .apply__role .role-facts li { background: #fff; } .legal .prose { font-size: var(--fs-body); line-height: var(--lh-text); } .legal .article__contents summary { font-size: 1.0625rem; } [data-section="article/hero"] h1, [data-section="story/hero"] h1 { font-size: clamp(2.25rem, 1.1rem + 3.6vw, 4rem); letter-spacing: -.03em; } .apply--panel .apply__grid { padding: var(--s7); } .apply--panel .apply-form { width: 100%; max-width: 560px; justify-self: end; } @media (max-width: 900px) { .apply--panel .apply-form { justify-self: stretch; max-width: none; } } @media (max-width: 600px) { .apply--panel .apply__grid { padding: var(--s5); } } .story-facts a:not(.btn) { text-decoration: none; } .story-facts a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; } .apply--panel .apply__grid { max-width: 1120px; margin-inline: auto; } .uses-block { margin-top: var(--s8); padding: var(--card-pad); border-radius: var(--r-card); background: #fff; } .prose .uses-block h2 { margin: 0 0 var(--s4); font-size: var(--fs-tile); line-height: var(--lh-tile); } .uses-block__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: 0; padding: 0; list-style: none; } .prose .uses-block__list a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--s4); border-radius: var(--r-tile); background: var(--canvas); color: var(--ink-2); text-decoration: none; font-size: var(--fs-body); line-height: var(--lh-text); transition: background-color var(--t-base); } .prose .uses-block__list a:hover { background: var(--bg); } .uses-block__list b { color: var(--ink-head); font-weight: 600; } .uses-block__list b::after { content: " →"; color: var(--blue); } @media (max-width: 600px) { .uses-block__list { grid-template-columns: 1fr; } .uses-block { border-radius: var(--r-tile); } } .why-text { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: start; } .why-text .chapter { margin: 0; } .why-text__body p { margin: 0 0 var(--s5); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); } .why-text__body p a { color: var(--ink-head); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } .why-text__body p a:hover { text-decoration-color: currentColor; } .why-text__body p:last-child { margin-bottom: 0; } .build-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-cards); margin: 0; padding: 0; list-style: none; } .build-map__group { display: flex; flex-direction: column; padding: var(--s5); border-radius: var(--r-card); background: var(--bg); } .build-map__name { margin: 0; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .build-map__desc { margin: var(--s1) 0 var(--s5); font-size: var(--fs-small); color: var(--muted); } .build-map__products { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; } .build-map__products li > a, .build-map__products li > b:only-child, .build-map__products li:not(:has(a)) { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r-tile); background: var(--card-inner); color: inherit; text-decoration: none; transition: box-shadow var(--t-lift) var(--ease-soft); } .build-map__products li:has(a) { padding: 0; background: none; } .build-map__products a:hover { box-shadow: 0 6px 18px rgba(18, 18, 18, .08); } .build-map__products b { font-size: var(--fs-small); font-weight: 600; color: var(--ink-head); } .build-map__products a b::after { content: "\00a0→"; color: var(--blue, #2aa3f5); } .build-map__products span { font-size: 13px; line-height: 1.4; color: var(--ink-2); } .manifesto { padding-block: var(--s8); } .manifesto__text { max-width: 30ch; margin: 0; font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 700; color: var(--ink-head); text-wrap: pretty; } .manifesto__text.is-live .w { color: #c9c9ce; transition: color .4s var(--ease-soft); } .manifesto__text.is-live .w.is-lit { color: var(--ink-head); } .why-text__head { display: flex; flex-direction: column; gap: var(--s6); } .why-text__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-card); } .founder-note { margin-top: var(--s6); padding: var(--s5) var(--s6); border-radius: var(--r-card); background: var(--bg); } .founder-note__label { margin: 0 0 var(--s2); font-size: var(--fs-small); font-weight: 600; color: var(--ink-head); } .why-text__body .founder-note p:last-child { margin: 0; font-size: var(--fs-body); line-height: var(--lh-text); } .review__photo--todo { display: grid; place-items: center; background: linear-gradient(135deg, #e9e9ee, #d9d9df); } .review__photo--todo span { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); } .review__mark--name b { display: block; padding: 0 var(--s2); color: #fff; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; text-align: center; } .review__src { font-size: var(--fs-small); color: var(--muted); } .milestones__rail li.is-next .milestones__dot { border-style: dashed; } .milestones__rail li.is-next button[aria-selected="true"] .milestones__dot { background: var(--canvas); } .milestones__panel.is-next .milestones__when { color: var(--ink-head); } .work { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; } .work__head { position: sticky; top: calc(var(--hdr-h) + var(--s6)); } .work__head .chapter { margin-bottom: var(--s4); } .work__lead { margin: 0; max-width: 36ch; color: var(--ink-head); } .work__list { display: grid; margin: 0; padding: 0; list-style: none; } .work__list li { padding: var(--s6) 0; border-top: 1px solid var(--line); } .work__list li:first-child { padding-top: 0; border-top: 0; } .work__list li:last-child { border-bottom: 1px solid var(--line); } .work__list h3 { margin: 0 0 var(--s2); font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; color: var(--ink-head); } .work__list p { margin: 0; max-width: 52ch; color: var(--ink-2); } .work__list .link { display: inline-flex; margin-top: var(--s3); } .work__join { margin: var(--s6) 0 0; color: var(--ink-2); } .milestones__rail--steps { justify-content: space-between; gap: 0; } .milestones__rail--steps li { flex: 1 1 0; min-width: 40px; } .milestones__rail--steps li:first-child, .milestones__rail--steps li:last-child { flex: 0 0 auto; } .milestones__rail--steps button { width: 100%; min-height: 56px; justify-content: flex-end; } .milestones__rail--steps .milestones__year { font-size: var(--fs-small); } .milestones__rail { position: relative; display: flex; justify-content: space-between; gap: var(--s4); margin: 0 0 var(--s6); padding: 0 6px var(--s4); list-style: none; overflow-x: auto; scrollbar-width: none; } .milestones__rail::-webkit-scrollbar { display: none; } .milestones__rail::before, .milestones__rail::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: calc(var(--s4) + 5px); height: 2px; border-radius: 2px; background: var(--line-strong); } .milestones__rail::after { right: auto; width: calc((100% - 24px) * var(--progress, 0)); background: var(--ink-head); transition: width .5s var(--ease-out); } .milestones__rail li { position: relative; z-index: 1; flex: none; } .milestones__rail button { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s2) 0 0; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; transition: color var(--t-fast); } .milestones__rail li:first-child button { align-items: flex-start; } .milestones__rail li:last-child button { align-items: flex-end; } .milestones__year { font-size: var(--fs-lead); font-variant-numeric: tabular-nums; } .milestones__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--canvas); box-sizing: border-box; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-out); } .milestones__rail button:hover { color: var(--ink-head); } .milestones__rail button.is-past .milestones__dot { border-color: var(--ink-head); background: var(--ink-head); } .milestones__rail button[aria-selected="true"] { color: var(--ink-head); } .milestones__rail button[aria-selected="true"] .milestones__dot { border-color: var(--ink-head); background: var(--ink-head); transform: scale(1.5); } .milestones__rail button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; } .milestones__panel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s7); align-items: start; } .milestones__panel + .milestones__panel { margin-top: var(--s7); } .milestones.is-live .milestones__panel + .milestones__panel { margin-top: 0; } .milestones.is-live .milestones__panel:not([hidden]) { animation: ms-in .45s var(--ease-out); } @keyframes ms-in { from { opacity: 0; transform: translateY(8px); } } .milestones__media { border-radius: var(--r-card); overflow: hidden; background: var(--bg); touch-action: pan-y; user-select: none; } .milestones__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; pointer-events: none; } .milestones__when { margin: 0 0 var(--s2); font-size: var(--fs-small); font-weight: 600; color: var(--muted); } .milestones__title { margin: 0 0 var(--s3); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; color: var(--ink-head); text-wrap: balance; } .milestones__events { display: grid; gap: var(--s4); margin: var(--s2) 0 0; padding: 0; list-style: none; } .milestones__events li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--ink-2); } .milestones__events li:first-child { padding-top: 0; border-top: 0; } .milestones__month { font-size: var(--fs-small); font-weight: 600; color: var(--ink-head); line-height: 1.6; } .milestones__events .link { margin-left: var(--s1); white-space: nowrap; } .milestones__text { margin: 0 0 var(--s5); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); } .milestones__nav { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); color: var(--ink-head); } .milestones__count { margin: 0; min-width: 4ch; text-align: center; font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .milestones.is-live .milestones__panel:not([hidden]) { animation: none; } .milestones__rail::after { transition: none; } } .promise-card__link { margin-top: auto; padding-top: var(--s5); align-self: flex-start; } .visit__lines { display: grid; gap: var(--s3); margin: var(--s5) 0 0; } .visit__lines dt { font-size: var(--fs-small); color: var(--muted); } .visit__lines dd { margin: 2px 0 0; font-weight: 600; color: var(--ink-head); } .visit__lines a { color: inherit; text-decoration: none; } .visit__lines a:hover { text-decoration: underline; text-underline-offset: 4px; } .visit .ctas { margin-top: var(--s5); } @media (max-width: 1391px) { .build-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1080px) { .why-text { grid-template-columns: 1fr; gap: var(--s5); } .work { grid-template-columns: 1fr; gap: var(--s6); } .work__head { position: static; } .milestones__panel { grid-template-columns: 1fr; gap: var(--s5); } .milestones__rail { justify-content: flex-start; gap: var(--s6); } .milestones__rail--steps { gap: 0; } .milestones__rail--steps li { flex: 0 0 48px; } .milestones__rail::before, .milestones__rail::after { display: none; } .build-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .build-map { grid-template-columns: 1fr; } .build-map__group { border-radius: var(--r-tile); } .build-map__products { grid-template-columns: 1fr 1fr; } } .before-after__row--lifted .before-after__media svg { overflow: visible; filter: drop-shadow(0 1px 2px rgb(18 18 18 / .06)) drop-shadow(0 14px 22px rgb(18 18 18 / .13)); } .screen-tabs--stage .screen-tabs__media--ui, .screen-tabs__media--ui { padding: 0; overflow: hidden; background: #f2f2f4; container-type: size; } .fui { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(10.5px, 2.45cqmin, 16px); line-height: 1.3; color: #121212; } .fui p { margin: 0; } .fui ul { margin: 0; padding: 0; list-style: none; } .fui__stack { position: relative; width: min(78%, 32em); padding-bottom: 3em; } .fui__stack > .fui-card:first-child { margin-inline: auto; } .fui-card { position: relative; display: flex; flex-direction: column; gap: .9em; width: 68%; padding: 1.2em; border-radius: 1.3em; background: #fff; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 14px 32px -10px rgb(18 18 18 / .2); } .fui-card--side { position: absolute; right: -6%; bottom: 0; width: 46%; gap: .5em; padding: 1em 1.1em; } .fui-card--side.fui-card--inside { right: 3%; bottom: 4%; width: 44%; } @media (max-width: 600px) { .fui-card--side { right: 5% !important; left: auto !important; bottom: 6% !important; max-width: 62%; } } .fui-card--center { align-items: center; text-align: center; } .fui-bar { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: -.2em -.2em 0; } .fui-bar b { font-size: 1.15em; font-weight: 700; } .fui-ic { position: relative; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: #f2f2f4; } .fui-ic--back::after { content: ""; position: absolute; left: 44%; top: 36%; width: 26%; height: 26%; border: solid #121212; border-width: 0 0 .16em .16em; transform: rotate(45deg); } .fui-ic--close::before, .fui-ic--close::after { content: ""; position: absolute; left: 30%; top: calc(50% - .08em); width: 40%; height: .16em; border-radius: .1em; background: #121212; transform: rotate(45deg); } .fui-ic--close::after { transform: rotate(-45deg); } .fui-pill { white-space: nowrap; } .fui-pill.fr > * { text-align: center; } .fui-pill { padding: .35em .75em; border-radius: 2em; background: #24abff; color: #fff; font-size: .8em; font-weight: 700; font-variant-numeric: tabular-nums; } .fui-h { font-size: 1.3em; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; text-align: center; } .fui-title { font-size: 1.3em; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; } .fui-title--sm { font-size: 1.1em; } .fui-sub, .fui-label { font-size: .85em; color: #727272; } .fui-label { font-weight: 600; } .fui-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; } .fui-opts span { display: flex; flex-direction: column; gap: .1em; padding: .7em .8em; border-radius: .75em; background: #f4f4f6; } .fui-opts b { font-weight: 700; } .fui-opts .is-on { background: #24abff; color: #fff; box-shadow: 0 4px 10px -4px rgb(18 18 18 / .25); } .fui-opts--single { grid-template-columns: 1fr; } .fui-tabs { display: flex; gap: .45em; overflow: hidden; margin-right: -1.2em; } .fui-tabs span { flex: none; display: inline-flex; align-items: center; gap: .35em; padding: .5em .95em; border-radius: 2em; background: #dff0fc; color: #1c8fd8; font-size: .85em; font-weight: 700; } .fui-tabs .is-on { background: #fff; box-shadow: inset 0 0 0 .14em #24abff; } .fui-tabs img { width: 1.25em; height: 1.25em; margin: -.2em 0 -.2em -.25em; } .fui-prods { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; } .fui-prod { display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .45em .45em .7em; border-radius: .9em; background: #f4f4f6; text-align: center; } .fui-prod__img { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: .35em; border-radius: .65em; background: #fff; } .fui-prod__img img { width: 80%; height: 80%; object-fit: contain; } .fui-prod__img > i { position: absolute; top: .45em; left: .45em; padding: .2em .45em; border-radius: 1em; background: #ededf0; font-style: normal; font-size: .75em; font-weight: 700; } .fui-prod__img > b { position: absolute; top: .4em; right: .4em; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: .35em; box-shadow: inset 0 0 0 .12em #24abff; color: #24abff; font-weight: 700; line-height: 1; } .fui-prod__img > b.is-on { background: #24abff; color: #fff; } .fui-prod > b { font-weight: 700; } .fui-prod > small { font-size: .78em; color: #4a4a4a; } .fui-prod.is-off { opacity: .35; } .fui-prod.is-on { background: #f4f4f6; box-shadow: inset 0 0 0 .14em #24abff; } .fui-prod.is-on .fui-prod__img { background: #fff; } .fui-people li { display: flex; align-items: center; gap: .75em; padding: .55em 0; border-bottom: 1px solid #ececee; } .fui-people li:last-child { border-bottom: 0; } .fui-people span { flex: 1; display: flex; flex-direction: column; font-weight: 600; } .fui-people span small { font-size: .8em; font-weight: 500; color: #727272; } .fui-people b { font-weight: 700; font-variant-numeric: tabular-nums; } .fui-thumb { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: .6em; background: #f4f4f6; } .fui-thumb img { width: 80%; height: 80%; object-fit: contain; } .fui-row { display: flex; justify-content: space-between; gap: 1em; font-size: .9em; } .fui-row--new { color: #24abff; font-weight: 700; } .fui-row--total { padding-top: .5em; border-top: 1px solid #ececee; font-weight: 700; } .fui-radios li { display: flex; align-items: center; gap: .7em; padding: .65em .8em; border: 1px solid #e5e5ea; border-radius: .8em; font-weight: 500; } .fui-radios li + li { margin-top: .4em; } .fui-radios li::before { content: ""; flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; background: #f2f2f4; } .fui-radios .is-on::before { background: #24abff; box-shadow: inset 0 0 0 .22em #fff, 0 0 0 .1em #24abff; } .fui-total { display: flex; justify-content: space-between; align-items: center; margin: 0 -1.2em; padding: .6em 1.2em; background: #f4f4f6; font-weight: 700; } .fui-total b { padding: .25em .6em; border-radius: .5em; background: #fff; } .fui-bottom { display: flex; align-items: center; gap: .6em; } .fui-count { display: flex; align-items: center; gap: .5em; padding: .3em .7em .3em .3em; border-radius: 2em; box-shadow: inset 0 0 0 1px #e5e5ea; font-size: .85em; font-weight: 600; white-space: nowrap; } .fui-count b { padding: .3em .6em; border-radius: 2em; background: #24abff; color: #fff; } .fui-btn { display: grid; place-items: center; flex: 1; height: 2.8em; padding: 0 1.2em; border-radius: .9em; background: #24abff; color: #fff; font-weight: 700; font-size: 1.02em; } .fui-card--center .fui-btn, .fui-card > .fui-btn { flex: none; align-self: stretch; } .fui-check { position: relative; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: #24abff; } .fui-check::after { content: ""; position: absolute; left: 34%; top: 20%; width: 26%; height: 46%; border: solid #fff; border-width: 0 .16em .16em 0; transform: rotate(45deg); } .fui-check--big { width: 2.4em; height: 2.4em; } .fui-check--big::after { border-width: 0 .24em .24em 0; } .fui-card--wide { width: 82%; } .fui-card--wide .fui-tabs { margin-right: 0; } .fui-tables { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55em; } .fui-tables span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; aspect-ratio: 1; border-radius: .8em; background: #f4f4f6; } .fui-tables b { font-size: 1.2em; font-weight: 700; } .fui-tables small { font-size: .75em; color: #727272; } .fui-tables .is-busy { background: #dff0fc; } .fui-tables .is-busy small { color: #1c8fd8; font-weight: 600; } .fui-tables .is-res { background: #fff; box-shadow: inset 0 0 0 1.5px #e3e4e8; } .fui-tables--plan { padding-bottom: .5em; } .fui-tables--plan span { aspect-ratio: 5 / 4; } .fui-drag { --gap: .55em; --dur: 3.4s; --wait: .5s; } .fui-drag > span { position: relative; } .fui-drag small { display: grid; justify-items: center; } .fui-drag em { grid-area: 1 / 1; font-style: normal; } .fui-drag em:first-child { visibility: hidden; } .fui-tables span.fui-drag__to { background: #24abff; color: #fff; } .fui-drag__to small { color: #fff; font-weight: 600; } .fui-drag__move { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .fui-drag__chip { position: absolute; inset: 0; display: grid; place-items: center; border-radius: .8em; background: #24abff; color: #fff; font-size: .75em; font-weight: 700; font-style: normal; opacity: 0; } .fui-drag__dot { position: absolute; left: 68%; top: 76%; width: 1.7em; height: 1.7em; margin: -.85em 0 0 -.85em; border-radius: 50%; background: rgb(18 18 18 / .22); box-shadow: 0 0 0 .18em rgb(255 255 255 / .9); opacity: 0; } .is-play .fui-drag__from { animation: drag-from var(--dur) var(--wait) both; } .is-play .fui-drag__from em:first-child { animation: drag-was var(--dur) var(--wait) both; } .is-play .fui-drag__from em:last-child { animation: drag-now var(--dur) var(--wait) both; } .is-play .fui-drag__to { animation: drag-to var(--dur) var(--wait) both; } .is-play .fui-drag__to small { animation: drag-to-text var(--dur) var(--wait) both; } .is-play .fui-drag__to em:first-child { animation: drag-was-to var(--dur) var(--wait) both; } .is-play .fui-drag__to em:last-child { animation: drag-now-to var(--dur) var(--wait) both; } .is-play .fui-drag__move { animation: drag-move var(--dur) var(--wait) both; } .is-play .fui-drag__chip { animation: drag-chip var(--dur) var(--wait) both; } .is-play .fui-drag__dot { animation: drag-dot var(--dur) var(--wait) both; } @keyframes drag-from { 0%, 24.9% { background: #dff0fc; } 25%, 100% { background: #f4f4f6; } } @keyframes drag-was { 0%, 24.9% { visibility: visible; color: #1c8fd8; font-weight: 600; } 25%, 100% { visibility: hidden; } } @keyframes drag-now { 0%, 24.9% { visibility: hidden; } 25%, 100% { visibility: visible; } } @keyframes drag-to { 0%, 54.9% { background: #f4f4f6; color: #121212; box-shadow: none; } 55%, 71.9% { background: #e8f5fe; color: #121212; box-shadow: inset 0 0 0 .15em #24abff; } 72%, 100% { background: #24abff; color: #fff; box-shadow: none; } } @keyframes drag-to-text { 0%, 71.9% { color: #727272; font-weight: 400; } 72%, 100% { color: #fff; font-weight: 600; } } @keyframes drag-was-to { 0%, 71.9% { visibility: visible; } 72%, 100% { visibility: hidden; } } @keyframes drag-now-to { 0%, 71.9% { visibility: hidden; } 72%, 100% { visibility: visible; } } @keyframes drag-move { 0%, 25% { transform: none; } 66%, 100% { transform: translateX(calc(300% + 3 * var(--gap))); } } @keyframes drag-chip { 0%, 21.9% { opacity: 0; transform: none; box-shadow: none; } 22% { opacity: 1; transform: none; } 27%, 66% { opacity: 1; transform: translateY(-6%) scale(1.07) rotate(-2deg); box-shadow: 0 .8em 1.4em -.5em rgb(18 18 18 / .35); } 71.9% { opacity: 1; transform: none; box-shadow: none; } 72%, 100% { opacity: 0; } } @keyframes drag-dot { 0% { opacity: 0; transform: translate(2.2em, 2.4em); } 14% { opacity: 1; transform: none; } 20%, 70% { opacity: 1; transform: scale(.82); } 76% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translate(1em, 1.2em); } } .fui-tables .is-res small { font-weight: 600; font-variant-numeric: tabular-nums; } .fui-note { padding: .7em .8em; border-radius: .75em; background: #f4f4f6; font-size: .9em; } .fui-tabs--wrap { flex-wrap: wrap; margin-right: 0; } .fui-card--note b { font-size: 1.02em; } .fui-card--note span { font-size: .85em; color: #727272; } .screen-tabs--stage .screen-tabs__media--video, .screen-tabs__media--video { padding: 0; overflow: hidden; background: linear-gradient(#f1f5f8, #e5e9f2); } .screen-tabs__media--video video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; } @media (min-width: 601px) { .closing--fade-left.tile--photo.bottom::after { background: linear-gradient(90deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .38) 28%, rgb(0 0 0 / .1) 48%, transparent 58%), linear-gradient(0deg, rgb(0 0 0 / .25) 0%, transparent 40%); } } .fui__stack--shot { width: min(86%, 42em); padding-bottom: 2.5em; } .fui__stack--shot > .fui-shot:first-child { margin-inline: auto; } .fui-shot { overflow: hidden; width: 86%; border-radius: 1em; background: #fff; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 14px 32px -10px rgb(18 18 18 / .2); } .fui-shot img { display: block; width: 100%; height: auto; } .fui-shot--side { position: absolute; right: -6%; bottom: 0; width: 34%; } .fui__stack--tall { width: min(70%, 30em); } .fui__stack--tall > .fui-shot:first-child { width: 78%; } .quote-row__story { align-self: flex-start; margin-top: var(--s3); font-size: var(--fs-small); } .fui-sound { display: flex; align-items: center; gap: .2em; height: 2em; } .fui-sound b { width: .3em; height: 40%; border-radius: .2em; background: #24abff; animation: fui-sound 1s ease-in-out infinite; } .fui-sound b:nth-child(2) { animation-delay: .15s; } .fui-sound b:nth-child(3) { animation-delay: .3s; } .fui-sound b:nth-child(4) { animation-delay: .45s; } .fui-sound b:nth-child(5) { animation-delay: .6s; } @keyframes fui-sound { 0%, 100% { height: 30%; } 50% { height: 100%; } } @media (prefers-reduced-motion: reduce) { .fui-sound b { animation: none; height: 70%; } } .fui-shot--phone { width: 52%; max-height: 22em; border-radius: 1.4em; } .fui-shot--phone img { object-fit: cover; object-position: top; aspect-ratio: 9 / 13; } .fui-shot--receipt { width: 52%; padding: .4em; } @media (max-width: 600px) { .flow-map--feature .flow-map__cards { display: flex; flex-wrap: wrap; gap: var(--s2); } .flow-map--feature .flow-map__card.is-here { order: -1; flex: 1 1 100%; margin-bottom: var(--s2); } .flow-map--feature .flow-map__card:not(.is-here) { display: block; padding: var(--s2) var(--s4); border-radius: 2em; } .flow-map--feature .flow-map__card:not(.is-here) :is(.flow-map__desc, .flow-map__products) { display: none; } .flow-map--feature .flow-map__card:not(.is-here) .flow-map__name { font-size: var(--fs-small); font-weight: 600; } } @media (max-width: 600px) { .closing .tile__media img[style*="--pos-m"] { object-position: var(--pos-m) !important; } } @media (max-width: 600px) { .closing--fade-left { min-height: 0; } .closing--fade-left .tile__media { position: relative; inset: auto; z-index: auto; aspect-ratio: 4 / 3; } .closing--fade-left .tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .closing--fade-left.tile--photo.bottom::after { content: none; } .closing--fade-left { background: var(--bg); color: var(--ink); } .closing--fade-left .tile__body { background: none; } .closing--fade-left .tile__body .h2 { color: var(--ink-head) !important; } .closing--fade-left .tile__text { color: var(--ink-2); } .closing--fade-left .tile__body > .h2 { font-size: 1.5rem; } } .feature-row--single { grid-template-columns: minmax(0, 1fr); } .feature-row--single .feature-side { display: none; } .feature-row--single .post-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: center; padding: 0; background: none; } .feature-row--single .post-feature__media { aspect-ratio: 16 / 9; border-radius: var(--r-card); } .feature-row--single .post-feature__body { padding: 0; } @media (max-width: 900px) { .feature-row--single .post-feature { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .feature-row--single .post-feature__media { border-radius: var(--r-tile); } } .story-quote--review figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); } .story-quote__source { font-size: var(--fs-small); } .sx { --b: #2f7ae5; --b2: #cfe0f8; position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; container-type: inline-size; color: #121212; } .sx p, .sx ol, .sx ul, .sx dl { margin: 0; padding: 0; list-style: none; } .sx-card { width: 100%; max-width: 40rem; padding: clamp(14px, 3.4cqi, 26px); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 18px 40px -14px rgb(18 18 18 / .22); font-size: clamp(10px, 2.1cqi, 14px); line-height: 1.35; } .sx-card--mid { max-width: 30rem; } .sx-eyebrow { display: flex; align-items: center; gap: .5em; font-size: .78em; font-weight: 600; color: #727272; text-transform: uppercase; letter-spacing: .04em; } .sx-live { width: .6em; height: .6em; border-radius: 50%; background: var(--b); } .sx-headline { margin-top: .5em !important; font-size: 1.6em; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } .sx-headline b { color: var(--b); } .sx-label { font-size: .72em; font-weight: 600; color: #727272; text-transform: uppercase; letter-spacing: .05em; } .sx-title { margin-top: .2em !important; font-size: 1.15em; font-weight: 700; } .sx-note { margin-top: .3em !important; font-size: .8em; color: #727272; } .sx-note b { color: var(--b); } .sx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-bottom: 1em; } .sx-link { font-size: .85em; font-weight: 600; color: var(--b); white-space: nowrap; } .sx-badge { padding: .3em .7em; border-radius: 2em; background: #e6effc; color: var(--b); font-size: .72em; font-weight: 600; white-space: nowrap; } .sx-kpis { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; gap: .7em; margin-top: 1.1em; } .sx-kpi { padding: .9em; border-radius: 12px; background: #f6f7f9; } .sx-kpi--center { text-align: center; } .sx-big { margin-top: .2em !important; font-size: 2em; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .sx-mid { margin-top: -1.6em !important; font-size: 1.5em; font-weight: 800; font-variant-numeric: tabular-nums; } .sx-spark { display: block; width: 100%; height: 2.6em; margin-top: .2em; } .sx-draw { fill: none; stroke: var(--b); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .sx-gauge { display: block; width: 80%; margin: .3em auto 0; } .sx-track, .sx-fill { fill: none; stroke-width: 11; stroke-linecap: round; } .sx-track { stroke: #e3e6eb; } .sx-fill { stroke: var(--b); stroke-dasharray: var(--v) 1; } .sx-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .5em .6em; margin-top: .5em !important; } .sx-mini dt { font-size: .72em; color: #727272; } .sx-mini dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } .sx-chips { display: flex; gap: .4em; } .sx-chips span { display: flex; flex-direction: column; padding: .35em .6em; border-radius: 10px; background: #f6f7f9; } .sx-chips small { font-size: .68em; color: #727272; } .sx-chips b { font-size: .95em; } .sx-chips .is-on { background: #e6effc; color: var(--b); } .sx-bars { display: grid; grid-template-columns: repeat(15, 1fr); align-items: end; gap: .35em; height: 11em; } .sx-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; } .sx-bar i { display: block; width: 100%; height: var(--h); border-radius: 4px 4px 2px 2px; background: var(--b); transform-origin: bottom; } .sx-bar small { margin-top: .3em; font-size: .62em; color: #9a9a9f; } .sx-bar.is-now i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--b); } .sx-bar.is-now small { color: var(--b); font-weight: 700; } .sx-bar.is-forecast i { background: repeating-linear-gradient(135deg, var(--b2) 0 4px, #e9f1fc 4px 8px); } .sx-legend { display: flex; gap: 1.2em; margin-top: .8em !important; font-size: .75em; color: #727272; } .sx-legend i { display: inline-block; width: .8em; height: .8em; margin-right: .35em; border-radius: 2px; vertical-align: -1px; } .sx-legend .k1 { background: var(--b); } .sx-legend .k2 { background: var(--b2); } .sx-top li { display: grid; grid-template-columns: 2em 1fr auto 4.6em; align-items: center; gap: .3em .8em; padding: .5em 0; } .sx-rank { font-size: .8em; color: #9a9a9f; font-variant-numeric: tabular-nums; } .sx-name { display: flex; flex-direction: column; gap: .35em; font-weight: 600; } .sx-name i { display: block; height: .4em; border-radius: 1em; background: linear-gradient(var(--b), var(--b)) 0 0 / var(--w) 100% no-repeat, #edf0f4; } .sx-rev { font-size: .8em; color: #727272; } .sx-top b { text-align: right; font-variant-numeric: tabular-nums; } .sx-donut-row { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 1.4em; margin-top: 1em; } .sx-donut { position: relative; } .sx-donut svg { display: block; width: 100%; transform: rotate(-90deg); } .sx-ring { fill: none; stroke: #edf0f4; stroke-width: 16; } .sx-seg { fill: none; stroke-width: 16; stroke-dasharray: var(--v) 1; stroke-dashoffset: calc(-1 * var(--o)); } .sx-donut p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sx-donut b { font-size: 1.6em; font-weight: 800; } .sx-donut small { font-size: .68em; color: #727272; } .sx-legend-list li { display: grid; grid-template-columns: .9em 1fr auto; align-items: center; gap: .6em; padding: .35em 0; } .sx-legend-list i { width: .9em; height: .9em; border-radius: 3px; } .sx-team li { display: grid; grid-template-columns: 2.2em 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: .8em; padding: .6em 0; border-bottom: 1px solid #f0f0f2; } .sx-team li > i { grid-row: span 2; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; color: #fff; font-style: normal; font-size: .75em; font-weight: 700; } .sx-team li > span { grid-row: span 2; font-weight: 600; } .sx-team b { text-align: right; font-variant-numeric: tabular-nums; } .sx-team small { text-align: right; font-size: .75em; color: #727272; } .sx-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: .9em !important; } .sx-foot dt { font-size: .68em; font-weight: 600; color: #727272; text-transform: uppercase; letter-spacing: .04em; } .sx-foot dd { margin: 0; font-size: 1.15em; font-weight: 700; } .detail-hero__photo:has(.sx-hero) { position: relative; } .sx-hero { inset: auto 5% 7% auto; padding: 0; width: min(54%, 300px); display: block; } .sx-hero .sx-card { font-size: 13px; } @keyframes sx-up { from { transform: translateY(10px); } } @keyframes sx-grow { from { transform: scaleY(0); } } @keyframes sx-draw { from { stroke-dashoffset: 1; } } @keyframes sx-gauge { from { stroke-dasharray: 0 1; } } @keyframes sx-width { from { background-size: 0 100%, auto; } } @keyframes sx-seg { from { stroke-dasharray: 0 1; } } .sx-draw { stroke-dasharray: 1; } .sx.is-play .sx-card { animation: sx-up .5s var(--ease-out) both; } .sx.is-play .sx-kpi { animation: sx-up .5s var(--ease-out) both; } .sx.is-play .sx-kpi:nth-child(2) { animation-delay: .08s; } .sx.is-play .sx-kpi:nth-child(3) { animation-delay: .16s; } .sx.is-play .sx-draw { animation: sx-draw 1.4s .25s cubic-bezier(.3,.7,.2,1) both; } .sx.is-play .sx-fill { animation: sx-gauge 1.2s .25s cubic-bezier(.3,.7,.2,1) both; } .sx.is-play .sx-bar i { animation: sx-grow .6s calc(.15s + var(--i) * 55ms) cubic-bezier(.3,.7,.2,1) both; } .sx.is-play .sx-bar.is-forecast i { animation: sx-grow .6s calc(.15s + var(--i) * 55ms) cubic-bezier(.3,.7,.2,1) both, sx-up .3s calc(.15s + var(--i) * 55ms) both; } .sx.is-play .sx-top li { animation: sx-up .45s calc(.1s + var(--i) * 80ms) var(--ease-out) both; } .sx.is-play .sx-name i { animation: sx-width .9s calc(.25s + var(--i) * 80ms) cubic-bezier(.3,.7,.2,1) both; } .sx.is-play .sx-seg { animation: sx-seg .7s calc(.2s + var(--i) * .25s) cubic-bezier(.3,.7,.2,1) both; } .sx.is-play .sx-legend-list li { animation: sx-up .4s calc(.3s + var(--i) * .25s) var(--ease-out) both; } .sx.is-play .sx-team li { animation: sx-up .45s calc(.15s + var(--i) * 110ms) var(--ease-out) both; } @media (prefers-reduced-motion: reduce) { .sx.is-play * { animation: none !important; } } @media (max-width: 900px) { .screen-tabs__media--ui:has(> .sx) { container-type: normal; aspect-ratio: auto; padding: var(--s4); } .screen-tabs__media--ui > .sx { position: relative; width: 100%; padding: 0; } } @media (max-width: 600px) { .sx-kpis { grid-template-columns: 1fr 1fr; } .sx-kpi:first-child { grid-column: 1 / -1; } .sx-chips { display: none; } .sx-hero { width: 62%; } } @keyframes fui-tap { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } } @keyframes fui-side { from { opacity: 0; transform: translate(18px, 8px); } } @keyframes fui-reveal { from { clip-path: inset(0 0 100% 0); } } .fui.is-play .fui__stack > :first-child { animation: sx-up .5s var(--ease-out) both; } .fui.is-play .fui__stack > :first-child > * { animation: sx-up .45s var(--ease-out) both; } .fui.is-play .fui__stack > :first-child > :nth-child(2) { animation-delay: .08s; } .fui.is-play .fui__stack > :first-child > :nth-child(3) { animation-delay: .16s; } .fui.is-play .fui__stack > :first-child > :nth-child(4) { animation-delay: .24s; } .fui.is-play .fui__stack > :first-child > :nth-child(5) { animation-delay: .32s; } .fui.is-play .fui__stack > :first-child > :nth-child(n+6) { animation-delay: .4s; } .fui.is-play :is(.fui-people, .fui-list, .fui-radios, .fui-dishes) > li, .fui.is-play :is(.fui-prods, .fui-opts, .fui-picks) > * { animation: sx-up .4s var(--ease-out) both; } .fui.is-play :is(.fui-people, .fui-list, .fui-radios, .fui-dishes) > li:nth-child(1), .fui.is-play :is(.fui-prods, .fui-opts, .fui-picks) > :nth-child(1) { animation-delay: .25s; } .fui.is-play :is(.fui-people, .fui-list, .fui-radios, .fui-dishes) > li:nth-child(2), .fui.is-play :is(.fui-prods, .fui-opts, .fui-picks) > :nth-child(2) { animation-delay: .35s; } .fui.is-play :is(.fui-people, .fui-list, .fui-radios, .fui-dishes) > li:nth-child(3), .fui.is-play :is(.fui-prods, .fui-opts, .fui-picks) > :nth-child(3) { animation-delay: .45s; } .fui.is-play :is(.fui-people, .fui-list, .fui-radios, .fui-dishes) > li:nth-child(n+4), .fui.is-play :is(.fui-prods, .fui-opts, .fui-picks) > :nth-child(n+4) { animation-delay: .55s; } .fui.is-play :is(.fui-opts, .fui-list, .fui-radios, .fui-tabs, .fui-chips, .fui-prods) .is-on { animation: sx-up .4s .35s var(--ease-out) both; } .fui.is-play .fui-card--side, .fui.is-play .fui-shot--side { animation: fui-side .5s 1.3s var(--ease-out) both; } .fui.is-play .fui__stack--shot > .fui-shot:first-child img { animation: fui-reveal 1s .15s cubic-bezier(.3,.7,.2,1) both; } @media (prefers-reduced-motion: reduce) { .fui.is-play * { animation: none !important; } } .fr { display: grid; } .fr > * { grid-area: 1 / 1; position: relative; isolation: isolate; background: var(--fr-bg, #fff); } @keyframes fr-in { from { opacity: 0; transform: translateY(6px); } } .is-play .fr > :not(:first-child) { animation: fr-in .35s var(--at, 1.2s) var(--ease-out) both; } @keyframes on-off { from { background: #f4f4f6; color: #121212; box-shadow: none; } } @keyframes on-was { from { background: #24abff; color: #fff; box-shadow: 0 4px 10px -4px rgb(18 18 18 / .25); } } @keyframes pill-off { from { background: #dff0fc; color: #1c8fd8; box-shadow: none; } } @keyframes pill-was { from { background: #fff; color: #1c8fd8; box-shadow: inset 0 0 0 .14em #24abff; } } @keyframes chip-off { from { background: #f2f2f4; color: #121212; } } @keyframes radio-off { from { background: #f2f2f4; box-shadow: none; } } @keyframes radio-was { from { background: #24abff; box-shadow: inset 0 0 0 .22em #fff, 0 0 0 .1em #24abff; } } @keyframes prod-off { from { background: #f4f4f6; box-shadow: none; } } .is-play :is(.fui-opts, .fui-list) .on-at { animation: on-off .01s var(--at) backwards !important; } .is-play :is(.fui-opts, .fui-list) .was-on { animation: on-was .01s var(--at) backwards !important; } .is-play .fui-tabs .on-at { animation: pill-off .01s var(--at) backwards !important; } .is-play .fui-tabs .was-on { animation: pill-was .01s var(--at) backwards !important; } .is-play .fui-radios .on-at::before { animation: radio-off .01s var(--at) backwards; } .is-play .fui-radios .was-on::before { animation: radio-was .01s var(--at) backwards; } .is-play .fui-prod.on-at { animation: prod-off .01s var(--at) backwards !important; } .is-play .appear-at { animation: fr-in .35s var(--at) var(--ease-out) both !important; } @media (prefers-reduced-motion: reduce) { .is-play .fr > *, .is-play .on-at, .is-play .was-on, .is-play .appear-at { animation: none !important; } } .fui-prods--4 { grid-template-columns: repeat(4, 1fr); } .fui-prods--4 .fui-prod > b { font-size: .85em; } .fui-prod--none .fui-prod__img { background: #fff; } .fui-none { position: static !important; width: auto !important; height: auto !important; box-shadow: none !important; color: #727272 !important; font-size: .85em; } .fr > .fui-btn { background: #24abff; } .fui-orders { margin: 0; padding: 0; list-style: none; } .fui-ord { display: grid; grid-template-columns: 1.4fr 1fr .7fr 1fr; align-items: center; gap: .6em; padding: .55em .2em; border-bottom: 1px solid #ececee; font-size: .9em; } .fui-ord--head { padding-top: 0; font-size: .72em; font-weight: 600; color: #727272; text-transform: uppercase; letter-spacing: .04em; } .fui-ord > span:first-child { display: flex; flex-direction: column; } .fui-ord small { font-size: .78em; color: #727272; } .fui-type, .fui-st { justify-self: start; padding: .2em .6em; border-radius: .5em; font-style: normal; font-size: .8em; font-weight: 600; } .fui-type--takeaway { background: #fdf0e1; color: #b86a12; } .fui-type--dinein { background: #e6f2fd; color: #1c8fd8; } .fui-type--delivery { background: #fde8e8; color: #c43c3c; } .fui-st { background: #fdeedd; color: #a8600f; } .fui-st.is-new { background: #24abff; color: #fff; } .fui-amt { font-weight: 600; font-variant-numeric: tabular-nums; } .fui-ord.appear-at { background: #f5faff; } .fui__stack--shot { width: min(74%, 38em); } .kt { width: 100%; overflow: hidden; border-radius: .9em; background: #fff; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 10px 24px -10px rgb(18 18 18 / .22); font-size: .92em; } .kt__head { display: flex; align-items: center; justify-content: space-between; padding: .6em .8em; background: #fff; border-bottom: 1px solid #ececee; } .kt__head b { font-size: 1.05em; } .kt__head i { padding: .15em .45em; border-radius: .4em; background: #fff; box-shadow: inset 0 0 0 1px #e3e3e3; font-style: normal; font-size: .8em; font-weight: 600; } .kt__src { display: flex; align-items: center; gap: .4em; padding: .45em .8em 0; font-size: .75em; color: #727272; } .kt__src em { padding: .1em .5em; border-radius: 1em; background: #24abff; color: #fff; font-style: normal; font-weight: 600; } .kt ul { margin: 0; padding: .5em .6em .7em; list-style: none; display: grid; gap: .3em; } .kt li { display: flex; align-items: center; gap: .5em; padding: .35em .45em; border-radius: .4em; } .kt li b { padding: .05em .4em; border-radius: .3em; background: #121212; color: #fff; font-size: .8em; } .kt li.is-cooking { background: #f9cfaa; } .kt li.is-off { opacity: .4; text-decoration: line-through; } .kt li.is-later { color: #9a9a9f; } .kt__course { padding: .5em .8em 0; font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #727272; } .kt--work .kt__head { background: #f6b88a; border-color: #f6b88a; } .kt--done .kt__head { background: #12c752; border-color: #12c752; color: #fff; } .kt--done ul { background: #12c752; } .kt--done li { color: #fff; } .kt--done li b { background: #fff; color: #12c752; } .kts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; width: min(92%, 40em); align-items: start; } .kt-tap { position: relative; } .kt-tap::after { content: ""; position: absolute; right: 18%; top: 1.4em; width: 2.2em; height: 2.2em; margin: -1.1em; border-radius: 50%; border: .15em solid rgb(36 171 255 / .6); background: rgb(36 171 255 / .15); opacity: 0; } @keyframes kt-tap { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } } .is-play .kt-tap::after { animation: kt-tap .7s var(--at) both; } .osb { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: .9em; background: #fff; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 10px 24px -10px rgb(18 18 18 / .22); } .osb > div { padding: .7em .8em 1em; } .osb p { margin: 0 0 .5em; padding: .25em; border-radius: .35em; text-align: center; font-size: .8em; font-weight: 700; } .osb > div:first-child p { background: #f9cfaa; } .osb > div:last-child p { background: #12c752; color: #fff; } .osb ul { margin: 0; padding: 0 .3em; list-style: none; display: grid; gap: .2em; font-size: 1.1em; font-weight: 600; font-variant-numeric: tabular-nums; } .osb .is-moving { color: #24abff; } .rcp { width: 100%; padding: 1em; border-radius: 1.2em; background: #fff; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 14px 32px -10px rgb(18 18 18 / .2); } .rcp__venue { display: flex; align-items: center; gap: .5em; font-size: .85em; font-weight: 600; } .rcp__venue i { width: 1.6em; height: 1.6em; border-radius: 50%; background: #e53935; } .rcp__no { margin: .8em 0 0 !important; font-size: 1.6em; font-weight: 800; } .rcp__date { font-size: .78em; color: #727272; } .rcp__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; margin: .7em 0 .5em; } .rcp__bar i { height: .3em; border-radius: 1em; background: #e6e8ec; } .rcp__bar i.on { background: #24abff; } .rcp__msg { font-size: .9em; } .fui__stack--wide { width: min(92%, 42em); } .fui__stack > .kts:first-child, .fui__stack > .kt:first-child, .fui__stack > .fr:first-child, .fui__stack > .rcp:first-child { margin-inline: auto; } .fui__stack > .kt:first-child, .fui__stack > .fr.kt-tap:first-child { width: 62%; } .fr > .kt, .fr > div > .kt { background: #fff; } .fr.kt-tap > *, .fr > div:has(> .kt) { background: none; } .fr > .osb { background: #fff; } .fui-card--side.fr { padding: 0; background: none; box-shadow: none; } .fui__stack--duo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1.2em; width: min(90%, 40em); padding-bottom: 0; } .fui__stack--duo > * { width: 100% !important; margin: 0 !important; } .fui__stack--duo .fr.kt-tap { width: 100%; } .kt { font-size: 1.05em; } .kts { width: min(96%, 46em); } .fui__stack > .kt:first-child, .fui__stack > .fr.kt-tap:first-child { width: 68%; } .kt--done .kt__head i { color: #12c752; box-shadow: none; } .rcp .fr { margin-top: .6em; } .fui-opts--3 { grid-template-columns: repeat(3, 1fr); } .fui-opts .is-full { opacity: .45; text-decoration: line-through; } .fui-code { display: flex; justify-content: space-between; align-items: center; } .fui-code span { font-size: .8em; font-weight: 600; color: #0f9e44; } .fui-card-img { display: block; width: 100%; height: auto; border-radius: .7em; } .fui-shot--card { width: 40%; background: none; box-shadow: none; overflow: visible; } .fui-shot--card img { filter: drop-shadow(0 12px 18px rgb(18 18 18 / .2)); } .fui__stack--cards { width: min(70%, 30em); } .fr--cards > * { background: none; } .fr--cards img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 24px rgb(18 18 18 / .2)); } .fui__stack--site .fui-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .fui__stack--ticket { width: min(46%, 20em); } .fui__stack--phone { width: min(40%, 15em); } .fui__stack--phone .fui-card--side { right: -60%; } .fui__stack--tall { width: min(52%, 22em); } .fui__stack--tall .fui-card--side { right: -40%; } .gift-hero { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 8; border-radius: var(--r-card); background: radial-gradient(60% 55% at 50% 50%, #fff 0, transparent 70%), var(--bg); } .gift-hero img { position: absolute; width: 58%; height: auto; filter: drop-shadow(0 20px 30px rgb(18 18 18 / .22)); transition: transform var(--t-slow) var(--ease-out); } .mb-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; width: min(80%, 32em); margin-inline: auto; padding: .9em; border-radius: 1em; background: #121212; box-shadow: 0 18px 40px -14px rgb(18 18 18 / .4); } .fr--board { width: min(80%, 32em); margin-inline: auto; } .fr--board > * { background: none; } .mb-tpl--hero span:first-child { grid-row: span 2; flex-direction: column; } .mb-tpl--hero span:first-child img { width: 80%; height: auto; aspect-ratio: 1; } .partner-note { margin: var(--s5) 0 0; max-width: 46ch; font-size: var(--fs-small); color: var(--ink-2); } .partner-note .link { margin-left: var(--s1); } .fr--cards > :not(:last-child), .fr--board > :not(:last-child) { opacity: 0; } @keyframes fr-show { 0% { opacity: 0; transform: translateY(6px); } 12%, 100% { opacity: 1; transform: none; } } .is-play .fr--cards > :not(:last-child), .is-play .fr--board > :not(:last-child) { animation: fr-show var(--dur, 1s) var(--at, 0s) var(--ease-out) backwards !important; } .is-play .fr--cards > :first-child, .is-play .fr--board > :first-child { animation-name: fr-hold !important; } @keyframes fr-hold { from, to { opacity: 1; } } .fui__stack--phone .fui-card--side { right: -80%; width: 85%; } .fui__stack--tall .fui-card--side { right: -55%; width: 62%; } .is-play .tap-at { animation: fui-tap .35s var(--at) ease-in-out both !important; } .fui-prod__img > b.appear-at { z-index: 1; } .grey-at { opacity: .35; filter: grayscale(1); } @keyframes grey-in { from { opacity: 1; filter: none; } } .is-play .grey-at { animation: grey-in .4s var(--at) ease-out backwards !important; } .fui-opts--4 { grid-template-columns: repeat(4, 1fr); } .fui-opts--4 span, .fui-opts--3 span { text-align: center; } .fui-shot--bare { background: none; box-shadow: none; overflow: visible; } .fui-shot--bare img { filter: drop-shadow(0 16px 24px rgb(18 18 18 / .22)); } .gift-hero { background: none; } .fr--cards > * { animation: gift-cycle 6s infinite both !important; opacity: 0; } .fr--cards > :nth-child(2) { animation-delay: 1.5s !important; } .fr--cards > :nth-child(3) { animation-delay: 3s !important; } .fr--cards > :nth-child(4) { animation-delay: 4.5s !important; } @keyframes gift-cycle { 0% { opacity: 0; transform: translateY(8px) rotate(-1deg); } 5%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .fr--cards > * { animation: none !important; } .fr--cards > :last-child { opacity: 1; } } .rcp__bar { margin-bottom: .9em; } .rcp__msg { padding-top: .2em; } .mb-tpl { font-size: .82em; overflow: hidden; } .mb-tpl--hero span:not(:first-child) { flex-direction: column; gap: .2em; } .mb-tpl--hero span:not(:first-child) i { margin: 0; } .kt { overflow: hidden; border-radius: .6em; background: #f4f4f4; box-shadow: 0 1px 2px rgb(18 18 18 / .08), 0 10px 24px -10px rgb(18 18 18 / .25); font-size: 1em; } .kt__head { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: .85em 1em; background: #e6e6e6; border: 0; } .kt__head b { font-size: 1.25em; font-weight: 700; letter-spacing: .01em; } .kt__head i { padding: .3em .6em; border-radius: .35em; background: #fff; box-shadow: none; font-style: normal; font-size: .9em; font-weight: 600; color: #121212; } .kt__src { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: .8em .9em .5em; } .kt__src em { display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em .35em .6em; border-radius: 2em; background: #19b0e3; color: #fff; font-style: normal; font-size: .85em; font-weight: 600; } .kt__src em::before { content: ""; width: .55em; height: .9em; border-radius: .15em; border: .12em solid #fff; } .kt__pin { position: relative; width: 1.9em; height: 1.9em; border-radius: 50%; background: #fff; } .kt__pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: .5em; height: .7em; margin: -.45em 0 0 -.25em; border-radius: .1em .1em 0 0; background: #121212; transform: rotate(40deg); } .kt ul { margin: 0 .8em .9em; padding: 0; overflow: hidden; border-radius: .45em; background: #fff; gap: 0; } .kt li { padding: .6em .7em; border-radius: 0; font-weight: 600; } .kt li + li { border-top: 1px solid #ececec; } .kt li b { padding: .1em .45em; border-radius: .3em; background: #121212; color: #fff; font-size: .8em; } .kt li.is-cooking { background: #f6c49a; color: #fff; border-color: rgb(255 255 255 / .6); } .kt--work .kt__head { background: #f6c49a; color: #fff; } .kt--done .kt__head { background: #00c400; color: #fff; } .kt--done ul { background: #00c400; } .kt--done li { color: #fff; border-color: rgb(255 255 255 / .5); } .kt--done li b { background: #121212; color: #fff; } .kt--done .kt__head i { color: #121212; } .kt__course { margin: 0; padding: .2em .9em .4em; } .fui__stack--kds { width: min(78%, 34em); } .fui__stack--kds > .kt:first-child, .fui__stack--kds > .fr:first-child { width: 72%; } .kts--2 { grid-template-columns: 1fr 1fr; width: 100%; } .fui__stack--kds > .kts:first-child { width: 88%; } .mo { --mo: #ef9a8c; --mo-d: #d9786a; --mo-t: #fdf0ed; width: 68%; overflow: hidden; border-radius: 1.4em; background: #f6f6f7; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 16px 34px -12px rgb(18 18 18 / .22); color: #1e1e1e; } .fui__stack > .mo:first-child { margin-inline: auto; } .mo__bar { display: flex; align-items: center; justify-content: space-between; padding: 1em 1.1em; background: var(--mo); color: #fff; } .mo__bar b { font-size: 1.15em; font-weight: 700; } .mo__pts { padding: .25em .7em; border-radius: .6em; background: rgb(60 40 36 / .45); font-weight: 700; font-size: .9em; } .mo__body { display: grid; gap: .7em; padding: .9em; } .mo__h { margin: 0; font-size: 1.15em; font-weight: 700; text-align: center; } .mo__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5em; } .mo__list li { display: flex; align-items: center; gap: .75em; padding: .55em .7em; border-radius: .9em; background: #fff; } .mo__list li > span:first-of-type { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mo__list b { font-weight: 600; } .mo__list small { font-size: .78em; color: #7a7a7a; } .mo__img { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: .7em; background: var(--mo-t); } .mo__img img { width: 80%; height: 80%; object-fit: contain; } .mo__cost { flex: none; padding: .25em .6em; border-radius: 1em; background: var(--mo-t); color: var(--mo-d); font-size: .8em; font-weight: 700; } .mo__claim { flex: none; } .mo__claim > span { padding: .3em .75em; border-radius: 1em; background: var(--mo); color: #fff; font-size: .8em; font-weight: 700; text-align: center; white-space: nowrap; } .mo__claim > span + span { background: #1e1e1e; } .mo__list--locs li { padding: .7em .9em; } .mo__tick { position: relative; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--mo); } .mo__tick::after { content: ""; position: absolute; left: 36%; top: 22%; width: 24%; height: 44%; border: solid #fff; border-width: 0 .16em .16em 0; transform: rotate(45deg); } .mo__btn { display: grid; place-items: center; height: 2.8em; border-radius: 1.4em; background: var(--mo); color: #fff; font-weight: 700; } .before-after__media--html { position: relative; container-type: size; } .fui__stack--mo { width: 100%; padding: 0; } .mo--mini { width: min(100%, 24em); margin-inline: auto; font-size: 1.1em; } .mo--mini .mo__bar { padding: .7em 1em; } :is(.before-after__row--menu, .before-after__row--happy).before-after__row--photo { display: flex; flex-direction: column; justify-content: flex-end; } :is(.before-after__row--menu, .before-after__row--happy).before-after__row--photo .before-after__text { height: auto; align-self: flex-start; max-width: min(100%, 26rem); } .fr--cards > * { animation-duration: 14s !important; } .fr--cards > :nth-child(2) { animation-delay: 3.5s !important; } .fr--cards > :nth-child(3) { animation-delay: 7s !important; } .fr--cards > :nth-child(4) { animation-delay: 10.5s !important; } @keyframes gift-cycle { 0% { opacity: 0; } 4%, 23% { opacity: 1; } 27%, 100% { opacity: 0; } } .kt li.is-done { background: #00c400; color: #fff; } .kt li.kt-press { position: relative; } .kt li.kt-press::after { content: ""; position: absolute; right: 1.2em; top: 50%; width: 2.2em; height: 2.2em; margin-top: -1.1em; border-radius: 50%; border: .15em solid rgb(255 255 255 / .9); background: rgb(255 255 255 / .3); opacity: 0; } .is-play .kt li.kt-press { animation: fui-tap .35s var(--at) ease-in-out both; } .is-play .kt li.kt-press::after { animation: kt-tap .7s var(--at) both; } .fui.is-play .fr > :not(:first-child) { animation: fr-in .35s var(--at, 1.2s) var(--ease-out) both !important; } .fui.is-play .fr > :first-child { animation: sx-up .45s var(--ease-out) both !important; } .fui-ord.appear-at { max-height: 4em; overflow: hidden; } @keyframes ord-in { 0% { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-width: 0; } 60% { opacity: 0; } 100% { max-height: 4em; opacity: 1; } } .is-play .fui-orders .fui-ord.appear-at { animation: ord-in .6s var(--at) cubic-bezier(.3,.7,.2,1) backwards !important; } @media (prefers-reduced-motion: reduce) { .is-play .fui-orders .fui-ord.appear-at { animation: none !important; } } .fui .fr.fr--cards > *, .fui.is-play .fr.fr--cards > * { animation: gift-cycle 14s infinite both !important; } .fui .fr.fr--cards > :nth-child(2), .fui.is-play .fr.fr--cards > :nth-child(2) { animation-delay: 3.5s !important; } .fui .fr.fr--cards > :nth-child(3), .fui.is-play .fr.fr--cards > :nth-child(3) { animation-delay: 7s !important; } .fui .fr.fr--cards > :nth-child(4), .fui.is-play .fr.fr--cards > :nth-child(4) { animation-delay: 10.5s !important; } @media (prefers-reduced-motion: reduce) { .fui .fr.fr--cards > * { animation: none !important; } .fui .fr.fr--cards > :first-child { opacity: 1; } } .fui-card--ba { width: min(100%, 22em); margin-inline: auto; font-size: 1.05em; } .fr--ba { width: min(80%, 20em); margin-inline: auto; } .fr--ba img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 20px rgb(18 18 18 / .2)); } .before-after__photo--ui { background: radial-gradient(70% 60% at 50% 30%, #fff 0, transparent 70%), #eef0f3; container-type: size; } .before-after__photo--ui .fui { align-items: start; padding-top: 7%; } .fui__stack--tile { width: min(88%, 20em); padding: 0; } .fui__stack--tile > .fui-card { width: 100%; font-size: .95em; } .fui-btn--ok { background: #12a84a; } .fui-card--ba { width: min(100%, 26em); font-size: 1.3em; } .fr--ba { width: min(100%, 26em); } .before-after__photo--ui .fui { padding-top: 10%; } .fui__stack--tile { width: min(90%, 24em); } .fui__stack--tile > .fui-card { font-size: 1.15em; } @media (max-width: 900px) { .before-after__row--photo:has(.before-after__photo--ui) { min-height: 420px; } .before-after__media--html { aspect-ratio: auto; height: 260px; max-height: none; } .fui-card--ba { font-size: 1em; } } .before-after__photo--ui { background: #fff; } .web { width: 100%; overflow: hidden; border-radius: .8em; background: #fff; box-shadow: 0 1px 2px rgb(18 18 18 / .08), 0 16px 34px -12px rgb(18 18 18 / .25); font-size: .95em; color: #121212; } .web__bar { display: flex; align-items: center; gap: .35em; padding: .55em .7em; background: #f1f2f4; border-bottom: 1px solid #e6e7ea; } .web__bar i { width: .6em; height: .6em; border-radius: 50%; background: #d4d6db; } .web__bar span { flex: 1; margin-left: .5em; padding: .25em .7em; border-radius: 1em; background: #fff; font-size: .78em; color: #6b6b70; } .web__body { display: grid; gap: .7em; padding: .8em; } .web__nav { display: flex; align-items: center; gap: 1em; margin: 0; font-size: .8em; color: #6b6b70; } .web__nav b { margin-right: auto; font-size: 1.15em; color: #121212; } .web__nav .is-on { color: #121212; font-weight: 600; text-decoration: underline; text-underline-offset: .3em; } .web__hero { display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: .8em; padding: .7em; border-radius: .7em; background: #fbe9ee; } .web__hero img { width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgb(18 18 18 / .18)); } .web__h { margin: 0; font-size: 1.15em; font-weight: 700; line-height: 1.15; } .web__sub { margin: .3em 0 0; font-size: .75em; color: #6b6b70; } .gc { --c: #1f3a2e; --t: #f1e9da; --a: #c9a96a; position: relative; overflow: hidden; aspect-ratio: 1.586; width: 100%; padding: 8% 9%; border-radius: 5% / 8%; background: radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / .08), transparent 60%), var(--c); color: var(--t); container-type: inline-size; box-shadow: 0 1px 2px rgb(18 18 18 / .15), 0 18px 34px -12px rgb(18 18 18 / .38); } .gc p { margin: 0; } .gc__frame { position: absolute; inset: 4.5%; border: 1px solid color-mix(in srgb, var(--a) 70%, transparent); border-radius: 3.5% / 5.5%; pointer-events: none; } .gc__top { display: flex; align-items: center; gap: 4cqi; } .gc__mono { display: grid; place-items: center; width: 12cqi; height: 12cqi; border-radius: 50%; border: 1px solid var(--a); color: var(--a); font-size: 4.4cqi; font-weight: 600; letter-spacing: .08em; } .gc__name { display: flex; flex-direction: column; font-size: 5.6cqi; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; } .gc__name small { margin-top: .35em; font-size: .52em; font-weight: 500; letter-spacing: .22em; color: color-mix(in srgb, var(--t) 70%, transparent); } .gc__label { position: absolute; left: 9%; bottom: 33%; font-size: 3.8cqi; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--a); } .gc__amount { position: absolute; left: 9%; bottom: 10%; font-size: 19cqi; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .gc__amount small { margin-right: .06em; font-size: .5em; font-weight: 600; vertical-align: .7em; } .gc__code { position: absolute; right: 9%; bottom: 12%; font-size: 3.4cqi; letter-spacing: .14em; color: color-mix(in srgb, var(--t) 65%, transparent); } .gc--terracotta { --c: #a9472f; --t: #fbefe3; --a: #f2c9a6; } .gc--cream { --c: #f2ebdd; --t: #23352b; --a: #8a6b3a; box-shadow: 0 1px 2px rgb(18 18 18 / .08), 0 18px 34px -12px rgb(18 18 18 / .25); } .fui-shot--card .gc { width: 100%; } .web__hero .gc { width: 100%; } .fr--cards > .gc, .fr--ba > .gc { display: block; } .fui-card > .gc { margin: .2em 0; } .web__hero { background: #f4f4f6; } .gift-hero .gh { position: absolute; width: 58%; height: auto; filter: drop-shadow(0 20px 30px rgb(18 18 18 / .22)); transition: transform var(--t-slow) var(--ease-out); } .gift-hero .gh--1 { transform: translate(-22%, -24%) rotate(-9deg); filter: none; } .gift-hero .gh--2 { transform: translate(22%, -10%) rotate(7deg); } .gift-hero .gh--3 { transform: translate(0, 22%) rotate(-2deg); } .gift-hero:hover .gh--1 { transform: translate(-28%, -30%) rotate(-12deg); } .gift-hero:hover .gh--2 { transform: translate(28%, -14%) rotate(10deg); } .gc { padding-top: 26%; } .gc__frame { display: none; } .gc__awning { --s1: var(--a); --s2: color-mix(in srgb, var(--t) 92%, transparent); position: absolute; left: 0; right: 0; top: 0; height: 15%; background: repeating-linear-gradient(90deg, var(--s1) 0 6.25cqi, var(--s2) 6.25cqi 12.5cqi); } .gc__awning::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 3.2cqi; background: radial-gradient(circle at 3.125cqi 0, var(--s1) 3.1cqi, transparent 3.2cqi) 0 0 / 12.5cqi 100% repeat-x, radial-gradient(circle at 3.125cqi 0, var(--s2) 3.1cqi, transparent 3.2cqi) 6.25cqi 0 / 12.5cqi 100% repeat-x; } .gc__top { gap: 3.5cqi; } .gc__mono { width: 11cqi; height: 11cqi; background: var(--a); color: var(--c); border: 0; font-weight: 800; } .gc__name { font-size: 6.2cqi; } .gc__label { bottom: 32%; } .gc--bistro { --a: #c9a96a; } .gc--terracotta { --a: #f2c9a6; } .gc--cream .gc__awning { --s1: #23352b; --s2: #f2ebdd; } .gc--cream .gc__mono { background: #23352b; color: #f2ebdd; } .gc { padding-top: 22%; } .gc__label { bottom: 29%; } .gc__amount { bottom: 8%; } .gc { aspect-ratio: 906 / 594; } .gc__logo { flex: none; width: 11cqi; height: 11cqi; } .gc__logo circle { fill: var(--a); } .gc__logo path { stroke: var(--c); stroke-width: 2.2; } .gc--cream .gc__logo circle { fill: #23352b; } .gc--cream .gc__logo path { stroke: #f2ebdd; } .fui-card-img { aspect-ratio: auto; } .gift-hero .gh--1 { width: 55%; } .fui-card:has(> .fui-prods--4), .fui-card:has(.fui-prods--4) { width: min(100%, 34em); } .fui-prods--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; } .fui-prods--4 .fui-prod__img { aspect-ratio: 1; } .fui-prods--4 .fui-prod__img > i { font-size: .68em; } .fui-prods--4 .fui-prod__img > b { width: 1.3em; height: 1.3em; font-size: .85em; } .fui-prod__img img { width: auto; height: 72%; max-width: 82%; object-fit: contain; margin-top: 12%; } .fui-prods--4 .fui-prod > b { font-size: .82em; line-height: 1.2; } .fui-opt-ico { flex-direction: row !important; align-items: center; justify-content: center; gap: .5em; padding: .9em .8em !important; } .fui-ico { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .fui-opt-ico:not(.is-on) .fui-ico { color: #24abff; } .step-row__icon { background: #e8f5fe; color: #1c8fd8; } @media (min-width: 901px) { .step-row__step::before { left: calc(var(--icon) + 12px); right: calc(12px - var(--gap-cards)); } } @media (max-width: 900px) { .step-row__step::before { top: calc(var(--icon) + 12px); bottom: calc(-1 * var(--s6) + 12px); } } .walkthrough__moment.is-open::before { box-shadow: inset 0 0 0 4px var(--blue); } @media (max-width: 600px) { .walkthrough__stage { padding-inline: var(--s4); } } .promise-card__media--art.is-play > *, .promise-card__media--art.is-play > * > * { animation: sx-up .5s var(--ease-out) both; } .promise-card__media--art.is-play > * > :nth-child(2) { animation-delay: .12s; } .promise-card__media--art.is-play > * > :nth-child(3) { animation-delay: .24s; } .promise-card__media--art.is-play > * > :nth-child(n+4) { animation-delay: .36s; } .promise-card__media--art.is-play > :nth-child(2) { animation-delay: .5s; } @media (prefers-reduced-motion: reduce) { .promise-card__media--art.is-play * { animation: none !important; } } .walkthrough__bar::after { background: var(--blue); } .walkthrough__nav::before { background: var(--blue); } .promise-card .promise-card__media--fui { display: block; padding: 0; container-type: size; } .promise-card__media--fui .fui { font-size: clamp(10.5px, 3.45cqmin, 13.5px); } .fui__stack--promise { width: min(88%, 25em); padding-bottom: 1.6em; } .fui__stack--promise > .fui-card:first-child, .fui__stack--promise > .mo:first-child { width: 84%; margin-inline: auto; } .fui__stack--promise > .fui-card--side { width: 58%; right: -6%; bottom: 0; } .fui__stack--promise > .fui-shot--card { width: 52%; right: -10%; bottom: -.2em; } .fui__stack--promise.fui__stack--duo { width: min(94%, 46em); padding-bottom: 0; align-items: start; } .fui__stack--promise.fui__stack--duo > .appear-at { align-self: center; } .fui__stack--promise.fui__stack--kds { width: min(88%, 25em); } .fui__stack--promise.fui__stack--kds > .fr:first-child { width: 80%; margin-inline: auto; } .fui__stack--promise.fui__stack--board { width: min(96%, 48em); padding-bottom: 0; } .fui__stack--promise .kts { width: 100%; } .fui-card--kds { gap: .7em; } .fui-card--kds .kt { box-shadow: none; } .fui-step { display: inline-flex; align-items: center; gap: .45em; flex: none; } .fui-step i { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: #f2f2f4; font-style: normal; font-weight: 700; line-height: 1; } .fui-step i.is-plus { background: #24abff; color: #fff; } .fui-step b { min-width: .8em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .fui-step .fr > * { background: #fff; } .fui-people li.fui-new { margin: 0 -.5em; padding-inline: .5em; border-radius: .6em; background: #f5faff; } .fui-people li.fui-new span { color: #1c8fd8; } .fui-ok { color: #12a84a; } .fui-ring { position: relative; display: grid; place-items: center; width: 9.5em; height: 9.5em; margin: .2em auto; } .fui-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .fui-ring circle { fill: none; stroke: #ececee; stroke-width: 9; } .fui-ring circle + circle { stroke: #24abff; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--from, 1)); } .fui-ring p { display: flex; flex-direction: column; align-items: center; text-align: center; } .fui-ring b { font-size: 2em; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .fui-ring small { font-size: .8em; color: #727272; } .is-play .fui-ring--run circle + circle { animation: ring-run 5s linear both; } @keyframes ring-run { to { stroke-dashoffset: 1; } } .fui-ring--open circle + circle { stroke-dashoffset: 0; } .fui-ring--open b { color: #24abff; } .is-play .fui-ring--open circle + circle { animation: ring-fill .7s var(--at, 0s) cubic-bezier(.3,.7,.2,1) both; } .is-play .fr > [style*="--at"] .fui-ring--open circle + circle { animation-delay: inherit; } @keyframes ring-fill { from { stroke-dashoffset: 1; } } .fui-big { display: grid; font-size: 2.3em; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; } .fui-big small { font-size: .45em; font-weight: 600; color: #727272; letter-spacing: 0; } .fui-big.fr > * { background: #fff; } .fui-meter { position: relative; display: block; height: .45em; border-radius: 1em; background: #ececee; overflow: hidden; } .fui-meter::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #24abff; transform-origin: left; transform: scaleX(var(--to)); } .is-play .fui-meter::after { animation: meter-go .6s var(--at) cubic-bezier(.3,.7,.2,1) backwards; } @keyframes meter-go { from { transform: scaleX(var(--from)); } } .fui-wait { text-align: center; } .fui-card--ok { padding: .8em 1em; } .fui-okrow { display: flex; align-items: center; gap: .7em; } .fui-okrow span { display: flex; flex-direction: column; font-size: .9em; } .fui-okrow small { font-size: .85em; color: #727272; } .fui-okrow .fui-check { width: 1.6em; height: 1.6em; background: #12c752; } .fui-hours { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: .35em; height: 5.5em; } .fr > div:has(> .fui-hours) { padding-bottom: 1.4em; } @keyframes hours-up { from { height: 0; } } .fui__stack--label { width: min(80%, 20em); } .fui-tap { display: flex; flex-direction: column; align-items: center; gap: .8em; padding: .6em 0 .4em; text-align: center; background: #fff; } .fui-tap p { display: flex; flex-direction: column; } .fui-tap b { font-size: 1.8em; font-weight: 700; } .fui-tap small { font-size: .85em; color: #727272; } .fui-tap__waves { position: relative; width: 4.5em; height: 4.5em; border-radius: 50%; background: #e8f5fe; } .fui-tap__waves::before { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: #24abff; } .fui-tap__waves::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 .2em #24abff; opacity: 0; animation: tap-wave 1.4s ease-out infinite; } @keyframes tap-wave { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } } .fui-tap--voice b { font-size: 1.35em; letter-spacing: -.01em; } .fui-tap--voice .fui-check--big { width: 3.6em; height: 3.6em; } .fui-tap--voice .fui-check--big::after { border-width: 0 .3em .3em 0; } .fui-tables .fui-hl { box-shadow: inset 0 0 0 .15em #24abff; background: #e8f5fe; } .fui-tables .fui-hl small { color: #1c8fd8; } .fui-people li.fui-none { opacity: .55; } .fui-tap--ok .fui-check--big { width: 4.5em; height: 4.5em; background: #12c752; } .fui-tap--ok .fui-check--big::after { border-width: 0 .35em .35em 0; } .kt li.is-alert { color: #c43c3c; font-weight: 700; } .kt--done li.is-alert { color: #fff; } .kt li.is-later, .kt li.is-alert { padding-top: .2em; font-size: .9em; } .fui__stack--promise .kt li + li.is-later, .fui__stack--promise .kt li + li.is-alert { border-top: 0; } .mo--promise .mo__list li { padding: .65em .8em; } .mo__cost.fr > * { background: var(--mo-t); } @media (max-width: 900px) { .fui__stack--promise.fui__stack--duo { grid-template-columns: 1fr; width: min(78%, 22em); } .fui__stack--promise.fui__stack--duo > :first-child { display: none; } .fui__stack--promise.fui__stack--board .kts { grid-template-columns: 1fr 1fr; } .fui__stack--promise.fui__stack--board .kts > :last-child { display: none; } } .promise-cards--feature .fui__stack--promise.fui__stack--duo { grid-template-columns: 1fr; width: min(78%, 22em); } .promise-cards--feature .fui__stack--promise.fui__stack--duo > :first-child { display: none; } .fui-people .fui-step { flex: none; display: inline-flex; flex-direction: row; font-weight: 700; } .fui-people .fui-step .fr { display: grid; } .promise-card__media--fui .fui { font-size: clamp(10.5px, 4cqmin, 14.5px); } .promise-card__media--fui .fui { font-size: clamp(10.5px, 3.7cqmin, 13.5px); } .fui__stack--promise { padding-bottom: 3em; } .fui__stack--promise > .fui-card--side { width: 54%; right: -8%; } .fui__stack--promise > .fui-shot--card { top: -1.6em; bottom: auto; right: -14%; width: 44%; rotate: 6deg; } .fui__stack--promise.fui__stack--kds { padding-bottom: 3.4em; } .kt--done li.is-later { color: rgb(255 255 255 / .85); } .fui__stack--promise:has(> .fui-card--side) > :first-child { width: 80%; margin-inline: 0 auto; } .promise-card--wide .promise-card__media--fui .fui { font-size: clamp(11px, 4.2cqmin, 15px); } .fui__stack--promise.fui__stack--board { width: min(94%, 54em); } @media (max-width: 600px) { .fui__stack--promise > .fui-shot--card { right: -4%; width: 40%; } } .site-footer__social { display: flex; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; } .site-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--ink-head); transition: background var(--t-base), color var(--t-base); } .site-footer__social a:hover { background: var(--ink-head); color: #fff; } .site-footer__social a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .site-footer__social svg { width: 18px; height: 18px; fill: currentColor; } [data-header] { display: block; height: var(--hdr-h); } .site-footer .site-footer__cols ul.site-footer__social { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .site-footer .site-footer__social li { margin: 0; } .site-footer .site-footer__cols ul.site-footer__social { gap: 16px; margin-top: 18px; } .site-footer__social a { width: auto; height: auto; border-radius: 0; background: none; color: var(--muted); } .site-footer__social a:hover { background: none; color: var(--ink-head); } .site-footer__social svg { width: 16px; height: 16px; } .walkthrough__moment.is-done::before { box-shadow: inset 0 0 0 2px var(--blue); } .mo { --mo: #006cff; --mo-d: #0057cc; --mo-t: #e6f0ff; } .mo__pts { background: rgb(0 30 80 / .35); } .fui-so { color: #24abff; font-weight: 700; } .fui-card--deal { width: min(100%, 15em); font-size: 1.55em; gap: 0; padding: 1em 1.1em .4em; } .fui-card--deal .fui-bar { padding-bottom: .6em; } .fui-card--deal .fui-bar b { font-size: 1.35em; } .fui-card--deal .fui-row { padding: .6em 0; border-top: 1px solid #ececee; font-size: 1em; } @media (max-width: 900px) { .fui-card--deal { font-size: 1.15em; } } .fui-tag { flex: none; padding: .25em .6em; border-radius: .5em; background: #fde8e8; color: #c43c3c; font-size: .8em; font-weight: 700; font-style: normal; } .before-after__media--html > .sx { padding: 5%; } .before-after__media--html > .sx .sx-card { max-width: 34rem; font-size: clamp(12px, 3.2cqi, 16px); } .before-after__media--html > .sx .sx-donut p b { font-size: 1.35em; } .before-after__media--html > .sx .sx-donut-row { grid-template-columns: 10.5em 1fr; } .before-after__media--html > .sx .sx-donut p b { font-size: 1.2em; } .before-after__media--html > .sx .sx-donut p small { font-size: .7em; } .promise-card__media--fui .fui-pill { background: #f2f2f4; color: #121212; } .promise-card__media--fui .fui-pill.fr { --fr-bg: #f2f2f4 !important; } .promise-card__media--fui .fui-step i.is-plus { background: #f2f2f4; color: #121212; } .promise-card__media--fui .fui-count b { background: #f2f2f4; color: #121212; } .promise-card__media--fui .fui-people li.fui-new { background: #f4f4f6; } .promise-card__media--fui .fui-people li.fui-new span, .promise-card__media--fui .fui-row--new { color: #121212; } .promise-card__media--fui .fui-tabs span { background: #f2f2f4; color: #4a4a4a; } .promise-card__media--fui .fui-tabs .is-on { background: #fff; color: #121212; } .promise-card__media--fui .fui__stack--opts { width: 94%; } .promise-card__media--fui .fui__stack--opts .fui-hero-img { width: 96px; height: 96px; margin: 0 auto; } .promise-card__media--fui .fui-ring--open b { color: #121212; } @keyframes pill-off-n { from { background: #f2f2f4; color: #4a4a4a; box-shadow: none; } } @keyframes pill-was-n { from { background: #fff; color: #121212; box-shadow: inset 0 0 0 .14em #24abff; } } .promise-card__media--fui .is-play .fui-tabs .on-at { animation-name: pill-off-n !important; } .promise-card__media--fui .is-play .fui-tabs .was-on { animation-name: pill-was-n !important; } .link.link--inline { display: inline; font-weight: inherit; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(18 18 18 / .3); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; } .link.link--inline::after { content: none; } .link.link--inline:hover { text-decoration-color: currentColor; } .stack-card__media--sx { background: linear-gradient(160deg, #eef4fc, #f6f8fb); } .spotlight-card__media--fui { margin: var(--s5) 0 0; container-type: size; } .spotlight-card__media--fui .fui { font-size: clamp(11px, 4.4cqi, 15px); } .fui__stack--spot { width: 92%; padding-bottom: 0; } .fui__stack--spot > .fr.kt-tap:first-child { width: 100%; } .article-hero--text .article-hero__grid { grid-template-columns: minmax(0, 1fr); } .article-hero--text .article-hero__text { max-width: 46rem; } .promise-cards + .quote-row { margin-top: var(--gap-cards); } .promise-card .promise-card__media--photo { position: relative; height: 328px; margin: auto calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); overflow: hidden; border-radius: 0 0 var(--r-card) var(--r-card); background: var(--surface); } .promise-card__media--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); } .promise-card:hover .promise-card__media--photo > img { transform: scale(1.04); } .pc-chip { position: absolute; left: 16px; right: auto; bottom: 16px; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: rgb(255 255 255 / .96); box-shadow: 0 1px 2px rgb(18 18 18 / .08), 0 12px 28px -10px rgb(18 18 18 / .35); color: #121212; font-size: 13px; line-height: 1.3; } .pc-chip > span:last-child { display: flex; flex-direction: column; min-width: 0; } .pc-chip em { font-style: normal; font-size: .85em; font-weight: 600; color: #727272; } .pc-chip b { font-size: 1.08em; font-weight: 700; } .pc-chip small { font-size: .88em; color: #727272; } .pc-chip__icon { display: flex; gap: 2px; flex: none; } .pc-chip__icon img { width: 22px; height: 22px; } .pc-chip__check { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #12c752; } .pc-chip__check::after { content: ""; position: absolute; left: 36%; top: 22%; width: 24%; height: 44%; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .pc-chip--mo { padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; } .pc-chip--mo > span:last-child { padding: 10px 14px 12px; } .pc-chip--mo em { margin: -10px -14px 8px; padding: 8px 14px; background: #006cff; color: #fff; } .reveal.is-in .pc-chip, .pc-chip { animation: none; } .thanks-stage { position: relative; min-height: 380px; container-type: size; } .thanks-stage .fui { font-size: clamp(12px, 3.6cqmin, 16px); } .fui__stack--thanks { width: min(86%, 26em); padding-bottom: 0; } .fui__stack--thanks > .fui-card { width: 100%; } .thanks-check { display: flex; align-items: center; gap: .8em; padding: .3em 0 .2em; } .thanks-check p { display: flex; flex-direction: column; } .thanks-check b { font-size: 1.15em; } .thanks-check small { color: #727272; font-size: .85em; } .thanks-check .fui-check--big { background: #12c752; } .thanks-steps { margin: 0; padding: 0; list-style: none; display: grid; } .thanks-steps li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .7em 0 .7em 1.8em; border-top: 1px solid #ececee; font-weight: 600; } .thanks-steps li::before { content: ""; position: absolute; left: .2em; top: 50%; width: .8em; height: .8em; margin-top: -.4em; border-radius: 50%; box-shadow: inset 0 0 0 2px #d4d4d8; } .thanks-steps li.is-done::before { background: #12c752; box-shadow: none; } .thanks-steps li.is-next::before { box-shadow: inset 0 0 0 3px var(--blue); } .thanks-steps small { flex: none; font-size: .8em; font-weight: 600; color: #727272; } .thanks-steps li.is-next small { color: var(--blue); } .thanks-hero .detail-hero__group { color: var(--muted); } @media (max-width: 900px) { .thanks-stage { min-height: 320px; } } .thanks-stage .fui { font-size: clamp(13px, 4.2cqmin, 17px); } .thanks-hero .ctas { margin-top: var(--s5); } .dest-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); } .dest-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-card); background: var(--bg); color: inherit; text-decoration: none; transition: box-shadow var(--t-base); } .dest-card:hover { box-shadow: var(--shadow-lift); } .dest-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .dest-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); } .dest-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); } .dest-card:hover .dest-card__media img { transform: scale(1.04); } .dest-card__body { position: relative; display: flex; flex-direction: column; gap: var(--gap-text); padding: var(--card-pad); padding-right: calc(var(--card-pad) + 28px); } .dest-card__body b { font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .dest-card__body > span:not(.dest-card__go) { color: var(--muted); } .dest-card__go { position: absolute; right: var(--card-pad); top: var(--card-pad); color: var(--blue); font-weight: 600; transition: transform var(--t-base) var(--ease-out); } .dest-card:hover .dest-card__go { transform: translateX(3px); } @media (max-width: 900px) { .dest-cards { grid-template-columns: 1fr; } .dest-card__media { aspect-ratio: 16 / 9; } } .life--text { grid-template-columns: minmax(0, 1fr); } .life--text .life__offer { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-cards); } .life--text .life__offer li { padding: var(--card-pad); border-radius: var(--r-card); background: var(--surface); } .life--text .life__office { margin-top: var(--s6); } @media (max-width: 900px) { .life--text .life__offer { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .life--text .life__offer { grid-template-columns: 1fr; } } .promise-card .promise-card__media--inset { position: relative; height: 328px; margin-top: auto; overflow: hidden; border-radius: var(--r-tile); background: var(--page); } .promise-card__media--inset > img { position: absolute; left: 50%; top: 28px; width: min(58%, 210px); height: auto; transform: translateX(-50%); filter: drop-shadow(0 18px 28px rgb(18 18 18 / .22)); transition: transform var(--t-zoom) var(--ease-soft); } .promise-card:hover .promise-card__media--inset > img { transform: translateX(-50%) translateY(-6px); } .promise-card .promise-card__media--photo { margin: auto 0 0; border-radius: var(--r-tile); } .thanks-pill { --fr-bg: #24abff; } .thanks-pill > :first-child { background: #727272; } .thanks-icon { flex: none; width: 2.4em; height: 2.4em; } .thanks-icon > * { background: transparent; } .thanks-spin { display: block; width: 2.4em; height: 2.4em; border-radius: 50%; border: .25em solid #e5e5ea; border-top-color: #24abff; animation: thanks-spin .8s linear infinite; } @keyframes thanks-spin { to { transform: rotate(360deg); } } .thanks-check .fr > span { display: flex; flex-direction: column; background: #fff; } .is-play .thanks-icon .fui-check { animation: thanks-pop .45s var(--at) cubic-bezier(.3,1.6,.5,1) both !important; } @keyframes thanks-pop { from { transform: scale(.3); opacity: 0; } } .is-play .thanks-steps li.is-done::before { animation: thanks-dot .3s calc(var(--at) + .25s) both; } @keyframes thanks-dot { from { background: transparent; box-shadow: inset 0 0 0 2px #d4d4d8; } } .thanks-steps li.is-next::before { animation: thanks-pulse 1.6s ease-in-out infinite; } @keyframes thanks-pulse { 50% { box-shadow: inset 0 0 0 3px var(--blue), 0 0 0 .3em rgb(36 171 255 / .18); } } @media (prefers-reduced-motion: reduce) { .thanks-spin, .thanks-steps li.is-next::before { animation: none; } } .err-board { width: 100%; } .err-board .osb { font-size: 1.15em; } .fui__stack--thanks:has(.err-chip) { padding-bottom: 2.6em; } .err-chip { right: -6%; bottom: 0; width: 52%; } .thanks-check p.fr { display: grid; } .err-chip { position: relative; right: auto; bottom: auto; width: 100%; margin-top: .8em; } .fui__stack--thanks:has(.err-chip) { padding-bottom: 0; } .err-board > * { border-radius: .9em; overflow: hidden; background: none; } .promise-card .promise-card__media--sx { position: relative; height: 328px; margin-top: auto; overflow: hidden; border-radius: var(--r-tile); background: linear-gradient(160deg, #eef4fc, #f6f8fb); } .demo__intro { max-width: 44rem; margin-bottom: var(--s6); } .demo__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-cards); align-items: start; } .demo-form { min-height: 520px; padding: var(--card-pad); } .demo-form__preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s4); } .demo-field--wide, .demo-field:has(.demo-chips) { grid-column: 1 / -1; } .demo-form__send { grid-column: 1 / -1; justify-self: start; margin-top: var(--s2); } .demo-form__note { grid-column: 1 / -1; margin: 0; font-size: var(--fs-small); color: var(--muted); } .demo-form__note a { color: inherit; } .demo-form .apply-form__fallback { margin: var(--s5) 0 0; font-size: var(--fs-small); color: var(--muted); } .demo-aside { display: grid; gap: var(--gap-cards); } .demo-card { margin: 0; padding: var(--card-pad); border-radius: var(--r-card); background: var(--card); } .demo-card__title { margin: 0 0 var(--s4); font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .demo-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: var(--s4); } .demo-steps li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 40px; counter-increment: st; } .demo-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e8f5fe; color: #1c8fd8; font-size: 13px; font-weight: 700; } .demo-steps b { color: var(--ink-head); } .demo-steps span { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-text); } .demo-quote blockquote { margin: 0 0 var(--s4); font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .demo-quote .who img { border-radius: 10px; } .demo-aside__help { margin: 0; padding: 0 var(--s2); color: var(--muted); } .demo-logos__lead { margin: 0 0 var(--s5); color: var(--muted); text-align: center; } .demo-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s5) var(--s7); margin: 0; padding: 0; list-style: none; } .demo-logos img { display: block; height: 34px; width: auto; filter: grayscale(1); opacity: .75; } @media (max-width: 900px) { .demo__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .demo-form__preview { grid-template-columns: 1fr; } } .demo-quote .who { display: flex; align-items: center; gap: 12px; } .demo-quote .who span { display: flex; flex-direction: column; color: var(--muted); font-size: var(--fs-small); } .demo-quote .who b { color: var(--ink-head); font-size: var(--fs-body); } .demo__intro { margin-bottom: 0; } .demo-hero .article-hero__title { max-width: 14ch; } .demo-form-section { padding-top: var(--s7); } .demo-form { box-shadow: 0 1px 2px rgb(18 18 18 / .04); } @media (min-width: 901px) { .demo__intro { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--s4) var(--gap-cards); } .demo__intro .detail-hero__group { grid-column: 1 / -1; } .demo__intro .article-hero__lead { margin: 0; padding-bottom: .4em; } } .demo-quote { position: relative; display: flex; flex-direction: column; gap: var(--s5); } .demo-quote__track { display: grid; } .demo-quote__slide { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); pointer-events: none; } .demo-quote__slide.is-on { opacity: 1; transform: none; pointer-events: auto; } .demo-quote__slide blockquote { margin: 0 0 var(--s4); font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .demo-quote__nav { position: relative; display: flex; gap: 8px; align-items: center; } .demo-quote__nav button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: width var(--t-base), background var(--t-base); } .demo-quote__nav button.is-on { width: 24px; border-radius: 4px; background: var(--ink-head); } .demo-quote__nav button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .demo-quote__bar { position: absolute; left: auto; right: 0; width: 64px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; } .demo-quote__bar::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; } .demo-quote.is-run .demo-quote__bar::after { animation: dq-bar 7s linear both; } @keyframes dq-bar { to { transform: scaleX(1); } } .demo-steps { position: relative; } .demo-steps::before { content: ""; position: absolute; left: 12px; top: 13px; bottom: 40px; width: 2px; background: var(--line); } .demo-steps::after { content: ""; position: absolute; left: 12px; top: 13px; bottom: 40px; width: 2px; background: var(--blue); transform-origin: top; transform: scaleY(1); } .demo-steps li::before { z-index: 1; box-shadow: 0 0 0 4px var(--card); } .demo-steps li:first-child::before { background: var(--blue); color: #fff; } .demo-steps.is-play::after { animation: ds-line 2.2s .2s cubic-bezier(.3,.7,.2,1) both; } @keyframes ds-line { from { transform: scaleY(0); } } .demo-steps.is-play li { animation: sx-up .5s var(--ease-out) both; } .demo-steps.is-play li:nth-child(2) { animation-delay: .55s; } .demo-steps.is-play li:nth-child(3) { animation-delay: 1.1s; } .demo-steps.is-play li:nth-child(4) { animation-delay: 1.65s; } .demo-steps li:first-child::after { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; animation: ds-pulse 2s ease-out infinite; } @keyframes ds-pulse { 0% { box-shadow: 0 0 0 0 rgb(36 171 255 / .45); } 100% { box-shadow: 0 0 0 10px rgb(36 171 255 / 0); } } @media (prefers-reduced-motion: reduce) { .demo-steps li:first-child::after, .demo-steps.is-play::after, .demo-steps.is-play li { animation: none; } } .demo-steps::before, .demo-steps::after { z-index: 0; } .demo-steps li { z-index: 1; } .demo-steps li::before { background: #e8f5fe; } .demo-steps li:first-child::before { background: var(--blue); } .demo-price__label { margin: 0; font-weight: 600; color: var(--muted); } .demo-price__amount { margin: 4px 0 var(--gap-text); font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--ink-head); } .demo-price__amount span { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; color: var(--muted); } .demo-price__text { margin: 0 0 var(--s4); color: var(--muted); line-height: var(--lh-text); } .demo-see { --gap: var(--gap-cards); --speed: 90s; padding-block: 12px var(--s3); -webkit-mask-image: none; mask-image: none; } .demo-see:hover .marquee__track { animation-play-state: running; } .demo-see .marquee__track { list-style: none; justify-content: flex-start; align-items: stretch; } .demo-see li { flex: none; width: clamp(272px, 22vw, 320px); } @media (prefers-reduced-motion: reduce) { .demo-see li { width: min(320px, 100%); } } .demo-see a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 12px var(--s5); border-radius: var(--r-card); background: var(--card); color: inherit; text-decoration: none; transition: box-shadow var(--t-base); } .demo-see a:hover { box-shadow: var(--shadow-lift); } .demo-see__img { display: block; aspect-ratio: 4 / 3; margin-bottom: var(--s3); overflow: hidden; border-radius: var(--r-tile); background: var(--surface); } .demo-see__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); } .demo-see a:hover .demo-see__img img { transform: scale(1.04); } .demo-see b { padding: 0 8px; font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .demo-see a > span:last-child { padding: 0 8px; color: var(--muted); } .demo-price__note { margin: -8px 0 var(--s4); font-size: var(--fs-small); color: var(--muted); } .demo__grid { align-items: stretch; } .demo-aside { grid-template-rows: auto 1fr; } .demo-form { display: flex; flex-direction: column; } .demo-quote--wide { overflow: hidden; border-radius: var(--r-card); background: var(--card); padding: 0; gap: 0; } .demo-quote--wide .demo-quote__slide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 420px; } .demo-quote__photo { position: relative; overflow: hidden; } .demo-quote__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .demo-quote__body { display: flex; flex-direction: column; justify-content: center; padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) + 32px) var(--s7); } .demo-quote--wide .demo-quote__slide blockquote { max-width: 30ch; font-size: clamp(24px, 2.6vw, 34px); line-height: var(--lh-heading); font-weight: 700; letter-spacing: -.015em; } .demo-quote--wide .demo-quote__nav { position: absolute; left: calc(5 / 12 * 100% + var(--s7)); right: var(--card-pad); bottom: var(--card-pad); } .demo-quote--wide .who { display: flex; align-items: center; gap: 12px; } .demo-quote--wide .who img { border-radius: 10px; } .demo-quote--wide .who span { display: flex; flex-direction: column; color: var(--muted); font-size: var(--fs-small); } .demo-quote--wide .who b { color: var(--ink-head); font-size: var(--fs-body); } [data-section="demo/proof"] .demo-aside__help { margin-top: var(--s4); padding: 0; } @media (max-width: 900px) { .demo-quote--wide .demo-quote__slide { grid-template-columns: 1fr; grid-template-rows: 240px auto; min-height: 0; } .demo-quote__body { padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) + 28px); } .demo-quote--wide .demo-quote__nav { left: var(--card-pad); } } .demo-steps__help { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); } .hero__title--split { font-size: clamp(2.75rem, 1.2rem + 5vw, 5.5rem); } .intg-hero .demo__intro { margin-bottom: 0; } .intg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s5); } .intg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); } .intg-grid li[hidden] { display: none; } .intg { position: relative; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr; align-items: start; column-gap: var(--s4); row-gap: var(--s4); height: 100%; padding: var(--card-pad); border-radius: var(--r-card); background: var(--card); color: inherit; text-decoration: none; transition: box-shadow var(--t-base); } a.intg:hover { box-shadow: var(--shadow-lift); } a.intg:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .intg__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--page); color: var(--ink-head); font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .intg__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .intg__body b { font-size: var(--fs-tile); line-height: var(--lh-tile); font-weight: 600; color: var(--ink-head); } .intg__body span { color: var(--muted); line-height: var(--lh-text); } .intg__cat { grid-column: 1 / -1; align-self: end; justify-self: start; padding: 4px 10px; border-radius: 20px; background: var(--page); font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); } .intg__go { position: absolute; right: var(--card-pad); bottom: var(--card-pad); color: var(--blue); font-weight: 600; transition: transform var(--t-base) var(--ease-out); } a.intg:hover .intg__go { transform: translateX(3px); } .intg-note { margin: var(--s5) 0 0; color: var(--muted); } .intg-ask { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--card-pad); border-radius: var(--r-card); background: var(--card); } .intg-ask h2 { margin: 0 0 var(--gap-text); } .intg-ask p { margin: 0; color: var(--muted); } @media (max-width: 900px) { .intg-grid { grid-template-columns: 1fr 1fr; } .intg-ask { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .intg-grid { grid-template-columns: 1fr; } } .intg__mark { overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .intg__mark img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } @media (min-width: 1081px) { .site-header.is-scrolled .mega__inner.container { padding-inline: var(--s6); } .site-header.is-scrolled .mega__foot { margin-inline: calc(-1 * var(--s6)); padding-inline: var(--s6); } } .form-hero { --form-w: clamp(360px, 36vw, 520px); --pad-top: var(--s7); display: grid; background: none; padding-block: var(--pad-top) 0; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [main-start] minmax(0, calc(var(--max) - var(--form-w) - var(--s9))) [main-end] var(--s9) [side-start] var(--form-w) [side-end] minmax(var(--gutter), 1fr) [full-end]; grid-template-rows: auto auto; } .form-hero__panel { grid-column: full; grid-row: 1; position: relative; margin-top: calc(-1 * (var(--pad-top) + var(--hdr-h) - var(--inset))); overflow: hidden; border-radius: var(--r-card); background: var(--panel); } .form-hero__intro { grid-column: main; grid-row: 1; position: relative; padding-bottom: var(--s8); } .form-hero__intro .article-hero__title { max-width: 14ch; } .form-hero__form { grid-column: side; grid-row: 1 / span 2; align-self: start; position: relative; min-height: 0; padding-bottom: var(--s5); box-shadow: 0 2px 6px rgb(0 0 0 / .04), 0 24px 48px -16px rgb(0 0 0 / .14); } .form-hero__logos { margin-top: var(--s7); padding-block: 0; } .form-hero__logos .marquee:hover .marquee__track { animation-play-state: running; } .form-hero__label { margin: 0 0 var(--s3); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); } .form-hero__logos .marquee { --speed: 90s; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent); } @media (max-width: 900px) { .form-hero { --form-w: 0px; grid-template-columns: [full-start] var(--gutter) [main-start side-start] minmax(0, 1fr) [main-end side-end] var(--gutter) [full-end]; grid-template-rows: auto auto auto; } .form-hero__intro { padding-bottom: var(--s7); } .form-hero__form { grid-row: 2; margin-top: var(--s5); } } @media (max-width: 600px) { .form-hero__panel { border-radius: var(--r-tile); } } .fui-card .fr > div { display: flex; flex-direction: column; gap: .9em; } .fui-card .fr > div > .fui-h + .fui-sub { margin-top: -.45em; } .fui-card > .fui-h + .fui-sub { margin-top: -.45em; } .fui-card .fr > div > .fui-h + .fui-sub, .fui-card > .fui-h + .fui-sub { margin-top: -.5em; margin-bottom: .2em; } .fui-card > .fr { margin-bottom: .35em; } .fui-prod { padding-bottom: .9em; } .fui-prod > b, .fui-prod > small { line-height: 1.3; } .fui-prods { align-items: stretch; } .fui.is-play .fui-prods--still > :not(.grey-at):not(.tap-at) { animation: none !important; } .fui-card--paid { width: 40% !important; right: -4% !important; gap: .25em; padding: .8em .9em !important; } .fui-card--paid .fui-check--big { width: 1.8em; height: 1.8em; } .fui-card--paid .fui-title { font-size: 1.05em; } .fui-card--paid .fui-sub { font-size: .78em; } .fui-opts--big span.fui-opt-ico { flex-direction: column !important; gap: .45em; padding: 1.3em .8em !important; font-size: 1.1em; } .fui-opts--big .fui-ico { width: 2.1em; height: 2.1em; } .fui__stack--snug { width: min(84%, 38em); } .fui__stack--snug .kt { font-size: .92em; } .fr.kt-tap > * { align-self: stretch; } .fr.kt-tap > div { display: grid; } .fr.kt-tap > div > .kt, .fr.kt-tap > .kt { height: 100%; } .osb--screen { border: .55em solid #121212; border-radius: .9em; box-shadow: 0 1px 2px rgb(18 18 18 / .2), 0 14px 30px -10px rgb(18 18 18 / .35); } .fui-opts--ticks span { position: relative; padding-right: 2.6em !important; } .fui-opts--ticks .fui-ok { position: absolute; right: .9em; top: 50%; translate: 0 -50%; font-style: normal; font-weight: 700; } .fui .fr.fr--cards > * { aspect-ratio: 1.586; width: 100%; height: auto; object-fit: cover; border-radius: 4.5% / 7%; } .fui__stack--ttp { width: min(84%, 34em); padding-bottom: 2.4em; } .ttp { position: relative; display: grid; place-items: center; } .ttp__device { position: relative; background: #fff; border: .5em solid #121212; border-radius: 1.2em; box-shadow: 0 18px 40px -16px rgb(18 18 18 / .4); } .ttp--kiosk .ttp__device { width: 13em; aspect-ratio: 9 / 15; } .ttp--pos .ttp__device { width: 24em; aspect-ratio: 16 / 10; } .ttp__screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.1em 1em; text-align: center; } .ttp--pos .ttp__screen { flex-direction: row; gap: 1em; text-align: left; } .ttp__venue { margin: 0; font-weight: 700; } .ttp__sub { margin: .15em 0 0; font-size: .8em; color: #727272; } .ttp__state { flex: 1; display: grid; } .ttp__state > div { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .6em; background: #fff; } .ttp__amount { margin: 0; font-size: 1.7em; font-weight: 700; letter-spacing: -.02em; } .ttp__target { display: flex; flex-direction: column; align-items: center; gap: .55em; } .ttp__target small { font-size: .74em; color: #727272; max-width: 12em; } .ttp__target--ok .fui-check--big { width: 3.2em; height: 3.2em; background: #12c752; } .ttp--pos .ttp__bill { flex: 1.2; display: flex; flex-direction: column; gap: .45em; font-size: .85em; } .ttp__row { display: flex; justify-content: space-between; margin: 0; } .ttp__row--total { margin-top: auto; padding-top: .5em; border-top: 1px solid #ececee; font-weight: 700; } .ttp--pos .ttp__state { flex: 1; border-radius: .7em; background: #f4f4f6; } .ttp--pos .ttp__state > div { background: #f4f4f6; border-radius: .7em; } .ttp__stand { position: absolute; left: 50%; bottom: -2.6em; width: 2.2em; height: 2.2em; translate: -50% 0; background: #e5e5ea; border-radius: 0 0 .4em .4em; z-index: -1; } .ttp__card, .ttp__phone { position: absolute; z-index: 2; pointer-events: none; } .ttp__card { width: 5.4em; aspect-ratio: 1.586; right: 18%; top: 44%; border-radius: .45em; background: linear-gradient(135deg, #1c1c1e, #3a3a3c); box-shadow: 0 10px 22px -8px rgb(18 18 18 / .5); rotate: -14deg; } .ttp__card b { position: absolute; left: 12%; top: 32%; width: 22%; height: 22%; border-radius: .15em; background: #d9b45a; } .ttp__phone { width: 3.6em; aspect-ratio: 9 / 18; right: 6%; top: 18%; border-radius: .6em; background: #121212; box-shadow: 0 12px 24px -8px rgb(18 18 18 / .5); rotate: 10deg; } .ttp__phone b { position: absolute; inset: .25em; border-radius: .42em; background: linear-gradient(160deg, #2f7ae5, #24abff); } .is-play .ttp__card { animation: ttp-card 1.9s .2s cubic-bezier(.3,.7,.2,1) both; } .is-play .ttp__phone { animation: ttp-phone 1.9s .2s cubic-bezier(.3,.7,.2,1) both; } @keyframes ttp-card { 0% { transform: translate(140%, 60%); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(-40%, 6%); } 85% { transform: translate(-40%, 6%) scale(.96); } 100% { transform: translate(-30%, 4%); } } @keyframes ttp-phone { 0% { transform: translate(120%, 40%); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(-60%, 20%); } 85% { transform: translate(-60%, 20%) scale(.96); } 100% { transform: translate(-50%, 18%); } } @media (prefers-reduced-motion: reduce) { .is-play .ttp__card, .is-play .ttp__phone { animation: none; } } .ttp__card { right: auto; left: calc(50% - 2.7em); top: 50%; rotate: -10deg; } .ttp__phone { right: auto; left: calc(50% + 4.2em); top: 22%; rotate: 8deg; } @keyframes ttp-card { 0% { transform: translate(190%, 70%); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(6%, -4%); } 85% { transform: translate(6%, -4%) scale(.95); } 100% { transform: translate(12%, 14%); } } @keyframes ttp-phone { 0% { transform: translate(160%, 40%); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(0, 0); } 85% { transform: translate(0, 0) scale(.95); } 100% { transform: translate(10%, 8%); } } @keyframes ttp-card { 0% { transform: translate(190%, 70%); opacity: 0; } 25% { opacity: 1; } 62% { transform: translate(6%, -4%); } 76% { transform: translate(6%, -4%) scale(.95); } 100% { transform: translate(120%, 95%); } } @keyframes ttp-phone { 0% { transform: translate(160%, 40%); opacity: 0; } 25% { opacity: 1; } 62% { transform: translate(0, 0); } 76% { transform: translate(0, 0) scale(.95); } 100% { transform: translate(120%, 30%); } } .is-play .ttp__card, .is-play .ttp__phone { animation-duration: 2.6s; } .fui__stack--sm { font-size: .88em; padding-bottom: 1.5em; } .fui__stack--sm .fui-card--paid { bottom: 8%; } .gc { aspect-ratio: 809 / 449; border-radius: 1.48% / 2.67%; } .fui .fr.fr--cards > * { aspect-ratio: auto; object-fit: initial; border-radius: 0; } .fui .fr.fr--cards > .gc, .gh > .gc { width: 90.7%; margin: 4.6% 4.7% 10%; aspect-ratio: 809 / 449; } .fui .fr.fr--cards > *, .fui.is-play .fr.fr--cards > * { animation: gift-cycle 10s infinite both !important; } .fui .fr.fr--cards > :nth-child(2), .fui.is-play .fr.fr--cards > :nth-child(2) { animation-delay: 2.5s !important; } .fui .fr.fr--cards > :nth-child(3), .fui.is-play .fr.fr--cards > :nth-child(3) { animation-delay: 5s !important; } .fui .fr.fr--cards > :nth-child(4), .fui.is-play .fr.fr--cards > :nth-child(4) { animation-delay: 7.5s !important; } .fui__stack--sm { font-size: .88em; padding-bottom: 1.5em; } .fui__stack--sm .fui-card--paid { bottom: 8%; } .gc { aspect-ratio: 809 / 449; border-radius: 1.48% / 2.67%; } .fui .fr.fr--cards > * { aspect-ratio: auto; object-fit: initial; border-radius: 0; } .fui .fr.fr--cards > .gc, .gh > .gc { width: 90.7%; margin: 4.6% 4.7% 10%; aspect-ratio: 809 / 449; } .fui .fr.fr--cards > *, .fui.is-play .fr.fr--cards > * { animation: gift-cycle 10s infinite both !important; } .fui .fr.fr--cards > :nth-child(2), .fui.is-play .fr.fr--cards > :nth-child(2) { animation-delay: 2.5s !important; } .fui .fr.fr--cards > :nth-child(3), .fui.is-play .fr.fr--cards > :nth-child(3) { animation-delay: 5s !important; } .fui .fr.fr--cards > :nth-child(4), .fui.is-play .fr.fr--cards > :nth-child(4) { animation-delay: 7.5s !important; } .fui__stack--sxl { width: min(86%, 30em); padding-bottom: 0; } .fui__stack--sxl > .sxl { width: 100%; } .sxl .fr > div { min-height: 14em; } .sxl__head { display: flex; align-items: center; justify-content: space-between; gap: .8em; } .sxl__title { margin: 0; font-weight: 700; font-size: 1.05em; } .sxl__select { display: inline-flex; align-items: center; gap: .5em; padding: .55em .8em; border-radius: .7em; box-shadow: inset 0 0 0 1px #e3e3e8; font-weight: 600; font-size: .9em; white-space: nowrap; } .sxl__select.is-open { box-shadow: inset 0 0 0 2px #24abff; } .sxl__pin { width: .7em; height: .7em; border-radius: 50%; background: #24abff; } .sxl__chev { width: .45em; height: .45em; border: solid #727272; border-width: 0 .14em .14em 0; transform: rotate(45deg) translateY(-25%); } .sxl__select.is-open .sxl__chev { transform: rotate(-135deg) translateY(-25%); } .sxl__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; } .sxl__kpis p { margin: 0; display: flex; flex-direction: column; gap: .2em; padding: .8em; border-radius: .8em; background: #f4f4f6; } .sxl__kpis small { font-size: .75em; color: #727272; } .sxl__kpis b { font-size: 1.35em; letter-spacing: -.02em; } .sxl__menu { margin: 0; padding: .35em; list-style: none; border-radius: .9em; background: #fff; box-shadow: 0 1px 2px rgb(18 18 18 / .08), 0 14px 30px -12px rgb(18 18 18 / .3); align-self: flex-end; width: 70%; } .sxl__menu li { padding: .6em .75em; border-radius: .55em; font-size: .9em; font-weight: 500; } .sxl__menu li.was-on, .sxl__menu li.on-at { background: #e8f5fe; color: #1c8fd8; font-weight: 600; } .sxl__menu li.was-on { background: transparent; color: inherit; font-weight: 500; } .is-play .sxl__menu li.was-on { animation: sxl-was .01s var(--at) backwards; } .is-play .sxl__menu li.on-at { animation: sxl-off .01s var(--at) backwards; } @keyframes sxl-was { from { background: #e8f5fe; color: #1c8fd8; font-weight: 600; } } @keyframes sxl-off { from { background: transparent; color: #121212; font-weight: 500; } } .sxl__all { margin-top: .25em; border-top: 1px solid #ececee; border-radius: 0 0 .55em .55em !important; color: #727272; } .is-play .sxl__menu { animation: sx-up .35s .9s var(--ease-out) both; } .fui__stack--sxl { font-size: 1.3em; width: min(88%, 30em); } .sxl .fr > div { min-height: 12.5em; } .gc { border-radius: 4% / 7.2%; } .sxl .fr > div { min-height: 0; } .sxl__head { position: relative; z-index: 2; } .sxl__v { display: inline-grid; } .sxl__v > * { background: transparent !important; } .sxl__select { position: relative; } .sxl__body { position: relative; } .sxl__kpis { transition: none; } .sxl__menu { position: absolute; z-index: 3; right: 0; top: -.4em; width: 62%; opacity: 0; pointer-events: none; } .sxl__menu li.sxl__cur { color: #1c8fd8; font-weight: 600; } .sxl__menu li.sxl__pick { background: transparent; } .is-play .sxl__menu { animation: sxl-menu 1.7s .9s var(--ease-out) both !important; } .is-play .sxl__kpis { animation: sxl-blur 1.7s .9s ease both; } .is-play .sxl__select { animation: sxl-ring 1.7s .9s ease both; } .is-play .sxl__menu li.sxl__pick { animation: sxl-pick 1.7s .9s ease both; } @keyframes sxl-menu { 0% { opacity: 0; transform: translateY(-6px); } 12%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } } @keyframes sxl-blur { 0%, 100% { filter: none; opacity: 1; } 12%, 84% { filter: blur(4px); opacity: .55; } } @keyframes sxl-ring { 0%, 100% { box-shadow: inset 0 0 0 1px #e3e3e8; } 10%, 86% { box-shadow: inset 0 0 0 2px #24abff; } } @keyframes sxl-pick { 0%, 45% { background: transparent; color: inherit; } 55%, 100% { background: #e8f5fe; color: #1c8fd8; } } @media (prefers-reduced-motion: reduce) { .is-play .sxl__menu, .is-play .sxl__kpis, .is-play .sxl__select { animation: none !important; } } .process-timeline__step:not(:last-child)::after { background: var(--blue); } .process-timeline__icon { border-radius: 50%; background: #e8f5fe; color: #1c8fd8; } .process-timeline__step.is-past .process-timeline__icon { color: #fff; background: var(--blue); } .process-timeline__step.is-open .process-timeline__card { outline-color: var(--blue); } .answer-card__media--fui { background: var(--page); container-type: size; } .answer-card__media--fui .fui { font-size: clamp(9px, 3.2cqmin, 13px); } .swm { display: grid; grid-template-columns: 1fr auto 1.5fr; align-items: center; gap: 1.2em; width: 92%; } .swm ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35em; } .swm li { display: flex; justify-content: space-between; gap: .6em; font-size: .85em; } .swm li b { font-weight: 600; } .swm__old { padding: 1em; border-radius: .9em; background: #fff; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 12px 26px -12px rgb(18 18 18 / .25); } .swm__old p, .swm__dev p { margin: 0 0 .55em; font-size: .75em; font-weight: 600; color: #727272; } .swm__flow { display: flex; flex-direction: column; align-items: center; gap: .4em; } .swm__flow i { width: 2px; height: 1.6em; background: linear-gradient(#24abff, rgb(36 171 255 / 0)); } .swm__flow b { padding: .4em .8em; border-radius: 2em; background: var(--blue); color: #fff; font-size: .8em; } .swm__devs { display: grid; gap: .6em; } .swm__dev { padding: .7em .8em; border-radius: .7em; background: #fff; border: .3em solid #121212; } .swm__dev--kiosk { border-radius: .9em; } .swm__dev--qr { border-radius: 1.1em; } .is-play .swm__old { animation: swm-out 1.3s .3s cubic-bezier(.3,.7,.2,1) both; } .is-play .swm__flow b { animation: swm-pulse 1s 1s ease both; } @keyframes swm-out { 0% { opacity: 0; transform: translateX(-10%); } 30% { opacity: 1; transform: none; } 75% { transform: translateX(8%); opacity: 1; } 100% { transform: translateX(8%); opacity: .45; } } @keyframes swm-pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 .5em rgb(36 171 255 / .18); } } @media (max-width: 600px) { .swm { grid-template-columns: 1fr; } .swm__flow { flex-direction: row; } .swm__flow i { width: 1.6em; height: 2px; } } .sxl__v > :first-child { animation: none; } .is-play .sxl__v > :first-child { animation: sxl-hide .01s 2.55s both; } @keyframes sxl-hide { to { opacity: 0; } } .sxl__v > :first-child { opacity: 0; } .fui:not(.is-play) .sxl__v > :first-child, .is-play .sxl__v > :first-child { opacity: 1; } .is-play .sxl__v > :first-child { animation: sxl-hide .01s 2.55s forwards; } .answer-card__media--fui .fui { font-size: clamp(11px, 4.4cqmin, 16px); } .swm { width: 96%; } .fui:not(.is-play) .sxl__v > :first-child { opacity: 0; } .sxl__v { display: inline-grid; } .sxl__v > * { grid-area: 1 / 1; } .sxl__a { opacity: 0; } .sxl__b { opacity: 1; } .is-play .sxl__a { animation: sxl-a 2.6s both; } .is-play .sxl__b { animation: sxl-b 2.6s both; } @keyframes sxl-a { 0%, 97% { opacity: 1; } 100% { opacity: 0; } } @keyframes sxl-b { 0%, 97% { opacity: 0; } 100% { opacity: 1; } } .swm__devs { gap: .4em; } .swm__dev { padding: .45em .6em; border-width: .22em; } .swm__dev ul { gap: .15em; } .swm__dev li { font-size: .72em; } .swm__dev p { margin-bottom: .3em; } .swm__old li { font-size: .78em; } .before-after__list, .setup-list__items, .flow-map--feature .flow-map__cards, .stack-cards { gap: var(--gap-cards); } @media (max-width: 900px) { .setup-list__items, .flow-map__cards { gap: var(--gap-cards); } } @media (max-width: 600px) { .flow-map__cards, .setup-list__items, .before-after__list, .bento, .promise-cards, .reviews .carousel__track, .carousel__track { gap: var(--gap-cards); } } .flow-map--feature .flow-map__card.is-here { margin-bottom: 0; } .fui:not(.is-play) :is(.ttp__card, .ttp__phone) { opacity: 0; } .life__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s3); border-radius: 50%; background: #e8f5fe; color: #1c8fd8; } .life__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .life__offer li > span:not(.life__icon) { color: var(--ink-2); } .manifesto { padding-block: var(--section); } .manifesto .container { } .manifesto__text { max-width: none; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-card); background: var(--card); font-size: var(--fs-h2, 3.5rem); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: var(--lh-heading); letter-spacing: -.025em; text-wrap: balance; } .manifesto__text.is-live .w { color: var(--muted); } .before-after__photo--tint { background: #ebf6ff; } .fui .fr.fr--cards > .gc { border-radius: 4% / 7.2%; } .fui__stack--kts3 { width: min(98%, 52em); } .fui__stack--kts3 .kts { gap: 1em; } .fui__stack--kts3 .kt { font-size: 1em; } .fui__stack--station { width: min(86%, 34em); } @media (max-width: 600px) { .fui__stack--station { width: 92%; } .fui__stack--station .st-screen { width: 100% !important; } .fui__stack--station .fui-card--side { position: relative; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: none; margin-top: .6em; } } .st-screen { width: 82% !important; gap: .8em; padding: .8em; background: #121212; color: #fff; } .st-screen__bar { display: flex; align-items: center; justify-content: space-between; gap: .8em; } .st-screen__name { font-size: .78em; font-weight: 600; color: #a1a1a6; } .st-tabs { margin: 0; } .st-tabs button { flex: none; padding: .45em .95em; border: 0; border-radius: 2em; background: #2c2c2e; color: #e5e5ea; font: inherit; font-size: .85em; font-weight: 700; cursor: pointer; } .st-tabs button.is-on { background: var(--blue); color: #fff; } .st-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .st-views { display: grid; } .st-view { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); pointer-events: none; } .st-view.is-on { opacity: 1; transform: none; } .st-view .kt { box-shadow: none; } .kt > div:last-of-type > ul:last-child, .kt > ul:last-child { margin-bottom: 1em; } .split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8em; width: 92%; font-size: .95em; } .split__order { box-shadow: 0 1px 2px rgb(18 18 18 / .08), 0 12px 26px -12px rgb(18 18 18 / .3); } .split__lines { display: grid; gap: 2.2em; } .split__lines i { display: block; width: 2.2em; height: 2px; background: linear-gradient(90deg, #24abff, rgb(36 171 255 / .2)); } .is-play .split__lines i { animation: split-line .5s calc(.6s + var(--i, 0) * .3s) var(--ease-out) both; transform-origin: left; } .split__lines i:nth-child(2) { --i: 1; } .split__lines i:nth-child(3) { --i: 2; } @keyframes split-line { from { transform: scaleX(0); } } .split__to { display: grid; gap: .55em; } .kt--mini { font-size: .85em; } .kt--mini .kt__head { padding: .5em .7em; } .kt--mini ul { margin: .4em .5em .5em; } .fui__stack--voice { width: min(86%, 30em); } .fui__stack--voice > .fr { width: 78%; } .fui__stack--kts3 { padding-bottom: 6.5em; } .st-screen .kt { color: #121212; } .split { font-size: 1.35em; width: 94%; } .fui__stack--voice { font-size: 1.35em; width: min(90%, 28em); } .hours__list { margin: 0; display: grid; gap: 4px; } .hours__list > div { display: flex; justify-content: space-between; gap: var(--s4); } .hours__list dt { color: var(--muted); } .hours__list dd { margin: 0; font-weight: 600; color: var(--ink-head); font-variant-numeric: tabular-nums; } .hours__label { margin: var(--s4) 0 6px; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); } .hours__list--sub { font-size: var(--fs-small); } .kt li.is-later, .kt li.is-alert { padding-top: .6em; font-size: inherit; } .kt li.is-note { padding-top: .2em; font-size: .88em; color: #727272; } .kt--done li.is-note { color: rgb(255 255 255 / .85); } .kt li.is-later b { opacity: .55; } .fui__stack--kts3 { width: min(90%, 44em); } .fui__stack--kts3 .kt { font-size: .95em; } .fui__stack--kts3 .kts { gap: .8em; } .st-screen { background: #fff; color: #121212; padding: 1.2em; } .st-screen__name { color: #727272; } .st-tabs span { flex: none; padding: .45em .95em; border-radius: 2em; background: #f2f2f4; color: #4a4a4a; font-size: .85em; font-weight: 700; transition: background .3s, color .3s; } .st-tabs span.is-on { background: var(--blue); color: #fff; } .st-view .kt { box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 10px 24px -12px rgb(18 18 18 / .22); } .bento > [data-tile-bg="grey"] { background: var(--panel); } .bento > [data-tile-bg="tint"] { background: #ebf6ff; } .bento > [data-tile-bg="blue"] { background: var(--blue); color: #fff; } .bento > [data-tile-bg="black"] { background: #121212; color: #fff; } .bento > [data-tile-bg="blue"] :is(.tile__title, .tile__text, h2, h3, p), .bento > [data-tile-bg="black"] :is(.tile__title, .tile__text, h2, h3, p) { color: #fff; } :is(.before-after__list, .promise-cards) > [data-tile-bg="grey"] { background: var(--panel); } :is(.before-after__list, .promise-cards) > [data-tile-bg="tint"] { background: #ebf6ff; } :is(.before-after__list, .promise-cards) > [data-tile-bg="blue"] { background: var(--blue); color: #fff; } :is(.before-after__list, .promise-cards) > [data-tile-bg="black"] { background: #121212; color: #fff; } :is(.before-after__list, .promise-cards) > :is([data-tile-bg="blue"], [data-tile-bg="black"]) :is(p, b, span, h3) { color: #fff; } [data-tile-dark="1"], [data-tile-dark="1"] :is(h2, h3, p, b, span, .tile__title, .tile__text, .link) { color: #fff; } .before-after__row[style*="background-color"] :is(.before-after__photo--ui, .before-after__photo--tint, .before-after__media--html) { background: transparent; } .article-hero__grid > .logos--in-hero { grid-column: 1 / -1; margin-top: 0; } @media (max-width: 900px) { .article-hero__grid { grid-template-columns: minmax(0, 1fr); } } .article-hero__grid > *, .logos--in-hero, .logos--in-hero .marquee { min-width: 0; } @media (max-width: 900px) { .promise-cards:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .promise-cards { grid-template-columns: minmax(0, 1fr); } } .story-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-cards); align-items: stretch; } .story-row__photo { position: relative; min-height: 420px; overflow: hidden; border-radius: var(--r-card); background: var(--surface); } .story-row__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .story-row__card { display: flex; flex-direction: column; gap: var(--s4); padding: var(--card-pad); border-radius: var(--r-card); background: var(--card); } .story-row__card > p { margin: 0; color: var(--ink-2); line-height: var(--lh-text); } .story-row__card .founder-note { margin: auto 0 0; padding: var(--s4) var(--s5); border-radius: var(--r-tile); background: var(--page); border: 0; } .story-row__card .founder-note p { margin: 0; color: var(--ink-2); } .story-row__card .founder-note__label { margin-bottom: var(--gap-label) !important; font-size: var(--fs-small); font-weight: 600; color: var(--ink-head) !important; } @media (max-width: 900px) { .story-row { grid-template-columns: minmax(0, 1fr); } .story-row__photo { min-height: 0; aspect-ratio: 3 / 2; } } @media (max-width: 600px) { .story-row__photo, .story-row__card { border-radius: var(--r-tile); } } @media (min-width: 901px) { .article-hero--split .article-hero__text { max-width: none; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--s8); align-items: end; } .article-hero--split .article-hero__text > * { grid-column: 1; } .article-hero--split .article-hero__text > h1 { grid-row: 2 / 4; } .article-hero--split .article-hero__text > .lead { grid-column: 2; grid-row: 2; margin: 0 0 var(--gap-action); max-width: 34rem; } .article-hero--split .article-hero__text > .ctas { grid-column: 2; grid-row: 3; margin-top: 0; padding-bottom: .5rem; } } .mbw, .mbt { width: min(88%, 34em); margin-inline: auto; border: .45em solid #1d1d1f; border-radius: .9em; background: #fff; box-shadow: 0 18px 40px -14px rgb(18 18 18 / .35); overflow: hidden; color: #121212; } .mbw { padding: .9em 1.1em .5em; font-size: .9em; } .mbw__h, .mbt__h { margin: 0 0 .4em; font-weight: 700; font-size: 1.15em; } .mbw__item { position: relative; border-top: 1px solid #e3e3e3; } .mbw__row { display: flex; align-items: center; gap: .8em; padding: .55em 0; } .mbw__row img { width: 3.4em; height: 3.4em; object-fit: contain; flex: none; } .mbw__row b { display: block; font-size: 1.05em; } .mbw__row small { display: block; color: #727272; font-size: .78em; line-height: 1.4; } .mbw__row span { display: block; margin-top: .15em; font-weight: 700; } .mbw__sold { position: absolute; right: 0; top: 50%; translate: 0 -50%; padding: .35em .9em; border: 2px solid #e1251b; border-radius: .6em; background: #fff; color: #e1251b; font-style: normal; font-weight: 700; font-size: .85em; white-space: nowrap; } .mbt { display: grid; aspect-ratio: 16 / 9; font-size: .78em; } .mbt__s, .fui.is-play .fui__stack > .mbt > .mbt__s { grid-area: 1 / 1; min-width: 0; min-height: 0; opacity: 0; animation: mbt-cycle 9s linear infinite; } .fui .fui__stack > .mbt > .mbt__s:nth-child(2), .fui.is-play .fui__stack > .mbt > .mbt__s:nth-child(2) { animation-delay: -6s; } .fui .fui__stack > .mbt > .mbt__s:nth-child(3), .fui.is-play .fui__stack > .mbt > .mbt__s:nth-child(3) { animation-delay: -3s; } @keyframes mbt-cycle { 0%, 31% { opacity: 1; } 34%, 97% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mbt__s, .fui.is-play .fui__stack > .mbt > .mbt__s { animation: none; } .mbt__s:first-child { opacity: 1 !important; } } .mbt img { display: block; object-fit: contain; min-width: 0; min-height: 0; } .mbt b, .mbt i, .mbt em { font-style: normal; font-weight: 700; } .mbt i { justify-self: start; padding: .15em .6em; border-radius: .5em; background: #121212; color: #fff; } .mbt--list { display: grid; grid-template-columns: 40% 1fr; } .mbt__pop { display: grid; grid-template-rows: auto 1fr; background: #f3efe9; } .mbt__pop p { justify-self: start; margin: 0; padding: .4em .9em; border-radius: 0 0 1em 0; background: #121212; color: #fff; font-weight: 700; } .mbt__pop img { width: 82%; height: 100%; justify-self: center; } .mbt__list { display: grid; align-content: center; padding: .6em 1em; } .mbt__list span { display: grid; grid-template-columns: 1.4em 2.4em 1fr auto; align-items: center; gap: .5em; padding: .4em 0; border-top: 1px solid #e3e3e3; } .mbt__list span::before { content: counter(mbt); counter-increment: mbt; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: #e1251b; color: #fff; font-size: .8em; font-weight: 700; } .mbt__list { counter-reset: mbt; } .mbt__list img { width: 2.4em; height: 2.4em; } .mbt__list i { background: none; color: #121212; padding: 0; } .mbt--tiles { display: grid; grid-template-columns: repeat(3, 1fr) .9fr; } .mbt--tiles > span { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: .25em; padding: .7em; border-right: 1px solid #e3e3e3; } .mbt--tiles span img { order: -1; width: 100%; height: 100%; } .mbt--tiles span b { font-size: .95em; line-height: 1.15; } .mbt__menu { display: grid; grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: .2em; padding: .7em .5em; background: #f3efe9; text-align: center; } .mbt__menu p { margin: 0; font-weight: 800; line-height: 1.1; } .mbt__menu img { width: 70%; height: 100%; max-height: 3.4em; } .mbt__menu small { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: #121212; color: #fff; font-weight: 700; } .mbt__menu i { justify-self: center; background: #e1251b; } .mbt--hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; } .mbt--hero img { width: 100%; height: 100%; padding: 6%; background: #f3efe9; } .mbt--hero div { display: grid; justify-items: start; gap: .4em; padding: 1.2em; } .mbt--hero p { margin: 0; color: #727272; font-weight: 600; } .mbt--hero div b { font-size: 2.2em; line-height: 1.05; } .mbt--hero div i { font-size: 1.2em; background: #e1251b; } .before-after__media--html .mbw { width: min(94%, 30em); font-size: 1.05em; } .mbw { display: grid; align-content: center; aspect-ratio: 16 / 9; padding: .6em 1.1em; } .mbw__row { padding: .35em 0; } .mbw__row img { width: 2.8em; height: 2.8em; } .ttp__device { border-width: .35em; border-color: #1d1d1f; border-radius: 1.1em; box-shadow: 0 24px 48px -20px rgb(18 18 18 / .35); } .ttp--kiosk .ttp__device { width: 14.5em; aspect-ratio: 9 / 16; } .ttp--pos .ttp__device { width: 27em; } .ttp__screen { padding: 1.2em 1.1em 1em; } .ttp__items { list-style: none; margin: .9em 0 0; padding: .5em 0 0; border-top: 1px solid #ececee; display: grid; gap: .45em; text-align: left; font-size: .78em; } .ttp__items li { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: .6em; } .ttp__items img { width: 2.2em; height: 2.2em; object-fit: contain; border-radius: .4em; background: #f4f4f6; } .ttp__items b { font-weight: 600; } .ttp--kiosk .ttp__state > div { justify-content: flex-end; padding-bottom: .4em; } .ttp--kiosk .ttp__target { width: 100%; padding: .9em .6em; border-radius: .8em; background: #f4f4f6; } .ttp--kiosk .ttp__target--ok { background: none; } .ttp__card, .ttp__card { left: 50%; top: auto; bottom: 14%; right: auto; width: 5.6em; rotate: 0deg; translate: -50% 0; background: #1d1d1f; border-radius: .5em; box-shadow: 0 14px 28px -10px rgb(18 18 18 / .55); } .ttp__card b { left: 11%; top: 34%; width: 20%; height: 24%; background: #d4b26a; } .ttp__phone { left: calc(75% - 2.2em); right: auto; top: 26%; width: 4.4em; rotate: 0deg; border-radius: .8em; background: #121212; box-shadow: 0 14px 28px -10px rgb(18 18 18 / .55); } .ttp__phone b { inset: .22em; border-radius: .62em; background: #fff; } .ttp__phone s { position: absolute; left: 10%; right: 10%; top: 26%; aspect-ratio: 1.586; border-radius: .3em; background: #1d1d1f; } .is-play .ttp__card, .fui.is-play .fui__stack > .ttp > .ttp__card { animation: ttp-tap 2.4s .1s cubic-bezier(.3,.7,.2,1) both; } .is-play .ttp__phone, .fui.is-play .fui__stack > .ttp > .ttp__phone { animation: ttp-tap 2.4s .1s cubic-bezier(.3,.7,.2,1) both; } @keyframes ttp-tap { 0% { opacity: 0; transform: translate(70%, 40%) rotate(12deg); } 30% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 42% { transform: scale(.94); } 55% { opacity: 1; transform: scale(1); } 75%, 100% { opacity: 0; transform: translate(80%, -20%) rotate(10deg); } } @media (prefers-reduced-motion: reduce) { .fui.is-play .fui__stack > .ttp > :is(.ttp__card, .ttp__phone) { animation: none; opacity: 0; } } .promise-card__media--feature.promise-card__media--fui { display: grid; place-items: end center; min-height: 460px; margin: var(--s5) 0 0; padding: var(--s6) var(--s5); border-radius: var(--r-card); overflow: hidden; } .promise-card__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; } .promise-card__media--feature.promise-card__media--fui > .fui { position: relative; width: min(440px, 100%); scale: 1.1; transform-origin: 50% 100%; } @media (max-width: 600px) { .promise-card__media--feature.promise-card__media--fui { min-height: 340px; } .promise-card__media--feature.promise-card__media--fui > .fui { scale: 1; } } .promise-cards .fui__stack--promise.fui__stack--duo.fui__stack--opts { position: relative; grid-template-columns: 1fr; width: min(86%, 21em); font-size: 1.08em; } .promise-cards .fui__stack--promise.fui__stack--duo.fui__stack--opts > :first-child { display: flex; } .fui__stack--opts > .fui-opts__ticket { position: absolute; right: -10%; bottom: 16%; width: 52%; z-index: 2; } .fui__stack--opts .fui-hero-img { display: block; width: 46%; aspect-ratio: 1; margin: 0 auto -.2em; object-fit: contain; } .promise-cards .promise-card__media--fui:has(.fui__stack--opts) { height: 360px; } .promise-cards .fui__stack--promise.fui__stack--duo.fui__stack--opts { font-size: .92em; } .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); } .product-grid > .photo-card { width: auto; } @media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .product-grid { grid-template-columns: minmax(0, 1fr); } } .promise-cards .promise-card:not(.promise-card--feature) .promise-card__media--fui { display: grid; place-items: center; } .promise-cards .promise-card:not(.promise-card--feature) .promise-card__media--fui > .fui { max-width: 100%; font-size: .8em; } .promise-card__media--feature.promise-card__media--fui > .fui:not(:has(.kt ~ .kt, .kt-col ~ .kt-col)) { scale: 1.5; } .fui--in-device { position: absolute; inset: 0; font-size: 14px; } .fui--in-device .fui__stack { display: block; width: 100%; height: 100%; margin: 0; } .fui--in-device .fui__stack > .fui-card:not(.fui-card--side) { width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; padding: 20px 18px; display: flex; flex-direction: column; gap: .6em; } .device--phone .fui--in-device .fui__stack > .fui-card:not(.fui-card--side) { padding-top: 64px; } .fui--in-device .fui-card--side { position: absolute; left: 6%; right: 6%; bottom: 22%; top: auto; width: auto; } .fui--in-device .fui-bottom { margin-top: auto; } .promise-card__media > .promise-card__device-img { position: absolute; left: 50%; top: calc(var(--phone-top) + var(--s8)); translate: -50% 0; width: calc(var(--phone-w) * .62); max-width: 62%; height: auto; filter: drop-shadow(0 24px 40px rgb(18 18 18 / .18)); } @media (max-width: 600px) { .promise-card__media:has(> .promise-card__device-img) { aspect-ratio: auto; min-height: 0; height: auto; flex: none; margin: var(--s4) 0 0; } .promise-card__media > .promise-card__device-img { position: relative; left: auto; top: auto; translate: none; display: block; width: 58%; max-width: 58%; height: auto; margin: 0 auto; }  } .promise-card__media--feature .device__screen:has(> .fui--in-device) { position: relative; overflow: hidden; height: 100%; background: #fff; } .fui--in-device { font-size: 15.5px; } .fui--in-device .fui-people li { text-align: left; } .product-grid.product-grid--4, .product-grid.product-grid--4:has(> :nth-child(2):last-child), .product-grid.product-grid--4:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .product-grid--4 > .photo-card, .product-grid--4:has(> :nth-child(2):last-child) > .photo-card, .product-grid--4:has(> :nth-child(4):last-child) > .photo-card { aspect-ratio: 4 / 5; } @media (max-width: 1080px) { .product-grid.product-grid--4, .product-grid.product-grid--4:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .product-grid.product-grid--4, .product-grid.product-grid--4:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .product-grid.product-grid--4, .product-grid.product-grid--4:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) { grid-template-columns: minmax(0, 1fr); } } .promise-cards .fui__stack--promise.fui__stack--duo { position: relative; grid-template-columns: 1fr; width: min(86%, 21em); } .promise-cards .fui__stack--promise.fui__stack--duo > :first-child { display: flex; } .promise-cards .fui__stack--promise.fui__stack--duo > .appear-at { position: absolute; right: -10%; bottom: 16%; width: 52%; z-index: 2; } .story-row__lead { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-title); font-weight: 700; letter-spacing: -.015em; color: var(--ink-head); } .story-steps { display: grid; gap: var(--s4); margin: var(--s2) 0 0; } .story-steps > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); } .story-steps dt { font-weight: 600; color: var(--ink-head); } .story-steps dd { margin: 0; color: var(--ink-2); line-height: var(--lh-text); } @media (max-width: 600px) { .story-steps > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } } .scene-card__done { height: auto; min-height: 40px; padding: 8px var(--s4); text-align: center; line-height: 1.25; } .kts.kts--2 { grid-template-columns: 1fr 1fr; } .promise-card__media--feature > .device--kiosk:has(.fui--in-device) { top: calc(max(var(--phone-top), min(22cqw, 150px) * .8) + 110px); } .promise-card__media--photo { min-height: 240px; } @media (min-width: 601px) { .promise-cards--feature .promise-card .promise-card__media--photo { height: auto; min-height: 0; aspect-ratio: 3 / 2; } } @media (max-width: 600px) { .promise-card .promise-card__media--photo, .promise-cards--feature .promise-card .promise-card__media--photo { height: 328px; min-height: 0; margin: auto 0 0; background: var(--page); } .promise-card .promise-card__media--photo > img, .promise-cards--feature .promise-card .promise-card__media--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } } .kt li.is-ready { background: #12c752; color: #fff; } .kt li.is-ready b { background: #fff; color: #12c752; } .kt-tap--item::after { top: 4.6em; right: 30%; } .story-row__cards { display: grid; grid-template-rows: auto 1fr; gap: var(--gap-cards); min-width: 0; } .story-row__label { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); } .story-row__card--lead .story-row__lead { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); } .story-row__card > .story-row__lead { line-height: var(--lh-title); } .story-row__cards .story-steps { margin: 0; } .story-row__cards .story-steps > div:first-child { padding-top: 0; border-top: 0; } .swm__dev { border: 0; box-shadow: 0 1px 2px rgb(18 18 18 / .06), 0 10px 22px -12px rgb(18 18 18 / .22); } .swm__flow i { background: var(--blue); opacity: .5; } .answer-card__link { display: inline-flex; margin-top: var(--gap-action); align-self: flex-start; } .promise-card__media--feature > .device--kiosk-white { background: #121212; box-shadow: var(--shadow-device); } .promise-cards .fui__stack--promise.fui__stack--duo > .appear-at { left: auto; right: -14%; top: auto; bottom: -10%; translate: none; width: 60%; } .promise-cards .fui__stack--promise.fui__stack--duo.fui__stack--opts { width: min(70%, 17em); } @container (max-width: 440px) { .sx-head { flex-direction: column; gap: .6em; margin-bottom: .8em; } .sx-chips span { padding: .25em .5em; } .sx-bars { height: 7.5em; gap: .2em; } .sx-bar:nth-child(even) small { visibility: hidden; } } @media (max-width: 600px) { .stack-card__media--sx { aspect-ratio: 4 / 3; } .stack-card__media--sx .sx-chips { display: flex; } .stack-card__media--sx .sx { padding: 4%; } } .fui.is-play .fr.kt-tap > :not(:first-child), .is-play .kts .fr > :not(:first-child) { animation: kt-swap .2s var(--at, 1.2s) linear both !important; } @keyframes kt-swap { from { opacity: 0; } } @media (min-width: 901px) { .article-hero--split .article-hero__text:has(> .role-facts) { grid-template-rows: auto auto auto auto 1fr; } .article-hero--split .article-hero__text:has(> .role-facts) > h1 { grid-row: 2 / 4; } .article-hero--split .article-hero__text > .detail-hero__is { grid-column: 1; grid-row: 4; align-self: start; } .article-hero--split .article-hero__text > .role-facts { grid-column: 2; grid-row: 3; margin: 0 0 var(--gap-action); } .article-hero--split .article-hero__text:has(> .role-facts) > .ctas { grid-row: 4; align-self: start; } } .walkthrough__media--small [data-lottie-box] { scale: .74; } .promise-cards .fui__stack--promise.fui__stack--opts { width: min(86%, 21em); } .promise-card:not(.promise-card--feature) .fui__stack > .fui-card--side { right: -8%; bottom: -10%; width: 52%; } .promise-card:not(.promise-card--feature) .fui__stack:has(> .fui-card--side) { width: min(78%, 17em); } .promise-card:not(.promise-card--feature) .fui__stack > .fui-card:first-child:has(~ .fui-card--side) { width: 100%; } .promise-card:not(.promise-card--feature) .fui__stack > .fui-card--side { width: 60%; min-width: 10.5em; } @container (max-width: 440px) { .sx-bars { gap: .5em; } .sx-bar.is-now i { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--b); } .sx-card { padding: 16px 18px; } } .promise-card__media--sx .sx { padding: 8%; } @container (max-width: 440px) { .sx-bars { gap: .65em; } .sx-bar.is-now small { margin-top: .55em; } } .promise-cards .fui__stack--promise.fui__stack--kds { width: min(96%, 30em); } .promise-cards .fui__stack--promise.fui__stack--kds > .fr:first-child { width: 100%; } .promise-cards .fui__stack--promise.fui__stack--kds > .fui-card--side { bottom: -24%; right: -14%; } @media (max-width: 600px) { .split { grid-template-columns: minmax(0, 1fr); gap: .6em; width: 92%; font-size: 1.05em; } .split__lines { grid-auto-flow: column; justify-content: center; gap: 2.2em; } .split__lines i { width: 2px; height: 1.6em; background: linear-gradient(180deg, #24abff, rgb(36 171 255 / .2)); } .is-play .split__lines i { animation: split-line-down .5s calc(.6s + var(--i, 0) * .3s) var(--ease-out) both; transform-origin: top; } @keyframes split-line-down { from { transform: scaleY(0); } } } .lang a.is-missing, .lang-menu a.is-missing, footer a.is-missing { opacity: .35; pointer-events: none; } @media (max-width: 1080px) { .site-header.is-menu-open { position: fixed; top: 0; left: 0; right: 0; } .site-header.is-menu-open .nav { top: var(--hdr-h); bottom: 0; right: 0; left: 0; height: auto; padding-top: var(--s2); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .nav__meta.nav__meta { justify-content: space-between; } .lang-menu--foot .lang-menu__list { top: auto; bottom: calc(100% + 10px); right: 0; left: auto; background: #1d1d1f; color: #fff; box-shadow: none; } .lang-menu--foot .lang-menu__list a:hover { background: #262626; } .lang-menu--foot .lang-menu__list a[aria-current] { color: var(--blue); } .lang-menu--foot .lang-menu__list a span { color: #9f9f9f; } .lang-menu--foot .lang-menu__btn { color: #fff; } } @media (max-width: 600px) { .before-after__row--lifted .before-after__media--html:has(.sxl) .fui__stack--sxl { width: 100%; transform: scale(.72); transform-origin: 50% 50%; } .before-after__row--lifted .before-after__media--html:has(.sxl) { display: grid; place-items: center; } .before-after__row--lifted .before-after__media--html:has(.sxl) .fui { position: relative; inset: auto; } .before-after__row--lifted .before-after__media--html:has(.sxl) { container-type: normal; height: auto; aspect-ratio: auto; padding: var(--s5) 0; } } @media (max-width: 600px) { html[lang="nl"] .hero__mark { white-space: normal; } html[lang="nl"] main > [data-section$="/hero"] .hero__title--split { font-size: min(44px, 11.1vw); } } @media (max-width: 1080px) { .site-header__bar { transition-property: height, width, max-width, margin, padding, border-radius, border-color, box-shadow; } } @media (max-width: 1080px) { .site-header.is-menu-open { background: #121212; } } @media (max-width: 1080px) { .site-header.is-menu-open { background: #f5f5f7; color: #121212; --ink: #121212; --ink-2: #5f5f66; --line: #ebebed; --line-strong: #d6d6da; } .site-header.is-menu-open .site-header__bar { background: #f5f5f7; border-color: transparent; } .site-header.is-menu-open .burger { border-color: #d6d6da; } .site-header.is-menu-open .nav { background: #f5f5f7; color: #121212; } .site-header.is-menu-open .nav__meta a { color: #121212; } .site-header.is-menu-open .mega { color: #121212; } .site-header.is-menu-open .mega__group > h3 { color: #121212; } .site-header.is-menu-open .mega__link small { color: #5f5f66; } .site-header.is-menu-open .mega a, .site-header.is-menu-open .mega .link, .site-header.is-menu-open .mega .h3 { color: #121212; } .nav__group { border-bottom-color: #ebebed; } .mega__foot { border-top-color: #ebebed; } .lang-menu--foot .lang-menu__list { background: #ffffff; color: #121212; } .lang-menu--foot .lang-menu__list a:hover { background: #f5f5f7; } .lang-menu--foot .lang-menu__list a span { color: #5f5f66; } .lang-menu--foot .lang-menu__btn { color: #121212; } .desk-only { display: none !important; } .site-header.is-menu-open .mega__group > h3 { font-weight: 500; } .nav__meta a { font-size: 1rem; line-height: 1.5; font-weight: 500; height: auto; min-height: 0; padding: 0; } .lang-menu--foot .lang-menu__btn { font-size: 1rem; font-weight: 500; min-height: 44px; padding: 10px 16px; border-radius: 22px; background: #ffffff; } .lang-menu--foot .lang-menu__list { min-width: 220px; padding: 8px; } .lang-menu--foot .lang-menu__list a { min-height: 48px; padding: 12px 16px; font-size: 1rem; } } @media (max-width: 600px) { .promise-card__media--fui .fui__stack--promise > .fui-card--side { right: 0; bottom: 0; width: 56%; } .before-after__media--html:has(.split) { container-type: normal; aspect-ratio: auto; height: auto; padding: var(--s5) 0; } .before-after__media--html:has(.split) .fui { position: relative; inset: auto; } .promise-card__media--feature .fui__stack--promise { transform: scale(.65); transform-origin: 50% 0; } } .tile__media--sx { position: relative; height: 340px; background: linear-gradient(160deg, #eef4fc, #f6f8fb); } .tile__media--sx .sx { padding: 3%; } @media (max-width: 600px) { .tile__media--sx { height: 280px; } }