@charset "utf-8"; /* Alike landing page * * Design tokens mirror Packages/DesignSystem/Sources/DesignSystem/Theme.swift * so the site and the app read as one product. Colours come from Color.accent * and friends; the spacing and radius scales are the Spacing and CornerRadius * enums verbatim. * * No web fonts, no scripts, no third-party requests. The privacy policy claims * Alike collects nothing, and a landing page that phoned home would make that * claim false. */ :root { /* Theme.swift Color.accent = rgb(0.12, 0.62, 0.72) */ --accent: #1F9EB8; --accent-strong: #17798D; /* Color.secondaryAccent = rgb(0.18, 0.76, 0.86) */ --accent-soft: #2EC2DB; /* Color.heroGold / Color.heroCoral */ --gold: #FAC242; --coral: #F27A52; /* Color.statusReviewed. --success is the decorative fill; --success-text is the darkened variant used wherever the green carries words or an icon, because #38B261 only reaches 2.7:1 on white and would fail WCAG AA. */ --success: #38B261; --success-text: #237842; /* White text needs a darker field than --accent (3.16:1) to clear AA, so badges and the step index paint on --accent-strong instead. */ --on-accent-bg: #17798D; --on-accent-fg: #FFFFFF; /* Mascot purple, sampled from the app icon */ --purple: #7B4FE0; --bg: #FFFFFF; --bg-tint: #F4F7F9; --surface: #FFFFFF; --border: rgba(16, 32, 40, 0.12); --text: #10222A; --text-muted: #4E6470; /* Spacing enum */ --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px; --s-3xl: 64px; /* CornerRadius enum */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; /* The chevrons and the checkmark are drawn, not glyphs: two borders on a square, turned. The borders are logical (border-inline-*), so they follow the reading direction on their own — but a rotation is a plain angle and does not, which left the chevrons lying on their side and the checkmark reading as a chevron in ar. The angles live here so the direction is decided once. */ --turn-chevron: 45deg; --turn-chevron-open: -135deg; --turn-check: -45deg; --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.05); --shadow-raised: 0 4px 10px rgba(0, 0, 0, 0.10); --measure: 68ch; --wrap: 1120px; /* Font.appTitle uses design: .rounded — mirror it with the system rounded face, falling back through the normal system stack. */ --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { /* AccentColor.colorset dark variant = rgb(0.16, 0.67, 0.76) */ --accent: #29ABC2; --accent-strong: #4FC3D6; --bg: #0E1417; --bg-tint: #141C21; --surface: #182127; --border: rgba(180, 210, 220, 0.16); --text: #ECF3F6; --text-muted: #A3B6BF; /* On a dark field the bright green already clears AA, and the accent is light enough to need dark text on top of it. */ --success-text: #38B261; --on-accent-bg: #29ABC2; --on-accent-fg: #0E1417; --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.5); } } /* The one place direction is decided. `dir` is set on from `dir:` in _data/.yml, so this block is what an rtl locale flips — and it is where the next direction-dependent value belongs, rather than in the rule that uses it. scripts/check-site.sh asserts that every rotate() in this sheet reads a token defined here. */ :root[dir="rtl"] { --turn-chevron: -45deg; --turn-chevron-open: 135deg; --turn-check: 45deg; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, .brand__name, .plan__price { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.01em; } img, picture, svg { max-width: 100%; height: auto; display: block; } a { color: var(--accent-strong); } a:hover { color: var(--accent); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-lg); } .wrap--narrow { max-width: 780px; } .skip-link { position: absolute; /* Logical, so the skip link lands at the reading edge in ar as it does in en. Everything else in this sheet already uses margin-inline/padding-inline and text-align: start, which is why adding a right-to-left locale needed one property changed rather than a stylesheet pass. */ inset-inline-start: var(--s-md); top: -100px; z-index: 20; padding: var(--s-xs) var(--s-md); background: var(--accent); color: #fff; border-radius: var(--r-sm); text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: var(--s-md); color: #fff; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); min-height: 60px; } .brand { display: inline-flex; align-items: center; gap: var(--s-xs); text-decoration: none; color: var(--text); font-weight: 700; font-size: 19px; } .brand__mark { border-radius: var(--r-sm); width: 32px; height: 32px; } .nav__list { display: flex; align-items: center; gap: var(--s-lg); margin: 0; padding: 0; list-style: none; } .nav__list a { color: var(--text-muted); text-decoration: none; font-size: 15px; font-weight: 500; } .nav__list a:hover { color: var(--text); } /* The source link is a glyph with no text: the flex box drops the line box the nav's font-size would otherwise reserve around it. The glyph inherits the link colour, so the nav's hover rule tints it like any other item. flex: none on both the item and the glyph is load-bearing. A flex item's default is to shrink, and text items can shrink by wrapping, so at 320px the header balanced itself by squeezing the one item that cannot wrap: the icon rendered under a pixel wide, invisible and with no hit target, while the row still reported no overflow. */ .nav__list > li { flex: none; } .nav__icon { display: flex; flex: none; } .nav__icon svg { flex: none; width: 18px; height: 18px; fill: currentColor; } /* Language switcher. Six locales are too many for the single pill-shaped link this replaced, and the site ships no JavaScript, so it is a
disclosure — the same mechanism the FAQ uses. The summary keeps the old pill styling, so the header looks unchanged until it is opened. */ .lang { position: relative; } .lang__current { color: var(--accent-strong); font-weight: 600; font-size: 15px; padding: var(--s-xxs) var(--s-sm); padding-inline-end: calc(var(--s-sm) + 12px); border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; cursor: pointer; list-style: none; position: relative; } .lang__current::-webkit-details-marker { display: none; } .lang__current::after { content: ""; position: absolute; inset-inline-end: var(--s-sm); top: calc(50% - 3px); width: 6px; height: 6px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(var(--turn-chevron)); transition: transform 0.18s ease; } .lang[open] .lang__current::after { transform: rotate(var(--turn-chevron-open)); } .lang__list { position: absolute; inset-inline-end: 0; top: calc(100% + var(--s-xs)); z-index: 20; min-width: 100%; margin: 0; padding: var(--s-xxs); list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); } .lang__list li { margin: 0; } .lang__list a { display: block; padding: var(--s-xxs) var(--s-sm); border-radius: var(--r-sm); white-space: nowrap; } .lang__list a:hover { background: var(--bg-tint); color: var(--text); } /* Narrow screens drop the in-page anchors: those sections are directly below the fold and the footer repeats every link, so Support, the source link and the language switch are all that need to stay reachable from the header. */ @media (max-width: 719px) { /* Keep the brand and the three destinations that remain useful on a small screen on separate rows. The nav row then has the full content width, so even the longest translated Support/language labels cannot force the header wider than its 320px viewport. */ .site-header__inner { flex-wrap: wrap; row-gap: var(--s-xs); } .nav { flex: 1 0 100%; } .nav__anchor { display: none; } .nav__list { justify-content: flex-end; flex-wrap: wrap; gap: var(--s-md); } } /* ---------- hero ---------- */ .hero { padding: var(--s-3xl) 0 var(--s-2xl); } .hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--s-2xl); } .hero__eyebrow { margin: 0 0 var(--s-xs); color: var(--accent-strong); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } .hero__headline { margin: 0 0 var(--s-md); font-size: clamp(2rem, 5.2vw, 3.25rem); font-weight: 800; } .hero__subhead { margin: 0 0 var(--s-lg); max-width: 52ch; font-size: 1.125rem; color: var(--text-muted); } /* App Store badge. Apple's Identity Guidelines own how this looks, so the rules here only place it: the artwork is their SVG and is never restyled — no recolouring, no border-radius of ours, no hover tint on the image itself. The paragraph carries no margin because the spacing below the badge comes from .hero__badge-note; default

margins would double it. */ .hero__badge { margin: 0; } .hero__badge-link { display: inline-block; /* Apple asks for clear space of at least 10% of the badge's height on every side. At 48px tall that is 4.8px, so 8px keeps a margin over the minimum even against the headline's optical edge. */ padding: var(--s-xs); margin: calc(var(--s-xs) * -1); } .hero__badge-link img { display: block; /* Comfortably over the 40px minimum height the guidelines set for the badge, and `width: auto` keeps Apple's aspect ratio whatever locale's artwork it is — the localized badges are wider than the English one. */ height: 48px; width: auto; } .hero__badge-note { margin: var(--s-xs) 0 var(--s-lg); font-size: 14px; color: var(--text-muted); } .hero__trust { display: flex; align-items: center; gap: var(--s-xs); margin: 0; color: var(--success-text); font-weight: 600; } .hero__trust-glyph { width: 22px; height: 22px; flex: none; } .hero__art { justify-self: center; } .hero__art img { width: min(420px, 100%); height: auto; } @media (max-width: 859px) { .hero { padding-top: var(--s-xl); } .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__subhead { margin-inline: auto; } .hero__trust { justify-content: center; } .hero__art { order: -1; } .hero__art img { width: min(300px, 78%); } } /* ---------- sections ---------- */ .section { padding: var(--s-3xl) 0; } .section--tint { background: var(--bg-tint); } .section--privacy { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--bg)), var(--bg)); } .section__title { margin: 0 0 var(--s-sm); font-size: clamp(1.6rem, 3.4vw, 2.25rem); font-weight: 700; } .section__subtitle { margin: 0 0 var(--s-xl); max-width: var(--measure); color: var(--text-muted); font-size: 1.0625rem; } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); margin: 0; padding: 0; list-style: none; counter-reset: step; } .step { text-align: center; } .step__art { margin: 0 auto var(--s-sm); width: 200px; height: 200px; } .step__index { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0 auto var(--s-xs); border-radius: 999px; background: var(--on-accent-bg); color: var(--on-accent-fg); font-family: var(--font-display); font-weight: 700; font-size: 15px; } .step__title { margin: 0 0 var(--s-xs); font-size: 1.25rem; } .step__body { margin: 0; color: var(--text-muted); } @media (max-width: 859px) { .steps { grid-template-columns: 1fr; gap: var(--s-2xl); } .step__art { width: 160px; height: 160px; } } /* ---------- features ---------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s-md); margin: 0; padding: 0; list-style: none; } .feature { padding: var(--s-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .feature__title { margin: 0 0 var(--s-xs); font-size: 1.0625rem; } .feature__body { margin: 0; color: var(--text-muted); font-size: 15px; } /* ---------- screenshots ---------- */ /* Five frames, one row. `auto-fit` with a 220px floor needs 1228px to lay out five columns, but the content box is 1072px — so it silently dropped to four and orphaned the fifth on its own line. The slot count is fixed by _data/screens.yml, so state it: five explicit columns, each free to shrink below the phone's 260px cap. */ .shots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-lg); margin: 0; padding: 0; list-style: none; } .phone { margin-inline: auto; width: 100%; max-width: 260px; padding: 10px; background: var(--text); border-radius: 34px; box-shadow: var(--shadow-raised); } .phone__screen { position: relative; aspect-ratio: 1320 / 2868; overflow: hidden; border-radius: 26px; background: var(--bg-tint); } .phone__screen img { width: 100%; height: 100%; object-fit: cover; } .phone__pending { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-muted); opacity: 0.45; } .phone__pending svg { width: 46px; height: 46px; } .shot__caption { margin: var(--s-sm) 0 0; text-align: center; font-weight: 600; font-size: 15px; } /* ---------- privacy ---------- */ .privacy { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: var(--s-2xl); } .claims { margin: 0 0 var(--s-xl); padding: 0; list-style: none; } .claim { display: flex; gap: var(--s-sm); margin-bottom: var(--s-md); } .claim__glyph { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--success-text); } .claim__title { margin: 0 0 2px; font-size: 1.0625rem; } .claim__body { margin: 0; color: var(--text-muted); font-size: 15px; } .privacy__art { justify-self: center; } .privacy__art img { width: min(300px, 100%); } @media (max-width: 859px) { .privacy { grid-template-columns: 1fr; } .privacy__art { order: -1; } .privacy__art img { width: min(220px, 65%); } /* Five across stops being legible well before the layout breaks. Three, not `auto-fit`: at this width auto-fit lands on four columns and strands the fifth frame alone on the next row — the exact thing being fixed above. Five items over three columns reads as 3 + 2. */ .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 519px) { /* One per row on a phone. Two columns would leave a lone fifth frame again, and `.phone` already caps itself at 260px and centres. */ .shots { grid-template-columns: 1fr; } } /* ---------- buttons ---------- */ .button { display: inline-block; padding: var(--s-sm) var(--s-lg); border-radius: var(--r-md); font-family: var(--font-display); font-weight: 600; text-decoration: none; } .button--ghost { border: 1.5px solid var(--accent); color: var(--accent-strong); background: transparent; } .button--ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } /* ---------- pricing ---------- */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-lg); align-items: start; } .plan { position: relative; padding: var(--s-xl); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); } .plan--featured { border-color: var(--accent); border-width: 2px; box-shadow: var(--shadow-raised); } .plan__badge { position: absolute; top: calc(-1 * var(--s-sm)); inset-inline-start: var(--s-xl); margin: 0; padding: var(--s-xxs) var(--s-sm); border-radius: 999px; background: var(--on-accent-bg); color: var(--on-accent-fg); font-size: 12px; font-weight: 700; } .plan__name { margin: 0 0 var(--s-xs); font-size: 1.35rem; } .plan__price { margin: 0 0 var(--s-md); font-size: 1.9rem; font-weight: 800; } .plan__price--note { font-size: 1rem; font-weight: 500; color: var(--text-muted); } .plan__trial { display: inline-block; margin: 0 0 var(--s-md); padding: var(--s-xxs) var(--s-sm); border-radius: var(--r-sm); background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success-text); font-weight: 600; font-size: 14px; } .plan__features { margin: 0; padding: 0; list-style: none; } .plan__features li { position: relative; padding-inline-start: var(--s-lg); margin-bottom: var(--s-xs); color: var(--text-muted); font-size: 15px; } .plan__features li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 12px; height: 7px; border-inline-start: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(var(--turn-check)); } .disclosure { max-width: var(--measure); margin: var(--s-xl) auto 0; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.55; } .disclosure p { margin: 0 0 var(--s-xs); } .disclosure__links { display: flex; justify-content: center; gap: var(--s-md); } /* ---------- faq ---------- */ .faq { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .faq__item { border-bottom: 1px solid var(--border); } .faq__item:last-child { border-bottom: 0; } .faq__q { padding: var(--s-md) var(--s-lg); padding-inline-end: var(--s-2xl); position: relative; cursor: pointer; font-family: var(--font-display); font-weight: 600; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; position: absolute; inset-inline-end: var(--s-lg); top: calc(50% - 4px); width: 9px; height: 9px; border-inline-end: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(var(--turn-chevron)); transition: transform 0.18s ease; } .faq__item[open] .faq__q::after { transform: rotate(var(--turn-chevron-open)); } .faq__q:hover { color: var(--accent-strong); } .faq__a { padding: 0 var(--s-lg) var(--s-md); color: var(--text-muted); } .faq__a p { margin: 0; } /* ---------- long-form pages ---------- */ .prose { max-width: var(--measure); padding-block: var(--s-2xl) var(--s-3xl); } .prose h1 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); margin: 0 0 var(--s-md); } .prose h2 { margin: var(--s-2xl) 0 var(--s-sm); font-size: 1.5rem; } .prose h3 { margin: var(--s-xl) 0 var(--s-xs); font-size: 1.15rem; } .prose p, .prose li { color: var(--text); } .prose blockquote { margin: var(--s-lg) 0; padding: var(--s-md) var(--s-lg); border-inline-start: 3px solid var(--accent); background: var(--bg-tint); /* Logical, so the square corners stay on the side the accent bar is on. The physical four-value form put them opposite the border in ar. */ border-radius: var(--r-md); border-start-start-radius: 0; border-end-start-radius: 0; color: var(--text-muted); } .prose blockquote p:first-child { margin-top: 0; } .prose blockquote p:last-child { margin-bottom: 0; } .prose code { padding: 2px 5px; border-radius: var(--r-sm); background: var(--bg-tint); font-size: 0.9em; } .prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-2xl) 0; } /* Tables in the legal pages must scroll rather than push the page sideways. */ .prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--s-lg) 0; font-size: 15px; } .prose th, .prose td { padding: var(--s-xs) var(--s-sm); border: 1px solid var(--border); text-align: start; vertical-align: top; } .prose th { background: var(--bg-tint); font-weight: 700; } /* ---------- footer ---------- */ .site-footer { padding: var(--s-2xl) 0; border-top: 1px solid var(--border); background: var(--bg-tint); } .site-footer__tagline { margin: 0 0 var(--s-md); font-family: var(--font-display); font-weight: 600; } .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-md) var(--s-lg); margin-bottom: var(--s-md); } .site-footer__links a { color: var(--text-muted); text-decoration: none; font-size: 15px; } .site-footer__links a:hover { color: var(--accent-strong); text-decoration: underline; } /* All six languages, flat. This is the bottom of the page, there is room, and a reader who scrolled here looking for their language should not have to open a disclosure to find it. */ .site-footer__langs { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-md); margin-bottom: var(--s-md); } .site-footer__lang { color: var(--text-muted); text-decoration: none; font-size: 14px; } a.site-footer__lang:hover { color: var(--accent-strong); text-decoration: underline; } .site-footer__lang--current { color: var(--text); font-weight: 600; } /* Apple's trademark credit. Smaller and quieter than the copyright line: it is a required notice, not something a reader came here to read. */ .site-footer__trademarks { margin: var(--s-xs) 0 0; max-width: 60ch; font-size: 12px; color: var(--text-muted); } .site-footer__legal { margin: 0; color: var(--text-muted); font-size: 13px; } .site-footer__built { display: block; } /* ---------- motion and print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media print { .site-header, .site-footer__links, .site-footer__langs, .hero__art, .skip-link { display: none; } body { background: #fff; color: #000; } .faq__item[open] .faq__a, .faq__a { display: block; } }