/*
 * Exodus Core Solutions — contact.html. Loads after css/inner.css.
 *
 * The contact form lives inside an iPhone: a "New Contact" sheet, then the
 * home screen, then an iMessage thread from Jay (js/contact.js drives it).
 *
 * Device frame: assets/work/screens/phone.png (900 x 1884). The screen box,
 * its corner radius and the camera pill are measured from that image, the
 * same numbers css/work.css uses (copied here, not imported).
 *
 * Inside the phone everything is sized in iOS points: --u is one point of a
 * 393 pt wide iPhone screen, derived from the screen's container width
 * (cqw), so the UI scales with the frame at every viewport.
 */

/* "CONTACT" measures 4.25em in Kanit 900 at -.025em tracking. */
.contact-page .hero__heading{ --hero-em: 4.25; }

/* ---------------------------------------------------------------------- */
/* Section layout: phone + details                                          */
/* ---------------------------------------------------------------------- */

@media (max-width: 639.98px){
  .reach{ padding-left: max(4vw, 12px); padding-right: max(4vw, 12px); }
  .reach .section-head{ padding: 0 calc(var(--gutter) - max(4vw, 12px)); }
}

.reach__grid{
  display: grid;
  gap: 4rem;
  max-width: 1120px;
  margin: 0 auto;
  justify-items: center;
}
@media (min-width: 900px){
  .reach__grid{
    grid-template-columns: auto minmax(0, 32rem);
    justify-content: center;
    gap: 4rem;
    align-items: center;
    justify-items: stretch;
  }
}
@media (min-width: 1200px){ .reach__grid{ gap: 6rem; } }

