/* ===== page-apple.css — per-page Apple-like body styling =====
   Note: keep site.css for header/footer only. Link this file on any page body you want to beautify.
   <link rel="stylesheet" href="page-apple.css">
==================================================================== */

/* Color tokens (inherits your --primary from site.css if set) */
:root{
  --surface: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --ring: #c7d3ea;
  --shadow: 0 12px 30px rgba(20, 35, 60, .08);
  --radius: 20px;
}
@media (prefers-color-scheme: dark){
  :root{
    --surface: #0b0b0c;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --ring: #2a3a55;
    --shadow: 0 16px 36px rgba(0,0,0,.5);
  }
}

/* Layout */
.page {
  max-width: 960px;
  margin: 48px auto 64px auto;
  padding: 0 20px;
}
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}
.section {
  padding: 36px 28px;
}
.section + .section { border-top: 1px solid rgba(0,0,0,.06); }

/* Headings & text */
.h1 {
  font-size: clamp(1.9rem, 2.6vw + 1.1rem, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-align: center;
  margin: 40px 0 24px 0;
  color: var(--text);
}
.lead {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 26px;
}
.h2 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 10px 0 14px 0;
  color: var(--text);
}
.p, .list, .faq, .code, .callout { color: var(--text); font-size: 1rem; line-height: 1.6; }
.list { padding-left: 1.1rem; }
.list li { margin: 6px 0; }

/* Links & buttons */
a { color: var(--primary, #0071e3); text-decoration: none; }
a:hover { text-decoration: underline; }
.button-link, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; border: 1px solid var(--ring);
  text-decoration: none; font-weight: 600; white-space: nowrap;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
  background: linear-gradient(#fff, #f6f7f9);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 0 0 0 rgba(0,0,0,0);
  color: #0d3b72;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark){
  .button-link, .btn { background: linear-gradient(#161617, #0f0f11); color: #d6e6ff; border-color: #293a55; }
}

/* Callouts */
.callout {
  background: #0b1e3910;
  border: 1px solid #e3e8f3;
  border-radius: 16px;
  padding: 14px 16px;
}
@media (prefers-color-scheme: dark){
  .callout { background: #122038; border-color: #203251; }
}

/* FAQ details */
.faq details {
  border: 1px solid #e8e8ed;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fafafa;
}
.faq summary { cursor: pointer; font-weight: 600; }
@media (prefers-color-scheme: dark){
  .faq details { background: #0f0f12; border-color: #2a2a2d; }
}

/* Code blocks */
.code pre {
  background: #0b1e3910;
  padding: 12px 14px;
  border-radius: 12px;
  overflow: auto;
  border: 1px solid #e4e7ee;
  font-size: .95rem;
}
.code code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
@media (prefers-color-scheme: dark){
  .code pre { background: #0f1522; border-color: #252c3a; }
}

/* Media */
.media { display: grid; gap: 18px; }
.media img, .media video { width: 100%; border-radius: 14px; box-shadow: var(--shadow); }

/* Spacing helpers */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}

/* Small screens */
@media (max-width: 700px){
  .section { padding: 26px 18px; }
  .lead { font-size: 1rem; }
}