/* ---------------------------------------------------------------------------
   apps.css — the apple.com design system, reproduced.

   Numbers here were read out of apple.com's own stylesheets and off live
   pages rather than eyeballed. Two sources, deliberately:

   - /apps supplied the type ramp, tile geometry and filter chrome.
   - apple.com/airpods-pro supplied the RHYTHM. Apple's flagship product pages
     run 160px section padding (not the 96px their lesser pages use), beats
     2000px+ tall, alternating white/#f5f5f7 grounds, and an eyebrow → 56px
     statement → art hierarchy. That rhythm, plus the reveal-on-scroll and the
     pinned story stage below, is most of what separates a page that feels
     like Apple from one that merely uses their fonts.

   Breakpoints are Apple's: 1441 / 1069 / 735 / 481.

   These pages deliberately do NOT load the site's shared/base.css — the
   portfolio's Fraunces/paper system would fight this one at every level.
--------------------------------------------------------------------------- */

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* The localnav is sticky and 48px tall, so an in-page anchor would otherwise
     park its heading underneath it. */
  scroll-padding-top: 48px;
}
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* --- tokens --------------------------------------------------------------- */
:root {
  /* SF Pro when the viewer is on an Apple device — which, for a page about
     iOS apps, is most of them. */
  --sk-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                     "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sk-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "Helvetica Neue", Helvetica, Arial, sans-serif;

  --sk-body-background-color: #fff;
  --sk-body-text-color: #1d1d1f;
  --sk-secondary-text-color: #86868b;
  --sk-fill-gray: #f5f5f7;
  --sk-link-color: #06c;
  --sk-blue: #0071e3;
  --sk-focus-color: #0071e3;

  --content-max-width: 1680px;
  --viewport-content: calc(100% - 240px);

  /* Apple's flagship rhythm. Their weaker pages use 96px; apple.com/apple-
     intelligence — the reference for these product pages — runs 144, with 216
     under its biggest beat. */
  --section-padding: 144px;

  /* The easing on every Apple marketing reveal: a long, weighted settle with
     almost no bounce. Linear or ease-out both read as "web page". */
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
}

@media only screen and (max-width: 1068px) {
  :root { --viewport-content: calc(100% - 134px); --section-padding: 110px; }
}
@media only screen and (max-width: 734px) {
  :root { --viewport-content: 87.5%; --section-padding: 80px; }
}
@media only screen and (max-width: 480px) { :root { --viewport-content: calc(100% - 44px); } }