.reach__phone{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.reach__cap{
  margin-top: 1.25rem;
  text-align: center;
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.4;
  color: rgba(12, 12, 12, .6);
}
.reach__cap strong{ font-weight: 600; color: var(--bg); }

.reach__restart{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  padding: .3rem .15rem;
  border: 0;
  border-bottom: 2px solid rgba(12, 12, 12, .2);
  background: none;
  color: var(--bg);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .2s var(--ease);
}
.reach__restart svg{ width: 1.05em; height: 1.05em; }
.reach__restart:hover{ border-bottom-color: var(--bg); }

/* Details column */
.reach__aside{
  display: grid;
  gap: 2rem;
  align-content: start;
  width: 100%;
  max-width: 34rem;
}
@media (min-width: 900px){ .reach__aside{ padding-left: 2.5rem; border-left: 1px solid rgba(12, 12, 12, .15); } }
.reach__block h3{
  margin-bottom: .5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  color: rgba(12, 12, 12, .62);              /* .55 was 4.3:1 on white; .62 clears 4.5:1 */
}
.reach__block p,
.reach__steps li{
  color: rgba(12, 12, 12, .75);
  font-weight: 300;
  line-height: 1.6;
  font-size: 1rem;
}
.reach__block p + p{ margin-top: .35rem; }
.reach__block a{
  color: var(--bg);
  font-weight: 500;
  font-size: 1.1rem;
  border-bottom: 2px solid rgba(12, 12, 12, .25);
  transition: border-color .2s var(--ease);
  overflow-wrap: anywhere;
}
.reach__block a:hover{ border-color: var(--bg); }
.reach__steps{
  display: grid;
  gap: .45rem;
  padding-left: 1.2rem;
}
.reach__steps li::marker{ font-weight: 600; color: var(--bg); }

/* ---------------------------------------------------------------------- */
/* Device frame (numbers from css/work.css)                                */
/* ---------------------------------------------------------------------- */

.phone{ display: flex; flex-direction: column; align-items: center; }
.phone__device{
  position: relative;
  width: min(92vw, 390px);
  aspect-ratio: 900 / 1884;
  filter: drop-shadow(0 30px 40px rgba(12, 12, 12, .22));
}
@media (min-width: 640px){ .phone__device{ width: 370px; } }
@media (min-width: 1200px){ .phone__device{ width: 384px; } }

.phone__img{ position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.phone__screen{
  position: absolute;
  z-index: 1;
  left: 3.111%; top: 1.115%; width: 93.667%; height: 97.824%;
  border-radius: 14.2% / 6.8%;
  overflow: hidden;
  background: #000;
  container-type: inline-size;
  isolation: isolate;
}
.phone__device::after{                        /* crisp inner edge where screen meets bezel */
  content: "";
  position: absolute; z-index: 2; pointer-events: none;
  left: 3.111%; top: 1.115%; width: 93.667%; height: 97.824%;
  border-radius: 14.2% / 6.8%;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .9);
}
.phone__pill{
  position: absolute; z-index: 3;
  left: 35.56%; top: 3.08%; width: 28.8%; height: 3.98%;
  background: #000;
  border-radius: 999px;
  pointer-events: none;
}
/* Frame image missing: draw a plain titanium bezel so the screen still reads as a phone. */
.phone__device.is-frameless{
  border-radius: 15.5% / 7.4%;
  background: linear-gradient(160deg, #2a3140, #10141c 40%, #232a37);
  box-shadow: inset 0 0 0 2px #3b4454;
}
.phone__device.is-frameless .phone__img{ visibility: hidden; }

/* ---------------------------------------------------------------------- */
/* iOS shell                                                                */
/* ---------------------------------------------------------------------- */

.ios{
  --u: calc(100cqw / 393);
  --blue: #007AFF;
  --label2: rgba(60, 60, 67, .6);
  --label3: rgba(60, 60, 67, .3);
  --sep: rgba(60, 60, 67, .29);
  --grouped: #F2F2F7;
  --spring: cubic-bezier(.32, .72, 0, 1);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  font-size: calc(var(--u) * 17);
  line-height: 1.29;
  letter-spacing: -.01em;
  -webkit-text-size-adjust: 100%;
  text-align: left;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ios input,
.ios textarea{ user-select: text; }
:where(.ios) button{                          /* zero-specificity reset: component classes win */
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: inherit;
}
.ios [hidden]{ display: none !important; }
.ios :focus-visible{ outline: max(2px, calc(var(--u) * 2.5)) solid var(--blue); outline-offset: calc(var(--u) * 2); }
.ios svg{ display: block; }

.ios-emoji,
.ios-avatar__face.is-emoji{
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  letter-spacing: 0;
}

/* Status bar — items centred on the camera pill's midline */
.ios-status{
  position: absolute; z-index: 30; left: 0; right: 0; top: 0;
  height: calc(var(--u) * 54);
  color: #fff;
  pointer-events: none;
  transition: color .35s var(--spring);
}
.ios[data-state="thread"] .ios-status{ color: #000; }
.ios-status__time{
  position: absolute; left: 0; top: calc(var(--u) * 23); width: 34.6%;
  text-align: center;
  font-weight: 600; font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.ios-status__icons{
  position: absolute; right: 0; top: calc(var(--u) * 28); width: 34.6%;
  display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 6);
  padding-left: calc(var(--u) * 4);
}
.ios-status__icons svg{ fill: currentColor; }
.ios-status__signal{ width: calc(var(--u) * 18); height: calc(var(--u) * 12); }
.ios-status__wifi{ width: calc(var(--u) * 16); height: calc(var(--u) * 12); }
.ios-status__battery{ width: calc(var(--u) * 27); height: calc(var(--u) * 13); color: inherit; }

.ios-homebar{
  position: absolute; z-index: 29; left: 50%; bottom: calc(var(--u) * 8);
  width: calc(var(--u) * 138); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -69);
  border-radius: 999px;
  background: #000;
  pointer-events: none;
}
.ios-homebar--light{ background: #fff; }

/* ---------------------------------------------------------------------- */
/* Home screen                                                               */
/* ---------------------------------------------------------------------- */

.ios-home{
  position: absolute; inset: 0; z-index: 1;
  padding-top: calc(var(--u) * 68);
  overflow: hidden;
  background:
    radial-gradient(70% 38% at 18% 12%, rgba(255, 128, 232, .42), transparent 70%),
    radial-gradient(85% 45% at 92% 88%, rgba(255, 150, 52, .55), transparent 70%),
    radial-gradient(60% 40% at 80% 38%, rgba(118, 33, 176, .55), transparent 70%),
    linear-gradient(165deg, #18011F 0%, #4A0752 16%, #B600A8 42%, #7621B0 66%, #BE4C00 100%);
  transform-origin: 50% 0;
  transition: transform .55s var(--spring), border-radius .55s var(--spring);
}
.ios-home::after{                            /* the dimming a presented sheet puts on the screen below */
  content: "";
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--spring);
}
.ios[data-state="form"] .ios-home,
.ios[data-state="saved"] .ios-home{
  transform: translateY(calc(var(--u) * 47)) scale(.915);
  border-radius: calc(var(--u) * 12);
}
.ios[data-state="form"] .ios-home::after,
.ios[data-state="saved"] .ios-home::after{ opacity: .45; }
.ios-home:focus{ outline: none; }

.ios-label{
  display: block;
  margin-top: calc(var(--u) * 5);
  text-align: center;
  color: #fff;
  font-size: max(8px, calc(var(--u) * 12)); line-height: calc(var(--u) * 14);
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .25);
  white-space: nowrap;
}

.ios-home__widgets{
  display: grid;
  grid-template-columns: calc(var(--u) * 158) calc(var(--u) * 158);
  justify-content: center;
  gap: calc(var(--u) * 23);
}
.ios-widget{
  position: relative;
  width: calc(var(--u) * 158); height: calc(var(--u) * 158);
  border-radius: calc(var(--u) * 22);
  padding: calc(var(--u) * 15) calc(var(--u) * 16);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 16) rgba(0, 0, 0, .12);
}
.ios-widget--cal{ background: #fff; color: #000; }
.ios-widget__dow{ color: #FF3B30; font-weight: 600; font-size: calc(var(--u) * 12); text-transform: uppercase; letter-spacing: .02em; }
.ios-widget__date{ font-size: calc(var(--u) * 44); line-height: 1; font-weight: 400; letter-spacing: -.03em; margin-top: calc(var(--u) * 2); }
.ios-widget__sub{ margin-top: auto; font-size: calc(var(--u) * 12); color: rgba(60, 60, 67, .6); font-weight: 500; }
.ios-widget--exo{
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(182, 0, 168, .55), transparent 70%),
    radial-gradient(80% 60% at 0% 100%, rgba(190, 76, 0, .45), transparent 70%),
    #0C0C0C;
  color: #fff;
}
.ios-widget--exo img{ width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
.ios-widget__title{ margin-top: auto; font-weight: 700; font-size: calc(var(--u) * 15); letter-spacing: -.01em; }
.ios-widget__line{ font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 15); color: rgba(235, 235, 245, .7); margin-top: calc(var(--u) * 1); }

.ios-home__apps{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, calc(var(--u) * 62));
  justify-content: space-between;
  row-gap: calc(var(--u) * 22);
  margin: calc(var(--u) * 26) calc(var(--u) * 27) 0;
}
.ios-app{ display: flex; flex-direction: column; align-items: center; width: calc(var(--u) * 62); }

.ios-icon{
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: calc(var(--u) * 62); height: calc(var(--u) * 62);
  border-radius: calc(var(--u) * 14);
  overflow: hidden;
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .12);
}
.ios-icon svg{ width: 100%; height: 100%; }
.ios-icon--facetime,
.ios-icon--phone{ background: linear-gradient(180deg, #5EF777, #0BBF28); }
.ios-icon--messages{ background: linear-gradient(180deg, #6CF87F, #0FBD2C); }
.ios-icon--calendar{ background: #fff; display: flex; flex-direction: column; align-items: center; color: #000; }
.ios-icon__dow{ margin-top: calc(var(--u) * 7); font-size: calc(var(--u) * 10); font-weight: 600; color: #FF3B30; letter-spacing: .02em; line-height: 1; }
.ios-icon__num{ font-size: calc(var(--u) * 33); font-weight: 300; line-height: 1.05; letter-spacing: -.04em; }
.ios-icon--photos{ background: #fff; }
.ios-icon--camera{ background: linear-gradient(180deg, #EFEFF2, #B1B1B7); }
.ios-icon--mail{ background: linear-gradient(180deg, #22A0FF, #1462F2); }
.ios-icon--notes{ background: #fff; }
.ios-icon--weather{ background: linear-gradient(180deg, #1B6ED8, #6BBBF7); }
.ios-icon--settings{ background: linear-gradient(180deg, #E1E1E6, #9C9CA3); }
.ios-icon--safari{ background: #fff; }
.ios-icon--music{ background: linear-gradient(180deg, #FC5C7D, #FA233B); }
.ios-icon--clock,
.ios-icon--wallet{ background: #000; }
.ios-icon--reminders{ background: #fff; }
.ios-icon--exodus{
  display: grid; place-items: center;
  background: radial-gradient(90% 90% at 100% 0%, rgba(182, 0, 168, .6), transparent 70%), #0C0C0C;
}
.ios-icon--exodus img{ width: 66%; height: 66%; }

.ios-home__search{
  position: absolute; left: 50%; bottom: calc(var(--u) * 123);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 5) calc(var(--u) * 11);
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: calc(var(--u) * 12); font-weight: 600; letter-spacing: 0;
}
.ios-home__search svg{ width: calc(var(--u) * 11); height: calc(var(--u) * 11); }

.ios-dock{
  position: absolute; left: calc(var(--u) * 11); right: calc(var(--u) * 11); bottom: calc(var(--u) * 12);
  height: calc(var(--u) * 92);
  padding: 0 calc(var(--u) * 16);
  display: flex; justify-content: space-between; align-items: center;
  border-radius: calc(var(--u) * 34);
  background: rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}
.ios-dock__messages{ overflow: visible; cursor: inherit; }
.ios-dock__messages svg{ border-radius: calc(var(--u) * 14); }
.ios-dock__messages:not(:disabled):hover{ filter: brightness(1.06); }
.ios-badge{
  position: absolute; top: calc(var(--u) * -6); right: calc(var(--u) * -6);
  min-width: calc(var(--u) * 23); height: calc(var(--u) * 23);
  padding: 0 calc(var(--u) * 6);
  border-radius: 999px;
  background: #FF3B30;
  color: #fff;
  font-size: calc(var(--u) * 15); font-weight: 500; line-height: calc(var(--u) * 23); text-align: center;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------- */
/* Sheet (New Contact form + saved card)                                    */
/* ---------------------------------------------------------------------- */

.ios-sheet{
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  top: calc(var(--u) * 57);
  background: var(--grouped);
  border-radius: calc(var(--u) * 12) calc(var(--u) * 12) 0 0;
  overflow: hidden;
  transition: transform .55s var(--spring);
}
.ios[data-state="home"] .ios-sheet,
.ios[data-state="thread"] .ios-sheet{ transform: translateY(104%); }

.ios-form,
.ios-card{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  transition: opacity .3s ease;
}
.ios[data-state="saved"] .ios-form{ opacity: 0; pointer-events: none; }
.ios-card{ background: var(--grouped); opacity: 0; }
.ios-card.is-in{ opacity: 1; }
.ios-card:focus{ outline: none; }

.ios-nav{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 16);
}
.ios-nav__title{ font-weight: 600; font-size: calc(var(--u) * 17); letter-spacing: -.02em; text-align: center; white-space: nowrap; }
.ios-nav__btn{ color: var(--blue); font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22); padding: calc(var(--u) * 8) 0; white-space: nowrap; }
.ios .ios-nav__btn:hover:not(:disabled){ opacity: .7; }
.ios-nav__btn--left{ justify-self: start; }
.ios-nav__right{ justify-self: end; display: flex; align-items: center; min-height: calc(var(--u) * 38); }
.ios-nav__btn--right{ justify-self: end; grid-column: 3; }
.ios-nav__btn--done{ font-weight: 600; }
.ios .ios-nav__btn--done:disabled{ color: var(--label3); }
.ios-nav__chev{ display: inline-flex; align-items: center; gap: calc(var(--u) * 5); }
.ios-nav__chev::before{
  content: "";
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  border-left: calc(var(--u) * 3) solid currentColor; border-bottom: calc(var(--u) * 3) solid currentColor;
  border-radius: calc(var(--u) * 1);
  transform: rotate(45deg);
  margin-left: calc(var(--u) * 4);
}

.ios-spinner{ display: block; width: calc(var(--u) * 21); height: calc(var(--u) * 21); color: #8E8E93; }
.ios-spinner:focus{ outline: none; }
.ios-spinner svg{ width: 100%; height: 100%; animation: ios-spin .8s steps(8) infinite; }
@keyframes ios-spin{ to{ transform: rotate(360deg); } }

.ios-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--u) * 40);
  scrollbar-width: none;
}
.ios-scroll::-webkit-scrollbar{ display: none; }

.ios-avatar-block{ display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u) * 4); }
.ios-avatar{
  display: block;
  border-radius: 50%;
  cursor: inherit;
}
.ios-avatar--xl{ width: calc(var(--u) * 116); height: calc(var(--u) * 116); }
.ios-avatar__face{
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #A5ABB8, #858994);
  color: #fff;
  font-size: calc(var(--u) * 46); font-weight: 500; letter-spacing: .01em;
  line-height: 1;
  transition: background .3s ease;
}
.ios-avatar__face svg{ width: 100%; height: 100%; }
.ios-avatar__face.is-initials{ font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.ios-avatar__face.is-emoji{ font-size: calc(var(--u) * 64); }
button.ios-avatar:hover .ios-avatar__face{ filter: brightness(1.04); }

.ios-link{
  margin-top: calc(var(--u) * 10);
  padding: calc(var(--u) * 6) calc(var(--u) * 14);
  border-radius: 999px;
  background: rgba(120, 120, 128, .12);
  color: var(--blue);
  font-size: calc(var(--u) * 15); font-weight: 500; line-height: calc(var(--u) * 20);
}
.ios .ios-link:hover{ background: rgba(120, 120, 128, .2); }

.ios-pkg{
  margin: calc(var(--u) * 12) calc(var(--u) * 32) 0;
  text-align: center;
  font-size: max(9px, calc(var(--u) * 13)); line-height: calc(var(--u) * 18);
  color: var(--label2);
}
.ios-pkg strong{ font-weight: 600; color: #000; }

.form__honeypot{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ios-group{
  margin: calc(var(--u) * 22) calc(var(--u) * 16) 0;
  border-radius: calc(var(--u) * 10);
  background: #fff;
  overflow: hidden;
}
.ios-cell{
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 16);
  background: #fff;
}
.ios-cell + .ios-cell::before{
  content: "";
  position: absolute; top: 0; right: 0; left: calc(var(--u) * 16);
  border-top: .5px solid var(--sep);
}
.ios-cell:has(:focus-visible){ box-shadow: inset 0 0 0 2px rgba(0, 122, 255, .55); }
.ios-cell:has(:focus-visible)::before,
.ios-cell:has(:focus-visible) + .ios-cell::before{ opacity: 0; }

.ios-input{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: calc(var(--u) * 11) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: calc(var(--u) * 17);
  line-height: calc(var(--u) * 22);
  letter-spacing: -.01em;
  caret-color: var(--blue);
  -webkit-appearance: none;
  appearance: none;
}
.ios .ios-input:focus,
.ios .ios-input:focus-visible{ outline: none; }
.ios-input::placeholder{ color: rgba(60, 60, 67, .3); opacity: 1; }
/* Real iPhones zoom into any field under 16px; keep them at 16px there. */
@media (pointer: coarse){ .ios .ios-input{ font-size: max(16px, calc(var(--u) * 17)); } }

.ios-cell--kv{ padding-left: 0; }
.ios-cell--kv + .ios-cell--kv::before{ left: calc(var(--u) * 16); }
.ios-cell__key{
  flex: 0 0 calc(var(--u) * 92);
  align-self: stretch;
  display: flex; align-items: center;
  padding-left: calc(var(--u) * 16);
  margin-right: calc(var(--u) * 12);
  border-right: .5px solid var(--sep);
  color: var(--blue);
  font-size: calc(var(--u) * 15);
  cursor: inherit;
}
.ios-cell__key::after{
  content: "";
  width: calc(var(--u) * 6); height: calc(var(--u) * 6);
  margin-left: calc(var(--u) * 5);
  border-right: calc(var(--u) * 1.6) solid rgba(60, 60, 67, .3);
  border-bottom: calc(var(--u) * 1.6) solid rgba(60, 60, 67, .3);
  transform: rotate(-45deg);
}

.ios-cell--notes{ flex-direction: column; align-items: stretch; }
.ios-cell__cap{ padding-top: calc(var(--u) * 10); font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 18); color: #000; cursor: inherit; }
.ios-input--notes{
  resize: none;
  display: block;
  min-height: calc(var(--u) * 70);
  max-height: calc(var(--u) * 180);
  padding: calc(var(--u) * 4) 0 calc(var(--u) * 11);
  overflow-y: auto;
  field-sizing: content;
}

.ios-cell--switch{ justify-content: space-between; gap: calc(var(--u) * 12); cursor: inherit; }
.ios-cell__text{ font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22); padding: calc(var(--u) * 11) 0; }
.ios .ios-switch{
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--u) * 51); height: calc(var(--u) * 31);
  margin: 0;
  border-radius: 999px;
  background: rgba(120, 120, 128, .16);
  transition: background-color .25s ease;
}
.ios-switch::before{
  content: "";
  position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 2);
  width: calc(var(--u) * 27); height: calc(var(--u) * 27);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 0, 0, .15), 0 calc(var(--u) * 3) calc(var(--u) * 1) rgba(0, 0, 0, .06);
  transition: transform .3s var(--spring);
}
.ios .ios-switch:checked{ background: #34C759; }
.ios-switch:checked::before{ transform: translateX(calc(var(--u) * 20)); }
.ios .ios-switch:focus-visible{ outline-offset: calc(var(--u) * 3); }
.ios-cell--switch:has(.ios-switch:focus-visible){ box-shadow: none; }

.ios-foot{
  margin: calc(var(--u) * 7) calc(var(--u) * 32) 0;
  font-size: max(9px, calc(var(--u) * 13)); line-height: calc(var(--u) * 17);
  color: var(--label2);
  letter-spacing: 0;
}
.ios-foot a{ color: var(--blue); white-space: nowrap; }
.ios-foot a:hover{ text-decoration: underline; }

/* Saved card */
.ios-nav--card{ grid-template-columns: 1fr 1fr; }
.ios-nav--card .ios-nav__btn{ padding: 0; }
.ios-card__body{ flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u) * 4); }
.ios-avatar--static{ box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 0, 0, .08); }
.ios-card__name{
  margin-top: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 20);
  text-align: center;
  font-size: calc(var(--u) * 28); line-height: calc(var(--u) * 34); font-weight: 600; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.ios-card__co{ margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 15); color: var(--label2); text-align: center; padding: 0 calc(var(--u) * 20); }
.ios-card__co:empty{ display: none; }
.ios-card__actions{
  align-self: stretch;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 8);
  margin: calc(var(--u) * 18) calc(var(--u) * 16) 0;
}
.ios-card__actions span{
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 9) 0 calc(var(--u) * 7);
  border-radius: calc(var(--u) * 10);
  background: #fff;
  color: var(--blue);
  font-size: max(8px, calc(var(--u) * 11)); font-weight: 500; line-height: calc(var(--u) * 13);
}
.ios-card__actions svg{ width: calc(var(--u) * 22); height: calc(var(--u) * 22); fill: currentColor; }
.ios-group--card{ align-self: stretch; margin-top: calc(var(--u) * 16); }
.ios-group--card .ios-cell{ flex-direction: column; align-items: stretch; justify-content: center; padding-top: calc(var(--u) * 9); padding-bottom: calc(var(--u) * 10); }
.ios-kv__k{ font-size: max(9px, calc(var(--u) * 13)); line-height: calc(var(--u) * 17); color: #000; }
.ios-kv__v{ font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22); color: var(--blue); overflow-wrap: anywhere; }
.ios-kv__v--plain{
  color: #000;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}

/* ---------------------------------------------------------------------- */
/* Emoji picker sheet                                                        */
/* ---------------------------------------------------------------------- */

.ios-dim{
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .3s ease;
}
.ios-dim--picker{ z-index: 7; }
.ios-dim--picker.is-in{ opacity: .3; }
.ios-dim--alert{ z-index: 40; }
.ios-dim--alert.is-in{ opacity: .22; }

.ios-picker{
  position: absolute; z-index: 8; left: 0; right: 0; bottom: 0;
  max-height: calc(100% - calc(var(--u) * 70));
  display: flex; flex-direction: column;
  background: var(--grouped);
  border-radius: calc(var(--u) * 12) calc(var(--u) * 12) 0 0;
  box-shadow: 0 calc(var(--u) * -2) calc(var(--u) * 20) rgba(0, 0, 0, .15);
  transform: translateY(100%);
  transition: transform .45s var(--spring);
}
.ios-picker.is-in{ transform: none; }
.ios-picker__grabber{
  position: absolute; top: calc(var(--u) * 5); left: 50%;
  width: calc(var(--u) * 36); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -18);
  border-radius: 999px;
  background: rgba(60, 60, 67, .3);
}
.ios-nav--picker{ padding-top: calc(var(--u) * 6); }
.ios-picker__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 calc(var(--u) * 16) calc(var(--u) * 4);
  scrollbar-width: none;
}
.ios-picker__body::-webkit-scrollbar{ display: none; }
.ios-picker__cat{
  margin: calc(var(--u) * 10) calc(var(--u) * 4) calc(var(--u) * 4);
  font-size: max(8px, calc(var(--u) * 12)); font-weight: 600; line-height: calc(var(--u) * 16);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--label2);
}
.ios-picker__grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 10);
  background: #fff;
}
.ios-picker__emoji{
  display: grid; place-items: center;
  aspect-ratio: 1;
  border-radius: calc(var(--u) * 10);
  font-size: calc(var(--u) * 30);
  line-height: 1;
  text-align: center;
  cursor: inherit;
  transition: background-color .15s ease, transform .15s ease;
}
.ios .ios-picker__emoji:hover{ background: rgba(120, 120, 128, .14); }
.ios .ios-picker__emoji:active{ transform: scale(.9); }
.ios .ios-picker__emoji[aria-pressed="true"]{ background: rgba(0, 122, 255, .14); box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--blue); }
.ios .ios-picker__emoji:focus-visible{ outline-offset: 0; }
.ios-group--picker{ flex: 0 0 auto; margin: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 30); }
.ios-cell--action{ width: 100%; justify-content: center; color: var(--blue); font-size: calc(var(--u) * 17); }
.ios .ios-cell--action:hover{ background: #F7F7F9; }

/* ---------------------------------------------------------------------- */
/* Notification banner                                                       */
/* ---------------------------------------------------------------------- */

.ios .ios-banner{
  position: absolute; z-index: 20; left: calc(var(--u) * 8); right: calc(var(--u) * 8); top: calc(var(--u) * 56);
  display: flex; align-items: center; gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 13);
  border-radius: calc(var(--u) * 24);
  background: rgba(247, 247, 250, .8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 30) rgba(0, 0, 0, .2);
  color: #000;
  text-align: left;
  cursor: inherit;
  transform: translateY(-160%);
  opacity: 0;
  transition: transform .6s var(--spring), opacity .35s ease;
}
.ios .ios-banner.is-in{ transform: none; opacity: 1; }
.ios .ios-banner:active{ transform: scale(.98); }
.ios-banner__avatar{ position: relative; flex: 0 0 auto; width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
.ios-banner__app.ios-icon{
  position: absolute; right: calc(var(--u) * -4); bottom: calc(var(--u) * -4);
  width: calc(var(--u) * 17); height: calc(var(--u) * 17);
  border-radius: calc(var(--u) * 4.5);
  box-shadow: 0 0 0 calc(var(--u) * 1.2) rgba(247, 247, 250, .9);
}
.ios-banner__text{ flex: 1 1 auto; min-width: 0; display: block; }
.ios-banner__top{ display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 8); }
.ios-banner__title{ font-weight: 600; font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-banner__time{ flex: 0 0 auto; font-size: max(9px, calc(var(--u) * 13)); color: rgba(60, 60, 67, .55); }
.ios-banner__body{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 20);
}

/* Jay's avatar: the O mark on a dark circle */
.ios-jay{
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2a2a2e, #0C0C0C 70%);
  overflow: hidden;
}
.ios-jay img{ width: 80%; height: 80%; object-fit: contain; }

/* ---------------------------------------------------------------------- */
/* Messages thread                                                           */
/* ---------------------------------------------------------------------- */

.ios-thread{
  position: absolute; z-index: 6; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
  opacity: 0;
  transform: scale(.9);
  transform-origin: 50% 90%;
  transition: transform .5s var(--spring), opacity .3s ease;
}
.ios-thread.is-in{ opacity: 1; transform: none; }
.ios-thread:focus{ outline: none; }

.ios-thread__head{
  position: relative;
  flex: 0 0 auto;
  padding: calc(var(--u) * 54) calc(var(--u) * 60) calc(var(--u) * 8);
  background: rgba(249, 249, 249, .94);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: .5px solid rgba(60, 60, 67, .2);
}
.ios-thread__back{
  position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 62);
  width: calc(var(--u) * 34); height: calc(var(--u) * 40);
  display: grid; place-items: center;
  color: var(--blue);
  cursor: inherit;
}
.ios-thread__back svg{ width: calc(var(--u) * 12); height: calc(var(--u) * 21); }
.ios-thread__video{ position: absolute; right: calc(var(--u) * 16); top: calc(var(--u) * 72); width: calc(var(--u) * 28); height: calc(var(--u) * 18); color: var(--blue); }
.ios-thread__video svg{ width: 100%; height: 100%; }
.ios-thread__who{ display: flex; flex-direction: column; align-items: center; }
.ios-jay--head{ width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
.ios-thread__name{
  display: inline-flex; align-items: center; gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 4);
  font-size: max(8.5px, calc(var(--u) * 12)); line-height: calc(var(--u) * 15); font-weight: 500; letter-spacing: 0;
}
.ios-thread__name svg{ width: calc(var(--u) * 6); height: calc(var(--u) * 9); color: rgba(60, 60, 67, .45); }
.ios-thread__sub{ font-size: max(8px, calc(var(--u) * 11)); line-height: calc(var(--u) * 13); color: #8E8E93; letter-spacing: 0; }

.ios-thread__scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--u) * 8) 0 calc(var(--u) * 10);
  scrollbar-width: none;
}
.ios-thread__scroll::-webkit-scrollbar{ display: none; }
.ios-thread__stamp{
  margin: calc(var(--u) * 6) 0 calc(var(--u) * 12);
  text-align: center;
  font-size: max(8px, calc(var(--u) * 11)); line-height: calc(var(--u) * 14);
  color: #8E8E93;
  letter-spacing: 0;
}
.ios-thread__stamp strong{ font-weight: 600; }

