/* IPSW Checker — ipswchecker.com
   Một file CSS cho cả 3 trang. Không framework, không font tải ngoài:
   dùng font hệ thống (SF Pro trên máy Apple). */

:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --rule: #d2d2d7;
  --link: #00796c;
  /* Teal lấy từ app icon (#12CDB8). Nút: nền teal + chữ xanh đen (chữ trắng trên teal
     không đủ tương phản). Chữ/link teal dùng tông đậm hơn để đọc được trên nền trắng. */
  --brand: #12cdb8;
  --brand-ink: #04302b;
  --brand-text: #00796c;
  /* Nút: đen chữ trắng (đảo lại ở chế độ tối). Teal chỉ là màu nhấn cho chữ/biểu tượng. */
  --btn: #1d1d1f;
  --btn-hover: #3a3a3c;
  --btn-ink: #ffffff;
  --signed: #248a3d;
  --unsigned: #d70015;
  --shot-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.25);
  --max: 980px;
  --gutter: 22px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-alt: #161617;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #86868b;
    --rule: #424245;
    --link: #3ee0cc;
    --brand-text: #3ee0cc;
    --btn: #f5f5f7;
    --btn-hover: #d2d2d7;
    --btn-ink: #1d1d1f;
    --signed: #30d158;
    --unsigned: #ff453a;
    --shot-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-alt: #161617;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --rule: #424245;
  --link: #3ee0cc;
  --brand-text: #3ee0cc;
  --btn: #f5f5f7;
  --btn-hover: #d2d2d7;
  --btn-ink: #1d1d1f;
  --signed: #30d158;
  --unsigned: #ff453a;
  --shot-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  /* Footer luôn nằm đáy, kể cả trang ngắn (404). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; height: auto; }

/* Không để một chữ rớt dòng một mình: tiêu đề cân dòng, đoạn văn "pretty". */
h1, h2, h3, .lede, .section-head p { text-wrap: balance; }
p, li { text-wrap: pretty; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Thanh điều hướng ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.nav .wrap {
  display: flex;
  align-items: center;
  height: 52px;
  gap: 24px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 17px;
  margin-right: auto;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 26px; height: 26px; border-radius: 6px; }
.nav a.nav-link {
  color: var(--ink-2);
  font-size: 13px;
  letter-spacing: -0.01em;
}
.nav a.nav-link:hover { color: var(--ink); text-decoration: none; }

.btn {
  display: inline-block;
  font-weight: 500;
  background: var(--btn);
  color: var(--btn-ink);
  border-radius: 980px;
  font-size: 15px;
  line-height: 1;
  padding: 11px 20px;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; background: var(--btn-hover); }
.btn-small { font-size: 12px; padding: 6px 12px; }

@media (max-width: 640px) {
  .nav a.nav-link { display: none; }
}

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

.hero {
  text-align: center;
  padding: 72px 0 0;
  overflow: hidden;
}
.eyebrow {
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: 0.011em;
  color: var(--brand-text);
}
.hero h1 {
  font-size: clamp(44px, 8vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 16px;
}
.hero .lede {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.33;
  color: var(--ink-2);
  max-width: 640px;
  margin: 0 auto 28px;
  letter-spacing: 0.009em;
}
.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.requires {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}

/* Hero: ba iPhone cùng cỡ, đứng thẳng, cách nhau một khoảng nhỏ. Máy giữa cao hơn, hai
   máy bên thấp xuống. Bóng đổ lệch sang phải (drop-shadow theo viền máy vì PNG nền trong suốt).
   Khung chỉ cắt theo chiều dọc (overflow-y: clip) để bóng máy bên phải không bị cụt; mép
   dưới cắt ngang thân máy giữa chứ không trùng đúng viền máy.
   Màn hình hẹp: máy to hơn, tràn ra hai bên (justify-content: center chia đều phần tràn),
   khối .hero cắt phần thừa ở mép màn hình. */
.hero-stage {
  --phone: 30%;
  --gap: 3.5%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap);
  width: min(1080px, 100%);
  margin: 56px auto 0;
  padding-top: 8px;
  aspect-ratio: 1000 / 530;
  min-height: 0; /* không thì aspect-ratio bị nội dung kéo cao, mép dưới trùng viền máy */
  overflow-x: visible;
  overflow-y: clip;
}
.hero-stage .shot {
  flex: 0 0 var(--phone);
  margin: 0;
  filter: drop-shadow(18px 22px 24px rgba(0, 0, 0, 0.16)) drop-shadow(4px 6px 6px rgba(0, 0, 0, 0.06));
}
/* margin-top tính theo % bề rộng khung, nên độ lệch co giãn cùng cỡ máy. */
.hero-stage .shot.side { margin-top: 7%; }
@media (max-width: 640px) {
  .hero-stage {
    --phone: 46%;
    --gap: 3%;
    aspect-ratio: 100 / 86;
    margin-top: 44px;
  }
  .hero-stage::after { height: 64px; }
  .hero-stage .shot.side { margin-top: 10%; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-stage .shot { filter: drop-shadow(18px 22px 30px rgba(0, 0, 0, 0.7)); }
}
:root[data-theme="dark"] .hero-stage .shot { filter: drop-shadow(18px 22px 30px rgba(0, 0, 0, 0.7)); }
/* Mép dưới mờ dần vào nền để chỗ cắt không gắt. */
.hero-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  z-index: 3;
  pointer-events: none;
}

/* ---------- Khung ảnh chụp màn hình ---------- */
/* Ảnh chụp màn hình nên xuất kèm khung máy (Apple Design Resources) dạng PNG nền
   trong suốt. Nếu dùng ảnh trần, thêm class .bare để bo góc như màn hình thật. */

.shot img { width: 100%; }
.shot.bare img {
  border-radius: 12% / 5.6%;
  box-shadow: var(--shot-shadow);
}
.shot.bare.ipad img { border-radius: 3.2%; }

/* Ô thay thế khi chưa có ảnh: để biết đặt file nào vào đâu. Xoá khi đủ ảnh. */
.shot .ph {
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--bg-alt);
  border: 1px dashed var(--rule);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.4;
  padding: 16px;
  border-radius: 44px;
  aspect-ratio: 1350 / 2760;
}
.shot.ipad .ph { aspect-ratio: 2640 / 1880; border-radius: 24px; }
.shot.wide .ph { aspect-ratio: 16 / 9; border-radius: 24px; }
.shot .ph code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink-2);
}

