/* Iris, the site. The app's dark palette (docs/design/DESIGN.md) as Rothko color fields: a deep madder ground,
   soft-edged pigment fields behind the demo and the invitation, and the orb as the one bright thing. */

/* The typeface, from this site (fonts/, SIL Open Font License): Bricolage Grotesque, weights 400 to 700 and its
   optical sizes, trimmed to the characters the page uses (44 KB). Until it arrives, Arial stands in, scaled to take
   the same room, so nothing moves when it swaps: one face for body text (400) and one for headings (500 and up),
   matched at the headline's size on a phone (40 px), where a different line break would move the video. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  size-adjust: 104.57%;
  ascent-override: 88.94%;
  descent-override: 25.82%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 500 700;
  size-adjust: 102.5%;
  ascent-override: 90.73%;
  descent-override: 26.34%;
  line-gap-override: 0%;
}

:root {
  --madder: #22090f;      /* the ground */
  --wine: #3d0d1a;        /* a quiet field */
  --cream: #f6ebdc;       /* text, and the main button's fill (16:1 on the ground) */
  --cream-soft: #d8c2b1;  /* secondary text (11:1) */
  --cream-faint: #a8907f; /* footnotes (6:1) */
  --ember: #f5824f;       /* links and focus, as in the app */
  --saffron: #e8962c;
  --vermilion: #b4300f;   /* the invitation's field (cream on it 5.7:1) */

  --measure: 34rem;
  --gutter: clamp(20px, 5vw, 64px);
  --wide: 76rem;
  font-family: "Bricolage Grotesque", "Bricolage Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  color: var(--cream);
  background: var(--madder);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-size: 1.125rem; line-height: 1.6; overflow-x: hidden; }

/* A fine grain over everything, like pigment on canvas. Plain transparency, no blend mode: a blended layer fixed over
   the page would be re-blended on every frame of a scroll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, p, ul { margin: 0; }
h1, h2 { font-weight: 500; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 6.6vw, 6rem); line-height: 1; }
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.05; }
h3 { font-size: 1.3125rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
p { max-width: var(--measure); text-wrap: pretty; }

a { color: var(--cream); text-decoration-color: color-mix(in srgb, var(--cream) 45%, transparent); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--ember); }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--madder);
  border-radius: 999px;
}
.skip:focus { top: 16px; }

/* The header: the mark and one way in. It stays at the top; once the page scrolls, it takes a solid ground (no blur:
   a blurred layer over the page would be redrawn on every frame of a scroll). */
.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  transition: padding 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}
.top.stuck {
  padding-block: 12px;
  background: rgba(30, 8, 13, 0.94);
  box-shadow: 0 1px 0 rgba(246, 235, 220, 0.08);
}
::selection { background: var(--ember); color: var(--madder); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
.mark img { border-radius: 50%; }
.top-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.contact { font-size: 0.9375rem; color: var(--cream-soft); text-decoration: none; }
.contact:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--ember); }

/* Buttons: cream on the ground, as the app's main button is cream in the dark. */
.join {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  padding: 17px 28px;
  border-radius: 999px;
  color: var(--madder);
  background: var(--cream);
  transition: background-color 160ms ease, transform 160ms ease;
}
.join:hover { background: #fff4e6; }
.join:active { transform: scale(0.98); }
a.join { display: inline-block; text-decoration: none; }
.join:disabled { opacity: 0.7; cursor: progress; }
.join.quiet {
  padding: 11px 18px;
  font-size: 0.9375rem;
  color: var(--cream);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 38%, transparent);
}
.join.quiet:hover { background: color-mix(in srgb, var(--cream) 10%, transparent); }

/* The hero: the words on the left; the video on the right, with the orb glowing out from behind it. */
.hero {
  position: relative;
  min-height: min(100svh, 920px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  padding: 110px var(--gutter) 72px;
  max-width: calc(var(--wide) + 2 * var(--gutter) + 8rem);
  margin: 0 auto;
}
.hero h1 { font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: 1.02; }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 24px; }
.lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--cream-soft); max-width: 28rem; }
.actions { display: grid; gap: 14px; margin-top: 8px; }

/* Joining: an email field and the button, side by side, one pill. */
.signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 30rem; }
.signup input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--cream);
  padding: 16px 22px;
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 30%, transparent);
}
.signup input[type="email"]::placeholder { color: var(--cream-faint); }
.signup input[type="email"]:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.signup .join { flex: 0 0 auto; }
.signup-note { flex-basis: 100%; font-size: 0.9375rem; color: var(--ember); }
.signup-note[hidden] { display: none; }
.check { flex-basis: 100%; }
.privacy { font-size: 0.875rem; color: var(--cream-faint); }
.privacy a { color: var(--cream-soft); }
/* A field no person sees or reaches: bots fill it in. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-stage { position: relative; }
/* The orb's warm light around the video: light only, no glass. */
.hero-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -22% -14% -26%;
  background:
    radial-gradient(42% 46% at 72% 30%, rgba(255, 122, 18, 0.46), transparent 70%),
    radial-gradient(48% 52% at 34% 74%, rgba(216, 27, 96, 0.3), transparent 72%),
    radial-gradient(60% 60% at 50% 50%, rgba(242, 56, 15, 0.22), transparent 75%);
  filter: blur(24px);
  pointer-events: none;
}

