/* LocalBooked · the six phone drawings: each part of the system happening on a phone, all for one made-up business
   (Rafterline Roofing, Austin, TX; 555 numbers; every drawing tagged "Example"). Used on the home page ("What you get")
   and on /system/<part>. The markup of each drawing lives in tools/partials/phones/<part>.html.
   Motion: assets/js/phones.js (GSAP). Without the script, or with reduced motion, every phone shows its finished frame.
   The phone is a nartoweb feature phone: exactly 9:19, its screen placed inside the frame (inset, never height: 100%,
   which WebKit cannot resolve against an aspect-ratio box), a home indicator, standing whole on the page.
   Everything inside the screen is sized in cqw of the screen, so a drawing scales as one piece.
   Tokens from site.css only, plus the example site's own two colours (--dp-slate, --dp-sun) where the drawing shows
   that site's call bar. */

.dp {
  --dp-grey: var(--rule); /* incoming bubbles: 90% paper + 10% ink (falls back to --rule without color-mix) */
  --dp-slate: #23303b;    /* Rafterline Roofing's own colours (examples/rafterline-roofing), only on its call bar */
  --dp-sun: #eba53a;
  position: relative;
  width: min(100%, 17.5rem);
  margin-inline: auto;
  color: var(--ink);
  font-family: var(--font-text);
  line-height: 1.35;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .dp { --dp-grey: color-mix(in srgb, var(--paper) 90%, var(--ink)); }
}
@media (min-width: 641px) { .dp { width: 18.75rem; } }

/* ---------- The phone ---------- */
.dp__frame {
  position: relative;
  aspect-ratio: 9 / 19;
  min-height: 0; /* exactly 9:19, whatever loads inside */
  padding: .4375rem;
  border-radius: 2.75rem;
  background: var(--ink);
  container-type: inline-size; /* the frame, not the screen: the screen's own font-size is in cqw too */
}
.dp__frame::before, .dp__frame::after { /* the side keys */
  content: "";
  position: absolute;
  width: 2px;
  background: var(--ink);
}
.dp__frame::before { left: -2px; top: 19%; height: 10%; border-radius: 1px 0 0 1px; }
.dp__frame::after { right: -2px; top: 24%; height: 13%; border-radius: 0 1px 1px 0; }
.dp__screen {
  position: absolute;
  inset: .4375rem;
  overflow: hidden;
  border-radius: 2.3125rem;
  clip-path: inset(0 round 2.3125rem); /* WebKit lets composited (moving) layers escape overflow alone */
  background: var(--white);
  font-size: max(11px, 4.3cqw);
}
.dp__screen::before { /* the camera cut-out */
  content: "";
  position: absolute;
  top: 3.2cqw;
  left: 50%;
  z-index: 6;
  width: 26cqw;
  height: 7.6cqw;
  margin-left: -13cqw;
  border-radius: 4cqw;
  background: var(--ink);
}
.dp__screen::after { /* the home indicator */
  content: "";
  position: absolute;
  bottom: 2.2cqw;
  left: 33%;
  z-index: 6;
  width: 34%;
  height: 1.4cqw;
  border-radius: 1cqw;
  background: var(--ink);
}
.dp__bar { /* the status bar: time left, signal and battery right */
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 14cqw;
  padding: 0 7cqw 0 9.5cqw;
  font-size: 4.6cqw;
  font-weight: 600;
  line-height: 1;
}
.dp__icons { display: flex; align-items: center; gap: 1.6cqw; }
.dp__icons svg { display: block; width: auto; height: 3.8cqw; fill: currentColor; }

/* "Example" on every drawing, just under the status bar on the right */
.dp-tag {
  position: absolute;
  top: 15.5cqw;
  right: 4.5cqw;
  z-index: 4;
  padding: .7cqw 2.4cqw .8cqw;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--night-text);
  font-size: max(10px, 3.5cqw);
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- Shared: a text thread ---------- */
.dp-head {
  display: flex;
  align-items: center;
  gap: 2.8cqw;
  min-height: 15cqw;
  padding: 0 22cqw 2.6cqw 4.5cqw; /* room on the right for the Example tag */
  border-bottom: 1px solid var(--rule);
}
.dp-back {
  flex: none;
  width: 3cqw;
  height: 3cqw;
  margin: 0 .6cqw 0 1.2cqw;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}
