.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
  border: 0px;
}
.phone-device {
  width: 326px;
  height: 663px;
  position: relative;
  border: 1px solid rgb(122, 122, 122);
  border-radius: 49px;
  padding: 8px;
  background: linear-gradient(
    135deg,
    rgb(141, 141, 141),
    rgb(37, 37, 37) 30%,
    rgb(96, 96, 96) 65%,
    rgb(25, 25, 25)
  );
  box-shadow:
    rgba(41, 41, 41, 0.15) 0px 35px 60px,
    rgba(0, 0, 0, 0.2) 0px 4px 9px,
    rgba(255, 255, 255, 0.25) 0px 0px 0px 2px inset;
  text-align: left;
  color: rgb(36, 36, 36);
  flex-shrink: 0;
}
.phone-screen {
  height: 100%;
  border: 2px solid rgb(20, 20, 20);
  border-radius: 41px;
  overflow: hidden;
  background: rgb(248, 248, 248);
  display: flex;
  flex-direction: column;
  position: relative;
}
.phone-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 25px 13px;
  height: 56px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.phone-status > span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
}
.phone-status svg {
  width: 13px;
  height: 13px;
}
.dynamic-island {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 91px;
  height: 26px;
  border-radius: 16px;
  background: rgb(18, 18, 18);
}
.phone-battery {
  width: 19px;
  height: 9px;
  border: 1px solid rgb(73, 73, 73);
  border-radius: 3px;
  background: linear-gradient(90deg, rgb(73, 73, 73) 78%, transparent 78%)
    content-box;
  padding: 1px;
}
.phone-contact {
  padding: 9px 17px 17px;
  display: flex;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid rgb(232, 232, 232);
  font-size: 12px;
  font-weight: 550;
  flex-shrink: 0;
}
.phone-contact > svg {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: rgb(135, 135, 135);
}
.phone-back svg {
  width: 18px;
  height: 18px;
}
.contact-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: rgb(225, 225, 225);
  color: rgb(118, 118, 118);
  font-size: 13px;
  font-weight: 400;
}
.contact-meta {
  display: block;
  font-size: 7px;
  font-weight: 400;
  color: rgb(144, 144, 144);
  margin-top: 3px;
}
.phone-conversation {
  padding: 14px 18px;
  flex: 1 1 0%;
  min-height: 0px;
  overflow: auto;
}
.message-time {
  display: block;
  text-align: center;
  font-size: 6px;
  letter-spacing: 0.9px;
  color: rgb(153, 153, 153);
  margin-bottom: 14px;
}
.incoming-message {
  max-width: 202px;
  background: rgb(232, 232, 232);
  padding: 11px 13px;
  border-radius: 13px 13px 13px 3px;
  font-size: 12px;
  line-height: 1.55;
  color: rgb(74, 74, 74);
}
.phone-draft {
  margin: 17px 0px 0px 18px;
  border: 1px solid rgb(213, 213, 213);
  background: rgb(253, 253, 253);
  padding: 14px;
  border-radius: 13px 13px 3px;
  transition: border-color 0.25s;
}
.phone-draft > span {
  font-size: 6px;
  letter-spacing: 1.1px;
  color: rgb(155, 155, 155);
}
.phone-draft p {
  font-size: 12px;
  line-height: 1.55;
  margin-top: 6px;
  color: rgb(102, 102, 102);
  transition: color 0.2s;
}
.phone-draft p.is-refined {
  color: rgb(42, 42, 42);
}
.phone-keyboard {
  background: rgb(223, 223, 223);
  flex-shrink: 0;
  border-top: 1px solid rgb(198, 198, 198);
}
.phone-ai-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 9px 8px;
  background: rgb(233, 233, 233);
  border-bottom: 1px solid rgb(218, 218, 218);
}
.phone-ai-toolbar > img {
  width: 20px;
  height: 20px;
  margin: 0px 3px 0px 2px;
}
.phone-ai-toolbar button {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 6px;
  padding: 6px 4px;
  color: rgb(90, 90, 90);
  border-radius: 7px;
  flex: 1 1 0%;
  min-width: 0px;
  min-height: 35px;
}
.phone-ai-toolbar button:hover {
  background: rgb(217, 217, 217);
  color: rgb(26, 26, 26);
}
.phone-ai-toolbar button[aria-pressed="true"] {
  background: rgb(49, 49, 49);
  color: rgb(255, 255, 255);
}
.phone-ai-toolbar button svg {
  width: 16px;
  height: 16px;
}
.phone-ai-toolbar .phone-talk {
  flex: 0 0 31px;
  background: rgb(44, 44, 44);
  color: white;
  height: 32px;
}
.phone-result {
  background: rgb(242, 242, 242);
  padding: 9px 13px 12px;
}
.phone-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 6px;
  letter-spacing: 0.8px;
  color: rgb(129, 129, 129);
}
.phone-result-heading > button {
  background: transparent;
  color: rgb(120, 120, 120);
  border-radius: 4px;
  padding: 3px;
  display: grid;
  place-items: center;
}
.phone-result-heading svg {
  width: 13px;
  height: 13px;
}
.phone-tone-picker {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}
.phone-tone-picker button {
  font-size: 7px;
  padding: 6px 8px;
  background: rgb(230, 230, 230);
  border-radius: 5px;
  color: rgb(109, 109, 109);
}
.phone-tone-picker button[aria-pressed="true"] {
  background: rgb(51, 51, 51);
  color: white;
}
.phone-result > p {
  font-size: 12px;
  line-height: 1.5;
  margin: 10px 0px;
  color: rgb(53, 53, 53);
  min-height: 54px;
}
.phone-insert {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  background: rgb(48, 48, 48);
  color: white;
  border-radius: 6px;
  padding: 7px 13px;
  font-size: 8px;
  margin-left: auto;
}
.phone-insert svg {
  width: 12px;
  height: 12px;
}
.has-ai-result .phone-conversation {
  padding-top: 10px;
  padding-bottom: 10px;
}
.has-ai-result .message-time {
  display: none;
}
.has-ai-result .incoming-message {
  display: none;
}
.has-ai-result .phone-draft {
  margin: 0px;
  padding: 10px 12px;
}
.has-ai-result .phone-draft p {
  font-size: 11px;
  margin-top: 4px;
}
.has-ai-result .phone-predictions {
  display: none;
}
.phone-predictions {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 31px;
  color: rgb(96, 96, 96);
  font-size: 10px;
}
.phone-predictions span {
  flex: 1 1 0%;
  text-align: center;
  border-right: 1px solid rgb(196, 196, 196);
}
.phone-predictions span:last-child {
  border: 0px;
}
.phone-keys {
  padding: 3px 4px 0px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phone-key-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.phone-key-row:nth-child(2) {
  padding-inline: 13px;
}
.phone-key {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0%;
  background: rgb(251, 251, 251);
  border-radius: 4px;
  height: 33px;
  box-shadow: rgb(174, 174, 174) 0px 1px 0px;
  color: rgb(38, 38, 38);
  font-size: 15px;
  max-width: 31px;
}
.phone-key.special {
  background: rgb(194, 194, 194);
  font-size: 11px;
  flex: 1.45 1 0%;
  max-width: none;
}
.phone-key-row:last-child {
  padding-top: 1px;
}
.phone-key-row:last-child .phone-key {
  font-size: 10px;
  max-width: none;
}
.phone-key.space {
  flex: 4.2 1 0% !important;
}
.phone-key.return {
  flex: 1.7 1 0% !important;
}
.phone-keyboard-bottom {
  padding: 17px 21px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(104, 104, 104);
}
.phone-keyboard-bottom > span {
  font-size: 7px;
  letter-spacing: 0.7px;
}
.phone-keyboard-bottom svg {
  width: 17px;
  height: 17px;
}
.phone-home-indicator {
  height: 17px;
  background: rgb(223, 223, 223);
  position: relative;
  flex-shrink: 0;
}
.phone-home-indicator::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 95px;
  height: 4px;
  border-radius: 4px;
  background: rgb(54, 54, 54);
  left: 50%;
  transform: translateX(-50%);
}
.phone-hardware-button {
  position: absolute;
  width: 3px;
  background: rgb(91, 91, 91);
  left: -3px;
  top: 138px;
  height: 38px;
  border-radius: 2px 0px 0px 2px;
}
.hardware-two {
  top: 188px;
  height: 57px;
}
.phone-device button:focus-visible {
  outline-offset: 2px;
  outline-width: 2px;
}
.iphone-teaser {
  overflow: hidden;
  background: rgb(233, 233, 233);
  border-block: 1px solid rgb(222, 222, 222);
}
.iphone-teaser-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
  min-height: 665px;
  padding-block: 78px;
}
.iphone-teaser-copy .eyebrow {
  color: rgb(121, 121, 121);
}
.iphone-teaser-copy h2 {
  font-size: 51px;
  letter-spacing: -2.3px;
  margin: 20px 0px 23px;
}
.iphone-teaser-copy h2 span {
  color: rgb(141, 141, 141);
}
.iphone-teaser-copy > p {
  font-size: 14px;
  line-height: 1.85;
  color: rgb(124, 124, 124);
  max-width: 370px;
}
.iphone-teaser-points {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 25px 0px 31px;
  font-size: 10px;
  color: rgb(100, 100, 100);
}
.iphone-teaser-points > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.iphone-teaser-points svg {
  width: 16px;
  height: 16px;
}
.iphone-teaser-art {
  display: flex;
  justify-content: center;
  position: relative;
  height: 510px;
  align-items: flex-start;
}
.iphone-teaser-art .phone-device {
  transform: rotate(7deg);
  transform-origin: 50% 30%;
}
.iphone-teaser-art::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border: 1px solid rgba(191, 191, 191, 0.533);
  border-radius: 50%;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}
