/* Generated by tools/build-d.py from the design study. Do not edit by hand. */ /* x.ai/bot ("Meet Grok Bot"), rebuilt section for section for eSSESSMENT. Same order, spacing, type scale and motion, measured at 1440 and 390. Every visual is drawn in code: HTML, CSS, SVG and canvas. */ :host { color-scheme: light; --bg: #ffffff; --fg: #0a0a0a; --fg-h: #1f2228; --muted: #7d8187; --card: #f9f8f6; --border: #d5d9e2; --b2: #edecea; --soft: #f2f1ef; --soft-h: #e8e7e5; --accent: #ad2029; --hr: #e5484d; --br: #48484a; --hrv: #8e8e93; --talk: #aeaeb2; --blink: #c7c7cc; --head: #48484a; --ok: #48484a; --site: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --hw: 450; --eoq: cubic-bezier(0.22, 1, 0.36, 1); --pop: cubic-bezier(0.2, 0.9, 0.3, 1.15); --label: cubic-bezier(0.2, 0.8, 0.3, 1); --cur: cubic-bezier(0.3, 0.1, 0.25, 1); --mat: cubic-bezier(0.4, 0, 0.2, 1); --expo: cubic-bezier(0.16, 1, 0.3, 1); --snap: cubic-bezier(0.23, 1, 0.32, 1); --ios: cubic-bezier(0.32, 0.72, 0, 1); } * { box-sizing: border-box; } .d-root { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.5 var(--site); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } h1, h2, h3, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } canvas { display: block; } svg.i { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 2px solid rgba(10, 10, 10, 0.3); outline-offset: 2px; } .wn { max-width: 1024px; margin: 0 auto; padding: 0 24px; } .ww { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .h2 { font: var(--hw) 36px/40px var(--site); letter-spacing: -0.36px; color: var(--fg); text-wrap: balance; } .nw { white-space: nowrap; } .lead { font: 400 18px/29.25px var(--site); } .muted { color: var(--muted); } /* Buttons. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 24px; border-radius: 999px; font: 400 16px/24px var(--site); white-space: nowrap; text-decoration: none; transition: background-color 0.15s var(--mat), box-shadow 0.15s var(--mat), color 0.15s var(--mat); } .btn svg { width: 1.1em; height: 1.1em; flex: none; } .bp { background: var(--fg); color: #fff; } .bp:hover { background: var(--fg-h); } .bs { background: var(--b2); color: var(--fg); transition-duration: 0.2s; transition-timing-function: ease-out; } .bs:hover { background: rgba(10, 10, 10, 0.1); } .bm { height: 40px; padding: 10px 18px; font: var(--hw) 14px/20px var(--site); background: var(--soft); color: var(--fg); } .bm:hover { background: var(--soft-h); } .bo { height: 40px; padding: 10px 18px; font: var(--hw) 14px/20px var(--site); background: transparent; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.15); color: var(--fg); } .bo:hover { background: var(--soft-h); } /* 1. Header in the Oura study's design: the logo with the links beside it on the left (36px pills, Inter 13px in warm ink) and an outlined Menu button on the right. It stays fixed: clear at the top, frosted with a hairline and a little shorter once the page scrolls. */ .hd { position: fixed; inset: 0 0 auto; z-index: 50; height: 76px; transition: height 0.3s var(--expo); } .hd::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: var(--rule, 0); } .hd-in { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; height: 76px; transition: height 0.3s var(--expo); } .hd.sc, .hd.sc .hd-in { height: 64px; } .hd .ww { position: relative; max-width: none; padding: 0 64px; } /* The color block from the Oura study: a pale field with soft peach and blue light behind the hero, inset 34px at the sides, starting under the header so the nav sits on white, with america.gov's 40px corners. Its height is set in script so the product breaks out of its bottom edge 326px (200px on phones) below the window's top. */ .hcb { position: absolute; top: 76px; right: 34px; left: 34px; z-index: 0; height: 790px; border-radius: 40px; background: radial-gradient(60% 50% at 18% 18%, rgba(255, 214, 205, 0.45), rgba(255, 214, 205, 0) 70%), radial-gradient(55% 50% at 84% 22%, rgba(200, 222, 248, 0.55), rgba(200, 222, 248, 0) 70%), linear-gradient(180deg, #f1f1ef 0%, #f6f6f4 50%, #eeeeeb 100%); pointer-events: none; } /* Behind C1 (wherever the eSSESSMENT hero shows): neutral grays and a softer, cooler blush, so the field reads less yellow. */ body:has(main:not([hidden]) #hero) .hcb { background: radial-gradient(60% 50% at 18% 18%, rgba(252, 222, 228, 0.32), rgba(252, 222, 228, 0) 70%), radial-gradient(55% 50% at 84% 22%, rgba(204, 222, 246, 0.5), rgba(204, 222, 246, 0) 70%), linear-gradient(180deg, #f3f3f4 0%, #f7f7f8 50%, #f1f1f2 100%); } .hd-rule { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: rgba(213, 217, 226, 0.5); opacity: var(--rule, 0); } .hd-l { display: flex; align-items: center; min-width: 0; } .logo { display: inline-flex; align-items: center; height: 48px; color: #4b4a47; text-decoration: none; } /* The official Presage logo (presage-logo.png from the site), never redrawn. */ .logo img { display: block; width: 106px; height: 34px; object-fit: contain; } .nav { display: flex; justify-self: start; margin-left: 20px; } .nav > a, .nav > div > button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; font: 400 13px/18px "Inter", "Helvetica Neue", Arial, sans-serif; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background 0.15s ease; } .nav > a:hover, .nav > div > button:hover, .dd-wrap.open > button { background: rgba(74, 71, 65, 0.07); } .nav svg { width: 10px; height: 10px; } .dd-wrap { position: relative; } .hd-r { justify-self: end; display: flex; align-items: center; gap: 8px; } .menu-b { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(74, 71, 65, 0.22); font: 400 13px/18px "Inter", "Helvetica Neue", Arial, sans-serif; color: var(--ink); cursor: pointer; transition: background 0.15s ease; } .menu-b:hover, .menu-b[aria-expanded="true"] { background: rgba(74, 71, 65, 0.07); } .menu-b svg { width: 18px; height: 18px; } .mm-t .menu-b { width: 36px; padding: 0; border-radius: 50%; } .hd-m { display: none; } /* Header dropdown (eSSESSMENT). */ .dd { position: absolute; top: calc(100% + 12px); left: 0; display: grid; grid-template-columns: 220px 456px; gap: 12px; width: 700px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.06), 0 16px 48px -8px rgba(0, 0, 0, 0.22); opacity: 0; transform: scale(0.96); transform-origin: top left; visibility: hidden; transition: opacity 0.2s var(--expo), transform 0.2s var(--expo), visibility 0s linear 0.2s; } .dd-wrap.open .dd { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; } .dd-l { display: flex; flex-direction: column; gap: 2px; } .dd-l a { display: block; padding: 9px 10px; border-radius: 8px; text-decoration: none; transition: background 0.15s; } .dd-l a:hover, .dd-l a.on { background: rgba(10, 10, 10, 0.04); } .dd-l b { display: block; font: var(--hw) 14px/20px var(--site); } .dd-l span { display: block; margin-top: 2px; font: 400 11px/15.1px var(--site); color: rgba(10, 10, 10, 0.6); } .dd-p { position: relative; height: 363px; overflow: hidden; border-radius: 8px; background: var(--card); } /* Coherence app dropdown: just the two store badges. */ .dd.is-app { display: flex; width: auto; } .dd-sb { display: flex; gap: 8px; } .stb { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 15px 0 12px; border-radius: 10px; background: #0a0a0a; color: #fff; text-decoration: none; white-space: nowrap; transition: background 0.15s; } .stb:hover { background: #2b2b2b; } .stb svg { width: 22px; height: 22px; flex: none; } .stb span { display: flex; flex-direction: column; } .stb small { font: 500 9px/1 var(--ui); letter-spacing: 0.02em; opacity: 0.85; } .stb b { margin-top: 2px; font: 600 15px/1.1 var(--ui); letter-spacing: -0.01em; } .dd-p .dd-mw { position: absolute; top: 24px; right: 24px; left: 24px; padding-bottom: 12px; } .dd-c { height: 220px; } /* 2. Hero. */ .hx { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 64px; max-width: 1024px; margin: 0 auto; padding: 148px 24px 112px; } .ht { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; } .lp { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-bottom: 20px; padding: 6px 6px 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0); font: 400 13px/19.5px var(--site); letter-spacing: -0.13px; color: var(--fg); text-decoration: none; transition: box-shadow 0.15s var(--mat); } .lp:hover { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.15); } .lp b { font-weight: 600; } .lp .dot { opacity: 0.3; } .lp .rest { transition: opacity 0.15s var(--mat); } .lp:hover .rest { opacity: 0.8; } .lp .ar { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border-radius: 50%; background: rgba(10, 10, 10, 0.06); transition: background 0.15s var(--mat); } .lp:hover .ar { background: rgba(10, 10, 10, 0.1); } .lp .ar svg { width: 12px; height: 12px; } .h1 { margin: 0 0 8px; font: var(--hw) min(60px, calc((100vw - 48px) / 14.6))/1 var(--site); letter-spacing: -0.01em; white-space: nowrap; perspective: 1200px; } @media (min-width: 640px) { .h1 .hbr { display: none; } } .h1 .w { display: inline-block; } .h1 .hm { width: 0.92em; height: 0.92em; margin: 0 0.04em; vertical-align: -0.13em; } .h1 .hm svg { display: block; width: 100%; height: 100%; overflow: visible; } .hsub { max-width: 672px; margin-top: 20px; font: 400 18px/29.25px var(--site); color: var(--muted); text-wrap: pretty; } .hcta { display: flex; justify-content: center; gap: 12px; margin-top: 28px; } /* C1: the headline's second half in red, the line's first sentence bold. */ #hero .h1 .red { color: var(--accent); } #hero .hsub b { font-weight: 600; color: var(--fg); } /* C1: the buttons, then the free tier. */ .hfine { margin-top: 14px; font: 400 13px/20px var(--site); color: var(--muted); } /* Hero intro: words flip up, copy and buttons de-blur, the window lowers in. */ .intro .h1 .w, .intro .lp, .intro .hsub, .intro .hcta, .intro .hfine, .intro .win-w { opacity: 0; } .intro.go .h1 .w { animation: w-in 0.65s var(--eoq) var(--d, 0s) both; } .intro.go .lp { animation: up-in 1.1s var(--eoq) 0.5s both; } .intro.go .hsub { animation: dn-in 1.1s var(--eoq) 0.5s both; } .intro.go .hcta { animation: dn-in 1s var(--eoq) 0.65s both; } .intro.go .hfine { animation: dn-in 1s var(--eoq) 0.72s both; } .intro.go .win-w { animation: drop-in 1s var(--eoq) 0.8s both; } @keyframes w-in { from { opacity: 0; transform: translateY(45%) rotateX(-40deg); } to { opacity: 1; transform: none; } } @keyframes up-in { from { opacity: 0; filter: blur(12px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } } @keyframes dn-in { from { opacity: 0; filter: blur(12px); transform: translateY(-10px); } to { opacity: 1; filter: none; transform: none; } } @keyframes drop-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } } /* Marks: the black disc with a white pulse line (H1 icon, statement), and an outline version (get started). */ .mk { display: block; width: 100%; height: 100%; overflow: visible; } .mk .disc { fill: #0a0a0a; } .mk .ln, .mk .run { fill: none; stroke: #fff; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; } .mk .mtip { fill: #fff; opacity: 0; } .mk.ol .disc { fill: none; stroke: rgba(10, 10, 10, 0.18); } .mk.ol .ln, .mk.ol .run { stroke: rgba(10, 10, 10, 0.18); } .mk.ol .run { stroke: rgba(10, 10, 10, 0.34); } .mk.ol .mtip { fill: rgba(10, 10, 10, 0.4); } .mk.ol .ring { fill: none; stroke: rgba(10, 10, 10, 0.12); } /* Hero app window: eSSESSMENT on the desktop, LiveLine for one participant. */ .win-w { width: min(1232px, calc(100vw - 48px)); } /* Hero visual, after the Oura study: LiveLine in a browser beside the participant's phone. Each answer flies from the phone to the timeline. */ .lh { --c1: #1d1d1f; --c2: #6e6e73; --c3: #a1a1a6; --cl: #e8e8eb; --cs: #f5f5f7; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; color: var(--c1); text-align: left; } .lh > .lh-bw { grid-column: 2; grid-row: 1; } .lh-bw { position: relative; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 13, 24, 0.1), 0 1px 2px rgba(11, 13, 24, 0.024), 0 3px 6px rgba(11, 13, 24, 0.03), 0 8px 14px rgba(11, 13, 24, 0.035), 0 16px 28px rgba(11, 13, 24, 0.04); container-type: inline-size; font-family: var(--ui); } .lh-bar { position: relative; display: flex; align-items: center; gap: 0.6cqi; height: 3.4cqi; padding: 0 1.4cqi; background: #efefed; border-bottom: 1px solid #e3e3e0; } .lh-bar i { width: 0.7cqi; height: 0.7cqi; border-radius: 50%; background: #cbcbc8; } .lh-url { position: absolute; left: 50%; display: inline-flex; align-items: center; gap: 0.5cqi; padding: 0.45cqi 2.2cqi; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #e3e3e0; font: 500 max(0.95cqi, 9px)/1 var(--ui); color: #86868b; translate: -50% 0; } .lh-url svg { width: max(0.95cqi, 9px); height: max(0.95cqi, 9px); } .lh-ll { display: flex; flex-direction: column; gap: 1.5cqi; height: 51cqi; padding: 1.9cqi 2.2cqi 2cqi; } .lh-head { display: flex; align-items: center; gap: 1.1cqi; } .lh-logo { flex: none; width: 8.6cqi; height: 2.75cqi; object-fit: contain; } .lh-div { flex: none; width: 1px; height: 2.2cqi; background: var(--cl); } .lh-head b { font: 600 1.9cqi/1 var(--ui); letter-spacing: -0.01em; } .lh-sub { font: 400 max(1.15cqi, 9px)/1 var(--ui); color: var(--c2); } .lh-live { display: inline-flex; align-items: center; gap: 0.5cqi; padding: 0.5cqi 0.95cqi; border-radius: 99px; background: #fdecee; font: 600 max(1.05cqi, 9px)/1 var(--ui); font-style: normal; color: #c42b35; } .lh-live::before { content: ''; width: 0.62cqi; height: 0.62cqi; border-radius: 50%; background: var(--hr); animation: blink 1.2s ease-in-out infinite; } .lh-clock { margin-left: auto; min-width: 4.2cqi; font: 500 max(1.15cqi, 9px)/1 var(--ui); text-align: right; font-variant-numeric: tabular-nums; } .lh-body { display: grid; grid-template-columns: minmax(0, 1fr) 22cqi; gap: 1.6cqi; flex: 1 1 0; min-height: 0; } .lh-chart { position: relative; overflow: hidden; border: 1px solid var(--cl); border-radius: 1cqi; } .lh-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .lh-key { position: absolute; left: 1.4cqi; z-index: 2; font: 600 max(1.12cqi, 9px)/1.2 var(--ui); color: var(--c); transform: translateY(-50%); } .lh-key small { display: block; margin-top: 0.3cqi; font: 400 max(1cqi, 9px)/1 var(--ui); color: var(--c2); } .lh-key small b { font-weight: 600; color: var(--c1); font-variant-numeric: tabular-nums; } .lh-key.ev { font-weight: 500; font-size: max(1cqi, 9px); } .lh-side { display: flex; flex-direction: column; gap: 1.2cqi; min-height: 0; overflow: hidden; } .lh-who { display: flex; align-items: baseline; gap: 0.8cqi; margin-top: -0.2cqi; } .lh-who b { font: 600 max(1.35cqi, 10px)/1 var(--ui); } .lh-who span { font: 400 max(1.05cqi, 9px)/1 var(--ui); color: var(--c2); } .lh-cam { position: relative; flex: none; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 1cqi; background: #ebe6de; box-shadow: 0 0 0 1px var(--cl); } .lh-cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .lh-tag { position: absolute; top: 0.8cqi; left: 0.8cqi; display: inline-flex; align-items: center; gap: 0.45cqi; padding: 0.45cqi 0.8cqi; border-radius: 99px; background: rgba(255, 255, 255, 0.88); font: 600 max(0.9cqi, 9px)/1 var(--ui); } .lh-tag i { width: 0.55cqi; height: 0.55cqi; border-radius: 50%; background: var(--hr); } .lh-ah { display: flex; justify-content: space-between; font: 600 max(1.1cqi, 9px)/1 var(--ui); } .lh-ah span { font-weight: 400; color: var(--c2); } .lh-ans { display: flex; flex-direction: column; gap: 0.6cqi; } .lh-ans li { display: grid; grid-template-columns: 1fr auto; gap: 0.35cqi 0.8cqi; padding: 0.85cqi 1cqi; border-radius: 0.8cqi; background: var(--cs); font: 400 max(1cqi, 9px)/1.2 var(--ui); color: var(--c2); transition: opacity 0.3s ease; animation: lh-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .lh-ans li b { font: 500 max(1.05cqi, 9px)/1.2 var(--ui); color: var(--c2); } .lh-ans li span { font: 600 max(1.1cqi, 9px)/1.2 var(--ui); color: var(--c1); font-variant-numeric: tabular-nums; } .lh-ans li em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-variant-numeric: tabular-nums; } .lh-ans li.is-new { background: #fdf0f1; } .lh-ans.has-new li:not(.is-new) { opacity: 0.45; } /* The browser as a macOS Safari window, to match the iOS phone: real window buttons in light gray, back and forward, a gray address field, share and new tab; inside, the system font, a frosted camera tag and the answers as one grouped list. */ .lh { --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif; --l2: rgba(60, 60, 67, 0.6); --fill: rgba(118, 118, 128, 0.12); } .lh-bw { --ui: var(--sf); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05), 0 28px 60px -18px rgba(0, 0, 0, 0.22); } .lh-bar { gap: 0.55cqi; height: 4.4cqi; padding: 0 1.5cqi; background: #f7f7f7; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .lh-bar i, .lh-bar i:nth-child(2), .lh-bar i:nth-child(3) { width: 0.9cqi; height: 0.9cqi; background: #dcdcdf; box-shadow: none; } .lh-nav, .lh-tools { display: flex; gap: 1.1cqi; color: rgba(0, 0, 0, 0.35); } .lh-nav { margin-left: 1.8cqi; } .lh-tools { margin-left: auto; } .lh-nav svg, .lh-tools svg { width: 1.5cqi; height: 1.5cqi; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .lh-url { justify-content: center; min-width: 32cqi; padding: 0.6cqi 1.6cqi; border-radius: 0.8cqi; background: rgba(0, 0, 0, 0.055); box-shadow: none; color: rgba(0, 0, 0, 0.55); } /* The product name as a tracked wordmark: smaller, semibold, open caps. */ .lh-head b { font: 600 1.55cqi/1 var(--sf); letter-spacing: 0.06em; color: #1d1d1f; } .lh-sub, .lh-who span, .lh-ah span, .lh-key small { color: var(--l2); } .lh-live { background: rgba(255, 59, 48, 0.1); color: #d70015; } .lh-live::before { background: #ff3b30; } .lh-chart { border-color: rgba(0, 0, 0, 0.08); border-radius: 1.2cqi; } /* SF's taller ascenders were clipped by the panel at line-height 1. */ .lh-who { margin-top: 0; padding-top: 0.2cqi; } .lh-who b, .lh-who span { line-height: 1.25; } .lh-cam { border-radius: 1.2cqi; } .lh-tag { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); box-shadow: 0 0.3cqi 1cqi rgba(0, 0, 0, 0.1); } .lh-tag i { background: #ff3b30; } .lh-ans { gap: 0; overflow: hidden; border-radius: 1cqi; background: var(--fill); } .lh-ans li { position: relative; border-radius: 0; background: transparent; } .lh-ans li + li::before { content: ''; position: absolute; top: 0; right: 0; left: 1cqi; height: 1px; background: rgba(60, 60, 67, 0.16); } .lh-ans li.is-new { background: rgba(255, 59, 48, 0.08); } /* Previous sessions in the side panel, a plain list on white with hairlines: a play button to review each in Playback, the day, then time and length. */ /* Side panel rhythm: name, then her camera close below it; a clear gap before the sessions; the header sits tight on its list. */ .lh-side { gap: 0; } .lh-cam { margin-top: 1.1cqi; } .lh-ah { margin-top: 2.4cqi; } .lh-prev { margin-top: 0.3cqi; } .lh-prev { display: flex; flex-direction: column; } .lh-prev li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9cqi; row-gap: 0.25cqi; align-items: center; padding: 1cqi 0; } .lh-prev li + li::before { content: ''; position: absolute; top: 0; right: 0; left: 3.3cqi; height: 1px; background: rgba(60, 60, 67, 0.14); } .lh-prev i { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: rgba(255, 59, 48, 0.1); color: var(--accent); } .lh-prev svg { width: 1.1cqi; height: 1.1cqi; margin-left: 0.15cqi; fill: currentColor; } .lh-prev b { font: 600 max(1.05cqi, 9px)/1.2 var(--sf); color: #000; } .lh-prev span { font: 400 max(1cqi, 9px)/1.2 var(--sf); font-variant-numeric: tabular-nums; color: var(--l2); } /* Metric names: one size for every line, the name semibold in its color, the reading semibold black, the unit gray. */ /* Hero phone: all white, her camera in a circle ringed with dots, and the question below with no sheet (the screen is 100cqi wide, about 216cqi tall). */ .hx .lh-pho .pho-s { background: #fff; } .lh-ct, .lh-ring { display: none; } .hx .lh-pho .lh-pc { top: 31cqi; right: auto; left: 50%; width: 62cqi; height: auto; aspect-ratio: 1; border-radius: 50%; translate: -50% 0; } .hx .lh-pho .lh-pc::after, .hx .lh-pho .lh-rec, .hx .lh-pho .lh-bpm { display: none; } /* As on the homepage: a ring of dots, pink-red at the top to blue at the bottom, turning slowly, and a scan band wiping up and down her face. */ .hx .lh-pho .lh-ring { position: absolute; top: 25.25cqi; left: 50%; z-index: 2; display: block; width: 73.5cqi; height: 73.5cqi; overflow: visible; translate: -50% 0; pointer-events: none; animation: lh-spin 14s linear infinite; } @keyframes lh-spin { to { rotate: 360deg; } } .hx .lh-pho .lh-pc video { object-position: 50% 30%; transform: scale(1.22); transform-origin: 50% 36%; } .lh-sweep { display: none; } .hx .lh-pho .lh-sweep { position: absolute; inset: 0; z-index: 1; display: block; background: linear-gradient(180deg, rgba(255, 107, 117, 0) 0%, rgba(255, 107, 117, 0.22) 48%, rgba(255, 140, 150, 0.5) 50%, rgba(255, 107, 117, 0) 54%); background-size: 100% 220%; mix-blend-mode: screen; animation: lh-sweep 2.8s ease-in-out infinite alternate; } @keyframes lh-sweep { from { background-position: 0 100%; } to { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .hx .lh-pho .lh-ring, .hx .lh-pho .lh-sweep { animation: none; } } .hx .lh-pho .lh-q { inset: 104cqi 0 0; background: #fff; box-shadow: none; } .hx .lh-pho .lh-q::before { display: none; } /* Each answer its own pill; the chosen one fills red like the scale. */ .hx .lh-pho .lh-opts { gap: 2cqi; overflow: visible; border-radius: 0; background: none; } .hx .lh-pho .lh-opts span { padding: 3.4cqi 4.4cqi; border-radius: 99px; background: var(--fill); text-align: center; } .hx .lh-pho .lh-opts span + span::before { display: none; } .hx .lh-pho .lh-opts .sel { background: var(--accent); font-weight: 600; color: #fff; } /* Her camera in LiveLine's side panel, the panel's full width. */ .hx .lh-side .lh-cam { width: 100%; } /* Previous sessions in the hero: a small preview of each session's own traces (heart rate over breathing, drawn by script), then the date and the time and length; no red buttons and no rules between rows. */ .hx .lh-prev { gap: 1cqi; margin-top: 0.9cqi; } .hx .lh-prev li { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr auto 1fr; column-gap: 1.1cqi; row-gap: 0; padding: 0; } /* A quiet gray chevron at the right: the row opens that session. */ .hx .lh-prev li::after { content: ''; grid-area: 1 / 3 / -1 / 4; align-self: center; width: 0.65cqi; height: 0.65cqi; margin-right: 0.5cqi; border-top: max(0.15cqi, 1.5px) solid #c7c7cc; border-right: max(0.15cqi, 1.5px) solid #c7c7cc; rotate: 45deg; } .hx .lh-prev li b { grid-area: 2 / 2; } .hx .lh-prev li span { display: none; } .hx .lh-prev li + li::before { display: none; } .hx .lh-prev i { position: relative; grid-area: 1 / 1 / -1 / 2; width: 6.4cqi; height: auto; aspect-ratio: 16 / 7.5; overflow: hidden; border-radius: 0.8cqi; background: #f5f5f7; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); } .hx .lh-prev i svg { width: 100%; height: 100%; margin: 0; } /* The hero's metric names and readings, larger. */ .hx .lh-key, .hx .lh-key small, .hx .lh-key.ev { font-size: max(1.45cqi, 10px); } /* In the narrower panel the name and the study stack, one line each. */ .hx .lh-who { flex-direction: column; align-items: flex-start; gap: 0.3cqi; } .hx .lh-who b, .hx .lh-who span { white-space: nowrap; } /* Hero browser: no address field, and a shorter top bar. */ .hx .lh-url { display: none; } .hx .lh-bar { height: 3.2cqi; } .lh-key { font: 600 max(1.2cqi, 9px)/1.25 var(--sf); letter-spacing: -0.005em; } @media (min-width: 960px) { .hx .lh-key { left: calc(80% + max(1.6cqi, 12px)); } /* The phone sits to the left of the browser, centered on it top to bottom, its top on the browser's top. The browser takes 93% of the room beside the phone, the pair centered, and is 33% taller than the phone. */ .hx .lh { --pw: clamp(168px, 14vw, 206px); grid-template-columns: auto minmax(0, 0.932fr); justify-content: center; align-items: start; } .hx .pho.lh-pho { --pw: inherit; } .hx .lh-ll { height: calc(var(--pw) * 2.1667 * 1.331 - 3.2cqi); } .hx .lh-body { grid-template-columns: minmax(0, 1fr) 22cqi; } } .lh-key small { margin-top: 0.3cqi; font: 500 max(1.2cqi, 9px)/1.25 var(--sf); color: var(--l2); } .lh-key small b { font-weight: 600; color: #000; } .lh-key.ev { font: 500 max(1.2cqi, 9px)/1.25 var(--sf); } @keyframes lh-in { from { opacity: 0; transform: translateY(-0.6cqi); } } .pho.lh-pho { --pw: clamp(168px, 14vw, 206px); grid-column: 1; grid-row: 1; z-index: 5; margin-top: 0; padding: calc(var(--pw) * 0.03); border-radius: calc(var(--pw) * 0.16); background: linear-gradient(150deg, #ebebee 0%, #d0d0d6 55%, #e1e1e5 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 24px 48px -16px rgba(23, 23, 23, 0.2), 0 2px 6px rgba(23, 23, 23, 0.08); } /* No black anywhere on the frame, to sit with the all-light browser: a light silver band and only a hairline where the screen meets it. */ /* The hero phone's app in Apple's iOS style: the system font at iOS sizes, frosted capsules on the camera, and the question on a white sheet with a grabber; tinted rounded buttons, a grouped list with a checkmark, and a full-width rounded Next button. 1pt = 0.256cqi. */ .lh-pho .pho-s { border-radius: calc(var(--pw) * 0.138); background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); font-family: var(--sf); color: #000; } .lh-pho .psb { font: 600 max(4.4cqi, 8px)/1 var(--sf); letter-spacing: -0.01em; } .lh-pc { position: absolute; top: 0; right: 0; left: 0; height: 52%; overflow: hidden; background: #ebe6de; } .lh-pc::after { content: ''; position: absolute; inset: 0 0 auto; height: 22cqi; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); } .lh-pc video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; } .lh-rec, .lh-bpm { position: absolute; bottom: 9cqi; z-index: 2; display: inline-flex; align-items: center; gap: 1.4cqi; padding: 1.9cqi 3cqi; border-radius: 99px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); box-shadow: 0 0.6cqi 2.4cqi rgba(0, 0, 0, 0.1); font: 600 max(3.3cqi, 8px)/1 var(--sf); color: #000; } .lh-rec { left: 4cqi; } .lh-rec i { width: 2cqi; height: 2cqi; border-radius: 50%; background: #ff3b30; } .lh-bpm { right: 4cqi; font-weight: 500; color: var(--l2); } .lh-bpm svg { width: 3.4cqi; height: 3.4cqi; color: #e5484d; fill: currentColor; stroke-width: 1.2; } .lh-bpm b { font-weight: 600; color: #000; font-variant-numeric: tabular-nums; } .lh-q { position: absolute; inset: calc(52% - 6cqi) 0 0; z-index: 3; display: flex; flex-direction: column; padding: 7.6cqi 5.2cqi 10cqi; border-radius: 7.6cqi 7.6cqi 0 0; background: #fff; box-shadow: 0 -0.4cqi 3cqi rgba(0, 0, 0, 0.07); } .lh-q::before { content: ''; position: absolute; top: 2.2cqi; left: 50%; width: 9.4cqi; height: 1.3cqi; border-radius: 99px; background: rgba(60, 60, 67, 0.3); translate: -50% 0; } .lh-qc { position: relative; display: flex; flex-direction: column; } .lh-qc.swap { animation: lh-swap 0.5s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes lh-swap { from { opacity: 0; transform: translateX(6cqi); } } .lh-qk { display: flex; align-items: center; gap: 1.2cqi; font: 400 max(3.4cqi, 8px)/1.2 var(--sf); color: var(--l2); transition: color 0.3s ease; } .lh-qk svg { display: none; width: max(3.6cqi, 8px); height: max(3.6cqi, 8px); stroke-width: 3; } .lh-qk.ok { color: #48484a; } .lh-qk.ok svg { display: block; } .lh-qt { margin-top: 1.6cqi; font: 700 max(5.8cqi, 11px)/1.2 var(--sf); letter-spacing: -0.02em; } .lh-sc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqi; margin-top: 5.6cqi; } .lh-sc span, .lh-opts span { position: relative; background: var(--fill); font: 400 max(4.3cqi, 9px)/1 var(--sf); color: #000; transition: background-color 0.2s ease, color 0.2s ease; } .lh-sc span { display: grid; place-items: center; aspect-ratio: 1.08; border-radius: 2.8cqi; font-variant-numeric: tabular-nums; } .lh-sc .sel { background: var(--accent); font-weight: 600; color: #fff; } .lh-ends { display: flex; justify-content: space-between; margin-top: 2.4cqi; font: 400 max(3.3cqi, 8px)/1 var(--sf); color: var(--l2); } .lh-opts { display: none; flex-direction: column; margin-top: 5.6cqi; overflow: hidden; border-radius: 3cqi; background: var(--fill); } .lh-opts span { padding: 3.6cqi 4cqi; background: transparent; } .lh-opts span + span::before { content: ''; position: absolute; top: 0; right: 0; left: 4cqi; height: 1px; background: rgba(60, 60, 67, 0.18); } .lh-opts .sel { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2L13 4.6' fill='none' stroke='%23ad2029' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4cqi center / 3.8cqi; } .lh-q.opts .lh-sc, .lh-q.opts .lh-ends { display: none; } .lh-q.opts .lh-opts { display: flex; } .lh-tap::after { content: ''; position: absolute; inset: 0; border-radius: inherit; animation: lh-tap 0.5s ease-out forwards; } @keyframes lh-tap { from { box-shadow: 0 0 0 0 rgba(173, 32, 41, 0.45); } to { box-shadow: 0 0 0 4cqi rgba(173, 32, 41, 0); } } .lh-next { margin-top: auto; padding: 3.9cqi; border-radius: 3.6cqi; background: var(--accent); font: 600 max(4.3cqi, 9px)/1 var(--sf); letter-spacing: -0.01em; text-align: center; color: #fff; transition: transform 0.12s var(--mat); } .lh-next.press { transform: scale(0.96); } .lh-home { position: absolute; bottom: 2cqi; left: 50%; z-index: 9; width: 34.4cqi; height: 1.3cqi; border-radius: 99px; background: rgba(0, 0, 0, 0.85); translate: -50% 0; } .lh-fly { position: absolute; top: 0; left: 0; z-index: 8; border-radius: 99px; background: var(--accent); box-shadow: 0 4px 10px -2px rgba(173, 32, 41, 0.35); font-family: var(--ui); font-weight: 600; white-space: nowrap; color: #fff; pointer-events: none; } /* Narrow screens keep the phone and the browser side by side: a smaller phone, and LiveLine trimmed to its timeline. */ @media (max-width: 959px) { .hx .win-w { width: 100%; } .hx .lh { --pw: clamp(118px, 24vw, 180px); gap: 10px; } .hx .pho.lh-pho { --pw: inherit; margin-top: 0; } .hx .lh-bar { height: max(3.4cqi, 20px); } .hx .lh-bar i { width: max(0.9cqi, 6px); height: max(0.9cqi, 6px); } .hx .lh-nav svg { width: max(1.5cqi, 9px); height: max(1.5cqi, 9px); } .hx .lh-tools { display: none; } .hx .lh-ll { height: calc(var(--pw) * 2.1667 - max(3.4cqi, 20px)); padding: 10px; gap: 8px; } .hx .lh-head { gap: 6px; } .hx .lh-logo { width: max(8.6cqi, 44px); height: max(2.75cqi, 14px); } .hx .lh-div { height: max(2.2cqi, 12px); } .hx .lh-head b { font-size: max(1.55cqi, 10px); } .hx .lh-body { grid-template-columns: minmax(0, 1fr); } .hx .lh-side { display: none; } .hx .lh-key { left: calc(78% + max(1.4cqi, 8px)); } .hx .lh-key.ev { display: none; } .hx .lh-pc { height: 46%; } .hx .lh-q { inset: calc(46% - 6cqi) 0 0; padding: 7cqi 5cqi 9cqi; } .hx .lh-qt { font-size: max(6cqi, 10px); } .hx .lh-rec { gap: 0; padding: 2.6cqi; font-size: 0; } } /* Phones: the phone stays beside the browser, as on tablets; LiveLine's header keeps just the name and Live. */ @media (max-width: 599px) { .hx .lh-sub, .hx .lh-url, .hx .lh-clock, .hx .lh-nav { display: none; } /* A smaller phone, centered beside a browser that keeps its own height instead of shrinking to the phone; the phone drops the scale's end labels so the question, scale and Next fit at this size. */ .hx .lh { --pw: 100px; gap: 8px; } .hx .lh-ll { height: 236px; } .hx .lh-ends { display: none; } .hx .lh-sc { margin-top: 4cqi; } /* As the Discover card on phones: the phone over LiveLine's bottom left corner, and LiveLine running off the screen's right edge, its five lanes named right of the playhead and its side panel (her camera) mostly showing. */ .hx { overflow-x: clip; } .hx .lh { display: block; margin-right: -60px; padding: 0 0 36px 44px; } /* Text, phone and browser sit 30px inside the colored card (8px in from the screen), like the Discover card's content in its card. Cut at the colored card's right edge: the box runs 22px past the screen, so 30px in from its own edge. */ section.hx { padding-right: 38px; padding-left: 38px; } /* The FDA line stays on one line, its text on the title's left edge. */ .lp { padding-left: 0; font-size: 11.5px; white-space: nowrap; } .hx .lh { clip-path: inset(-200px 30px -200px -200px); } .hx .pho.lh-pho { --pw: 112px; position: absolute; bottom: 0; left: 0; z-index: 5; } .hx .lh-ll { height: 300px; } .hx .lh-body { grid-template-columns: minmax(0, 1fr) 150px; } .hx .lh-side { display: flex; } .hx .lh-key.ev { display: block; } .hx .lh-clock { display: block; } .hx .lh-sub { display: inline; } .hx .lh-side .lh-cam { width: 70%; } /* No study name under her name, and only the date for each session. */ .hx .lh-who span, .hx .lh-prev li span { display: none; } /* Roomier panel: space under her name, above Previous sessions and between the sessions, whose previews are a little bigger. */ .hx .lh-side .lh-cam { margin-top: 8px; } .hx .lh-ah { margin-top: 16px; } .hx .lh-prev { gap: 10px; margin-top: 9px; } .hx .lh-prev li { column-gap: 7px; } .hx .lh-prev i { width: 30px; } } .win { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 660px; overflow: hidden; border-radius: 24px; background: rgba(252, 252, 252, 0.65); box-shadow: 0 0 0 1px rgba(37, 37, 37, 0.1), inset 0 0 0 1px rgba(37, 37, 37, 0.025); font-family: var(--ui); color: #111; text-align: left; isolation: isolate; } .av { display: block; flex: none; overflow: visible; --hole: #fcfcfc; } .sb { position: relative; display: flex; flex-direction: column; min-width: 0; background: rgba(251, 251, 251, 0.35); } .sb::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: rgba(20, 20, 20, 0.15); transform: scaleX(0.5); transform-origin: right; } .sb-top { display: flex; align-items: center; justify-content: space-between; flex: none; height: 44px; padding: 0 16px; } .tl { display: flex; gap: 8px; } .tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } .tl i + i { background: #ffbd2e; } .tl i + i + i { background: #28c840; } .sb-top svg { width: 16px; height: 16px; color: rgba(0, 0, 0, 0.5); } .sb-q { display: flex; align-items: center; gap: 8px; flex: none; height: 32px; margin: 0 13px; padding: 0 10px; border-radius: 10px; background: rgba(10, 10, 10, 0.03); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.09); font: 400 14px/20px var(--ui); color: rgba(0, 0, 0, 0.4); } .sb-q svg { width: 14px; height: 14px; } .sb-l { display: flex; flex-direction: column; gap: 2px; padding: 12px 13px 0; } .row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 8px; border-radius: 10px; } .row.on { background: rgba(10, 10, 10, 0.055); } .row .av { grid-row: span 2; width: 32px; height: 32px; } .row b { overflow: hidden; font: 400 14px/20px var(--ui); letter-spacing: -0.1px; white-space: nowrap; text-overflow: ellipsis; } .row time { font: 400 12px/16px var(--ui); color: rgba(0, 0, 0, 0.4); white-space: nowrap; } .row .pv { grid-column: 2 / 4; overflow: hidden; font: 400 12px/16px var(--ui); color: rgba(0, 0, 0, 0.6); white-space: nowrap; text-overflow: ellipsis; } @keyframes pv-in { from { opacity: 0; transform: translateY(3px); } } .row .ud { position: absolute; top: 7px; left: 32px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px #fcfcfc; } .row .lv { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--hr); vertical-align: 1px; animation: blink 1.2s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0.3; } } .sb-me { position: absolute; bottom: 16px; left: 16px; display: flex; align-items: center; gap: 10px; font: 400 13px/18px var(--ui); } .sb-me b { font-weight: 400; } .sb-me span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(10, 10, 10, 0.05); font: 500 11px/1 var(--ui); color: rgba(0, 0, 0, 0.55); } .mn { position: relative; display: flex; flex-direction: column; min-width: 0; background: rgba(252, 252, 252, 0.86); } .mn::before { content: ''; position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; height: 66px; background: #fcfcfc; } .mn::after { content: ''; position: absolute; right: 0; bottom: 66px; left: 0; z-index: 2; height: 48px; background: linear-gradient(rgba(252, 252, 252, 0), #fcfcfc); pointer-events: none; } .mn-h { display: flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 16px 0 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .mn-h .av { width: 18px; height: 18px; } .mn-h b { font: 500 13px/18px var(--ui); } .mn-h .sub { font: 400 13px/18px var(--ui); color: rgba(0, 0, 0, 0.45); } .mn-h > svg.i { width: 16px; height: 16px; margin-left: auto; color: rgba(0, 0, 0, 0.45); } .stc { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 99px; background: rgba(10, 10, 10, 0.05); font: 500 11px/1 var(--ui); color: rgba(0, 0, 0, 0.5); transition: background-color 0.3s, color 0.3s; } .stc i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .stc.live { background: #fdecee; color: #c42b35; } .stc.live i { animation: blink 1.2s ease-in-out infinite; } .stc.ok { background: rgba(31, 138, 101, 0.1); color: var(--ok); } .e-c.done .th-tag i { animation: none; background: rgba(0, 0, 0, 0.3); } .ch { position: relative; flex: none; height: 172px; margin: 12px 20px 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); } .ch canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .ch-k { position: absolute; left: 14px; z-index: 2; font: 600 11px/1.2 var(--ui); color: var(--c); transform: translateY(-50%); } .ch-k small { display: block; margin-top: 1px; font: 400 10.5px/1.2 var(--ui); color: rgba(0, 0, 0, 0.5); } .ch-k small b { font-weight: 600; color: #111; font-variant-numeric: tabular-nums; } .ch-k.ev { font-weight: 500; font-size: 10.5px; } .ch-w { position: absolute; inset: 0 0 0 20%; display: grid; place-items: center; font: 500 12px/1 var(--ui); color: rgba(0, 0, 0, 0.4); transition: opacity 0.4s; } .ch.on .ch-w { opacity: 0; } .ch-w span::after { content: '...'; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.3s steps(4) infinite; clip-path: inset(0 100% 0 0); } @keyframes dots { to { clip-path: inset(0 -10% 0 0); } } /* Session feed: x.ai's transcript, as the session's events. */ .fd { position: relative; display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 14px 20px 84px; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 18px); mask-image: linear-gradient(transparent, #000 18px); } .fd::-webkit-scrollbar { display: none; } .e { flex: none; transform-origin: left bottom; } @keyframes e-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } } .e-t { align-self: center; padding: 2px 0; font: 400 12px/16px var(--ui); color: rgba(0, 0, 0, 0.4); } .e-s { display: inline-flex; align-items: center; align-self: center; gap: 6px; padding: 6px 0; font: 400 13px/16px var(--ui); color: rgba(0, 0, 0, 0.55); white-space: nowrap; } .e-s b { font-weight: 400; color: #111; } .e-s .av { width: 14px; height: 14px; } .e-s svg.i { width: 14px; height: 14px; color: #111; stroke-width: 1.8; } .e-b { align-self: flex-start; max-width: 82%; padding: 8px 12px; border-radius: 16px; background: rgba(16, 16, 0, 0.04); font: 400 14px/20px var(--ui); letter-spacing: -0.15px; } .e-b b { font-weight: 600; } .e-b small { display: block; font: 400 12.5px/18px var(--ui); letter-spacing: 0; color: rgba(0, 0, 0, 0.55); } .e-me { align-self: flex-end; transform-origin: right bottom; background: #111110; color: #fff; } .e-me small { margin-bottom: 1px; font-weight: 500; color: rgba(255, 255, 255, 0.55); } .rc p { display: flex; align-items: center; gap: 6px; } .rc p + p { margin-top: 2px; } .rc svg { width: 14px; height: 14px; flex: none; color: var(--ok); stroke-width: 2.4; } .rc .ar { color: rgba(0, 0, 0, 0.35); } @keyframes ck-in { from { opacity: 0; transform: translateX(-4px); } } .e-c { align-self: flex-start; width: 396px; max-width: 100%; padding: 10px 12px 12px; border-radius: 16px; background: rgba(16, 16, 0, 0.04); } .e-c-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 14px/20px var(--ui); } .e-c > p { margin: 1px 0 10px; font: 400 13px/18px var(--ui); color: rgba(0, 0, 0, 0.6); } .bdg { display: inline-grid; font: 500 12px/1 var(--ui); } .bdg > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; height: 20px; padding: 0 8px; border-radius: 99px; transition: opacity 0.26s ease; } .bdg i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .bdg .b-live { background: #fdecee; color: #c42b35; } .bdg .b-live i { animation: blink 1.2s ease-in-out infinite; } .bdg .b-ok { background: rgba(31, 138, 101, 0.1); color: var(--ok); opacity: 0; } .bdg .b-ok svg { width: 12px; height: 12px; stroke-width: 2.6; } .bdg.ok .b-live { opacity: 0; } .bdg.ok .b-ok { opacity: 1; } .th { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); } .th canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .th-tag { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.88); font: 600 10.5px/1 var(--ui); } .th-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--hr); animation: blink 1.2s ease-in-out infinite; } .th-v { position: absolute; bottom: 8px; left: 8px; display: flex; gap: 6px; } .th-v span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.9); font: 500 11px/1 var(--ui); color: rgba(0, 0, 0, 0.55); } .th-v b { font-weight: 600; color: #111; font-variant-numeric: tabular-nums; } .th-v i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); } .e-c-b { display: flex; gap: 8px; margin-top: 10px; } .mb { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; font: 500 13px/18px var(--ui); } .mb.dk { background: #111; color: #fff; } .mb.lt { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } .e-p { display: flex; align-items: center; align-self: flex-start; gap: 8px; padding: 4px 0; font: 400 13px/16px var(--ui); color: rgba(0, 0, 0, 0.45); } .e-p .av { width: 20px; height: 20px; animation: bob 1.3s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-2px) scale(1.04); } } @keyframes lbl-in { from { opacity: 0; transform: translateY(5px); } } .e-p em { display: inline-flex; gap: 3px; margin-left: -2px; } .e-p em i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dot3 1.3s ease-in-out infinite; } .e-p em i + i { animation-delay: 0.15s; } .e-p em i + i + i { animation-delay: 0.3s; } @keyframes dot3 { 0%, 60%, 100% { opacity: 0.25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } } .cmp { position: absolute; right: 20px; bottom: 20px; left: 20px; z-index: 3; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); font: 400 14px/20px var(--ui); color: rgba(0, 0, 0, 0.4); transition: box-shadow 0.2s; } .cmp .cb { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.5); } .cmp svg { width: 15px; height: 15px; } .cmp .tx { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cmp.focus { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); color: #111; } .cmp.focus .tx::after { content: ''; display: inline-block; width: 1px; height: 16px; margin-left: 1px; background: #111; vertical-align: -3px; animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .cmp .snd { background: #0a0a0a; color: #fff; transition: transform 0.15s var(--mat); } .cmp .snd.press { transform: scale(0.86); } /* Cursors and taps for the scripted demos. */ .cur { position: absolute; top: 0; left: 0; z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.25s; will-change: transform; } .cur.on { opacity: 1; } .cur svg { display: block; width: 17px; height: 17px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3)); } .cur span { position: absolute; top: 17px; left: 10px; padding: 2px 6px; border-radius: 99px; background: #6b6e75; font: 500 10px/13px var(--ui); color: #fff; white-space: nowrap; } .cur.tch svg { display: none; } .cur.tch::before { content: ''; display: block; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(10, 10, 10, 0.2); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(0, 0, 0, 0.22); } .cur.tch span { top: 12px; left: 12px; background: var(--accent); } .cur.tch.lft span { right: 12px; left: auto; } .rp { position: absolute; z-index: 59; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid rgba(10, 10, 10, 0.55); border-radius: 50%; pointer-events: none; animation: rp 0.35s ease-out forwards; } .rp.lt { border-color: rgba(255, 255, 255, 0.9); } @keyframes rp { from { opacity: 0.6; transform: scale(0.46); } to { opacity: 0; transform: none; } } /* Overlay: a cut to the participant's phone, in the Coherence app. */ .ov { position: absolute; inset: 0; z-index: 30; visibility: hidden; pointer-events: none; } .ov.on { visibility: visible; } .ov-sc { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); opacity: 0; transition: opacity 0.45s var(--eoq); } .ov.show .ov-sc { opacity: 1; } .ov-sh { position: absolute; inset: 26px 64px; border-radius: 22px; background: #fff; box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.2s; } .ov.shell .ov-sh { opacity: 1; } .ov-bn { position: absolute; top: 8px; right: 8px; left: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; padding: 0 5px 0 14px; border-radius: 14px; background: #f5efe6; font: 500 13px/1 var(--ui); color: #8a5a12; } .ov-bn span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 99px; background: #111; font: 500 12px/1 var(--ui); color: #fff; } .ov-bn span i { width: 6px; height: 6px; border-radius: 50%; background: var(--hr); animation: blink 1.2s ease-in-out infinite; } .ov-fr { position: absolute; inset: 78px 72px 34px; overflow: hidden; border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.32); transform-origin: 0 0; opacity: 0; } .ov:not(.on) .ov-fr { display: none; } .ov.close .ov-sc, .ov.close .ov-sh { opacity: 0; transition-duration: 0.25s; } .wall { position: absolute; inset: 0; background: radial-gradient(70% 85% at 14% 18%, #ffd8d1 0%, rgba(255, 216, 209, 0) 62%), radial-gradient(65% 80% at 88% 84%, #cddff8 0%, rgba(205, 223, 248, 0) 62%), radial-gradient(50% 60% at 70% 10%, #f1e4fb 0%, rgba(241, 228, 251, 0) 70%), linear-gradient(135deg, #f8eee8, #eef1f7); } .wall svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.32; mix-blend-mode: multiply; } .ov-fr .pho { position: absolute; top: 50%; left: 50%; translate: -50% -50%; } /* Phone shell, shared with the feature cards. */ .pho { --pw: 232px; position: relative; width: var(--pw); aspect-ratio: 9 / 19.5; padding: calc(var(--pw) * 0.034); border-radius: calc(var(--pw) * 0.165); background: #0c0c0c; box-shadow: inset 0 0 0 calc(var(--pw) * 0.006) #707073, 0 30px 60px -28px rgba(30, 26, 22, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.1); } .pho-s { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * 0.135); background: #fbfbfc; container-type: inline-size; font-family: var(--ui); color: #111; } .isl { position: absolute; top: 3cqi; left: 50%; z-index: 9; width: 30cqi; height: 8.6cqi; border-radius: 99px; background: #000; translate: -50% 0; } .psb { position: absolute; top: 4.6cqi; right: 7.5cqi; left: 9.5cqi; z-index: 8; display: flex; align-items: center; justify-content: space-between; font: 600 4.3cqi/1 var(--ui); } .psb svg { width: 15cqi; height: 2.8cqi; } /* Coherence app screens on the overlay phone. */ .scr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 15cqi 6cqi 6cqi; background: #fbfbfc; transition: transform 0.28s var(--ios), opacity 0.28s var(--ios); } .scr-b { transform: translateX(100%); } .push .scr-a { transform: translateX(-26%); opacity: 0; } .push .scr-b { transform: none; } .scr-t { font: 600 5.6cqi/1 var(--ui); } .scr-s { margin-top: 2cqi; font: 400 4.4cqi/1 var(--ui); color: rgba(0, 0, 0, 0.5); font-variant-numeric: tabular-nums; } .scr-cam { position: relative; width: 78cqi; aspect-ratio: 1; margin-top: 5cqi; overflow: hidden; border-radius: 50%; } .scr-cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .scr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; width: 100%; margin-top: 6cqi; } .scr-tiles p { display: flex; flex-direction: column; gap: 2cqi; padding: 3.6cqi; border-radius: 4cqi; background: #f0f0f3; } .scr-tiles small { display: flex; align-items: center; gap: 1.4cqi; font: 500 4.2cqi/1 var(--ui); color: rgba(0, 0, 0, 0.5); } .scr-tiles small i { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: var(--c); } .scr-tiles b { font: 600 8cqi/1 var(--ui); font-variant-numeric: tabular-nums; } .scr-tiles b em { font-style: normal; } .scr-tiles b span { margin-left: 1cqi; font: 500 4.2cqi/1 var(--ui); color: rgba(0, 0, 0, 0.45); } .scr-tr { position: relative; width: 100%; height: 12cqi; margin-top: 4cqi; } .scr-tr canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .scr-ft { display: grid; place-items: center; width: 100%; margin-top: auto; padding-bottom: 2cqi; } .scr-ft > * { grid-area: 1 / 1; } .scr-h { font: 400 4.2cqi/1.3 var(--ui); color: rgba(0, 0, 0, 0.45); transition: opacity 0.25s; } .scr-ft .okl.on + .scr-h, .scr-ft:has(.okl.on) .scr-h { opacity: 0; } .okl { display: inline-flex; align-items: center; gap: 1.6cqi; padding: 2.2cqi 3.4cqi; border-radius: 99px; background: #edf7f0; font: 500 4.2cqi/1 var(--ui); color: #1f7a45; opacity: 0; transform: translateY(2cqi); transition: opacity 0.3s, transform 0.4s var(--eoq); } .okl svg { width: 3.6cqi; height: 3.6cqi; stroke-width: 2.6; } .okl.on { opacity: 1; transform: none; } .scr-b { align-items: stretch; padding-top: 17cqi; } .q-k { font: 600 4cqi/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.35); } .q-t { margin-top: 3cqi; font: 600 7.6cqi/1.12 var(--ui); letter-spacing: -0.02em; } .q-s { margin-top: 2.6cqi; font: 400 4.2cqi/1.4 var(--ui); color: rgba(0, 0, 0, 0.5); } .q-sc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4cqi; margin-top: 6cqi; } .q-sc span { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.35cqi #e3e3e8; font: 500 4.6cqi/1 var(--ui); transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .q-sc span.sel { background: var(--accent); box-shadow: none; color: #fff; } .q-e { display: flex; justify-content: space-between; margin-top: 2.6cqi; font: 400 4.2cqi/1 var(--ui); color: rgba(0, 0, 0, 0.4); } .q-h { margin-top: 6cqi; font: 600 4.6cqi/1.2 var(--ui); } .q-v { display: flex; flex-direction: column; gap: 2.4cqi; margin-top: 3cqi; } .q-v p { display: flex; align-items: center; justify-content: space-between; padding: 3.4cqi 4cqi; border-radius: 4cqi; background: #fff; box-shadow: 0 0 0 0.3cqi rgba(0, 0, 0, 0.05); } .q-v small { display: block; font: 600 3.8cqi/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.35); } .q-v b { display: block; margin-top: 1.6cqi; font: 600 5.6cqi/1 var(--ui); font-variant-numeric: tabular-nums; } .q-v b em { font-style: normal; } .q-v i { display: inline-flex; align-items: center; gap: 1.4cqi; padding: 1.8cqi 3cqi; border-radius: 99px; background: #fdecee; font: 600 4cqi/1 var(--ui); font-style: normal; color: #c42b35; } .q-v i::before { content: ''; width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: var(--hr); animation: blink 1.2s ease-in-out infinite; } .q-ok { display: flex; align-items: center; gap: 2cqi; margin-top: auto; padding: 3.4cqi 4cqi; border-radius: 4cqi; background: #edf7f0; font: 600 4.4cqi/1 var(--ui); color: #1f7a45; opacity: 0; transform: translateY(3cqi); transition: opacity 0.35s, transform 0.45s var(--eoq); } .q-ok svg { width: 4.4cqi; height: 4.4cqi; stroke-width: 2.6; } .q-ok.on { opacity: 1; transform: none; } /* 3. Statement: one panel, the big mark peeking out of its corner. */ .st-s { padding: 64px 0; overflow-x: clip; } .st-c { position: relative; display: flex; align-items: center; min-height: 352px; border-radius: 24px; background: var(--card); } .st-t { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; padding: 40px 517px 40px 48px; } .st-t p { max-width: 448px; color: var(--muted); } .st-clip { position: absolute; top: -144px; right: -144px; bottom: 0; left: 0; overflow: hidden; pointer-events: none; } .st-m { position: absolute; right: 144px; bottom: 0; width: calc((100% - 144px) * 0.4); aspect-ratio: 1; translate: 8% 15%; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.16)); } .st-m .mk .ln, .st-m .mk .run { stroke-width: 7; } .st-m .ring circle { transform-box: fill-box; transform-origin: center; } .cf { position: absolute; top: 50%; left: 50%; width: 6px; height: 13px; margin: -6px 0 0 -3px; border-radius: 3px; background: var(--c); pointer-events: none; } /* 4. Features: four cards, each a small looping product demo. */ .ft-s { padding: 112px 0; } .ft-in { display: flex; flex-direction: column; gap: 56px; } .ft-h { display: flex; flex-direction: column; gap: 16px; max-width: 672px; margin: 0 auto; text-align: center; } .ft-g { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .fc { position: relative; display: flex; flex-direction: column; height: 404px; overflow: hidden; padding: 32px; border-radius: 24px; background: var(--card); } .fc h3 { font: var(--hw) 16px/26px var(--site); } .fc > p { font: 400 16px/26px var(--site); } .fc-st { position: relative; display: flex; justify-content: center; flex: none; height: 230px; margin-top: 32px; } .fc-in { position: relative; flex: none; width: 540px; transform-origin: top center; scale: var(--s, 1); transition: opacity 0.52s var(--eoq); } .fc-in.dim { opacity: 0; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.6, 1); } .mw { position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 28px -14px rgba(0, 0, 0, 0.22); font-family: var(--ui); color: #111; } .mw-b { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font: 500 11px/1 var(--ui); color: rgba(0, 0, 0, 0.55); white-space: nowrap; } .mw-b .dts { display: flex; gap: 4px; margin-right: 4px; } .mw-b .dts i { width: 7px; height: 7px; border-radius: 50%; background: #e2e2e4; } .mw-b b { font-weight: 600; color: #111; } .mw-b .r { margin-left: auto; } .tag { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 99px; background: #fdecee; font: 600 10px/1 var(--ui); color: #c42b35; } .tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--hr); animation: blink 1.2s ease-in-out infinite; } .ico { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--c); color: #fff; } .ico svg { width: 12px; height: 12px; stroke-width: 2.2; } .pressable { transition: transform 0.12s var(--mat), background-color 0.25s, color 0.25s; } .pressable.press { transform: scale(0.94); } /* Card 1: the Activity Builder. */ .bd { display: grid; grid-template-columns: minmax(0, 1fr) 196px; height: 268px; } .bd-l { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; } .bd-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; font: 600 13px/1 var(--ui); } .bd-h span { font: 400 11px/1 var(--ui); color: rgba(0, 0, 0, 0.45); font-variant-numeric: tabular-nums; } .stp { display: flex; align-items: center; gap: 9px; flex: none; height: 38px; padding: 0 10px 0 8px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); background: #fff; font: 500 12.5px/1 var(--ui); } .stp .gr { width: 6px; height: 10px; flex: none; background: radial-gradient(circle, rgba(0, 0, 0, 0.25) 1px, transparent 1.2px) 0 0 / 3px 3.4px; } .stp em { margin-left: auto; font: 400 11px/1 var(--ui); font-style: normal; color: rgba(0, 0, 0, 0.45); } .bd-r { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-left: 1px solid rgba(0, 0, 0, 0.06); background: #fafafa; } .bd-r > p { margin-bottom: 2px; font: 600 9.5px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.38); } .tile { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); font: 500 11.5px/1 var(--ui); } .tile .ico { width: 20px; height: 20px; border-radius: 5px; } .tile .ico svg { width: 11px; height: 11px; } .tile svg.pl { width: 12px; height: 12px; margin-left: auto; color: rgba(0, 0, 0, 0.35); } .tile.press { background: #f1f1f3; } .sv { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 10px; border-radius: 99px; background: #111; font: 500 10.5px/1 var(--ui); color: #fff; } .sv svg { width: 10px; height: 10px; stroke-width: 2.8; } .sv.ok { background: var(--ok); } /* Card 1: the Activity Builder, in the same eSSESSMENT browser as the hero. Steps are dragged from the palette into the numbered program. */ .ab { position: relative; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 13, 24, 0.06), 0 1px 2px rgba(11, 13, 24, 0.024), 0 3px 6px rgba(11, 13, 24, 0.03), 0 8px 14px rgba(11, 13, 24, 0.035), 0 16px 28px rgba(11, 13, 24, 0.04); font-family: var(--ui); color: #1d1d1f; } .ab-bar { position: relative; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; background: #f6f6f5; border-bottom: 1px solid #ececea; } .ab-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d6d6d3; } .ab-url { position: absolute; left: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 3px 14px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #ececea; font: 500 9.5px/1 var(--ui); color: #86868b; translate: -50% 0; } .ab-url svg { width: 9px; height: 9px; } .ab-head { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 14px; border-bottom: 1px solid #f0f0f2; } .ab-logo { flex: none; width: 52px; height: 17px; object-fit: contain; } .ab-div { flex: none; width: 1px; height: 15px; background: #e8e8eb; } .ab-head b { font: 600 13px/1 var(--ui); letter-spacing: -0.01em; } .ab-sub { font: 400 11px/1 var(--ui); color: #6e6e73; white-space: nowrap; } .ab-save { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-left: auto; padding: 0 12px; border-radius: 99px; background: var(--accent); font: 600 11px/1 var(--ui); color: #fff; } .ab-save.ok { background: var(--ok); } .ab-save svg { width: 11px; height: 11px; stroke-width: 2.6; } .ab-body { display: grid; grid-template-columns: minmax(0, 1fr) 178px; height: 238px; } .ab-prog { padding: 14px 16px; } .ab-t { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--ui); } .ab-st { padding: 3px 7px; border-radius: 99px; background: #f1f1f3; font: 600 9.5px/1 var(--ui); color: #6e6e73; transition: background-color 0.25s, color 0.25s; } .ab-st.ok { background: rgba(31, 138, 101, 0.1); color: var(--ok); } .ab-m { margin-top: 6px; font: 400 11px/1 var(--ui); color: #6e6e73; font-variant-numeric: tabular-nums; } .ab-steps { counter-reset: st; display: flex; flex-direction: column; margin-top: 12px; } .ab-steps li { counter-increment: st; position: relative; display: flex; align-items: center; gap: 9px; flex: none; height: 34px; padding-left: 28px; font: 500 12px/1 var(--ui); } .ab-steps li::before { content: counter(st); position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #e1e1e5; font: 600 9.5px/1 var(--ui); color: #6e6e73; font-variant-numeric: tabular-nums; } .ab-steps li + li::after { content: ''; position: absolute; top: -8px; left: 8.5px; width: 1px; height: 16px; background: #e1e1e5; } .ab-steps li b { font-weight: 500; } .ab-steps em { margin-left: auto; font: 400 11px/1 var(--ui); font-style: normal; color: #86868b; font-variant-numeric: tabular-nums; } .ab-steps li.ab-slot { height: 0; padding: 0; margin-left: 28px; overflow: hidden; border-radius: 8px; background: #fafafb; box-shadow: inset 0 0 0 1px transparent; transition: height 0.3s var(--eoq), box-shadow 0.2s; } .ab-steps li.ab-slot::before, .ab-steps li.ab-slot::after { display: none; } .ab-steps li.ab-slot.open { height: 30px; margin-top: 2px; margin-bottom: 2px; box-shadow: inset 0 0 0 1px #d6d6dc; } .ab-pal { padding: 14px; border-left: 1px solid #f0f0f2; background: #fbfbfb; } .ab-pal > p:first-child { font: 600 11px/1 var(--ui); } .ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .ab-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #ececef, 0 1px 2px rgba(0, 0, 0, 0.04); font: 500 11px/1 var(--ui); white-space: nowrap; } .ab-ghost { position: absolute; z-index: 50; box-shadow: 0 0 0 1px #e4e4e8, 0 12px 26px -8px rgba(0, 0, 0, 0.28); pointer-events: none; } .ab-hint { margin-top: 12px; font: 400 10px/1.35 var(--ui); color: #86868b; } [data-take="build"].m .ab-url, [data-take="build"].m .ab-sub, [data-take="build"].m .ab-hint { display: none; } [data-take="build"].m .ab-body { grid-template-columns: minmax(0, 1fr) 106px; } [data-take="build"].m .ab-prog { padding: 12px; } [data-take="build"].m .ab-pal { padding: 12px 10px; } [data-take="build"].m .ab-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; } [data-take="build"].m .ab-tile { flex-direction: row; align-items: center; gap: 7px; padding: 6px 8px; } [data-take="build"].m .ab-steps li { font-size: 11.5px; } /* Card 2: invite by email, the program lands under For today. */ .sd { position: relative; height: 330px; } .sd .mw { position: absolute; top: 26px; left: 0; width: 318px; } .iv { display: flex; flex-direction: column; padding: 16px; } .iv-l { font: 500 11px/1 var(--ui); color: rgba(0, 0, 0, 0.45); } .iv-f { display: flex; align-items: center; gap: 8px; height: 38px; margin-top: 8px; padding: 0 12px 0 9px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); font: 400 12px/1 var(--ui); color: rgba(0, 0, 0, 0.45); } .iv-f b { font-weight: 600; color: #111; } .iv-f > span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; } .iv-av { display: flex; } .iv-av i { display: block; padding: 1.5px; border-radius: 50%; background: #fff; } .iv-av i + i { margin-left: -7px; } .iv-av .av { width: 18px; height: 18px; --hole: #fff; } .iv-go { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font: 400 11px/1.3 var(--ui); color: rgba(0, 0, 0, 0.45); transition: color 0.25s; } .iv-go.ok { color: var(--ok); } .sbt { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 14px; border-radius: 99px; background: #111; font: 500 12px/1 var(--ui); color: #fff; white-space: nowrap; } .sbt svg { width: 12px; height: 12px; stroke-width: 2.6; } .sbt.ok { background: var(--ok); } .sd .pho { --pw: 192px; position: absolute; top: -6px; right: 18px; } .sd .ftd { inset: 16cqi 5cqi 6cqi; } .sd .ftd h4 { font-size: 10cqi; } .sd .ftd > p { font-size: 5.2cqi; } .sd .prog { gap: 3cqi; margin-top: 4cqi; padding: 4.4cqi; border-radius: 4.6cqi; } .sd .prog > i { width: 11cqi; height: 11cqi; border-radius: 3.4cqi; } .sd .prog > i svg { width: 5.6cqi; height: 5.6cqi; } .sd .prog b { font-size: 5.8cqi; } .sd .prog span { font-size: 5cqi; } .sd .ntf { gap: 3.4cqi; padding: 4cqi; } .sd .ntf i { width: 11cqi; height: 11cqi; } .sd .ntf span { font-size: 5.2cqi; } .sd .ntf b { font-size: 4.8cqi; } .ftd { position: absolute; inset: 15cqi 6cqi 6cqi; display: flex; flex-direction: column; } .ftd h4 { margin: 0; font: 700 8cqi/1.1 var(--ui); letter-spacing: -0.02em; } .ftd > p { margin-top: 1.6cqi; font: 400 3.6cqi/1.3 var(--ui); color: rgba(0, 0, 0, 0.5); } .prog { display: flex; align-items: center; gap: 2.6cqi; margin-top: 3.4cqi; padding: 4cqi; border-radius: 4cqi; background: #fff; box-shadow: 0 0 0 0.3cqi rgba(0, 0, 0, 0.05); } .prog > i { display: grid; place-items: center; flex: none; width: 9cqi; height: 9cqi; border-radius: 3cqi; background: var(--c); color: #fff; } .prog > i svg { width: 4.6cqi; height: 4.6cqi; } .prog p { display: flex; flex-direction: column; gap: 1.6cqi; margin-right: auto; } .prog b { font: 600 3.9cqi/1.1 var(--ui); } .prog span { font: 400 3.1cqi/1 var(--ui); color: rgba(0, 0, 0, 0.5); } .prog .nw { font-weight: 600; color: var(--accent); } .prog > svg { width: 4.4cqi; height: 4.4cqi; color: rgba(0, 0, 0, 0.3); } .prog.dn > svg { color: var(--ok); } .prog { transition: transform 0.12s var(--mat); } .prog.press { transform: scale(0.96); } .ntf { position: absolute; top: 3.4cqi; right: 3.4cqi; left: 3.4cqi; z-index: 10; display: flex; align-items: center; gap: 3cqi; padding: 3.4cqi; border-radius: 6cqi; background: rgba(242, 242, 245, 0.97); box-shadow: 0 2cqi 6cqi rgba(0, 0, 0, 0.14); opacity: 0; transform: translateY(-130%); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.1); } .ntf.on { opacity: 1; transform: none; } .ntf.up { opacity: 0; transform: translateY(-40%) scale(0.96); transition-duration: 0.3s; } .ntf i { display: grid; place-items: center; flex: none; width: 9cqi; height: 9cqi; border-radius: 2.4cqi; background: #3d7bd8; color: #fff; } .ntf i svg { width: 5.4cqi; height: 5.4cqi; } .ntf span { font: 400 3.4cqi/1.3 var(--ui); } .ntf b { display: block; font: 600 3.2cqi/1.3 var(--ui); color: rgba(0, 0, 0, 0.5); } /* Card 3: LiveLine. Participant 014 answers on her phone and each answer lands on her timeline, next to her camera. Card 4: Playback. */ .lv-c, .pb-c { position: relative; height: 150px; margin: 10px 12px 0; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); } .lv-c canvas, .pb-c canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .k { position: absolute; left: 10px; z-index: 2; font: 600 10px/1.2 var(--ui); color: var(--c); transform: translateY(-50%); } .k small { display: block; font: 400 9.5px/1.2 var(--ui); color: rgba(0, 0, 0, 0.5); } .k small b { font-weight: 600; color: #111; font-variant-numeric: tabular-nums; } .sv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; margin: 10px 12px 0; padding: 0 6px 0 12px; border-radius: 10px; background: #f7f7f8; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); font: 500 12px/1 var(--ui); color: rgba(0, 0, 0, 0.55); white-space: nowrap; } .sv-l { display: inline-flex; align-items: center; gap: 7px; } .sv-l svg { width: 13px; height: 13px; color: var(--hrv); } .sv-st { display: inline-grid; justify-items: end; } .sv-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; transition: opacity 0.25s ease, transform 0.42s var(--pop); } .sv-p { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.5); } .sv-p em { display: inline-flex; gap: 2px; } .sv-p em i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: dot3 1.3s ease-in-out infinite; } .sv-p em i + i { animation-delay: 0.15s; } .sv-p em i + i + i { animation-delay: 0.3s; } .sv-a { background: var(--accent); font-weight: 600; color: #fff; opacity: 0; transform: scale(0.85); } .sv-row.done .sv-p { opacity: 0; } .sv-row.done .sv-a { opacity: 1; transform: none; } .wl { position: relative; height: 230px; } .wl-pho { --pw: 112px; position: absolute; top: 0; left: 6px; } .wl-cam { position: absolute; top: 0; right: 0; left: 0; height: 44%; overflow: hidden; background: #ebe6de; } .wl-cam video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .wl-bpm { position: absolute; bottom: 5px; left: 5px; display: inline-flex; align-items: center; gap: 3px; height: 15px; padding: 0 5px 0 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.92); font: 500 9px/1 var(--ui); color: rgba(0, 0, 0, 0.55); } .wl-bpm svg { width: 8px; height: 8px; color: var(--hr); stroke-width: 2.8; } .wl-bpm b { font-weight: 600; color: #111; font-variant-numeric: tabular-nums; } .wl-q { position: absolute; top: 44%; right: 0; left: 0; display: flex; flex-direction: column; padding: 7px 7px 0; } .wl-k { display: flex; align-items: center; gap: 3px; height: 8px; font: 600 8px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0, 0, 0, 0.38); white-space: nowrap; } .wl-k svg { display: none; width: 9px; height: 9px; stroke-width: 3; } .wl-k.ok { font-size: 9px; letter-spacing: 0; text-transform: none; color: var(--ok); } .wl-k.ok svg { display: block; } .wl-t { min-height: 2.36em; margin-top: 5px; font: 600 10px/1.18 var(--ui); letter-spacing: -0.01em; } .wl-sl { position: relative; height: 12px; margin: 16px 3px 0; } .wl-tr { position: absolute; top: 50%; right: 0; left: 0; height: 4px; margin-top: -2px; overflow: hidden; border-radius: 99px; background: #e8e8ec; } .wl-tr i { display: block; width: calc(var(--v) * 100%); height: 100%; background: var(--accent); opacity: 0; transition: opacity 0.2s; } .wl-sl.set .wl-tr i { opacity: 1; } .wl-kn { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.15s var(--mat); } .wl-sl.drag .wl-kn { transform: scale(1.18); } .wl-kn em { position: absolute; bottom: calc(100% + 3px); left: 50%; min-width: 14px; padding: 2px 4px; border-radius: 99px; background: #111; font: 600 8px/1 var(--ui); font-style: normal; color: #fff; text-align: center; font-variant-numeric: tabular-nums; opacity: 0; translate: -50% 2px; transition: opacity 0.2s, translate 0.2s; } .wl-sl.set .wl-kn em { opacity: 1; translate: -50% 0; } .wl-e { display: flex; justify-content: space-between; margin-top: 4px; font: 400 9px/1 var(--ui); color: rgba(0, 0, 0, 0.42); } .wl-nx { display: grid; place-items: center; height: 17px; margin-top: 9px; border-radius: 99px; background: #ececef; font: 600 9px/1 var(--ui); color: rgba(0, 0, 0, 0.32); transition: background-color 0.25s, color 0.25s, transform 0.12s var(--mat); } .wl-nx.on { background: #111; color: #fff; } .wl-nx.press { transform: scale(0.94); } .wl-w { position: absolute; top: 0; right: 0; width: 406px; height: 243px; } .wl-bd { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; height: 193px; margin: 10px; } .wl-sd { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .wl-pip, .wl-ch { position: relative; overflow: hidden; border-radius: 8px; } .wl-pip { flex: none; aspect-ratio: 1; background: #ebe6de; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); } .wl-ch { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); } .wl-pip canvas, .wl-ch canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .wl-rec { position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--hr); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); animation: blink 1.2s ease-in-out infinite; } .wl-who { display: flex; flex-direction: column; gap: 5px; padding: 0 2px; font: 400 9.5px/1.1 var(--ui); color: rgba(0, 0, 0, 0.5); } .wl-who b { font: 600 10.5px/1.1 var(--ui); color: #111; } .wl-clk { margin-top: 3px; font-weight: 500; color: #111; font-variant-numeric: tabular-nums; } .cur.tch.up span { top: auto; bottom: 12px; } .wl-fly { position: absolute; top: 0; left: 0; z-index: 55; height: 19px; padding: 0 7px; border-radius: 99px; background: var(--accent); box-shadow: 0 4px 10px -2px rgba(173, 32, 41, 0.35); font: 600 10.5px/19px var(--ui); color: #fff; white-space: nowrap; pointer-events: none; } .pb-t { font-variant-numeric: tabular-nums; } .pb-c canvas { transition: opacity 0.3s ease, filter 0.3s ease; } .pb-c.seek canvas { opacity: 0.4; filter: blur(0.6px); } .scrub { position: relative; height: 34px; margin: 8px 12px 0; } .scrub .trk { position: absolute; top: 15px; right: 0; left: 0; height: 4px; border-radius: 99px; background: #ececf0; } .scrub .trk i { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--head); } .scrub .pin { position: absolute; top: 9px; left: var(--x); width: 8px; height: 8px; margin-left: -4px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 0 2px #fff; transition: transform 0.25s var(--pop); } .scrub .pin.hit { transform: rotate(45deg) scale(1.35); } .scrub .hdl { position: absolute; top: 9px; left: var(--p); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--head), 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.15s var(--mat); } .scrub .hdl.grab { transform: scale(1.18); } .tip { position: absolute; bottom: 64px; left: var(--x); z-index: 6; padding: 7px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 24px -10px rgba(0, 0, 0, 0.3); font: 600 11px/1.3 var(--ui); white-space: nowrap; transform: translateX(-50%); } .tip small { display: block; font: 400 10px/1.3 var(--ui); color: rgba(0, 0, 0, 0.5); } @keyframes tip-in { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.94); } } /* Narrow stages: build and review reflow to 340 px (class "m", set by fit() in the script) instead of shrinking the 540 px drawing. */ .tile .ts { display: none; } .fc-in.m { width: 340px; } .fc-in.m .cur span { font-size: 11px; line-height: 14px; } [data-take="build"].m .bd { grid-template-columns: minmax(0, 1fr) 118px; } [data-take="build"].m .bd-l { padding: 12px; } [data-take="build"].m .stp { padding: 0 10px; white-space: nowrap; } [data-take="build"].m .stp .gr { display: none; } [data-take="build"].m .bd-r { padding: 12px 10px; } [data-take="build"].m .tile { gap: 7px; padding: 0 8px; } [data-take="build"].m .tile .tn, [data-take="build"].m .tile svg.pl { display: none; } [data-take="build"].m .tile .ts { display: inline; } [data-take="review"].m .xs { display: none; } /* 5. Use cases: pills switch the phone. */ .uc-s { padding: 112px 0; } .uc-g { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .uc-l { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; min-height: 730px; padding: 40px 0; } .pills { display: flex; flex-direction: column; gap: 8px; } .pr { display: flex; gap: 8px; } .pill { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border); font: var(--hw) 14px/20px var(--site); color: rgba(10, 10, 10, 0.7); white-space: nowrap; transition: background-color 0.3s var(--mat), color 0.3s var(--mat), box-shadow 0.3s var(--mat), padding 0.3s var(--mat); } .pill:hover, .pill.on { background: var(--pb); color: var(--pt); box-shadow: inset 0 0 0 1px var(--pr); } .pill.on { padding-left: 5px; } .pill .ps { display: grid; place-items: center; width: 0; height: 22px; margin-right: 0; transition: width 0.3s var(--mat), margin 0.3s var(--mat); } .pill .ps .av { width: 22px; height: 22px; opacity: 0; transform: scale(0); transition: transform 0.3s var(--mat), opacity 0.3s var(--mat); --hole: var(--pb); } .pill.on .ps { width: 22px; margin-right: 8px; } .pill.on .ps .av { opacity: 1; transform: none; } .uc-d { min-height: 104px; margin-top: 8px; font: 400 16px/24px var(--site); color: var(--muted); transition: opacity 0.18s ease, transform 0.18s ease; } .uc-d b { font-weight: 500; color: var(--fg); } @keyframes d-in { from { opacity: 0; transform: translateY(6px); } } .uc-r { display: flex; justify-content: center; height: 730px; padding-top: 40px; overflow: hidden; border-radius: 4px; } .uc-car { display: none; } /* A second phone beside the thread: a camera scan, in the same frame and a little lower. Side by side in the two-column layout, both at 72%. */ .uc-r { gap: 20px; align-items: flex-start; } .uc-scan { flex: none; margin-top: 80px; } .uc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The scan is a full screen: no thread fades over its top and bottom. */ .uc-scan .ph-s::before, .uc-scan .ph-s::after { display: none; } @media (min-width: 1024px) { .uc-r > [data-ph], .uc-r > .uc-scan { flex: none; width: 216px; height: 468px; } .uc-r > [data-ph] > .ph, .uc-r > .uc-scan > .ph { transform: scale(0.72); transform-origin: top left; } } /* The phone, as x.ai draws it, running the Coherence app. */ .ph { position: relative; flex: none; width: 300px; height: 650px; padding: 4px; border-radius: 44px; background: #3a3a3c; font-family: var(--ui); color: #111; } .ph::before { content: ''; position: absolute; top: 100px; left: -2px; width: 2px; height: 104px; border-radius: 2px 0 0 2px; background: linear-gradient(#3a3a3c 0 30px, transparent 30px 40px, #3a3a3c 40px 72px, transparent 72px 80px, #3a3a3c 80px); } .ph::after { content: ''; position: absolute; top: 160px; right: -2px; width: 2px; height: 58px; border-radius: 0 2px 2px 0; background: #3a3a3c; } .ph-s { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 40px; background: #f8f8f6; } .ph-s::before, .ph-s::after { content: ''; position: absolute; right: 0; left: 0; z-index: 7; pointer-events: none; } .ph-s::before { top: 0; height: 104px; background: linear-gradient(#fcfcfc 44%, rgba(252, 252, 252, 0)); } .ph-s::after { bottom: 0; height: 84px; background: linear-gradient(rgba(252, 252, 252, 0), #fcfcfc 62%); } .ph-isl { position: absolute; top: 9px; left: 50%; z-index: 9; width: 96px; height: 28px; border-radius: 99px; background: #000; translate: -50% 0; } .ph-sb { position: absolute; top: 15px; right: 26px; left: 30px; z-index: 9; display: flex; justify-content: space-between; font: 600 13px/16px var(--ui); } .ph-sb svg { width: 46px; height: 12px; margin-top: 2px; } .ph-gl { position: absolute; top: 52px; right: 12px; left: 12px; z-index: 8; display: flex; align-items: center; justify-content: space-between; height: 34px; } .gl { display: grid; place-items: center; height: 32px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 99px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.45) 52%, rgba(255, 255, 255, 0.3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(31, 67, 91, 0.12); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); } .gl.c { width: 32px; } .gl svg { width: 15px; height: 15px; color: #222; } .gl.t { display: inline-flex; gap: 6px; padding: 0 12px 0 5px; font: 500 13px/16px var(--ui); } .gl.t .av { width: 22px; height: 22px; } .ph-th { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 96px 14px 72px; overflow: hidden; } .ph-th > * { flex: none; } .t-time { align-self: center; padding: 2px 0; font: 400 11px/16px var(--ui); color: rgba(0, 0, 0, 0.4); } .t-b { align-self: flex-start; max-width: 86%; padding: 8px 12px; border-radius: 16px; background: rgba(16, 16, 0, 0.05); font: 400 13px/18px var(--ui); letter-spacing: -0.1px; transform-origin: left bottom; } .t-b small { display: block; margin-bottom: 2px; font: 500 10.5px/14px var(--ui); color: rgba(0, 0, 0, 0.45); } .t-me { align-self: flex-end; background: #111110; color: #fff; transform-origin: right bottom; } .t-sys { display: inline-flex; align-items: center; align-self: center; gap: 5px; font: 400 11.5px/16px var(--ui); color: rgba(0, 0, 0, 0.5); } .t-sys svg { width: 13px; height: 13px; color: var(--ok); stroke-width: 2.6; } .t-card { align-self: stretch; padding: 11px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); } .t-card b { display: block; font: 600 13.5px/18px var(--ui); } .t-card > span { display: block; margin-top: 1px; font: 400 11.5px/16px var(--ui); color: rgba(0, 0, 0, 0.5); } .t-card .ics { display: flex; gap: 5px; margin-top: 8px; } .t-card .ics .ico { width: 20px; height: 20px; border-radius: 5px; } .t-card .ics .ico svg { width: 11px; height: 11px; } .t-step { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 16px; background: rgba(16, 16, 0, 0.05); font: 500 12.5px/1 var(--ui); } .t-step .ico { width: 22px; height: 22px; border-radius: 11px; } .t-step em { font: 400 11.5px/1 var(--ui); font-style: normal; color: rgba(0, 0, 0, 0.45); } .t-step > svg { width: 13px; height: 13px; color: var(--ok); stroke-width: 2.6; } .t-cam { display: grid; grid-template-columns: 60px 1fr; align-items: center; align-self: flex-start; gap: 10px; width: 88%; padding: 8px 12px 8px 8px; border-radius: 16px; background: rgba(16, 16, 0, 0.05); } .t-cam .cc { position: relative; width: 60px; height: 60px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(229, 72, 77, 0.35); } .t-cam canvas, .t-vid canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .t-cam b { display: block; font: 600 12.5px/16px var(--ui); } .t-cam p { display: flex; gap: 8px; margin-top: 3px; font: 400 11px/14px var(--ui); color: rgba(0, 0, 0, 0.55); } .t-cam p span b { display: inline; font-size: 11px; font-variant-numeric: tabular-nums; } .t-cam p i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--c); } .t-cam .ok { margin-top: 4px; font: 500 10.5px/14px var(--ui); color: #1f7a45; } .t-vid { position: relative; align-self: stretch; height: 212px; overflow: hidden; border-radius: 16px; background: #e9eef3; } .t-vid .pip { position: absolute; top: 10px; right: 10px; width: 64px; height: 86px; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 14px -4px rgba(0, 0, 0, 0.25); } .t-vid .vt { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.88); font: 600 10.5px/1 var(--ui); } .t-vid .vt i { width: 6px; height: 6px; border-radius: 50%; background: var(--hr); animation: blink 1.2s ease-in-out infinite; } .t-vid .vt span { font-weight: 400; color: rgba(0, 0, 0, 0.5); font-variant-numeric: tabular-nums; } .ph-bt { position: absolute; right: 14px; bottom: 16px; left: 14px; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px; border-radius: 99px; background: #111; font: 500 13.5px/1 var(--ui); color: #fff; } .ph-bt.ctl { background: none; } .ph-bt.ctl span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(16, 16, 0, 0.07); color: #222; } .ph-bt.ctl span.end { width: 64px; border-radius: 99px; background: var(--hr); color: #fff; } .ph-bt.ctl svg { width: 17px; height: 17px; } /* 6. Video: a Playback scene drawn in code fills x.ai's film frame. */ .vd-s { padding: 160px 0 151px; } .vd-s .h2 { margin-bottom: 40px; text-align: center; } .film { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 24px; background: var(--card); container-type: inline-size; text-align: left; isolation: isolate; } button.film { cursor: pointer; } .film .wall { z-index: 0; } .rig { position: absolute; inset: 0; z-index: 1; perspective: 160cqi; } .cam { position: absolute; inset: 0; transform-origin: 62% 46%; transition: transform 3.2s cubic-bezier(0.45, 0, 0.2, 1); } .pbw { position: absolute; top: 8.6cqi; left: 30cqi; width: 64cqi; overflow: hidden; border-radius: 1.3cqi; background: #fff; box-shadow: 0 0 0 0.08cqi rgba(0, 0, 0, 0.06), 0 3cqi 7cqi -3cqi rgba(30, 30, 45, 0.32); transform: rotateY(-9deg) rotateX(3deg); transform-origin: 0 50%; font-family: var(--ui); color: #111; } .pbw-b { display: flex; align-items: center; gap: 0.8cqi; height: 3.4cqi; padding: 0 1.3cqi; border-bottom: 0.08cqi solid rgba(0, 0, 0, 0.07); font: 500 1.05cqi/1 var(--ui); color: rgba(0, 0, 0, 0.5); white-space: nowrap; } .pbw-b .dts { display: flex; gap: 0.45cqi; margin-right: 0.6cqi; } .pbw-b .dts i { width: 0.75cqi; height: 0.75cqi; border-radius: 50%; background: #e2e2e4; } .pbw-b b { font-weight: 600; color: #111; } .pbw-b .r { margin-left: auto; } .pbw-g { display: grid; grid-template-columns: 17cqi minmax(0, 1fr); gap: 1.2cqi; padding: 1.2cqi; } .pbw-cam { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0.9cqi; box-shadow: 0 0 0 0.08cqi rgba(0, 0, 0, 0.06); } .pbw-cam canvas, .pbw-ch canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .pbw-cam span { position: absolute; top: 0.7cqi; left: 0.7cqi; padding: 0.45cqi 0.7cqi; border-radius: 99px; background: rgba(255, 255, 255, 0.88); font: 600 0.85cqi/1 var(--ui); } .pbw-ans { display: flex; flex-direction: column; gap: 0.5cqi; margin-top: 1cqi; } .pbw-ans p { display: flex; justify-content: space-between; padding: 0.7cqi 0.8cqi; border-radius: 0.6cqi; background: #f5f5f7; font: 400 0.9cqi/1.2 var(--ui); color: rgba(0, 0, 0, 0.55); transition: background-color 0.4s, box-shadow 0.4s; } .pbw-ans p b { font-weight: 600; color: #111; } .pbw-ans p.hit { background: #fdf0f1; box-shadow: 0 0 0 0.08cqi rgba(173, 32, 41, 0.25); } .pbw-ch { position: relative; height: 30.2cqi; overflow: hidden; border-radius: 0.9cqi; box-shadow: 0 0 0 0.08cqi rgba(0, 0, 0, 0.07); } .pbw-ch .k { left: 1cqi; font-size: 0.95cqi; } .pbw-ch .k small { font-size: 0.85cqi; } .pbw-ctl { display: flex; align-items: center; gap: 1cqi; margin-top: 1.2cqi; font: 500 0.95cqi/1 var(--ui); color: rgba(0, 0, 0, 0.55); font-variant-numeric: tabular-nums; } .pbw-ctl svg { width: 1.2cqi; height: 1.2cqi; color: #333; } .pbw-ctl .pp { display: grid; place-items: center; width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: var(--head); color: #fff; } .pbw-ctl .pp svg { width: 1cqi; height: 1cqi; color: #fff; fill: currentColor; stroke: none; } .pbw-trk { position: relative; flex: 1; height: 0.45cqi; border-radius: 99px; background: #ececf0; } .pbw-trk > i { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--head); } .pbw-trk > b { position: absolute; top: 50%; left: var(--p); width: 1.3cqi; height: 1.3cqi; margin: -0.65cqi 0 0 -0.65cqi; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.18cqi var(--head); } .pbw-trk > s { position: absolute; top: 50%; left: var(--x); width: 0.8cqi; height: 0.8cqi; margin: -0.4cqi 0 0 -0.4cqi; border-radius: 0.15cqi; background: var(--accent); transform: rotate(45deg); } .film-pl { position: absolute; top: 50%; left: 56px; z-index: 4; display: flex; align-items: center; gap: 0.35em; font: var(--hw) 48px/1 var(--site); color: var(--fg); translate: 0 -50%; transition: transform 0.3s ease-out; } .film-pl svg { width: 0.7em; height: 0.7em; fill: currentColor; } .film:hover .film-pl { transform: translateX(-4px); } /* The caption sits on a frosted plate, so it stays legible when a camera move slides the Playback window underneath it. */ .film-cap { position: absolute; bottom: max(10px, 3.4cqi); left: max(10px, 3.4cqi); z-index: 4; max-width: max(204px, 30cqi); padding: max(7px, 0.95cqi) max(10px, 1.3cqi) max(8px, 1.05cqi); border-radius: max(10px, 1.1cqi); background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 1px rgba(11, 13, 24, 0.05), 0 8px 24px -12px rgba(30, 30, 45, 0.28); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); font: var(--hw) max(12px, 1.8cqi)/1.25 var(--site); color: var(--fg); } .film-cap small { display: block; margin-top: max(2px, 0.3cqi); font: 400 max(10px, 1.3cqi)/1.35 var(--site); color: #5d6168; } @keyframes cap-in { from { opacity: 0; filter: blur(4px); transform: translateY(0.6cqi); } } /* Lightbox: the same scene, larger, with player controls. */ .lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; visibility: hidden; } .lb.on { visibility: visible; } .lb-sc { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.4); opacity: 0; transition: opacity 0.18s ease; } .lb.show .lb-sc { opacity: 1; } .lb-d { position: relative; width: min(960px, calc(85svh * 16 / 9), 100%); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.5); opacity: 0; transform: scale(0.96); transition: opacity 0.18s var(--eoq), transform 0.18s var(--eoq); } .lb.show .lb-d { opacity: 1; transform: none; } .lb.hide .lb-d { opacity: 0; transform: scale(0.98); } .lb .film { border-radius: 0; } .lb .film-cap { top: max(10px, 3.4cqi); bottom: auto; } .lb-pp { position: absolute; top: 50%; left: 50%; z-index: 6; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; transition: opacity 0.3s, transform 0.3s; } .lb-pp svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; } .lb.playing .lb-pp { opacity: 0; transform: scale(0.9); pointer-events: none; } .lb-ctl { position: absolute; right: 0; bottom: 0; left: 0; z-index: 6; display: flex; flex-direction: column; gap: 10px; padding: 28px 14px 12px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.34)); color: #fff; transition: opacity 0.3s; } .lb.idle .lb-ctl { opacity: 0; } .lb-sk { position: relative; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); cursor: pointer; } .lb-sk::before { content: ''; position: absolute; inset: -8px 0; } .lb-sk i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: #fff; } .lb-row { display: flex; align-items: center; gap: 12px; font: 500 13px/1 var(--ui); font-variant-numeric: tabular-nums; } .lb-row button { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; } .lb-row svg { width: 16px; height: 16px; fill: currentColor; } .lb-row .pz { display: none; } .lb.playing .lb-row .py { display: none; } .lb.playing .lb-row .pz { display: block; } .lb-row span { margin-left: auto; } .lb-x { position: fixed; top: 16px; right: 16px; z-index: 101; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #fff; } .lb-x svg { width: 18px; height: 18px; } /* 7. What's included: x.ai's pricing cards, without prices. */ .pr-s { padding: 112px 0; } .pr-in { display: flex; flex-direction: column; gap: 40px; } .pr-h { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .pr-w { display: flex; flex-direction: column; gap: 16px; } .pr-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pc { display: flex; flex-direction: column; min-height: 504px; padding: 32px; border-radius: 24px; background: var(--card); } .pc-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 28px; } .pc-t h3 { font: var(--hw) 14px/20px var(--site); color: var(--muted); } .seg { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(10, 10, 10, 0.05); } .seg button { height: 24px; padding: 4px 10px; border-radius: 999px; font: var(--hw) 12px/16px var(--site); color: var(--muted); transition: color 0.15s, background-color 0.15s, box-shadow 0.15s; } .seg button:hover { color: var(--fg); } .seg button.on { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .pc-p { display: flex; align-items: baseline; gap: 6px; min-height: 54px; margin-top: 12px; padding-top: 10px; white-space: nowrap; } .amt { font: var(--hw) 36px/40px var(--site); letter-spacing: -0.36px; } .unit { font: 400 14px/20px var(--site); color: var(--muted); } .pc-n { font: 400 14px/20px var(--site); color: var(--muted); } .pc .btn { width: 100%; margin-top: 24px; } .pc-lh { margin-top: 32px; font: var(--hw) 14px/20px var(--site); white-space: nowrap; } .pc-ls { display: grid; margin-top: 12px; } .pc-ls ul { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; visibility: hidden; } .pc-ls ul.on { visibility: visible; } .pc-ls li { display: flex; gap: 8px; font: 400 14px/20px var(--site); color: var(--muted); } .pc-ls li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke-width: 1.5; } .ws { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; white-space: pre; } .ws > span { display: inline-block; white-space: pre; } .ws > span > i { display: inline-block; font-style: normal; white-space: pre; } .pr-bn { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; padding: 20px 32px; border-radius: 24px; background: var(--card); } .pr-bn p { display: flex; align-items: center; gap: 12px; font: 400 14px/20px var(--site); } .pr-bn p span { color: var(--muted); } .pr-bn p svg { width: 21px; height: 20px; flex: none; } /* 8. Download. */ .dl-s { padding: 112px 0; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .dl-l { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 16px; } .dl-l p { max-width: 448px; color: var(--muted); } .dl-r { display: flex; flex-direction: column; gap: 12px; } .dr { display: flex; align-items: center; gap: 16px; width: 100%; height: 80px; padding: 16px 20px; border-radius: 16px; background: var(--card); color: var(--fg); text-align: left; text-decoration: none; transition: background-color 0.15s; } .dr:hover { background: var(--b2); } .dr .ib { display: grid; place-items: center; flex: none; width: 48px; height: 48px; } .dr .ib svg { width: 20px; height: 20px; } .dr b { display: block; font: var(--hw) 14px/20px var(--site); transition: color 0.15s; } .dr b + span { display: block; font: 400 12px/16px var(--site); color: var(--muted); } .dr .dlg { width: 16px; height: 16px; margin: 0 12px 0 auto; color: var(--muted); transition: color 0.15s; } .dr:hover .dlg { color: var(--fg); } .dr.more .ib svg { color: rgba(10, 10, 10, 0.3); } .dr.more b { color: var(--muted); } .dr.more:hover b { color: var(--fg); } .dg { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; visibility: hidden; } .dg.on { visibility: visible; } .dg-sc { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.4); opacity: 0; transition: opacity 0.18s ease; } .dg.show .dg-sc { opacity: 1; } .dg-d { position: relative; width: 384px; max-width: calc(100vw - 32px); padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.35); opacity: 0; transform: scale(0.96); transition: opacity 0.18s var(--eoq), transform 0.18s var(--eoq); } .dg.show .dg-d { opacity: 1; transform: none; } .dg.hide .dg-d { opacity: 0; transform: scale(0.98); } .dg-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font: var(--hw) 16px/24px var(--site); } .dg-h button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; transition: background-color 0.15s; } .dg-h button:hover { background: var(--soft); } .dg-h svg { width: 16px; height: 16px; } .dg-l { display: flex; flex-direction: column; gap: 12px; } /* 9. Guides. */ .gd-s { padding: 112px 0; } .gd { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 672px; margin: 0 auto; text-align: center; } .gd-t { display: flex; flex-direction: column; gap: 16px; } .gd-t p { max-width: 576px; margin: 0 auto; } /* 10. FAQs. */ .fq-s { padding: 112px 0; } .fq-l .h2 { position: sticky; top: 96px; } .fq-i { border-bottom: 1px solid var(--border); } .fq-q { display: flex; justify-content: space-between; gap: 24px; width: 100%; padding: 20px 0; text-align: left; font: var(--hw) 16px/24px var(--site); } .fq-q svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: rgba(10, 10, 10, 0.6); stroke-width: 1.5; transition: transform 0.2s var(--mat); } .fq-i.open .fq-q svg { transform: rotate(45deg); } .fq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s var(--eoq), opacity 0.3s var(--eoq); } .fq-i.open .fq-a { grid-template-rows: 1fr; opacity: 1; } .fq-a > div { overflow: hidden; } .fq-a p { max-width: 672px; padding: 0 44px 24px 0; font: 400 16px/28px var(--site); } .fq-a a { text-decoration: underline; text-decoration-color: rgba(10, 10, 10, 0.8); text-underline-offset: 2px; } /* 11. Get started: a big outline mark that follows the pointer. */ .gs-s { padding: 128px 0 0; } .gs { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 576px; margin: 0 auto; text-align: center; } .gs-t { display: flex; flex-direction: column; gap: 12px; } .gs-t p { font: 400 16px/24px var(--site); } .gs-cta { display: flex; justify-content: center; gap: 12px; } .gs-art { position: relative; width: 100%; max-width: 976px; aspect-ratio: 2 / 1; margin: 80px auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%); } .gs-art svg.mk { position: absolute; top: -3.52%; left: -4.35%; width: 108.7%; height: auto; aspect-ratio: 1; } /* 12. Footer. */ .fo { display: flex; gap: 64px; max-width: 1280px; margin: 0 auto; padding: 40px 24px 64px; border-top: 1px solid var(--border); } .fo-l { display: flex; flex: none; flex-direction: column; width: 280px; } .fo-l .logo img { width: 131px; height: 42px; } .fo-l small { margin-top: 20px; font: 400 10px/10px var(--site); } .fo-b { margin-top: auto; padding-top: 40px; } .fo-pill { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 6px 12px 6px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06); font: 500 10px/15px var(--site); color: rgba(10, 10, 10, 0.25); transition: box-shadow 0.15s, color 0.15s; } .fo-pill:hover { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.12); color: rgba(10, 10, 10, 0.6); } .fo-pill svg { width: 14px; height: 14px; } .fo-dv { flex: none; width: 0; border-left: 1px dashed rgba(10, 10, 10, 0.1); } .fo-g { display: grid; grid-template-columns: repeat(5, 112px); column-gap: 56px; margin-left: auto; } .fo-c { display: flex; flex-direction: column; gap: 40px; } .fo-c h4 { margin: 0 0 6px; font: var(--hw) 13px/19.5px var(--site); } .fo-c ul { display: flex; flex-direction: column; gap: 4px; } .fo-c a { font: 400 13px/21.125px var(--site); text-decoration: none; } /* Which x.ai section is on screen. */ .idx { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; z-index: 40; display: block; padding: 8px 14px; border-radius: 999px; background: rgba(28, 27, 26, 0.92); font: 500 12px/1 var(--site); color: #fff; white-space: nowrap; pointer-events: none; } /* Section numbers for review: each section's number in its top left corner (the hero's sits under the header), the same as in the pill. */ .sx-nums { position: absolute; top: 0; left: 0; z-index: 45; pointer-events: none; } .sx-nums span:first-child { display: none; } .sx-nums span { position: absolute; top: 12px; left: 12px; padding: 5px 8px; border-radius: 7px; background: #141413; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); font: 600 12px/1 var(--site); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: #fff; white-space: nowrap; } .idx b { font-variant-numeric: tabular-nums; } /* Each container of animated children is its own stacking context, so opacity changes inside it always reach the compositor. */ .ph-th, .mw, .ftd, .bd-l, .fd, .pc, .uc-l, .uc-sl, .ov-fr, .scr, .st-m, .gs-art { isolation: isolate; } /* Mobile menu sheet. */ .mm { position: fixed; inset: 0; z-index: 70; display: none; flex-direction: column; height: 100dvh; padding: 16px 24px 24px; background: #fff; } .mm.on { display: flex; } .mm-t { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 0 -8px; } .mm-l { display: flex; flex-direction: column; margin-top: 24px; } .mm-l a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font: var(--hw) 18px/28px var(--site); text-decoration: none; } .mm-l a svg { width: 16px; height: 16px; color: rgba(10, 10, 10, 0.4); } .mm-b { display: flex; flex-direction: column; gap: 16px; margin-top: auto; } .mm-b .btn { width: 100%; font: var(--hw) 14px/20px var(--site); } .mm-b p { font: 400 12px/16px var(--site); color: rgba(10, 10, 10, 0.3); text-align: center; } @media (min-width: 1100px) { .mm { inset: 80px 64px auto auto; width: 380px; height: auto; padding: 14px 20px 20px; border-radius: 24px; box-shadow: 0 0 0 1px rgba(74, 71, 65, 0.08), 0 24px 60px -20px rgba(38, 37, 30, 0.35); } .mm-t .logo { visibility: hidden; } .mm-l { margin-top: 4px; } .mm-b { margin-top: 24px; } } @media (max-width: 1099px) { .hd, .hd-in, .hd.sc, .hd.sc .hd-in { height: 64px; } .hcb { top: 64px; } .hd-in { grid-template-columns: 1fr auto; } .hd .ww { padding: 0 48px; } .nav { display: none; } } /* Footer between 1024 and 1199: the five link columns share the width instead of pushing the page sideways. */ @media (max-width: 1199px) { .fo { gap: 40px; } .fo-l { width: 220px; } .fo-g { flex: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; } } @media (max-width: 1023px) { .ww { padding: 0 16px; } .st-c { display: block; min-height: 0; padding: 32px 32px 230px; overflow: hidden; } .st-t { gap: 16px; padding: 0; } .st-clip { inset: 0; border-radius: 24px; } .st-m { right: 0; width: 300px; translate: 20% 20%; filter: none; } .uc-g { grid-template-columns: minmax(0, 1fr); gap: 48px; } .uc-l { align-items: center; min-height: 0; padding: 0; text-align: center; } .uc-l .h2 { text-align: center; } .pills, .pr { align-items: center; justify-content: center; } .uc-d { max-width: 560px; min-height: 0; } .uc-r { height: auto; padding-top: 0; } .two { grid-template-columns: minmax(0, 1fr); gap: 40px; } .dl-l, .fq-l .h2 { position: static; } .pr-g { grid-template-columns: minmax(0, 1fr); } .pc { min-height: 0; } .fo { flex-direction: column; gap: 40px; } .fo-dv { display: none; } .fo-l { display: contents; } .fo-l .logo { align-self: flex-start; } .fo-l small { margin-top: -20px; } .fo-g { order: 2; } .fo-b { order: 3; margin-top: -8px; padding-top: 0; } .fo-g { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 32px; margin-left: 0; } .fo-c { gap: 32px; } } @media (max-width: 767px) { .win { grid-template-columns: 84px minmax(0, 1fr); } .sb-top { justify-content: flex-start; } .sb-top > svg, .sb-q { display: none; } .sb-l { gap: 4px; padding: 6px 13px 0; } .row { grid-template-columns: 1fr; justify-items: center; padding: 10px 0; } .row .av { grid-row: auto; } .row b, .row time, .row .pv { display: none; } .row .ud { left: auto; right: 9px; } .sb-me { left: 50%; flex-direction: column; translate: -50% 0; } .sb-me b { display: none; } .sb-me::before { content: '+'; font: 300 22px/1 var(--ui); color: rgba(0, 0, 0, 0.45); } .mn-h { padding: 0 12px; } .mn-h .sub { display: none; } .ch { height: 150px; margin: 10px 12px 0; } .ch-k { left: 10px; } .fd { padding: 12px 12px 76px; } .cmp { right: 12px; bottom: 12px; left: 12px; } .mn::before { height: 58px; } .mn::after { bottom: 58px; } .e-c { width: 100%; } .e-b { max-width: 92%; } .ft-g { grid-template-columns: minmax(0, 1fr); } .fc { height: auto; min-height: 374px; padding: 24px; } .fc-st { height: 190px; margin-top: 24px; } } @media (max-width: 639px) { .hcb { top: 56px; right: 8px; left: 8px; border-radius: 24px; } .hd, .hd-in, .hd.sc, .hd.sc .hd-in { height: 56px; } .hd .ww { padding: 0 24px; } .wn { padding: 0 16px; } .h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.3px; } .lead { font-size: 16px; line-height: 26px; } .hx { gap: 48px; padding: 104px 16px 80px; } .h1 { margin-bottom: 0; font-size: 34px; line-height: 37.8px; letter-spacing: -0.34px; white-space: normal; } .hsub { max-width: 576px; margin-top: 16px; font-size: 16px; line-height: 26px; } .hcta { gap: 8px; } .hcta .btn { height: 36px; padding: 0 16px; font-size: 14px; line-height: 20px; } .st-s { padding: 48px 0; } .st-c { padding-bottom: 176px; } .st-m { width: 224px; } .ft-s, .uc-s, .pr-s, .dl-s, .gd-s, .fq-s { padding: 80px 0; } .ft-in { gap: 40px; } .vd-s { padding: 112px 0 96px; } .film-pl { left: 24px; font-size: 24px; } .pills { flex-flow: row wrap; justify-content: center; max-width: 358px; } .pr { display: contents; } .uc-r, .uc-l > .uc-d { display: none; } .uc-car { display: flex; gap: 20px; width: calc(100% + 32px); margin: 0 -16px; padding: 0 45px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .uc-car::-webkit-scrollbar { display: none; } .uc-sl { flex: 0 0 300px; scroll-snap-align: center; text-align: left; } .uc-sl .ph { margin-bottom: -65px; transform: scale(0.9); transform-origin: top center; } .uc-sl .uc-d { margin-top: 16px; min-height: 0; font-size: 14px; line-height: 19.25px; } .pc { padding: 24px; } .pr-bn { flex-direction: column; gap: 12px; padding: 24px; text-align: center; } .pr-bn p { flex-direction: column; gap: 8px; } .gd-t .lead { font-size: 18px; line-height: 29.25px; } .gs-s { padding: 96px 0 0; } .gs-t p { font-size: 14px; line-height: 22.75px; } .gs-cta { flex-direction: column; align-items: center; } .gs-art { margin-top: 64px; } .fo { padding: 40px 24px 64px; } .fo-g { grid-template-columns: 1fr 1fr; } .idx { left: 50%; translate: -50% 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } @media (max-width: 379px) { .lp .dot, .lp .rest { display: none; } } /* Features in Apple's design language, matching the hero: SF type in every scene, macOS windows (light gray buttons, gray address field, hairlines), light iPhones with iOS banners, cells, sliders and tinted rounded buttons, plain pointers without name labels. */ .ft-s { --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif; --l2: rgba(60, 60, 67, 0.6); --fill: rgba(118, 118, 128, 0.12); } .ft-s .fc-in { --ui: var(--sf); } .ft-s .mw, .ft-s .ab { border-radius: 12px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05), 0 22px 48px -18px rgba(0, 0, 0, 0.24); } .ft-s .mw-b { height: 32px; background: #f7f7f7; border-bottom: 1px solid rgba(0, 0, 0, 0.08); color: var(--l2); } .ft-s .mw-b b { color: #000; } .ft-s .mw-b .dts { gap: 5px; margin-right: 6px; } .ft-s .mw-b .dts i, .ft-s .ab-bar i { background: #dcdcdf; } .ft-s .ab-bar { height: 28px; background: #f7f7f7; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .ft-s .ab-url { padding: 4px 22px; border-radius: 6px; background: rgba(0, 0, 0, 0.055); box-shadow: none; color: rgba(0, 0, 0, 0.55); } .ft-s .ab-head b { font: 600 11px/1 var(--sf); letter-spacing: 0.06em; color: #1d1d1f; } .ft-s .ab-sub { color: var(--l2); } .ft-s .ab-save { height: 26px; border-radius: 7px; font-size: 11.5px; } .ft-s .tag { background: rgba(255, 59, 48, 0.1); color: #d70015; } .ft-s .tag i { background: #ff3b30; } .ft-s .k { font: 600 10px/1.25 var(--sf); } .ft-s .k small { font: 500 10px/1.25 var(--sf); color: var(--l2); } .ft-s .k small b { color: #000; } .ft-s .cur:not(.tch) span { display: none; } /* Taps on the phones: a plain iOS touch dot, no ring, shadow or label. */ .ft-s .cur.tch::before { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: rgba(60, 60, 67, 0.22); box-shadow: none; } .ft-s .cur.tch span { display: none; } /* 1. Build: the steps sit on the left like a macOS sidebar and are dragged right into the program. */ .ft-s .ab-body { grid-template-columns: 178px minmax(0, 1fr); } .ft-s [data-take="build"].m .ab-body { grid-template-columns: 106px minmax(0, 1fr); } .ft-s .ab-pal { order: -1; border-left: 0; border-right: 1px solid rgba(0, 0, 0, 0.07); background: #f7f7f7; } .ft-s .ab-tile { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06); } /* Activity Builder, Apple style: a macOS sidebar of steps (rows with symbols in the one tint color), the program as a stack of white action cards like Shortcuts, a tinted drop target, and a tinted Save button. */ .ft-s .ab .ico, .ft-s .ab-ghost .ico { width: 18px; height: 18px; border-radius: 0; background: none; color: var(--accent); } .ft-s .ab .ico svg, .ft-s .ab-ghost .ico svg { width: 14px; height: 14px; stroke-width: 2; } /* Black until a step is in the program, then it takes the red. */ .ft-s .ab-pal .ico, .ft-s .ab-ghost .ico { color: #1d1d1f; } .ft-s .ab-pal > p:first-child { font: 600 10.5px/1 var(--sf); color: var(--l2); } .ft-s .ab-grid { grid-template-columns: minmax(0, 1fr); gap: 1px; margin-top: 8px; } .ft-s .ab-tile { flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: transparent; box-shadow: none; font: 500 12px/1 var(--sf); color: #1d1d1f; } .ft-s .ab-tile.press, .ft-s .ab-ghost { background: #fff; } .ft-s .ab-ghost { border-radius: 8px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 24px -8px rgba(0, 0, 0, 0.28); } .ft-s .ab-hint { color: var(--l2); } .ft-s .ab-t { font: 700 14px/1 var(--sf); letter-spacing: -0.01em; } .ft-s .ab-m { color: var(--l2); } .ft-s .ab-st { background: var(--fill); color: var(--l2); } .ft-s .ab-st.ok { background: var(--fill); color: #1d1d1f; } .ft-s .ab-steps { gap: 6px; } .ft-s .ab-steps li { height: 32px; padding: 0 10px 0 8px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.13), 0 1px 2px rgba(0, 0, 0, 0.05); font: 500 12px/1 var(--sf); } .ft-s .ab-steps li::before, .ft-s .ab-steps li + li::after { display: none; } .ft-s .ab-steps em { color: var(--l2); } .ft-s .ab-steps li.ab-slot { margin: 0; padding: 0; background: rgba(173, 32, 41, 0.04); box-shadow: none; } .ft-s .ab-steps li.ab-slot.open { height: 32px; margin: 0; box-shadow: inset 0 0 0 1.5px rgba(173, 32, 41, 0.35); } /* 2. Send: the finished Activity Builder, its right side showing and its left cut off by the card's edge; the cursor sends the invites. */ .ft-s .sd .ab-clip { position: absolute; top: 0; left: -150px; width: 365px; } .ft-s .ab-kv { margin-top: 12px; border-top: 1px solid rgba(60, 60, 67, 0.12); } .ft-s .ab-kv p { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(60, 60, 67, 0.12); font: 400 11.5px/1 var(--sf); color: var(--l2); } .ft-s .ab-kv b { font-weight: 600; color: #1d1d1f; font-variant-numeric: tabular-nums; } /* Save is the card's one action, so it carries the tint. */ .ft-s .ab-save { background: var(--accent); color: #fff; } /* 2. Send: a macOS form and an iPhone with an iOS banner over a grouped list. */ .ft-s .iv-l { color: var(--l2); } .ft-s .iv-f { border-radius: 7px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 0.5px 1px rgba(0, 0, 0, 0.05); color: var(--l2); } .ft-s .iv-f b { color: #000; } .ft-s .sbt { border-radius: 8px; background: var(--accent); font-weight: 600; } .ft-s .sbt.ok, .ft-s .ab-save.ok { background: var(--fill); color: #1d1d1f; } .ft-s .pho { padding: calc(var(--pw) * 0.03); background: linear-gradient(150deg, #ebebee 0%, #d0d0d6 55%, #e1e1e5 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 24px 44px -18px rgba(23, 23, 23, 0.28), 0 2px 6px rgba(23, 23, 23, 0.08); } .ft-s .pho-s { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); color: #000; } .ft-s .sd .pho-s { background: #f2f2f7; } /* Three more iPhones stacked behind the first, stepping right and back, so the invite visibly reaches a whole group; the front phone moves left to make room. */ .ft-s .sd .pho:not(.bk) { top: 0; right: 80px; } /* Lock screens: a mostly white wallpaper fading to light gray, dark date and big rounded clock; the invite pops up below the clock as a frosted notification with Presage's red logo as the sender (and a small Mail badge). */ .ft-s .sd .pho-s.lock { background: linear-gradient(180deg, #ffffff 0%, #f3f3f6 35%, #e2e2e8 70%, #d6d6dd 100%); color: #1d1d1f; } .lock .psb { color: #1d1d1f; } .lock .psb span { visibility: hidden; } .lk-d, .lk-t { position: absolute; right: 0; left: 0; text-align: center; color: #1d1d1f; } .lk-d { top: 17cqi; font: 600 5.2cqi/1 var(--sf); opacity: 0.92; } .lk-t { top: 22cqi; font: 700 26cqi/1 ui-rounded, "SF Pro Rounded", var(--sf); letter-spacing: -0.02em; } .lk-n { position: absolute; top: 58cqi; right: 4cqi; left: 4cqi; display: flex; align-items: flex-start; gap: 3cqi; padding: 3.6cqi; border-radius: 6.5cqi; background: rgba(244, 244, 247, 0.95); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 0 0 0.3cqi rgba(0, 0, 0, 0.04), 0 2cqi 8cqi rgba(0, 0, 0, 0.1); color: #000; opacity: 0; transform: translateY(5cqi) scale(0.9); transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15); } .lk-n.on { opacity: 1; transform: none; } .lk-n i { position: relative; display: grid; place-items: center; flex: none; width: 9.5cqi; height: 9.5cqi; border-radius: 2.4cqi; background: linear-gradient(180deg, #c42b35, #a11d26); color: #fff; } .lk-n i svg { width: 5.4cqi; height: 5.4cqi; } .lk-n i s { position: absolute; right: -1.3cqi; bottom: -1.3cqi; display: grid; place-items: center; width: 4.6cqi; height: 4.6cqi; border-radius: 1.2cqi; background: #8e8e93; box-shadow: 0 0 0 0.6cqi rgba(255, 255, 255, 0.92); } .lk-n i s svg { width: 3cqi; height: 3cqi; } .lk-n p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8cqi 2cqi; min-width: 0; flex: 1; font: 400 3.6cqi/1.25 var(--sf); } .lk-n b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .lk-n em { font-size: 3.2cqi; font-style: normal; color: rgba(0, 0, 0, 0.5); } .lk-n span { grid-column: 1 / -1; } /* Scaled from the center, so each is raised by half its shrink to keep every top level with the browser's. */ .ft-s .sd .pho.b1 { right: 52px; top: -10.4px; scale: 0.95; opacity: 0.92; } .ft-s .sd .pho.b2 { right: 24px; top: -20.8px; scale: 0.9; opacity: 0.78; } .ft-s .sd .pho.b3 { right: -4px; top: -31.2px; scale: 0.85; opacity: 0.62; } .ft-s .ntf { border-radius: 7cqi; background: rgba(246, 246, 248, 0.9); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 2cqi 8cqi rgba(0, 0, 0, 0.12); } .ft-s .ntf i { background: linear-gradient(180deg, #aeaeb2, #8e8e93); } .ft-s .ntf b { color: var(--l2); } .ft-s .ftd > p, .ft-s .prog span { color: var(--l2); } .ft-s .prog { box-shadow: none; } .ft-s .prog > svg { color: rgba(60, 60, 67, 0.3); } /* 3. Watch: the phone's question in iOS style, LiveLine as a macOS window. */ .ft-s .wl-bpm { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); color: var(--l2); } .ft-s .wl-bpm svg { color: #e5484d; fill: currentColor; stroke-width: 1.2; } .ft-s .wl-bpm b { color: #000; } .ft-s .wl-k { font: 400 8px/1 var(--sf); letter-spacing: 0; text-transform: none; color: var(--l2); } .ft-s .wl-k.ok { color: #48484a; } .ft-s .wl-t { font-weight: 700; letter-spacing: -0.02em; } .ft-s .wl-tr { background: rgba(120, 120, 128, 0.2); } .ft-s .wl-kn { box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.18); } .ft-s .wl-kn em { background: var(--accent); } .ft-s .wl-e { color: var(--l2); } .ft-s .wl-nx { border-radius: 5px; background: var(--fill); color: rgba(60, 60, 67, 0.4); } .ft-s .wl-nx.on { background: var(--accent); color: #fff; } .ft-s .wl-pip { border-radius: 10px; } .ft-s .wl-ch { border-radius: 10px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14); } .ft-s .wl-rec { background: #ff3b30; } .ft-s .wl-who { color: var(--l2); } .ft-s .wl-who b, .ft-s .wl-clk { color: #000; } /* 3. Watch it live mirrors the hero: the same iOS phone and Safari LiveLine window at card size, with type floors so it stays readable. */ .lhc { --pw: 112px; gap: 14px; align-items: start; } .lhc .pho.lh-pho { --pw: 112px; } .lhc .lh-bar { height: 20px; } .lhc .lh-bar i, .lhc .lh-bar i:nth-child(2), .lhc .lh-bar i:nth-child(3) { width: 6px; height: 6px; } .lhc .lh-ll { padding: 9px 10px 10px; gap: 8px; } .lhc .lh-head { gap: 6px; } .lhc .lh-logo { width: 40px; height: 13px; } .lhc .lh-div { height: 11px; } .lhc .lh-head b { font-size: 9.5px; } .lhc .lh-live { gap: 3px; padding: 2px 6px; } .lhc .lh-live::before { width: 4px; height: 4px; } .lhc .lh-body { gap: 8px; } .lhc .lh-key { left: 7px; } .lhc .lh-cam { margin-top: 5px; } .lhc .lh-tag { top: 4px; left: 4px; gap: 3px; padding: 2px 5px; font-size: 8px; } .lhc .lh-tag i { width: 4px; height: 4px; } .lhc .lh-ah { margin-top: 9px; } .lhc .lh-prev li { column-gap: 5px; padding: 5px 0; } .lhc .lh-prev i { width: 12px; height: 12px; } .lhc .lh-prev svg { width: 6px; height: 6px; } .lhc .lh-prev li + li::before { left: 17px; } .lhc .lh-pc { height: 46%; } .lhc .lh-q { inset: calc(46% - 6cqi) 0 0; padding: 7cqi 5cqi 9cqi; } .lhc .lh-qt { font-size: 10px; } .lhc .lh-rec { gap: 0; padding: 2.6cqi; font-size: 0; } .lhc .lh-ends { display: none; } /* 4. Review: an Apple media scrubber, a white knob and round markers. */ .ft-s .scrub .trk { background: rgba(120, 120, 128, 0.2); } .ft-s .scrub .pin { width: 7px; height: 7px; margin-left: -3.5px; top: 10px; border-radius: 50%; transform: none; box-shadow: 0 0 0 1.5px #fff; } .ft-s .scrub .pin.hit { transform: scale(1.35); } .ft-s .scrub .hdl { box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.22); } /* Highlights: the four features again as an Apple-style carousel, in the same colors and type as the tiles above. The cards sit side by side without overlapping, the first at the page's left margin, the next one showing on the right; the arrows under the row slide it along. */ .cs-s { padding: 96px 0 104px; overflow-x: clip; } .cs-h { margin-bottom: 40px; } /* Lined up with the left edge of the Presage logo in the nav (64/48/24px); the row runs on to the right edge of the window. */ .cs-in { --pad: 64px; padding-left: var(--pad); } /* A native horizontal scroller (trackpad and touch swipes glide and snap to each card), full window width, its first card at the logo's edge. */ .cs-deck { --cw: min(620px, calc(100% - 140px)); position: relative; margin-left: calc(-1 * var(--pad)); } .cs-track { position: relative; display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad); scrollbar-width: none; } .cs-track::-webkit-scrollbar { display: none; } .cs-card { position: relative; display: flex; flex: none; flex-direction: column; width: var(--cw); height: 700px; overflow: hidden; padding: 56px 56px 52px; border-radius: 28px; background: var(--card); scroll-snap-align: start; } .cs-card:not([data-pos="0"]) { cursor: pointer; } /* After the reference card: a big tight headline at the top, the visual in the middle, and a short gray line at the bottom; the button sits top right as a white rounded square. */ .cs-t { max-width: 440px; font: 360 38px/1.08 var(--site); letter-spacing: -0.03em; color: #141413; } .cs-p { order: 2; max-width: none; margin-top: 20px; font: 400 15px/1.45 var(--site); color: rgba(20, 20, 19, 0.45); } /* The stage fills the card under the text; the scene sits at its top. */ /* The visual sits centered between the headline and the line below, with room around it; nothing clips it, so window shadows render in full and the Send window runs off the card's edge as in the tile. */ .cs-card .fc-st { order: 1; flex: 1 1 auto; align-items: center; height: auto; min-height: 0; margin-top: 28px; } .cs-card .fc-in { transform-origin: center center; } /* One design window for all four cards: the first card's browser is 430px tall, and every other visual spans exactly that height, so their tops and bottoms line up card to card. */ .cs-card .ab-body { height: 360px; } .cs-card .sd { height: 430px; } .cs-card .sd .pho { --pw: 198.5px; } .ft-s .cs-card .sd .pho.b1 { top: -10.75px; } .ft-s .cs-card .sd .pho.b2 { top: -21.5px; } .ft-s .cs-card .sd .pho.b3 { top: -32.25px; } .cs-card .lhc { --pw: 150px; align-items: center; } .cs-card .lhc .pho.lh-pho { --pw: 150px; } .cs-card .lhc .lh-ll { height: 410px; } .cs-card [data-take="review"] .mw { display: flex; flex-direction: column; height: 430px; } .cs-card .pb-c { flex: 1 1 auto; height: auto; } .cs-rp { position: absolute; top: 48px; right: 48px; z-index: 70; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); color: #1d1d1f; cursor: pointer; transition: transform 0.15s; } .cs-rp:hover { transform: scale(1.05); } .cs-rp svg, .cs-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cs-nav { display: flex; justify-content: flex-end; gap: 14px; margin-top: 28px; padding-right: var(--pad); } @media (max-width: 1099px) { .cs-in { --pad: 48px; } } .cs-b { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #e8e8ed; color: #1d1d1f; cursor: pointer; transition: background-color 0.15s, opacity 0.15s; } .cs-b:hover { background: #dcdce1; } .cs-b:disabled { opacity: 0.42; cursor: default; } @media (max-width: 639px) { .cs-s { padding: 64px 0 72px; } .cs-h { margin-bottom: 28px; } .cs-in { --pad: 24px; } .cs-deck { --cw: calc(100% - 72px); } .cs-track { gap: 12px; } .cs-card { height: 600px; padding: 30px 26px 30px; border-radius: 22px; } .cs-t { max-width: 240px; font-size: 28px; } .cs-p { margin-top: 14px; font-size: 14px; } .cs-card .fc-st { margin-top: 16px; } .cs-rp { top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 12px; } } /* Showcase: the four features as one big card that fills most of the screen. Copy on the left, the visual large on the right; on each change the old slide eases out left and the new slide's parts slide in from the right one after another. Visuals share the 430px design window. */ .sc-s { padding: 24px 0 104px; overflow-x: clip; } .sc-in { --pad: 64px; padding: 0 var(--pad); } .sc-card { position: relative; height: min(84vh, 820px); min-height: 600px; overflow: hidden; border-radius: 32px; background: var(--card); } .sc-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 48px; padding: 64px; visibility: hidden; } .sc-slide.on, .sc-slide.out { visibility: visible; } .sc-slide.out { pointer-events: none; animation: sc-out 0.45s ease both; } .sc-copy { display: flex; flex-direction: column; padding-bottom: 72px; } .sc-t { font: 360 52px/1.04 var(--site); letter-spacing: -0.035em; color: #141413; } .sc-p { margin-top: 20px; font: 400 15px/1.5 var(--site); color: rgba(20, 20, 19, 0.5); } .sc-vis { display: flex; min-width: 0; min-height: 0; } .sc-vis .fc-st { flex: 1 1 auto; align-items: center; height: auto; min-height: 0; margin: 0; } .sc-vis .fc-in { transform-origin: center center; } .sc-ctl { position: absolute; bottom: 56px; left: 64px; z-index: 80; display: flex; align-items: center; gap: 10px; } .sc-n { margin-right: 10px; font: 400 14px/1 var(--site); font-variant-numeric: tabular-nums; color: rgba(20, 20, 19, 0.45); } .sc-n b { font-weight: 500; color: #141413; } .sc-b { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); color: #1d1d1f; cursor: pointer; transition: transform 0.15s; } .sc-b:hover { transform: scale(1.05); } .sc-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* The shared 430px design window, as in the carousel. */ .sc-slide .ab-body { height: 360px; } .sc-slide .sd { height: 430px; } .sc-slide .sd .pho { --pw: 198.5px; } .ft-s .sc-slide .sd .pho.b1 { top: -10.75px; } .ft-s .sc-slide .sd .pho.b2 { top: -21.5px; } .ft-s .sc-slide .sd .pho.b3 { top: -32.25px; } .sc-slide .lhc { --pw: 150px; align-items: center; } .sc-slide .lhc .pho.lh-pho { --pw: 150px; } .sc-slide .lhc .lh-ll { height: 410px; } .sc-slide [data-take="review"] .mw { display: flex; flex-direction: column; height: 430px; } .sc-slide .pb-c { flex: 1 1 auto; height: auto; } /* Entrance: headline, line, then each window and phone, from the right. */ @media (prefers-reduced-motion: no-preference) { .sc-slide.in .sc-t { animation: sc-in 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.04s both; } .sc-slide.in .sc-p { animation: sc-in 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both; } .sc-slide.in .fc-in > .ab, .sc-slide.in .fc-in > .mw, .sc-slide.in .sd > .ab-clip, .sc-slide.in .lhc > .lh-bw { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; } .sc-slide.in .lhc > .lh-pho, .sc-slide.in .sd > .pho:not(.bk) { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.32s both; } .sc-slide.in .sd > .pho.b1 { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both; } .sc-slide.in .sd > .pho.b2 { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.48s both; } .sc-slide.in .sd > .pho.b3 { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.56s both; } } @keyframes sc-in { from { opacity: 0; transform: translateX(140px); } } @keyframes sc-out { to { opacity: 0; transform: translateX(-60px); } } @media (max-width: 1099px) { .sc-in { --pad: 48px; } .sc-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 24px; padding: 48px 48px 112px; } .sc-copy { padding-bottom: 0; } .sc-t { font-size: 40px; } .sc-ctl { bottom: 40px; left: 48px; } } @media (max-width: 639px) { .sc-s { padding: 16px 0 72px; } .sc-in { --pad: 24px; } .sc-card { height: min(86svh, 720px); min-height: 560px; border-radius: 24px; } .sc-slide { padding: 28px 22px 92px; gap: 16px; } .sc-t { font-size: 30px; } .sc-p { margin-top: 12px; font-size: 14px; } .sc-ctl { bottom: 24px; left: 22px; } .sc-b { width: 42px; height: 42px; border-radius: 12px; } } /* A closer look, after apple.com/apple-watch-series-12, in the page's light colors, with our four features: pills on the left (the open one becomes a card with its title and line), up/down arrows, and that feature's live scene on the right, sliding in from the right as it opens. */ .cl-s { padding: 24px 0 112px; } .cl-in { --pad: 64px; padding: 0 var(--pad); } .cl-panel { position: relative; height: min(86vh, 860px); min-height: 620px; overflow: hidden; border-radius: 32px; background: var(--card); } /* Each scene is centered between the open title's chevron and the panel's right edge (--l, set by script). All four are drawn at one scale from a --rw wide box: the room beside the longest title, less the text's inset on both sides. */ .cl-vis { position: absolute; inset: 0; } .cl-st { position: absolute; inset: 0 0 0 var(--l, 38%); display: flex; opacity: 0; visibility: hidden; transform: translateX(80px); transition: opacity 0.45s ease, transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.45s; } .cl-st.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .cl-st .fc-st { flex: none; align-items: center; justify-content: center; width: var(--rw, 50%); height: auto; min-height: 0; margin: 0 auto; } .cl-st .fc-in { transform-origin: center center; } /* The shared 430px design window, as in the carousel and showcase. */ .cl-st .ab-body { height: 360px; } .cl-st .sd { height: 430px; } .cl-st .sd .pho { --pw: 198.5px; } /* Send, here: the whole Activity Builder window (not cut off) with room to breathe, and the lock-screen stack to its right. */ .cl-st [data-take="send"] { width: 725px; } .ft-s .cl-st .sd .ab-clip { left: 0; width: 400px; } /* The back phone is scaled to 0.85, so it sits 15px past the edge to line its visible right edge up with the frame. */ .ft-s .cl-st .sd .pho:not(.bk) { right: 69px; } .ft-s .cl-st .sd .pho.b1 { top: -10.75px; right: 41px; } .ft-s .cl-st .sd .pho.b2 { top: -21.5px; right: 13px; } .ft-s .cl-st .sd .pho.b3 { top: -32.25px; right: -15px; } .cl-st .lhc { --pw: 150px; align-items: center; } .cl-st .lhc .pho.lh-pho { --pw: 150px; } .cl-st .lhc .lh-ll { height: 410px; } /* Watch, here: drawn wider so LiveLine has room, with a wider side panel so her camera is bigger and the name and sessions sit on one line. */ .cl-st [data-take="watch"] { width: 760px; } /* Build, here: the Activity Builder drawn a little wider than in the tiles. */ .cl-st [data-take="build"] { width: 650px; } .cl-st .lhc .lh-body { grid-template-columns: minmax(0, 1fr) 30cqi; } .cl-st [data-take="review"] .mw { display: flex; flex-direction: column; height: 430px; } .cl-st .pb-c { flex: 1 1 auto; height: auto; } /* Left side: the four features as one numbered list, every title the same size in the showcase's light headline font; the open one black with its line unfolding beneath it, the rest gray. */ /* The whole list, titles and the open line together, stays centered top to bottom in the panel whichever item is open. */ .cl-side { position: absolute; top: 50%; left: 64px; z-index: 3; width: min(380px, 29%); translate: 0 -50%; } .cl-it { position: relative; } .cl-it + .cl-it { margin-top: 44px; } .cl-q { display: flex; align-items: baseline; gap: 0; width: 100%; padding: 0; border: 0; background: none; font: 360 clamp(24px, 2.5vw, 38px)/1.1 var(--site); letter-spacing: -0.03em; color: rgba(20, 20, 19, 0.32); text-align: left; white-space: nowrap; cursor: pointer; transition: color 0.3s; } .cl-q:hover { color: rgba(20, 20, 19, 0.6); } /* The open title gets a right-pointing chevron just after its text, which slides in from the left; all titles and lines keep one left edge. */ .cl-arr { display: inline-block; width: 0; height: 0.5em; margin-left: 0; vertical-align: 0.04em; opacity: 0; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; } .cl-it.on .cl-arr { width: 0.5em; margin-left: 0.3em; opacity: 1; } .cl-it.on .cl-q { color: #141413; } .cl-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); } .cl-a > div { overflow: hidden; } .cl-a p { padding: 18px 8px 6px 0; font: 400 15px/1.55 var(--site); color: rgba(20, 20, 19, 0.5); } .cl-it.on .cl-a { grid-template-rows: 1fr; } @media (max-width: 1099px) { .cl-in { --pad: 48px; } .cl-side { left: 44px; } } @media (max-width: 899px) { .cl-panel { display: flex; flex-direction: column; height: auto; min-height: 0; } .cl-vis { position: relative; inset: auto; width: 100%; height: 420px; overflow: hidden; } .cl-st { inset: 0; } .cl-st .fc-st { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; } .cl-side { position: relative; top: auto; left: auto; width: auto; padding: 8px 24px 28px; translate: none; } .cl-q { font-size: 30px; } } @media (max-width: 639px) { .cl-s { padding: 16px 0 72px; } .cl-in { --pad: 24px; } .cl-panel { border-radius: 24px; } .cl-vis { height: 340px; } .cl-side { padding: 4px 18px 16px; } .cl-it + .cl-it { margin-top: 28px; } .cl-q { font-size: 25px; } .cl-a p { padding-top: 10px; font-size: 14px; } } /* Parking lot: a highlighter band, edge to edge, under the lineup; everything below it is parked. */ .pk { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; background: #ffe94d; font: 600 14px/1 var(--site); letter-spacing: 0.24em; text-transform: uppercase; color: #141413; } /* About 240px clear above and below (140px on phones), counting the lineup's bottom padding and the statement's top padding. */ .pk-w { margin: 128px 0 176px; } @media (max-width: 639px) { .pk { height: 48px; font-size: 13px; letter-spacing: 0.2em; } .pk-w { margin: 68px 0 92px; } } /* Lineup controls, after apple.com/ipad-air's gallery: a frosted gray pill of dots (the active one a capsule that fills over the card's 9 s while playing) and a round play, pause and replay button beside it. */ .lu-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; padding: 0 16px; } .lu-dots, .lu-pp { background: rgba(210, 210, 215, 0.64); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); } .lu-dots { display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 20px; border-radius: 999px; } .lu-dot { display: grid; place-items: center; height: 32px; padding: 0 6px; border-radius: 99px; cursor: pointer; } .lu-dot span { position: relative; display: block; width: 8px; height: 8px; overflow: hidden; border-radius: 99px; background: rgba(0, 0, 0, 0.42); transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s; } .lu-dot:hover span { background: rgba(0, 0, 0, 0.6); } .lu-dot[aria-current="true"] span { width: 48px; background: rgba(0, 0, 0, 0.24); } .lu-dot i { position: absolute; inset: 0; border-radius: inherit; background: #1d1d1f; transform: scaleX(var(--p, 0)); transform-origin: left center; } .lu-pp { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; color: #1d1d1f; cursor: pointer; transition: background-color 0.2s; } .lu-pp:hover { background: rgba(200, 200, 205, 0.8); } .lu-pp svg { display: none; width: 22px; height: 22px; fill: currentColor; } .lu-pp[data-state="paused"] .lu-i-play, .lu-pp[data-state="playing"] .lu-i-pause, .lu-pp[data-state="ended"] .lu-i-replay { display: block; } .lu-pp .lu-i-replay { fill: none; } /* C2 (intro left): back and next arrows in place of play and pause. */ .lu-nbs { display: flex; gap: 8px; } .lu-nb { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: rgba(210, 210, 215, 0.64); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); color: #1d1d1f; cursor: pointer; transition: background-color 0.2s, opacity 0.2s; } .lu-nb:hover { background: rgba(200, 200, 205, 0.8); } .lu-nb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .lu-nb[aria-disabled="true"] { opacity: 0.4; cursor: default; } .lu-nb[aria-disabled="true"]:hover { background: rgba(210, 210, 215, 0.64); } .lu-nb:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; } @media (max-width: 639px) { .lu-nb { width: 44px; height: 44px; } .lu-nb svg { width: 18px; height: 18px; } } /* The greige lineup: the band runs edge to edge, the cards are white, and the controls turn a frosted white so they read on the greige. */ .lu-s.lu-inv { background: #efede8; } .lu-inv .lu-card { background: #fff; } .lu-inv .lu-dots, .lu-inv .lu-pp { background: rgba(255, 255, 255, 0.78); } .lu-inv .lu-pp:hover { background: rgba(255, 255, 255, 0.95); } .fc-in.frz, .fc-in.frz *, .fc-in.frz *::before, .fc-in.frz *::after { animation-play-state: paused !important; } .lu-dot:focus-visible, .lu-pp:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; } /* The lineup with its intro on the left, after meta.ai's Restyle rooms row (wide windows): the intro at the left, its top level with the cards' copy, a wide gap, then the cards running off the right edge with the next one peeking. Narrower, the intro sits above the row as a section heading. */ /* The dots and arrows sit under the intro on wide windows; narrower, the intro opens up (display: contents) so they can follow the row. */ .lu-sd .lu-ctl { order: 2; } @media (max-width: 1199px) { .lu-sd-w { display: flex; flex-direction: column; } .lu-intro { display: contents; } .lu-intro > .lu-t, .lu-intro > .lu-p { padding: 0 24px; } .lu-intro > .lu-p { margin-bottom: 36px; } .lu-sd .lu-in { order: 1; } } @media (max-width: 1023px) { .lu-intro > .lu-t, .lu-intro > .lu-p { padding: 0 16px; } } .lu-intro .lu-p { max-width: 520px; } /* C2's cards in a neutral light gray, not the warm card tone. */ .lu-sd .lu-card { background: #f7f7f8; } /* C2's headlines (the intro and every card title) a size down; the walkthrough laid out like it matches. */ .lu-sd .lu-t, .dm-sd .lu-t { font-size: 34px; } @media (max-width: 899px) { .lu-sd .lu-t, .dm-sd .lu-t { font-size: 27px; } } /* C2's Build card: the program drafted by describing it to Claude through the Presage MCP, then the Activity Builder where more steps are dragged in. Both windows are the stage's full width and 280px tall. */ .lu-sd .lu-card [data-take="build"] .ab, .lu-sd .mcp { height: 280px; } .lu-sd .lu-card [data-take="build"] .ab-body { height: 210px; } .lu-sd .lu-card [data-take="build"] .ab-prog { padding-top: 12px; } .lu-sd .lu-card [data-take="build"] .ab-steps { gap: 4px; } .lu-sd .lu-card [data-take="build"] .ab-steps li { height: 30px; } .lu-sd .mcp { display: flex; flex-direction: column; margin-bottom: 14px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05), 0 22px 48px -18px rgba(0, 0, 0, 0.24); font-family: var(--sf); color: #1d1d1f; } .lu-sd .mcp-bar { display: flex; flex: none; align-items: center; gap: 5px; height: 28px; padding: 0 12px; background: #f7f7f7; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font: 600 11px/1 var(--sf); } .lu-sd .mcp-bar i { width: 7px; height: 7px; border-radius: 50%; background: #dcdcdf; } .lu-sd .mcp-bar b { margin-left: 8px; font-weight: 600; } .lu-sd .mcp-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px; border-radius: 99px; background: rgba(173, 32, 41, 0.08); font: 600 10px/1 var(--sf); color: var(--accent); } .lu-sd .mcp-tag svg { width: 10px; height: 10px; stroke-width: 2.4; } .lu-sd .mcp-body { display: flex; flex: 1; flex-direction: column; gap: 7px; padding: 12px 14px; } .lu-sd .mcp-me { align-self: flex-end; max-width: 80%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #f2f2f4; font: 400 12px/1.4 var(--sf); } .lu-sd .mcp-tool { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1.3 var(--sf); color: var(--l2); } .lu-sd .mcp-tool svg { flex: none; width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--accent); color: #fff; stroke-width: 3; } .lu-sd .mcp-card { width: 62%; padding: 9px 10px 6px; border-radius: 10px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.13), 0 1px 2px rgba(0, 0, 0, 0.05); } .lu-sd .mcp-ct { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; font: 400 10.5px/1.2 var(--sf); color: var(--l2); } .lu-sd .mcp-ct b { font: 700 12.5px/1.2 var(--sf); letter-spacing: -0.01em; color: #1d1d1f; } .lu-sd .mcp-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(60, 60, 67, 0.12); font: 500 11.5px/1.2 var(--sf); } .lu-sd .mcp-row svg { width: 13px; height: 13px; color: var(--accent); stroke-width: 2; } .lu-sd .mcp-row em { margin-left: auto; font-style: normal; font-weight: 400; color: var(--l2); } .lu-sd .mcp-ai { font: 400 12px/1.4 var(--sf); color: #1d1d1f; } /* The Claude window plays first, line by line; the builder waits, dimmed and empty, until the draft lands in it. */ .lu-sd .mcp-body > * { transition: opacity 0.35s ease, transform 0.5s var(--eoq); } /* C2's Between visits card, after the sales deck's first slide: the study timeline from the lab visit on day 1 to the one on day 30, with days 10 and 20 checked in from home, and her phone answering one of them. */ .btw { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--sf); } .btw-ar { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; animation: btw-flow 1.4s linear infinite; } @keyframes btw-flow { to { stroke-dashoffset: -16; } } .btw-halo { fill: none; stroke: rgba(173, 32, 41, 0.35); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: btw-halo 2.2s ease-out infinite; } @keyframes btw-halo { from { opacity: 1; transform: scale(0.7); } to { opacity: 0; transform: scale(1.6); } } .btw .pho.btw-pho { --pw: 196px; flex: none; } .btw-pho .pho-s { background: #fff; } .btw-ring { position: absolute; top: 15cqi; left: 50%; width: 76cqi; height: 76cqi; overflow: visible; translate: -50% 0; animation: lh-spin 14s linear infinite; } .btw-cam { position: absolute; top: 22cqi; left: 50%; width: 62cqi; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #ebe6de url(/site/media/p14.jpg) 50% 30% / 122% auto no-repeat; translate: -50% 0; } .btw-cam .lh-sweep { position: absolute; inset: 0; display: block; background: linear-gradient(180deg, rgba(255, 107, 117, 0) 0%, rgba(255, 107, 117, 0.22) 48%, rgba(255, 140, 150, 0.5) 50%, rgba(255, 107, 117, 0) 54%); background-size: 100% 220%; mix-blend-mode: screen; animation: lh-sweep 2.8s ease-in-out infinite alternate; } .btw-q { position: absolute; top: 104cqi; right: 7cqi; left: 7cqi; } /* Tracking: brackets on the forehead and cheeks pulse with her heartbeat, and the live reading sits under the camera. */ .btw-roi { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; } .btw-roi path { fill: none; stroke: #e5484d; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; animation: btw-beat 0.83s ease-out infinite; } @keyframes btw-beat { 0% { opacity: 0.95; } 70%, 100% { opacity: 0.45; } } .btw-bpm { position: absolute; top: 87cqi; left: 50%; z-index: 3; display: inline-flex; align-items: center; gap: 1.4cqi; padding: 1.6cqi 3cqi; border-radius: 99px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); box-shadow: 0 0.6cqi 2.4cqi rgba(0, 0, 0, 0.12); font: 500 3.6cqi/1 var(--sf); color: var(--l2); white-space: nowrap; translate: -50% 0; } .btw-bpm svg { width: 3.6cqi; height: 3.6cqi; color: #e5484d; fill: currentColor; stroke-width: 1.2; } .btw-bpm b { font-weight: 600; color: #000; font-variant-numeric: tabular-nums; } .btw-k { font: 400 3.4cqi/1.2 var(--sf); color: var(--l2); } .btw-qt { margin-top: 1.6cqi; font: 600 5.6cqi/1.2 var(--sf); letter-spacing: -0.01em; color: #000; } .btw-sc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqi; margin-top: 4.4cqi; } .btw-sc span { display: grid; place-items: center; height: 12cqi; border-radius: 2.6cqi; background: #efefef; font: 400 4.2cqi/1 var(--sf); color: #000; } .btw-sc .sel { background: var(--accent); font-weight: 600; color: #fff; } .btw-ends { display: flex; justify-content: space-between; margin-top: 2.2cqi; font: 400 3.2cqi/1 var(--sf); color: var(--l2); } .btw-next { position: absolute; right: 7cqi; bottom: 9cqi; left: 7cqi; padding: 3.6cqi; border-radius: 3.6cqi; background: var(--accent); font: 600 4.2cqi/1 var(--sf); text-align: center; color: #fff; } @media (prefers-reduced-motion: reduce) { .btw-ar, .btw-halo, .btw-ring, .btw-cam .lh-sweep, .btw-roi path { animation: none; } } /* The side-by-side take on the same card: the phone on the left and the timeline running down beside it, day 1 at the top. */ .btw.btw-side { flex-direction: row; justify-content: center; gap: 22px; height: 430px; } .btw-vt { flex: none; width: 230px; height: 430px; overflow: visible; } /* Under the phone: the camera reading is optional. */ .btw-pcol { display: flex; flex: none; flex-direction: column; align-items: center; gap: 12px; } .btw-side .pho.btw-pho { --pw: 180px; } .btw-cap { font: 500 12.5px/1.2 var(--sf); color: #77767c; white-space: nowrap; } .btw-vt text { font-family: var(--sf); } /* Lab visits in ink, home check-ins in red, each named by its day with a gray line under it; no pulse marks at the ends. */ .btw-vd { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; fill: #1d1d1f; } .btw-vd.red { fill: var(--accent); } .btw-vs { font-size: 11.5px; fill: #77767c; } /* Phones: the scene runs off the card's right edge, so it is drawn only as wide as the part that shows ((100vw - 90px) over the scale), keeping the phone and the timeline centered in view. */ @media (max-width: 639px) { .btw { width: min(calc((100vw - 90px) / var(--s, 1)), 540px); } .btw .pho.btw-pho { --pw: 168px; } .btw.btw-side { gap: 10px; } .btw-side .pho.btw-pho { --pw: 132px; } .btw-cap { max-width: var(--pw, 132px); font-size: 11px; white-space: normal; text-align: center; } .btw-pcol { --pw: 132px; } .btw-vt { width: 140px; height: 262px; } .btw-vd { font-size: 17px; } .btw-vs { font-size: 14px; } } @media (max-width: 379px) { .btw-pcol { --pw: 120px; } .btw-side .pho.btw-pho { --pw: 120px; } .btw-vt { width: 128px; height: 239px; } } .lu-sd .mcp-body > .off { opacity: 0; transform: translateY(6px); } .lu-sd .mcp-cmp { display: flex; align-items: center; gap: 8px; margin-top: auto; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: box-shadow 0.2s; } .lu-sd .mcp-cmp.on { box-shadow: inset 0 0 0 1.5px rgba(173, 32, 41, 0.45); } /* Left to right, scrolled to its end by script as it types, so the letters never shift. */ .lu-sd .mcp-in { flex: 1; min-width: 0; overflow: hidden; font: 400 11.5px/16px var(--sf); white-space: nowrap; } .lu-sd .mcp-in:empty::before { content: attr(data-mcp-ph); color: rgba(60, 60, 67, 0.45); } .lu-sd .mcp-cmp.on .mcp-in::after { content: ''; display: inline-block; width: 1px; height: 13px; margin-left: 1px; background: #1d1d1f; vertical-align: -2px; animation: caret 1s steps(1) infinite; } .lu-sd .mcp-send { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); color: #fff; transition: background-color 0.2s, transform 0.12s var(--mat); } .lu-sd .mcp-cmp.full .mcp-send { background: var(--accent); } .lu-sd .mcp-send.press { transform: scale(0.88); } .lu-sd .mcp-send svg { width: 13px; height: 13px; stroke-width: 2.6; } .lu-sd .mcp-tool.busy svg { display: none; } .lu-sd .mcp-tool.busy span::after { content: '…'; } .lu-sd [data-take="build"] .ab { transition: opacity 0.4s ease; } .lu-sd [data-take="build"] .ab.wait { opacity: 0.45; } .lu-sd [data-take="build"] .ab-steps li.off { opacity: 0; } .lu-red { color: var(--accent); } .lu-sd .lu-in { position: relative; } @media (min-width: 1200px) { .lu-sd-w { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: center; column-gap: clamp(56px, 6vw, 110px); padding-left: max(24px, min(7vw, calc((100vw - 1280px) / 2 + 24px))); } /* The intro's top lines up with the cards' copy: the card's 50px padding. */ .lu-intro { align-self: start; margin: 0; padding: 50px 0 0; } .lu-sd .lu-ctl { justify-content: flex-start; margin-top: 36px; padding: 0; } .lu-sd .lu-in { --pad: 0px; } .lu-sd .lu-track { padding-right: 24px; } .lu-sd .lu-card { width: calc(100% - 120px); } } @media (max-width: 639px) { .lu-ctl { gap: 10px; margin-top: 24px; } .lu-dots { height: 44px; padding: 0 14px; } .lu-dot { height: 28px; padding: 0 5px; } .lu-dot[aria-current="true"] span { width: 36px; } .lu-pp { width: 44px; height: 44px; } .lu-pp svg { width: 18px; height: 18px; } } /* Lineup: the showcase card at 70% of its size, the four side by side in a native horizontal scroller (trackpad and touch swipes glide and snap), half of the next one showing on the right. */ .lu-s { padding: 112px 0; overflow-x: clip; } /* The first card lines up with the video further down the page: its column is 1280px at most, centered, with 24px padding (16px under 1024px). */ .lu-in { --pad: max(24px, calc((100cqw - 1280px) / 2 + 24px)); container-type: inline-size; } .lu-track { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad); scrollbar-width: none; } .lu-track::-webkit-scrollbar { display: none; } /* 1.5 cards across, then 15% larger (about 1.3 showing); 100% is the window less both margins. */ .lu-card { position: relative; display: grid; flex: none; grid-template-columns: minmax(0, 258px) minmax(0, 1fr); gap: 36px; width: calc((100% + var(--pad) - 20px) * 0.7667); height: min(67.6vh, 660px); min-height: 483px; padding: 50px; overflow: hidden; border-radius: 28px; background: var(--card); scroll-snap-align: start; } .lu-card:not(.on) { cursor: pointer; } .lu-copy { display: flex; flex-direction: column; } .lu-t { font: 360 41px/1.04 var(--site); letter-spacing: -0.035em; color: #141413; } .lu-p { margin-top: 16px; font: 400 15px/1.5 var(--site); color: rgba(20, 20, 19, 0.5); } .lu-vis { display: flex; min-width: 0; min-height: 0; } .lu-vis .fc-st { flex: 1 1 auto; align-items: center; height: auto; min-width: 0; min-height: 0; margin: 0; } /* Nothing is cut at a stage's edge, so every window keeps its full edge, ring and shadow. Send's browser here is just the white Morning check-in panel, whole (logo and Send in its bar, no Steps palette), with the phone stack to its right inside the 540px stage. */ @media (min-width: 640px) { .ft-s .fc-snd .sd .ab-clip { left: 0; width: 240px; } .ft-s .fc-snd .sd .ab-clip .ab-body { grid-template-columns: minmax(0, 1fr); } .ft-s .fc-snd .ab-clip .ab-pal, .ft-s .fc-snd .ab-clip .ab-div, .ft-s .fc-snd .ab-clip .ab-head b, .ft-s .fc-snd .ab-clip .ab-sub { display: none; } .ft-s .fc-snd .sd .pho:not(.bk) { right: 75.5px; } .ft-s .fc-snd .sd .pho.b1 { right: 47.5px; } .ft-s .fc-snd .sd .pho.b2 { right: 19.6px; } .ft-s .fc-snd .sd .pho.b3 { right: -8.4px; } } .lu-vis .fc-in { transform-origin: center center; } /* The showcase's entrance for the first card once the row is in view: headline, line, then each window and phone, from the right (its parts wait where the entrance starts until then). Later cards don't move. */ @media (prefers-reduced-motion: no-preference) { .lu-in.fl .lu-card:first-child:not(.in) :is(.lu-t, .lu-p, .fc-in > .ab, .fc-in > .mcp, .fc-in > .mw, .sd > .ab-clip, .lhc > .lh-bw, .lhc > .lh-pho, .sd > .pho, .dsc > .dsc-pho) { opacity: 0; transform: translateX(140px); } .lu-card.in .lu-t { animation: sc-in 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.04s both; } .lu-card.in .lu-p { animation: sc-in 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both; } .lu-card.in .fc-in > .ab, .lu-card.in .fc-in > .mw, .lu-card.in .sd > .ab-clip, .lu-card.in .lhc > .lh-bw { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; } .lu-card.in .lhc > .lh-pho, .lu-card.in .sd > .pho:not(.bk), .lu-card.in .dsc > .dsc-pho, .lu-card.in .fc-in > .mcp { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.32s both; } .lu-card.in .sd > .pho.b1 { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both; } .lu-card.in .sd > .pho.b2 { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.48s both; } .lu-card.in .sd > .pho.b3 { animation: sc-in 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.56s both; } } /* The shared 430px design window, as in the showcase. */ .lu-card .ab-body { height: 360px; } .lu-card .sd { height: 430px; } .lu-card .sd .pho { --pw: 198.5px; } .ft-s .lu-card .sd .pho.b1 { top: -10.75px; } .ft-s .lu-card .sd .pho.b2 { top: -21.5px; } .ft-s .lu-card .sd .pho.b3 { top: -32.25px; } .lu-card .lhc { --pw: 150px; align-items: center; } .lu-card .lhc .pho.lh-pho { --pw: 150px; } .lu-card .lhc .lh-ll { height: 410px; } .lu-card [data-take="review"] .mw { display: flex; flex-direction: column; height: 430px; } .lu-card .pb-c { flex: 1 1 auto; height: auto; } /* Review here: Playback in the same window as LiveLine in the card before it (Watch it live), in the scene's own pixels at every width: the same left offset and width, 382px tall (a 20px bar and a 362px body), at the top, with the same corners and shadow. The stage keeps the 430px design height, so both windows sit at the same spot. */ .lu-card .fc-in[data-take="review"] { min-height: 430px; } .ft-s .lu-card [data-take="review"] .mw { width: 470px; height: 382px; margin-left: 0; border-radius: 12px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05), 0 28px 60px -18px rgba(0, 0, 0, 0.22); } @media (min-width: 640px) { .ft-s .lu-card [data-take="review"] .mw { margin-left: 70px; } } @media (min-width: 900px) { .ft-s .lu-card [data-take="review"] .mw { width: 610px; } } @media (max-width: 639px) { .ft-s .lu-card [data-take="review"] .mw { width: calc((100vw - 90px) / var(--s, 1) + 33px); margin-left: 40px; } } /* Side by side, the windows are drawn wider (680px design, not 540) and so a little shorter, to fill the visual column. */ @media (min-width: 900px) { .lu-vis .fc-st { --dw: 680; } .lu-card .fc-in:not(.m) { width: 680px; } .lu-card .dsc .dsc-lh { width: 610px; } .ft-s .lu-card .fc-snd .sd .ab-clip { width: 380px; } } @media (max-width: 1279px) { .lu-card { width: calc((100% + var(--pad) - 20px) * 0.92); } } @media (max-width: 1023px) { .lu-in { --pad: 16px; } } @media (max-width: 899px) { /* Every card gives its copy the height of the longest (--lu-copy, set by script), so the scenes below share one area card to card. */ .lu-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--lu-copy, auto) minmax(0, 1fr); gap: 20px; width: calc(100% - 72px); height: 600px; min-height: 0; padding: 32px 28px; } .lu-t { font-size: 30px; } } @media (max-width: 639px) { .lu-s { padding: 80px 0 72px; } .lu-track { gap: 12px; } /* As the showcase card on phones: the headline, the line, then the scene at full size from the text's left edge, running off the card's right edge. */ .lu-card { gap: 16px; width: calc(100% - 36px); height: min(86svh, 720px); min-height: 560px; padding: 28px 22px; border-radius: 24px; } .lu-t { font-size: 30px; } .lu-p { margin-top: 12px; font-size: 14px; } /* Scenes are centered top to bottom in that shared area, so their tops and bottoms line up card to card. */ .lu-vis .fc-st { flex: none; align-items: center; width: 540px; } .lu-vis .fc-in { transform-origin: left center; } /* Send (here and in the showcase): a short browser at the top left of the 430px design window, just Morning check-in, its status line and Send in one row (the window's head and body flattened into one grid, 71px tall). The phone stack comes up to meet it without overlapping: from 24px under it to the window's bottom (the browser's bottom on the card before), against the card's right edge (12px off it), the back phones fanned out to the left with their tops level (their scale is 0.95, 0.9, 0.85). The card's right edge, in the scene's own pixels, is the window width less the margins (90px here, 70px in the showcase) over the scale. */ .ft-s .fc-snd .sd .ab-clip { top: 0; left: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 240px; } .ft-s .fc-snd .ab-clip .ab-bar { grid-column: 1 / -1; height: 20px; } .ft-s .fc-snd .ab-clip .ab-head, .ft-s .fc-snd .ab-clip .ab-body, .ft-s .fc-snd .ab-clip .ab-prog { display: contents; } .ft-s .fc-snd .ab-clip .ab-logo, .ft-s .fc-snd .ab-clip .ab-div, .ft-s .fc-snd .ab-clip .ab-head b, .ft-s .fc-snd .ab-clip .ab-sub, .ft-s .fc-snd .ab-clip .ab-kv, .ft-s .fc-snd .ab-clip .ab-pal { display: none; } .ft-s .fc-snd .ab-clip .ab-t { grid-column: 1; grid-row: 2; padding: 11px 0 0 14px; font-size: 14px; } .ft-s .fc-snd .ab-clip .ab-m { grid-column: 1; grid-row: 3; margin: 0; padding: 4px 0 11px 14px; font-size: 11px; white-space: nowrap; } .ft-s .fc-snd .ab-clip .ab-save { grid-column: 2; grid-row: 2 / 4; gap: 4px; height: 26px; margin: 0 12px 0 8px; padding: 0 11px; border-radius: 7px; font-size: 11.5px; } .ft-s .fc-snd .ab-clip .ab-save svg { width: 11px; height: 11px; } .ft-s .fc-snd .sd .pho { --pw: 154.6px; right: auto; } .ft-s .fc-snd .sd .pho:not(.bk) { top: 95px; } .ft-s .fc-snd .sd .pho.b1 { top: 86.63px; } .ft-s .fc-snd .sd .pho.b2 { top: 78.25px; } .ft-s .fc-snd .sd .pho.b3 { top: 69.87px; } /* Only their edges show on the left, so the back phones skip the banner. */ .ft-s .fc-snd .sd .pho.bk .lk-n { visibility: hidden; } .ft-s .lu-vis .fc-snd .sd .pho:not(.bk) { left: calc((100cqw - 90px) / var(--s, 1) - 142.6px); } .ft-s .lu-vis .fc-snd .sd .pho.b1 { left: calc((100cqw - 90px) / var(--s, 1) - 161.47px); } .ft-s .lu-vis .fc-snd .sd .pho.b2 { left: calc((100cqw - 90px) / var(--s, 1) - 180.33px); } .ft-s .lu-vis .fc-snd .sd .pho.b3 { left: calc((100cqw - 90px) / var(--s, 1) - 199.2px); } .ft-s .sc-vis .fc-snd .sd .pho:not(.bk) { left: calc((100cqw - 70px) / var(--s, 1) - 142.6px); } .ft-s .sc-vis .fc-snd .sd .pho.b1 { left: calc((100cqw - 70px) / var(--s, 1) - 161.47px); } .ft-s .sc-vis .fc-snd .sd .pho.b2 { left: calc((100cqw - 70px) / var(--s, 1) - 180.33px); } .ft-s .sc-vis .fc-snd .sd .pho.b3 { left: calc((100cqw - 70px) / var(--s, 1) - 199.2px); } } /* Discover: LiveLine, and the Coherence app on a phone in front of it with the program under For today. A tap on Start opens the camera check-in, and her live traces start at LiveLine's playhead (left of the phone). Same 430px design window. */ .dsc { position: relative; height: 430px; } .dsc .dsc-lh { position: absolute; top: 0; left: 0; display: block; width: 470px; } .dsc .lhc .lh-ll { height: 362px; } /* Like the hero (01), at every width: the hero's five lanes and colors (heart rate, breathing, HRV, then expression and blinking as dots), each name level with its line and spaced evenly right of the playhead (set by script), and a side panel with her camera full width and previous sessions. Wider screens put the phone over LiveLine's left edge; phones too, with a smaller phone and the panel half off the card's edge. */ .dsc .lh-body { grid-template-columns: minmax(0, 1fr) 27%; } .dsc-lh .lh-live, .dsc-lh .lh-key small, .dsc-cam canvas { transition: opacity 0.4s; } .dsc-lh.wait .lh-live, .dsc-lh.wait .lh-key small, .dsc-lh.wait .dsc-cam canvas { opacity: 0; } .dsc-lh .lh-key { right: auto; left: calc(80% + 8px); } .dsc-lh .lh-key, .dsc-lh .lh-key small { font-size: max(1.45cqi, 9px); } .dsc-lh .lh-key:nth-of-type(1) { top: 31%; } .dsc-lh .lh-key:nth-of-type(2) { top: 52.5%; } .dsc-lh .lh-key:nth-of-type(3) { top: 71%; } .dsc-lh .lh-key:nth-of-type(4) { top: 84%; } .dsc-lh .lh-key:nth-of-type(5) { top: 93%; } .dsc-side .lh-who { flex-direction: column; align-items: flex-start; gap: 2px; } .dsc-side .lh-who b, .dsc-side .lh-who span { white-space: nowrap; } .dsc-side .lh-cam { width: 100%; } .dsc-side .lh-ah { margin-top: 12px; } .dsc-side .lh-prev { gap: 7px; margin-top: 7px; } .dsc-side .lh-prev li { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr; column-gap: 7px; row-gap: 2px; padding: 0; } .dsc-side .lh-prev li + li::before { display: none; } .dsc-side .lh-prev li::after { content: ''; grid-area: 1 / 3 / -1 / 4; align-self: center; width: 4px; height: 4px; margin-right: 3px; border-top: 1.2px solid #c7c7cc; border-right: 1.2px solid #c7c7cc; rotate: 45deg; } .dsc-side .lh-prev li b { grid-area: 2 / 2; } .dsc-side .lh-prev li span { grid-area: 3 / 2; } .dsc-side .lh-prev i { position: relative; grid-area: 1 / 1 / -1 / 2; width: 36px; height: auto; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 5px; background: #f5f5f7; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); } .dsc-side .lh-prev i svg { width: 100%; height: 100%; margin: 0; } @media (min-width: 640px) { .dsc .dsc-lh { left: 70px; } .dsc .pho.dsc-pho { right: auto; left: 0; } } .dsc .pho.dsc-pho { --pw: 164px; position: absolute; right: 0; bottom: 0; } .dsc .pho-s { background: #fff; } .dsc-home, .dsc-run { position: absolute; inset: 0; transition: transform 0.55s var(--mat), opacity 0.45s; } .dsc-home { display: flex; flex-direction: column; padding: 17cqi 5cqi 9cqi; } .dsc-home.out { opacity: 0; transform: translateX(-30%); } .dsc-run { z-index: 3; background: #fff; transform: translateX(100%); } .dsc-run.on { transform: none; } .dsc-d { font: 600 3.6cqi/1 var(--sf); letter-spacing: 0.02em; text-transform: uppercase; color: var(--l2); } .dsc-h { margin-top: 1.8cqi; font: 700 9.4cqi/1 var(--sf); letter-spacing: -0.02em; color: #000; } .dsc-pg { margin-top: 5cqi; overflow: hidden; border-radius: 5cqi; background: #f5f5f7; } .dsc-pt { display: flex; align-items: center; gap: 3cqi; padding: 4.4cqi 4.4cqi 3.6cqi; } .dsc-pt i { display: grid; flex: none; place-items: center; width: 9.5cqi; height: 9.5cqi; border-radius: 2.6cqi; background: var(--accent); color: #fff; } .dsc-pt i svg { width: 6cqi; height: 6cqi; stroke-width: 2.4; } .dsc-pt b { display: block; font: 600 5.2cqi/1.1 var(--sf); letter-spacing: -0.01em; } .dsc-pt small { display: block; margin-top: 1.2cqi; font: 400 3.8cqi/1 var(--sf); color: var(--l2); } .dsc-st li { display: flex; align-items: center; gap: 2.8cqi; margin-left: 4.4cqi; padding: 3.2cqi 4.4cqi 3.2cqi 0; border-top: 0.5px solid rgba(60, 60, 67, 0.16); font: 400 4.4cqi/1 var(--sf); } .dsc-st svg { width: 4.6cqi; height: 4.6cqi; color: #1d1d1f; } .dsc-st b { flex: 1; font-weight: 500; } .dsc-st em { font-style: normal; color: var(--l2); } .dsc-go { margin-top: auto; padding: 3.9cqi; border-radius: 3.6cqi; background: var(--accent); font: 600 max(4.3cqi, 9px)/1 var(--sf); letter-spacing: -0.01em; text-align: center; color: #fff; transition: transform 0.12s var(--mat); } .dsc-go.press { transform: scale(0.96); } /* Like the hero's phone: all white, her camera in a circle with a turning ring of dots and a scan band, the step below it. */ .dsc .lh-pc { top: 24cqi; right: auto; left: 50%; width: 62cqi; height: auto; aspect-ratio: 1; border-radius: 50%; translate: -50% 0; } .dsc .lh-pc::after, .dsc .lh-rec, .dsc .lh-bpm { display: none; } .dsc .lh-pc video { object-position: 50% 30%; transform: scale(1.22); transform-origin: 50% 36%; } .dsc .dsc-ring { position: absolute; top: 18.25cqi; left: 50%; z-index: 2; width: 73.5cqi; height: 73.5cqi; overflow: visible; translate: -50% 0; pointer-events: none; animation: lh-spin 14s linear infinite; } .dsc .lh-sweep { position: absolute; inset: 0; z-index: 1; display: block; background: linear-gradient(180deg, rgba(255, 107, 117, 0) 0%, rgba(255, 107, 117, 0.22) 48%, rgba(255, 140, 150, 0.5) 50%, rgba(255, 107, 117, 0) 54%); background-size: 100% 220%; mix-blend-mode: screen; animation: lh-sweep 2.8s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .dsc .dsc-ring, .dsc .lh-sweep { animation: none; } } /* The question below her camera, as on the hero's phone: all white, answers as pills. */ .dsc .lh-q { inset: 100cqi 0 0; border-radius: 0; background: #fff; box-shadow: none; } .dsc .lh-q::before { display: none; } .dsc .lh-opts { gap: 2cqi; overflow: visible; border-radius: 0; background: none; } .dsc .lh-opts span { padding: 3.4cqi 4.4cqi; border-radius: 99px; background: var(--fill); text-align: center; } .dsc .lh-opts span + span::before { display: none; } .dsc .lh-opts .sel { background: var(--accent); font-weight: 600; color: #fff; } .dsc-sh { position: absolute; inset: 100cqi 0 0; display: flex; flex-direction: column; padding: 6cqi 6cqi 10cqi; background: #fff; } .dsc-k { font: 600 3.6cqi/1 var(--sf); color: var(--l2); } .dsc-t { margin-top: 2cqi; font: 700 6.2cqi/1.1 var(--sf); letter-spacing: -0.01em; } .dsc-s { margin-top: 2cqi; font: 400 4cqi/1.35 var(--sf); color: var(--l2); } .dsc-bar { position: relative; height: 1.6cqi; margin-top: auto; overflow: hidden; border-radius: 99px; background: var(--fill); } .dsc-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); } .dsc-run.on .dsc-bar i { width: 100%; transition: width 7s linear 0.6s; } @media (max-width: 639px) { /* On phones, where the scene runs off the card's right edge: a smaller phone over LiveLine's bottom left corner, a narrower LiveLine whose chart, names and then side panel (about half of it showing) fit the card's width. */ /* LiveLine's width follows the screen so the card's right edge cuts the side panel just after "Fri, Oct 2": the card's edge sits at (100vw - 90px) / scale in the scene's pixels, and "Oct 2" ends 87px into the panel. */ .dsc .dsc-lh { left: 40px; width: calc((100vw - 90px) / var(--s, 1) + 33px); } .dsc .pho.dsc-pho { --pw: 112px; right: auto; left: 0; } .dsc .lh-body { grid-template-columns: minmax(0, 1fr) 150px; } .dsc-side .lh-cam { width: 68%; } } /* Phones: titles and copy left-aligned instead of centered (hero, feature intro, use cases and its pills, video, pricing, guides, get started). */ @media (max-width: 599px) { .ht, .ft-h, .pr-h, .gd, .gs, .uc-l { align-items: flex-start; text-align: left; } .uc-l .h2, .vd-s .h2 { text-align: left; } .pills, .pr { align-items: flex-start; justify-content: flex-start; } .gs-cta { justify-content: flex-start; } } /* The phones in 01 (hero) and 02 (Discover, Watch it live): type in real iOS proportions, scaled with the screen (100cqi wide) and no px floors, so it stays small and crisp on narrow screens. Title semibold with slight negative tracking, body and buttons about 4cqi, kicker and end labels 3.2cqi. */ :is(.hx .lh-pho, .dsc-pho) .pho-s { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :is(.hx .lh-pho, .dsc-pho) .psb { font: 600 4.4cqi/1 var(--sf); letter-spacing: -0.01em; } :is(.hx .lh-pho, .dsc-pho) .lh-qk { gap: 1cqi; font: 400 3.2cqi/1.2 var(--sf); letter-spacing: 0; } :is(.hx .lh-pho, .dsc-pho) .lh-qk svg { width: 3.2cqi; height: 3.2cqi; } :is(.hx .lh-pho, .dsc-pho) .lh-qt { margin-top: 1.4cqi; font: 600 5.2cqi/1.22 var(--sf); letter-spacing: -0.015em; text-wrap: balance; } :is(.hx .lh-pho, .dsc-pho) .lh-sc span, :is(.hx .lh-pho, .dsc-pho) .lh-opts span { font: 400 4cqi/1 var(--sf); letter-spacing: -0.01em; } :is(.hx .lh-pho, .dsc-pho) .lh-sc .sel, :is(.hx .lh-pho, .dsc-pho) .lh-opts .sel { font-weight: 600; } :is(.hx .lh-pho, .dsc-pho) .lh-ends { font: 400 3.2cqi/1 var(--sf); } :is(.hx .lh-pho, .dsc-pho) .lh-next { padding: 3.6cqi; font: 600 4cqi/1 var(--sf); letter-spacing: -0.01em; } /* Walkthrough, after a product demo card: pill tabs pick a check-in, and one big soft card holds the phone running it beside the step count, a line on what is happening, and player controls. */ .dm-s { --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif; --l2: rgba(60, 60, 67, 0.6); --fill: rgba(118, 118, 128, 0.12); padding: 8px 0 112px; } .dm-tabs { display: flex; gap: 2px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 5px; overflow-x: auto; border-radius: 999px; background: #f1f1f3; scrollbar-width: none; } .dm-tabs::-webkit-scrollbar { display: none; } .dm-tab { flex: none; height: 46px; padding: 0 26px; border-radius: 999px; font: 400 17px/1 var(--site); letter-spacing: -0.01em; color: #1d1d1f; white-space: nowrap; transition: background-color 0.2s, box-shadow 0.2s; } .dm-tab:hover { background: rgba(0, 0, 0, 0.04); } .dm-tab.on { background: #fff; box-shadow: 0 0 0 2.5px #2f66d8, 0 2px 8px rgba(0, 0, 0, 0.08); } .dm-tab:focus-visible { outline-offset: -2px; } .dm-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 88px; margin-top: 32px; padding: 56px 64px; overflow: hidden; border-radius: 36px; background: radial-gradient(70% 60% at 14% 8%, #fff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #f8f8f9 0%, #f1f2f4 55%, #e8eaee 100%); } .dm-ph { justify-self: end; } .dm-s .pho { --pw: 290px; padding: calc(var(--pw) * 0.03); border-radius: calc(var(--pw) * 0.16); background: linear-gradient(150deg, #ebebee 0%, #d0d0d6 55%, #e1e1e5 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 30px 60px -24px rgba(23, 23, 23, 0.28), 0 2px 6px rgba(23, 23, 23, 0.08); } .dm-s .pho-s { border-radius: calc(var(--pw) * 0.138); background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); font-family: var(--sf); color: #000; -webkit-font-smoothing: antialiased; } .dm-s .psb { font: 600 4.4cqi/1 var(--sf); letter-spacing: -0.01em; } .dm-cap { max-width: 540px; } .dm-k0 { font: 500 13px/1 var(--site); letter-spacing: 0.1em; text-transform: uppercase; color: #6e6e73; font-variant-numeric: tabular-nums; } .dm-p { min-height: 6.4em; margin-top: 18px; font: 400 22px/1.6 var(--site); letter-spacing: -0.01em; color: #4a4a4f; text-wrap: pretty; } .dm-ctl { display: flex; align-items: center; gap: 14px; margin-top: 40px; } .dm-b { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #1d1d1f; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.08); transition: transform 0.15s; } .dm-b:hover { transform: scale(1.05); } .dm-b svg { display: block; width: 20px; height: 20px; fill: currentColor; } .dm-b .dm-i-rp { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .dm-pp svg { display: none; } .dm-pp[data-state="playing"] .dm-i-pause, .dm-pp[data-state="paused"] .dm-i-play { display: block; } .dm-trk { position: relative; flex: 0 1 200px; height: 6px; margin-left: 10px; overflow: hidden; border-radius: 99px; background: rgba(0, 0, 0, 0.1); } .dm-trk i { position: absolute; inset: 0; border-radius: inherit; background: #1d1d1f; transform: scaleX(var(--p, 0)); transform-origin: left center; } .dm-tm { font: 400 15px/1 var(--site); color: #6e6e73; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Paused: everything in the card holds still, readings included. */ .dm-card.frz *, .dm-card.frz *::before, .dm-card.frz *::after { animation-play-state: paused !important; } /* The walkthrough with its copy on the left, laid out as C2: the intro and the check-ins as a stacked picker in a 320px column, the card on the right. Narrower, the intro sits above the card. */ .dm-sd { padding: 112px 0; } .dm-sd-w { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; column-gap: clamp(56px, 6vw, 110px); padding: 0 24px 0 max(24px, min(7vw, calc((100vw - 1280px) / 2 + 24px))); } .dm-intro { padding-top: 56px; } /* The check-ins as separate pills that wrap, not one gray block. */ .dm-sd .dm-tabs { flex-wrap: wrap; gap: 8px; width: auto; max-width: none; margin: 28px 0 0; padding: 0; overflow: visible; border-radius: 0; background: none; } .dm-sd .dm-tab { height: 40px; padding: 0 18px; background: #f1f1f3; font-size: 15px; } .dm-sd .dm-tab:hover { background: #e8e8eb; } .dm-sd .dm-tab.on { background: #fff; } /* The card sits where C2's first card does: the same column, 120px in from the right (where C2's next card peeks), 50px padding, 28px corners. */ .dm-sd .dm-card { margin-top: 0; column-gap: 48px; padding: 50px; border-radius: 28px; background: #f7f7f8; } @media (min-width: 1200px) { .dm-sd .dm-card { margin-right: 120px; } } /* And C2's card height (two columns, 900px up): the phone sizes to fit the card's height less its padding. */ @media (min-width: 900px) { .dm-sd .dm-card { --ch: max(483px, min(67.6vh, 660px)); height: var(--ch); } .dm-sd .dm-card .pho { --pw: calc((var(--ch) - 100px) / 2.1667); } } .dm-sd .pho { --pw: 260px; } @media (max-width: 1199px) { .dm-sd-w { display: block; padding: 0 24px; } .dm-intro { padding: 0 0 28px; } } @media (max-width: 1023px) { .dm-sd-w { padding: 0 16px; } } @media (max-width: 899px) { .dm-sd .dm-card { padding: 32px 28px; } } @media (max-width: 639px) { .dm-sd { padding: 72px 0; } .dm-sd .dm-card { padding: 28px 22px; border-radius: 24px; } .dm-sd .pho { --pw: 232px; } } /* The phone's screens, iOS style; 100cqi is the screen's width. Each step pushes in from the right as the one before slides off left. */ .dm-scrs { position: absolute; inset: 0; overflow: hidden; } .dm-scrs.fade { animation: dm-fade 0.5s ease both; } @keyframes dm-fade { from { opacity: 0; } } .dm-scr { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 17cqi 6cqi 9cqi; background: #fff; transform: translateX(100%); transition: transform 0.55s var(--ios), opacity 0.45s ease; } .dm-scr.on { transform: none; } .dm-scr.past { opacity: 0; transform: translateX(-30%); } .dm-scrs.jump .dm-scr, .dm-scrs.jump .dm-scr * { transition: none !important; } .dm-scr .dsc-pg { opacity: 0; transform: translateY(4cqi) scale(0.97); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15); } .dm-scr .dsc-pg.in { opacity: 1; transform: none; } .dm-k { font: 600 3.6cqi/1 var(--sf); color: var(--l2); } .dm-t { margin-top: 2cqi; font: 700 8cqi/1.1 var(--sf); letter-spacing: -0.02em; } .dm-sub { margin-top: 5cqi; font: 400 4cqi/1.35 var(--sf); color: var(--l2); text-align: center; } .dm-bar { position: relative; height: 1.6cqi; margin-top: auto; overflow: hidden; border-radius: 99px; background: var(--fill); } .dm-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left center; } .dm-ends { display: flex; justify-content: space-between; margin-top: 2.4cqi; font: 400 3.4cqi/1 var(--sf); color: var(--l2); font-variant-numeric: tabular-nums; } /* Guided breathing: a soft circle that grows on the in-breath. */ .dm-orb { position: relative; display: grid; place-items: center; width: 72cqi; aspect-ratio: 1; margin: 14cqi auto 0; } .dm-orb i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(255, 140, 150, 0.5), rgba(127, 176, 224, 0.42) 68%, rgba(127, 176, 224, 0.12)); transform: scale(var(--o, 0.55)); } .dm-orb i::before { content: ''; position: absolute; inset: 16%; border-radius: 50%; background: rgba(255, 255, 255, 0.6); } .dm-orb span { position: relative; font: 600 5cqi/1 var(--sf); letter-spacing: -0.01em; color: #1d1d1f; } /* Short video: the clip with a play badge. */ .dm-vid { position: relative; aspect-ratio: 4 / 5; margin-top: 6cqi; overflow: hidden; border-radius: 4cqi; background: #e9eef3; } .dm-vid canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .dm-vp { position: absolute; bottom: 3cqi; left: 3cqi; display: grid; place-items: center; width: 9cqi; height: 9cqi; border-radius: 50%; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .dm-vp svg { width: 3.8cqi; height: 3.8cqi; margin-left: 0.4cqi; fill: #1d1d1f; } .dm-vid + .dm-sub { margin-top: 3cqi; text-align: left; } /* Camera check-in: her camera in a circle with the turning ring of dots and a scan band, then the three readings. */ .dm-cam { position: relative; width: 64cqi; aspect-ratio: 1; margin: 10cqi auto 0; } .dm-ring { position: absolute; inset: -9%; width: 118%; height: 118%; overflow: visible; animation: lh-spin 14s linear infinite; } .dm-pc { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: #ebe6de; } .dm-pc video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.22); transform-origin: 50% 36%; } .dm-sweep { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 107, 117, 0) 0%, rgba(255, 107, 117, 0.22) 48%, rgba(255, 140, 150, 0.5) 50%, rgba(255, 107, 117, 0) 54%); background-size: 100% 220%; mix-blend-mode: screen; animation: lh-sweep 2.8s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .dm-ring, .dm-sweep { animation: none; } } .dm-rd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqi; margin-top: 11cqi; } .dm-rd p { display: flex; flex-direction: column; gap: 1.8cqi; padding: 3cqi; border-radius: 3.4cqi; background: #f5f5f7; opacity: 0; transform: translateY(2cqi); transition: opacity 0.35s ease, transform 0.5s var(--eoq); } .dm-rd p:nth-child(2) { transition-delay: 0.08s; } .dm-rd p:nth-child(3) { transition-delay: 0.16s; } .dm-rd.on p { opacity: 1; transform: none; } .dm-rd small { display: flex; align-items: center; gap: 1.2cqi; font: 500 3.2cqi/1 var(--sf); color: var(--l2); white-space: nowrap; } .dm-rd small i { flex: none; width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: var(--c); } .dm-rd b { font: 600 5.6cqi/1 var(--sf); font-variant-numeric: tabular-nums; } .dm-rd b em { font-style: normal; } .dm-rd b span { margin-left: 0.6cqi; font: 500 3.2cqi/1 var(--sf); color: var(--l2); } .dm-ends .dm-ok { display: inline-flex; align-items: center; gap: 1.2cqi; color: #1f7a45; font-weight: 600; opacity: 0; transition: opacity 0.3s; } .dm-ends .dm-ok.on { opacity: 1; } .dm-ok svg { width: 3.4cqi; height: 3.4cqi; stroke-width: 2.8; } /* Survey: the question, a 1 to 10 scale, Done, and the saved note. */ .dm-qt { margin-top: 2.4cqi; font: 700 7.4cqi/1.15 var(--sf); letter-spacing: -0.02em; text-wrap: balance; } .dm-sc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqi; margin-top: 8cqi; } .dm-sc span { display: grid; place-items: center; aspect-ratio: 1.08; border-radius: 2.8cqi; background: var(--fill); font: 400 4.6cqi/1 var(--sf); font-variant-numeric: tabular-nums; transition: background-color 0.2s, color 0.2s; } .dm-sc .sel { background: var(--accent); font-weight: 600; color: #fff; } .dm-sv .dm-ends { margin-top: 2.8cqi; } .dm-saved { display: flex; align-items: center; gap: 2cqi; margin-top: 9cqi; padding: 3.4cqi 4cqi; border-radius: 3.6cqi; background: #edf7f0; font: 600 4.2cqi/1 var(--sf); color: #1f7a45; opacity: 0; transform: translateY(3cqi); transition: opacity 0.35s, transform 0.45s var(--eoq); } .dm-saved.on { opacity: 1; transform: none; } .dm-saved svg { width: 4.4cqi; height: 4.4cqi; stroke-width: 2.6; } .dm-next { margin-top: auto; padding: 3.9cqi; border-radius: 3.6cqi; background: var(--accent); font: 600 4.3cqi/1 var(--sf); letter-spacing: -0.01em; text-align: center; color: #fff; transition: transform 0.12s var(--mat); } .dm-next.press { transform: scale(0.96); } /* A plain iOS touch dot for the participant's taps. */ .dm-tap { position: absolute; top: 0; left: 0; z-index: 9; width: 11cqi; height: 11cqi; margin: -5.5cqi 0 0 -5.5cqi; border-radius: 50%; background: rgba(60, 60, 67, 0.24); opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s, left 0.45s var(--mat), top 0.45s var(--mat); pointer-events: none; } .dm-tap.on { opacity: 1; transform: none; } .dm-tap.on.dn { transform: scale(0.82); background: rgba(60, 60, 67, 0.34); } @media (max-width: 899px) { .dm-card { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding: 44px 32px 36px; } .dm-ph { justify-self: center; } .dm-s .pho { --pw: 252px; } .dm-cap { max-width: none; } .dm-p { min-height: 4.8em; font-size: 19px; } .dm-ctl { margin-top: 24px; } } @media (max-width: 639px) { .dm-s { padding-bottom: 72px; } .dm-tab { height: 40px; padding: 0 14px; font-size: 14px; } .dm-card { margin-top: 20px; padding: 32px 20px 28px; border-radius: 24px; } .dm-s .pho { --pw: 232px; } .dm-p { min-height: 6.4em; margin-top: 14px; font-size: 17px; } .dm-b { width: 44px; height: 44px; } .dm-b svg { width: 18px; height: 18px; } .dm-trk { flex: 1 1 auto; margin-left: 4px; } .dm-tm { font-size: 13px; } } /* Homepage tab: presagetech.com's current homepage, rebuilt in this study's x.ai language. The header's Homepage and eSSESSMENT tabs switch between the two pages; each numbers its own sections. */ /* Each tab's letter: sections are named by it (A3, B7) for review. */ .vt-l { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; background: rgba(20, 20, 19, 0.08); font: 600 10.5px/1 var(--site); color: #141413; } .on > .vt-l { background: #141413; color: #fff; } .mm-l .vt-l { margin-right: 10px; vertical-align: 2px; } .nav > a.on, .nav > div > button.on { box-shadow: inset 0 0 0 1px rgba(74, 71, 65, 0.22); } .hm { --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif; --l2: rgba(60, 60, 67, 0.6); --fill: rgba(118, 118, 128, 0.12); --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; } .hm-st { margin-top: 18px; font: 400 14px/20px var(--site); color: var(--muted); text-decoration: underline; text-decoration-color: rgba(125, 129, 135, 0.4); text-underline-offset: 3px; transition: color 0.15s; } .hm-st:hover { color: var(--fg); } .intro .hm-st { opacity: 0; } .intro.go .hm-st { animation: dn-in 1s var(--eoq) 0.75s both; } /* Hero visual: the iOS quick start in Xcode, and the same app running on a phone in front of it. */ .sk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; text-align: left; } .sk-ed { position: relative; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05), 0 28px 60px -18px rgba(0, 0, 0, 0.22); font-family: var(--sf); color: #1d1d1f; } .sk-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 14px; background: #f7f7f7; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font: 500 12px/1 var(--sf); color: var(--l2); white-space: nowrap; } .sk-bar > i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #dcdcdf; } .sk-bar b { margin-left: 14px; font-weight: 600; color: #1d1d1f; } .sk-bar .sk-f { display: inline-flex; align-items: center; gap: 6px; } .sk-bar .sk-f::before { content: ''; width: 1px; height: 14px; margin: 0 4px; background: rgba(0, 0, 0, 0.12); } .sk-run { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-left: auto; padding: 0 10px; border-radius: 99px; background: rgba(52, 199, 89, 0.12); font: 600 11.5px/1 var(--sf); color: #1f7a45; } .sk-run::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34c759; animation: blink 1.2s ease-in-out infinite; } .sk-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); } .sk-nav { padding: 14px 10px; background: #f7f7f7; border-right: 1px solid rgba(0, 0, 0, 0.07); } .sk-nav small { display: block; margin: 4px 8px 6px; font: 600 10.5px/1 var(--sf); letter-spacing: 0.02em; color: var(--l2); } .sk-nav small + p { margin-top: 0; } .sk-nav p { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; border-radius: 6px; font: 400 12.5px/1 var(--sf); white-space: nowrap; } .sk-nav p.on { background: rgba(0, 0, 0, 0.06); font-weight: 500; } .sk-nav p svg { flex: none; width: 13px; height: 13px; color: var(--l2); } .sk-nav p em { margin-left: auto; font-style: normal; color: var(--l2); } .sk-nav small:not(:first-child) { margin-top: 16px; } .sk-code { padding: 16px 16px 20px 0; overflow: hidden; counter-reset: ln; font: 400 13px/22px var(--mono); color: #1d1d1f; } .sk-code .l { position: relative; display: block; min-height: 22px; padding-left: 54px; white-space: pre; } .sk-code .l::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 34px; text-align: right; color: rgba(0, 0, 0, 0.24); } .sk-code .hl { background: rgba(173, 32, 41, 0.05); box-shadow: inset 2px 0 0 var(--accent); } .sk-code .k { position: static; left: auto; z-index: auto; transform: none; font: inherit; color: #9b2393; font-weight: 500; } .sk-code .t { color: #0b4f79; } .sk-code .p { color: #326d74; } .sk-code .s { color: #c41a16; } .sk-code .c { color: #5d6c79; } .sk-cur::after { content: ''; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; background: #1d1d1f; vertical-align: -3px; animation: caret 1s steps(1) infinite; } .sk .pho { --pw: 220px; z-index: 2; margin: 84px 0 0 -110px; padding: calc(var(--pw) * 0.03); border-radius: calc(var(--pw) * 0.16); background: linear-gradient(150deg, #ebebee 0%, #d0d0d6 55%, #e1e1e5 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 30px 60px -22px rgba(23, 23, 23, 0.3), 0 2px 6px rgba(23, 23, 23, 0.08); } .sk .pho-s { border-radius: calc(var(--pw) * 0.138); background: #f2f2f7; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); font-family: var(--sf); color: #000; -webkit-font-smoothing: antialiased; } .sk .psb { font: 600 4.4cqi/1 var(--sf); letter-spacing: -0.01em; } .sk-scr { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.4cqi; padding: 15cqi 4.5cqi 8cqi; } .sk-chip { display: inline-flex; align-items: center; gap: 1.5cqi; align-self: flex-start; height: 7cqi; padding: 0 3.2cqi; border-radius: 99px; background: #fff; font: 600 3.2cqi/1 var(--sf); } .sk-chip i { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: #34c759; } .sk-cam { position: relative; flex: none; height: 50cqi; overflow: hidden; border-radius: 5cqi; background: #ebe6de; } .sk-cam video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; } .sk-m { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqi; } .sk-m p, .sk-w { position: relative; padding: 2.8cqi 3.2cqi; border-radius: 4cqi; background: #fff; } .sk-m small, .sk-w small { display: flex; align-items: center; gap: 1.3cqi; font: 600 3cqi/1 var(--sf); color: var(--l2); white-space: nowrap; } .sk-m small i { flex: none; width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: var(--c); } .sk-m b { display: block; margin-top: 2cqi; font: 700 6.2cqi/1 ui-rounded, "SF Pro Rounded", var(--sf); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .sk-m b em { font-style: normal; } .sk-m b span { margin-left: 0.6cqi; font: 500 3.2cqi/1 var(--sf); color: var(--l2); } .sk-w { flex: 1 1 0; min-height: 0; } .sk-w canvas { position: absolute; top: 7.4cqi; right: 2.6cqi; bottom: 2.4cqi; left: 2.6cqi; width: calc(100% - 5.2cqi); height: calc(100% - 9.8cqi); } .sk-w2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqi; flex: 1 1 0; min-height: 0; } /* Sections. */ .hm-sec { padding: 112px 0; } .hm-h { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 720px; margin: 0 auto 56px; text-align: center; } .hm-k { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--soft); font: 500 13px/1 var(--site); color: var(--fg); } .hm-h .lead { color: var(--muted); } /* FDA cleared: one card, the clearance on the left and the two accuracy figures on the right, each over its own trace. */ .fda-s { padding: 48px 0 64px; } .fda-c { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: 48px; border-radius: 24px; background: var(--card); } .fda-t { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .fda-t .hm-k { background: #fff; } .fda-t .lead { max-width: 520px; color: var(--muted); } .fda-a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 400 14px/20px var(--site); color: var(--muted); } .fda-a a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--fg); text-decoration: none; } .fda-a a svg { width: 14px; height: 14px; } .fda-a a:hover { text-decoration: underline; text-underline-offset: 3px; } .fda-g { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fda-n { position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 26px 26px 0; overflow: hidden; border-radius: 20px; background: #fff; } .fda-n p { font: 400 14px/20px var(--site); color: var(--muted); } .fda-n b { margin-top: 10px; font: 360 54px/1 var(--site); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .fda-n small { margin-top: 8px; font: 500 13px/1 var(--site); color: var(--muted); } .fda-n .tr { position: relative; flex: 1 1 auto; min-height: 56px; margin: 14px -26px 0; } .fda-n canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* Capabilities: two cards, each a live scene over the list it covers. */ .cap-g { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cap-c { display: flex; flex-direction: column; padding: 32px; border-radius: 24px; background: var(--card); } .cap-c h3 { font: var(--hw) 20px/28px var(--site); } .cap-v { position: relative; height: 280px; margin-top: 24px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 18px 40px -22px rgba(0, 0, 0, 0.25); font-family: var(--sf); } .cap-v canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .cap-v .k { left: 14px; font: 600 12px/1.25 var(--sf); } .cap-v .k small { font: 500 11.5px/1.25 var(--sf); color: var(--l2); } .cap-v .k small b { color: #000; } /* The participant's camera, as in the hero and LiveLine: her clip, and the tracking brackets on forehead and cheeks drawn over it. */ .fcam-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; background: #ebe6de; } .fcam-c { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } .cap-tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); font: 600 12px/1 var(--sf); color: #000; white-space: nowrap; } .cap-tag span { font-weight: 500; color: var(--l2); font-variant-numeric: tabular-nums; } .cap-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); } .cap-tag .eq { display: inline-flex; align-items: center; gap: 2px; height: 12px; } .cap-tag .eq s { width: 2.5px; height: 100%; border-radius: 2px; background: #34c759; animation: eq 0.9s ease-in-out infinite alternate; transform-origin: center; } .cap-tag .eq s:nth-child(2) { animation-delay: 0.2s; } .cap-tag .eq s:nth-child(3) { animation-delay: 0.4s; } .cap-tag .eq s:nth-child(4) { animation-delay: 0.1s; } @keyframes eq { from { transform: scaleY(0.3); } } .cap-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .cap-l li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--b2); font: 400 14px/1 var(--site); } .cap-l li b { padding: 4px 7px; border-radius: 99px; background: rgba(173, 32, 41, 0.08); font: 600 11px/1 var(--site); color: var(--accent); } .cap-note { margin-top: 24px; font: 400 13px/20px var(--site); color: var(--muted); text-align: center; } /* Quick start: three steps on the left, a code window with tabs on the right. */ .qs { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; } .qs-l { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .qs-l .lead { color: var(--muted); } .qs-st { align-self: stretch; margin-top: 16px; counter-reset: qs; } .qs-st li { counter-increment: qs; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; border-top: 1px solid var(--border); } .qs-st li::before { content: counter(qs); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); font: 500 13px/1 var(--site); } .qs-st h3 { font: var(--hw) 16px/24px var(--site); } .qs-st p { font: 400 15px/24px var(--site); color: var(--muted); } .qs-w { position: sticky; top: 96px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05), 0 28px 60px -18px rgba(0, 0, 0, 0.2); } .qs-bar { display: flex; align-items: center; gap: 7px; height: 52px; padding: 0 12px 0 16px; background: #f7f7f7; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .qs-bar > i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #dcdcdf; } .qs-bar .seg { margin-left: 14px; } .qs-cp { margin-left: auto; height: 32px; padding: 0 14px; } .qs-p { padding: 18px 20px 22px 0; overflow-x: auto; font: 400 13.5px/23px var(--mono); color: #1d1d1f; counter-reset: ln; scrollbar-width: thin; } .qs-p .l { position: relative; display: block; min-height: 23px; padding-left: 52px; white-space: pre; } .qs-p .l::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 32px; text-align: right; color: rgba(0, 0, 0, 0.24); } .qs-p .k { position: static; left: auto; z-index: auto; transform: none; font: inherit; color: #9b2393; font-weight: 500; } .qs-p .t { color: #0b4f79; } .qs-p .p { color: #326d74; } .qs-p .s { color: #c41a16; } .qs-p .c { color: #5d6c79; } .qs-f { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 20px; border-top: 1px solid rgba(0, 0, 0, 0.06); font: 400 13px/20px var(--site); } .qs-f a { display: inline-flex; align-items: center; gap: 5px; color: var(--fg); text-decoration: none; } .qs-f a:hover { text-decoration: underline; text-underline-offset: 3px; } .qs-f a svg { width: 13px; height: 13px; color: var(--muted); } /* Pricing: the x.ai cards, two of them, no numbers. */ .hm-pr { display: flex; flex-direction: column; gap: 16px; } .hm-pr-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .hm-pr .pc { min-height: 0; } .hm-pr .pc-ls ul { visibility: visible; } /* Get started: the sign-up line as a pill field. */ .nl { display: flex; gap: 8px; width: 100%; max-width: 460px; } .nl input { flex: 1; min-width: 0; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.15); font: 400 15px/1 var(--site); color: var(--fg); } .nl input:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgba(10, 10, 10, 0.45); } .nl-n { font: 400 13px/20px var(--site); color: var(--muted); } .nl-n a, .gs-t a { text-decoration: underline; text-underline-offset: 3px; } .hm-gs { padding-bottom: 128px; } @media (max-width: 1023px) { .fda-c { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; } .qs { grid-template-columns: minmax(0, 1fr); gap: 40px; } .qs-w { position: static; } } @media (max-width: 959px) { .sk-body { grid-template-columns: minmax(0, 1fr); } .sk-nav { display: none; } .sk-code { font-size: 12px; line-height: 20px; } .sk-code .l { min-height: 20px; padding-left: 44px; } .sk-code .l::before { width: 28px; } .sk .pho { --pw: 176px; margin: 64px 0 0 -96px; } } @media (max-width: 767px) { .cap-g, .hm-pr-g { grid-template-columns: minmax(0, 1fr); } .cap-c { padding: 24px; } } @media (max-width: 639px) { .hm-sec { padding: 80px 0; } .hm-h { margin-bottom: 40px; } .fda-s { padding: 32px 0 48px; } .fda-c { padding: 28px 22px; gap: 32px; } .fda-g { gap: 10px; } .fda-n { min-height: 190px; padding: 20px 18px 0; } .fda-n b { font-size: 40px; } .fda-n .tr { margin: 12px -18px 0; } .cap-v { height: 240px; } .qs-p { font-size: 12px; line-height: 20px; } .qs-p .l { min-height: 20px; padding-left: 40px; } .qs-p .l::before { width: 24px; } .qs-bar .seg { margin-left: 4px; } .qs-bar > i { display: none; } .nl { flex-direction: column; } .nl .btn { width: 100%; } } /* Phones: Xcode runs off to the right edge, the phone over its corner. */ @media (max-width: 599px) { .sk { display: block; padding-bottom: 28px; } .sk-ed { margin-right: -30px; } .sk-code { padding-top: 12px; font-size: 10px; line-height: 16.5px; } .sk-code .l { min-height: 16.5px; padding-left: 30px; } .sk-code .l::before { width: 20px; } .sk-bar .sk-f, .sk-run { display: none; } .sk .pho { --pw: 124px; position: absolute; right: -8px; bottom: 0; margin: 0; } } /* Homepage v2: the same homepage, styled after muse.ai. Soft #fcfcfc and #f3f4f5 bands run edge to edge; headings are Inter 500 with tight tracking, body copy is 18px gray, buttons are pills, and the product sits in light phone mocks with cards floating off their edges. Presage crimson stands in for Muse's blue. */ .v-muse .hcb { display: none; } /* Tab E, the graveyard: no hero color block, just a plain heading. */ .v-gy .hcb { display: none; } .gy-s { padding: 148px 0 96px; } .gy-s .lead { max-width: 560px; margin-top: 14px; } @media (max-width: 639px) { .gy-s { padding: 104px 0 64px; } } /* Tab D borrows the explainer band from Homepage v2, so it needs that tab's tokens. */ .fu { --mz-ink: #111112; --mz-mute: rgba(0, 4, 9, 0.59); --mz-a: #b0212b; --mz-a-h: #951a23; --mz-b1: #fcfcfc; --mz-b2: #f3f4f5; --mz-f: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; } /* 2. The explainer, as Muse's guided tour: centered heading, then the film in a rounded frame that rests on its opening title card with a round play button. It never plays on its own. */ /* The video and object panels, as Muse draws its video frames. */ .mz-vf, .mz-grid { position: relative; width: min(82%, 116.622vh); max-height: 65.6vh; margin: 40px auto 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 32px; transform: translateY(var(--ty, 0px)) scale(var(--sc, 1)); transform-origin: 50% 50%; will-change: transform; } @supports (corner-shape: squircle) { .mz-vf, .mz-grid { border-radius: 48px; corner-shape: superellipse(2); } } /* The white-ground cut of the film: white in the middle, fading to cool gray at its edges, as Muse's videos do; a hairline keeps the frame's edge on the gray band. */ .mz-vf { background: #fff; box-shadow: 0 0 0 1px rgba(0, 4, 9, 0.06), 0 24px 56px -32px rgba(0, 4, 9, 0.2); } .mz-vf video { display: block; width: 100%; height: 100%; object-fit: cover; } .mz-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; background: none; cursor: pointer; } .mz-play span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.76); -webkit-backdrop-filter: blur(48px); backdrop-filter: blur(48px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.1); } .mz-play svg { width: 16px; height: 16px; margin-left: 2px; fill: #111112; transition: opacity 0.15s; } .mz-play:hover svg, .mz-play:active svg { opacity: 0.6; } .mz-vf.on .mz-play { display: none; } /* It plays muted on its own; this turns the narration on. */ .mz-snd { position: absolute; right: 20px; bottom: 20px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.76); -webkit-backdrop-filter: blur(48px); backdrop-filter: blur(48px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.1); color: #111112; } .mz-snd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.15s; } .mz-snd:hover svg { opacity: 0.6; } .mz-snd .mz-on, .mz-snd[aria-pressed="true"] .mz-off { display: none; } .mz-snd[aria-pressed="true"] .mz-on { display: block; } .mz-vf:not(.on) .mz-snd { display: none; } .mz-vl { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 400 14px/20px var(--mz-f); color: var(--mz-mute); } .mz-vl b { font-weight: 500; color: var(--mz-ink); font-variant-numeric: tabular-nums; } @media (max-width: 639px) { .mz-vf, .mz-grid { width: 100%; margin-top: 32px; } .mz-grid { aspect-ratio: 4 / 5; } } .mz { --mz-ink: #111112; --mz-mute: rgba(0, 4, 9, 0.59); --mz-a: #b0212b; --mz-a-h: #951a23; --mz-b1: #fcfcfc; --mz-b2: #f3f4f5; --mz-f: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif; --l2: rgba(60, 60, 67, 0.6); --fill: rgba(118, 118, 128, 0.12); --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; background: var(--mz-b1); color: var(--mz-ink); font-family: var(--mz-f); } /* Measured on muse.ai at 1710 x 888: a 1440px column with 56px sides; centered sections run 56px above the heading and 96px below; a row section is 56px top and bottom around a square visual and its text. */ .mz-band { padding: 96px 0; overflow-x: clip; } .mz-band.mz-vd, #mz-cap { padding: 56px 0 96px; } .mz-band:has(> .mz-row) { padding: 56px 0; } .mz-band.g { background: var(--mz-b2); } .mz-in { max-width: 1440px; margin: 0 auto; padding: 0 56px; } .mz-h2 { font: 500 40px/46px var(--mz-f); letter-spacing: -0.01em; color: var(--mz-ink); text-wrap: balance; } .mz-p { margin-top: 12px; font: 400 18px/26px var(--mz-f); color: var(--mz-mute); text-wrap: pretty; } .mz-p b { font-weight: 500; color: var(--mz-ink); } .mz-p a, .mz-sm a { color: var(--mz-a); text-decoration: none; } .mz-p a:hover, .mz-sm a:hover { text-decoration: underline; text-underline-offset: 3px; } .mz-c { text-align: center; } .mz-c .mz-p { max-width: 736px; margin-right: auto; margin-left: auto; } .mz-sm { font: 400 13px/18px var(--mz-f); color: var(--mz-mute); } .mz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 28px; border-radius: 999px; font: 500 15px/1 var(--mz-f); white-space: nowrap; text-decoration: none; transition: background-color 0.15s; } .mz-btn svg { width: 15px; height: 15px; } .mz-btn.pr { background: var(--mz-a); color: #fff; } .mz-btn.pr:hover { background: var(--mz-a-h); } .mz-btn.gy { background: #ededed; color: var(--mz-ink); } .mz-btn.gy:hover { background: #e4e4e4; } /* 1. Hero: centered mark, a two-line headline with her camera inline and the last word turning over, then the sign-up stack and Learn more. */ .mz-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: max(780px, 100svh); padding: 132px 24px 120px; text-align: center; } .mz-mark { width: 60px; height: 60px; margin-bottom: 30px; } .mz-mark .disc { fill: var(--mz-a); } .mz-h1 { font: 500 clamp(38px, 4.6vw, 62.4px)/1.1 var(--mz-f); letter-spacing: -0.01em; color: var(--mz-ink); } .mz-h1 .l2 { display: block; color: #3d3d40; } .mz-face { position: relative; display: inline-block; width: 0.96em; height: 0.96em; margin: 0 0.06em; overflow: hidden; vertical-align: -0.17em; border-radius: 50%; background: #ebe6de; box-shadow: 0 0 0 0.06em #fff, 0 0.1em 0.3em rgba(0, 0, 0, 0.16); } .mz-face video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.3); transform-origin: 50% 34%; } .mz-rot { display: inline-grid; justify-items: start; overflow: hidden; vertical-align: bottom; color: rgba(17, 17, 18, 0.36); } .mz-rot span { grid-area: 1 / 1; padding-bottom: 0.08em; transition: transform 0.7s var(--expo), opacity 0.45s ease; } .mz-rot span:not(.on) { opacity: 0; transform: translateY(70%); } .mz-rot span.out { opacity: 0; transform: translateY(-70%); } .mz-sub { max-width: 560px; margin-top: 22px; font: 400 18px/26px var(--mz-f); color: var(--mz-mute); text-wrap: pretty; } .mz-go { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(360px, 100%); margin-top: 40px; } .mz-go > p:first-child { margin-bottom: 4px; font: 400 15px/20px var(--mz-f); color: var(--mz-mute); } .mz-go .mz-sm { margin-top: 2px; } .mz-more { position: absolute; bottom: 28px; left: 50%; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.06); font: 500 13px/1 var(--mz-f); color: var(--mz-ink); text-decoration: none; translate: -50% 0; } .mz-more svg { width: 14px; height: 14px; } /* 2. Capabilities: a big soft panel of objects, the Presage mark at its middle, zooming out as it scrolls into view; the metrics as pills. */ .mz-grid { background: #f7f7f8; -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 50%, #000 62%, transparent 100%); } .mz-gi { position: absolute; top: 50%; left: 50%; display: grid; grid-template-columns: repeat(11, 112px); grid-auto-rows: 112px; translate: -50% -50%; scale: var(--z, 1); will-change: scale; } .mz-gi > span { display: grid; place-items: center; font: 46px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.12)); } .mz-gi > .mid { display: grid; place-items: center; width: 80px; height: 80px; margin: 16px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 24px -8px rgba(0, 0, 0, 0.2); filter: none; } .mz-gi > .mid svg { width: 48px; height: 48px; } .mz-gi > .mid .disc { fill: var(--mz-a); } .mz-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 920px; margin: 32px auto 0; } .mz-pills li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); font: 400 14px/1 var(--mz-f); color: var(--mz-ink); } .mz-pills li b { padding: 4px 8px; border-radius: 99px; background: rgba(176, 33, 43, 0.08); font: 600 11px/1 var(--mz-f); color: var(--mz-a); } .mz-pills + .mz-sm { margin-top: 20px; } .mz-band:not(.g) .mz-pills li { background: var(--mz-b2); box-shadow: none; } /* Feature rows: a phone mock on one side, the heading and line on the other. */ .mz-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; } .mz-row.flip .mz-vis { order: 2; } .mz-txt { max-width: 632px; } .mz-txt .mz-p { max-width: 576px; } .mz-txt .mz-btn, .mz-txt .mz-ln { margin-top: 28px; } .mz-ln { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1 var(--mz-f); color: var(--mz-a); text-decoration: none; } .mz-ln svg { width: 15px; height: 15px; } .mz-ln:hover { text-decoration: underline; text-underline-offset: 3px; } .mz-vis { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: min(632px, 80vh); aspect-ratio: 1; margin: 0 auto; } /* Muse's phone: white, a hairline edge, a faint shadow, no hardware. */ .mz-ph { position: relative; width: 250px; height: 540px; overflow: hidden; border-radius: 46px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 30px 70px -36px rgba(0, 0, 0, 0.3); container-type: inline-size; font-family: var(--sf); color: #000; } .mz-ph.gy { background: #f2f2f7; } .mz-who { position: absolute; top: 14px; left: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 14px 9px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.18); font: 600 13px/1.1 var(--sf); white-space: nowrap; translate: -50% 0; } .mz-who i { display: grid; place-items: center; width: 30px; height: 30px; margin-top: -24px; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); } .mz-who i svg { width: 22px; height: 22px; } .mz-who i .disc { fill: var(--mz-a); } .mz-who small { display: inline-flex; align-items: center; gap: 4px; font: 400 11px/1 var(--sf); color: var(--l2); } .mz-who small::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #34c759; animation: blink 1.2s ease-in-out infinite; } .mz-ph .sk-scr { padding-top: 26cqi; } .mz-card { position: absolute; z-index: 4; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 22px 44px -18px rgba(0, 0, 0, 0.3); font-family: var(--sf); color: #000; text-align: left; } .mz-card h4 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 13px/1.2 var(--sf); } .mz-card h4 i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(176, 33, 43, 0.09); color: var(--mz-a); } .mz-card h4 i svg { width: 14px; height: 14px; stroke-width: 2.4; } .mz-card h4 small { display: block; margin-top: 2px; font: 400 11px/1.2 var(--sf); color: var(--l2); } .mz-kv { margin-top: 10px; border-top: 1px solid rgba(60, 60, 67, 0.12); } .mz-kv p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid rgba(60, 60, 67, 0.12); font: 400 12px/1.2 var(--sf); color: var(--l2); } .mz-kv b { font: 600 15px/1 var(--sf); color: #000; font-variant-numeric: tabular-nums; } .mz-kv b span { margin-left: 3px; font: 500 10.5px/1 var(--sf); color: var(--l2); } .mz-card .mz-cb { display: block; margin-top: 12px; padding: 10px; border-radius: 999px; background: #f2f2f4; font: 600 12px/1 var(--sf); color: #000; text-align: center; text-decoration: none; } .mz-card .mz-cb:hover { background: #e9e9ec; } /* The face row: her camera fills the phone; expressions in a card. */ .mz-cam { position: absolute; inset: 0; } .mz-tag { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); font: 600 12px/1 var(--sf); white-space: nowrap; } .mz-tag span { font-weight: 500; color: var(--l2); font-variant-numeric: tabular-nums; } .mz-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); } .mz-tag .eq { display: inline-flex; align-items: center; gap: 2px; height: 12px; } .mz-tag .eq s { width: 2.5px; height: 100%; border-radius: 2px; background: #34c759; animation: eq 0.9s ease-in-out infinite alternate; } .mz-tag .eq s:nth-child(2) { animation-delay: 0.2s; } .mz-tag .eq s:nth-child(3) { animation-delay: 0.4s; } .mz-tag .eq s:nth-child(4) { animation-delay: 0.1s; } .mz-bars { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; } .mz-bars p { display: grid; grid-template-columns: 62px minmax(0, 1fr) 30px; align-items: center; gap: 8px; font: 500 11.5px/1 var(--sf); } .mz-bars p > span { height: 6px; overflow: hidden; border-radius: 99px; background: var(--fill); } .mz-bars p > span i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #d4a72c; } .mz-bars em { font-style: normal; color: var(--l2); text-align: right; font-variant-numeric: tabular-nums; } /* The quick start row: Muse's two overlapping cards, the steps behind and the code in front. */ .mz-qs { position: relative; width: 100%; max-width: 540px; min-height: 480px; } .mz-steps { position: absolute; top: 0; left: 0; width: 230px; padding: 18px 16px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 50px -26px rgba(0, 0, 0, 0.25); } .mz-steps h4 { margin: 0 0 10px; font: 600 17px/1 var(--sf); } .mz-steps p { display: flex; align-items: center; gap: 10px; padding: 9px 0; font: 500 13px/1.2 var(--sf); } .mz-steps p i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid #c7c7cc; border-radius: 5px; } .mz-steps p.ok i { border-color: var(--mz-a); background: var(--mz-a); color: #fff; } .mz-steps p.ok i svg { width: 12px; height: 12px; stroke-width: 3; } .mz-steps p.ok { color: var(--l2); } .mz-qs .qs-w { position: absolute; top: 56px; right: 0; width: min(400px, 82%); border-radius: 22px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 30px 60px -24px rgba(0, 0, 0, 0.3); } .mz-qs .qs-bar { height: 50px; background: #fff; } .mz-qs .qs-bar .seg { margin-left: 6px; } .mz-qs .qs-p { font-size: 12px; line-height: 20px; } .mz-qs .qs-p .l { min-height: 20px; padding-left: 40px; } .mz-qs .qs-p .l::before { width: 26px; } .mz-qs .qs-cp { height: 30px; border-radius: 999px; } /* Platforms: app-style tiles, crisp in the middle and blurred at the edges. */ .mz-apps { display: grid; grid-template-columns: repeat(6, 60px); gap: 22px; justify-content: center; padding: 20px 0; } .mz-apps > span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--b, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 6px 14px -6px rgba(0, 0, 0, 0.2); font: 700 13px/1 var(--mz-f); letter-spacing: -0.01em; color: var(--t, #111); } .mz-apps > span svg { width: 30px; height: 30px; fill: currentColor; } .mz-apps > span.bl { filter: blur(5px); opacity: 0.6; } .mz-apps > span.bl2 { filter: blur(9px); opacity: 0.45; } /* Pricing and FAQs: Muse's "Learn more" list, rows with an icon, a title, a line and a chevron between hairlines. */ .mz-two { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } .mz-list a { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 4px 14px; align-items: start; padding: 24px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); color: inherit; text-decoration: none; } .mz-list a:first-child { padding-top: 4px; } .mz-list a > svg:first-child { width: 22px; height: 22px; margin-top: 1px; color: #6b6b70; stroke-width: 1.6; } .mz-list b { font: 500 17px/24px var(--mz-f); color: var(--mz-ink); } .mz-list p { grid-column: 2; font: 400 15px/22px var(--mz-f); color: var(--mz-mute); } .mz-list a > svg:last-child { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; color: #8e8e93; transition: transform 0.15s; } .mz-list a:hover > svg:last-child { transform: translateX(3px); } .mz .fq-i { border-color: rgba(0, 0, 0, 0.08); } .mz .fq-q { font: 500 17px/24px var(--mz-f); color: var(--mz-ink); } .mz .fq-a p { font: 400 16px/26px var(--mz-f); color: var(--mz-mute); } .mz .fq-a a { color: var(--mz-a); text-decoration: none; } /* Get started: the centered question and the stacked pills. */ .mz-end { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 180px 24px; text-align: center; } .mz-end .mz-h2 { margin-bottom: 20px; } .mz-end .mz-btn { width: 228px; } .mz-end .mz-sm { margin-top: 14px; font-size: 14px; } @media (max-width: 1023px) { .mz-in { padding: 0 40px; } } @media (max-width: 899px) { .mz-row, .mz-two { grid-template-columns: minmax(0, 1fr); gap: 40px; } .mz-row.flip .mz-vis { order: 0; } .mz-row .mz-txt { order: -1; max-width: none; } .mz-vis { max-width: 520px; } .mz-gi { grid-template-columns: repeat(11, 88px); grid-auto-rows: 88px; } .mz-gi > span { font-size: 36px; } .mz-gi > .mid { width: 64px; height: 64px; margin: 12px; border-radius: 18px; } .mz-gi > .mid svg { width: 38px; height: 38px; } } @media (max-width: 639px) { .mz-band { padding: 64px 0; } .mz-band.mz-vd, #mz-cap { padding: 48px 0 72px; } .mz-band:has(> .mz-row) { padding: 48px 0; } .mz-in { padding: 0 20px; } .mz-h2 { font-size: 30px; line-height: 36px; } .mz-p, .mz-sub { font-size: 16px; line-height: 24px; } .mz-hero { min-height: max(700px, 100svh); padding: 104px 16px 100px; } .mz-ph { width: 220px; height: 476px; border-radius: 40px; } .mz-vis .mz-card { transform: scale(0.88); } .mz-qs { min-height: 430px; } .mz-steps { width: 200px; } .mz-qs .qs-w { top: 120px; width: 92%; } .mz-apps { grid-template-columns: repeat(5, 52px); gap: 16px; } .mz-apps > span { width: 52px; height: 52px; border-radius: 14px; } .mz-apps > span:nth-child(6n) { display: none; } .mz-end { padding: 120px 16px; } } /* On the new page: the modules sit right under the site header. */ [hidden] { display: none !important; } /* F3: each card names its product above the picture, then a short title and one line of copy at the bottom (no chips, no links). */ /* One flat light gray: the user's swatch (#f6f5f3), a touch lighter and grayer. */ .d-root .hcb { background: #f1f1f3; } .hm-sec#hm-cap { background: #f1f1f3; } /* The FAQs follow the gray pricing band, so they need their own top space (the template sets none). */ .fq-s#hm-faqs { padding-top: 112px !important; } @media (max-width: 639px) { .fq-s#hm-faqs { padding-top: 80px !important; } } /* F1 sits and sizes like A1 (tab A's hero), with the phone mirrored to the left. As A1 at the top of the page: the card starts at the header's foot with its rounded corners showing, the text 71px under the header (83px below 1100px, 47px on phones), and the browser a few px further down than F1's own copy would put it (4px, 10px on phones), level with A1's. The browser and phone take A1's sizes: the phone 220px wide over the browser's left edge by 110px, 84px down, the browser 536px tall; on tablets 176px over by 96px, 64px down, 494px tall. Phones keep F1's own layout (the user's call): the phone over the browser's bottom left, the browser running off the right edge. */ .d-root:has(> .hcb) { position: relative; } .d-root .hcb { top: 0; } /* The hero now sits under the copy-only F1 as its demo card: its own copy is hidden (F1 says it), the card is as wide as F4's (on F1's line), and the browser starts 72px into it. */ .hx#hero .ht { display: none; } /* The demo as the right half of "Introducing eSSESSMENT" (data-d-side), placed as F5's eSSESSMENT picture (its 540 by 420 card, in cqw of the card's width): the browser from 7.4% in and 6.3% down, running off the right and bottom; the phone at the bottom left, 25.6% wide, cut by the card's bottom edge just under its scale. The page draws the card (a gradient) around it. */ :host([data-d-side]) { display: block; height: 100%; } :host([data-d-side]) .d-root { height: 100%; background: transparent; } :host([data-d-side]) .d-root .hcb { display: none; } :host([data-d-side]) .hx#hero { container-type: inline-size; position: relative; display: block; height: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; } :host([data-d-side]) .hx#hero .win-w { position: absolute; top: 6.3cqw; left: 7.4cqw; width: 100cqw; margin: 0; } :host([data-d-side]) .hx#hero .lh { --pw: 25.6cqw; position: relative; display: block; margin: 0; padding: 0; clip-path: none; } :host([data-d-side]) .hx#hero .pho.lh-pho { --pw: 25.6cqw; position: absolute; top: 29.3cqw; right: auto; bottom: auto; left: -4.8cqw; margin: 0; aspect-ratio: 9 / 19.5; } :host([data-d-side]) .hx#hero .lh-ll { height: 72cqi; } /* Narrow: the right panel stays; on phones it is only her camera, small, and the names are smaller and on one line. */ @media (max-width: 899px) { :host([data-d-side]) .hx#hero .lh-body { grid-template-columns: minmax(0, 1fr) min(188px, 22cqi); } :host([data-d-side]) .hx#hero .lh-side { display: flex; } :host([data-d-side]) .hx#hero .lh-key { white-space: nowrap; } } @media (max-width: 639px) { :host([data-d-side]) .hx#hero .lh-body { grid-template-columns: minmax(0, 1fr) 13cqi; } :host([data-d-side]) .hx#hero .lh-side .lh-who, :host([data-d-side]) .hx#hero .lh-side .lh-ah, :host([data-d-side]) .hx#hero .lh-side .lh-prev, :host([data-d-side]) .hx#hero .lh-side .lh-tag { display: none; } :host([data-d-side]) .hx#hero .lh-side .lh-cam { width: 100%; aspect-ratio: 3 / 4; } :host([data-d-side]) .hx#hero .lh-key, :host([data-d-side]) .hx#hero .lh-key.ev, :host([data-d-side]) .hx#hero .lh-key small { font-size: 8px; } } /* Safari leaves a transformed video square inside a rounded box; the clip keeps her face round. */ .hx .lh-pho .lh-pc, .dsc .lh-pc { clip-path: circle(50% at 50% 50%); } /* The card is as tall as F4's gray card (--ch: its stage plus padding). The phone keeps its cut at the bottom (its top follows the card's height) and the chart ends just past the card's bottom, so all three readings show. */ :host([data-d-side]) .hx#hero { --ch: calc(112px + min(550px, 100cqw - 80px) * 0.58); } @media (max-width: 899px) { :host([data-d-side]) .hx#hero { --ch: calc(64px + min(550px, 100cqw - 32px) * 0.58); } } :host([data-d-side]) .hx#hero .pho.lh-pho { top: calc(var(--ch) - 48.48cqw); } :host([data-d-side]) .hx#hero .lh-ll { height: calc(var(--ch) - 7.5cqw); } /* Narrow (one column): the browser flush with the card's right edge so the readings show; on the short, wide cards of tablets the phone smaller, on phones a little larger. */ @media (max-width: 899px) { :host([data-d-side]) .hx#hero .win-w { left: 6.7cqw; width: 93.3cqw; } :host([data-d-side]) .hx#hero .pho.lh-pho { --pw: 20cqw; top: calc(var(--ch) - 39.25cqw); left: -3cqw; } } @media (max-width: 639px) { :host([data-d-side]) .hx#hero { --ch: 100cqw; } :host([data-d-side]) .hx#hero .pho.lh-pho { --pw: 27cqw; top: calc(var(--ch) - 51cqw); left: -5cqw; } :host([data-d-side]) .hx#hero .lh-ll { height: calc(var(--ch) - 10cqw); } } /* The demo card under it (data-d-copy) mirrors that demo; its card ends 96px under it. */ :host([data-d-copy]) .d-root .hcb { height: auto !important; bottom: 0; } :host([data-d-copy]) .hx#hero { padding-bottom: 96px; } @media (min-width: 640px) { .d-root .hcb { left: max(16px, calc((100% - 1323.31px) / 2)); right: max(16px, calc((100% - 1323.31px) / 2)); } } @media (max-width: 639px) { .d-root .hcb { left: 16px; right: 16px; } } /* F1's trace names at the size of the session dates on the right (the user's note), their values at the size of the session times. */ .hx#hero .lh-key, .hx#hero .lh-key.ev { font-size: max(1.05cqi, 9px); } .hx#hero .lh-key small { font-size: max(1cqi, 9px); } /* F1's camera tile in A1's phone-camera shape (188 by 103), so she is drawn at A1's size. */ .hx#hero .lh-cam { aspect-ratio: 188 / 103; } /* The ring around her face turns slowly: once every 40s (it was 14s). */ .hx#hero .lh-pho .lh-ring { animation-duration: 40s; } .hx#hero { padding-top: 72px; } .hx#hero .win-w { margin-top: 0; } @media (max-width: 639px) { .hx#hero { padding-top: 32px; } } @media (min-width: 960px) { .hx#hero .lh { --pw: 220px; grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; align-items: start; gap: 0; } /* The phone is 44px shorter than A1's, from the top, so it clears the logo and the chart's top line. */ .hx#hero .pho.lh-pho { margin: 128px -110px 0 0; aspect-ratio: 220 / 432.7; } .hx#hero .lh-side .lh-cam { width: min(188px, 100%); } /* The side panel is as wide as the camera tile, so the trace block takes the rest (no gap beside the tile). */ .hx#hero .lh-body { grid-template-columns: minmax(0, 1fr) min(188px, 22cqi); } .hx#hero .lh-ll { height: calc(536px - 3.2cqi); } } @media (min-width: 600px) and (max-width: 959px) { .hx#hero .win-w { width: calc(100vw - 48px); } .hx#hero .lh { --pw: 176px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0; margin: 0; padding: 0; clip-path: none; } .hx#hero .pho.lh-pho { position: relative; margin: 64px -96px 0 0; } .hx#hero .lh-ll { height: calc(494px - max(3.4cqi, 20px)); } } /* F5: F3's two white cards joined into one, with no line between them. */ .hm-sec#hm-cap3 { background: #f1f1f3; } .hm-sec#hm-cap3 .hm-k { background: #fff; } .hm-sec#hm-cap3 .cap-g { gap: 0; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03); } .hm-sec#hm-cap3 .cap-c { padding: 32px 32px 36px; border-radius: 0; background: transparent; box-shadow: none; } /* F3's white card is as wide as F4's blue one: 1246 against the 1160 column, never closer than 16px to the window's edge. */ .hm-sec#hm-cap3 .cap-g { margin-inline: max(-3.707%, calc((100% - 100vw) / 2 + 16px)); } @media (max-width: 760px) { .hm-sec#hm-cap3 .cap-g { margin-inline: 0; } } /* Equal white space at the left, middle and right of F3's card: 55 / 27.5 + 27.5 / 55. */ @media (min-width: 768px) { .hm-sec#hm-cap3 .cap-c:first-child { padding-left: 55px; padding-right: 27.5px; } .hm-sec#hm-cap3 .cap-c:last-child { padding-left: 27.5px; padding-right: 55px; } } /* F4: both pictures on one gradient card, running off its bottom edge. */ /* The card is 1246 wide against the 1160 column, so it reaches 43 (3.707%) past it each side, but never closer than 16px to the window's edge. */ .hm-sec#hm-cap2 .cb { position: relative; aspect-ratio: 1246 / 500; margin-inline: max(-3.707%, calc((100% - 100vw) / 2 + 16px)); overflow: hidden; border-radius: 28px; } .cbs { position: absolute; inset: 0; width: 100%; height: 100%; } .cbs-n { display: none; } /* Captions sit under the windows: from 9 to 536 and 624 to 1151 of the 1160 column. */ .cb-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 7.586%; margin-top: 28px; padding: 0 0.776%; } .cb-caps .cap-n { margin-bottom: 6px; font: 450 18px/26px var(--site); } .cb-caps p { max-width: 52ch; font: 400 15px/23px var(--site); color: var(--muted); text-wrap: pretty; } @media (max-width: 760px) { .hm-sec#hm-cap2 .cb { aspect-ratio: 340 / 760; margin-inline: 0; border-radius: 22px; } .cbs-w { display: none; } .cbs-n { display: block; } .cb-caps { grid-template-columns: minmax(0, 1fr); padding: 0 2.24%; } } /* The study's warm grays (buttons, card fills, rules), cooled to match. */ :host { --card: #f8f9fb; --soft: #eff1f4; --soft-h: #e6e9ee; --b2: #e9ecf0; } /* On the new homepage (every host but G's lineup), the grays follow the demo card's warm gray, #f1f1f3. */ :host(:not([data-d-host="d-lineup"])) { --card: #f1f1f3; --soft: #efeeec; --soft-h: #e7e6e3; --b2: #e9e8e5; } .hm-sec#hm-cap .cap-c { padding: 28px 28px 32px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03); } .hm-sec#hm-cap .hm-k { background: #fff; } /* F6: F3 again, its eSSESSMENT picture sized after the user's phone-and-browser mock. */ .hm-sec#hm-cap4 { background: #f1f1f3; } .hm-sec#hm-cap4 .cap-c { padding: 28px 28px 32px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03); } .hm-sec#hm-cap4 .hm-k { background: #fff; } .cap-c .cap-v { margin-top: 0; } .cap-t { padding-top: 32px; } .cap-n { margin-bottom: 20px; font: 450 20px/28px var(--site); color: var(--fg); } .cap-t .cap-h { font: 450 16px/24px var(--site); color: var(--fg); } .cap-t p + p { max-width: 52ch; margin-top: 6px; font: 400 15px/23px var(--site); color: var(--muted); text-wrap: pretty; } .cap-tag.ans { background: var(--accent); color: #fff; } .cap-tag.ans span { color: rgba(255, 255, 255, 0.8); } /* F3 pictures: app windows on a soft gradient that run off the right and bottom edges, after the Codex shot (no fade). */ .cap-c .cap-v.vx { height: auto; aspect-ratio: 540 / 420; background: transparent; container-type: inline-size; } .vxs { position: absolute; inset: 0; width: 100%; height: 100%; } .vxs-n { display: none; } .cap-c { container: capc / inline-size; } @container capc (max-width: 470px) { .cap-c .cap-v.vx { aspect-ratio: 300 / 372; } .vxs-w { display: none; } .vxs-n { display: block; } }