/* The page shares the site's type, blue accent, and quiet canvas. */
body[data-site-page="imessage"] {
  --imessage-ink: #0b0b0b;
  --imessage-muted: #616161;
  --imessage-blue: #0874df;
  --imessage-line: rgb(0 0 0 / 10%);
  color: var(--imessage-ink);
  background: #fafafa;
  font-family: var(--site-font);
  -webkit-font-smoothing: antialiased;
}
/* Keep decorative sticker bounds inside the viewport in both reading directions. */
body[data-site-page="imessage"] #site-page { overflow-x: clip; }
.imessage-page, .imessage-page *, .imessage-page *::before, .imessage-page *::after { box-sizing: border-box; }
/* This page currently has English and Chinese copy, both read left to right. */
.imessage-page { width: min(960px, calc(100% - 40px)); margin-inline: auto; outline: none; direction: ltr; }
.imessage-page h1, .imessage-page h2, .imessage-page h3, .imessage-page p { margin: 0; }
.imessage-page h1, .imessage-page h2, .imessage-page h3 { text-wrap: balance; }
.imessage-page p { text-wrap: pretty; }
.imessage-heading-line, .imessage-copy-part { display: block; }
.imessage-copy-part + .imessage-copy-part { margin-top: .3em; }
.imessage-page a, .imessage-page summary { touch-action: manipulation; }
.imessage-page a:focus-visible, .imessage-page summary:focus-visible { outline: 3px solid var(--imessage-blue); outline-offset: 5px; border-radius: 4px; }
.imessage-skip { position: fixed; inset: 12px auto auto 20px; z-index: 200; padding: 12px 18px; color: #fff; background: #0b0b0b; border-radius: 8px; transform: translateY(-200%); }
.imessage-skip:focus { transform: none; }
.imessage-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 26px; padding-block: 76px 82px; }
.imessage-eyebrow { color: var(--imessage-muted); font-size: 15px; line-height: 1.5; }
.imessage-hero h1 { margin-top: 17px; font-size: clamp(44px, 5.1vw, 64px); font-weight: 400; line-height: 1.25; letter-spacing: -.065em; }
.imessage-hero h1 .imessage-heading-line { position: relative; width: fit-content; padding-inline-end: .22em; white-space: nowrap; }
.imessage-title-sticker { position: absolute; z-index: 1; right: -.05em; top: -.08em; width: .82em; height: .82em; object-fit: contain; transform: rotate(8deg); user-select: none; pointer-events: none; }
.imessage-heading-line:first-child .imessage-title-sticker { right: .02em; top: .04em; transform: rotate(-4deg); }
.imessage-heading-line:nth-child(2) .imessage-title-sticker { right: auto; left: 2.73em; top: -.2em; transform: rotate(18deg); }
.imessage-heading-line:nth-child(3) .imessage-title-sticker { right: auto; left: 3.07em; top: .2em; transform: rotate(12deg); }
.imessage-blue { color: var(--imessage-blue); }
.imessage-intro { max-width: 33ch; margin-top: 25px !important; color: var(--imessage-muted); font-size: 18px; line-height: 1.6; }
.imessage-page .imessage-supporting-copy { max-width: 37ch; margin-top: 16px; color: var(--imessage-muted); font-size: 16px; line-height: 1.6; }
.imessage-supporting-copy .imessage-copy-part + .imessage-copy-part { margin-top: 0; }
.imessage-supporting-copy [data-i18n="imessage.introEarn"] { white-space: pre-line; }
.imessage-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 28px; padding: 12px 24px; border-radius: 30px; color: #fff; background: var(--imessage-blue); font-size: 16px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background-color 160ms ease; }
.imessage-art { margin: 0; }
.imessage-sheet { display: block; width: 100%; height: auto; overflow: visible; user-select: none; pointer-events: none; }
.imessage-sheet [data-sticker] { transform-box: view-box; }
.imessage-glove { opacity: 0; transform-origin: 0 0; }
.imessage-glove > image { transform: scale(.75); transform-origin: 0 0; }
.imessage-art-stage { position: relative; aspect-ratio: 600 / 640; }
.imessage-motion { position: absolute; right: 0; bottom: 20px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #4c5a63; background: rgb(255 255 255 / 76%); border: 1px solid rgb(78 100 118 / 12%); border-radius: 50%; cursor: pointer; touch-action: manipulation; }
.imessage-motion[hidden] { display: none; }
.imessage-motion:focus-visible { outline: 3px solid var(--imessage-blue); outline-offset: 4px; }
.imessage-motion-play, .imessage-motion[data-paused="true"] .imessage-motion-pause { display: none; }
.imessage-motion[data-paused="true"] .imessage-motion-play { display: block; }
.imessage-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.imessage-crew { padding-block: 52px 46px; }
.imessage-crew-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.imessage-page .imessage-crew-heading h2 { font-size: 26px; letter-spacing: -.04em; }
.imessage-crew-heading p { color: var(--imessage-muted); font-size: 15px; line-height: 1.5; }
.imessage-crew-list { display: flex; justify-content: space-between; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.imessage-crew-list li { flex: 1; min-width: 0; }
.imessage-crew-list figure { margin: 0; text-align: center; }
.imessage-crew-portrait { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 100%; max-width: 122px; aspect-ratio: 1; margin-inline: auto; }
.imessage-crew-portrait img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; user-select: none; pointer-events: none; }
/* Ampo has less transparent padding than the other original character PNGs. */
.imessage-crew-portrait--ampo img { height: 75%; }
.imessage-crew-list figcaption { margin-top: 12px; color: var(--imessage-muted); font-size: 13px; line-height: 1.5; }
.imessage-workflow { padding-block: 58px 72px; border-top: 1px solid var(--imessage-line); }
.imessage-page h2 { font-size: clamp(30px, 3.5vw, 42px); font-weight: 400; line-height: 1.18; letter-spacing: -.05em; }
.imessage-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 42px 0 0; padding: 0; list-style: none; }
.imessage-page h3 { font-size: 21px; line-height: 1.3; font-weight: 500; letter-spacing: -.035em; }
.imessage-steps p, .imessage-detail-notes p { max-width: 40ch; margin-top: 12px; color: var(--imessage-muted); font-size: 16px; line-height: 1.6; }
.imessage-details { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; margin-inline: -36px; padding: 58px 36px; border-radius: 28px; background: #edf4fc; }
.imessage-details-heading h2 { font-size: 35px; }
.imessage-details-heading > p:last-child { max-width: 35ch; margin-top: 22px; color: var(--imessage-muted); font-size: 16px; line-height: 1.6; }
.imessage-detail-notes { display: grid; align-content: center; gap: 32px; }
.imessage-faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; padding-block: 100px 48px; }
.imessage-faq h2 { max-width: 16ch; }
.imessage-questions details { border-bottom: 1px solid var(--imessage-line); }
.imessage-questions details:first-child { border-top: 1px solid var(--imessage-line); }
.imessage-questions summary { position: relative; min-height: 64px; padding: 21px 32px 21px 0; cursor: pointer; font-size: 17px; font-weight: 500; line-height: 1.4; list-style: none; }
.imessage-questions summary::-webkit-details-marker { display: none; }
.imessage-questions summary::after { content: '+'; position: absolute; inset-inline-end: 3px; top: 17px; font-size: 24px; font-weight: 400; }
.imessage-questions details[open] > summary::after { content: '−'; }
.imessage-questions details p { max-width: 48ch; margin-bottom: 22px; padding-inline-end: 24px; color: var(--imessage-muted); font-size: 16px; line-height: 1.6; }
.imessage-page:lang(zh) h1, .imessage-page:lang(zh) h2, .imessage-page:lang(zh) h3 { letter-spacing: -.025em; line-height: 1.2; }
.imessage-page:lang(zh) .imessage-hero h1 { line-height: 1.35; }
.imessage-page:lang(zh) .imessage-heading-line:nth-child(2) .imessage-title-sticker, .imessage-page:lang(zh) .imessage-heading-line:nth-child(3) .imessage-title-sticker { left: 1.05em; }
.imessage-page:lang(zh) .imessage-intro { max-width: 18em; }
.imessage-page:lang(zh) [data-i18n="imessage.step3Body"] { white-space: pre-line; }
.imessage-closing { position: relative; isolation: isolate; padding-block: 60px 96px; text-align: center; }
.imessage-closing-friends { display: flex; justify-content: center; align-items: end; height: 154px; margin-bottom: 18px; pointer-events: none; }
.imessage-closing-friends img { display: block; width: 165px; height: 165px; object-fit: contain; }
.imessage-closing-friends img:first-child { transform: rotate(-8deg); margin-right: -16px; }
.imessage-closing-friends img:last-child { transform: rotate(7deg); }
.imessage-closing h2 { margin-top: 14px; font-size: clamp(40px, 5vw, 56px); }
.imessage-text-link { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; margin: 10px auto 0; color: var(--imessage-muted); font-size: 15px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .imessage-button:hover { background: #0665c4; } .imessage-text-link:hover { color: var(--imessage-ink); } }
@media (max-width: 1080px) { .imessage-details { margin-inline: 0; gap: 36px; } }
@media (max-width: 760px) {
  .imessage-hero { grid-template-columns: 1fr; gap: 12px; padding-block: 48px 68px; }
  .imessage-motion { right: 0; bottom: 12px; }
  .imessage-hero-copy { text-align: center; }
  .imessage-hero h1 .imessage-heading-line { margin-inline: auto; }
  .imessage-hero h1 { font-size: clamp(42px, 8vw, 58px); }
  .imessage-intro, .imessage-supporting-copy { margin-inline: auto !important; }
  .imessage-art { width: min(400px, 100%); margin-inline: auto; }
  .imessage-crew { padding-block: 36px 32px; }
  .imessage-crew-heading { display: block; text-align: center; }
  .imessage-crew-heading p { margin-top: 10px; }
  .imessage-crew-list { flex-wrap: wrap; justify-content: center; gap: 20px 8px; margin-top: 24px; }
  .imessage-crew-list li { flex: 0 0 calc((100% - 24px) / 4); }
  .imessage-crew-portrait { max-width: 90px; }
  .imessage-crew-list figcaption { margin-top: 8px; }
  .imessage-workflow { padding-block: 40px 48px; }
  .imessage-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
  .imessage-steps p { max-width: 40ch; margin-top: 8px; }
  .imessage-details { grid-template-columns: 1fr; padding: 30px 24px; border-radius: 20px; }
  .imessage-details-heading h2 { font-size: 30px; }
  .imessage-details-heading > p:last-child { max-width: none; }
  .imessage-faq { grid-template-columns: 1fr; gap: 28px; padding-block: 52px 20px; }
  .imessage-faq h2 { max-width: none; }
  .imessage-closing { padding-block: 50px 64px; }
}
@media (max-width: 380px) {
  .imessage-page:lang(zh) .imessage-hero h1 { font-size: 40px; }
  .imessage-crew-portrait { max-width: 74px; }
}
@media (prefers-reduced-motion: reduce) { .imessage-page a { transition: none; } .imessage-motion { display: none; } }