.dp-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 10.5cqw;
  height: 10.5cqw;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--white);
  font-size: 3.7cqw;
  font-weight: 700;
  line-height: 1;
}
.dp-avatar svg { width: 55%; height: auto; fill: currentColor; }
.dp-name { display: grid; min-width: 0; font-weight: 700; line-height: 1.2; }
.dp-name small { overflow: hidden; color: var(--graphite); font-size: .82em; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.dp-day {
  padding: 3.4cqw 0 2.4cqw;
  color: var(--graphite);
  font-size: max(10px, 3.5cqw);
  line-height: 1.35;
  text-align: center;
}
.dp-day b { display: block; font-weight: 600; }
.dp-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6cqw;
  padding: 0 4.5cqw;
}
.dp-msg {
  max-width: 84%;
  padding: 2.4cqw 3.8cqw 2.6cqw;
  border-radius: 5.6cqw 5.6cqw 5.6cqw 1.6cqw;
  background: var(--dp-grey);
  text-wrap: pretty;
}
.dp-msg--me, .dp-msg--out { /* the phone's owner: on the right, in ink */
  align-self: flex-end;
  max-width: 80%;
  border-radius: 5.6cqw 5.6cqw 1.6cqw 5.6cqw;
  background: var(--ink);
  color: var(--night-text);
}
.dp-msg--old { color: var(--graphite); }
.dp-msg b { font-weight: 700; }
.dp-slot { position: relative; max-width: 84%; }
.dp-slot .dp-msg { max-width: none; }
.dp-slot--me { align-self: flex-end; max-width: 80%; }
/* The typing bubble: only the script shows it; without it the thread is already finished. */
.dp-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 1.3cqw;
  padding: 3.6cqw 4.4cqw;
  border-radius: 5.6cqw 5.6cqw 5.6cqw 1.6cqw;
  background: var(--dp-grey);
  opacity: 0;
  visibility: hidden;
}
.dp-slot--me .dp-typing { right: 0; left: auto; }
.dp-typing i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--graphite); }
.dp-link {
  width: 84%;
  padding: 2.4cqw 3.8cqw 2.6cqw;
  border: 1px solid var(--dp-grey);
  border-radius: 1.6cqw 5.6cqw 5.6cqw 5.6cqw;
  background: var(--white);
}
.dp-link b { display: block; font-weight: 700; }
.dp-link span { display: block; color: var(--graphite); font-size: .85em; text-decoration: underline; text-underline-offset: .2em; }
.dp-meta { color: var(--graphite); font-size: max(10px, 3.4cqw); line-height: 1.3; }
.dp-meta--out { align-self: flex-end; }
.dp-input {
  position: absolute;
  right: 4cqw;
  bottom: 7.5cqw;
  left: 4cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6cqw 1.6cqw 1.6cqw 4.4cqw;
  border-radius: 6.5cqw;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--graphite);
}
.dp-input i { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--rule); }

/* A notification on the owner's phone, floating over the drawing's lower part (AI chat, reactivation) */
.dp-pop {
  position: absolute;
  right: -5%;
  bottom: 3.5%;
  left: -5%;
  z-index: 7;
}
.dp-pop__tab {
  display: inline-block;
  margin-left: 4cqw;
  padding: .3rem .625rem .25rem;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--ink);
  color: var(--night-text);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
}
.dp-note {
  display: grid;
  gap: .15rem;
  padding: .75rem .875rem .8rem;
  border-radius: .875rem;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-size: .8125rem;
  line-height: 1.35;
}
.dp-note__app { display: flex; align-items: center; gap: .45rem; color: var(--graphite); font-size: .75rem; }
.dp-note__app b { color: var(--ink); font-weight: 600; }
.dp-note__app span:last-child { margin-left: auto; }
.dp-note__icon { /* the app's square: ink, with a lime chat mark */
  position: relative;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: .3rem;
  background: var(--ink);
}
.dp-note__icon::after {
  content: "";
  position: absolute;
  top: 27%;
  left: 24%;
  width: 52%;
  height: 40%;
  border-radius: .15rem .15rem .15rem 0;
  background: var(--lime);
}
.dp-note__title { font-weight: 700; }

/* ---------- 1. The new website: the Rafterline Roofing site, its pages per service and area, one tap to call,
   a form that goes to the owner's phone ---------- */