/* ---------- Khối tính năng ---------- */

.section { padding: 112px 0; }
.section.alt { background: var(--bg-alt); }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-head .kicker {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-text);
  margin-bottom: 8px;
}
.section-head h2 {
  font-size: clamp(36px, 5.6vw, 56px);
  line-height: 1.07;
  letter-spacing: -0.005em;
  font-weight: 700;
  margin: 0 0 16px;
}
.section-head p {
  font-size: 21px;
  line-height: 1.38;
  color: var(--ink-2);
  margin: 0;
  letter-spacing: 0.011em;
}

/* Hai cột: chữ một bên, ảnh một bên. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split.flip .split-text { order: 2; }
.split-text h2 {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 16px;
}
.split-text p {
  font-size: 19px;
  line-height: 1.42;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.split-text p strong { color: var(--ink); font-weight: 600; }
.split .shot { width: min(340px, 100%); margin: 0 auto; }

@media (max-width: 760px) {
  .section { padding: 80px 0; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.flip .split-text { order: 0; }
  .split .shot { width: min(300px, 80%); }
}

/* Trạng thái ký: chữ màu, không phải huy hiệu. */
.signed { color: var(--signed); font-weight: 600; }
.unsigned { color: var(--unsigned); font-weight: 600; }

/* Dòng chữ teal nhỏ phía trên tiêu đề (vd "Pro" ở khối thông báo ngừng ký),
   cùng kiểu với .section-head .kicker. */
.split-text .kicker {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-text);
  margin-bottom: 8px;
}

/* iPad + iPhone Duo: iPad lớn bên trái, Duo đứng trước, chồng lên góc phải-dưới của iPad.
   Kích thước theo % khung chung để giữ đúng tỉ lệ giữa hai máy ở mọi bề rộng. */
