/* ─── Comparison pages on the home page's design (layout: compare) ────────
   Loaded after landing-v2.css by src/_layouts/compare.html; only what those
   pages add. The first is the English Apple Journal page
   (src/marketing/apple-journal-alternative.html): static screenshots in
   simple device frames, an honest "when the other app is better", the steps
   to switch, the table and the questions. Colors come from tokens.css, so it
   follows the visitor's theme like every other page. */

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Screenshots in frames ─── */
/* A phone: a bezel around an iPhone screenshot, with the island drawn on. */
.shot-phone {
  position: relative; padding: 2.6%; background: #16130F;
  border-radius: 14% / 6.5%;
  box-shadow: inset 0 0 0 2px #3A342C, 0 30px 60px -26px rgba(30, 16, 6, .55), 0 2px 6px rgba(30, 16, 6, .15);
}
.shot-phone img { width: 100%; height: auto; border-radius: 11.4% / 5.3%; }
.shot-phone::before {
  content: ""; position: absolute; top: 2.5%; left: 50%; z-index: 1;
  width: 27%; height: 3.4%; transform: translateX(-50%);
  border-radius: 99px; background: #000; pointer-events: none;
}
.shot-win {
  width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--divider-strong); box-shadow: var(--shadow-lg);
}

/* ─── Hero ─── */
.aj-hero .eyebrow { margin-bottom: 22px; }
.aj-hero h1 { max-width: none; font-size: clamp(34px, 4.9vw, 64px); line-height: 1.04; }
/* One sentence per line on wide screens: Apple's, then Ember's. */
.aj-hero h1 em { display: block; }
/* Headings break between phrases, not inside them: a Japanese phrase kept
   whole (.nb), Korean words never split. */
.nb { display: inline-block; }
:lang(ko) :is(h1, h2, h3) { word-break: keep-all; }
.aj-hero .lede { max-width: 30em; }
/* No screenshots under the hero: the words lead, the first row shows. */
.aj-hero { padding-bottom: 64px; }
@media (max-width: 640px) { .aj-hero { padding-bottom: 32px; } }

/* ─── Feature rows: the section heading is an h2 here ─── */
.feature-copy h2 {
  margin-top: 20px; font-family: var(--display); font-weight: 800;
  font-size: clamp(27px, 3.1vw, 38px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance;
}
.feature-copy p + p { margin-top: 14px; }
.aj-why { padding-top: 24px; }
.aj-why .feature:first-child { margin-top: 0; }
.aj-why .art-wide { min-height: 0; padding: 56px 44px; }
@media (max-width: 640px) { .aj-why .art-wide { padding: 18px; } }

/* ─── Themes ─── */
.aj-themes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px 30px;
  max-width: 1060px; margin: 60px auto 0;
}
.aj-themes img {
  width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--divider-strong); box-shadow: var(--shadow-lg);
}
.aj-themes figcaption { margin-top: 14px; text-align: center; font: 600 13.5px/1.3 var(--text); color: var(--faint); }
/* A gentle stagger, like prints laid on a table. */
@media (min-width: 721px) { .aj-themes figure:nth-child(even) { transform: translateY(36px); } .aj-themes { padding-bottom: 36px; } }
@media (max-width: 720px) { .aj-themes { gap: 22px 14px; margin-top: 40px; } .aj-themes figcaption { margin-top: 9px; font-size: 12.5px; } }

/* ─── The review ─── */
.aj-quote { max-width: 860px; text-align: center; }
.aj-quote .stars { font-size: 16px; letter-spacing: 4px; color: var(--ember); }
.aj-quote blockquote { margin-top: 18px; }
.aj-quote blockquote p { font: italic 500 clamp(22px, 2.7vw, 31px)/1.45 var(--serif); color: var(--ink); text-wrap: balance; }
.aj-quote blockquote p::before { content: "\201C"; }
.aj-quote blockquote p::after { content: "\201D"; }
.aj-quote figcaption { margin-top: 22px; display: flex; justify-content: center; gap: 10px; font-size: 14.5px; }
.aj-quote figcaption b { font-weight: 650; }
.aj-quote figcaption span { color: var(--faint); }

/* ─── When the other app is better ─── */
.aj-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 52px auto 0; }
.aj-fit article { padding: 28px 30px 30px; border-radius: 20px; background: var(--card); border: 1px solid var(--divider); }
.aj-fit h3 { font-family: var(--display); font-size: 20px; line-height: 1.25; letter-spacing: -.3px; text-wrap: balance; }
.aj-fit p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
@media (max-width: 760px) { .aj-fit { grid-template-columns: 1fr; margin-top: 36px; } .aj-fit article { padding: 22px 22px 24px; } }

/* ─── Switching ─── */
.feature-copy .aj-safe { margin-top: 28px; grid-template-columns: 1fr; gap: 16px; }
.aj-safe li { font-size: 16px; line-height: 1.5; color: var(--muted); }
.aj-safe b { color: var(--ink); font-weight: 650; }
.aj-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 88px; }
.aj-steps li {
  padding: 26px 26px 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--divider);
  font-size: 15px; line-height: 1.55; color: var(--muted);
}
.aj-steps .step-n { margin: 0 0 16px; }
.aj-steps b { display: block; margin-bottom: 6px; font: 700 17px/1.3 var(--display); letter-spacing: -.2px; color: var(--ink); }
@media (max-width: 860px) { .aj-steps { grid-template-columns: 1fr; margin-top: 56px; gap: 14px; } }

/* ─── The table ─── */
.aj-table-wrap {
  max-width: 1000px; margin: 48px auto 0; overflow-x: auto;
  border-radius: 20px; border: 1px solid var(--divider); background: var(--card);
}
.aj-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.aj-table th, .aj-table td { padding: 16px 22px; text-align: start; vertical-align: top; }
.aj-table tbody tr { border-top: 1px solid var(--divider); }
.aj-table thead th { padding-top: 20px; padding-bottom: 16px; font: 800 16px/1.2 var(--display); letter-spacing: -.2px; color: var(--ink); }
.aj-table thead th:last-child { color: var(--accent-ink); }
.aj-table tbody th { width: 20%; font-weight: 650; color: var(--ink); }
.aj-table td { width: 40%; color: var(--muted); }
.aj-table td:last-child { color: var(--ink); background: color-mix(in srgb, var(--ember) 5%, transparent); }
.aj-checked { max-width: 1000px; margin: 16px auto 0; text-align: center; font-size: 13px; color: var(--faint); text-wrap: pretty; }
@media (max-width: 640px) { .aj-table-wrap { margin-top: 32px; } .aj-table th, .aj-table td { padding: 14px 16px; } }