:root{
  --surface: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --ring: #c7d3ea;
  --primary: #0071e3;
}
/* ===== Shared site.css (header + footer styles) ===== */

/* Basic reset */
* { box-sizing: border-box; }
html { overflow-y: scroll; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--surface); }

/* Header */
.apple-navbar {
  background: #fff; width: 100%; min-height: 60px; border-bottom: 1px solid #ececec;
  position: sticky; top: 0; left: 0; z-index: 30; box-shadow: 0 3px 20px #c9d6ea11;
}
.apple-navbar-inner {
  max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  height: 62px; padding: 0 20px; position: relative;
}
.apple-navbar-logo { display: flex; align-items: center; gap: 11px; font-size: 1.04rem; font-weight: 700; color: #101010; text-decoration: none; letter-spacing: -1px; line-height: 1; height: 62px; }
.apple-navbar-logo img { width: 40px; height: 40px; border-radius: 12px; background: #f5f5f7; box-shadow: 0 1px 7px #c9d6ea11; object-fit: cover; margin-right: 2px; }

.apple-navbar-links { display: flex; align-items: center; gap: 17px; flex-wrap: wrap; transition: none; }
.apple-navbar-links a { color: #222; font-size: .95rem; text-decoration: none; font-weight: 500; padding: 6px 0 2px 0; transition: color 0.13s; border-bottom: 2px solid transparent; }
.apple-navbar-links a:hover, .apple-navbar-links a:focus { color: #0071e3; border-bottom: 2px solid #0071e3; text-decoration: none; }

/* Products dropdown */
.has-submenu { position: relative; display: inline-block; }
.apple-navbar-links .nav-parent{
  display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0;
  padding: 6px 0 2px 0; cursor: pointer; color: #222; font-weight: 500; border-bottom: 2px solid transparent;
}
.apple-navbar-links .nav-parent .chevron { display: inline-block; transition: transform .18s ease; }
.has-submenu.open .nav-parent .chevron { transform: rotate(180deg); }

/* Desktop dropdown panel — anchor under the Products parent */
.apple-navbar-links .submenu {
  position: absolute; top: calc(100% + 8px); left: 0; right: auto; display: none;
  min-width: 200px; padding: 8px; background: #fff; border: 1px solid #ececec; border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08); z-index: 200;
}
.apple-navbar-links .submenu a { display: block; padding: 10px 12px; white-space: nowrap; border-radius: 10px; text-decoration: none; color: #222; font-size: .95rem; }
.apple-navbar-links .submenu a:hover { background: #f5f5f7; }
.apple-navbar-links .has-submenu.open .submenu { display: block; }

/* Mobile */
.hamburger { display: none; background: none; border: none; font-size: 2rem; color: #0071e3; cursor: pointer; margin-left: 8px; padding: 7px 11px 5px 7px; border-radius: 8px; }
.hamburger:focus, .hamburger:hover { background: #e6f0fa; }

@media (max-width: 800px) {
  .apple-navbar-inner { padding: 0 6vw; }
  .hamburger { display: block; }
  .apple-navbar-links {
    position: absolute; top: 60px; left: 0; right: 0; background: #fff;
    box-shadow: 0 8px 18px #bbb6; padding: 28px 0 18px 0; display: none;
    flex-direction: column; gap: 16px; align-items: flex-start; z-index: 101;
    border-bottom: 1px solid #ececec; min-width: 100vw;
  }
  .apple-navbar-links.show { display: flex; animation: fadeInDown 0.19s; }
  .apple-navbar-links .submenu { position: static; box-shadow: none; border: 0; display: none; padding: 0; }
  .apple-navbar-links .has-submenu.open .submenu { display: block; }
  .apple-navbar-links .nav-parent { display: block; width: 100%; text-align: left; padding: 12px 24px; }
}
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px);} to { opacity: 1; transform: none;} }


.apple-features-footer {
  max-width: 980px; margin: 48px auto; padding: 24px 20px; text-align: center; color: #333;
}
.apple-features-footer p { margin: 0; font-size: 1.05rem; }



.apple-footer { background:#fff; border-top:1px solid #ececec; margin-top:48px; }
.apple-footer-inner { max-width:980px; margin:0 auto; padding:20px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.apple-footer-links { display:flex; gap:14px; flex-wrap:wrap; }
.apple-footer-link { color:#222; text-decoration:none; font-size:.95rem; }
.apple-footer-link:hover, .apple-footer-link:focus { color:#0071e3; text-decoration:underline; }
@media (max-width:700px){
  .apple-footer-inner { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Footer */
.apple-footer {
  background: none;
  color: #6e6e73;
  padding: 44px 0 33px 0;
  text-align: center;
  font-size: 1.04rem;
}
.apple-footer-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.apple-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  justify-content: center;
}
.apple-footer-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.14s;
}
.apple-footer-link:hover {
  text-decoration: underline;
  color: #005bb5;
}



/* Make "Products" button visually identical to other nav links */
.apple-navbar-links .nav-parent {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: 1.2;
  padding: 6px 0 2px 0;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.apple-navbar-links .nav-parent:hover,
.apple-navbar-links .nav-parent:focus {
  color: #0071e3;
  border-bottom: 2px solid #0071e3;
}
.apple-navbar-links .nav-parent .chevron {
  display: inline-block;
  font-size: .9em;
  line-height: 1;
  transition: transform .18s ease;
  transform-origin: 50% 45%;
}
.has-submenu.open .nav-parent .chevron { transform: rotate(180deg); }

.apple-navbar-links .nav-parent::-moz-focus-inner { border: 0; padding: 0; }
@media (max-width: 800px) {
  .apple-navbar-links .nav-parent {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 24px;
    border-bottom: 0;
  }
}


/* NAV ITEM ALIGNMENT: unify anchors and Products button */
.apple-navbar-links a,
.apple-navbar-links .nav-parent {
  display: inline-flex;
  align-items: center;
  font-size: .95rem;
  line-height: 1.25;
  padding: 6px 0 2px 0;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
}
/* Hover state parity */
.apple-navbar-links a:hover,
.apple-navbar-links a:focus,
.apple-navbar-links .nav-parent:hover,
.apple-navbar-links .nav-parent:focus {
  color: #0071e3;
  border-bottom-color: #0071e3;
}
/* Chevron optical centering */
.apple-navbar-links .nav-parent .chevron {
  position: relative;
  top: 1px;
  font-size: .9em;
  line-height: 1;
}



/* Anchor logo + text flush-left with viewport */
.apple-navbar-inner {
  max-width: none;    /* remove centering constraint */
  width: 100%;
  justify-content: flex-start;
  padding-left: 12px; /* small left gutter */
  padding-right: 20px;
  gap: 20px;
}
.apple-navbar-logo { margin-right: auto; } /* push nav to the right */

/* Keep mobile comfortable padding */
@media (max-width: 800px) {
  .apple-navbar-inner { padding-left: 4vw; padding-right: 4vw; }
}
/* ===== Fixed header (always on top) ===== */
:root { --header-h: 62px; } /* matches .apple-navbar-inner height */

/* Override sticky with fixed */
.apple-navbar {
  position: fixed !important;  /* was: sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;               /* above dropdowns/content */
  width: 100%;
}

/* Prevent content from hiding under the fixed header */
body { padding-top: var(--header-h); }

/* Mobile slide-out menu should start below the fixed header */
@media (max-width: 800px) {
  .apple-navbar-links {
    top: var(--header-h);      /* was: 60px */
  }
}

/* Smooth in-page anchor jumps: headings won't hide under header */
:where(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Mobile hamburger dropdown padding + comfy link spacing */
@media (max-width: 800px) {
  /* Add side padding to the slide-down panel */
  .apple-navbar-links {
    padding: 28px 16px 18px 16px; /* was 28px 0 18px 0 */
  }

  /* Make each item full-width with left padding */
  .apple-navbar-links a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 24px;            /* top/bottom 7, left/right 24 */
    border-bottom: none;          /* avoid the thin underline on mobile */
  }

  /* Match the “Products” button to link spacing */
  .apple-navbar-links .nav-parent {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 24px;           /* same left inset as links */
    border-bottom: 0;
  }
}

@media (prefers-color-scheme: dark){
  :root{
    --surface: #0b0b0c;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --ring: #2a3a55;
    --primary: #7ab6ff;
  }
}


/* ===== Dark mode: header/nav readable on dark surfaces ===== */
@media (prefers-color-scheme: dark) {
  /* Navbar surface + divider */
  .apple-navbar {
    background: var(--surface, #0b0b0c) !important;
    border-bottom: 1px solid color-mix(in oklab, var(--text, #ffffff) 12%, transparent) !important;
  }

  /* Submenus / dropdowns adopt dark surface and subtle border */
  .apple-navbar .submenu,
  .apple-navbar-links .submenu {
    background: var(--surface, #0f1013) !important;
    border: 1px solid color-mix(in oklab, var(--text, #ffffff) 12%, transparent) !important;
  }

  /* All text in the navbar, including logo, links and buttons */
  .apple-navbar,
  .apple-navbar *,
  .apple-navbar-logo,
  .apple-navbar-logo span,
  .apple-navbar a,
  .apple-navbar-links a {
    color: var(--text, #ffffff) !important;
  }

}


/* ===== Dark mode: Getting Started section forced readable ===== */
@media (prefers-color-scheme: dark) {
  /* Force dark background on common panels */
  .apple-getting-started,
  .showcase-section,
  .apple-features {
    background: linear-gradient(180deg, #14171b 68%, #0f1622 100%) !important;
  }

  /* Force text to light in Getting Started (beats inline/page styles) */
  .apple-getting-started,
  .apple-getting-started *:not(a):not(.button-link):not(.apple-getting-btn) {
    color: var(--text, #ffffff) !important;
  }

  /* Keep links branded and visible */
  .apple-getting-started a {
    color: var(--primary, #7ab6ff) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}




/* ===== Unified Buttons — identical in light & dark ===== */

/* Base palette used everywhere */
.button-link,
.apple-getting-btn,
.btn,
.button {
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  --btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease, background .18s ease, color .18s ease, border-color .18s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

/* Secondary (outline) — same in both modes */
.btn.btn-secondary,
.btn-secondary,
.button.btn-secondary,
.button-link.btn-secondary {
  --btn-bg: transparent;
  --btn-fg: var(--primary);
  --btn-bd: color-mix(in oklab, var(--primary) 28%, transparent);

  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border-color: var(--btn-bd) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Hover / Active */
.button-link:hover,
.apple-getting-btn:hover,
.btn:hover,
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}
.button-link:active,
.apple-getting-btn:active,
.btn:active,
.button:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* Focus-visible */
.button-link:focus-visible,
.apple-getting-btn:focus-visible,
.btn:focus-visible,
.button:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--primary) 55%, #fff);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 28%, transparent);
}

/* Disabled */
.button-link[disabled],
.apple-getting-btn[disabled],
.btn[disabled],
.button[disabled],
.button-link[aria-disabled="true"],
.apple-getting-btn[aria-disabled="true"],
.btn[aria-disabled="true"],
.button[aria-disabled="true"] {
  opacity: .52;
  pointer-events: none;
}






/* Features layout: title on top, boxes underneath */
.apple-features-inner {
  display: flex;              /* stack title + grid vertically */
  flex-direction: column;
  gap: 18px;                  /* space between title and boxes */
}

.apple-features-title {
  margin: 0;                  /* reset odd margins */
  text-align: center;         /* optional: center the title */
}

.apple-features-grid {
  display: grid;              /* boxes live here */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 22px;
}

/* If any legacy page makes the whole section a flex row, kill it */
.apple-features,
.apple-features > .row,
.apple-features > .columns {
  display: block;
}

/* Responsive */
@media (max-width: 1024px) {
  .apple-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .apple-features-grid { grid-template-columns: 1fr; }
}