body {
  font-family: var(--sk-font-text);
  font-size: 17px;
  line-height: 1.4705882353;
  font-weight: 400;
  letter-spacing: -0.022em;
  background-color: var(--sk-body-background-color);
  color: var(--sk-body-text-color);
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- type ramp ------------------------------------------------------------ */
.typography-headline-super {
  font-family: var(--sk-font-display);
  font-size: 80px; line-height: 1.05; font-weight: 600; letter-spacing: -0.015em;
}
.typography-section-headline, .typography-headline {
  font-family: var(--sk-font-display);
  font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em;
}
.typography-hero-headline {
  font-family: var(--sk-font-display);
  font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em;
}
.typography-eyebrow-elevated {
  font-family: var(--sk-font-display);
  font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em;
}
.typography-eyebrow {
  font-family: var(--sk-font-display);
  font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em;
}
.typography-intro {
  font-family: var(--sk-font-display);
  font-size: 28px; line-height: 1.1428571429; font-weight: 400; letter-spacing: .007em;
}
.typography-card-copy {
  font-family: var(--sk-font-text);
  font-size: 17px; line-height: 1.2353641176; font-weight: 400; letter-spacing: -0.022em;
}
.typography-body-reduced-tight {
  font-family: var(--sk-font-text);
  font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em;
}
.typography-filter-tabnav {
  font-family: var(--sk-font-text);
  font-size: 17px; line-height: 1; font-weight: 600; letter-spacing: 0em;
}

@media only screen and (max-width: 1068px) {
  .typography-headline-super { font-size: 64px; line-height: 1.0625; letter-spacing: -0.009em; }
  .typography-section-headline, .typography-headline { font-size: 40px; line-height: 1.1; letter-spacing: 0em; }
  .typography-hero-headline { font-size: 48px; line-height: 1.0834933333; letter-spacing: -0.003em; }
  .typography-eyebrow-elevated { font-size: 24px; line-height: 1.1666666667; letter-spacing: .009em; }
  .typography-eyebrow { font-size: 19px; line-height: 1.2105263158; letter-spacing: .012em; }
  .typography-intro { font-size: 24px; line-height: 1.1666666667; letter-spacing: .009em; }
  .typography-card-copy { font-size: 14px; line-height: 1.2857742857; letter-spacing: -0.016em; }
}
@media only screen and (max-width: 734px) {
  .typography-headline-super { font-size: 48px; line-height: 1.0834933333; letter-spacing: -0.003em; }
  .typography-section-headline, .typography-headline { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
  .typography-hero-headline { font-size: 40px; line-height: 1.1; letter-spacing: 0em; }
  .typography-eyebrow-elevated { font-size: 21px; line-height: 1.1904761905; letter-spacing: .011em; }
  .typography-eyebrow { font-size: 17px; line-height: 1.2352941176; letter-spacing: -0.022em; }
  .typography-intro { font-size: 21px; line-height: 1.1904761905; letter-spacing: .011em; }
  .typography-filter-tabnav { font-size: 14px; }
}
@media only screen and (max-width: 480px) {
  .typography-headline-super { font-size: 40px; line-height: 1.1; letter-spacing: 0em; }
  .typography-section-headline, .typography-headline { font-size: 28px; line-height: 1.1428571429; letter-spacing: .007em; }
}

/* Apple's duo-tone headline: the category is ink, the promise is grey. */
.section-headline.duo-tone { color: #86868b; }
.section-headline.duo-tone strong { color: #1d1d1f; font-weight: inherit; }

.nowrap { white-space: nowrap; }

/* --- scroll reveal -------------------------------------------------------- */
/* Everything on an Apple marketing page arrives; nothing is simply present.
   Elements rise and fade over ~0.9s on the easing above, children stagger.
   The .js gate means a reader without JS gets the page fully visible rather
   than a blank column. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 44px)) scale(var(--reveal-scale, 1));
  transition: opacity .9s var(--ease-apple) var(--reveal-delay, 0s),
              transform .9s var(--ease-apple) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Stagger for a group of siblings — set by the markup, not guessed per item. */
[data-reveal-stagger] > * { --reveal-delay: calc(var(--i, 0) * .09s); }

/* --- layout --------------------------------------------------------------- */
.section-content {
  margin-inline: auto;
  width: var(--viewport-content);
  max-width: var(--content-max-width);
  position: relative;
}
.section { position: relative; padding-block: var(--section-padding); }
.section.no-pad-top { padding-block-start: 0; }
.section.no-pad-bottom { padding-block-end: 0; }
/* Apple alternates white and #f5f5f7 down the page so each beat reads as its
   own plate rather than one continuous scroll. */
.section.is-tinted { background-color: #f5f5f7; }

/* Apple names their tinted plate `background-alt` and alternates it down the
   page. Consecutive alt sections share one continuous ground. */
.section.background-alt { background-color: #f5f5f7; }

/* --- per-app colour identity ---------------------------------------------- */
/* Apple's flagship pages take their colour from the product: the Apple
   Intelligence page is soaked in its gradient, AirPods pages go dark. Three
   product pages sharing one neutral palette is what made these read as one
   template filled in three times, so each app now carries the gradient off its
   own icon through its hero wash, eyebrows and signature section. */
body { --app-accent: #1d1d1f; --app-deep: #1d1d1f; --app-wash-a: #f5f5f7; --app-wash-b: #f5f5f7; }
body.app-eagle-one { --app-accent: #DC4430; --app-deep: #D8459B; --app-wash-a: #FFF2ED; --app-wash-b: #FCEAF3; }
body.app-savory    { --app-accent: #D33A38; --app-deep: #B23A48; --app-wash-a: #FFF1EE; --app-wash-b: #FBE7E4; }
body.app-wishlist  { --app-accent: #6E42D6; --app-deep: #5B36C8; --app-wash-a: #F4EFFF; --app-wash-b: #EBE4FC; }

.section.background-app { background: linear-gradient(180deg, var(--app-wash-a), var(--app-wash-b)); }
.type-lockup .lockup-eyebrow { color: var(--app-accent); }
.story-beat .beat-index { color: var(--app-accent); }
.feature-tile .tile-eyebrow { color: var(--app-accent); }
.section.pad-bottom-large { padding-block-end: 216px; }
@media only screen and (max-width: 1068px) { .section.pad-bottom-large { padding-block-end: 150px; } }
@media only screen and (max-width: 734px)  { .section.pad-bottom-large { padding-block-end: 100px; } }

/* --- type lockup ---------------------------------------------------------- */
/* The unit every beat on apple.com/apple-intelligence opens with: a 21px
   eyebrow, a 48px headline, and 21px grey copy — all left-aligned inside an
   840px measure, never full-bleed. Its restraint is the point: the drama on
   those pages comes from the art and the scroll, not from setting everything
   at 80px. */
.type-lockup { max-width: 840px; }
.type-lockup .lockup-eyebrow {
  font-family: var(--sk-font-display);
  font-size: 21px; line-height: 1; font-weight: 600; letter-spacing: .011em;
  color: #1d1d1f;
  margin-bottom: 12px;
}
.type-lockup .lockup-headline {
  font-family: var(--sk-font-display);
  font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em;
  color: #1d1d1f;
  margin-bottom: 24px;
}
.type-lockup .lockup-copy {
  font-family: var(--sk-font-display);
  font-size: 21px; line-height: 1.381; font-weight: 600; letter-spacing: .011em;
  color: #6e6e73;
}
.type-lockup .lockup-copy + .lockup-copy { margin-top: 14px; }
@media only screen and (max-width: 1068px) {
  .type-lockup .lockup-headline { font-size: 40px; line-height: 1.1; letter-spacing: 0em; }
  .type-lockup .lockup-eyebrow { font-size: 19px; }
  .type-lockup .lockup-copy { font-size: 19px; }
}
@media only screen and (max-width: 734px) {
  .type-lockup .lockup-headline { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
  .type-lockup .lockup-eyebrow { font-size: 17px; }
  .type-lockup .lockup-copy { font-size: 17px; }
}

/* --- paddlenav ------------------------------------------------------------ */
.paddlenav {
  margin-top: 26px;
  display: flex; justify-content: flex-end; gap: 12px;
  margin-inline: auto;
  width: var(--viewport-content);
  max-width: var(--content-max-width);
}
.paddlenav button {
  width: 36px; height: 36px;
  border-radius: 36px;
  background: rgba(210,210,215,.64);
  color: #1d1d1f;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.paddlenav button:hover { background: rgba(190,190,196,.8); }
.paddlenav button:disabled { opacity: .32; cursor: default; }
.paddlenav button:focus-visible { outline: 2px solid var(--sk-focus-color); outline-offset: 3px; }
.paddlenav svg { width: 11px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* The narrow measure Apple uses for centred statements. */
.beat-head { max-width: 860px; margin-inline: auto; text-align: center; }
.beat-eyebrow {
  font-family: var(--sk-font-display);
  font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em;
  color: #86868b;
  margin-bottom: 14px;
}
@media only screen and (max-width: 1068px) { .beat-eyebrow { font-size: 24px; } }
@media only screen and (max-width: 734px)  { .beat-eyebrow { font-size: 21px; } }
.beat-copy {
  margin: 26px auto 0;
  max-width: 700px;
  font-family: var(--sk-font-display);
  font-size: 21px; line-height: 1.381; font-weight: 400; letter-spacing: .011em;
  color: #86868b;
}
@media only screen and (max-width: 734px) { .beat-copy { font-size: 19px; margin-top: 20px; } }

/* --- buttons -------------------------------------------------------------- */
/* Apple's own button metrics: 14px text, 9px/16px padding on a content-box
   with a 1px border, which lands on their real 36px. The previous values here
   paired 17px text with 8px padding — the text filled the pill edge to edge
   and the whole control read cheap. Larger CTAs use .button-elevated below. */
.button {
  --sk-button-background: var(--sk-blue);
  --sk-button-background-hover: #0077ED;
  --sk-button-background-active: #006EDB;
  --sk-button-color: #fff;
  --sk-button-padding-horizontal: 16px;
  --sk-button-padding-vertical: 9px;
  --sk-button-border-width: 1px;
  display: inline-block;
  box-sizing: content-box;
  border-radius: 980px;
  border: var(--sk-button-border-width) solid transparent;
  background: var(--sk-button-background);
  color: var(--sk-button-color);
  padding-block: calc(var(--sk-button-padding-vertical) - var(--sk-button-border-width));
  padding-inline: calc(var(--sk-button-padding-horizontal) - var(--sk-button-border-width));
  font-family: var(--sk-font-text);
  font-size: 14px; line-height: 1.2857742857; font-weight: 400; letter-spacing: -0.016em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.button:hover { background: var(--sk-button-background-hover); text-decoration: none; }
.button:active { background: var(--sk-button-background-active); }
.button:focus-visible { outline: 2px solid var(--sk-focus-color); outline-offset: 3px; }

.button-neutral {
  --sk-button-background: #1d1d1f;
  --sk-button-background-hover: #272729;
  --sk-button-background-active: #18181A;
  --sk-button-color: #fff;
}
.button-reduced {
  --sk-button-padding-horizontal: 11px;
  --sk-button-padding-vertical: 4px;
  font-size: 12px; line-height: 1.3333733333; letter-spacing: -0.01em;
}
/* Apple's larger CTA — 17px text needs 12px/22px to keep the same optical
   ratio the 14px button has. */
.button-elevated {
  --sk-button-padding-horizontal: 22px;
  --sk-button-padding-vertical: 12px;
  font-size: 17px; line-height: 1.1764705882; letter-spacing: -0.022em;
}
.button-super {
  --sk-button-padding-horizontal: 31px;
  --sk-button-padding-vertical: 18px;
}
.button-secondary {
  --sk-button-background: transparent;
  --sk-button-background-hover: #0077ED;
  --sk-button-background-active: #006EDB;
  --sk-button-color: #06c;
  border: 1px solid #06c;
}
.button-secondary:hover { color: #fff; border-color: transparent; }

.theme-dark .button-neutral {
  --sk-button-background: #f5f5f7;
  --sk-button-background-hover: #fff;
  --sk-button-background-active: #EDEDF2;
  --sk-button-color: #000;
}

.link {
  color: var(--sk-link-color);
  text-decoration: none;
  font-size: 17px; letter-spacing: -0.022em;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.link:hover { text-decoration: underline; }
/* The chevron nudges on hover — a small Apple tell that costs nothing. */
.link::after {
  content: "\203A";
  transition: transform .25s var(--ease-apple);
}
.link:hover::after { transform: translateX(3px); }

/* --- localnav ------------------------------------------------------------- */
.localnav {
  position: sticky; top: 0; z-index: 9997;
  height: 48px;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.localnav-content {
  margin-inline: auto;
  width: var(--viewport-content);
  max-width: 980px;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.localnav-title {
  font-family: var(--sk-font-display);
  font-size: 21px; line-height: 1.1904761905; font-weight: 600; letter-spacing: .011em;
  color: #1d1d1f; text-decoration: none; white-space: nowrap;
}
.localnav-menu { display: flex; align-items: center; gap: 24px; min-width: 0; }
.localnav-link {
  font-size: 12px; line-height: 1.3333733333; letter-spacing: -0.01em;
  color: #1d1d1f; text-decoration: none; opacity: .88; white-space: nowrap;
}
.localnav-link:hover { color: var(--sk-link-color); opacity: 1; }
.localnav-link[aria-current="page"] { color: var(--sk-link-color); opacity: 1; }
@media only screen and (max-width: 734px) {
  .localnav-menu .localnav-link.is-secondary { display: none; }
}

/* --- device mock ---------------------------------------------------------- */
@media only screen and (min-width: 1441px) { }
@media only screen and (max-width: 1068px) { }
@media only screen and (max-width: 734px)  { }
@media only screen and (max-width: 480px)  { }
/* A device sized for a hero or a pinned stage rather than a card. */
.device-lg @media only screen and (max-width: 1068px) { }
@media only screen and (max-width: 734px)  { }

/* --- specs ---------------------------------------------------------------- */
.spec-list { margin-top: 48px; display: flex; flex-direction: column; }
.spec-item {
  display: flex; gap: 16px; align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid #d2d2d7;
}
.spec-item:last-child { border-bottom: 1px solid #d2d2d7; }
.spec-term { font-weight: 600; min-width: 170px; flex: none; font-size: 17px; }
.spec-desc { color: #86868b; font-size: 17px; line-height: 1.4705882353; }
@media only screen and (max-width: 734px) {
  .spec-item { flex-direction: column; gap: 4px; }
  .spec-term { min-width: 0; }
}

/* --- footer --------------------------------------------------------------- */
.apps-footer {
  background: #f5f5f7;
  color: #6e6e73;
  font-size: 12px; line-height: 1.3333733333; letter-spacing: -0.01em;
  padding-block: 34px 44px;
}
.apps-footer .section-content { display: flex; flex-direction: column; gap: 14px; }
.apps-footer a { color: #424245; text-decoration: none; }
.apps-footer a:hover { text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal { border-top: 1px solid #d2d2d7; padding-top: 16px; }

/* --- utilities ------------------------------------------------------------ */
.section-headline { margin-bottom: 0; }
.u-center { text-align: center; }

/* Motion is decoration here — every reveal is a settle, never the only way
   content appears, so switching it off costs the reader nothing. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .story-beat { opacity: 1; }
  .story-screens img { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===========================================================================
   SIGNATURE COMPONENTS — one per app, so no two product pages scan alike.
   Each sits on that app's `background-app` wash.
=========================================================================== */

/* --- Eagle One: the day strip --------------------------------------------- */
/* A campus day on one line. Only an app whose premise is "the four things you
   check between waking and sleeping" can run this. */
.daystrip {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.daystrip::before {
  content: "";
  position: absolute; top: 7px; left: 6%; right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--app-accent), var(--app-deep));
  opacity: .32;
}
.daystrip-item { position: relative; padding-top: 40px; }
.daystrip-item::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--app-accent);
  box-shadow: 0 0 0 5px var(--app-wash-a);
}
.daystrip-time {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--app-accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.daystrip-item h3 {
  font-family: var(--sk-font-display);
  font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em;
}
.daystrip-item p { margin-top: 8px; color: #6e6e73; font-size: 17px; line-height: 1.4705882353; }
@media only screen and (max-width: 1068px) {
  .daystrip { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; margin-top: 56px; }
  .daystrip::before { display: none; }
}
@media only screen and (max-width: 734px) {
  .daystrip { grid-template-columns: 1fr; gap: 34px; }
  .daystrip-item { padding-top: 34px; }
  .daystrip-item h3 { font-size: 21px; }
}

/* --- Savory: the transformation strip ------------------------------------- */
/* The app's actual magic trick, as the three states it moves through. */
.transform-strip {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.transform-step {
  background: #fff;
  border-radius: 28px;
  padding: 40px 34px;
  min-height: 260px;
  display: flex; flex-direction: column; gap: 10px;
}
.transform-step .step-label {
  font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--app-accent);
}
.transform-step h3 {
  font-family: var(--sk-font-display);
  font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em;
}
.transform-step p { color: #6e6e73; font-size: 17px; line-height: 1.4705882353; }
.transform-step .step-proof {
  margin-top: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: #86868b;
  border-top: 1px solid #e8e8ed; padding-top: 14px;
}
.transform-arrow {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--app-accent);
  opacity: .55;
}
.transform-arrow svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
@media only screen and (max-width: 1068px) {
  .transform-strip { grid-template-columns: 1fr; gap: 14px; margin-top: 56px; }
  .transform-step { min-height: 0; padding: 32px 28px; }
  .transform-arrow { transform: rotate(90deg); margin-inline: auto; }
}

/* --- Wishlist: the price chart -------------------------------------------- */
/* The product is a number changing over time, so the page shows exactly that,
   at full width. It is the only chart on the site. */
.pricechart {
  margin-top: 72px;
  background: #fff;
  border-radius: 28px;
  padding: 48px 44px 36px;
}
.pricechart-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.pricechart-now {
  font-family: var(--sk-font-display);
  font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.02em;
}
.pricechart-was { font-size: 21px; color: #86868b; text-decoration: line-through; }
.pricechart-badge {
  background: #34A853; color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  padding: 5px 12px; border-radius: 999px;
}
.pricechart-sub { color: #6e6e73; font-size: 17px; margin-bottom: 30px; }
.pricechart svg { width: 100%; height: auto; display: block; }
.pricechart-axis {
  display: flex; justify-content: space-between;
  margin-top: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: #86868b;
}
@media only screen and (max-width: 734px) {
  .pricechart { padding: 32px 24px 26px; border-radius: 22px; margin-top: 56px; }
  .pricechart-now { font-size: 40px; }
}

/* ===========================================================================
   THE APP STORE LANGUAGE — a light bento grid
   ---------------------------------------------------------------------------
   Corrected reference. I had measured the HEROES of Arcade and Music (the two
   darkest things Apple ships) and built a dark site off them. Checking the
   actual markup of six services pages — /apple-one, /icloud, /apple-fitness-
   plus, /app-store, /apple-books, /apple-music — returns ZERO dark-themed
   sections between them. Apple One even labels its plans section `theme-light`.

   The right model for a page about apps is apple.com/app-store, which is:
     - ground #f5f5f7, tiles #fff, 18px radius, 20px gap
     - a mosaic of `full` (1020x550) and `half` (500x670) tiles
     - colour on INDIVIDUAL tiles only: blue #0071e3, inverted #1d1d1f
     - big bold type INSIDE the tile (~40px) — that is where the boldness
       lives, not in a dark page
     - `fact` tiles carrying one huge number
=========================================================================== */

.section-tiles { background: #f5f5f7; }
.section-tiles .section-headline-lg {
  font-family: var(--sk-font-display);
  font-size: 56px; line-height: 1.0714285714; font-weight: 600; letter-spacing: -0.005em;
  text-align: center;
  max-width: 20ch;
  margin: 0 auto 56px;
}
@media only screen and (max-width: 1068px) { .section-tiles .section-headline-lg { font-size: 44px; margin-bottom: 44px; } }
@media only screen and (max-width: 734px)  { .section-tiles .section-headline-lg { font-size: 32px; letter-spacing: .004em; margin-bottom: 32px; } }

.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1040px;
  margin-inline: auto;
}

/* Measured off apple.com/app-store's grid items. The critical part is the
   WEIGHTING, which I had backwards twice: art occupies the top ~70% of the
   tile and ONE 48px sentence sits at the bottom. No eyebrow, no grey body
   copy, no "learn more" link on the tile face. Apple's tiles are a picture and
   a sentence; a tile carrying four stacked text elements reads as a blog card
   no matter how correct its radius is. */
.bento-item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  color: #1d1d1f;
  padding: 60px;
  display: flex;
  flex-direction: column;
  /* Fixed, like Apple's: half 670, full 550. The art is clipped to fit rather
     than allowed to push the tile taller — that is what keeps a row of tiles
     reading as a grid instead of as stacked cards. */
  height: 670px;
  text-decoration: none;
}
.bento-item.is-full { grid-column: span 2; height: 550px; }

.bento-item.theme-blue { background: #0071e3; color: #fff; }
.bento-item.theme-inverted { background: #1d1d1f; color: #f5f5f7; }
.bento-item.theme-accent { background: var(--app-accent); color: #fff; }

/* The art takes whatever the sentence doesn't, and is cropped by the tile. */
.bento-art {
  flex: 1;
  min-height: 0;
  display: flex; justify-content: center; align-items: flex-start;
  margin: -20px -60px 32px;
  padding-inline: 60px;
  overflow: hidden;
}
.bento-art .bento-item.is-full .bento-art /* The sentence. One per tile, at the bottom, 48px. */
.bento-item h3 {
  font-family: var(--sk-font-display);
  font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em;
  margin-top: auto;
}
/* A fact tile is a single 64px sentence with the number inside it — Apple does
   not set the numeral separately ("Nearly 2M apps available worldwide."). */
.bento-item.is-fact h3 {
  font-size: 64px; line-height: 1.0625; letter-spacing: -0.009em;
  margin-top: auto;
}

/* Small identifier above the sentence — not in Apple's grid, but these tiles
   have to say which app they belong to. */
.bento-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.022em;
  margin-bottom: 14px;
  opacity: .72;
}
.bento-eyebrow img { width: 32px; height: 32px; border-radius: 22.37%; opacity: 1; }

@media only screen and (max-width: 1068px) {
  .bento-item { padding: 44px; height: 580px; }
  .bento-item.is-full { height: 520px; }
  .bento-item h3 { font-size: 36px; letter-spacing: 0; }
  .bento-item.is-fact h3 { font-size: 44px; }
  .bento-art { margin: -12px -44px 26px; padding-inline: 44px; }
  .bento-art .device, .bento-item.is-full .bento-art }
@media only screen and (max-width: 734px) {
  .bento { grid-template-columns: 1fr; }
  .bento-item, .bento-item.is-full { grid-column: span 1; height: 470px; padding: 32px; }
  .bento-item h3 { font-size: 28px; letter-spacing: .007em; }
  .bento-item.is-fact h3 { font-size: 34px; }
  .bento-art { margin: -8px -32px 22px; padding-inline: 32px; }
  .bento-art .device, .bento-item.is-full .bento-art }

/* --- light hero ----------------------------------------------------------- */
/* Services heroes are a plate, not a black screen: light ground, the mark, one
   claim, one pill. */
.hero-light {
  background: #f5f5f7;
  text-align: center;
  padding-block: 110px 96px;
  overflow: hidden;
}
@media only screen and (max-width: 734px) { .hero-light { padding-block: 72px 64px; } }
.hero-light .hero-mark { display: flex; align-items: center; justify-content: center; gap: 20px; }
.hero-light .hero-mark img {
  width: 92px; height: 92px; border-radius: 22.37%;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
@media only screen and (max-width: 734px) { .hero-light .hero-mark img { width: 64px; height: 64px; } }
.hero-light .hero-wordmark {
  font-family: var(--sk-font-display);
  font-size: 64px; line-height: 1.05; font-weight: 600; letter-spacing: -0.015em;
  color: #1d1d1f;
}
@media only screen and (max-width: 1068px) { .hero-light .hero-wordmark { font-size: 52px; } }
@media only screen and (max-width: 734px)  { .hero-light .hero-wordmark { font-size: 36px; } }
.hero-light .hero-claim {
  margin: 26px auto 0;
  max-width: 18ch;
  font-family: var(--sk-font-display);
  font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em;
  color: #1d1d1f;
}
@media only screen and (max-width: 1068px) { .hero-light .hero-claim { font-size: 40px; letter-spacing: 0; } }
@media only screen and (max-width: 734px)  { .hero-light .hero-claim { font-size: 30px; } }
.hero-light .hero-sub {
  margin: 20px auto 0;
  max-width: 46ch;
  font-size: 19px; line-height: 1.42;
  color: #6e6e73;
}
.hero-light .hero-actions { margin-top: 32px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.hero-icons { margin-top: 56px; display: flex; gap: 26px; justify-content: center; }
.hero-icons a {
  display: block; width: 84px; height: 84px;
  border-radius: 22.37%; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
  transition: transform .4s var(--ease-apple);
}
.hero-icons a:hover { transform: translateY(-6px) scale(1.04); }
.hero-icons img { width: 100%; height: 100%; object-fit: cover; }
@media only screen and (max-width: 734px) {
  .hero-icons { margin-top: 40px; gap: 16px; }
  .hero-icons a { width: 60px; height: 60px; }
}

/* The brand pill, used for one CTA rather than as a page-wide wash. */
.button-brand {
  --sk-button-background: var(--app-accent);
  --sk-button-background-hover: var(--app-deep);
  --sk-button-background-active: var(--app-deep);
  --sk-button-color: #fff;
}
.button-white {
  --sk-button-background: #fff;
  --sk-button-background-hover: #f5f5f7;
  --sk-button-background-active: #ededf0;
  --sk-button-color: #1d1d1f;
}

/* --- poster rail ---------------------------------------------------------- */
/* A swipeable rail of small cards, for a set that doesn't warrant a bento
   tile each. Light ground, matching the rest of the page. */
.poster-rail {
  margin-top: 48px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.poster-rail::-webkit-scrollbar { display: none; }
.poster-set {
  display: inline-grid; grid-auto-flow: column; gap: 20px; width: fit-content;
  padding-inline: calc(50vw - min(var(--viewport-content), var(--content-max-width)) / 2);
}
.poster {
  width: 260px; min-height: 300px;
  scroll-snap-align: start;
  border-radius: 18px;
  padding: 32px 30px;
  background: #f5f5f7;
  display: flex; flex-direction: column; gap: 8px;
}
/* On a tinted plate the card lifts to white instead. */
.section-tiles .poster { background: #fff; }
.poster h3 {
  font-family: var(--sk-font-display);
  font-size: 24px; line-height: 1.1666666667; font-weight: 600; letter-spacing: .009em;
}
.poster p { font-size: 17px; line-height: 1.4705882353; color: #6e6e73; }
.poster .poster-status {
  margin-top: auto; padding-top: 16px;
  font-size: 12px; font-weight: 600; color: #86868b;
}
@media only screen and (max-width: 734px) { .poster { width: 220px; padding: 26px 24px; } }

/* ===========================================================================
   RESTORED: the original white language
   ---------------------------------------------------------------------------
   The first build's vibe was right — white / #f5f5f7 plates, a 21px type
   lockup over restrained art, 144px rhythm, reveal on scroll. What it needed
   was MORE KINDS OF SECTION so pages stop repeating, not a new design
   language. These are the section variants to choose between.
=========================================================================== */

/* --- A. caption-tile gallery ---------------------------------------------- */
.gallery { margin-top: 56px; position: relative; }
.gallery .scroll-container {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: calc(50vw - min(var(--viewport-content), var(--content-max-width)) / 2);
  scrollbar-width: none;
}
.gallery .scroll-container::-webkit-scrollbar { display: none; }
.caption-tile-set {
  display: inline-grid; grid-auto-flow: column; gap: 20px; width: fit-content;
  padding-inline: calc(50vw - min(var(--viewport-content), var(--content-max-width)) / 2);
}
.caption-tile { width: 420px; scroll-snap-align: start; display: flex; flex-direction: column; }
@media only screen and (max-width: 1068px) { .caption-tile { width: 360px; } }
@media only screen and (max-width: 734px)  { .caption-tile { width: 280px; } }
.caption-tile .tile-art {
  height: 450px; border-radius: 28px; overflow: hidden; background: #fff;
  display: flex; align-items: flex-end; justify-content: center; position: relative;
}
.section.background-alt .caption-tile .tile-art { background: #fff; }
.section:not(.background-alt) .caption-tile .tile-art { background: #f5f5f7; }
@media only screen and (max-width: 1068px) { .caption-tile .tile-art { height: 400px; } }
@media only screen and (max-width: 734px)  { .caption-tile .tile-art { height: 330px; border-radius: 22px; } }
.caption-tile .tile-art @media only screen and (max-width: 1068px) { .caption-tile .tile-art }
@media only screen and (max-width: 734px)  { .caption-tile .tile-art }
.caption-tile .tile-caption { padding-top: 18px; }
.caption-tile .tile-caption h3 {
  font-family: var(--sk-font-text);
  font-size: 17px; line-height: 1.2352941176; font-weight: 600; letter-spacing: -0.022em;
  color: #1d1d1f;
}
.caption-tile .tile-caption p {
  margin-top: 4px;
  font-size: 17px; line-height: 1.2352941176; letter-spacing: -0.022em; color: #6e6e73;
}

/* --- B. alternating feature rows ------------------------------------------ */
.feature-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.feature-layout.is-reversed .feature-art { order: -1; }
.feature-copy h2 + p { margin-top: 24px; }
.feature-copy p {
  color: #86868b;
  font-family: var(--sk-font-display);
  font-size: 21px; line-height: 1.381; letter-spacing: .011em;
}
.feature-art { display: flex; justify-content: center; }
.feature-art @media only screen and (max-width: 1068px) {
  .feature-layout { grid-template-columns: 1fr; gap: 48px; }
  .feature-layout.is-reversed .feature-art { order: 0; }
  .feature-copy p { font-size: 19px; }
}

/* --- C. quiet tile grid --------------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 64px; }
.feature-tile {
  background: #f5f5f7; border-radius: 28px; padding: 48px 44px;
  display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.section.background-alt .feature-tile { background: #fff; }
.feature-tile h3 {
  font-family: var(--sk-font-display);
  font-size: 28px; line-height: 1.1428571429; font-weight: 600; letter-spacing: .007em;
}
.feature-tile p { color: #86868b; font-size: 17px; line-height: 1.4705882353; letter-spacing: -0.022em; }
.feature-tile .tile-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--app-accent); text-transform: uppercase;
}
@media only screen and (max-width: 734px) {
  .feature-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .feature-tile { padding: 34px 30px; border-radius: 22px; }
  .feature-tile h3 { font-size: 21px; letter-spacing: .011em; }
}

/* --- D. one big statement ------------------------------------------------- */
.statement {
  text-align: center;
  max-width: 20ch;
  margin: 0 auto;
  font-family: var(--sk-font-display);
  font-size: 80px; line-height: 1.05; font-weight: 600; letter-spacing: -0.015em;
}
@media only screen and (max-width: 1068px) { .statement { font-size: 56px; letter-spacing: -0.005em; } }
@media only screen and (max-width: 734px)  { .statement { font-size: 40px; letter-spacing: 0; } }
.statement-art { margin-top: 64px; display: flex; justify-content: center; }
.statement-art @media only screen and (max-width: 734px) { .statement-art }

/* --- pinned story --------------------------------------------------------- */
/* The device holds still, pinned in the viewport, while the copy beats scroll
   past it and the screen inside crossfades to match whichever beat is active.
   Built from position:sticky — no scroll hijacking, so a trackpad flick still
   behaves like a trackpad flick. Driven by the [data-story] block in apps.js. */
.section-story { overflow: clip; }
.story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.story-stage {
  position: sticky;
  top: max(96px, calc(50vh - 330px));
  display: flex; justify-content: center;
}
.story-beats { display: flex; flex-direction: column; }
.story-beat {
  min-height: 78vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 4vh;
}
.story-beat .beat-index {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--app-accent); text-transform: uppercase;
  margin-bottom: 16px;
}
.story-beat h3 {
  font-family: var(--sk-font-display);
  font-size: 48px; line-height: 1.0834933333; font-weight: 600; letter-spacing: -0.003em;
}
.story-beat p {
  margin-top: 20px;
  font-family: var(--sk-font-display);
  font-size: 21px; line-height: 1.381; font-weight: 400; letter-spacing: .011em;
  color: #86868b;
  max-width: 30ch;
}
/* Inactive beats sit back so the active one carries the eye. */
.js .story-beat { opacity: .32; transition: opacity .6s var(--ease-apple); }
.js .story-beat.is-active { opacity: 1; }

/* The stacked screens inside the pinned device crossfade as beats activate. */
.story-screens { position: relative; }
.story-screens img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0;
  transition: opacity .7s var(--ease-apple);
}
.story-screens img.is-active { opacity: 1; }
.story-screens img:first-child { position: relative; }

/* Each beat carries its own device for the mobile rail; hidden on desktop
   where the pinned stage is the one that shows. */
.beat-art { display: none; }

/* Below 1069 the pinning stops entirely — apple.com has zero sticky content
   elements at phone width; their pinned beats become swipeable rails. */
@media only screen and (max-width: 1068px) {
  .story-layout { display: block; }
  .story-stage { display: none; }
  .story-rail {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc((100% - 100vw) / 2);
    width: 100vw;
  }
  .story-rail::-webkit-scrollbar { display: none; }
  .story-beats {
    display: grid; grid-auto-flow: column; gap: 20px; width: fit-content;
    padding-inline: calc(50vw - var(--viewport-content) / 2);
  }
  .story-beat {
    width: 280px; min-height: 0; display: block; padding-block: 0;
    scroll-snap-align: start; text-align: left;
  }
  .js .story-beat { opacity: 1; }
  .beat-art {
    display: flex; justify-content: center; align-items: flex-end;
    height: 330px; border-radius: 22px; overflow: hidden;
    background: #fff; margin-bottom: 18px;
  }
  .section-story:not(.background-alt) .beat-art { background: #f5f5f7; }
  .beat-art .story-beat .beat-index { margin-bottom: 8px; }
  .story-beat h3 { font-size: 24px; line-height: 1.1666666667; letter-spacing: .009em; }
  .story-beat p { font-size: 17px; line-height: 1.4705882353; letter-spacing: -0.022em; margin-top: 8px; max-width: none; }
}