/* A: Apple Store reference. The brief deliberately pins native Apple typography,
   a split introduction, and large elevated product cards; no Apple assets used. */
body[data-variant='a'] {
  --apple-bg: #f5f5f7;
  --apple-ink: #1d1d1f;
  --apple-secondary: #6e6e73;
  --apple-blue: #06c;
  --apple-inset: max(48px, calc((100vw - 1180px) / 2));
  --apple-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Shikong Sans SC', 'Helvetica Neue', sans-serif;
  background: var(--apple-bg);
  color: var(--apple-ink);
  font-family: var(--apple-font);
  color-scheme: light;
  accent-color: var(--apple-blue);
}
body[data-variant='a'] ::selection { background: #b6d9ff; color: #102844; }
body[data-variant='a'] .site-header {
  color: var(--apple-ink);
  background: var(--apple-bg);
  box-shadow: none;
  border-color: transparent;
  font-family: var(--apple-font);
}
body[data-variant='a'] .brand { font-weight: 600; letter-spacing: -.035em; }
body[data-variant='a'] .nav-button { font-family: var(--apple-font); font-size: 13px; font-weight: 400; }
body[data-variant='a'] .nav-button:hover { color: #000; }
.apple-page { overflow: clip; padding-bottom: 32px; }
.apple-container { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.apple-hero { padding-top: 56px; }
.apple-hero-heading { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.apple-hero h1 {
  margin: 0;
  font-family: var(--apple-font);
  font-size: clamp(64px, 6vw, 80px);
  line-height: 1.13;
  font-weight: 650;
  letter-spacing: -.035em;
}
.apple-hero-aside { padding: 9px 0 0; flex-shrink: 0; }
.apple-hero-aside p { margin: 0 0 9px; font-size: 17px; line-height: 1.5; font-weight: 500; }
.apple-text-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--apple-blue);
  font-size: 14px;
  line-height: 1.55;
  text-decoration: none;
  text-underline-offset: 3px;
}
.apple-text-link > span { display: inline-flex; }
.apple-text-link svg { width: 14px; height: 14px; stroke-width: 1.65; }
.apple-text-link:hover { text-decoration: underline; }
.apple-search { width: min(560px, 100%); margin-top: 26px; }
.apple-search .search-form {
  min-height: 52px;
  padding-block: 0;
  background: #fff;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.apple-search .search-form:focus-within { border-color: #0071e3; box-shadow: 0 0 0 3px #0071e326; }
.apple-search .search-form input { min-width: 0; color: var(--apple-ink); caret-color: var(--apple-blue); font-family: inherit; font-size: 16px; }
.apple-search .search-form input::placeholder { color: var(--apple-secondary); opacity: 1; }
.apple-search .search-form button { font-family: inherit; }
.apple-domains {
  display: flex;
  align-items: start;
  justify-content: flex-start;
  gap: clamp(26px, 4.8vw, 72px);
  margin-top: 32px;
  padding: 4px 0 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #c4c4c9 transparent;
}
.apple-category {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  min-width: 104px;
  margin: 0;
  padding: 0 3px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--apple-ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.apple-category-art {
  display: grid;
  place-items: center;
  width: 72px;
  height: 65px;
  color: #55555a;
  transition: transform 300ms cubic-bezier(.2,.8,.2,1), color 200ms ease;
}
.apple-category-art svg { width: 47px; height: 47px; stroke-width: 1.25; }
.apple-category-label { margin-top: 9px; font-size: 14px; line-height: 1.45; font-weight: 550; white-space: nowrap; }
.apple-category.active .apple-category-label,
.apple-category[aria-pressed='true'] .apple-category-label { color: var(--apple-blue); }
.apple-category.active::after,
.apple-category[aria-pressed='true']::after { content: ''; position: absolute; bottom: 0; width: 20px; height: 2px; border-radius: 2px; background: var(--apple-blue); }
.apple-category:active .apple-category-art { transform: scale(.96); }
.apple-featured { margin-top: 36px; scroll-margin-top: 100px; }
.apple-featured h2 { margin: 0; font-family: var(--apple-font); font-size: 28px; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; text-wrap: balance; }
.apple-featured h2 > span { color: var(--apple-secondary); }
.apple-showcase {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 382px;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 26px var(--apple-inset) 30px;
  scroll-padding-inline: var(--apple-inset);
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #c4c4c9 transparent;
}
.apple-feature-card { min-width: 0; height: 438px; scroll-snap-align: start; }
.apple-feature-button {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--apple-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 15px rgb(29 29 31 / 8%);
  transform-origin: center center;
  transition: transform 380ms cubic-bezier(.16,1,.3,1), box-shadow 380ms cubic-bezier(.16,1,.3,1);
  -webkit-tap-highlight-color: transparent;
}
.apple-feature-copy { position: absolute; inset: 0 0 auto; z-index: 1; display: block; padding: 27px 28px 18px; }
.apple-feature-title { display: block; font-size: 27px; line-height: 1.23; font-weight: 650; letter-spacing: -.022em; }
.apple-feature-description { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; font-weight: 400; }
.apple-feature-media { position: absolute; inset: 146px 0 0; display: block; overflow: hidden; }
.apple-feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 500ms cubic-bezier(.16,1,.3,1); }
.apple-feature-card--dark .apple-feature-button { color: #f5f5f7; background: #0c0c0e; }
.apple-feature-card--dark .apple-feature-description { color: #dedee3; }
.apple-feature-card--blue .apple-feature-button { color: #f5f5f7; background: #071b34; }
.apple-feature-card--blue .apple-feature-description { color: #d8e8fa; }
.apple-feature-card--light .apple-feature-description { color: #515154; }
.apple-feature-open {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #353538;
  box-shadow: 0 2px 8px rgb(29 29 31 / 8%);
  transition: background-color 180ms ease, color 180ms ease;
}
.apple-feature-open svg { width: 18px; height: 18px; stroke-width: 1.65; }
.apple-feature-button:active { transform: translateY(-1px) scale(.99); }
.apple-category:focus-visible,
.apple-feature-button:focus-visible,
.apple-text-link:focus-visible,
.apple-showcase:focus-visible { outline: 3px solid #0071e3; outline-offset: 5px; }
body[data-variant='a'] .feed-section { width: min(1180px, calc(100% - 96px)); margin: 46px auto 0; padding: 0; }
body[data-variant='a'] .section-heading h2 { font-family: var(--apple-font); font-size: 28px; font-weight: 650; letter-spacing: -.025em; }
body[data-variant='a'] .filter-tabs { font-family: var(--apple-font); }
body[data-variant='a'] .feed-grid { gap: 30px 24px; }
body[data-variant='a'] .content-card { background: transparent; border: 0; box-shadow: none; font-family: var(--apple-font); }
body[data-variant='a'] .content-card .media { overflow: hidden; border-radius: 18px; }
body[data-variant='a'] .content-card .card-copy { padding-top: 16px; padding-inline: 0; }
body[data-variant='a'] .content-card .card-meta { color: var(--apple-secondary); font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .apple-category:hover .apple-category-art { transform: translateY(-3px) scale(1.055); color: #1d1d1f; }
  .apple-category:hover .apple-category-label { text-decoration: underline; text-underline-offset: 4px; }
  .apple-feature-button:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 15px 32px rgb(29 29 31 / 14%); }
  .apple-feature-button:hover .apple-feature-media img { transform: scale(1.025); }
  .apple-feature-button:hover .apple-feature-open { background: #0071e3; color: #fff; }
  .apple-feature-button:active { transform: translateY(-1px) scale(.99); }
}
@media (max-width: 1023px) {
  body[data-variant='a'] { --apple-inset: 32px; }
  .apple-container, body[data-variant='a'] .feed-section { width: calc(100% - 64px); }
  .apple-hero { padding-top: 42px; }
  .apple-hero h1 { font-size: 68px; }
  .apple-hero-aside p { font-size: 16px; }
  .apple-domains { gap: 26px; }
  .apple-showcase { grid-auto-columns: 350px; gap: 20px; }
  .apple-feature-card { height: 424px; }
}
@media (max-width: 767px) {
  body[data-variant='a'] { --apple-inset: 24px; }
  .apple-container, body[data-variant='a'] .feed-section { width: calc(100% - 48px); }
  .apple-hero { padding-top: 32px; }
  .apple-hero-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .apple-hero h1 { font-size: 54px; letter-spacing: -.028em; }
  .apple-hero-aside { padding: 0; }
  .apple-hero-aside p { margin-bottom: 4px; font-size: 16px; }
  .apple-text-link { font-size: 14px; }
  .apple-search { margin-top: 22px; width: 100%; }
  .apple-search .search-form { min-height: 50px; }
  .apple-domains { margin-top: 24px; gap: 16px; }
  .apple-category { min-width: 93px; }
  .apple-category-art { width: 62px; height: 57px; }
  .apple-category-art svg { width: 41px; height: 41px; }
  .apple-category-label { margin-top: 7px; font-size: 12px; }
  .apple-featured { margin-top: 27px; }
  .apple-featured h2, body[data-variant='a'] .section-heading h2 { font-size: 24px; line-height: 1.35; }
  .apple-showcase { grid-auto-columns: min(82vw, 342px); padding-top: 20px; padding-bottom: 24px; gap: 18px; }
  .apple-feature-card { height: 410px; }
  .apple-feature-button { border-radius: 22px; }
  .apple-feature-copy { padding: 24px 24px 16px; }
  .apple-feature-title { font-size: 25px; }
  .apple-feature-description { font-size: 13px; }
  .apple-feature-media { top: 140px; }
  body[data-variant='a'] .feed-section { margin-top: 32px; }
  body[data-variant='a'] .feed-grid { gap: 26px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .apple-category-art, .apple-feature-button, .apple-feature-media img, .apple-feature-open { transition: none; }
  .apple-category:hover .apple-category-art, .apple-feature-button:hover, .apple-feature-button:hover .apple-feature-media img { transform: none; }
  .apple-showcase { scroll-behavior: auto; }
}