/*
 * Export Contacts Pro (iOS) — self-contained, mobile-first stylesheet.
 *
 * Deliberately independent of /css/styles.css: that stylesheet serves the
 * desktop-first Mac app site in two languages, this one serves a small nine
 * language app site that is read on a phone first. Only the colour tokens are
 * kept identical so both sites feel like the same house.
 */

:root,
:root[data-theme="light"] {
  --bg: oklch(0.985 0.003 90);
  --text: oklch(0.5 0.015 90);
  --text-heading: oklch(0.22 0.01 90);
  --card: oklch(1 0 0);
  --border: oklch(0.9 0.005 90);
  --accent: oklch(0.62 0.19 245);
  --bar-bg: oklch(0.985 0.003 90 / 0.82);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.06), 0 8px 24px oklch(0 0 0 / 0.08);
  /* Warm, not the accent blue — the badge has to stand apart from the CTA
     button right above it, and it picks up the orange of the screenshots. */
  --badge-bg: oklch(0.93 0.085 85);
  --badge-text: oklch(0.44 0.12 62);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.19 0.01 250);
    --text: oklch(0.68 0.02 90);
    --text-heading: oklch(0.95 0.01 90);
    --card: oklch(0.24 0.012 250);
    --border: oklch(1 0 0 / 0.1);
    --accent: oklch(0.72 0.14 245);
    --bar-bg: oklch(0.19 0.01 250 / 0.82);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px oklch(0 0 0 / 0.35);
    --badge-bg: oklch(0.45 0.11 68);
    --badge-text: oklch(0.96 0.045 88);
  }
}

:root[data-theme="dark"] {
  --bg: oklch(0.19 0.01 250);
  --text: oklch(0.68 0.02 90);
  --text-heading: oklch(0.95 0.01 90);
  --card: oklch(0.24 0.012 250);
  --border: oklch(1 0 0 / 0.1);
  --accent: oklch(0.72 0.14 245);
  --bar-bg: oklch(0.19 0.01 250 / 0.82);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px oklch(0 0 0 / 0.35);
  --badge-bg: oklch(0.45 0.11 68);
  --badge-text: oklch(0.96 0.045 88);
}

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

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP",
    "Apple SD Gothic Neo", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  color: var(--text-heading);
  line-height: 1.25;
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

img {
  max-width: 100%;
}

/* The page gutter, shared by every block so nothing drifts out of alignment. */
.wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- top bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
}

.bar-brand {
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Language menu: a native disclosure, so it works before any script runs. */
.lang {
  position: relative;
}

.lang > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
}

.lang > summary::-webkit-details-marker {
  display: none;
}

.lang > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
}

.lang > summary:hover,
.lang[open] > summary {
  background: color-mix(in oklch, var(--text) 10%, transparent);
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.lang-menu a {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
}

.lang-menu a:hover {
  background: color-mix(in oklch, var(--text) 8%, transparent);
}

.lang-menu a[aria-current="true"] {
  color: var(--text-heading);
  font-weight: 600;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.theme-toggle:hover {
  background: color-mix(in oklch, var(--text) 10%, transparent);
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
}

/* One icon per theme, so the button always shows what it switches to. */
.theme-toggle .icon-dark {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-light {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-dark {
  display: block;
}

/* ------------------------------------------------------------------- hero */

/* .hero and .legal also carry .wrap, so only the vertical padding is set here
   — a shorthand would wipe out the page gutter. */
.hero {
  padding-top: 40px;
  padding-bottom: 8px;
  text-align: center;
}

.app-icon {
  width: 96px;
  height: 96px;
  border-radius: 22.5%;
  box-shadow: var(--shadow);
  display: block;
  margin: 0 auto 20px;
}

/* No text-transform: uppercase here. It would render "iPhone" as "IPHONE",
   which is wrong in every language and looks worse still next to Japanese or
   Chinese, where only the Latin part of the line would change. Colour, weight
   and tracking mark the eyebrow well enough on their own. */
.eyebrow {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--accent);
}

.hero h1 {
  font-size: clamp(1.8rem, 7vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero .subtitle {
  margin: 8px 0 0;
  font-size: 1.05rem;
  color: var(--text);
}

.hero .lead {
  margin: 20px 0 0;
  font-size: 1.0625rem;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--accent);
  color: oklch(1 0 0);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.cta:hover {
  filter: brightness(1.08);
}

.cta svg {
  width: 19px;
  height: 19px;
}

.facts {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 0.875rem;
}

.facts li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.facts .stars {
  color: var(--accent);
  letter-spacing: 0.05em;
}

/* The one claim that should catch the eye: a line of its own, and a filled
   badge rather than another blue button so it does not compete with the CTA. */
.no-subs {
  display: inline-block;
  margin: 18px 0 0;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* ------------------------------------------------------- screenshot swiper */

.shots {
  --shot-width: min(70vw, 280px);
  padding: 40px 0 4px;
}

.shots-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Enough slack at both ends that the first and last slide can sit centred. */
  padding: 6px calc(50% - var(--shot-width) / 2);
}

.shots-track::-webkit-scrollbar {
  display: none;
}

.shot {
  flex: 0 0 var(--shot-width);
  margin: 0;
  scroll-snap-align: center;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.shots-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.shots-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.shots-arrow:hover {
  color: var(--text-heading);
  border-color: color-mix(in oklch, var(--text) 30%, transparent);
}

.dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text) 32%, transparent);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.dots button.active {
  background: var(--accent);
  transform: scale(1.35);
}

/* --------------------------------------------------------------- features */

.features {
  padding: 44px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.feature h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.feature ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature li {
  position: relative;
  padding-left: 26px;
}

.feature li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}

.feature p {
  margin: 18px 0 0;
}

/* ---------------------------------------------------------------- contact */

.contact {
  margin: 48px 0 0;
  padding: 26px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.contact h2 {
  font-size: 1.2rem;
  font-weight: 600;
}

.contact p {
  margin: 14px 0 0;
}

.contact p:first-of-type {
  margin-top: 12px;
}

/* The in-app menu path, set like the labels the reader will look for. It gets
   a line of its own so a narrow screen never has to break it apart. */
.path-line {
  margin: 12px 0 0;
}

.path {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 9px;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--text-heading);
  font-size: 0.94em;
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 400px) {
  .path {
    font-size: 0.88em;
  }
}

/* ------------------------------------------------------- privacy subpage */

.legal {
  padding-top: 36px;
}

.legal h1 {
  font-size: clamp(1.6rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.legal .legal-meta {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  color: var(--text);
}

.legal h2 {
  margin: 40px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.legal p {
  margin: 16px 0 0;
}

.legal ul {
  margin: 16px 0 0;
  padding-left: 22px;
}

.legal li {
  margin-top: 10px;
}

.legal .summary {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* ----------------------------------------------------------------- footer */

.site-foot {
  margin-top: 64px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
}

.site-foot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

.site-foot a {
  color: var(--text);
  text-decoration: none;
}

.site-foot a:hover {
  color: var(--text-heading);
  text-decoration: underline;
}

.back-link {
  display: inline-block;
  margin: 30px 0 0;
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------ wider views */

@media (min-width: 700px) {
  body {
    font-size: 18px;
  }

  .shots {
    --shot-width: 300px;
  }

  .shots-arrow {
    display: inline-flex;
  }

  .hero {
    padding-top: 56px;
  }

  .legal {
    padding-top: 48px;
  }

  .app-icon {
    width: 112px;
    height: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shots-track {
    scroll-behavior: auto;
  }

  .dots button {
    transition: none;
  }
}