.ios-thread__log{ display: flex; flex-direction: column; padding: 0 calc(var(--u) * 17) 0 calc(var(--u) * 18); }

.ios-msg{ display: flex; margin-top: calc(var(--u) * 3); }
.ios-msg--new{ margin-top: calc(var(--u) * 12); }
.ios-msg--in{ justify-content: flex-start; }
.ios-msg--out{ justify-content: flex-end; }
.ios-msg.is-pop{ animation: ios-pop .38s var(--spring) both; }
.ios-msg--in.is-pop{ transform-origin: 0 100%; }
.ios-msg--out.is-pop{ transform-origin: 100% 100%; }
@keyframes ios-pop{ from{ opacity: 0; transform: translateY(calc(var(--u) * 10)) scale(.94); } to{ opacity: 1; transform: none; } }

.ios-bubble{
  position: relative;
  z-index: 0;                                 /* own stacking context: the tail paints under the text */
  max-width: 76%;
  padding: calc(var(--u) * 7) calc(var(--u) * 12) calc(var(--u) * 7.5);
  border-radius: calc(var(--u) * 18);
  font-size: calc(var(--u) * 17);
  line-height: calc(var(--u) * 22);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  user-select: text;
}
.ios-msg--in .ios-bubble{ background: #E9E9EB; color: #000; }
.ios-msg--out .ios-bubble{ background: var(--blue); color: #fff; }
/* The tail: the classic iOS hook, drawn as a mask so it takes the bubble's colour. */
.ios-bubble.has-tail::after{
  content: "";
  position: absolute; bottom: 0;
  width: calc(var(--u) * 26); height: calc(var(--u) * 20);
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M26 0H6v7C6 13.5 4.4 17.4 0 20 3.8 20.5 7 19.8 9.6 18.5 12 19.6 15 20 26 20Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M26 0H6v7C6 13.5 4.4 17.4 0 20 3.8 20.5 7 19.8 9.6 18.5 12 19.6 15 20 26 20Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
  z-index: -1;
}
.ios-msg--in .ios-bubble.has-tail::after{ left: calc(var(--u) * -6); }
.ios-msg--out .ios-bubble.has-tail::after{ right: calc(var(--u) * -6); transform: scaleX(-1); }

/* Rich link preview */
.ios-bubble--link{
  display: block;
  width: calc(var(--u) * 250);
  max-width: 76%;
  padding: 0;
  text-decoration: none;
  cursor: inherit;
  isolation: isolate;
}
.ios-link-card__img{
  position: relative;
  display: grid; place-items: center;
  height: calc(var(--u) * 118);
  border-radius: calc(var(--u) * 18) calc(var(--u) * 18) 0 0;
  background:
    radial-gradient(80% 90% at 15% 0%, rgba(255, 128, 232, .5), transparent 70%),
    linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%);
  overflow: hidden;
}
.ios-link-card__img img{ width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
.ios-link-card__meta{ display: block; padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 9); }
.ios-link-card__title{ display: block; font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 19); font-weight: 600; color: #000; }
.ios-link-card__host{ display: block; margin-top: calc(var(--u) * 1); font-size: max(9px, calc(var(--u) * 13)); line-height: calc(var(--u) * 17); color: #8E8E93; letter-spacing: 0; }
.ios .ios-bubble--link:hover .ios-link-card__title{ text-decoration: underline; }

.ios-msg-status{
  align-self: flex-end;
  margin: calc(var(--u) * 3) calc(var(--u) * 4) 0 0;
  font-size: max(8px, calc(var(--u) * 11)); line-height: calc(var(--u) * 13); font-weight: 600;
  color: #8E8E93;
  letter-spacing: 0;
}

/* Typing indicator */
.ios-typing{
  position: relative;
  display: flex; align-items: center; gap: calc(var(--u) * 4.5);
  padding: calc(var(--u) * 13) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  background: #E9E9EB;
}
.ios-typing::before,
.ios-typing::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #E9E9EB;
}
.ios-typing::before{ width: calc(var(--u) * 11); height: calc(var(--u) * 11); left: calc(var(--u) * -2); bottom: calc(var(--u) * -2); }
.ios-typing::after{ width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); left: calc(var(--u) * -7); bottom: calc(var(--u) * -7); }
.ios-typing i{
  width: calc(var(--u) * 8.5); height: calc(var(--u) * 8.5);
  border-radius: 50%;
  background: #8E8E93;
  opacity: .35;
  animation: ios-dot 1.2s ease-in-out infinite;
}
.ios-typing i:nth-child(2){ animation-delay: .2s; }
.ios-typing i:nth-child(3){ animation-delay: .4s; }
@keyframes ios-dot{ 0%, 60%, 100%{ opacity: .35; transform: none; } 30%{ opacity: .85; transform: translateY(calc(var(--u) * -1.5)); } }

