/* Colours come from the app's Theme.swift (light appearance). */
:root {
  --canvas: #F4F4F5;
  --card: #FFFFFF;
  --raised: #EBECEE;
  --ink: #121315;
  --muted: #63666D;
  --line: #DADCE0;
  --action: #000435;
  --focus: #1D4ED8;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

html[lang="ar"] body { font-family: -apple-system, BlinkMacSystemFont, "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", system-ui, sans-serif; }
html[lang^="zh"] body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }

img { max-width: 100%; }

a { color: inherit; }

h1, h2 { margin: 0; font-weight: 800; }
/* Tight tracking for Latin scripts only: it breaks Arabic joining and adds nothing to Chinese. */
html:not([lang="ar"]):not([lang^="zh"]) h1,
html:not([lang="ar"]):not([lang^="zh"]) h2 { letter-spacing: -0.022em; }

.wrap { max-width: 1168px; margin: 0 auto; padding-inline: 24px; }

.lead { margin: 0; max-width: 36em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--muted); }

/* ---------- Header ---------- */

.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block: 20px; }
.brand-wrap { flex-grow: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand img { display: block; width: 40px; height: 40px; border-radius: 10px; }
.brand span { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

.lang { position: relative; }
.lang-button { font: inherit; font-size: 15px; cursor: pointer; }
.lang-menu {
  position: absolute; top: 52px; inset-inline-end: 0; z-index: 20;
  min-width: 210px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(18, 19, 21, 0.12);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 15px;
}
.lang-menu a:hover, .lang-menu a:focus-visible { background: var(--canvas); }
.lang-menu a[aria-current="page"] { background: var(--canvas); }
.lang-menu a[aria-current="page"]::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000435' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: var(--action); color: #FFFFFF;
  font-family: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out;
}
.btn-small { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-large { min-height: 52px; padding: 0 28px; font-size: 17px; margin-top: 8px; }
.btn-submit { min-height: 52px; border-radius: 12px; font-size: 17px; }
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px rgba(0, 4, 53, 0.28); }
.btn-primary:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 6px rgba(0, 4, 53, 0.2); }
.btn-primary[disabled] { opacity: 0.7; cursor: progress; transform: none; box-shadow: none; }

.btn-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}
.lang-button { font-weight: 400; padding: 0 14px; }
.btn-pill:hover { background: var(--canvas); border-color: var(--muted); transform: translateY(-1px); }
.btn-pill:active { transform: scale(0.98); }

.btn-primary:focus-visible, .btn-pill:focus-visible, .brand:focus-visible, .foot-link:focus-visible, .lang-menu a:focus-visible, .note a:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}

/* ---------- Hero ---------- */

.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 40px; padding-bottom: 96px; }
.hero-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero-visual { flex: 0 1 300px; min-width: 0; margin: 0 auto; }

.eyebrow {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--canvas); font-size: 13px; font-weight: 600;
}

h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.06; white-space: pre-line; }