.dp-web__shot img { width: 100%; height: auto; }
.dp-web__call { /* the site's own call bar, pinned to the bottom of the screen as on the site */
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2cqw;
  height: 17cqw;
  padding-bottom: 3cqw;
  border-top: 1cqw solid var(--dp-sun);
  background: var(--dp-slate);
  color: var(--white);
  font-size: 4.4cqw;
  font-weight: 700;
}
.dp-web__call svg { width: 4.2cqw; height: auto; fill: var(--dp-sun); }
.dp-web__menu {
  position: absolute;
  top: 29cqw; /* under the site's logo row, not over it */
  right: 4cqw;
  left: 4cqw;
  z-index: 2;
  padding: 3cqw 3.6cqw 1cqw;
  border-radius: 3cqw;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.dp-web__menu-head { margin-bottom: 1cqw; color: var(--graphite); font-size: .85em; font-weight: 600; }
.dp-web__menu ul { margin: 0; padding: 0; list-style: none; }
.dp-web__menu li {
  display: flex;
  align-items: baseline;
  gap: 1.6cqw;
  padding: 2.2cqw 0;
  border-top: 1px solid var(--rule);
}
.dp-web__menu li:first-child { border-top: 0; }
.dp-web__menu li b { font-weight: 700; }
.dp-web__menu li span { color: var(--graphite); }
.dp-web__menu li::after { /* the chevron */
  content: "";
  align-self: center;
  width: 1.8cqw;
  height: 1.8cqw;
  margin-left: auto;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  transform: rotate(45deg);
}
.dp-web__sent {
  position: absolute;
  right: 4cqw;
  bottom: 38cqw;
  left: 4cqw;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 2.6cqw;
  padding: 3cqw 3.6cqw;
  border-radius: 3cqw;
  background: var(--ink);
  color: var(--night-text);
}
.dp-web__sent b { font-weight: 700; }
.dp-tick { /* a lime square with an ink tick, as the checked points */
  position: relative;
  flex: none;
  width: 4.6cqw;
  height: 4.6cqw;
  margin-top: .3cqw;
  border-radius: var(--radius);
  background: var(--lime);
}
.dp-tick::after {
  content: "";
  position: absolute;
  top: .7cqw;
  left: 1.6cqw;
  width: 1.3cqw;
  height: 2.4cqw;
  border: solid var(--ink);
  border-width: 0 .55cqw .55cqw 0;
  transform: rotate(45deg);
}
.dp-web__tap { /* a lime ring around the call bar, with its label */
  position: absolute;
  right: 2.4cqw;
  bottom: 2cqw;
  left: 2.4cqw;
  z-index: 2;
  height: 15cqw;
  border-radius: 3cqw;
  box-shadow: inset 0 0 0 1.1cqw var(--lime);
}
.dp-web__tap span {
  position: absolute;
  right: 2cqw;
  bottom: calc(100% + 1.6cqw);
  padding: 1cqw 2.6cqw 1.2cqw;
  border-radius: var(--radius);
  background: var(--lime);
  color: var(--ink);
  font-size: .9em;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- 2. Geo-SEO: a search for "roofer austin" with Rafterline Roofing among the local results, then an AI
   assistant's answer that names it. No search engine or AI brand. ---------- */
.dp-search { padding: 0 4.5cqw; }
.dp-search__top { display: flex; align-items: center; height: 9cqw; margin-bottom: 1.6cqw; font-family: var(--font-display); font-size: 6.2cqw; font-weight: 800; letter-spacing: -.02em; }
.dp-search__field {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  height: 11cqw;
  padding: 0 4cqw;
  border-radius: 5.5cqw;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-weight: 500;
}
.dp-search__field svg { flex: none; width: 4.2cqw; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.4; }
.dp-search__type, .dp-search__type > span { display: block; overflow: hidden; white-space: nowrap; }
.dp-search__tabs { display: flex; gap: 4.4cqw; margin: 2.6cqw 0 2.4cqw; color: var(--graphite); font-size: .9em; }
.dp-search__tabs b { padding-bottom: .8cqw; border-bottom: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
.dp-search__map {
  position: relative;
  height: 27cqw;
  overflow: hidden;
  border-radius: 3cqw;
  background: var(--paper);
}
.dp-search__map i { /* roads */
  position: absolute;
  height: 1.6cqw;
  background: var(--white);
}
.dp-search__map i:nth-child(1) { top: 40%; left: -10%; width: 120%; transform: rotate(-8deg); }
.dp-search__map i:nth-child(2) { top: -10%; left: 38%; width: 1.6cqw; height: 130%; transform: rotate(14deg); }
.dp-search__map i:nth-child(3) { top: 74%; left: 30%; width: 90%; transform: rotate(6deg); }
.dp-pin { /* a map pin: a drop with a hole */
  position: absolute;
  width: 5cqw;
  height: 5cqw;
  border-radius: 50% 50% 50% 0;
  background: var(--graphite);
  transform: rotate(-45deg);
}
.dp-pin::after { content: ""; position: absolute; top: 32%; left: 32%; width: 36%; height: 36%; border-radius: 50%; background: var(--paper); }
.dp-pin:nth-of-type(1) { top: 18%; left: 16%; }
.dp-pin:nth-of-type(2) { top: 52%; left: 70%; }
.dp-pin--hit { top: 26%; left: 50%; width: 6.4cqw; height: 6.4cqw; background: var(--ink); box-shadow: 0 0 0 1cqw var(--lime); }
.dp-places { margin: 1cqw 0 0; padding: 0; list-style: none; }
.dp-places li { display: grid; gap: .6cqw; padding: 2.4cqw 0; border-bottom: 1px solid var(--rule); line-height: 1.25; }
.dp-places i { display: block; height: 2.6cqw; border-radius: 1cqw; background: var(--rule); }
.dp-places i:first-child { width: 58%; }
.dp-places i:last-child { width: 38%; }
.dp-places .dp-places__hit {
  margin-inline: -2.4cqw;
  padding-inline: 2.4cqw;
  border-bottom: 0;
  border-radius: 2.4cqw;
  background: var(--lime-tint);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.dp-places__hit b { font-weight: 700; }
.dp-places__hit span { color: var(--graphite); font-size: .9em; }
.dp-ai { /* the assistant, as a sheet over the lower part of the screen */
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 2cqw;
  padding: 5cqw 4.5cqw 10cqw;
  border-top: 1px solid var(--rule);
  border-radius: 6cqw 6cqw 0 0;
  background: var(--paper);
}
.dp-ai::before { /* the grabber */
  content: "";
  position: absolute;
  top: 1.8cqw;
  left: 50%;
  width: 10cqw;
  height: 1.1cqw;
  margin-left: -5cqw;
  border-radius: 1cqw;
  background: var(--rule);
}
.dp-ai__head { display: flex; align-items: center; gap: 2cqw; font-weight: 700; }
.dp-ai__head i { width: 4.4cqw; height: 4.4cqw; border-radius: 1.2cqw; background: var(--ink); box-shadow: inset 0 0 0 1.2cqw var(--ink), inset 0 0 0 4cqw var(--cyan); }
.dp-ai .dp-msg { max-width: 92%; background: var(--white); }
.dp-ai .dp-msg--me { justify-self: end; max-width: 80%; background: var(--ink); }
.dp-ai__src { color: var(--graphite); font-size: max(10px, 3.4cqw); }

/* ---------- 3. Reviews, 4. missed call text back, 6. reactivation: text threads ---------- */
/* The owner's app (missed call text back): its header in ink */
.dp--app .dp__bar, .dp-app__head { background: var(--ink); color: var(--night-text); }
.dp--app .dp-tag { background: var(--lime); color: var(--ink); }
.dp--app .dp-head { border-bottom: 0; }
.dp--app .dp-avatar { background: var(--night-rule); color: var(--night-text); }
.dp--app .dp-name small { color: var(--night-muted); }
.dp-app__body { display: flex; flex-direction: column; gap: 1.6cqw; padding: 4cqw 4.5cqw 0; }
.dp-event {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 2cqw;
  padding: 1.6cqw 3.6cqw;
  border-radius: 5cqw;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: .9em;
  font-weight: 600;
}
.dp-event svg { width: 4.2cqw; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dp-app__body .dp-msg + .dp-meta { margin-bottom: 1.6cqw; }
.dp-app__body > .dp-event { margin-bottom: 2.4cqw; }
.dp-auto { /* "Sent automatically" under the text-back */
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
}
.dp-auto::before { content: ""; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 .5cqw var(--ink); }

/* ---------- 5. AI chat on the website, at night ---------- */
.dp-chat-site { position: absolute; top: 14cqw; right: 0; left: 0; opacity: .35; }
.dp-chat-site img { width: 100%; height: auto; }
.dp-chat {
  position: absolute;
  top: 22cqw;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: 6cqw 6cqw 0 0;
  background: var(--white);
  box-shadow: 0 -1px 0 var(--rule);
}
.dp-chat .dp-head { min-height: 16cqw; padding-top: 2cqw; padding-right: 4.5cqw; }
.dp-chat .dp-avatar { background: var(--dp-slate); }
.dp-chat__x { position: relative; flex: none; width: 4cqw; height: 4cqw; margin-left: auto; }
.dp-chat__x::before, .dp-chat__x::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: var(--ink); transform: rotate(45deg); }
.dp-chat__x::after { transform: rotate(-45deg); }
.dp-chat .dp-list { gap: 1.4cqw; }
.dp-chat .dp-day { padding-top: 2.6cqw; }