/* Home page: light, airy layout. Google Sans + Hanken Grotesk (SIL OFL) are served from this site. */ @font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/google-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/google-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --bg: #f2f2f2; --card: #fff; --chip: #e9e9e9; --line: rgba(0, 0, 0, 0.06); --text: #000; --dim: #555; --faint: #8a8a8a; --blue: #3b78f5; --green: #34c848; --sans: "Google Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif; --wrap: min(1076px, calc(100% - 40px)); --img-a: url("https://framerusercontent.com/images/asLiBRDHKMlM3wsy04dFzLhg8jw.png?scale-down-to=1024"); --img-b: url("https://framerusercontent.com/images/2OIuKG7oAhHBuDcoRkFKL7aUI.png?scale-down-to=1024"); --img-c: url("https://framerusercontent.com/images/27Z3i7SrFcaPB98iNT0REASf0U4.png?scale-down-to=1024"); --img-d: url("https://framerusercontent.com/images/lE94HpJn1wCesuQMYZxxESwiE.png?scale-down-to=1024"); --img-e: url("https://framerusercontent.com/images/JDx9NQzvwoHgabUNCaiowBVxubU.png?scale-down-to=1024"); --img-f: url("https://framerusercontent.com/images/tSmvg2ywCEXUuqGnM1kAyXtjWcs.png?scale-down-to=1024"); } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, p { margin: 0; } h1, h2, h3, h4, h5, .brand { font-weight: 500; letter-spacing: -0.05em; } img { max-width: 100%; } .wrap { width: var(--wrap); margin: 0 auto; } /* Nav */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, backdrop-filter .3s; } .nav.scrolled { background: rgba(242, 242, 242, 0.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } .nav-inner { width: var(--wrap); margin: 0 auto; height: 66px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 9px; font-size: 24px; letter-spacing: -0.06em; } .brand img { border-radius: 7px; } .nav-right { display: flex; align-items: center; gap: 22px; } .links { display: flex; gap: 18px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; } .links a { opacity: .9; } .links a:hover { opacity: .55; } /* Buttons and chips */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .2s, opacity .2s; } .pill { white-space: nowrap; } .pill svg { width: 16px; height: 16px; fill: currentColor; flex: none; } .pill:active { transform: scale(0.98); } .pill-dark { background: #000; color: #fff; } .pill-dark:hover { background: #222; } .pill-light { background: #fff; color: #000; border-color: rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } .pill-light:hover { background: #fafafa; } .pill.small { height: 36px; padding: 0 16px; font-size: 14px; } .pill.wide { width: 100%; } .chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--chip); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; } /* Language switch */ .lang-switch { position: relative; border: 0; padding: 0; } .lang-switch summary { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: .03em; cursor: pointer; list-style: none; } .lang-switch summary::-webkit-details-marker { display: none; } .lang-switch summary:hover, .lang-switch[open] summary { background: rgba(0, 0, 0, 0.06); } .lang-switch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; } .lang-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: grid; min-width: 172px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14); } .lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px; font-size: 14px; } .lang-menu a:hover, .lang-menu a:focus-visible { background: var(--bg); outline: none; } .lang-menu a[aria-current]::after { content: "✓"; color: var(--faint); } .lang-menu small { color: var(--faint); font-size: 11.5px; letter-spacing: .04em; } /* Section frame */ .section { width: var(--wrap); margin: 0 auto; padding: 100px 0 0; } .section-head { text-align: center; display: grid; justify-items: center; gap: 22px; margin-bottom: 52px; } .section-head h2, .cta-card h2 { font-size: clamp(36px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.06em; text-wrap: balance; } .section-head p, .lead { font-size: 17px; line-height: 1.45; color: var(--dim); max-width: 470px; text-wrap: balance; letter-spacing: -0.01em; } /* Hero */ .hero { padding: 96px 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .promo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 30px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 0; background: #e9e9e9; color: #000; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background .2s; } .promo[hidden] { display: none; } .promo:hover { background: #e2e2e2; } .promo b { font-weight: 600; letter-spacing: .02em; } .promo-tag { padding: 3px 11px; border-radius: 999px; background: #000; color: #fff; font-size: 13px; font-weight: 500; } .promo-date { color: var(--dim); } .hero h1 { font-size: clamp(48px, 8.4vw, 88px); line-height: .95; letter-spacing: -0.07em; font-weight: 600; text-wrap: balance; } .hero h1 .grad { color: #86868b; } .hero-copy p.sub { font-size: 21px; line-height: 1.32; color: #6e6e73; max-width: 560px; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; margin: 20px auto 26px; letter-spacing: -0.01em; } .hero-copy p.sub .desc-short { display: none; } .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Phones and tablets: an email field in place of the download button (nomac.js, api/remind). */ .remind-note { max-width: 420px; margin: -12px auto 18px; font-size: 15px; line-height: 1.4; color: var(--dim); text-wrap: balance; } .remind-note.err { color: #d70015; } .remind-note.done { color: var(--text); font-weight: 500; } .remind { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .remind input[type="email"] { height: 44px; min-width: 240px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 16px; outline: none; } .remind input[type="email"]:focus { border-color: var(--faint); } .remind button:disabled { opacity: .6; cursor: default; } .remind-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .fine { display: block; margin-top: 16px; font-size: 13px; color: var(--faint); } .hero-card { width: var(--wrap); margin-top: 30px; text-align: left; } .hero .hero-card { animation: hero-demo-enter 1.4s cubic-bezier(.16, 1, .3, 1) .35s both; } /* Rises out of a soft blur, the way macOS windows open. */ @keyframes hero-demo-enter { from { opacity: 0; transform: translateY(48px) scale(.94); filter: blur(14px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } } /* The hero window is Ratio itself: its default theme, toolbar, sheet and result column, as drawn by the app. */ .app-win { --a-bg: #fcfcf9; --a-text: #13343b; --a-dim: #8a9799; --a-label: #5c7377; --a-accent: #1f8a96; --a-result: rgba(22, 127, 139, .86); --a-edge: rgba(19, 52, 59, .14); background: var(--a-bg); color: var(--a-text); border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); min-height: 540px; display: flex; flex-direction: column; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; } .app-bar { display: flex; align-items: center; height: 52px; padding: 0 14px 0 20px; flex: none; } .app-lights { display: flex; gap: 8px; margin-right: 26px; } .app-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); } .app-lights i:nth-child(2) { background: #febc2e; } .app-lights i:nth-child(3) { background: #28c840; } .app-ico { width: 18px; height: 18px; flex: none; margin: 0 9px; fill: none; stroke: var(--a-text); stroke-opacity: .62; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .app-bar > .app-ico:nth-child(2) { margin: 0 14px 0 0; } .app-title { display: grid; line-height: 1.15; margin-right: auto; min-width: 0; white-space: nowrap; } .app-title b { font-size: 13px; font-weight: 700; color: var(--a-text); } .app-title span { font-size: 11px; color: var(--a-text); opacity: .55; } .app-trial { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; margin: 0 8px 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--a-text); background: rgba(0, 0, 0, .04); box-shadow: inset 0 0 0 1px var(--a-edge); white-space: nowrap; } .app-sheet { flex: 1; padding: 26px 56px 40px 52px; } .app-win .win { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .app-win .win-bar { display: none; } .app-win .win-body { padding: 0; font-size: 18px; line-height: 1.25; min-height: 0; } .app-win .row { min-height: 0; padding: 0 0 15px; align-items: baseline; gap: 24px; } .app-win .row.head { padding-bottom: 20px; } .app-win.hero-inner .src { color: var(--a-text); } .app-win.hero-inner .res { color: var(--a-result); font-weight: 500; } .app-win.hero-inner .res:hover { color: var(--a-accent); } .app-win.hero-inner .res .u { font-size: .78em; opacity: .5; } .app-win.hero-inner .res .plot { color: var(--a-result); } .app-win.hero-inner .t-label { color: var(--a-label); font-weight: 500; } .app-win.hero-inner .t-kw, .app-win.hero-inner .t-var { color: var(--a-accent); } .app-win.hero-inner .t-unit, .app-win.hero-inner .t-op { color: var(--a-dim); } .app-win.hero-inner .t-num { color: var(--a-text); } .app-win.hero-inner .t-head { font-size: 1.18em; font-weight: 700; } .app-win.hero-inner .t-hash { display: none; } .app-win.hero-inner .t-tag { display: inline-flex; align-items: center; gap: 3px; margin: 0 2px; padding: 0 5px 0 4px; border-radius: 6px; line-height: 1.2; font-weight: 500; color: color-mix(in srgb, var(--tag) 70%, var(--a-text)); background: color-mix(in srgb, var(--a-text) 5.5%, transparent); box-shadow: inset 0 0 0 .75px color-mix(in srgb, var(--a-text) 9%, transparent); } .app-win.hero-inner .t-tag svg { width: .82em; height: .82em; color: var(--tag); flex: none; } .app-win.hero-inner .caret { background: var(--a-accent); width: 1.5px; } @keyframes blink { 50% { opacity: 0; } } /* App windows (the live demos) */ .win { position: relative; border-radius: 12px; background: #fff; border: 1px solid var(--line); overflow: hidden; } .win-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #fafafa; border-bottom: 1px solid var(--line); } .win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e0615a; } .win-bar i:nth-child(2) { background: #ecb53f; } .win-bar i:nth-child(3) { background: #62b857; } .win-title { flex: 1; text-align: center; font-size: 12px; color: var(--faint); margin-right: 42px; } .win-body { padding: 14px 20px 18px; font: 14.5px/2 var(--sans); font-variant-numeric: tabular-nums; min-height: 120px; } .row { display: flex; justify-content: space-between; gap: 16px; min-height: 29px; } .src { white-space: pre; overflow: hidden; text-overflow: ellipsis; color: #000; } .res { color: var(--blue); font-weight: 500; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s; cursor: pointer; } .res.show { opacity: 1; transform: none; } /* How an answer was worked out: a small card under (or, low in the sheet, over) its line. */ .row.has-why { position: relative; } .row.has-why .res { text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 4px; } .why-tip { position: absolute; right: -6px; top: calc(100% - 2px); z-index: 3; padding: 7px 11px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); font-size: 12.5px; line-height: 1.55; color: var(--dim); width: max-content; max-width: min(300px, 92%); text-align: right; opacity: 0; transform: translateY(-3px); transition: opacity .2s, transform .2s; pointer-events: none; } .why-tip.up { top: auto; bottom: calc(100% - 4px); transform: translateY(3px); } .row.has-why:hover .why-tip, .row.why-open .why-tip { opacity: 1; transform: none; } .t-label { color: var(--faint); } .t-kw, .t-var { color: #4b5fd6; } .t-unit { color: #8a8a8a; } .t-op { color: #b0b0b0; } .t-head { font-weight: 600; } .t-num { color: #000; } .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--blue); animation: blink 1s steps(1) infinite; } .plot { width: 150px; height: 32px; display: block; color: var(--blue); overflow: visible; } .plot-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .plot-base { stroke: currentColor; stroke-opacity: .18; stroke-width: 1; stroke-dasharray: 2 3; } .plot-dot { fill: currentColor; } /* Capabilities strip */ .strip { width: var(--wrap); margin: 72px auto 0; display: block; } .strip > p { font-size: 14px; line-height: 1.35; color: var(--dim); } .strip-items { display: flex; justify-content: center; } .strip-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 34px; } .strip-item { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; letter-spacing: -0.045em; color: #1a1a1a; white-space: nowrap; } .strip-item .ico { width: 26px; height: 26px; flex: none; } .strip-item .ico.line { fill: none; stroke: #111; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Benefit cards */ .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; } .benefit { padding: 24px; display: flex; flex-direction: column; min-height: 357px; } .benefit-visual { height: 215px; flex: none; margin-bottom: 18px; display: grid; place-items: center; } .vis { display: grid; place-items: center; width: 100%; height: 100%; } .vis-coins { display: flex; align-items: center; justify-content: center; } .rates { width: min(250px, 100%); display: grid; gap: 4px; mask-image: linear-gradient(180deg, #000 55%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); } .rate-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid rgba(0, 0, 0, .06); } .rate-sym { width: 30px; height: 30px; border-radius: 50%; background: #f2f2f2; display: grid; place-items: center; font-size: 15px; font-weight: 500; } .rate-code { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; } .rate-val { margin-left: auto; font-size: 15px; color: var(--dim); font-variant-numeric: tabular-nums; } .vis-big { flex-direction: column; gap: 22px; display: flex; align-items: center; justify-content: center; } .big-eq { display: grid; gap: 2px; text-align: center; letter-spacing: -0.06em; font-weight: 500; line-height: 1; } .big-in { font-size: 26px; color: #b0b0b0; } .big-out { font-size: 54px; color: #000; } .big-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 270px; } .big-chips span { padding: 5px 11px; border-radius: 999px; background: #f4f4f4; font-size: 12.5px; color: var(--dim); letter-spacing: -0.01em; white-space: nowrap; } .rate-row.conv { padding: 9px 4px; } .conv-arrow { color: #b5b5b5; font-size: 14px; } .rate-row.conv .rate-val { color: var(--blue); font-weight: 500; } .rate-row:first-child .rate-sym { background: #000; color: #fff; } .rate-row:first-child .rate-val { color: #000; } .rate-row.conv:first-child .rate-val { color: var(--blue); } .benefit-visual { overflow: hidden; } .vis-ai img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 22px rgba(150, 120, 230, .25)); animation: orb 6s ease-in-out infinite; } .orb { width: 106px; height: 106px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff 0 8%, transparent 26%), radial-gradient(circle at 70% 72%, #9de8d8 0, transparent 52%), radial-gradient(circle at 28% 70%, #f0b6ec 0, transparent 55%), radial-gradient(circle at 72% 28%, #bcc8ff 0, transparent 55%), #e9e6f7; box-shadow: inset 0 0 14px rgba(255, 255, 255, .9), 0 6px 22px rgba(160, 140, 220, .22); animation: orb 6s ease-in-out infinite; } @keyframes orb { 50% { transform: translateY(-6px) scale(1.03); } } .ring-btn { padding: 12px 36px; border-radius: 12px; background: #fff; color: #000; font-size: 22px; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 5px #f3f3f3, 0 0 0 6px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .06); } @media (prefers-reduced-motion: reduce) { .orb, .vis-ai img { animation: none; } } .benefit h3, .cell h4, .post h5 { font-size: 22px; line-height: 1.1; letter-spacing: -0.05em; } .benefit p, .cell p { font-size: 15px; line-height: 1.45; color: var(--dim); margin-top: 10px; letter-spacing: -0.005em; } /* Tools */ .tools-card { width: min(744px, 100%); margin: 0 auto; padding: 44px 40px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px 14px; justify-items: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); } .tool { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; font-weight: 600; letter-spacing: -0.03em; background: #f4f4f4; color: #222; } .tool.k { background: #000; color: #fff; } .tool.o { background: #ec5a29; color: #fff; } .tool.b { background: #3b78f5; color: #fff; } .tool.y { background: #f6d84a; color: #000; } .tool.g { background: #3db15a; color: #fff; } .tool.p { background: #7a5cf0; color: #fff; } .tool.r { background: #d9534f; color: #fff; } /* Features */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cell { padding: 24px; min-height: 270px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; } .cell .num { position: absolute; top: 24px; left: 24px; padding: 5px 11px; border-radius: 6px; background: #f2f2f2; font-size: 14px; font-weight: 500; letter-spacing: 0; } .cell p { max-width: 280px; } /* Feature card graphics */ .cell { justify-content: flex-start; min-height: 0; } .gfx { height: 128px; margin: 44px 0 22px; border-radius: 10px; background: #f7f7f5; display: grid; place-items: center; overflow: hidden; position: relative; } .fx-why { display: grid; justify-items: end; gap: 8px; width: calc(100% - 36px); font-size: 13px; font-variant-numeric: tabular-nums; } .fx-why-line { display: flex; justify-content: space-between; gap: 12px; width: 100%; } .fx-why-line span { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fx-why-line b { flex: none; color: var(--blue); font-weight: 500; text-decoration: underline dotted; text-underline-offset: 4px; } .fx-why-card { padding: 6px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); font-size: 12px; line-height: 1.5; color: var(--dim); text-align: right; animation: why-in 5s ease-in-out infinite; } @keyframes why-in { 0%, 12% { opacity: 0; transform: translateY(-4px); } 22%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } } @keyframes pulse { 50% { opacity: .3; } } .fx-sheet { width: calc(100% - 36px); display: grid; gap: 2px; font-size: 13px; } .fx-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; } .fx-ln { font-size: 11px; color: #b0b0b0; font-variant-numeric: tabular-nums; } .fx-res { color: var(--blue); font-weight: 500; font-variant-numeric: tabular-nums; } .fx-row u { text-decoration: none; color: #4b5fd6; font-weight: 500; } .fx-row:nth-child(1) { animation: hl 4s ease-in-out infinite; } .fx-row:nth-child(3) { animation: hl 4s ease-in-out infinite 1s; } @keyframes hl { 0%, 40%, 100% { background: transparent; } 10%, 30% { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); } } .fx-plot { width: 100%; height: 100%; padding: 18px 0; } .fx-axis { stroke: #e2e2e2; stroke-width: 1; vector-effect: non-scaling-stroke; } .fx-wave { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawline 4s ease-in-out infinite; } @keyframes drawline { 0% { stroke-dashoffset: 1; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } } .fx-count { display: flex; align-items: center; gap: 14px; } .fx-count svg { width: 48px; height: 48px; transform: rotate(-90deg); } .fx-count circle { fill: none; stroke-width: 3.5; } .fx-count .t { stroke: #e6e6e6; } .fx-count .p { stroke: #000; stroke-linecap: round; stroke-dasharray: 60; animation: sec 60s linear infinite; } @keyframes sec { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 60; } } .fx-count div { display: grid; gap: 2px; } .fx-time { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .fx-sub { font-size: 12px; color: var(--faint); } .fx-themes { position: relative; width: 170px; height: 90px; } .fx-themes .w { position: absolute; top: 12px; width: 92px; height: 64px; border-radius: 8px; padding: 7px 8px; display: flex; gap: 3px; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); transition: transform .3s; } .fx-themes .w i { width: 6px; height: 6px; border-radius: 50%; background: rgba(127, 127, 127, .45); } .w1 { left: 0; background: #fff; transform: rotate(-8deg); animation: fan1 5s ease-in-out infinite; } .w2 { left: 39px; background: #1c1c1e; z-index: 1; animation: fan2 5s ease-in-out infinite; } .w3 { left: 78px; background: linear-gradient(140deg, #dfe8ff, #c9d6ff 50%, #e8dcff); transform: rotate(8deg); animation: fan3 5s ease-in-out infinite; } @keyframes fan1 { 50% { transform: rotate(-12deg) translateX(-6px); } } @keyframes fan2 { 50% { transform: translateY(-6px); } } @keyframes fan3 { 50% { transform: rotate(12deg) translateX(6px); } } .fx-term { width: calc(100% - 36px); height: 96px; border-radius: 9px; background: #161618; color: #e9e9e9; padding: 9px 12px; font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; text-align: left; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); } .fx-tbar { display: flex; gap: 5px; margin-bottom: 8px; } .fx-tbar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3a3c; } .fx-term p { margin: 0; white-space: nowrap; } .fx-ps { color: #7a7a7f; } .fx-cmd { display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; border-right: 1.5px solid #e9e9e9; animation: typeit 6s steps(18) infinite; } @keyframes typeit { 0%, 5% { width: 0; } 40%, 100% { width: 18ch; } } .fx-out { color: #7fe3a1; opacity: 0; animation: outp 6s infinite; } @keyframes outp { 0%, 45% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .gfx * { animation: none !important; } .fx-wave { stroke-dashoffset: 0; } .fx-cmd { width: 18ch; } .fx-out { opacity: 1; } } /* Alternating rows */ .rows { display: grid; gap: 110px; padding-top: 110px; } .row-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; } /* A long line in a demo is cut with an ellipsis instead of widening its column past the screen. */ .row-feature > * { min-width: 0; } .row .src { min-width: 0; } .row-feature.flip .row-copy { order: 2; } .row-copy { display: grid; gap: 22px; align-content: center; padding-right: 30px; } .row-copy.pad-l { padding: 0 0 0 30px; } .row-copy h2 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -0.06em; text-wrap: balance; } .row-copy p { font-size: 17px; line-height: 1.45; color: var(--dim); max-width: 440px; letter-spacing: -0.01em; } .row-img { position: relative; display: flex; align-items: center; justify-content: center; } .row-img .window-slot, .row-img .win-wrap { position: relative; width: 100%; } .row-img .win { border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); } .row-img .win-body { min-height: 190px; font-size: 14px; padding: 12px 18px 22px; } .ai-win { overflow: visible; } .ai-glow { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 13px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px rgba(120, 140, 255, .8), 0 0 40px rgba(150, 100, 255, .5); } .ai-ask { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 500; } .ai-ask svg { width: 13px; height: 13px; fill: #fff; } .t-label { font-size: inherit; } /* Share: the real useratio.app/s page in a browser window, drawn at desktop width and scaled to fit (phone width on small screens). index.html sets --k and the frame's width. */ .browser { width: 100%; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 10px 40px rgba(0, 0, 0, .22); isolation: isolate; } .browser-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: #f6f6f6; border-bottom: 1px solid rgba(0, 0, 0, .08); } .browser-lights { display: flex; gap: 7px; } .browser-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); } .browser-lights i:nth-child(2) { background: #febc2e; } .browser-lights i:nth-child(3) { background: #28c840; } .browser-nav { display: flex; gap: 6px; color: #6b6b6b; } .browser-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .browser-nav svg.off { opacity: .35; } .browser-url { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; height: 26px; border-radius: 7px; background: #e9e9e9; font-size: 12.5px; color: #3a3a3a; white-space: nowrap; overflow: hidden; } .browser-url svg { width: 11px; height: 11px; fill: none; stroke: #6b6b6b; stroke-width: 2.2; stroke-linecap: round; } .browser-view { position: relative; height: calc(var(--h, 640px) * var(--k, .5)); overflow: hidden; background: #f2f2f2; } .browser-view iframe { position: absolute; top: 0; left: 0; width: var(--w, 860px); height: var(--h, 640px); border: 0; transform: scale(var(--k, .5)); transform-origin: 0 0; pointer-events: none; } @media (max-width: 560px) { .browser-bar .browser-nav { display: none; } } /* Why Ratio */ .why-wrap { overflow-x: auto; border-radius: 12px; background: #fff; border: 1px solid var(--line); } .why { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; } .why th, .why td { padding: 16px 14px; text-align: center; border-bottom: 1px solid var(--line); } .why tbody tr:last-child th, .why tbody tr:last-child td { border-bottom: 0; } .why thead th { font-weight: 500; font-size: 14px; } .why thead th span { display: block; margin-top: 6px; } .why thead img { border-radius: 7px; } .why tbody th { text-align: left; font-weight: 400; color: #222; padding-left: 24px; } .why .hl { background: #f7f7f5; } .why svg { width: 22px; height: 22px; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .why .yes { display: inline-grid; } .why .no, .why .txt { color: var(--faint); font-size: 13.5px; } .why-foot { text-align: center; color: var(--faint); font-size: 13.5px; margin-top: 18px; } .why-foot a { text-decoration: underline; text-underline-offset: 2px; } /* Pricing */ .ppp-note { font-size: 14px; color: var(--dim); } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .plan { position: relative; overflow: hidden; padding: 32px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; } .plan > * { position: relative; } .plan.featured { background: #000; color: #fff; border-color: #000; } .plan-name { font-size: 16px; color: var(--dim); letter-spacing: -0.01em; } .featured .plan-name, .featured .plan-sub { color: rgba(255, 255, 255, .6); } .badge { position: absolute; top: 24px; right: 24px; padding: 4px 14px; border-radius: 999px; background: #fff; color: #000; font-size: 13px; font-weight: 500; } .price { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 22px; } .price-num { font-size: 52px; line-height: 1; letter-spacing: -0.06em; font-weight: 500; font-variant-numeric: tabular-nums; } .per { font-size: 16px; color: var(--dim); } .featured .per { color: rgba(255, 255, 255, .65); } .plan-sub { font-size: 13.5px; color: var(--dim); margin-bottom: 24px; } .plan .pill { margin-bottom: 28px; } .featured .pill-dark { background: #fff; color: #000; } .plan-label { font-size: 13px; color: var(--dim); margin-bottom: 14px; } .featured .plan-label { color: rgba(255, 255, 255, .6); } .plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; letter-spacing: -0.01em; } .plan-list li { display: flex; gap: 10px; align-items: flex-start; } .plan-list svg { flex: none; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .pricing-notes { text-align: center; margin-top: 30px; display: grid; gap: 8px; font-size: 14px; color: var(--dim); } .pricing-notes a { text-decoration: underline; text-underline-offset: 2px; } .glow { --mx: 50%; --my: 50%; } .glow:not(.featured)::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(59, 120, 245, .07), transparent 70%); } .glow:hover::after { opacity: 1; } /* Compare + What's new cards */ .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .post { display: flex; flex-direction: column; padding: 12px 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: transform .25s; } .post:hover { transform: translateY(-3px); } .post-img { position: relative; aspect-ratio: 1.44; border-radius: 8px; overflow: hidden; background: #1c1c1e; color: #fff; } .post-img span { font-size: 22px; font-weight: 500; letter-spacing: -0.05em; text-align: center; padding: 0 14px; text-shadow: 0 2px 20px rgba(0, 0, 0, .45); } .post .meta-top { font-size: 14px; color: var(--dim); margin: 14px 0 4px; } .post h5 { font-size: 18px; line-height: 1.22; letter-spacing: -0.04em; margin-top: 12px; flex: 1; } .post .meta-top + h5 { margin-top: 0; } .post-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 14px; color: var(--dim); } .arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f2f2f2; } .arrow svg { width: 13px; height: 13px; fill: none; stroke: #000; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .more { text-align: center; margin-top: 40px; } /* FAQ */ .faq-list { width: min(700px, 100%); margin: 0 auto; padding: 5px; display: grid; gap: 4px; border-radius: 16px; background: rgba(255, 255, 255, .5); } .faq-list details { background: #fff; border-radius: 12px; border: 1px solid var(--line); } .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; font-size: 18px; letter-spacing: -0.03em; cursor: pointer; list-style: none; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f2f2f2; font-size: 18px; line-height: 1; transition: transform .25s; } .faq-list details[open] summary::after { transform: rotate(45deg); } .faq-list details p { padding: 0 24px 22px; color: var(--dim); font-size: 16px; line-height: 1.5; max-width: 600px; } .faq-list details p a { text-decoration: underline; text-underline-offset: 2px; color: #000; } .ask-ai { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; font-size: 14px; color: var(--faint); } .section-head .ask-ai { max-width: none; } /* The label on its own line, the three assistants together on the line below. */ .section-head .ask-ai::before { content: ""; order: 1; flex-basis: 100%; height: 0; } .section-head .ask-ai a { order: 2; } .ask-ai a { position: relative; display: inline-flex; align-items: center; gap: 8px; color: #000; text-underline-offset: 2px; } .ask-ai a:hover { text-decoration: underline; } /* Each assistant shown as its app icon: the real logo on a rounded tile, like a macOS app (logos: Simple Icons, CC0) */ .ask-ai a::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 24%; background: var(--tile); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .14); } .ask-ai a::after { content: ""; position: absolute; left: 5px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--glyph); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; } .ask-ai a[href*="chatgpt.com"] { --logo: url(assets/ai/openai.svg); --tile: #fff; --glyph: #000; } .ask-ai a[href*="claude.ai"] { --logo: url(assets/ai/claude.svg); --tile: #d97757; --glyph: #fff; } .ask-ai a[href*="perplexity.ai"] { --logo: url(assets/ai/perplexity.svg); --tile: #091717; --glyph: #20b8cd; } /* Final card */ .cta-wrap { width: var(--wrap); margin: 100px auto 0; } .cta-card { width: min(800px, 100%); margin: 0 auto; padding: 6px; border-radius: 22px; background: rgba(255, 255, 255, .5); } .cta-inner { background: #fff; border-radius: 17px; padding: 50px 30px 52px; text-align: center; display: grid; justify-items: center; gap: 22px; } .cta-inner .lead { max-width: 400px; } .os-pill svg { width: 16px; height: 16px; fill: currentColor; flex: none; } .os-req { font-size: 13px; color: var(--faint); max-width: 520px; line-height: 1.45; } .final-buy { font-size: 14px; color: var(--dim); } .final-buy a { text-decoration: underline; text-underline-offset: 2px; color: #000; } /* Footer */ .footer { width: var(--wrap); margin: 110px auto 0; padding-bottom: 40px; } .footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-top: 46px; border-top: 1px solid rgba(0, 0, 0, .08); } .footer-top > div:first-child { max-width: 320px; display: grid; gap: 12px; align-content: start; } .footer-top p { font-size: 14px; color: var(--dim); } .footer-top .footer-facts { font-size: 13px; line-height: 1.45; } .footer-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .footer-badge img { height: 40px !important; width: auto !important; border-radius: 8px; display: block; } .footer-badge .badge-for-dark { display: none; } /* Badges drawn for one background: the dark TryMacApps one is inverted, MacBase has a file per theme. */ .cols { display: grid; grid-template-columns: repeat(3, auto); gap: 34px 56px; font-size: 14px; } .cols div { display: grid; gap: 8px; align-content: start; } .cols span { font-weight: 500; margin-bottom: 4px; } .cols a { color: var(--dim); } @media (hover: none) { .cols div { gap: 0; } .cols a { padding: 6px 0; } } .cols a:hover { color: #000; } .wordmark { font-size: clamp(90px, 21vw, 260px); line-height: .9; letter-spacing: -0.07em; color: #e6e6e6; text-align: center; margin: 56px 0 8px; user-select: none; font-weight: 500; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--faint); } .footer-bottom a:hover { color: #000; } /* Misc */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #000; color: #fff; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 999px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 80; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; } .reveal.in { opacity: 1; transform: none; } @keyframes hero-demo-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero .hero-card { animation: hero-demo-fade .45s ease .08s both; transform: none; } .caret { animation: none; } } @media (max-width: 960px) { .cards3, .grid, .plans, .posts { grid-template-columns: 1fr; } .plans, .posts { max-width: 480px; margin: 0 auto; } .cards3, .grid { max-width: 520px; margin: 0 auto; } .row-feature { grid-template-columns: 1fr; } .row-feature.flip .row-copy { order: 0; } .row-copy, .row-copy.pad-l { padding: 0; text-align: center; justify-items: center; } .strip { grid-template-columns: 1fr; text-align: center; } .strip-items { display: flex; justify-content: center; } .tools-card { grid-template-columns: repeat(4, 1fr); padding: 32px 20px; } .links { display: none; } .cols { grid-template-columns: repeat(2, auto); } } @media (max-width: 600px) { .section { padding-top: 76px; } .hero { padding-top: 92px; } .app-win { min-height: 0; } .app-bar { padding: 0 8px 0 14px; height: 46px; } .app-lights { margin-right: 14px; gap: 6px; } .app-lights i { width: 10px; height: 10px; } .app-bar > .app-ico:nth-child(2), .app-bar > .app-ico:nth-last-child(-n+2), .app-trial { display: none; } .app-sheet { padding: 12px 18px 22px 18px; } .app-win .win-body { font-size: 14px; } .app-win .row { padding-bottom: 10px; } .app-win .row { gap: 12px; } .promo-date { display: none; } .hero h1 { font-size: min(52px, calc((100vw - 40px) / 6.4)); } .rows { gap: 80px; padding-top: 80px; } .stage .win-body { padding: 14px 16px 20px; font-size: 14px; } .nav-right { gap: 10px; } .footer-top { flex-direction: column; } } /* Final call to action: one clear button, quiet links for the rest. */ .cta-inner { padding-top: 24px; padding-bottom: 24px; } .final-alt { display: flex; gap: 22px; justify-content: center; margin-top: 22px; font-size: 14px; color: var(--dim); } .final-alt a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; } .final-alt a:hover { color: #000; } /* Side-sliding entrances must never create a horizontal scrollbar. */ body { overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } /* Card visuals: a slice of the app, cut off at the edge like the feature windows. */ .mini { position: absolute; left: 9%; top: 15%; right: 9%; bottom: -14%; padding: 12px 18px; border-radius: 10px; background: #fff; color: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .5s cubic-bezier(.22, 1, .36, 1); } .post:hover .mini { transform: translate(-6px, -6px); } .mini i { display: flex; gap: 5px; margin-bottom: 10px; } .mini u { width: 8px; height: 8px; border-radius: 50%; background: #c9625d; } .mini u:nth-child(2) { background: #dcb04a; } .mini u:nth-child(3) { background: #7bb26a; } .mini h6 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; } .mini p { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 13px; line-height: 1.9; color: #555; white-space: nowrap; } .mini p b { color: var(--blue); font-weight: 500; } /* Phones and foldables: notch-safe edges, no tap highlight, comfortable targets, table that fits. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } a, button, summary { -webkit-tap-highlight-color: transparent; } .nav-inner, .section, .wrap, .footer { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); } .nav { padding-top: env(safe-area-inset-top); } @media (hover: none) { .post:hover, .post:hover .mini { transform: none; } .glow::after { display: none; } } @media (max-width: 960px) { .why { min-width: 0; font-size: 13px; } .why th, .why td { padding: 12px 6px; } .why tbody th { padding-left: 14px; } .why thead span { font-size: 12px; } .why thead img { width: 22px; height: 22px; } } @media (max-width: 600px) { .pill { min-height: 48px; } .pill.small { min-height: 40px; } .section-head h2, .cta-card h2 { font-size: clamp(32px, 9vw, 44px); } .plan { padding: 26px 22px; } .faq-list summary { padding-top: 18px; padding-bottom: 18px; } .footer-top { gap: 32px; } } @media (max-width: 360px) { :root { --wrap: calc(100% - 28px); } .hero h1 { letter-spacing: -0.05em; } .pill { padding: 0 18px; font-size: 14.5px; } } @media (max-width: 600px) { /* Feature label on its own line above the five columns, so nothing gets squeezed. */ .why, .why thead, .why tbody { display: block; } .why tr { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); } .why tbody tr:last-child { border-bottom: 0; } .why th, .why td { border-bottom: 0; padding: 10px 2px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .why thead td:first-child { display: none; } .why thead th { padding: 14px 2px 12px; font-size: 11.5px; } .why thead span { font-size: 11.5px; margin-top: 5px; } .why tbody th { grid-column: 1 / -1; align-items: flex-start; padding: 14px 16px 0; font-size: 14px; font-weight: 500; } .why .hl { background: none; } .why thead th.hl span { font-weight: 600; } .why .no, .why .txt { font-size: 11.5px; line-height: 1.3; text-align: center; } .why svg { width: 20px; height: 20px; } } /* Window cards: keep the rounded corners clean (no square corner showing through while animating). */ .win { isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); } .win-bar { border-radius: 11px 11px 0 0; } .row-img, .benefit-visual, .post-img { isolation: isolate; } /* Older Safari (before 15) has no aspect-ratio. */ @supports not (aspect-ratio: 1) { .post-img { height: 0; padding-top: 69.4%; } } /* Lenis owns the smoothing: native smooth scrolling on top of it makes Chrome and Firefox stutter. */ html.lenis, html.lenis body { height: auto; } html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* Phones: the headline keeps a comfortable gap from the screen edges. */ @media (max-width: 600px) { .hero h1 { font-size: min(50px, calc((100vw - 72px) / 6.6)); padding: 0 6px; } } /* Languages: hide the page for a moment while a translation is swapped in, so English never flashes. */ .i18n-pending body { opacity: 0; animation: i18n-show 0s linear 1.5s forwards; } @keyframes i18n-show { to { opacity: 1; } } .lang-list { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; } .lang-list a { color: var(--faint); } .lang-list a:hover, .lang-list a[aria-current] { color: var(--text); } .lang-switch svg circle, .lang-switch svg path { vector-effect: non-scaling-stroke; } html[lang="ja"] { --sans: "Google Sans", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; } html[lang="zh"] { --sans: "Google Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; } html[lang="ko"] { --sans: "Google Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; word-break: keep-all; } html[lang="ja"] :is(h1, h2, h3, h4, h5, .brand), html[lang="zh"] :is(h1, h2, h3, h4, h5, .brand), html[lang="ko"] :is(h1, h2, h3, h4, h5, .brand) { letter-spacing: 0; } @media (max-width: 600px) { .footer-bottom { flex-direction: column; align-items: center; text-align: center; } .lang-switch summary { padding: 0 8px; } } /* Round country flags in the language pickers. */ .flag { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); display: block; } .lang-switch summary { gap: 7px; } .lang-menu .lang-name { display: flex; align-items: center; gap: 10px; } .lang-list a { display: inline-flex; align-items: center; gap: 7px; } .lang-list .flag { width: 16px; height: 16px; } .lang-menu { max-height: min(70vh, 460px); overflow-y: auto; } /* Theme switches (theme.js): a sun/moon button in the nav, Auto / Light / Dark in the footer. */ /* Dark theme: the same layout on near-black, with cards a step lighter and the dark pills turned light. */ /* Slim, rounded scrollbar in the language menu. */ .lang-menu { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .18) transparent; } .lang-menu::-webkit-scrollbar { width: 10px; } .lang-menu::-webkit-scrollbar-track { background: transparent; margin: 8px 0; } .lang-menu::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } .lang-menu::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .3); } /* Phone nav: logo, flag and one button. Theme lives in the footer, the language code is just the flag. */ @media (max-width: 600px) { .nav-right { gap: 4px; } .lang-switch summary { font-size: 0; gap: 0; padding: 0 8px; height: 40px; } .lang-switch summary .flag { width: 22px; height: 22px; } .nav .pill.small { padding: 0 14px; height: 38px; } } /* Phone hero: a calm, centred stack. Three short headline lines, one clear button, a quiet second action. */ @media (max-width: 600px) { .hero { padding-top: 88px; } .promo { margin-bottom: 22px; font-size: 13px; } .hero h1 { font-size: clamp(44px, 14vw, 58px); line-height: 1; letter-spacing: -0.06em; padding: 0; } .hero h1 .grad { display: block; max-width: 5.8em; margin: 0 auto; text-wrap: balance; } .hero-copy p.sub { font-size: 17px; line-height: 1.4; max-width: 300px; margin: 20px auto 26px; font-weight: 400; } .hero .cta-row { flex-direction: column; align-items: stretch; width: min(300px, 100%); margin: 0 auto; gap: 10px; } .hero .cta-row .pill { width: 100%; height: 50px; } .hero .remind { flex-direction: column; } .hero .remind input[type="email"] { width: 100%; min-width: 0; height: 50px; } .hero .remind-note { max-width: 300px; margin: -8px auto 16px; } .hero .fine { margin-top: 10px; } .hero-card { margin-top: 44px; } } /* Until motion.js takes over (it hides these inline, then animates them in), they stay hidden instead of painting once, vanishing and fading back. The class comes off when it's done, or after 3 s regardless. */ html.motion-pending :is(.hero-copy > *, .section-head > *, .cards3 > .benefit, .grid > .cell, .plans > .plan, .posts > .post, .faq-list > details, .row-feature .row-copy > *, .row-feature .row-img, .why table, .cta-card > *, .strip-item, .benefit-visual, .cell .gfx, .cell .ico, .ai-win .ai-line, .footer-top > *, .footer .wordmark, .footer-bottom, .more, .why-foot) { opacity: 0; } html.motion-pending .statement { opacity: .18; } /* The notch calculator: a strip of desktop with the menu bar; the notch unfolds into a small sheet once it scrolls into view. */ .notch-demo { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #2b3a55 0%, #4a4466 45%, #8a6a73 100%); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); font-variant-numeric: tabular-nums; } .nd-bar { position: absolute; inset: 0 0 auto; height: 30px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 12px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 12.5px; font-weight: 500; } .nd-pin { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .16); opacity: 0; transition: opacity .4s .9s; } .nd-icons { display: flex; gap: 8px; } .nd-icons i { width: 13px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, .7); } .nd-icons i:not(:last-child) { display: none; } .nd-icons i:last-child { width: 22px; height: 10px; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); } .nd-notch { position: absolute; top: 0; left: 50%; width: 130px; height: 30px; margin-left: -65px; border-radius: 0 0 12px 12px; background: #000; overflow: hidden; transition: width .55s cubic-bezier(.3, 1.3, .5, 1), height .55s cubic-bezier(.3, 1.3, .5, 1), margin .55s cubic-bezier(.3, 1.3, .5, 1), border-radius .55s; } .nd-sheet { padding: 38px 16px 14px; color: #f2f2f2; font-size: 12.5px; opacity: 0; transition: opacity .3s; } .nd-sheet p { display: flex; justify-content: space-between; gap: 16px; line-height: 2; white-space: nowrap; } .nd-sheet span { color: #c9c9ce; } .nd-sheet b { font-weight: 500; color: #7fb0ff; } .nd-sheet .nd-total { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .14); } .nd-sheet .nd-total span { color: #fff; font-weight: 500; } .nd-sheet .nd-total b { color: #fff; } .notch-demo.open .nd-notch { width: min(300px, 62%); height: 188px; margin-left: calc(min(300px, 62%) / -2); border-radius: 0 0 26px 26px; } .notch-demo.open .nd-sheet { opacity: 1; transition-delay: .35s; } .notch-demo.open .nd-pin { opacity: 1; } @media (max-width: 600px) { .notch-demo { aspect-ratio: 4 / 3; } .notch-demo.open .nd-notch { width: 74%; margin-left: -37%; } .nd-pin { display: none; } } /* The live notch: app.js rebuilds the demo as the top of a MacBook display and plays the card the way the app does. Everything inside .nd-scr is in points of a 760pt-wide screen (560 on a phone), scaled to fit; the sizes are the app's own. */ /* Apple's Studio Display bezel (Apple Design Resources, assets/studio-display.png, 5400×4160 at the source) laid over the screen: its 5K opening starts 140 px in from the left and the top and is 5120×2880. */ .notch-demo.nd-live { aspect-ratio: 5400 / 4160; overflow: visible; padding: 0; background: none; border-radius: 0; box-shadow: none; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans); -webkit-font-smoothing: antialiased; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .18)); } .nd-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .nd-live .nd-view { position: absolute; left: 2.5926%; top: 3.3654%; width: 94.8148%; height: 69.2308%; overflow: hidden; background: #2a2622; } .nd-scr { position: absolute; top: 0; left: 0; width: 760px; height: 475px; transform-origin: 0 0; transform: scale(var(--k, .66)); overflow: hidden; } .nd-wall { position: absolute; inset: 0; background: url(assets/wallpaper-hero.jpg) 50% 0 / cover; background-image: image-set(url(assets/wallpaper-hero.webp) type("image/webp"), url(assets/wallpaper-hero.jpg) type("image/jpeg")); } .nd-isl { position: absolute; top: 0; left: 50%; opacity: 0; transition: opacity .3s ease-in-out .04s; } .nd-isl.show { opacity: 1; transition: opacity .1s ease-out; } .nd-glass, .nd-card { position: absolute; top: 0; left: 0; } /* Liquid Glass, as the card's .clear glass: solid black over the camera melting into a clear, smoked slab that blurs and brightens the desktop behind it. */ .nd-glass { width: 100%; height: 100%; background: linear-gradient(#000 0 32px, rgba(8, 8, 10, .5) 96px), linear-gradient(rgba(255, 255, 255, 0) 32px, rgba(255, 255, 255, .07) 34px, rgba(255, 255, 255, 0) 80px); backdrop-filter: blur(9px) saturate(1.9) brightness(.92); -webkit-backdrop-filter: blur(9px) saturate(1.9) brightness(.92); overflow: hidden; } .nd-clip { position: absolute; inset: 0; } .nd-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(108deg, transparent 52%, rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .11) 65%, transparent 74%); opacity: 0; transition: opacity .3s; } .nd-glass i { position: absolute; left: 0; right: 0; top: -110px; height: 110px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .17) 50%, rgba(255, 255, 255, .1) 55%, rgba(255, 255, 255, 0)); filter: blur(6px); mix-blend-mode: plus-lighter; } .nd-isl.open .nd-glass::after { opacity: 1; } .nd-isl.open .nd-glass i { animation: nd-sweep .7s cubic-bezier(.2, .7, .3, 1) .05s both; } @keyframes nd-sweep { from { transform: translateY(0); } to { transform: translateY(var(--sweep, 280px)); } } .nd-rim { position: absolute; top: 0; left: 0; overflow: visible; opacity: 0; transition: opacity .25s; pointer-events: none; } .nd-isl.open .nd-rim { opacity: 1; } .nd-card { width: 456px; color: #e8e8e3; font-variant-numeric: tabular-nums; opacity: 0; filter: blur(6px); transform: scale(.94); transform-origin: 50% 0; transition: opacity .1s ease-in, filter .1s ease-in, transform .1s ease-in; } .nd-isl.open .nd-card { opacity: 1; filter: blur(0); transform: none; transition: opacity .26s ease-out .1s, filter .26s ease-out .1s, transform .26s ease-out .1s; } .nd-head { position: absolute; top: 9.5px; left: 18px; right: 18px; height: 14px; display: flex; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, .5); } .nd-head > span { display: flex; align-items: center; gap: 6px; } .nd-head svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .nd-sheetname { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .55); } .nd-lines { position: absolute; top: 38px; left: 24px; right: 24px; padding-top: 5px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; } .nd-ln { position: relative; height: 26px; line-height: 18px; white-space: pre; } .nd-ln b { position: absolute; top: 0; right: 0; font-weight: 500; color: #5ed0db; } .nd-caret { display: inline-block; width: 1.5px; height: 17px; margin: 0 0 -3px 1px; background: #e8e8e3; animation: nd-blink 1.05s steps(1) infinite; } .nd-typing .nd-caret { animation: none; } @keyframes nd-blink { 50% { opacity: 0; } } .nd-sum { position: absolute; left: 30px; right: 30px; height: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; transition: top .16s ease-out; } .nd-sum span { color: #a0a7a8; } .nd-sum b { font-weight: 600; color: #5ed0db; } .nd-cur { position: absolute; top: 0; left: 0; width: 17px; height: 25px; pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); transform-origin: 2px 2px; } /* Widgets: the three Mac widgets as they look on the desktop, in Ratio's own theme, light and dark. */ .wd-demo { display: grid; gap: 14px; width: 100%; font-variant-numeric: tabular-nums; } /* One row of three, always: on a narrow column app.js scales the widgets down together (zoom) instead of wrapping them. */ .wd-set { display: flex; flex-wrap: nowrap; gap: 14px; justify-content: center; } .wd-set > .wd { flex: none; } /* The widgets stand on the page itself: no glow behind them. */ #widgets .row-stage::before { display: none; } .wd-set.light { --wbg: #fcfcf9; --wp: #13343b; --ws: #8a9799; --wsh: 0 0 0 .5px rgba(0, 0, 0, .06), 0 8px 26px rgba(0, 0, 0, .07); } .wd-set.dark { --wbg: #191a1a; --wp: #e8e8e3; --ws: #a0a7a8; --wsh: 0 0 0 .5px rgba(255, 255, 255, .07), 0 10px 30px rgba(0, 0, 0, .4); } .wd { display: flex; flex-direction: column; width: 154px; height: 154px; padding: 16px; box-sizing: border-box; border-radius: 20px; background: var(--wbg); color: var(--wp); box-shadow: var(--wsh); text-align: left; line-height: 1.2; } .wd-sp { flex: 1; } .wd-row { display: flex; justify-content: space-between; align-items: baseline; } .wd-lab { font-size: 11.5px; font-weight: 600; } .wd-dim { font-size: 11.5px; font-weight: 500; color: var(--ws); } .wd-n { font-weight: 500; letter-spacing: -.035em; line-height: .95; } .wd-ring { position: relative; width: 88px; height: 88px; margin: 0 auto; } .wd-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); } .wd-ring div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .wd-logos { display: flex; gap: 8px; } .wd-logo { width: 16px; height: 16px; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; } .wd-bar { display: flex; gap: 2px; height: 3px; margin-top: 10px; border-radius: 99px; overflow: hidden; } .wd-bar span { background: var(--wp); } @media (max-width: 600px) { .wd-set.dark { display: none; } } @media (prefers-reduced-motion: reduce) { .nd-notch, .nd-sheet, .nd-pin { transition: none; } } /* Homepage: Claude calling Ratio through MCP */ .chat { width: 100%; max-width: 480px; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); } .chat-body { display: grid; gap: 12px; padding: 18px 18px 22px; font-size: 14.5px; line-height: 1.45; } .chat-me { justify-self: end; max-width: 85%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--chip); color: var(--text); } .chat-tool { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--dim); font-size: 13px; } .chat-tool b { font-weight: 500; color: var(--text); } .chat-tool code { font: 12.5px/1.4 "SF Mono", ui-monospace, Menlo, monospace; color: var(--text); } .chat-tool span { margin-left: auto; color: var(--blue); font-variant-numeric: tabular-nums; } .chat-ai { max-width: 92%; color: var(--text); } /* Floating nav: a glass pill that sits off the top edge instead of a full-width bar. */ .nav { padding-top: calc(12px + env(safe-area-inset-top)); pointer-events: none; } .nav-inner { pointer-events: auto; width: min(1076px, calc(100% - 24px)); height: 60px; padding: 0 10px 0 20px; border-radius: 999px; border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s, backdrop-filter .3s; } .nav.scrolled .nav-inner { background: rgba(250, 250, 250, .62); border-color: rgba(0, 0, 0, .06); box-shadow: 0 10px 34px rgba(0, 0, 0, .08); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); } /* Phones: less to read, more room around it. The headings and the app pictures carry each section. */ @media (max-width: 600px) { .nav { padding-top: calc(10px + env(safe-area-inset-top)); } .nav-inner, .nav.scrolled .nav-inner { width: calc(100% - 20px); height: 54px; padding: 0 6px 0 14px; background: rgba(250, 250, 250, .62); border-color: rgba(0, 0, 0, .06); box-shadow: 0 8px 28px rgba(0, 0, 0, .08); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); } .brand { font-size: 20px; gap: 8px; } .brand img { width: 26px; height: 26px; } .nav .pill.small { height: 40px; min-height: 40px; } .rows .row-copy p, .why-foot, .plan-label { display: none; } .section { padding-top: 104px; } .rows { gap: 112px; padding-top: 104px; } .row-copy { gap: 20px; } .row-copy h2 { font-size: clamp(32px, 9.5vw, 40px); } .section-head p, .features p, .why p { line-height: 1.5; } .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .cols > div:nth-child(5) { display: none; } .footer-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; } .footer-badges img { max-width: 100%; } } /* Phones and tablets: "Email me the link" opens a sheet from the bottom with the email field (nomac.js). */ .remind-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .remind-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; width: min(480px, 100%); margin: 0 auto; min-height: min(72vh, 640px); display: flex; flex-direction: column; align-items: center; padding: 12px 24px calc(32px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--card); text-align: center; transform: translateY(105%); visibility: hidden; transition: transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .4s; } .remind-open .remind-backdrop { opacity: 1; visibility: visible; } .remind-open .remind-sheet { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s; } .remind-open, .remind-open body { overflow: hidden; } .remind-grab { display: block; flex: none; width: 40px; height: 5px; margin: 0 auto 32px; border-radius: 3px; background: rgba(127, 127, 127, .35); } .remind-sheet .remind-note { margin: 0 auto 30px; max-width: 330px; font-size: 18px; line-height: 1.75; color: var(--text); text-wrap: balance; } .remind-sheet .remind { width: 100%; } .remind-fine { margin-top: 16px; font-size: 13px; color: var(--faint); } .remind-sheet .remind { flex-direction: column; gap: 12px; } .remind-sheet .remind input[type="email"] { width: 100%; min-width: 0; height: 52px; background: var(--bg); } .remind-sheet .remind .pill { width: 100%; height: 52px; } .hero .remind-note.done { max-width: 300px; margin: 0 auto; } @media (prefers-reduced-motion: reduce) { .remind-sheet, .remind-backdrop { transition: none; } } .remind-os { display: inline-flex; align-items: center; gap: 5px; margin: 2px 2px; padding: 1px 9px 1px 7px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); font-weight: 500; white-space: nowrap; vertical-align: 1px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .12s; } .remind-os svg { width: 15px; height: 15px; fill: currentColor; flex: none; } .remind-os[data-os="windows"] svg { fill: #2f8cf0; } .remind-os[data-os="linux"] svg { fill: #e8a917; } @media (min-width: 601px) { .remind-sheet { width: min(720px, calc(100% - 48px)); min-height: 0; padding: 14px 64px calc(52px + env(safe-area-inset-bottom)); } .remind-sheet .remind-note { max-width: 440px; } .remind-sheet .remind { max-width: 440px; } } .remind-lead { display: block; margin-bottom: 14px; } .remind-tags { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; } .remind-tags .remind-os { margin: 0; padding: 5px 12px 5px 10px; border-radius: 12px; gap: 6px; font-size: 16px; } .remind-tags .remind-os svg { width: 17px; height: 17px; } .remind-sheet { min-height: 0; justify-content: flex-start; padding-top: 44px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); } .remind-grab { position: absolute; top: 12px; left: 50%; margin: 0 0 0 -20px; } /* Phone hero uses the whole width instead of a narrow column in the middle. */ @media (max-width: 600px) { .hero-copy p.sub { max-width: none; font-size: 18px; text-wrap: pretty; } .hero-copy { padding-left: 20px; padding-right: 20px; } .hero .cta-row { width: 100%; } .hero .remind-note.done { max-width: none; } .hero .fine { display: block; max-width: none; padding: 0 8px; text-wrap: balance; } } /* While the keyboard is up: the sheet sits on it, with less room around everything. */ .remind-kb .remind-sheet { padding-top: 30px; padding-bottom: 16px; } .remind-kb .remind-grab { top: 10px; } .remind-kb .remind-fine { display: none; } .remind-kb .remind-sheet .remind-note { margin-bottom: 16px; font-size: 16px; line-height: 1.5; } .remind-kb .remind-lead { margin-bottom: 8px; } .remind-kb .remind-tags { margin-bottom: 10px; } .remind-kb .remind-sheet .remind input[type="email"], .remind-kb .remind-sheet .remind .pill { height: 48px; min-height: 48px; } /* Phones: "Email me the link" turns into an email field in place, with a round arrow to send (nomac.js). */ .remind-slot .remind-pill, .remind-pill-msg:empty { display: none; } .remind-slot.on > .pill { display: none; } .remind-slot.on .remind-pill { display: flex; animation: remind-pill-in .38s cubic-bezier(.22, 1, .36, 1); } @keyframes remind-pill-in { from { transform: scaleX(.94); opacity: .3; } } .remind-pill { align-items: center; gap: 8px; height: 54px; padding: 0 6px 0 22px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s; } .remind-pill:focus-within { border-color: var(--faint); } .remind-pill input[type="email"] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: none; } .remind-go { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--text); color: var(--bg); cursor: pointer; transition: opacity .2s, transform .15s; } .remind-go:active { transform: scale(.94); } .remind-go:disabled { opacity: .5; } .remind-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .remind-pill-msg { margin-top: 10px; font-size: 14px; color: #d70015; text-align: center; } @media (max-width: 600px) { } /* Customer review under the plans */ .review { max-width: 640px; margin: 44px auto 0; padding: 30px 32px; border-radius: 12px; background: #fff; border: 1px solid var(--line); text-align: center; } .review blockquote { margin: 0; } .review blockquote p { margin: 0; font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; } .review figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; text-align: left; } .review img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .review figcaption span { display: grid; font-size: 14px; line-height: 1.35; color: var(--faint); } .review figcaption b { font-weight: 500; color: var(--text); } @media (max-width: 600px) { .review { margin-top: 32px; padding: 24px 22px; } .review blockquote p { font-size: 16.5px; } } /* Two reviews side by side; one under the other on narrow screens. */ .reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 44px auto 0; align-items: stretch; } .reviews .review { max-width: none; margin: 0; display: flex; flex-direction: column; justify-content: space-between; } .reviews .review figcaption { align-self: center; } .review-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e9e9ec; color: var(--text); font-size: 16px; font-weight: 500; } @media (max-width: 860px) { .reviews { grid-template-columns: 1fr; max-width: 640px; } } @media (max-width: 600px) { .reviews { margin-top: 32px; gap: 14px; } } /* ---- Hero laptop: a MacBook mockup, with Ratio's window on its screen ---- .laptop-screen is a 720×431 desktop drawn at 2× (zoom), so text stays sharp; app.js fits it into the mockup's screen, which is a hole in the image, so the frame and notch sit on top. Everything inside is sized in those desktop pixels. The window is Ratio's Smoked Glass over a wallpaper; the keyboard fades into the page. */ .hero-card:has(.laptop) { width: min(980px, calc(100% - 28px)); } .laptop { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); } /* only picks WebP or PNG; it must not add a box of its own around the . */ .laptop picture, .chip-die picture { display: contents; } .laptop picture > source, .chip-die picture > source { display: none; } .laptop-img { position: relative; z-index: 1; display: block; width: 100%; height: auto; user-select: none; pointer-events: none; } .laptop-screen { position: absolute; left: 0; top: 0; width: 1440px; height: 863px; transform-origin: 0 0; visibility: hidden; background: #000; overflow: hidden; } .laptop.ready .laptop-screen { visibility: visible; } .laptop-display { position: relative; zoom: 2; height: 100%; overflow: hidden; background: #b9b2a8 url("assets/wallpaper-hero.jpg") center / cover; background-image: image-set(url("assets/wallpaper-hero.webp") type("image/webp"), url("assets/wallpaper-hero.jpg") type("image/jpeg")); } /* Ratio's Smoked Glass, as the app draws it: clear glass under a black veil at 78%, the dark theme's colours on top, and a thin lit rim. */ html:root .laptop .app-win { --a-bg: transparent; --a-text: #f2f2ee; --a-dim: #9a9fa1; --a-label: #c9cfd0; --a-accent: #5ccfdc; --a-result: #7fd6e3; --a-edge: rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); } html:root .laptop .app-win .app-ico { stroke: #fff; } html:root .laptop .app-win .app-title b, html:root .laptop .app-win .app-title span { color: #fff; } .laptop .hero-tilt { position: absolute; left: 16px; right: 16px; top: 26px; bottom: -10px; } .laptop .app-win { height: 100%; min-height: 0; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 44px rgba(0, 0, 0, .45); } .laptop .app-bar { height: 46px; padding: 0 14px 0 18px; } .laptop .app-lights { gap: 8px; margin-right: 22px; } .laptop .app-lights i { width: 11px; height: 11px; } .laptop .app-bar > .app-ico:nth-child(2) { margin-right: 14px; } .laptop .app-title { gap: 2px; } .laptop .app-trial, .laptop .app-bar > .app-ico:not(:nth-child(2)) { display: none; } .laptop .app-win .win-body { font-size: 18px; line-height: 1.2; } .laptop .app-win .res { font-weight: 600; } .laptop .app-win .row { padding-bottom: 13px; gap: 18px; } .laptop .app-win .row.head { padding-bottom: 16px; } .laptop .app-sheet { padding: 18px 30px 16px 28px; } /* The glass: a soft reflection across the top of the screen. */ .laptop-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 38%, transparent 39%); } @media (max-width: 600px) { .hero-card:has(.laptop) { width: calc(100% + 8px); } } /* Capabilities strip as an endless marquee: the items are in the page twice and the track slides left by half its width, then starts over, with both ends fading out. Spacing is a margin, not a gap, so the two halves are equal. */ /* The fades are two gradients in the page colour laid over the ends, not a mask: Safari clips a moving track inside a masked box to what was first painted, so the loop looked cut off. */ .strip .strip-items { position: relative; overflow: hidden; justify-content: flex-start; } .strip .strip-items::before, .strip .strip-items::after { content: ""; position: absolute; top: 0; bottom: 0; width: 16%; z-index: 1; pointer-events: none; } .strip .strip-items::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .strip .strip-items::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .strip .strip-track { flex-wrap: nowrap; gap: 0; width: max-content; justify-content: flex-start; animation: strip-marquee 40s linear infinite; will-change: transform; } .strip .strip-item { margin-right: 52px; } .strip .strip-items:hover .strip-track { animation-play-state: paused; } @keyframes strip-marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .strip .strip-items { justify-content: center; } .strip .strip-items::before, .strip .strip-items::after { display: none; } .strip .strip-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 16px 34px; } .strip .strip-item { margin-right: 0; } .strip .strip-item[aria-hidden] { display: none; } } /* Hero headline: two short lines, "Write it down." / "It adds up.", large and evenly tracked, the second line in a soft silver gradient. Comes last so it wins over the older per-breakpoint sizes above. */ .hero h1 { font-size: clamp(54px, 9vw, 108px); line-height: 1.02; letter-spacing: -0.05em; } .hero h1 .grad { background: linear-gradient(100deg, #6e6e73 10%, #b4b4b9 90%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; } .hero-copy p.sub { font-size: 21px; line-height: 1.42; font-weight: 400; max-width: 620px; letter-spacing: -0.012em; margin: 28px auto 36px; } @media (max-width: 600px) { .hero h1 { font-size: min(60px, 13.4vw); letter-spacing: -0.05em; } .hero h1 .grad { display: inline; max-width: none; } .hero-copy p.sub { font-size: 17px; line-height: 1.45; max-width: 320px; margin: 20px auto 26px; } } /* A looping demo fades out before it types itself again. */ [data-loop] { transition: opacity .4s ease; } [data-loop].demo-out { opacity: 0; } /* "Try me": a small label with a hand-drawn arrow at the hero laptop's screen. */ .try-label { display: inline-flex; align-items: flex-end; gap: 4px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--dim); } .try-arrow { width: 34px; height: 27px; margin-bottom: 8px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .hero-card:has(.laptop) { position: relative; } @media (max-width: 600px) { } /* Type scale modeled on shotbase.com: Hanken Grotesk headings (free stand-in for TWK Everett) at medium weight, ~3% negative tracking and a 1.2 line height; body copy 16/24 with slight negative tracking. CJK pages keep the system fonts and zero tracking (rule above has higher specificity). Comes last on purpose. */ html:not([lang="ja"]):not([lang="zh"]):not([lang="ko"]) :is(h1, h2, h3, h4, h5) { font-family: "Hanken Grotesk", var(--sans); } h1, h2, h3, h4, h5 { font-weight: 500; letter-spacing: -0.03em; } .hero h1 { font-size: clamp(54px, 7.6vw, 84px); line-height: 1; letter-spacing: -0.035em; font-weight: 500; } .hero-copy p.sub { font-size: 18px; line-height: 1.5; letter-spacing: -0.015em; } .section-head h2, .cta-card h2, .row-copy h2 { font-size: clamp(34px, 4.2vw, 48px); line-height: 1.2; letter-spacing: -0.03em; } .benefit h3 { font-size: 27px; line-height: 1.2; font-weight: 400; letter-spacing: -0.03em; } .cell h4 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; } .post h5 { font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; } .section-head p, .lead, .row-copy p, .benefit p, .cell p { font-size: 16px; line-height: 1.5; letter-spacing: -0.019em; } @media (max-width: 600px) { .hero h1 { font-size: min(54px, 13.4vw); line-height: 1.02; } .hero-copy p.sub { font-size: 16px; } .section-head h2, .cta-card h2, .row-copy h2 { font-size: clamp(30px, 8.4vw, 38px); } .benefit h3 { font-size: 24px; } } /* Calculator vs Ratio: two layers in one frame, the top one clipped at the handle. */ .cmp-frame { margin-top: 56px; padding: 18px; border-radius: 36px; background: rgba(0, 0, 0, .035); border: 1px solid rgba(0, 0, 0, .05); } .cmp { --pos: 50%; position: relative; height: 520px; border-radius: 22px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; background: var(--card); border: 1px solid var(--line); } .cmp-layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; } .cmp-calc { background: var(--bg); padding-right: 50%; } .cmp-ratio { background: var(--card); clip-path: inset(0 0 0 var(--pos)); padding-left: 50%; } .cmp-label { position: absolute; top: 18px; height: 30px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--chip); color: var(--dim); } .cmp-calc .cmp-label { left: 18px; } .cmp-ratio .cmp-label { right: 18px; background: var(--text); color: var(--bg); } .cmp-note { font-size: 14px; color: var(--faint); letter-spacing: -0.01em; } .cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; padding: 0; border: 0; background: var(--text); opacity: .9; cursor: ew-resize; } .cmp-handle svg { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 10px; border-radius: 50%; background: var(--text); color: var(--bg); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .cmp-handle:focus-visible svg { outline: 2px solid var(--blue); outline-offset: 3px; } .calc { width: 232px; padding: 18px 16px 16px; border-radius: 22px; background: #1c1c1e; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .06); font-family: var(--sans); } .calc-screen { display: grid; justify-items: end; padding: 18px 6px 12px; color: #fff; } .calc-hist { font-size: 14px; color: #8e8e93; } .calc-num { font-size: 52px; font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; } .calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .calc-keys i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #333336; color: #fff; font-style: normal; font-size: 20px; } .calc-keys .fn { background: #a5a5aa; color: #000; font-size: 16px; } .calc-keys .op { background: #ff9f0a; font-size: 24px; } .calc-keys .zero { grid-column: span 2; aspect-ratio: auto; border-radius: 999px; justify-content: start; padding-left: 19px; } .cmp-win { width: min(420px, 84%); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .25); } .cmp-win .win-body { font-size: 15px; padding: 14px 22px 18px; } @media (max-width: 600px) { .cmp-frame { margin-top: 40px; padding: 10px; border-radius: 26px; } /* Too narrow to sit side by side: stacked, no handle. */ .cmp-hint { display: none; } .cmp { height: auto; border-radius: 18px; cursor: auto; display: grid; } .cmp-layer { position: relative; inset: auto; padding: 60px 16px 28px !important; clip-path: none; } .cmp-ratio { border-top: 1px solid var(--line); } .cmp-handle { display: none; } .calc { width: 200px; } .calc-num { font-size: 44px; } .cmp-win { width: 100%; } .cmp-win .win-body { font-size: 13.5px; padding: 12px 14px 16px; } } /* The line the visitor writes in, at the bottom of the hero window: looks like any other line, with a caret. */ .laptop.can-try { cursor: text; } .laptop .try-row { margin-top: 6px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .14); } .laptop .try-row .src { flex: 1; min-width: 0; } .try-input { width: 100%; padding: 0; margin: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--a-text); caret-color: var(--a-accent); } .try-input::placeholder { color: var(--a-dim); opacity: .8; } .laptop .try-row .res.hint { color: var(--a-dim); font-weight: 400; font-size: .8em; } /* Animated keypresses on the compare calculator. */ .calc-keys i { transition: filter .25s, transform .25s, background .25s, color .25s; } .calc-keys i.down { filter: brightness(1.55); transform: scale(.93); transition-duration: .05s; } .calc-keys .op.on { background: #fff; color: #ff9f0a; } .calc-hist { min-height: 1.4em; } .cmp-win .win-body { min-height: 220px; } /* "Try me" points at the line the visitor writes in: beside the laptop when there's room (.side), under it otherwise (.below). app.js places it and shows it once the line is there. */ .hero-card > .try-label { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; transition: opacity .5s ease; pointer-events: none; align-items: center; gap: 6px; font-size: 16px; white-space: nowrap; } .hero-card > .try-label.ready { opacity: 1; } .hero-card > .try-label .try-arrow { width: 44px; height: 30px; margin: 0; } .hero-card > .try-label.below { flex-direction: column; gap: 0; font-size: 15px; } .hero-card > .try-label.below .try-arrow { width: 34px; height: 24px; transform: rotate(90deg); } .hero-card > .try-label.side { flex-direction: column-reverse; align-items: flex-start; gap: 2px; } .hero-card > .try-label.side .try-arrow { width: 50px; height: 34px; margin-left: -8px; } /* On phones the laptop demo only plays: no line to write in, no "Try me". */ @media (max-width: 600px) { .laptop .try-row, .hero-card > .try-label { display: none; } .laptop.can-try { cursor: auto; } } .cards3.cards2 { grid-template-columns: repeat(2, 1fr); } /* The sheet in the "Change one number" card, at card size. */ .fx-sheet-big { width: min(300px, 100%); gap: 4px; font-size: 15px; } .fx-sheet-big .fx-row { height: 38px; } .rates-split { mask-image: none; -webkit-mask-image: none; } .rates-split .rate-sym svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* The circle shows the first letter of the (translated) name. */ .rates-split .ini { display: block; font-size: 0; line-height: 30px; text-align: center; } .rates-split .ini::first-letter { font-size: 15px; } @media (max-width: 960px) { .cards3.cards2 { grid-template-columns: 1fr; } } /* Nav as a compact glass pill in the middle, with a Features menu of tinted cards (one per homepage feature). */ @media (min-width: 601px) { .nav-inner, .nav.scrolled .nav-inner { position: relative; width: max-content; max-width: calc(100% - 24px); height: 58px; gap: 20px; padding: 0 8px 0 18px; background: rgba(250, 250, 250, .66); border-color: rgba(0, 0, 0, .06); box-shadow: 0 10px 34px rgba(0, 0, 0, .08); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); } .nav-right { gap: 14px; } .links { align-items: center; gap: 18px; font-size: 15px; } } .mega-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; opacity: .9; } .mega-btn:hover, .mega.open .mega-btn { opacity: .55; } .mega-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; } .mega.open .mega-btn svg { transform: rotate(180deg); } .mega-panel { position: absolute; top: calc(100% + 10px); left: 50%; width: min(600px, calc(100vw - 24px)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 26px; background: #fafafa; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 24px 60px rgba(0, 0, 0, .16); opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(.98); transform-origin: 50% 0; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s .25s; } .mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps hover alive across the gap */ .mega.open .mega-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s; } .mega-card { display: grid; align-content: start; gap: 4px; padding: 16px 18px 18px; border-radius: 18px; background: var(--card); background: color-mix(in srgb, var(--accent) 9%, var(--card)); opacity: 1 !important; transition: background .2s, transform .2s; } .mega-card:hover { background: color-mix(in srgb, var(--accent) 16%, var(--card)); transform: translateY(-1px); } /* An odd card out fills the last row, laid out sideways, so the grid never ends on a lone half. */ .mega-card:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .mega-card:last-child:nth-child(odd) i { grid-row: span 2; margin-bottom: 0; } .mega-card:last-child:nth-child(odd) b { align-self: end; } .mega-card:last-child:nth-child(odd) span { align-self: start; } .mega-card i { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 11px; background: var(--accent); } .mega-card i svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mega-card b { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); } .mega-card span { font-size: 13.5px; line-height: 1.4; letter-spacing: -0.005em; color: var(--dim); } @media (prefers-reduced-motion: reduce) { .mega-panel, .mega-btn svg, .mega-card { transition: none; } } /* Pricing: a tinted shell holding the plan's name, with the price and button on a card inside it. */ .plans { gap: 20px; align-items: stretch; } .plan { padding: 8px; border-radius: 28px; background: rgba(0, 0, 0, .035); border: 1px solid rgba(0, 0, 0, .05); color: var(--text); } .plan-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 0; } .plan-name { font-size: 21px; font-weight: 500; letter-spacing: -0.03em; color: var(--text); } .plan .badge { position: static; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--text); font-size: 12.5px; font-weight: 500; } .plan .plan-sub { margin: 6px 0 16px; padding: 0 18px; font-size: 14px; color: var(--dim); min-height: 2.9em; } .plan-body { flex: 1; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 21px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -18px rgba(0, 0, 0, .18); } .plan-devices { display: flex; gap: 6px; height: 24px; color: var(--faint); } .plan-devices svg { width: 32px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .plan .price { margin: 18px 0 24px; flex-wrap: wrap; } .plan .pill { margin-bottom: 22px; } .plan .plan-list { gap: 10px; font-size: 14.5px; color: var(--dim); } /* The popular plan is the inverted one. */ .plan.featured { background: #232325; border-color: #232325; color: #fff; } .plan.featured .plan-name { color: #fff; } .plan.featured .plan-sub { color: rgba(255, 255, 255, .6); } .plan.featured .badge { background: #fff; color: #000; } .plan.featured .plan-body { background: #0b0b0c; border-color: rgba(255, 255, 255, .08); color: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); } .plan.featured .plan-devices { color: rgba(255, 255, 255, .5); } .plan.featured .plan-list { color: rgba(255, 255, 255, .72); } /* Everything included: one grid under the plans instead of the same list in each card. */ .included { margin-top: 56px; } .included-title { margin-bottom: 18px; text-align: center; font-size: 14px; font-weight: 500; color: var(--faint); letter-spacing: -0.01em; } .included-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; border-top: 1px solid var(--line); } .included-list li { display: flex; align-items: center; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 15px; letter-spacing: -0.01em; } .included-list svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 960px) { .plan .plan-sub { min-height: 0; } .included-list { grid-template-columns: repeat(2, 1fr); column-gap: 20px; } } @media (max-width: 600px) { .plan { padding: 6px; border-radius: 24px; } .plan-body { padding: 22px 20px 20px; } .included-list li { font-size: 13.5px; gap: 9px; padding: 13px 2px; } } .plan:not(.featured) .badge { background: var(--card); box-shadow: 0 0 0 1px var(--line); } /* The nav keeps only the section links and Download: theme and language live in the footer. */ /* Feature rows: a tag, the heading and three checks on one side; the picture in a neutral frame on the other. */ .rows { gap: 150px; padding-top: 140px; } .row-feature { --accent: var(--blue); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; } .row-feature.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .row-copy, .row-copy.pad-l { padding: 0; gap: 0; justify-items: start; } .row-tag { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; } .row-tag svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .row-copy h2 { margin-top: 22px; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.045em; } .row-checks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; } .row-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16.5px; line-height: 1.4; letter-spacing: -0.015em; color: var(--text); opacity: .86; } .row-checks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat, var(--accent); } .row-link { margin-top: 30px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); opacity: .7; transition: opacity .2s, gap .2s; } .row-link::after { content: "→"; } .row-link:hover { opacity: 1; gap: 9px; } .row-stage { position: relative; width: 100%; padding: 40px; border-radius: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 0; isolation: isolate; } /* A soft halo in the feature's accent colour that fades to the page background instead of a boxed frame. */ .row-stage::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 48%, transparent) 0%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 100%); } .row-stage .win, .row-stage .notch-demo:not(.nd-live) { box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 60px -12px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06); } .row-stage .chat { max-width: none; } @media (max-width: 960px) { .row-feature, .row-feature.flip { grid-template-columns: 1fr; gap: 40px; } .row-copy, .row-copy.pad-l { justify-items: center; text-align: center; } .row-checks { justify-self: center; text-align: left; } } @media (max-width: 600px) { .rows { gap: 100px; padding-top: 96px; } .row-stage { padding: 28px 16px; border-radius: 22px; } .row-checks li { font-size: 15.5px; } } /* Black CTA and footer, one continuous block that runs to the bottom of the page. */ .cta-wrap.final { width: auto; margin: 100px 0 0; padding: 72px 20px 52px; background: #000; color: #fff; border-radius: 32px 32px 0 0; } .cta-wrap.final .cta-card { padding: 0; background: none; } .cta-wrap.final .cta-inner { padding: 0; background: none; } .cta-wrap.final h2 { color: #fff; } .cta-wrap.final .lead, .cta-wrap.final .os-req, .cta-wrap.final .final-buy, .cta-wrap.final .final-alt, .cta-wrap.final .final-alt a { color: #a1a1a6; } .cta-wrap.final .final-alt a:hover, .cta-wrap.final .final-buy a { color: #fff; } .cta-wrap.final .pill-dark { background: #fff; color: #000; } .cta-wrap.final .pill-dark:hover { background: #e8e8e8; } .cta-wrap.final .pill-light { background: #171719; color: #fff; border-color: rgba(255, 255, 255, .12); box-shadow: none; } .cta-wrap.final .pill-light:hover { background: #232326; } .footer { width: auto; margin: 110px 0 0; padding: 0 max(20px, calc((100% - 1076px) / 2)) calc(40px + env(safe-area-inset-bottom)); background: #000; color: #fff; border-radius: 32px 32px 0 0; } main:has(> .final:last-child) + .footer { margin-top: 0; border-radius: 0; } .footer-top { padding-top: 64px; border-top: 0; } main:has(> .final:last-child) + .footer .footer-top { padding-top: 46px; border-top: 1px solid rgba(255, 255, 255, .1); } @media (max-width: 600px) { .cta-wrap.final { margin-top: 64px; padding: 48px 20px 36px; border-radius: 26px 26px 0 0; } main:has(> .final:last-child) + .footer .footer-top { padding-top: 34px; } } .footer .brand, .footer .cols span { color: #fff; } .footer-top p, .cols a { color: #a1a1a6; } .cols a:hover, .footer-bottom a:hover { color: #fff; } .wordmark { color: #1a1a1a; } .footer-bottom { color: #6e6e73; } .footer-badge .badge-for-light { display: none; } .footer-badge .badge-for-dark { display: block; } .footer-badge .badge-invert { filter: invert(1); } /* Private and local: a dark violet panel with a chip that holds the Apple Intelligence mark. */ .privacy { position: relative; overflow: hidden; border-radius: 36px; padding: 56px 24px 28px; text-align: center; color: #f2f2f2; background: linear-gradient(180deg, #0a0a0b 0%, #131314 55%, #232325 100%); } .privacy-copy { display: grid; justify-items: center; gap: 20px; position: relative; z-index: 2; } .privacy-tag { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; } .privacy h2 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; color: #fff; } .privacy-copy p { max-width: 560px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .7); text-wrap: balance; } .chip-stage { position: relative; width: min(760px, 100%); height: 340px; margin: 20px auto 0; display: grid; place-items: center; perspective: 900px; } .chip-line { position: absolute; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 80%, transparent); } .chip-h { left: -12%; right: -12%; height: 1px; } .chip-v { top: -10%; bottom: -10%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 80%, transparent); } .chip-h1 { top: calc(50% - 130px); } .chip-h2 { top: calc(50% + 130px); } .chip-v1 { left: calc(50% - 130px); } .chip-v2 { left: calc(50% + 130px); } .chip { position: relative; width: 260px; height: 260px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 2px, rgba(255, 255, 255, .04) 2px 5px); clip-path: polygon(0 0, 86% 0, 100% 14%, 100% 100%, 0 100%); display: grid; place-items: center; transform-style: preserve-3d; } .chip-die { position: relative; width: 190px; height: 190px; background: linear-gradient(145deg, #1e1e20, #060607); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 60px -10px rgba(0, 0, 0, .7); overflow: hidden; display: grid; place-items: center; } .chip-glow { position: absolute; inset: -30%; background: radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .16) 38%, transparent 65%); animation: chip-glow 5s ease-in-out infinite; } .chip-die img { position: relative; width: 128px; height: 128px; border-radius: 30px; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .45)); } .chip-screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #05040a; } .chip-screw.s1 { left: 7px; top: 7px; } .chip-screw.s2 { left: 7px; bottom: 7px; } .chip-screw.s3 { right: 7px; bottom: 7px; } .privacy-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .7); } .privacy-note svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @keyframes chip-glow { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } @media (max-width: 860px) { .privacy { padding: 52px 16px 30px; border-radius: 26px; } .chip-stage { height: 320px; } .chip-h { left: -2%; right: -2%; } .chip { scale: .8; } } @media (prefers-reduced-motion: reduce) { .chip-glow { animation: none; } } /* The nav sits on a plain, near-opaque surface: no blur behind it. */ .nav, .nav.scrolled, .nav-inner, .nav.scrolled .nav-inner { backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-inner, .nav.scrolled .nav-inner { background: rgba(250, 250, 250, .94); } .nav, .nav.scrolled { background: none; } /* The language menu, in the Features menu's style: a soft panel centred under the bar, the languages as tiles. The switch itself is static, so the panel hangs from the bar rather than from the small button. */ .lang-switch { position: static; } .lang-menu { position: absolute; left: 50%; right: auto; top: calc(100% + 10px); z-index: 60; width: min(600px, calc(100vw - 24px)); min-width: 0; max-height: none; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 26px; background: #fafafa; box-shadow: 0 24px 60px rgba(0, 0, 0, .16); transform: translateX(-50%); animation: lang-in .25s cubic-bezier(.2, .8, .2, 1); } @keyframes lang-in { from { opacity: 0; transform: translate(-50%, -6px) scale(.98); } } .lang-menu a { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--text); text-decoration: none; transition: background .2s, transform .2s; } .lang-menu a:hover, .lang-menu a:focus-visible { background: #f0f0f0; transform: translateY(-1px); outline: none; } .lang-menu .lang-name { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; white-space: nowrap; } .lang-menu .flag { flex: none; width: 24px; height: 24px; } .lang-menu small { margin-left: auto; color: var(--faint); font-size: 11px; font-weight: 500; letter-spacing: .04em; } .lang-menu a[aria-current] { background: color-mix(in srgb, #3b82f6 10%, #fff); } .lang-menu a[aria-current]::after { content: none; } .lang-menu a:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (max-width: 600px) { .lang-menu a { padding: 11px 12px; } } @media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } .lang-menu a { transition: none; } } /* The calculator vs Ratio comparison needs a wide screen to drag; phones skip it. */ @media (max-width: 860px) { #versus { display: none; } } /* The footer's language picker: one button that opens the language panel upwards. */ .lang-slot { display: flex; justify-content: center; } .lang-foot { position: relative; } .lang-foot summary, .lang-switch.lang-foot summary { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; border: 1px solid var(--line); color: var(--text); } .lang-foot summary .flag { width: 18px; height: 18px; } .lang-foot .lang-chev { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .2s; } .lang-foot[open] .lang-chev { transform: rotate(180deg); } .lang-foot .lang-menu { top: auto; bottom: calc(100% + 10px); animation-name: lang-up; text-align: left; } @keyframes lang-up { from { opacity: 0; transform: translate(-50%, 6px) scale(.98); } } .footer .lang-foot summary { color: #e8e8ea; border-color: rgba(255, 255, 255, .16); } .footer .lang-foot summary:hover, .footer .lang-foot[open] summary { background: rgba(255, 255, 255, .08); } @media (max-width: 600px) { .lang-switch.lang-foot summary { font-size: 13.5px; gap: 8px; padding: 0 14px 0 10px; height: 38px; } .lang-switch.lang-foot summary .flag { width: 18px; height: 18px; } }