/* The sign-up form, drawn as a boarding pass. */
.pass { position: relative; margin-top: 12px; width: 100%; max-width: 520px; background: var(--canvas); border-radius: 22px; overflow: hidden; }
.pass-body { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.pass-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.pass input[type="email"] {
  width: 100%; min-height: 50px; padding: 0 14px;
  border: 1px solid var(--muted); border-radius: 12px;
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 17px;
}
.pass input[type="email"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
html[dir="rtl"] .pass input[type="email"] { text-align: right; }
.consent { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.form-status { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.45; }
.form-status[data-state="success"] { background: #E3F2EA; color: #0F5C34; }
.form-status[data-state="error"] { background: #FBE6E7; color: #9A1F27; }

.perforation { position: relative; height: 0; margin: 0 18px; border-top: 2px dashed var(--line); }
.perforation span { position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); }
.perforation span:first-child { inset-inline-start: -30px; }
.perforation span:last-child { inset-inline-end: -30px; }

.pass-fields { margin: 0; padding: 16px 22px 20px; display: flex; flex-wrap: wrap; gap: 12px 40px; }
.pass-fields div { display: flex; flex-direction: column; gap: 2px; }
.pass-fields dt { font-size: 12px; color: var(--muted); }
.pass-fields dd { margin: 0; font-size: 15px; font-weight: 600; }

.note { margin: 0; max-width: 520px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.note a { color: var(--action); font-weight: 600; }

/* ---------- Phones ---------- */

.phone { position: relative; }
.phone .frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; }
/* The screen sits behind the frame's transparent glass. */
.screen {
  position: absolute; z-index: 1; left: 6.67%; top: 3.32%; width: 86.33%; height: 92.9%;
  border-radius: 14% / 6.8%; overflow: hidden; background: var(--raised);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16% 8px 0; text-align: center;
}
.screen .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ph-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ph-name { font-size: 15px; font-weight: 600; }
.ph-name-lg { font-size: 17px; }
.ph-name-sm { font-size: 13px; }

.hero-phone { width: 100%; max-width: 300px; margin: 0 auto; }

/* ---------- Feature grids ---------- */

.section { padding-block: 48px; }
.section h2, .cta h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; }
.section .lead { margin-top: 12px; }

.grid { margin-top: 40px; display: grid; gap: 32px 24px; }
.grid-a { grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 48px) / 3)), 1fr)); }
.grid-b { grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - 72px) / 4)), 1fr)); }

figure { margin: 0; display: flex; flex-direction: column; gap: 16px; }
figcaption { display: flex; flex-direction: column; gap: 4px; text-align: center; }
figcaption strong { font-size: 19px; font-weight: 600; }
.grid-b figcaption strong { font-size: 17px; }
figcaption span { font-size: 15px; line-height: 1.45; color: var(--muted); }

.shot-tile { position: relative; background: var(--canvas); overflow: hidden; }
.shot-tile-a { aspect-ratio: 10 / 13; border-radius: 24px; }
.shot-tile-b { aspect-ratio: 4 / 5; border-radius: 22px; }
.shot-phone { position: absolute; left: 14%; width: 72%; }
.shot-tile-a .shot-phone { top: 36px; }
.shot-tile-b .shot-phone { top: 28px; }

/* Rise and reveal: the phone slides up so its whole screen shows. A mouse or trackpad triggers it by
   hovering; a touch screen has no hover, so main.js adds .is-revealed to the tile crossing the middle
   of the screen and the same motion runs as you scroll. */
.shot-tile { overflow: visible; transition: clip-path 0.45s var(--ease-out); }
.shot-tile-a { clip-path: inset(0 round 24px); }
.shot-tile-b { clip-path: inset(0 round 22px); }
.shot-phone, .hero-phone { transform-origin: 50% 100%; transition: transform 0.45s var(--ease-out), filter 0.45s var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .shot-tile-a:hover { clip-path: inset(-400px -80px 0 -80px round 24px); z-index: 2; }
  .shot-tile-b:hover { clip-path: inset(-400px -80px 0 -80px round 22px); z-index: 2; }
  .shot-tile-a:hover .shot-phone { transform: translateY(calc(-7% - 48px)) scale(1.04); filter: drop-shadow(0 18px 30px rgba(18, 19, 21, 0.18)); }
  .shot-tile-b:hover .shot-phone { transform: translateY(calc(-11% - 40px)) scale(1.04); filter: drop-shadow(0 18px 30px rgba(18, 19, 21, 0.18)); }
  .hero-phone:hover { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 18px 30px rgba(18, 19, 21, 0.18)); }
}