/* Quick replies + compose bar */
.ios-thread__foot{
  position: relative;
  flex: 0 0 auto;
  padding-bottom: calc(var(--u) * 30);
  background: #fff;
}
.ios-chips{
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * 8);
}
.ios .ios-chip{
  padding: calc(var(--u) * 6) calc(var(--u) * 12);
  border-radius: 999px;
  border: 1px solid rgba(0, 122, 255, .45);
  background: #fff;
  color: var(--blue);
  font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 20);
  cursor: inherit;
  transition: background-color .15s ease, opacity .2s ease;
}
.ios .ios-chip:hover:not(:disabled){ background: rgba(0, 122, 255, .08); }
.ios .ios-chip:disabled{ opacity: .4; }
.ios-compose{ display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 4) calc(var(--u) * 12) calc(var(--u) * 6); }
.ios-compose__plus{
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: calc(var(--u) * 34); height: calc(var(--u) * 34);
  border-radius: 50%;
  background: #E9E9EB;
  color: #7C7C80;
}
.ios-compose__plus svg{ width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.ios-compose__field{
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 14);
  border: .5px solid rgba(60, 60, 67, .29);
  border-radius: 999px;
  color: #C4C4C7;
  font-size: calc(var(--u) * 17);
}
.ios-compose__field svg{ width: calc(var(--u) * 11); height: calc(var(--u) * 17); color: #A9A9AE; }

/* ---------------------------------------------------------------------- */
/* Alert                                                                      */
/* ---------------------------------------------------------------------- */

.ios-alert{
  position: absolute; z-index: 41; left: 50%; top: 50%;
  width: calc(var(--u) * 270);
  border-radius: calc(var(--u) * 14);
  background: rgba(242, 242, 242, .86);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  text-align: center;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.12);
  transition: transform .3s var(--spring), opacity .2s ease;
}
.ios-alert.is-in{ opacity: 1; transform: translate(-50%, -50%); }
.ios-alert__text{ padding: calc(var(--u) * 19) calc(var(--u) * 16) calc(var(--u) * 19); }
.ios-alert__title{ font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22); font-weight: 600; letter-spacing: -.02em; }
.ios-alert__msg{ margin-top: calc(var(--u) * 3); font-size: max(9px, calc(var(--u) * 13)); line-height: calc(var(--u) * 17); letter-spacing: 0; }
.ios .ios-alert__btn{
  display: block;
  width: 100%;
  height: calc(var(--u) * 44);
  border-top: .5px solid rgba(60, 60, 67, .3);
  color: var(--blue);
  font-size: calc(var(--u) * 17); font-weight: 600;
  text-align: center;
  cursor: inherit;
}
.ios .ios-alert__btn:hover{ background: rgba(0, 0, 0, .04); }
.ios .ios-alert__btn:focus-visible{ outline-offset: calc(var(--u) * -4); }

/* ---------------------------------------------------------------------- */
/* Reduced motion: every transition is instant, nothing slides or types.     */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .ios *,
  .ios *::before,
  .ios *::after{
    transition: none !important;
    animation: none !important;
  }
  .reach__restart{ transition: none; }
}