.devices {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.devices .shot { margin: 0; }
.devices .shot.ipad { width: 84%; }
.devices .shot.duo {
  position: absolute;
  right: 0;
  bottom: -2%;
  width: 30%;
}
.shot.duo .ph { aspect-ratio: 1574 / 2194; border-radius: 32px; }

/* ---------- Danh sách "Và còn nữa" ---------- */

.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.more-grid .icon {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--brand-text);
  margin-bottom: 14px;
}
.more-grid h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: 0.012em;
}
.more-grid p {
  font-size: 17px;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 860px) { .more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .more-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Pro ---------- */

/* Bốn ô bo góc trên nền xám nhạt, không đường kẻ. Ô đầu (Signing alerts, tính năng
   chính của Pro) chiếm cả hàng trên màn hình rộng. */
.pro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pro-grid li {
  background: var(--bg-alt);
  border-radius: 24px;
  padding: 32px 28px 30px;
}
.pro-grid li.lead {
  grid-column: 1 / -1;
  padding: 40px 36px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.lead-text { flex: 1 1 0; min-width: 0; }
/* Thông báo minh hoạ: dựng bằng HTML theo kiểu thông báo iOS. */
.notif {
  flex: 0 1 400px;
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg);
  border-radius: 22px;
  padding: 14px 16px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.06);
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
}
.notif img { flex: none; width: 38px; height: 38px; border-radius: 9px; }
.notif > div { min-width: 0; }
.pro-grid .notif p { margin: 0; color: var(--ink); max-width: none; font-size: 15px; }
.pro-grid .notif .notif-head { display: flex; justify-content: space-between; gap: 8px; }
.notif-head b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-head span { color: var(--ink-3); font-size: 13px; flex: none; }
.pro-grid .icon {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--brand-text);
  margin-bottom: 16px;
}
.pro-grid li.lead .icon { width: 40px; height: 40px; }
.pro-grid h3 {
  font-size: 21px;
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 6px;
}
.pro-grid li.lead h3 { font-size: clamp(24px, 3.2vw, 32px); }
.pro-grid p { margin: 0; color: var(--ink-2); }
.pro-grid li.lead p { font-size: 19px; max-width: 440px; }
@media (max-width: 760px) {
  .pro-grid { grid-template-columns: minmax(0, 1fr); }
  .pro-grid li, .pro-grid li.lead { padding: 28px 24px; }
  .pro-grid li.lead { flex-direction: column; align-items: stretch; gap: 24px; }
  .notif { flex-basis: auto; }
}
.pro-note {
  text-align: center;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 640px;
  margin: 32px auto 0;
}

/* ---------- Tải về (cuối trang) ---------- */

.closing { text-align: center; }
.closing .app-icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  margin: 0 auto 24px;
}
.closing h2 {
  font-size: clamp(36px, 5.6vw, 56px);
  line-height: 1.07;
  font-weight: 700;
  margin: 0 0 12px;
}
.closing p { font-size: 21px; color: var(--ink-2); margin: 0 0 32px; }
.badge-link { display: inline-block; }
.badge-link img { height: 54px; width: auto; }

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

.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
  padding: 24px 0 32px;
}
.footer .disclaimer {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 12px;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0; }
.footer-links a { color: var(--ink-2); }
.footer-links a + a::before {
  content: "|";
  color: var(--rule);
  margin: 0 10px;
}

/* ---------- Trang văn bản (Privacy, Terms) ---------- */

.doc { padding: 64px 0 96px; }
.doc .wrap { max-width: 720px; }
.doc h1 {
  font-size: clamp(36px, 6vw, 48px);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 8px;
}
.doc .updated { color: var(--ink-3); font-size: 15px; margin: 0 0 40px; }
.doc h2 {
  font-size: 24px;
  line-height: 1.17;
  font-weight: 600;
  margin: 48px 0 12px;
}
.doc h3 { font-size: 19px; font-weight: 600; margin: 28px 0 8px; }
.doc p, .doc li { color: var(--ink); }
.doc ul { padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc .summary {
  background: var(--bg-alt);
  border-radius: 18px;
  padding: 24px 28px;
  margin: 0 0 8px;
}
.doc .summary p { margin: 0; }
.doc .summary p + p { margin-top: 12px; }
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 16px 0;
}
.doc th, .doc td {
  text-align: left;
  vertical-align: top;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--rule);
}
.doc th { font-weight: 600; color: var(--ink-2); font-size: 13px; }
@media (max-width: 560px) {
  .doc table, .doc thead, .doc tbody, .doc tr, .doc th, .doc td { display: block; }
  .doc thead { display: none; }
  .doc td { border: 0; padding: 2px 0; }
  .doc td:first-child { font-weight: 600; padding-top: 14px; }
  .doc tr { border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
}