/* The customer's phone. Designed at 300 × 620 and scaled as a whole, so it never reflows. */
@font-face { font-family: 'Geist'; src: url(../assets/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

.phone {
  --brand: #1f3f7a; --brand-ink: #fff;
  position: relative; width: 300px; height: 620px; padding: 10px; border-radius: 48px;
  background: linear-gradient(145deg, #2a2d33, #0d0e11 40%, #1a1c20);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .12), inset 0 0 0 4px #050608,
    0 2px 2px rgba(0, 0, 0, .3), 0 30px 50px -18px rgba(0, 0, 0, .7), 0 70px 120px -40px rgba(0, 0, 0, .65);
  font-family: 'Geist', 'Hanken', system-ui, sans-serif; color: #15161a;
}
.ph-screen { position: relative; height: 100%; border-radius: 39px; overflow: hidden; background: #f6f5f1; isolation: isolate; }
.ph-status { position: relative; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 4px 22px 0 28px; font: 640 13.5px/1 'Geist', system-ui; }
.ph-island { position: absolute; left: 50%; top: 9px; width: 86px; height: 25px; translate: -50% 0; background: #050608; border-radius: 20px; }
.ph-icons { display: flex; gap: 5px; align-items: center; } .ph-icons svg { fill: currentColor; }
.ph-page { padding: 6px 16px 0; display: grid; gap: 11px; transition: opacity .3s var(--ease), filter .3s var(--ease); }
.ph-biz { display: flex; align-items: center; gap: 9px; color: #15161a; }
.ph-biz .hartley { flex: none; transition: color .3s var(--ease); }
.ph-word { display: grid; gap: 4px; }
.ph-word b { font: 800 14px/1 'Geist', system-ui; letter-spacing: .1em; }
.ph-word i { font: 650 7.4px/1 'Geist', system-ui; font-style: normal; letter-spacing: .22em; color: #a3622c; }
.ph-logo { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 750 13px/1 'Geist', system-ui; transition: background-color .3s var(--ease); }
.ph-title { margin: -2px 0 0; font: 680 19px/1.15 'Geist', system-ui; letter-spacing: -.025em; }
.ph-est {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 10px; padding: 10px 12px 9px; border-radius: 12px;
  background: color-mix(in oklab, var(--brand) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, transparent);
  transition: background-color .3s var(--ease);
}
.ph-est span { font: 560 11.5px/1 'Geist', system-ui; color: #5a5d66; }
.ph-est b { grid-row: span 2; font: 720 27px/1 'Geist', system-ui; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--brand); }
.ph-est small { font: 500 10.5px/1.25 'Geist', system-ui; color: #6d7079; margin-top: 3px; }
.ph-field { display: grid; gap: 6px; }
.ph-lab { display: flex; justify-content: space-between; align-items: baseline; font: 600 12.5px/1.2 'Geist', system-ui; color: #2a2c31; }
.ph-lab output { font: 640 12.5px/1 'Geist', system-ui; font-variant-numeric: tabular-nums; color: #15161a; }
.ph-when { font: 560 10px/1 'Geist', system-ui; font-style: normal; color: var(--amber-ink); background: var(--amber-tint); padding: 3px 6px; border-radius: 5px; }
.ph-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
.ph-range::-webkit-slider-runnable-track { height: 5px; border-radius: 9px; background: linear-gradient(90deg, var(--brand) var(--fill, 37%), #dcdad3 var(--fill, 37%)); }
.ph-range::-moz-range-track { height: 5px; border-radius: 9px; background: linear-gradient(90deg, var(--brand) var(--fill, 37%), #dcdad3 var(--fill, 37%)); }
.ph-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .25); }
.ph-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .25); }
.ph-range:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.ph-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: #e8e6df; }
.ph-seg button { height: 30px; border: 0; border-radius: 8px; background: transparent; font: 600 12.5px/1 'Geist', system-ui; color: #4b4e56; transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.ph-seg button[aria-pressed="true"] { background: #fff; color: #15161a; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .04); }
.ph-layers { transition: opacity .3s var(--ease), max-height .35s var(--ease); max-height: 80px; overflow: hidden; }
.ph-layers.is-off { opacity: 0; max-height: 0; margin-top: -9px; }
.ph-stepper { display: inline-grid; grid-template-columns: 34px 40px 34px; align-items: center; justify-self: start; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #dcdad3; }
.ph-stepper button { height: 32px; border: 0; background: transparent; font: 500 18px/1 'Geist', system-ui; color: #3a3c42; }
.ph-stepper b { text-align: center; font: 650 14px/1 'Geist', system-ui; font-variant-numeric: tabular-nums; }
.ph-photos { display: flex; align-items: center; gap: 6px; }
.ph-ph { position: relative; }
.ph-ph img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.ph-ph i { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #2f7a16; color: #2f7a16; box-shadow: 0 0 0 2px #f6f5f1; opacity: 0; transform: scale(.6); transition: opacity .25s var(--ease), transform .3s var(--spring); }
.ph-ph i svg path:first-child { fill: #2f7a16; }
.ph-add { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; border: 1.5px dashed #c9c6bd; color: #8a8d95; font: 400 20px/1 'Geist', system-ui; }
.ph-scan { margin-left: 4px; font: 600 11px/1 'Geist', system-ui; font-style: normal; color: #2f7a16; opacity: 0; transition: opacity .25s var(--ease); }
.ph-send {
  margin-top: 2px; height: 44px; border: 0; border-radius: 12px; background: var(--brand); color: var(--brand-ink);
  font: 650 14.5px/1 'Geist', system-ui; box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 6px 14px -8px var(--brand);
  transition: transform .12s var(--ease), background-color .3s var(--ease);
}
.ph-send:active, .ph-send.is-pressing { transform: scale(.97); }
.ph-pow { margin: -2px 0 0; text-align: center; font: 520 10.5px/1 'Geist', system-ui; color: #8a8d95; }
.ph-url { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 4px 14px -6px rgba(0, 0, 0, .25); font: 560 12.5px/1 'Geist', system-ui; color: #2a2c31; backdrop-filter: blur(8px); }
.ph-url svg { fill: currentColor; opacity: .7; }

.ph-sent, .ph-ai {
  position: absolute; inset: 40px 0 54px; padding: 0 22px; display: grid; align-content: center; justify-items: center; text-align: center; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.ph-ok { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; margin-bottom: 4px; }
.ph-sent-t { margin: 0; font: 700 19px/1.15 'Geist', system-ui; letter-spacing: -.02em; }
.ph-sent-s { margin: 0; font: 500 13px/1.45 'Geist', system-ui; color: #4b4e56; }
.ph-recap { margin: 8px 0 0; width: 100%; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e1ded6; display: grid; gap: 6px; text-align: left; }
.ph-recap p { margin: 0; display: flex; justify-content: space-between; font: 500 12px/1.2 'Geist', system-ui; color: #5a5d66; }
.ph-recap b { color: #15161a; font-weight: 620; }
.ph-edit { margin-top: 6px; border: 0; background: none; font: 600 12.5px/1 'Geist', system-ui; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.is-sent .ph-page { opacity: .0; filter: blur(4px); pointer-events: none; }
.is-sent .ph-sent { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.ph-ai { align-content: start; justify-items: stretch; text-align: left; padding-top: 18px; background: #f6f5f1; }
.ph-ai-h { margin: 0 0 4px; font: 650 12px/1 'Geist', system-ui; color: #6d7079; }
.ph-ai-me, .ph-ai-it { margin: 0; padding: 10px 12px; border-radius: 14px; font: 500 13px/1.45 'Geist', system-ui; }
.ph-ai-me { justify-self: end; max-width: 86%; background: #1f1f1c; color: #fff; border-bottom-right-radius: 4px; }
.ph-ai-it { max-width: 92%; background: #fff; box-shadow: inset 0 0 0 1px #e1ded6; border-bottom-left-radius: 4px; }

/* the contractor's lock screen: the email that lands the moment a request does (iOS-style: photo wallpaper, glass time
   and notification platters, the flashlight and camera buttons, the home bar) */
.ph-lock { position: absolute; inset: 0; z-index: 5; color: #fff; display: grid; justify-items: center; align-content: start;
  background: linear-gradient(rgba(4, 10, 24, .1), rgba(4, 10, 24, .35)), url(../assets/sky.webp) 30% 40% / cover;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.ph-lock-bar { width: 100%; height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 4px 22px 0 28px; }
.ph-lock-bar .ph-icons { gap: 5px; } .ph-lock-bar svg { fill: #fff; color: #fff; }
.ph-lock-pad { margin-top: 2px; opacity: .9; } .ph-lock-pad svg { fill: #fff; width: 12px; height: 14px; }
.ph-lock-date { margin: 8px 0 0; font: 600 15px/1 'Geist', system-ui; letter-spacing: .01em; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.ph-lock-time { margin: 2px 0 0; font: 700 92px/1 'Geist', system-ui; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .86); text-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 6px 28px rgba(10, 20, 50, .35); }
.ph-stack { position: absolute; left: 10px; right: 10px; bottom: 104px; display: grid; justify-items: center; }
.ph-note { width: 100%; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 11px 13px 12px; border-radius: 22px; position: relative; z-index: 2;
  background: rgba(245, 245, 250, .26); color: #fff; -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 6px 20px -8px rgba(0, 0, 0, .35);
  transform: translateY(26px) scale(.94); opacity: 0; transition: transform .5s var(--spring), opacity .3s var(--ease); }
.ph-note--under { position: relative; z-index: 1; height: 14px; width: 92%; margin-top: -8px; padding: 0; border-radius: 0 0 18px 18px; background: rgba(245, 245, 250, .16); }
.ph-note-app { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(#59a9ff, #1d6fe5); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.ph-note-top { margin: 0 0 1px; display: flex; justify-content: space-between; font: 650 13px/1.25 'Geist', system-ui; }
.ph-note-top span { font-weight: 500; color: rgba(255, 255, 255, .7); font-size: 12px; }
.ph-note-t { margin: 0; font: 600 13px/1.3 'Geist', system-ui; }
.ph-note-s { margin: 1px 0 0; font: 450 12.5px/1.35 'Geist', system-ui; color: rgba(255, 255, 255, .86); }
.ph-more { margin: 8px 0 0; font: 600 11.5px/1 'Geist', system-ui; color: rgba(255, 255, 255, .75); opacity: 0; transition: opacity .3s .5s; }
.ph-lock-foot { position: absolute; left: 30px; right: 30px; bottom: 34px; display: flex; justify-content: space-between; }
.ph-lock-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(20, 24, 34, .35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.ph-home { position: absolute; bottom: 9px; left: 50%; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: rgba(255, 255, 255, .9); }
.phone[data-demo="sent"] .ph-lock { opacity: 1; visibility: visible; transition-delay: 0s; }
.phone[data-demo="sent"] .ph-note { transform: none; opacity: 1; transition-delay: .3s; }
.phone[data-demo="sent"] .ph-note--under { transition-delay: .15s; }
.phone[data-demo="sent"] .ph-more { opacity: 1; }
.phone[data-demo="sent"] .ph-url, .phone[data-demo="sent"] .ph-status { opacity: 0; }

/* the spec phone's demo states */
.phone[data-demo="math"] .ph-est { animation: est-pulse 1.6s var(--ease) 2; }
@keyframes est-pulse { 40% { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent); } }
.phone[data-demo="photos"] .ph-ph i { opacity: 1; transform: none; }
.phone[data-demo="photos"] .ph-ph:nth-child(2) i { transition-delay: .12s; }
.phone[data-demo="photos"] .ph-scan { opacity: 1; transition-delay: .3s; }
.phone[data-demo="when"] .ph-layers:not(.is-off) { animation: when-in 1.6s var(--ease) both; }
@keyframes when-in { 0% { background: rgba(247, 231, 196, .95); box-shadow: 0 0 0 8px rgba(247, 231, 196, .95); } 100% { background: rgba(247, 231, 196, 0); box-shadow: 0 0 0 8px rgba(247, 231, 196, 0); } }
.ph-layers { border-radius: 4px; }