.iphone-teaser-sticker {
  position: absolute;
  z-index: 2;
  bottom: 77px;
  left: -8px;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: rotate(-6deg);
  background: rgb(249, 249, 249);
  border: 1px solid rgb(209, 209, 209);
  padding: 15px 19px;
  border-radius: 11px;
  box-shadow: rgba(76, 76, 76, 0.075) 0px 15px 25px;
  color: rgb(106, 106, 106);
  font-size: 11px;
}
.iphone-teaser-sticker svg {
  width: 17px;
  height: 17px;
}
.hero-platform-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgb(199, 199, 199);
  font-size: 10px;
  margin-top: 21px;
}
.hero-platform-link svg {
  width: 12px;
  height: 12px;
}
.hero-platform-link:hover {
  color: white;
}
.nav-links a[aria-current="page"] {
  color: white;
}
.nav-links a:nth-child(2) {
  display: block;
}
@media (max-width: 1000px) {
  .iphone-teaser-layout {
    gap: 35px;
  }
  .iphone-teaser-copy h2 {
    font-size: 43px;
  }
  .iphone-teaser-art .phone-device {
    transform: rotate(5deg) scale(0.92);
    transform-origin: 50% 0px;
  }
  .iphone-teaser-art {
    height: 480px;
  }
  .iphone-teaser-layout {
    min-height: 620px;
  }
  .iphone-teaser-copy > p {
    font-size: 13px;
  }
}
@media (max-width: 760px) {
  .iphone-teaser-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: 60px 0px;
    text-align: center;
  }
  .iphone-teaser-copy h2 {
    font-size: 43px;
  }
  .iphone-teaser-copy > p {
    margin: auto;
  }
  .iphone-teaser-points {
    justify-content: center;
    margin: 23px 0px;
  }
  .iphone-teaser-art {
    height: 540px;
    max-width: 400px;
    width: 100%;
    margin: auto;
  }
  .iphone-teaser-art .phone-device {
    transform: rotate(4deg);
  }
  .iphone-teaser-sticker {
    left: 5px;
    bottom: 70px;
  }
  .nav-links {
    gap: 15px;
  }
}
@media (max-width: 520px) {
  .iphone-teaser-copy h2 {
    font-size: 38px;
  }
  .iphone-teaser-copy > p {
    font-size: 12px;
  }
  .iphone-teaser-art {
    height: 520px;
  }
  .iphone-teaser-art .phone-device {
    transform: rotate(4deg) scale(0.94);
    transform-origin: 50% 0px;
  }
  .iphone-teaser-sticker {
    font-size: 9px;
    left: 0px;
    bottom: 85px;
  }
  .iphone-teaser-points {
    gap: 13px;
    font-size: 9px;
  }
  .nav-links {
    gap: 10px;
    flex-wrap: wrap;
  }
  .hero-platform-link {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .phone-device * {
    transition: none !important;
  }
}
.iphone-teaser-sticker {
  pointer-events: none;
}
.iphone-teaser-art:has(.has-ai-result) .iphone-teaser-sticker {
  opacity: 0;
}
@media (max-width: 380px) {
  .phone-conversation {
    padding: 12px 14px;
  }
  .message-time {
    margin-bottom: 10px;
  }
  .incoming-message {
    padding: 9px 11px;
    font-size: 11px;
  }
  .phone-draft {
    margin-top: 13px;
    padding: 10px;
  }
  .phone-draft p {
    font-size: 11px;
    line-height: 1.5;
  }
}