/* Rothko fields: soft-edged rectangles of one pigment, glowing a little at their middle. */
.field {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 4px;
  filter: blur(26px);
  pointer-events: none;
}
.field-wine { inset: 0 3%; background: radial-gradient(110% 80% at 30% 30%, #4a1020 0%, var(--wine) 60%, #2d0a13 100%); }
.field-vermilion { inset: 0 3%; background: radial-gradient(120% 90% at 50% 35%, #c63a14 0%, var(--vermilion) 55%, #8f2410 100%); }

section { position: relative; }

/* The video, held in front of the orb. */
.player {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #1a070c;
  box-shadow: 0 40px 90px -30px rgba(26, 5, 10, 0.9), 0 0 0 1px rgba(255, 220, 190, 0.08);
}
.player iframe { display: block; width: 100%; border: 0; }
.caption { position: relative; z-index: 1; margin-top: 14px; font-size: 0.9375rem; color: var(--cream-soft); }
.player iframe, .poster { aspect-ratio: 16 / 9; }
.poster { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: #1a070c; }
.poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.poster .play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(64px, 7vw, 88px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 12px 40px -8px rgba(26, 5, 10, 0.7);
  transition: transform 160ms ease, background-color 160ms ease;
}
.poster .play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 0.62em 0 0.62em 1.05em;
  border-color: transparent transparent transparent var(--madder);
  font-size: clamp(14px, 1.5vw, 19px);
}
.poster:hover .play { transform: scale(1.06); background: #fff4e6; }
.poster:focus-visible { outline-offset: -6px; }

/* What people ask: spoken lines, set large, quotes hung in the margin. Each one plays on the demo phone beside them. */
.asks {
  padding: clamp(96px, 12vw, 170px) var(--gutter);
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.asks-copy { display: grid; gap: clamp(28px, 3.4vw, 48px); }
.try { color: var(--cream-soft); margin-top: calc(-1 * clamp(12px, 2vw, 28px)); }
.requests { list-style: none; padding: 0; display: grid; gap: 0.42em; font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; }
.requests li { max-width: 32ch; }
.requests li:nth-child(even) { margin-left: clamp(0px, 6vw, 7rem); }
.requests button {
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-wrap: balance;
  color: var(--cream);
  cursor: pointer;
  transition: color 220ms ease;
}
/* Hung in the margin, so the words line up and the quotes stand outside them. */
.requests button::before { content: "\201C"; position: absolute; right: 100%; padding-right: 0.06em; color: var(--ember); }
.requests button::after { content: "\201D"; color: var(--ember); }
.requests button:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--ember); text-underline-offset: 0.16em; }
.requests button:focus-visible { outline-offset: 6px; }
/* While one plays, the others step back. */
.requests:has([aria-pressed="true"]) button:not([aria-pressed="true"]) { color: color-mix(in srgb, var(--cream) 46%, transparent); }
.requests:has([aria-pressed="true"]) button:not([aria-pressed="true"])::before,
.requests:has([aria-pressed="true"]) button:not([aria-pressed="true"])::after { color: color-mix(in srgb, var(--ember) 50%, transparent); }

/* The demo phone: a 3D iPhone, its glass the one bright thing in the section. */
.asks-phone { display: grid; justify-items: center; gap: 22px; }
.phone-stage {
  --lean: -0.3;
  position: relative;
  width: clamp(250px, 23vw, 318px);
  aspect-ratio: 71.5 / 147;
  perspective: 1500px;
  perspective-origin: 50% 40%;
}
/* The orb's light around the phone. */
.phone-stage::before {
  content: "";
  position: absolute;
  inset: -16% -40% -10%;
  background:
    radial-gradient(40% 36% at 62% 34%, rgba(255, 122, 18, 0.32), transparent 70%),
    radial-gradient(46% 40% at 36% 70%, rgba(216, 27, 96, 0.24), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}
.phone {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-12deg);
  will-change: transform;
}
/* Its thickness: the same outline, stacked behind the glass. */
.phone-depth, .phone-depth i { position: absolute; inset: 0; transform-style: preserve-3d; }
.phone-depth i {
  border-radius: 16% / 7.8%;
  background: linear-gradient(100deg, #6b4a43, #2c1a17 30%, #4a302b 62%, #8a6a60);
}
.phone-depth i:nth-child(1) { transform: translateZ(-1.5px); }
.phone-depth i:nth-child(2) { transform: translateZ(-3px); }
.phone-depth i:nth-child(3) { transform: translateZ(-4.5px); }
.phone-depth i:nth-child(4) { transform: translateZ(-6px); }
.phone-depth i:nth-child(5) { transform: translateZ(-7.5px); }
.phone-depth i:nth-child(6) { transform: translateZ(-9px); }
.phone-depth i:nth-child(7) { transform: translateZ(-10.5px); background: #1d1110; box-shadow: 0 0 0 1px rgba(255, 220, 190, 0.08); }
.phone-face {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  border-radius: 16% / 7.8%;
  background: #0b0405;
  box-shadow:
    inset 0 0 0 1.5px #9a7a6e,
    inset 0 0 0 3px #3a2420,
    inset 0 0 0 4.5px #0b0405;
}
.screen {
  position: absolute;
  inset: 3.6%;
  inset-block: 1.8%;
  overflow: hidden;
  border-radius: 13% / 6.1%;
  font-size: 4.3cqw;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--cream);
  background: radial-gradient(120% 70% at 50% 34%, #3d0d1a 0%, #22090f 60%, #160509 100%);
  user-select: none;
  -webkit-user-select: none;
}
/* Light on the glass, sliding as the phone turns. */
.glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent calc(var(--glare, 50%) - 22%), rgba(255, 240, 225, 0.12) var(--glare, 50%), transparent calc(var(--glare, 50%) + 16%));
  mix-blend-mode: screen;
}
.phone-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -7%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 1, 3, 0.75), transparent);
  filter: blur(10px);
  transform: translateX(calc(var(--lean) * -18%)) scaleX(calc(1 + var(--lean) * 0.1));
  pointer-events: none;
}
.phone-note { font-size: 0.875rem; color: var(--cream-faint); text-align: center; max-width: 22rem; }

/* The status bar, dark or light with what's on screen. */
.status-bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  height: 3.5em;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.9em 0 2.3em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1em;
  font-weight: 600;
  color: var(--cream);
  transition: color 300ms ease;
}
.screen[data-tone="light"] .status-bar { color: #1b1416; }
.status-bar .island-space { width: 7.6em; }
.status-bar .clock { justify-self: start; }
.status-bar .signal { justify-self: end; display: inline-flex; align-items: end; gap: 0.12em; height: 0.8em; margin-right: 1.9em; }
.status-bar .signal i { width: 0.22em; background: currentColor; border-radius: 1px; }
.status-bar .signal i:nth-child(1) { height: 35%; }
.status-bar .signal i:nth-child(2) { height: 55%; }
.status-bar .signal i:nth-child(3) { height: 78%; }
.status-bar .signal i:nth-child(4) { height: 100%; }
.status-bar .battery { position: absolute; right: 1.9em; width: 1.55em; height: 0.78em; border-radius: 0.24em; box-shadow: inset 0 0 0 1px currentColor; }
.status-bar .battery::after { content: ""; position: absolute; inset: 0.14em 0.42em 0.14em 0.14em; border-radius: 0.1em; background: currentColor; }
.home-bar { position: absolute; z-index: 6; left: 50%; bottom: 0.55em; width: 36%; height: 0.36em; translate: -50% 0; border-radius: 99px; background: currentColor; opacity: 0.8; color: var(--cream); }
.screen[data-tone="light"] .home-bar { color: #1b1416; }

/* Iris itself: the orb, and what was asked. */
.iris-home { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: 3.5em 1.1em 2.1em; transition: opacity 420ms ease, transform 420ms ease; }
.iris-home canvas { display: block; width: 100%; height: 100%; min-height: 0; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.iris-home canvas:active { cursor: grabbing; }
/* Iris's own screen gives way quickly when an app opens, so the two don't show through each other. */
.in-app .iris-home { opacity: 0; transform: scale(0.94); pointer-events: none; transition-duration: 200ms; }
.home-ask {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-height: 3.3em;
  padding: 0.7em 0.7em 0.7em 1.15em;
  border-radius: 1.65em;
  background: rgba(246, 235, 220, 0.08);
  box-shadow: inset 0 0 0 1px rgba(246, 235, 220, 0.16);
  font-size: 1.05em;
  line-height: 1.25;
}
.home-ask .ask-hint { flex: 1; color: var(--cream-faint); }
.home-ask .said { flex: 1; color: var(--cream); }
.home-ask .mic { flex: none; width: 2em; height: 2em; border-radius: 50%; background: var(--cream); position: relative; }
.home-ask .mic::before { content: ""; position: absolute; left: 50%; top: 24%; width: 0.5em; height: 0.85em; translate: -50% 0; border-radius: 99px; background: var(--madder); }
.home-ask.asking .mic { background: #ffb22e; animation: hear 900ms ease-in-out infinite alternate; }
@keyframes hear { to { box-shadow: 0 0 0 0.4em rgba(255, 178, 46, 0.22); } }

/* The app Iris opens. */
.app { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -0.01em; position: absolute; inset: 0; padding-top: 3.5em; opacity: 0; transform: scale(1.06); transition: opacity 380ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); color: #1b1416; background: #f7f4f2; overflow: hidden; }
.in-app .app { opacity: 1; transform: none; }
.app p { max-width: none; }
.app ul { list-style: none; padding: 0; margin: 0; }
.app b { font-weight: 600; }
.pressed { filter: brightness(0.9); transform: scale(0.97); transition: transform 120ms ease, filter 120ms ease; }

/* A text field, with a caret while Iris types. */
.input { display: flex; align-items: center; gap: 0.2em; min-height: 2.7em; padding: 0 0.95em; border-radius: 0.8em; background: #ece6e3; color: #1b1416; white-space: nowrap; overflow: hidden; }
.input .hint { color: #8b7e7a; }
.input .value:not(:empty) + .hint { display: none; }
.input.typing .value::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: #e0531f; animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Where Iris taps. */
.finger {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 60%;
  width: 2.6em;
  height: 2.6em;
  margin: -1.3em 0 0 -1.3em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 196, 0.85) 0 34%, rgba(255, 122, 18, 0.35) 35% 62%, transparent 64%);
  box-shadow: 0 0 0 1.5px rgba(255, 178, 46, 0.9);
  opacity: 0;
  transform: scale(0.6);
  transition: left 480ms cubic-bezier(0.3, 0.7, 0.2, 1), top 480ms cubic-bezier(0.3, 0.7, 0.2, 1), opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.finger.shown { opacity: 1; transform: scale(1); }
.finger.press { animation: press 420ms ease-out; }
@keyframes press {
  0% { transform: scale(1); }
  35% { transform: scale(0.78); box-shadow: 0 0 0 1.5px rgba(255, 178, 46, 0.9), 0 0 0 0 rgba(255, 178, 46, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 0 1.5px rgba(255, 178, 46, 0.9), 0 0 0 1.4em rgba(255, 178, 46, 0); }
}

.answer[hidden] { display: none; }
.answer-orb {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffe0c2 0 12%, #ffb22e 28%, #f2380f 62%, #4a0a1c 100%);
  box-shadow: 0 0 0.8em rgba(255, 122, 18, 0.6);
}
@keyframes breathe { to { transform: scale(1.18); box-shadow: 0 0 1.2em rgba(255, 122, 18, 0.85); } }
@keyframes drop { from { opacity: 0; transform: translateY(-0.6em); } }
@keyframes rise { from { opacity: 0; transform: translateY(1.2em); } }

/* The Dynamic Island. While Iris works it opens to say what it's doing, and closes again when it's done. */
.island {
  position: absolute;
  z-index: 7;
  top: 0.675em;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.55em;
  min-width: 7.6em;
  max-width: 7.6em;
  height: 2.15em;
  padding: 0 1em 0 0.4em;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 99px;
  background: #000;
  color: var(--cream);
  transition: max-width 460ms cubic-bezier(0.2, 0.8, 0.2, 1), height 460ms cubic-bezier(0.2, 0.8, 0.2, 1), top 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.island.working { max-width: 94%; height: 2.6em; top: 0.45em; }
.island > * { opacity: 0; transition: opacity 180ms ease; }
.island.working > * { opacity: 1; transition-delay: 160ms; }
.island-orb {
  flex: none;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffe0c2 0 10%, #ffb22e 26%, #f2380f 60%, #4a0a1c 100%);
  box-shadow: 0 0 0.9em rgba(255, 122, 18, 0.55);
}
.island.working .island-orb { animation: breathe 1.4s ease-in-out infinite alternate; }
#island-text { font-size: 0.92em; font-weight: 500; }

/* Iris's answer, dropping in from the top like a notification, so the app stays in view. */
.answer {
  position: absolute;
  z-index: 7;
  left: 0.6em;
  right: 0.6em;
  top: 3.4em;
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  padding: 1em 1.1em;
  border-radius: 1.4em;
  color: var(--cream);
  background: rgba(34, 9, 15, 0.95);
  box-shadow: 0 1.2em 2.6em -0.6em rgba(10, 2, 4, 0.7), inset 0 0 0 1px rgba(255, 178, 46, 0.3);
  animation: drop 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.answer p { font-size: 1.05em; line-height: 1.3; }
/* After a few seconds it slides away, as a notification does, and the app's result shows. */
.answer.away { animation: lift 420ms ease forwards; }
@keyframes lift { to { opacity: 0; transform: translateY(-1.2em); } }

/* The apps, in the phone's own system font, as the real ones are. Icons are lines in the text's colour. */
.app .i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app .car { display: block; width: 100%; height: auto; }

/* Uber. */
.app-uber { background: #fff; color: #000; }
.uber-home { padding: 0.6em 1em 0; display: grid; gap: 1.1em; }
.uber-where { display: flex; align-items: center; gap: 0.6em; height: 3em; padding: 0 0.4em 0 1em; border-radius: 99px; background: #eee; font-weight: 600; font-size: 1.05em; }
.uber-where > span:first-of-type { flex: 1; }
.uber-now { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.45em 0.75em; border-radius: 99px; background: #fff; font-size: 0.8em; }
.uber-now .i { width: 1.1em; height: 1.1em; }
.uber-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; text-align: center; font-size: 0.78em; font-weight: 600; }
.uber-tiles span { display: grid; gap: 0.3em; }
.uber-tiles i { display: grid; place-items: center; height: 3.6em; padding: 0 0.6em; border-radius: 0.7em; background: #f3f3f3; }
.uber-list li { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 0; border-bottom: 1px solid #eee; }
.uber-list div { display: grid; flex: 1; min-width: 0; }
.uber-list b { font-weight: 600; }
.uber-list div span { color: #5e5e5e; font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uber-list em { font-style: normal; color: #5e5e5e; font-size: 0.8em; }
.uber-list .dot { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #eee; }
.uber-list .dot .i { width: 1.1em; height: 1.1em; }
.uber-tabs { position: absolute; inset: auto 0 0; display: flex; justify-content: space-around; padding: 0.6em 0 2em; border-top: 1px solid #eee; background: #fff; color: #8a8a8a; font-size: 0.68em; font-weight: 600; }
.uber-tabs span { display: grid; justify-items: center; gap: 0.2em; }
.uber-tabs .i { width: 1.9em; height: 1.9em; stroke-width: 1.8; }
.uber-tabs .on { color: #000; }
.uber-plan { padding: 0.2em 1em 0; display: grid; gap: 0.8em; }
.uber-head { display: grid; grid-template-columns: 1.5em 1fr 1.5em; align-items: center; text-align: center; font-size: 1.05em; }
.uber-head b { font-weight: 700; }
.uber-chips { display: flex; gap: 0.5em; font-size: 0.8em; font-weight: 600; }
.uber-chips span { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.5em 0.8em; border-radius: 99px; background: #eee; }
.uber-chips .i { width: 1.1em; height: 1.1em; }
.uber-route { position: relative; display: grid; gap: 0.35em; padding: 0.5em 0.5em 0.5em 2.1em; border-radius: 0.7em; box-shadow: inset 0 0 0 2px #000; }
.uber-route .rail { position: absolute; left: 0.85em; top: 1.15em; bottom: 1.15em; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; }
.uber-route .rail .a { width: 0.5em; height: 0.5em; border-radius: 50%; background: #000; }
.uber-route .rail .line { width: 2px; margin: 0.2em 0; background: #000; }
.uber-route .rail .b { width: 0.5em; height: 0.5em; background: #000; }
.uber-from { padding: 0.55em 0.6em; color: #5e5e5e; }
.uber-to { min-height: 2.4em; border-radius: 0.4em; background: #eee; color: #000; }
.uber-to.typing .value::after { background: #000; }

/* The map above Uber's sheet. */
.ride-map { position: absolute; inset: 0 0 25%; overflow: hidden; background: #ebe9e6; }
.ride-map svg { display: block; width: 100%; height: 100%; }
.ride-map .park { fill: #d8e8cf; }
.ride-map .airfield { fill: #e3e1dc; }
.ride-map .runway { stroke: #cbc8c2; stroke-width: 4.5; stroke-linecap: round; }
.ride-map .runway-mark { stroke: #f7f6f4; stroke-width: 0.5; stroke-dasharray: 2 2; }
.ride-map .terminal { fill: #d2cfc9; }
.ride-map .road-edge { stroke: #dddad5; stroke-width: 7.4; }
.ride-map .road { stroke: #fff; stroke-width: 6; }
/* Drawn from the pickup to the airport, as soon as the map shows. */
.ride-map .route-line { fill: none; stroke: #000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1100ms cubic-bezier(0.4, 0, 0.2, 1); }
.ride-map.routed .route-line { stroke-dashoffset: 0; }
.ride-map .pickup { fill: #000; }
.ride-map .pickup-halo { fill: rgba(0, 0, 0, 0.12); }
.ride-map .drop { fill: #000; opacity: 0; transition: opacity 300ms ease 900ms; }
.ride-map.routed .drop { opacity: 1; }
.ride-map .tag { opacity: 0; transition: opacity 300ms ease 1000ms; }
.ride-map.routed .tag { opacity: 1; }
.ride-map .tag rect { fill: #fff; filter: drop-shadow(0 0.3px 0.8px rgba(0, 0, 0, 0.3)); }
.ride-map .tag text { font: 600 3.6px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; fill: #000; }
/* The driver's car, coming up the pickup street once one is found. */
.ride-map .coming { fill: #000; opacity: 0; transform: translate(23.6px, 124px) rotate(-87deg); transition: transform 2.4s ease-out, opacity 300ms ease; }
.ride-map.matched .coming { opacity: 1; transform: translate(23.2px, 108px) rotate(-87deg); }

.uber-sheet { position: absolute; inset: auto 0 0; display: grid; align-content: start; gap: 0.45em; padding: 0.5em 0.8em 2.1em; border-radius: 1.1em 1.1em 0 0; background: #fff; box-shadow: 0 -0.4em 1.6em rgba(0, 0, 0, 0.12); }
.uber-sheet .grab { justify-self: center; width: 2.6em; height: 0.3em; border-radius: 99px; background: #ddd; }
.uber-sheet-title { text-align: center; font-weight: 700; font-size: 1.02em; padding-bottom: 0.1em; }
.uber-option { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: center; gap: 0.6em; padding: 0.35em 0.6em; border-radius: 0.6em; }
.uber-option div { display: grid; min-width: 0; }
.uber-option b { display: flex; align-items: center; gap: 0.35em; font-weight: 700; font-size: 0.95em; }
.uber-option small { display: inline-flex; align-items: center; gap: 0.1em; font-weight: 500; font-size: 0.8em; }
.uber-option small .i { width: 0.95em; height: 0.95em; }
.uber-option div > span { color: #5e5e5e; font-size: 0.78em; }
.uber-option em { font-style: normal; font-weight: 700; font-size: 0.92em; }
.uber-option.chosen { box-shadow: inset 0 0 0 2px #000; }
.uber-pay { display: flex; align-items: center; gap: 0.5em; padding: 0.2em 0.6em; font-weight: 600; font-size: 0.88em; }
.uber-pay .i { color: #2e7d32; }
.uber-button { display: block; padding: 0.85em; border-radius: 0.5em; text-align: center; color: #fff; background: #000; font-weight: 600; }
.uber-progress { position: relative; height: 0.25em; margin: 0.4em 0 0.6em; overflow: hidden; background: #eee; }
.uber-progress i { position: absolute; inset: 0 auto 0 0; width: 40%; background: #000; animation: seek 1.1s ease-in-out infinite; }
@keyframes seek { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.uber-trip { display: grid; gap: 0.5em; padding: 0.4em 0.2em; font-size: 0.85em; color: #5e5e5e; }
.uber-trip span:first-child { display: flex; align-items: center; gap: 0.4em; color: #000; font-weight: 600; }
.uber-meet { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.2em 0.2em 0.5em; border-bottom: 1px solid #eee; }
.uber-meet b { font-size: 1.05em; font-weight: 700; }
.uber-meet .eta { display: grid; justify-items: center; padding: 0.3em 0.6em; border-radius: 0.4em; background: #000; color: #fff; font-weight: 700; line-height: 1.05; }
.uber-meet .eta small { font-size: 0.65em; font-weight: 600; }
.uber-driver { display: flex; align-items: center; gap: 0.8em; padding: 0.3em 0.2em; }
.uber-faces { position: relative; width: 5em; height: 3em; flex: none; }
.uber-faces .avatar { position: absolute; left: 0; top: 0.2em; width: 2.6em; height: 2.6em; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, #c9a58f, #8c6450); z-index: 1; }
.uber-faces i { position: absolute; right: -0.2em; bottom: 0.1em; width: 3.4em; }
.uber-plate { display: grid; }
.uber-plate b { font-size: 1.05em; font-weight: 800; letter-spacing: 0.02em; }
.uber-plate span { color: #5e5e5e; font-size: 0.8em; }
.uber-actions { display: flex; gap: 0.5em; align-items: center; }
.uber-actions span:first-child { flex: 1; padding: 0.7em 0.9em; border-radius: 99px; background: #eee; color: #5e5e5e; font-size: 0.85em; }
.uber-actions .round { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: #eee; }

/* Spotify. */
.app-spotify { background: #121212; color: #fff; padding-inline: 0.8em; }
.app-spotify .i { stroke-width: 2.2; }
.sp-top { display: flex; align-items: center; gap: 0.45em; padding: 0.3em 0 0.8em; font-size: 0.82em; }
.sp-avatar { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #e8875a; color: #000; font-weight: 700; }
.sp-chip { padding: 0.45em 0.95em; border-radius: 99px; background: #2a2a2a; }
.sp-chip.on { background: #1ed760; color: #000; }
.sp-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; }
.sp-shortcuts span { display: flex; align-items: center; gap: 0.55em; height: 2.9em; overflow: hidden; border-radius: 0.3em; background: #2a2a2a; font-size: 0.78em; font-weight: 700; line-height: 1.15; }
.sp-shortcuts i { width: 2.9em; height: 100%; flex: none; }
.sp-section { margin: 1.1em 0 0.6em; font-size: 1.25em; font-weight: 700; letter-spacing: -0.01em; }
.sp-shelf { display: flex; gap: 0.7em; }
.sp-shelf span { width: 7em; height: 7em; flex: none; border-radius: 0.3em; }
.sp-shelf .round { border-radius: 50%; }
.sp-title { padding: 0.2em 0 0.7em; font-size: 1.55em; font-weight: 700; letter-spacing: -0.02em; }
.sp-box { display: flex; align-items: center; gap: 0.6em; height: 2.9em; padding: 0 0.8em; border-radius: 0.4em; background: #fff; color: #121212; font-weight: 600; font-size: 0.92em; }
.sp-box span { color: #535353; }
.sp-browse { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.sp-browse span { height: 5.2em; padding: 0.6em; border-radius: 0.4em; font-weight: 700; font-size: 0.92em; }
.sp-browse .b1 { background: #e8115b; }
.sp-browse .b2 { background: #27856a; }
.sp-browse .b3 { background: #ba5d07; }
.sp-browse .b4 { background: #8d67ab; }
.sp-searchbar { display: flex; align-items: center; gap: 0.7em; padding: 0.3em 0 0.9em; font-size: 0.92em; }
.sp-field { flex: 1; gap: 0.5em; min-height: 2.6em; border-radius: 0.4em; background: #2a2a2a; color: #fff; }
.sp-field .hint { color: #a7a7a7; }
.sp-field.typing .value::after { background: #1ed760; }
.sp-results { display: grid; gap: 0.85em; }
.sp-results li { display: flex; align-items: center; gap: 0.7em; }
.sp-results div { display: grid; flex: 1; min-width: 0; }
.sp-results b { font-weight: 600; font-size: 0.95em; }
.sp-results div span { display: flex; align-items: center; gap: 0.35em; color: #b3b3b3; font-size: 0.8em; }
.sp-results em { font-style: normal; color: #b3b3b3; letter-spacing: 0.05em; }
.sp-results .playing b { color: #1ed760; }
.sp-results .cover { width: 3em; height: 3em; }
.eq { display: inline-flex; align-items: end; gap: 0.12em; height: 0.85em; }
.eq s { width: 0.18em; background: #1ed760; animation: bar 700ms ease-in-out infinite alternate; }
.eq s:nth-child(2) { animation-delay: -300ms; }
.eq s:nth-child(3) { animation-delay: -500ms; }
@keyframes bar { from { height: 25%; } to { height: 100%; } }
.sp-tabs { position: absolute; inset: auto 0 0; display: flex; justify-content: space-around; padding: 1.6em 0 2em; background: linear-gradient(transparent, rgba(0, 0, 0, 0.92) 45%); color: #b3b3b3; font-size: 0.66em; }
.sp-tabs span { display: grid; justify-items: center; gap: 0.25em; }
.sp-tabs .i { width: 2em; height: 2em; }
.sp-tabs .on { color: #fff; }
.sp-mini { position: absolute; left: 0.45em; right: 0.45em; bottom: 4.2em; z-index: 1; display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.7em 0.55em 0.45em; overflow: hidden; border-radius: 0.45em; background: #6b2230; animation: rise 300ms ease; }
.sp-mini .cover { width: 2.4em; height: 2.4em; border-radius: 0.25em; }
.sp-mini div { display: grid; flex: 1; min-width: 0; font-size: 0.85em; }
.sp-mini div span { color: #e8d4d7; }
.sp-mini .i { width: 1.35em; height: 1.35em; }
.sp-progress { position: absolute; left: 0.5em; right: 0.5em; bottom: 0.2em; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.sp-progress::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0.02); animation: progress 30s linear forwards; }
@keyframes progress { to { transform: scaleX(1); } }
.cover { flex: none; border-radius: 0.25em; }
.cover.round { border-radius: 50%; }
.c1, .sp-shortcuts .c1 { background: linear-gradient(135deg, #e94e77, #6d1a3f); }
.c2 { background: linear-gradient(135deg, #f59e42, #9a330c); }
.c3 { background: linear-gradient(135deg, #2e9a74, #0b3b2e); }
.c4 { background: linear-gradient(135deg, #e0b43a, #6b3f0a); }
.c5 { background: linear-gradient(135deg, #9cc489, #2f5130); }
.c6 { background: linear-gradient(135deg, #e0603a, #431407); }
.c7 { background: radial-gradient(circle at 30% 30%, #ffb199 0 12%, transparent 13%), linear-gradient(135deg, #ff5e4d, #7a1030 70%); }
.c8 { background: linear-gradient(135deg, #b9897a, #3d2224); }

/* Grocer. */
.app-grocer { background: #f6f3ee; }
.grocer-top { padding: 0.5em 1em 1em; background: linear-gradient(#ffe7a3, #fff2cf); }
.grocer-eta { font-size: 1.35em; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.6em; }
.grocer-field { background: #fff; box-shadow: 0 0 0 1px #eadfc6; }
.grocer-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; padding: 1em; }
.grocer-shelf span { height: 6em; border-radius: 0.8em; background: #fff; box-shadow: 0 0 0 1px #ece6dc; }
.grocer-results { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; padding: 1em; }
.grocer-card { position: relative; display: grid; gap: 0.1em; padding: 0.6em; border-radius: 0.8em; background: #fff; box-shadow: 0 0 0 1px #ece6dc; }
.grocer-card span, .grocer-card em { font-size: 0.85em; }
.grocer-card span { color: #7a706a; }
.grocer-card em { font-style: normal; font-weight: 700; }
.produce { height: 4.4em; border-radius: 0.6em; margin-bottom: 0.3em; background: radial-gradient(circle at 42% 46%, #ff6a4d 0 26%, transparent 27%), radial-gradient(circle at 62% 58%, #e8432a 0 24%, transparent 25%), #fbefe9; }
.produce.alt { background: radial-gradient(circle at 50% 50%, #d9381f 0 30%, transparent 31%), #fbefe9; }
.grocer-card .add { position: absolute; right: 0.6em; bottom: 0.6em; padding: 0.3em 0.75em; border-radius: 0.5em; color: #2c7a3a; background: #fff; box-shadow: inset 0 0 0 1px #2c7a3a; font-weight: 700; font-size: 0.8em; }
.grocer-card .add.count { color: #fff; background: #2c7a3a; }
.grocer-cart { position: absolute; left: 0.8em; right: 0.8em; bottom: 2em; display: flex; justify-content: space-between; padding: 0.85em 1em; border-radius: 0.9em; color: #fff; background: #2c7a3a; animation: rise 300ms ease; }

/* Amazon. */
.app-amazon { padding-top: 0; background: #fff; color: #0f1111; }
.az-top { padding: 3.6em 0.7em 0.6em; background: linear-gradient(90deg, #82d8e3, #a6e7ce); }
.az-field { gap: 0.5em; min-height: 2.6em; padding: 0 0.7em; border-radius: 0.55em; background: #fff; box-shadow: 0 0 0 1px rgba(0, 80, 80, 0.25), 0 1px 3px rgba(0, 0, 0, 0.12); color: #0f1111; }
.az-field .hint { color: #6f7373; }
.az-field .i:nth-of-type(2) { margin-left: auto; }
.az-field .value:not(:empty) + .hint { display: none; }
.az-field .i { color: #565959; width: 1.15em; height: 1.15em; }
.az-field.typing .value::after { background: #0f1111; }
.az-deliver { display: flex; align-items: center; gap: 0.35em; padding: 0.5em 0.8em; background: #c8f0e6; font-size: 0.78em; }
.az-deliver .i { width: 1.1em; height: 1.1em; }
.az-home { display: grid; gap: 0.7em; padding: 0.7em; }
.az-banner { display: grid; gap: 0.1em; height: 7em; padding: 0.9em; border-radius: 0.5em; color: #fff; background: linear-gradient(120deg, #f3a35f, #d9542b 55%, #9c2a12); }
.az-banner b { font-size: 1.35em; font-weight: 800; letter-spacing: -0.01em; }
.az-banner span { font-size: 0.85em; }
.az-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.az-cards span { display: grid; gap: 0.3em; padding: 0.6em; border-radius: 0.5em; box-shadow: 0 0 0 1px #e7e7e7; font-size: 0.8em; font-weight: 700; }
.az-cards i { height: 3.6em; border-radius: 0.3em; background: #f2f3f3; }
.az-cards span:nth-child(1) i { background: linear-gradient(135deg, #f3e7dc, #e6d2c0); }
.az-cards span:nth-child(2) i { background: linear-gradient(135deg, #e2edf0, #c9dde2); }
.az-cards span:nth-child(3) i { background: linear-gradient(135deg, #f3e1e6, #e4c4cd); }
.az-cards span:nth-child(4) i { background: linear-gradient(135deg, #e7eedf, #d1dfc3); }
.az-deals { display: grid; gap: 0.5em; }
.az-deals p { font-weight: 700; font-size: 0.95em; }
.az-deals div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
.az-deals span { display: grid; gap: 0.25em; font-size: 0.72em; }
.az-deals i { height: 4.6em; border-radius: 0.3em; background: #f2f3f3; }
.az-deals em { justify-self: start; padding: 0.15em 0.4em; border-radius: 0.2em; color: #fff; background: #cc0c39; font-style: normal; font-weight: 700; }
.az-filters { display: flex; gap: 0.4em; padding: 0.6em 0.7em; overflow: hidden; font-size: 0.75em; }
.az-filters span { padding: 0.4em 0.8em; border-radius: 0.5em; box-shadow: inset 0 0 0 1px #d5d9d9; white-space: nowrap; }
.az-results li { display: flex; gap: 0.7em; padding: 0.7em; border-top: 1px solid #e7e7e7; transition: box-shadow 300ms ease; }
.az-results li > div { display: grid; gap: 0.2em; align-content: start; min-width: 0; }
.az-img { display: grid; place-items: center; width: 5.4em; flex: none; align-self: stretch; border-radius: 0.3em; background: #f7f7f7; }
.az-results li > div > b { font-weight: 400; font-size: 0.8em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.az-rating { font-size: 0.74em; color: #0f1111; }
.az-rating s { text-decoration: none; color: #de7921; letter-spacing: 0.02em; }
.az-rating u { text-decoration: none; color: #007185; }
.az-bought { font-size: 0.7em; color: #565959; }
.az-price { font-size: 1.3em; font-weight: 500; line-height: 1.2; }
.az-price sup { font-size: 0.55em; vertical-align: 0.6em; margin-right: 0.05em; }
.az-price small { display: block; font-size: 0.5em; font-weight: 400; color: #565959; }
.az-delivery { font-size: 0.72em; }
.az-delivery b { font-weight: 700; }
.az-add { justify-self: start; margin-top: 0.2em; padding: 0.45em 1.1em; border-radius: 99px; background: #ffd814; font-size: 0.78em; }
.az-results li.reading { box-shadow: inset 0 0 0 2px #ffb22e, 0 0 1.4em rgba(255, 178, 46, 0.45); }
.device { width: 3.2em; height: 5.6em; border-radius: 0.45em; background: linear-gradient(160deg, #3a3a3e, #121214); box-shadow: inset 0 0 0 2px #77777c; }
.device.alt { background: linear-gradient(160deg, #8a8a90, #4a4a50); }

/* Chats. */
.app-chat { background: #fbf8f5; }
.chat-title { font-size: 1.7em; font-weight: 700; letter-spacing: -0.02em; padding: 0.3em 0.6em 0.4em; }
.chat-list li { display: flex; align-items: center; gap: 0.75em; padding: 0.75em 1em; border-bottom: 1px solid #efe7e2; }
.chat-list div { display: grid; min-width: 0; }
.chat-list span:not(.face) { color: #7a706a; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; color: #fff; font-weight: 700; background: #c45a3a; }
.face.alt { background: #6a7a5a; }
.face.alt2 { background: #5a6a8a; }
.chat-with { display: flex; align-items: center; gap: 0.6em; padding: 0.4em 1em 0.7em; font-weight: 600; border-bottom: 1px solid #efe7e2; }
.chat-with .face { width: 2em; height: 2em; font-size: 0.85em; }
.chat-thread { display: grid; gap: 0.5em; padding: 1em; align-content: start; }
.bubble { max-width: 78%; padding: 0.55em 0.85em; border-radius: 1.1em; line-height: 1.3; }
.bubble.them { justify-self: start; background: #ece6e3; border-bottom-left-radius: 0.3em; }
.bubble.me { justify-self: end; color: #fff; background: #c4431f; border-bottom-right-radius: 0.3em; animation: rise 300ms ease; }
.chat-compose { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.5em; padding: 0.6em 0.8em 2.1em; background: #fbf8f5; border-top: 1px solid #efe7e2; }
.chat-field { flex: 1; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px #e4dcd7; }
.send { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; color: #fff; background: #c4431f; font-weight: 700; }

.aside { color: var(--cream-soft); }

/* In charge: three plain columns on a wine field. */
.charge { padding: clamp(96px, 12vw, 160px) var(--gutter); }
.charge-inner { position: relative; z-index: 1; max-width: var(--wide); margin: 0 auto; display: grid; gap: clamp(36px, 5vw, 64px); }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.points > div { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent); }
.points p { color: var(--cream-soft); }

/* The invitation, on vermilion. */
.cta { padding: clamp(110px, 14vw, 200px) var(--gutter); }
.cta-inner { position: relative; z-index: 1; max-width: var(--wide); margin: 0 auto; display: grid; gap: 24px; justify-items: start; }
.cta-inner h2 { max-width: 16ch; }
.cta-inner > p { color: #f9e2d0; }
.signup.on-field { margin-top: 8px; }
.signup.on-field input[type="email"] { background: color-mix(in srgb, var(--madder) 28%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 45%, transparent); }
.signup.on-field input[type="email"]::placeholder { color: #f0cdb8; }
.signup.on-field .signup-note { color: var(--cream); }

/* After joining: one optional question, in a dialog. */
.followup {
  width: min(92vw, 30rem);
  padding: clamp(24px, 4vw, 36px);
  border: 0;
  border-radius: 24px;
  color: var(--cream);
  background: #2b0b13;
  box-shadow: 0 40px 120px -20px rgba(10, 2, 4, 0.9), 0 0 0 1px rgba(255, 220, 190, 0.1);
}
.followup::backdrop { background: rgba(20, 4, 8, 0.72); backdrop-filter: blur(6px); }
.followup-form, .followup-done { display: grid; gap: 18px; }
.followup-form[hidden], .followup-done[hidden] { display: none; }
.followup h2 { font-size: 1.75rem; }
.followup p { color: var(--cream-soft); }
.followup label { display: grid; gap: 8px; font-weight: 600; }
.followup textarea {
  font: inherit;
  font-weight: 400;
  color: var(--cream);
  padding: 14px 16px;
  border-radius: 16px;
  border: 0;
  resize: vertical;
  background: color-mix(in srgb, var(--cream) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 26%, transparent);
}
.followup textarea::placeholder { color: var(--cream-faint); }
.followup-actions { display: flex; align-items: center; gap: 18px; }
.not-now { appearance: none; border: 0; background: none; font: inherit; color: var(--cream-soft); text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; padding: 8px 4px; }
.followup .signup-note { color: var(--ember); }

.foot {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 64px var(--gutter) 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: 28px clamp(32px, 6vw, 96px);
  font-size: 0.875rem;
  color: var(--cream-faint);
}
.foot-main { display: grid; gap: 10px; align-content: start; color: var(--cream-soft); font-size: 1rem; }
.foot-small { display: grid; gap: 10px; }
.foot-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); font-weight: 600; font-size: 1.125rem; }
.foot-mark img { border-radius: 50%; }
.foot a { color: var(--cream-soft); }

/* Phones: one column, the video and the demo phone right under their headings. */
@media (max-width: 820px) {
  /* The video right under the headline, so it's on the first screen. */
  .hero { grid-template-columns: 1fr; gap: 22px; padding-top: 92px; padding-bottom: 24px; min-height: auto; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; }
  .hero-stage { order: 2; margin: 14px 0 6px; }
  .lede { order: 3; }
  .actions { order: 4; margin-top: 0; }
  .asks { grid-template-columns: 1fr; }
  .asks-copy { display: contents; }
  .asks h2 { order: 1; }
  .try { order: 2; margin-top: -12px; }
  .asks-phone { order: 3; margin: 12px 0 24px; }
  .requests { order: 4; font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .aside { order: 5; }
  .points { grid-template-columns: 1fr; }
  .requests li:nth-child(even) { margin-left: 0; }
  .foot { grid-template-columns: 1fr; }
  .top { padding-block: 16px; }
  .top.stuck { padding-block: 10px; }

}
.followup-done .join { justify-self: start; }

/* The page for an address that isn't one. */
.lost { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 22px; padding: 64px var(--gutter); max-width: 44rem; margin: 0 auto; }
.lost .mark { margin-bottom: 18px; }
.lost p { color: var(--cream-soft); }