/* Nothing here is the visitor's own action, so it stays off when they ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: none), (pointer: coarse) {
    /* The raised phone pokes out above its tile by an amount that grows with the tile's width, so
       leave that much room above each row instead of letting it cover the text above. */
    .grid { margin-top: calc(20px + 17vw); row-gap: calc(20px + 17vw); }
    .shot-tile-a.is-revealed { clip-path: inset(-400px -80px 0 -80px round 24px); z-index: 2; }
    .shot-tile-b.is-revealed { clip-path: inset(-400px -80px 0 -80px round 22px); z-index: 2; }
    .shot-tile-a.is-revealed .shot-phone { transform: translateY(calc(-7% - 48px)) scale(1.04); filter: drop-shadow(0 18px 30px rgba(18, 19, 21, 0.18)); }
    .shot-tile-b.is-revealed .shot-phone { transform: translateY(calc(-11% - 40px)) scale(1.04); filter: drop-shadow(0 18px 30px rgba(18, 19, 21, 0.18)); }
    .hero-phone.is-revealed { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 18px 30px rgba(18, 19, 21, 0.18)); }
  }
}

/* ---------- About ---------- */

.about { background: var(--canvas); border-radius: 28px; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 24px; }
.about-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.about-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.about h2 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.15; }
.portrait { flex: 0 0 auto; display: block; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.role { font-size: 15px; color: var(--muted); }
.bio { max-width: 40em; display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.bio p { margin: 0; }
.follow { display: flex; flex-direction: column; gap: 10px; }
.follow > span { font-size: 15px; font-weight: 600; }
.follow-links { display: flex; flex-wrap: wrap; gap: 12px; }
.follow-links .btn-pill { padding: 0 18px; }

/* ---------- Closing call to action ---------- */

.cta { padding-top: 72px; padding-bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }

/* ---------- Footer ---------- */

.site-footer { background: var(--canvas); border-top: 1px solid var(--line); }
.footer-inner { padding-top: 48px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 32px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
.tagline { margin: 0; flex: 1 1 320px; max-width: 30em; font-size: 15px; line-height: 1.55; color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 32px; }
.foot-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-size: 15px; text-decoration: none; }
.foot-link:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.disclaimer { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- Legal pages (privacy.html, terms.html) ---------- */

/* Same left edge as the logo and footer; the text column stays at a readable width. */
.legal { padding-top: 24px; padding-bottom: 96px; }
.legal > * { max-width: 712px; }
.legal h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08; }
.legal .updated { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.legal h2 { margin-top: 48px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; scroll-margin-top: 24px; }
.legal h3 { margin: 24px 0 0; font-size: 17px; font-weight: 700; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; }
.legal p { margin: 12px 0 0; }
.legal ul { margin: 12px 0 0; padding-inline-start: 22px; }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--action); font-weight: 600; }
.legal a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.legal code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; background: var(--canvas); padding: 1px 6px; border-radius: 6px; }

.summary { margin-top: 32px; padding: 24px 28px; background: var(--canvas); border-radius: 22px; }
.summary h2 { margin: 0; font-size: 19px; }
.summary ul { margin-top: 12px; }

.toc { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.toc h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.toc ol { margin: 12px 0 0; padding: 0; list-style: none; columns: 2 240px; column-gap: 32px; }
.toc li { margin: 0; break-inside: avoid; font-size: 15px; line-height: 1.4; }
.toc a { display: inline-block; padding: 6px 0; color: var(--ink); font-weight: 400; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.uses { margin-top: 16px; width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.uses th, .uses td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.uses th { font-size: 13px; font-weight: 600; color: var(--muted); }
.uses td:first-child { font-weight: 600; width: 40%; }
@media (max-width: 640px) {
  .uses thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .uses, .uses tbody, .uses tr, .uses td { display: block; width: 100%; }
  .uses tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .uses td { padding: 2px 0; border: 0; }
  .uses td:first-child { width: 100%; margin-bottom: 4px; }
  .uses td:not(:first-child)::before { content: attr(data-label) ": "; color: var(--muted); }
}

.contact-card { margin-top: 16px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 18px; }
.contact-card p { margin: 0; }
.contact-card p + p { margin-top: 4px; color: var(--muted); font-size: 15px; }
.foot-link[aria-current="page"] { font-weight: 600; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary, .btn-pill, .shot-tile, .shot-phone, .hero-phone { transition: none; }
  .btn-primary:hover, .btn-pill:hover { transform: none; }
}