/* Phone frame: metal band, black bezel, status bar with island, side buttons, glass glare.
   Shared by the home and agencies pages and by outreach/mime.js (the email picture).
   Markup: <figure class="phone" style="--bar:#fff;--bar-ink:#000">
             <div class="device"><div class="screen"><img></div></div>
           </figure>
   --bar is the status bar colour (match the top of the screenshot), --bar-ink its text.
   Every size is a share of the figure width (cqi), so one rule set fits any phone size. */
.phone {
  container-type: inline-size;
  isolation: isolate;
  margin: 0;
}
.device {
  position: relative;
  padding: 1.3cqi;
  border-radius: 17cqi;
  background: linear-gradient(
    140deg,
    #f2f2f4 0%,
    #9d9da3 16%,
    #e4e4e7 32%,
    #77777d 55%,
    #c8c8cc 76%,
    #8a8a90 100%
  );
  box-shadow:
    inset 0 0 0 0.3cqi rgba(255, 255, 255, 0.5),
    0 0 0 0.25cqi rgba(0, 0, 0, 0.3),
    0 0.6cqi 1.2cqi rgba(0, 0, 0, 0.1),
    0 4cqi 8cqi -2cqi rgba(0, 0, 0, 0.18),
    0 14cqi 24cqi -8cqi rgba(0, 0, 0, 0.26),
    0 30cqi 44cqi -18cqi rgba(0, 0, 0, 0.28);
}
/* Side buttons: action, volume up and down on the left, power on the right */
.device::before {
  --key: linear-gradient(90deg, #5f5f64, #d6d6da 50%, #707076);
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -0.8cqi;
  background:
    var(--key) left 0 top 36cqi / 2cqi 8cqi,
    var(--key) left 0 top 52cqi / 2cqi 15cqi,
    var(--key) left 0 top 71cqi / 2cqi 15cqi,
    var(--key) right 0 top 58cqi / 2cqi 24cqi;
  background-repeat: no-repeat;
}
/* Faint glare across the glass */
.device::after {
  content: "";
  position: absolute;
  inset: 4.3cqi;
  border-radius: 12.7cqi;
  background: linear-gradient(
    116deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.04) 40%,
    transparent 40.2%
  );
  pointer-events: none;
}
.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border: 3cqi solid #000;
  border-radius: 15.7cqi;
  background: var(--bar, #fff);
}
/* Status bar above the page: time on the left, the island in the middle */
.screen::before {
  content: "9:41";
  content: "9:41" / "";
  display: flex;
  flex: none;
  align-items: center;
  height: 13cqi;
  padding: 0.6cqi 0 0 9cqi;
  color: var(--bar-ink, #000);
  font:
    600 4.1cqi/1 -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34'%3E%3Crect width='120' height='34' rx='17'/%3E%3Ccircle cx='100' cy='17' r='6.5' fill='%23121624'/%3E%3Ccircle cx='98.4' cy='15.4' r='1.8' fill='%23384266'/%3E%3C/svg%3E")
    center top 2.6cqi / 28cqi 7.9cqi no-repeat;
}
/* Signal, wifi, battery: drawn in the status bar ink */
.screen::after {
  content: "";
  position: absolute;
  top: 5.05cqi;
  right: 6.6cqi;
  width: 17.6cqi;
  height: 3.4cqi;
  background: var(--bar-ink, #000);
  -webkit-mask: var(--icons) center / contain no-repeat;
  mask: var(--icons) center / contain no-repeat;
  --icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67 13'%3E%3Crect y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M20.6 5.6a9 9 0 0 1 12.8 0M23.2 8.3a5.3 5.3 0 0 1 7.6 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='27' cy='11' r='1.5'/%3E%3Crect x='39.5' y='1' width='23' height='11' rx='3.2' fill='none' stroke='%23000' stroke-opacity='.4'/%3E%3Crect x='41.5' y='3' width='17' height='7' rx='1.6'/%3E%3Cpath d='M64 4.6v3.8c.9-.3 1.4-1.1 1.4-1.9s-.5-1.6-1.4-1.9z' fill-opacity='.4'/%3E%3C/svg%3E");
}
.screen img {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  max-width: none;
}