/* Open Street: Breeze, the app's soft Carbon, on one white ground; colour means a channel, a kind of step or an agent.
   Four sizes outside the product, two weights, every size tracked tight. Greys are ink at an alpha, so they sit
   in whatever ground they land on. Each colour names its light and dark value; data-theme picks the scheme. */
:root {
  color-scheme: light dark;

  --brand-orange: #ff832b;
  --brand-purple: #8a3ffc;
  --brand-blue: #1192e8;
  --brand-green: #24a148;
  --brand-magenta: #d02670;

  --app-bg: light-dark(#ffffff, #131315);
  --bg: light-dark(#ffffff, #131315);
  --surface: light-dark(#ffffff, #1c1c20);
  --surface-sunken: light-dark(#f7f7f8, #1c1c20);
  --field: light-dark(#efeff2, #26262b);
  --tile-top: light-dark(#fafafb, #222227);
  --tile-bottom: light-dark(#f4f4f6, #1c1c20);
  --phone-panel: light-dark(#f4f4f6, #26262b);
  --step-icon-bg: light-dark(#efeff2, #26262b);
  --line: light-dark(#e4e4e7, #2c2c32);
  --line-strong: light-dark(#cfcfd5, #3a3a42);
  --text: light-dark(#18181c, #f2f1ee);
  --text-secondary: light-dark(#2f2f37, #c4c3cc);
  --text-muted: light-dark(#52525c, #8f8e99);
  --text-soft: light-dark(#6b6b75, #7d7c87);
  --text-on-dark: light-dark(#ffffff, #161616);
  --icon-muted: light-dark(#6b6b75, #8f8e99);
  --disabled: light-dark(#cfcfd5, #3a3a42);
  --focus: light-dark(#4b4ef0, #ffffff);
  --success: var(--brand-green);
  --success-text: light-dark(#1a7a37, #5bd48a);
  --attention: var(--brand-orange);
  --attention-text: light-dark(#b5520a, #ffa45c);
  --danger: #da1e28;
  --danger-text: light-dark(#c21a23, #ff8a8f);
  --wait: #ba4e00;
  --wait-text: light-dark(#8a3a00, #e8955a);
  --info: var(--brand-blue);
  --agent: var(--brand-purple);
  --sms: #009d9a;
  --kind-menu: #007d79;
  --kind-input: #8a3ffc;
  --kind-router: #1192e8;
  --kind-end: #24a148;
  /* Indigo for actions alone; a tint names one thing: WhatsApp mint, SMS peach, USSD sky, a person rose, an agent lilac. */
  --action: light-dark(#4b4ef0, #5a5df3);
  --action-hover: light-dark(#3a3dd6, #4b4ef0);
  --action-soft: light-dark(#eeeefe, #1e1f4a);
  --on-action: #ffffff;
  --tint-mint: light-dark(#a7f0ba, #1f3a29);
  --tint-peach: light-dark(#ffd9be, #40291b);
  --tint-sky: light-dark(#bae6ff, #1d3045);
  --tint-rose: light-dark(#ffd6e8, #40202f);
  --tint-lilac: light-dark(#e8daff, #2c2548);
  --chat-bg: light-dark(#efe7dd, #11181b);
  --chat-me: light-dark(#d9fdd3, #144d37);
  --lcd: #c3d4a2;
  --lcd-ink: #1f2a12;
  --fill-blank: #fff6e0;
  --fill-blank-line: #ba4e00;
  --fill-blank-text: #7a5b00;
  --font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius-pill: 999px;
  --radius-window: 14px;
  --radius-card: 12px;
  --radius-inner: 10px;
  --radius-chip: 6px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;

  --ground: var(--bg);
  --ground-2: var(--surface-sunken);
  --panel: var(--surface-sunken);
  --white: var(--surface);
  --ink: var(--text);
  --ink-2: var(--text-secondary);
  --ink-hover: light-dark(#2f2f37, #c4c3cc);
  --on-ink: var(--text-on-dark);
  --grey: var(--text-muted);
  --grey-2: var(--line-strong);
  --dot: var(--line-strong);
  --shade: light-dark(#18181c, #000000);
  --wa: var(--chat-me);
  --wa-ink: var(--success-text);
  --wa-wall: var(--chat-bg);
  --wa-bubble: light-dark(#ffffff, #202c33);
  --wa-text: light-dark(#111b21, #e9edef);
  --wa-meta: light-dark(#667781, #8696a0);
  --wa-reply: light-dark(#027eb5, #53bdeb);
  --sms-bubble: light-dark(#e9e9eb, #26252a);
  --trigger-icon: light-dark(#8fd6a5, #24a148);
  --menu: var(--brand-orange);
  --input: var(--kind-input);
  --router: var(--kind-router);
  --router-ink: light-dark(#0072c3, #82cfff);
  --end: var(--kind-end);
  --end-ink: var(--success-text);
  --live: var(--brand-magenta);
  --message: var(--sms);
  --sans: var(--font);
  --mono: var(--font-mono);
  --font-display: 400 30px/1.15 var(--sans);
  --font-lead: 400 20px/1.3 var(--sans);
  --font-text: 400 16px/1.5 var(--sans);
  --font-ui: 500 14px/1.43 var(--sans);
  --arrive: cubic-bezier(0.19, 1, 0.22, 1);
  --productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --window: 0 0 0 1px var(--line), 0 2px 4px color-mix(in srgb, var(--shade) 4%, transparent), 0 24px 60px color-mix(in srgb, var(--shade) 20%, transparent);
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
/* Anchors land clear of the bar. */
html {
  scroll-padding-top: 96px;
}
section[id] {
  scroll-margin-top: -110px;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--font-text);
  letter-spacing: -0.01em;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    -webkit-font-smoothing: antialiased;
  }
}
:root[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
button {
  font: inherit;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}
.gutter {
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.wrap {
  max-width: 1300px;
  margin: 0 auto;
}

.btn-small {
  height: 32px;
  padding: 0 14px;
  font: var(--font-ui);
}

/* Heads */
.intro {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding-top: 120px;
  text-align: center;
}
h1,
h2 {
  margin: 0;
  font: var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.intro h1 {
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.intro.is-page h1,
.close h2 {
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.dim {
  display: block;
  color: var(--text-soft);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
/* Breeze's buttons, as the app's: rounded a little, the label and its arrow side by side. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  font: 600 15px/20px var(--sans);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--action);
  color: var(--on-action);
}
.btn-primary:hover {
  background: var(--action-hover);
}
.btn-ink {
  background: var(--ink);
  color: var(--on-ink);
}
.btn-ink:hover {
  background: var(--ink-hover);
}
.btn-line {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn-line:hover {
  background: var(--surface-sunken);
}
.btn-line svg {
  width: 14px;
  height: 14px;
}

/* What reached each phone, drawn as that phone draws it. */
.whatsapp-bubble,
.sms-notice,
.ussd-dialog,
.approval-card {
  display: block;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shade) 14%, transparent);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}
.whatsapp-bubble {
  padding: 8px 10px 0;
  border-radius: 0 8px 8px;
  background: var(--chat-me);
}
.whatsapp-bubble time {
  display: block;
  font-size: 10px;
  text-align: right;
  opacity: 0.6;
}
.whatsapp-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 6px -10px 0;
  border-top: 1px solid color-mix(in srgb, var(--shade) 8%, transparent);
}
.whatsapp-buttons span {
  padding: 7px 0;
  color: var(--wa-ink);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.sms-notice {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
}
.sms-notice-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--grey);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ussd-dialog {
  padding: 10px 12px;
  border-radius: 8px;
  border-top: 3px solid var(--ink);
  background: var(--surface-sunken);
  font: 400 12px/1.45 var(--mono);
}
.ussd-keys,
.approval-card-choices {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
  font: 500 11px var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.approval-card {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
}
.approval-card-head {
  display: block;
  margin-bottom: 4px;
  color: var(--grey);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.approval-card-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.approval-card-choices span {
  padding: 6px 0;
  border-radius: 6px;
  background: var(--surface-sunken);
  font-size: 12px;
  text-align: center;
}
.approval-card-choices .is-yes {
  background: var(--brand-magenta);
  color: #ffffff;
}
@media (max-width: 640px) {
  .whatsapp-bubble,
  .sms-notice,
  .approval-card {
    font-size: 11px;
  }
  .ussd-dialog {
    font-size: 10px;
  }
}

/* Arrival. The opening rises in on load, a beat apart; what is below it is already in place when scrolled to.
   Reduced motion keeps the fade and drops the movement. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.intro > *,
.intro + .window {
  animation: rise 0.5s var(--arrive) backwards;
}
.intro > :nth-child(2) {
  animation-delay: 0.07s;
}
.intro > :nth-child(3) {
  animation-delay: 0.14s;
}
.intro + .window {
  animation-delay: 0.21s;
}
@media (prefers-reduced-motion: reduce) {
  .intro > *,
  .intro + .window {
    transform: none !important;
  }
}

/* The product window */
.window {
  position: relative;
  margin-top: 48px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--window);
  overflow: hidden;
}
.chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  font-size: 13px;
}
.dots {
  display: flex;
  gap: 6px;
}
.dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--grey);
}
.crumbs b {
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.crumbs svg {
  width: 14px;
  height: 14px;
}
.chrome .right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  color: var(--grey);
}
.avatars {
  display: flex;
}
.avatars span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -5px;
  border-radius: 50%;
  border: 2px solid var(--white);
  color: #fff;
  font-size: 10px;
  font-weight: var(--weight-strong);
}
.publish {
  height: 28px;
  padding: 0 12px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  display: grid;
  place-items: center;
}
.body {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 270px;
  height: 520px;
}
.rail {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px 0;
  border-right: 1px solid var(--line);
  background: var(--white);
  justify-items: center;
}
.rail i {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--grey);
}
.rail i.is-on {
  background: var(--panel);
  color: var(--ink);
}
.rail svg {
  width: 15px;
  height: 15px;
}
.board {
  position: relative;
  overflow: hidden;
  background-color: var(--panel);
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.cursor {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
  transition: transform 1.6s cubic-bezier(0.5, 0, 0.2, 1);
}
.cursor svg {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.2));
}
.cursor span {
  margin-top: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.inspector {
  border-left: 1px solid var(--line);
  background: var(--white);
  padding: 14px;
  font-size: 12.5px;
  overflow: hidden;
}
.inspector-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: var(--weight-medium);
}
.inspector-title i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--message);
}
.field {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}
.field-label {
  color: var(--grey);
  font-size: 11.5px;
}
.field .box {
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  line-height: 1.45;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.chips span {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 11.5px;
}
.chips span.is-on {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: none;
}
.var {
  padding: 0 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
}
.tests {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--grey);
}
.tests b {
  color: var(--end-ink);
  font-weight: var(--weight-medium);
}
.switcher {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.switcher div {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.switcher button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--grey);
  font-size: 13px;
  cursor: pointer;
}
.switcher button[aria-pressed="true"] {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 10%, transparent);
}

section {
  padding-top: 180px;
}
.head {
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
  margin-bottom: 48px;
}
.left-head {
  display: grid;
  gap: 0;
  margin-bottom: 48px;
}

/* Channels row */
.note {
  max-width: 48em;
  margin: 32px 0 0;
  color: var(--grey);
  font: 400 16px/1.5 var(--sans);
  text-wrap: pretty;
}
.note b {
  color: var(--ink);
  font-weight: 400;
}

/* Agents window */
.chat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-left: 1px solid var(--line);
  background: var(--white);
}
.chat .tabs {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--grey);
}
.chat .tabs b {
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.log {
  display: grid;
  align-content: end;
  gap: 10px;
  padding: 14px;
  font-size: 12.5px;
}
.log .me {
  justify-self: end;
  max-width: 85%;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--on-ink);
}
.log .them {
  max-width: 92%;
  color: var(--ink-2);
  line-height: 1.5;
}
.log .them small {
  display: block;
  margin-bottom: 3px;
  color: var(--grey);
}
.log .ready {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--end-ink);
  font-size: 12px;
}
.compose {
  margin: 0 12px 12px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--grey);
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.compose i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-style: normal;
  font-size: 12px;
}

/* Close */
.close {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding-block: 170px 120px;
  text-align: center;
}
.close .air-mark {
  width: 120px;
  height: 120px;
}

/* A section on its own tint runs the page's full width; its content keeps the column. */
.band {
  margin-inline: calc(50% - 50vw);
  margin-top: 140px;
  padding: 120px max(20px, calc(50vw - 50%));
  background: var(--tint);
}
.band + section {
  margin-top: 0;
}
main {
  overflow-x: clip;
}
.whatsapp-bubble.is-mine {
  justify-self: end;
  padding-bottom: 6px;
  border-radius: 8px 0 8px 8px;
  background: var(--surface);
}
.run-closed {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kind-end) 14%, transparent);
  color: var(--success-text);
  font-size: 12px;
  font-weight: 500;
}
.run-closed::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.btn-on-action {
  background: #ffffff;
  color: var(--action);
}
.btn-on-action:hover {
  background: color-mix(in srgb, #ffffff 90%, var(--action));
}
.btn-line-on-action {
  color: #ffffff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 60%, transparent);
}
.btn-line-on-action:hover {
  background: color-mix(in srgb, #ffffff 12%, transparent);
}

@media (max-width: 980px) {
  .band {
    margin-top: 100px;
    padding-block: 80px;
  }
}

/* Each channel drawn as its own app shows it: a WhatsApp chat, a Messages thread, a network's USSD dialog. */
.app {
  justify-self: start;
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
    0 14px 28px -18px color-mix(in srgb, var(--shade) 55%, transparent);
}
.app p {
  margin: 0;
}
.thread {
  display: grid;
  gap: 4px;
  padding: 12px;
}
.app.wa {
  background-color: var(--wa-wall);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--wa-meta) 14%, transparent) 1px, transparent 1.3px);
  background-size: 14px 14px;
}
.app.wa .thread {
  justify-content: start;
  gap: 2px;
  padding: 14px 16px 16px 20px;
  font-size: 14.2px;
  line-height: 19px;
  color: var(--wa-text);
}
.app.wa .bubble {
  position: relative;
  padding: 6px 7px 8px 9px;
  border-radius: 0 7.5px 7.5px;
  background: var(--wa-bubble);
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13);
}
.app.wa .tail {
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 13px;
  fill: var(--wa-bubble);
}
.app.wa .room {
  display: inline-block;
  width: 38px;
}
.app.wa .bubble time {
  position: absolute;
  right: 7px;
  bottom: 4px;
  font-size: 11px;
  line-height: 15px;
  color: var(--wa-meta);
}
.app.wa .replies {
  display: grid;
  gap: 2px;
}
.app.wa .replies b {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-radius: 7.5px;
  background: var(--wa-bubble);
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13);
  color: var(--wa-reply);
  font-weight: 400;
  font-size: 14px;
}
.app.wa .replies .icon {
  width: 16px;
  height: 16px;
}
.app.sms {
  background: var(--white);
}
.app.sms .thread small {
  justify-self: center;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--grey);
}
.app.sms .bubble {
  justify-self: start;
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 18px 18px 18px 5px;
  background: var(--sms-bubble);
}
.app.sms .bubble u {
  text-underline-offset: 2px;
}
.app.ussd {
  max-width: 280px;
  padding: 12px;
  background: #111315;
  color: #d6d9dc;
}
.app.ussd .surface {
  width: 100%;
  box-shadow: none;
}
.app.ussd .reply {
  display: block;
  height: 26px;
  margin-top: 10px;
  border-bottom: 2px solid #7fb2ff;
}
.surface {
  justify-self: start;
  max-width: 380px;
  font-size: 14px;
  line-height: 1.45;
}
.surface p {
  margin: 0;
}
.surface.wa {
  padding: 10px 12px 6px;
  border-radius: 12px 12px 12px 3px;
  background: var(--wa);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08);
}
.surface.wa .btns {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.surface.wa .btns b {
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--white);
  color: var(--wa-ink);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
}
.surface.wa time {
  display: block;
  margin-top: 4px;
  text-align: right;
  color: var(--grey);
  font-size: 11px;
}
.surface.sms {
  padding: 10px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--white) 90%, transparent);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--shade) 35%, transparent);
  backdrop-filter: blur(6px);
}
.surface.sms small {
  display: block;
  margin-bottom: 2px;
  color: var(--grey);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.surface.ussd {
  width: 250px;
  padding: 14px 14px 0;
  border-radius: 4px;
  background: #2b2f33;
  color: #eef0ee;
  font-size: 13.5px;
  box-shadow: 0 10px 22px -10px rgb(0 0 0 / 0.5);
}
.surface.ussd .keys {
  display: flex;
  justify-content: space-between;
  margin: 12px -14px 0;
  border-top: 1px solid #45494e;
}
.surface.ussd .keys i {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-style: normal;
  color: #7fb2ff;
  font-size: 13px;
}
.surface.ussd .keys i + i {
  border-left: 1px solid #45494e;
}

/* The canvas, as the product draws it: steps, labelled exits with ports, cords coloured by the step they leave. */
.flow {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  transform-origin: 0 0;
}
.cords {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cords path {
  fill: none;
  stroke: var(--k);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.cords path.is-back {
  stroke-dasharray: 4 4;
  stroke-opacity: 0.55;
}
.cords path.is-start {
  stroke: var(--grey);
  stroke-width: 1.6;
  stroke-dasharray: 3 4;
}
.cords path.is-live {
  stroke-dasharray: 6 5;
}
.cords .plug {
  fill: var(--k);
}
.step {
  position: absolute;
  width: 196px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 10px;
  background: var(--white);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--shade) 5%, transparent),
    0 8px 18px -12px color-mix(in srgb, var(--shade) 35%, transparent);
  font-size: 12px;
}
.step > header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 7px;
  border-radius: 9px 9px 0 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--k) 4%, var(--white));
}
.step > header svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--k);
}
.step > header b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
}
.step .by {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--input);
  color: #fff;
  font-size: 10px;
  font-weight: var(--weight-medium);
}
.say {
  display: grid;
  gap: 3px;
  padding: 8px 10px 10px;
}
.say p {
  margin: 0;
  font-size: 12.5px;
  font-weight: var(--weight-medium);
}
.say ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 11.5px;
}
.say li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exits {
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  border-top: 1px dashed var(--line);
}
.exits li {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 22px;
  padding: 1px 16px 1px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.exits li::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--k);
  box-shadow: 0 0 0 1px var(--k);
}
.exits li.is-open {
  color: var(--grey);
  font-style: italic;
}
.exits li.is-open::after {
  background: var(--white);
}
.done {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 10px 9px;
  color: var(--end-ink);
  font-size: 11.5px;
}
.done svg {
  width: 12px;
  height: 12px;
}
.step.is-new {
  box-shadow:
    0 0 0 2px var(--input),
    0 10px 22px -10px rgb(138 63 252 / 0.45);
}
.step.is-selected {
  box-shadow:
    0 0 0 2px var(--router),
    0 10px 22px -10px rgb(17 146 232 / 0.4);
}
.is-agent {
  --k: var(--input);
}
.is-input {
  --k: var(--input);
}
.is-message {
  --k: var(--message);
}
.is-wait {
  --k: var(--wait);
}
.is-router {
  --k: var(--router);
}
.is-menu {
  --k: var(--menu);
}
.is-end {
  --k: var(--end);
}
.trigger {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 12px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--shade) 50%, transparent);
}
.trigger svg {
  width: 14px;
  height: 14px;
  color: var(--trigger-icon);
}
.flow .cursor {
  left: 0;
  top: 0;
  transform: translate(var(--x, 0), var(--y, 0));
  z-index: 3;
  transition: none;
}
.flow .cursor.is-moving {
  transition: transform 1.6s cubic-bezier(0.5, 0, 0.2, 1);
}
.cursor svg {
  fill: var(--c);
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.cursor span {
  background: var(--c);
}
.is-claude {
  --c: var(--input);
}
.is-cursor {
  --c: var(--router-ink);
}
.is-ravi {
  --c: var(--wait);
}
.avatars span {
  background: var(--c);
}
.islands {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.island {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--white);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
    0 6px 14px -8px color-mix(in srgb, var(--shade) 30%, transparent);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
}
.island svg {
  width: 14px;
  height: 14px;
}
.island.zoom {
  gap: 12px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
}
.island.zoom i {
  font-style: normal;
  color: var(--grey);
}
.rail i svg {
  width: 15px;
  height: 15px;
}
.rail i[class*="is-"] {
  color: var(--k);
}
.rail i.is-on {
  color: var(--ink);
}
.amount {
  margin: 0;
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.amount span {
  margin-left: 6px;
  color: var(--grey);
  font-size: 16px;
  letter-spacing: -0.01em;
}
.amount small {
  margin-right: 6px;
  color: var(--grey);
  font-size: 16px;
  letter-spacing: -0.01em;
}
.per {
  margin: 10px 0 0;
  color: var(--grey);
  font-size: 14px;
}

@media (max-width: 980px) {
  .body {
    grid-template-columns: minmax(0, 1fr);
    height: 460px;
  }
  .rail,
  .inspector {
    display: none;
  }
  section {
    padding-top: 120px;
  }
}
/* A board too narrow for its flow shows the start of it, readable, and pans sideways for the rest. */
.board.is-cropped {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.board.is-cropped::-webkit-scrollbar {
  display: none;
}

/* Phones: a flow reads as its steps from the top, as the editor's steps view lists them, joined by a thread; the
   canvas is for wide screens. The agents window keeps its conversation alone, which is its point. */
@media (max-width: 560px) {
  .body,
  .stage .board {
    height: auto;
  }
  .board,
  .board.is-cropped {
    max-height: 540px;
    overflow: hidden;
    padding: 20px 16px 12px;
    mask-image: linear-gradient(to bottom, #000 78%, transparent);
  }
  .board .flow {
    position: static;
    display: grid;
    gap: 22px;
    width: auto;
    height: auto;
    transform: none !important;
  }
  .board .step,
  .board .trigger {
    position: relative;
    left: auto !important;
    top: auto !important;
  }
  .board .step {
    width: auto;
    margin-right: 6px;
  }
  .board .trigger {
    justify-self: start;
  }
  .board :is(.trigger, .step) + .step::before {
    content: "";
    position: absolute;
    left: 17px;
    top: -23px;
    height: 22px;
    border-left: 1.5px solid var(--grey-2);
  }
  .board :is(.cords, .cursor),
  .islands {
    display: none;
  }
}

/* Phones: the opening reads as one sentence; section heads sit left and large, their second line smaller. */
@media (max-width: 560px) {
  .intro h1 .dim {
    display: inline;
  }
  .intro.is-page h1 .dim {
    display: block;
    margin-top: 12px;
    font: var(--font-lead);
    letter-spacing: -0.01em;
  }
  .head {
    justify-items: start;
    text-align: left;
  }
  section h2,
  .close h2 {
    font-size: 34px;
    line-height: 1.1;
  }
  section h2 .dim,
  .close h2 .dim {
    margin-top: 10px;
    font: var(--font-lead);
    letter-spacing: -0.01em;
  }
  .chrome {
    gap: 10px;
  }
  .crumbs {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .chrome .right > :not(.publish) {
    display: none;
  }
  /* A table becomes one card a row: the row's name, then each cell under its column's name. */
  .site .sheet-table :is(table, tbody, tr, th, td) {
    display: block;
    min-width: 0;
  }
  .site .sheet-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .site .sheet-table tbody tr {
    padding: 16px 20px;
    border-top: 1px solid var(--line);
  }
  .site .sheet-table tbody tr:first-child {
    border-top: 0;
  }
  .site .sheet-table tbody :is(th, td) {
    width: auto;
    padding: 0;
    border-top: 0;
    background: none;
  }
  .site .sheet-table tbody th {
    margin-bottom: 10px;
  }
  .site .sheet-table tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }
  .site .sheet-table tbody td + td {
    margin-top: 10px;
  }
  .site .sheet-table tbody td::after {
    content: attr(data-label);
    order: -1;
    width: 100%;
    color: var(--grey);
    font-size: 13px;
    font-weight: 400;
  }
}
@media (prefers-reduced-motion: reduce) {
  .arms,
  .air-mark g g {
    animation: none;
  }
  .cursor {
    transition: none;
  }
}

/* The site's own frame. */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--white);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.step .icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--k);
}
.done .icon,
.ready .icon {
  width: 12px;
  height: 12px;
}
.log p {
  margin: 0;
}
.log .ready {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--end-ink);
  font-size: 12px;
}
.compose {
  margin: 0 12px 12px;
}
.crumbs .mark {
  width: 14px;
  height: 14px;
}
.icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Pages past the home: the same canvas, one product object each, then short claims. */
.intro.is-page {
  padding-top: 72px;
}
section.is-first {
  padding-top: 72px;
}
.note.center {
  text-align: center;
}
.stage {
  margin-top: 56px;
  background: var(--white);
}
.stage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  height: 440px;
}
.seen {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  padding: 22px 28px 28px;
  border-left: 1px solid var(--line);
  background: var(--ground-2);
}
.seen .when {
  border-left-color: var(--grey-2);
}
.seen > div {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
}
.seen .surface {
  justify-self: center;
  width: 100%;
  max-width: 270px;
}
.seen .surface.ussd {
  width: 250px;
}
.points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  margin: 0;
}
.points div {
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
}
.points dt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-weight: var(--weight-medium);
}
.points dt .icon {
  color: var(--grey);
}
.points dd {
  margin: 0;
  max-width: 36ch;
  color: var(--grey);
}
.questions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
}
.questions h2 {
  font: var(--font-lead);
}
.faq details {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  color: var(--grey);
}
.faq details[open] summary::after {
  content: "−";
}
.faq p {
  max-width: 60ch;
  margin: 10px 0 0;
  color: var(--grey);
}
.sheet-table {
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--window);
  overflow-x: auto;
}
.sheet-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}
.sheet-table th,
.sheet-table td {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.sheet-table thead th {
  border-top: 0;
  color: var(--grey);
  font-size: 13px;
  font-weight: var(--weight-medium);
}
.sheet-table tbody th {
  width: 28%;
  font-weight: var(--weight-medium);
}
.sheet-table td {
  color: var(--ink-2);
}
.is-compare td::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--grey-2);
}
.is-compare td.is-yes::before {
  background: var(--end);
}
.is-compare td.is-some::before {
  background: var(--wait);
}
.is-compare td:last-child,
.is-compare th:last-child {
  background: var(--ground-2);
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.sheet {
  max-width: 680px;
}
.sheet.is-page {
  margin: 0 auto;
  padding-block: 72px 40px;
}
.sheet h1 {
  margin-bottom: 36px;
}
.sheet h2 {
  margin: 32px 0 8px;
  font: var(--font-lead);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
}
.sheet p {
  margin: 0;
  color: var(--ink-2);
}
.swap {
  max-width: 760px;
  margin: 56px auto 0;
  background: var(--white);
}
.swap dl {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 24px 28px 8px;
}
.swap dl div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.swap dt {
  color: var(--grey);
  font-size: 13px;
}
.swap dd {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.swap .is-old dd {
  color: var(--grey);
  text-decoration: line-through;
}
.swap .is-new dd {
  box-shadow: inset 3px 0 0 var(--end);
}
.swap > p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 28px 22px;
  color: var(--grey);
  font-size: 13.5px;
}
.weeks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.weeks li {
  padding: 16px 24px 0 0;
  border-top: 3px solid var(--k);
}
.weeks .when {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
}
.weeks b {
  display: block;
  margin-bottom: 4px;
  font-weight: var(--weight-medium);
}
.weeks p {
  margin: 0;
  color: var(--grey);
  font-size: 14px;
}
@media (max-width: 980px) {
  .stage-body {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .stage .board {
    height: 340px;
  }
  .seen {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .questions {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .weeks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }
}
@media (max-width: 560px) {
  .points,
  .weeks {
    grid-template-columns: minmax(0, 1fr);
  }
  .swap dl div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}
.seen .surface.wa .btns {
  flex-wrap: wrap;
}
.seen .surface.wa .btns b {
  white-space: nowrap;
}

/* The home page as blocks: one giant line each, one action, the product drawn as objects, all in the app's own tokens:
   Plex at 700 for the big lines, indigo for every action, the app's grounds and corners, so the app is no surprise. */
:root {
  --ink-fixed: #18181c;
  --paper: #ffffff;
  --paper-sunken: #f4f4f6;
  --paper-line: #e4e4e7;
  --paper-muted: #52525c;
  --paper-soft: #6b6b75;
  --paper-faint: #8f8e99;
  --screen-wa: #efe7dd;
  --bubble-mine: #d9fdd3;
  --bubble-link: #027eb5;
  --bubble-meta: #667781;
  --tag-mint: #d9fdd3;
  --tag-mint-ink: #1a7a37;
  --tag-rose: #ffd6e8;
  --tag-rose-ink: #a3195b;
  --radius-pill: 999px;
  --radius-control: 10px;
  --block-on-action: #dcdcfc;
  --block-ink-well: #2c2c32;
}

/* The page's frame gives way to the blocks: no gutter, no column. */
.is-blocks main.gutter {
  padding: 0;
}
.is-blocks .wrap {
  max-width: none;
}

.block {
  padding: 112px max(20px, env(safe-area-inset-left, 0px)) 112px max(20px, env(safe-area-inset-right, 0px));
  color: var(--text);
}
.block-in {
  max-width: 1300px;
  margin: 0 auto;
}
.block h1,
.block h2 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-wrap: balance;
}
.block h2 {
  font-size: clamp(44px, 5.8vw, 84px);
}
.block-lede {
  margin: 0;
  max-width: 26em;
  font-size: 20px;
  line-height: 1.45;
}
.block-aside {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* The offer of another edition: one ink line over the hero, answered once. */
.offer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  padding: 12px max(20px, env(safe-area-inset-left, 0px)) 12px max(20px, env(safe-area-inset-right, 0px));
  background: var(--ink-fixed);
  color: #ffffff;
  font-size: 15px;
}
.offer p {
  margin: 0;
}
.offer-answers {
  display: inline-flex;
  gap: 8px;
}
.offer-answers form {
  display: contents;
}
.offer-yes,
.offer-no {
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
}
.offer-yes {
  background: #ffffff;
  color: var(--ink-fixed);
}
.offer-no {
  border-color: #5c5c66;
  background: none;
  color: #ffffff;
  font-weight: 500;
}
/* The claim: the business's name, then in. */
.claim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  max-width: 640px;
}
.claim-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 8px 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
}
.claim-field:focus-within {
  box-shadow: 0 0 0 3px rgb(167 240 186 / 60%);
}
.claim-label {
  color: var(--paper-soft);
  font-size: 16px;
  white-space: nowrap;
}
.claim-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--ink-fixed);
  font: 500 20px/1 var(--sans);
}
.claim-input::placeholder {
  color: var(--paper-faint);
}
.claim-go {
  height: 64px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--action);
  color: var(--on-action);
  font: 600 18px/1 var(--sans);
  cursor: pointer;
}
.claim-go:hover {
  background: var(--action-hover);
}

/* Hero: the app's lavender, the thread on a tilted phone with a sticker and a text beside it. */
.block-hero {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: calc(100svh - var(--frame-top-height));
  padding-top: 24px;
  padding-bottom: 48px;
  background: var(--action-soft);
}
.block-hero .block-in {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 48px;
  align-items: center;
}
.hero-words {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.block-hero h1 {
  font-size: clamp(56px, 8.6vw, 124px);
  line-height: 0.92;
}
.block-hero h1 mark {
  padding: 0 0.08em 0.04em;
  border-radius: 0.08em;
  background: var(--tag-mint);
  color: var(--ink-fixed);
}
.block-hero .block-lede {
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1.4;
}
.hero-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
}
.hero-stage {
  position: relative;
  width: 560px;
  height: 760px;
}
.hero-stage .phone {
  --phone-w: 360px;
  --phone-shadow: 0 34px 70px rgb(0 0 0 / 35%);
  position: absolute;
  left: 100px;
  top: 8px;
  rotate: 3deg;
}
.hero-stage .sticker {
  position: absolute;
  left: 24px;
  top: 470px;
  rotate: -7deg;
}
.hero-stage .notice {
  position: absolute;
  left: 288px;
  top: 540px;
  width: 272px;
  rotate: -4deg;
  font-size: 14px;
}

/* A phone to the iPhone 14 Pro's proportions (devices.css, MIT): a titanium band, the black bezel, the island, the
   antenna lines and the keys, every measure a fraction of --phone-w. Fixed colours throughout: it is a picture. */
.phone {
  --u: calc(var(--phone-w) / 428);
  --band: #5e5c61;
  --band-edge: #3a393d;
  --band-light: #c9c8cc;
  --phone-shadow: 0 0 #0000;
  position: relative;
  box-sizing: border-box;
  width: var(--phone-w);
  aspect-ratio: 428 / 868;
  padding: calc(19 * var(--u));
  border: 1px solid var(--band-edge);
  border-radius: calc(68 * var(--u));
  background: #010101;
  box-shadow:
    var(--phone-shadow),
    inset 0 0 calc(4 * var(--u)) calc(2 * var(--u)) var(--band-light),
    inset 0 0 0 calc(6 * var(--u)) var(--band);
}
.phone::before {
  --mark: linear-gradient(rgb(0 0 0 / 25%), rgb(0 0 0 / 25%));
  --mark-size: calc(7 * var(--u)) calc(7 * var(--u));
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    var(--mark) 0 calc(85 * var(--u)) / var(--mark-size) no-repeat,
    var(--mark) 100% calc(85 * var(--u)) / var(--mark-size) no-repeat,
    var(--mark) 0 calc(100% - 85 * var(--u)) / var(--mark-size) no-repeat,
    var(--mark) 100% calc(100% - 85 * var(--u)) / var(--mark-size) no-repeat,
    var(--mark) calc(100% - 86 * var(--u)) 0 / var(--mark-size) no-repeat,
    var(--mark) calc(86 * var(--u)) 100% / var(--mark-size) no-repeat;
  pointer-events: none;
}
.phone::after,
.phone-keys,
.phone-keys::before,
.phone-keys::after {
  content: "";
  position: absolute;
  width: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--band-edge);
}
.phone-keys {
  left: calc(-3 * var(--u));
  top: calc(115 * var(--u));
  height: calc(32 * var(--u));
}
.phone-keys::before,
.phone-keys::after {
  left: 0;
  height: calc(62 * var(--u));
}
.phone-keys::before {
  top: calc(60 * var(--u));
}
.phone-keys::after {
  top: calc(140 * var(--u));
}
.phone::after {
  right: calc(-3 * var(--u));
  top: calc(200 * var(--u));
  height: calc(100 * var(--u));
}
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: calc(49 * var(--u));
  background: var(--screen-wa);
  color: #111b21;
  font-size: calc(17 * var(--u));
  line-height: 1.3;
}
.phone-island {
  position: absolute;
  left: 50%;
  top: 0.65em;
  z-index: 2;
  width: 7.4em;
  height: 2.18em;
  translate: -50% 0;
  border-radius: var(--radius-pill);
  background: #000000;
}
.phone-island i {
  position: absolute;
  right: 0.5em;
  top: 50%;
  width: 0.7em;
  height: 0.7em;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1c2446, #06070e 65%);
}
.phone-status {
  display: grid;
  flex: none;
  grid-template-columns: 1fr 7.4em 1fr;
  height: 3.47em;
}
.phone-clock,
.phone-status-right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-clock {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.phone-status-right {
  gap: 0.3em;
}
.phone-cellular {
  width: 1em;
  height: 0.65em;
}
.phone-wifi {
  width: 0.95em;
  height: 0.65em;
}
.phone-battery {
  width: 1.6em;
  height: 0.77em;
}
.phone-home {
  position: absolute;
  left: 50%;
  bottom: 0.47em;
  z-index: 2;
  width: 8.2em;
  height: 0.3em;
  translate: -50% 0;
  border-radius: var(--radius-pill);
  background: #000000;
}

/* WhatsApp on iOS: the bar with the thread's name, the doodled wallpaper, bubbles, replies, the message field. */
.phone-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5em;
  height: 2.6em;
  padding: 0 0.8em 0 0.4em;
  border-bottom: 1px solid rgb(60 60 67 / 29%);
  background: #f6f6f6;
}
.phone-back {
  display: inline-flex;
  align-items: center;
  color: #007aff;
  font-size: 0.95em;
}
.phone-back .icon {
  width: 1em;
  height: 1em;
  stroke-width: 2.5;
}
.phone-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--brand-orange);
  color: #ffffff;
  font-size: 0.95em;
  font-weight: 600;
}
.phone-avatar::first-letter {
  font-size: 0.8em;
}
.phone-who {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
.phone-who b {
  font-size: 0.95em;
  font-weight: 600;
}
.phone-who span {
  color: #8e8e93;
  font-size: 0.72em;
}
.phone-calls {
  display: inline-flex;
  gap: 0.9em;
  margin-left: auto;
  color: #007aff;
}
.phone-calls .icon {
  width: 1.35em;
  height: 1.35em;
}
.phone-thread {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.6em 0.7em;
}
.phone-thread::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/chat-doodles-39697f05.svg") 0 0 / 24em;
  opacity: 0.06;
  filter: invert(1);
  pointer-events: none;
}
.phone-day {
  align-self: center;
  padding: 0.25em 0.6em;
  border-radius: 0.45em;
  background: #ffffff;
  color: #54656f;
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 13%);
  font-size: 0.72em;
  font-weight: 500;
}
.bubble-group {
  display: grid;
  gap: 0.25em;
  max-width: 88%;
}
.bubble {
  position: relative;
  max-width: 88%;
  padding: 0.45em 0.6em 0.4em;
  border-radius: 0.9em;
  border-top-left-radius: 0.2em;
  background: #ffffff;
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 13%);
}
.bubble-group .bubble {
  max-width: none;
}
.bubble.is-mine {
  align-self: flex-end;
  max-width: 75%;
  border-radius: 0.9em;
  border-top-right-radius: 0.2em;
  background: var(--bubble-mine);
}
.bubble-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.1em;
  color: var(--bubble-meta);
  font-size: 0.65em;
  line-height: 1;
}
.bubble-ticks {
  width: 1.4em;
  height: 0.9em;
  color: #53bdeb;
}
.bubble-replies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25em;
}
.bubble-replies span {
  display: grid;
  place-items: center;
  height: 2.3em;
  border-radius: 0.9em;
  background: #ffffff;
  color: var(--bubble-link);
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 13%);
  font-size: 0.88em;
  font-weight: 500;
}
.bubble.is-file {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.6em;
}
.bubble-file-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 0.6em;
  background: #fdecea;
  color: #c5221f;
  font-size: 0.6em;
  font-weight: 700;
}
.bubble.is-file b {
  display: block;
  font-size: 0.88em;
  font-weight: 600;
}
.bubble.is-file span span {
  display: block;
  color: var(--bubble-meta);
  font-size: 0.7em;
}
.phone-compose {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 0.7em 2.2em;
  border-top: 1px solid rgb(60 60 67 / 20%);
  background: #f6f6f6;
  color: #007aff;
}
.phone-compose > .icon {
  flex: none;
  width: 1.4em;
  height: 1.4em;
}
.phone-field {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  height: 2.1em;
  padding: 0 0.3em 0 0.7em;
  border: 1px solid rgb(60 60 67 / 25%);
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #8e8e93;
  font-size: 0.95em;
}
.phone-field .icon {
  width: 1.4em;
  height: 1.4em;
}

/* A lock screen, graphite wallpaper, its notifications pulled down under the time. */
.phone-screen.is-lock {
  align-items: center;
  background: linear-gradient(180deg, #2d3141 0%, #15172200 60%), linear-gradient(180deg, #1c1e2b, #0a0b12);
  color: #ffffff;
}
.phone-screen.is-lock .phone-home {
  background: #ffffff;
}
.lock-mark {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.4em;
}
.lock-date {
  margin-top: 0.5em;
  font-size: 1.3em;
  font-weight: 500;
}
.lock-time {
  font-size: 5.4em;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}
.lock-list {
  display: grid;
  gap: 0.45em;
  box-sizing: border-box;
  width: 100%;
  margin-top: 1.6em;
  padding: 0 0.55em;
}
.lock-tools {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.3em;
  display: flex;
  justify-content: space-between;
  padding: 0 2.7em;
}
.lock-tools span {
  display: grid;
  place-items: center;
  width: 2.95em;
  height: 2.95em;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
}
.lock-tools svg {
  width: 1.4em;
  height: 1.4em;
}

/* One text as iOS lists it: the app's mark, the sender and time on one line, the words under them. */
.notice {
  display: grid;
  grid-template-columns: 2.25em minmax(0, 1fr);
  gap: 0.6em;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 0.65em 0.8em;
  border-radius: 1.3em;
  background: rgb(255 255 255 / 16%);
  color: #ffffff;
  backdrop-filter: blur(20px);
}
.notice.is-older {
  background: rgb(255 255 255 / 10%);
}
.notice.is-card {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 18px 40px rgb(0 0 0 / 28%);
}
.notice-mark {
  display: grid;
  place-items: center;
  width: 2.25em;
  height: 2.25em;
  border-radius: 0.55em;
  background: linear-gradient(#67ff81, #1dc233);
  color: #ffffff;
}
.notice.is-older .notice-mark {
  background: #25d366;
}
.notice-mark .icon {
  width: 1.3em;
  height: 1.3em;
}
.notice-body {
  display: grid;
  gap: 0.1em;
  font-size: 0.88em;
  line-height: 1.3;
}
.notice-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em;
}
.notice-head b {
  font-weight: 600;
}
.notice-head time {
  flex: none;
  opacity: 0.6;
  font-size: 0.86em;
}

/* A sticker: the app's mint tag, tilted. Three on the page, never more. */
.sticker {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--tag-mint);
  color: var(--tag-mint-ink);
  box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
  font: 600 18px/1 var(--sans);
}

/* Say it in a sentence: what you wrote, marked by phrase; what the agent drafted, in the same colours. */
.block-sentence {
  background: var(--app-bg);
}
.block-sentence .block-in {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.block-words {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.block-sentence .block-aside {
  color: var(--text-muted);
}
.steps-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: 28px 30px 30px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink-fixed);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}
.steps-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--paper-soft);
  font-size: 13px;
  font-weight: 500;
}
.steps-wrote {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.steps-wrote mark {
  padding: 2px 8px;
  border-radius: 8px;
  color: var(--ink-fixed);
  box-decoration-break: clone;
}
.steps-wrote mark.is-remind {
  background: var(--tag-mint);
}
.steps-wrote mark.is-before {
  background: var(--paper-line);
}
.steps-wrote mark.is-report {
  background: var(--tag-rose);
}
.steps-drafted {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper-soft);
  font-size: 13px;
  font-weight: 500;
}
.steps-drafted i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-purple);
}
.steps-drafted i .icon {
  width: 14px;
  height: 14px;
  color: #ffffff;
  transform: rotate(90deg);
}
.steps-drafted hr {
  flex: 1;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--paper-line);
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
}
.steps li + li {
  border-top: 1px solid #efeff2;
}
.step-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--paper-sunken);
  color: var(--ink-fixed);
}
.step-mark .icon {
  width: 18px;
  height: 18px;
}
.step-mark.is-schedule {
  background: var(--ink-fixed);
  color: #ffffff;
}
.step-mark.is-whatsapp {
  background: var(--brand-green);
  color: #ffffff;
}
.step-mark.is-sms {
  background: var(--brand-orange);
}
.step-mark.is-ask {
  background: var(--brand-blue);
  color: #ffffff;
}
.step-mark.is-report {
  background: var(--brand-magenta);
  color: #ffffff;
}
.step-words {
  display: grid;
  line-height: 1.3;
}
.step-words b {
  font-size: 16px;
  font-weight: 600;
}
.step-words span {
  color: var(--paper-muted);
  font-size: 14px;
}
.step-tag {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunken);
  color: var(--paper-muted);
  font-size: 12px;
  font-weight: 500;
}
.step-tag.is-remind {
  background: var(--tag-mint);
  color: var(--tag-mint-ink);
}
.step-tag.is-before {
  background: var(--paper-line);
}
.step-tag.is-report {
  background: var(--tag-rose);
  color: var(--tag-rose-ink);
}
.steps-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--paper-line);
  color: var(--paper-muted);
  font-size: 14px;
}
.pill-ink {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-control);
  background: var(--action);
  color: var(--on-action);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.pill-ink:hover {
  background: var(--action-hover);
}

/* One message, every phone: the labels above, the devices rising out of the sunken block's bottom edge. */
.block-devices {
  padding-bottom: 0;
  overflow: hidden;
  background: var(--surface-sunken);
}
.block-devices .block-in {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.block-devices .block-lede {
  max-width: 30em;
}
.devices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.device {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.device-label {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--ink-fixed);
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
}
.device .phone {
  --phone-w: 300px;
  margin-bottom: calc(392px - 300px * 868 / 428);
}
.device .basic {
  --basic-w: 206px;
  margin-bottom: calc(392px - 206px * 1190 / 492);
}
.device-paper {
  display: flex;
  justify-content: center;
  align-items: start;
  box-sizing: border-box;
  width: 290px;
  height: 380px;
  padding-bottom: 60px;
}
.receipt {
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  width: 250px;
  padding: 26px 22px 34px;
  background: var(--paper);
  color: var(--ink-fixed);
  box-shadow: 0 24px 48px rgb(0 0 0 / 18%);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 10px),
    96% 100%,
    92% calc(100% - 10px),
    88% 100%,
    84% calc(100% - 10px),
    80% 100%,
    76% calc(100% - 10px),
    72% 100%,
    68% calc(100% - 10px),
    64% 100%,
    60% calc(100% - 10px),
    56% 100%,
    52% calc(100% - 10px),
    48% 100%,
    44% calc(100% - 10px),
    40% 100%,
    36% calc(100% - 10px),
    32% 100%,
    28% calc(100% - 10px),
    24% 100%,
    20% calc(100% - 10px),
    16% 100%,
    12% calc(100% - 10px),
    8% 100%,
    4% calc(100% - 10px),
    0 100%
  );
  font: 13px/1.5 var(--mono);
}
.receipt-shop {
  font: 600 17px/1.3 var(--sans);
  text-align: center;
}
.receipt-place {
  color: var(--paper-soft);
  font-size: 11px;
  text-align: center;
}
.receipt hr {
  margin: 6px 0;
  border: 0;
  border-top: 1px dashed #cfcfd5;
}
.receipt-row {
  display: flex;
  justify-content: space-between;
}
.receipt-row.is-soft {
  color: var(--paper-soft);
}
.receipt-row.is-total {
  font-size: 15px;
  font-weight: 600;
}
.receipt-via {
  color: var(--paper-soft);
  font-size: 11px;
  line-height: 1.4;
}
.receipt-bars {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 6px;
}
.receipt-bars i {
  height: 26px;
  background: var(--ink-fixed);
}
/* A basic phone to the Nokia 105's measurements: glass over the top half, the 3:4 screen, soft, navigation, call and
   end keys, then twelve. Positions are shares of the body, read off the phone. Fixed colours: it is a picture. */
.basic {
  position: relative;
  box-sizing: border-box;
  width: var(--basic-w);
  aspect-ratio: 492 / 1190;
  border-radius: calc(var(--basic-w) * 0.09);
  background: linear-gradient(180deg, #1d1d20, #121214);
  color: #ffffff;
  font-size: calc(var(--basic-w) * 0.062);
}
.basic-glass {
  position: absolute;
  inset: 2.5% 3.5% 47% 3.5%;
  border-radius: calc(var(--basic-w) * 0.06);
  background: linear-gradient(170deg, #1a1a1e, #08080a 45%);
}
.basic-ear {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 30%;
  height: 2.4%;
  translate: -50% 0;
  border-radius: var(--radius-pill);
  background: #3a3a3f;
}
.basic-screen {
  position: absolute;
  left: 50%;
  top: 19.5%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 63.5%;
  aspect-ratio: 3 / 4;
  padding: 0.3em 0.35em 0.25em;
  translate: -50% 0;
  overflow: hidden;
  background: #ffffff;
  color: #000000;
  font-size: 0.8em;
  line-height: 1.25;
}
.basic-screen p {
  flex: 1;
  margin: 0;
}
.basic-soft {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  font-weight: 600;
}
.basic-key {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.55em;
  border-radius: calc(var(--basic-w) * 0.04);
  background: #2b2b2f;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
  line-height: 1;
}
.basic-key.is-soft-left,
.basic-key.is-soft-right,
.basic-key.is-call,
.basic-key.is-end {
  width: 26%;
  height: 4.6%;
  justify-content: center;
}
.basic-key.is-soft-left,
.basic-key.is-call {
  left: 4%;
}
.basic-key.is-soft-right,
.basic-key.is-end {
  right: 4%;
}
.basic-key.is-soft-left,
.basic-key.is-soft-right {
  top: 56%;
}
.basic-key.is-soft-left::before,
.basic-key.is-soft-right::before {
  content: "";
  width: 40%;
  height: 2px;
  border-radius: 1px;
  background: #ffffff;
}
.basic-key.is-call,
.basic-key.is-end {
  top: 61.4%;
}
.basic-key.is-call svg,
.basic-key.is-end svg {
  width: 1.4em;
  height: 0.6em;
}
.basic-key.is-nav {
  left: 35.5%;
  top: 55.4%;
  width: 29%;
  height: 11.2%;
  border-radius: calc(var(--basic-w) * 0.06);
}
.basic-pad {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 68.4%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: calc(var(--basic-w) * 0.017) 3.4%;
  height: 21.3%;
}
.basic-pad .basic-key {
  position: static;
}
.basic-pad .basic-key.is-flipped {
  flex-direction: row-reverse;
}
.basic-pad b {
  font-size: 1em;
  font-weight: 500;
}
.basic-pad small {
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.basic-mic {
  position: absolute;
  left: 50%;
  top: 96%;
  width: 1.3%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: #3a3a3f;
}

/* You stay in charge: the ask, and the meter beneath it, on the page's ground. */
.block-charge {
  background: var(--app-bg);
}
.block-charge .block-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 64px;
  align-items: center;
}
.block-charge .block-lede {
  color: var(--text-muted);
}
.charge-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ask-card {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink-fixed);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}
.ask-head {
  display: flex;
  justify-content: space-between;
  color: var(--paper-soft);
  font-size: 13px;
}
.ask-question {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
}
.ask-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ask-choices span {
  padding: 14px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunken);
  font-weight: 500;
  text-align: center;
}
.ask-choices .is-yes {
  background: var(--ink-fixed);
  color: #ffffff;
  font-weight: 600;
}
.meter-card {
  display: grid;
  gap: 10px;
  padding: 20px 24px;
  border-radius: var(--radius-card);
  background: var(--ink-fixed);
  color: #ffffff;
}
.meter-head {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}
.meter-head span:last-child {
  font-family: var(--mono);
}
.meter-bar {
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--block-ink-well);
}
.meter-bar i {
  display: block;
  width: 70%;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand-green);
}

/* Proof: the number, and where it happened. This block keeps the page's own ground, so it follows the theme. */
.block-proof {
  padding-block: 120px;
  background: var(--surface-sunken);
  text-align: center;
}
.block-proof .block-in {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.proof-number {
  margin: 0;
  font-size: clamp(88px, 12.5vw, 180px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.proof-line {
  margin: 0;
  max-width: 24em;
  font-size: 26px;
}
.proof-link {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 500;
}

/* Pricing: two columns on the page's ground, the money the edition pays in first, Pro on the action's tint. */
.block-pricing {
  background: var(--app-bg);
}
.block-pricing .block-in {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.pricing-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}
.block-pricing .money-switch {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
}
.block-pricing .money-switch label {
  padding: 10px 18px;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.block-pricing .money-switch label:has(input:checked) {
  background: #ffffff;
  color: var(--ink-fixed);
}
.block-pricing .money-switch label:has(input:focus-visible) {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.money {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.money[hidden] {
  display: none;
}
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  padding: 40px;
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.plan.is-pro {
  background: var(--action-soft);
}
.plan h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.plan-amount {
  margin: 0;
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.plan-amount span {
  margin-left: 8px;
  font: 500 20px/1 var(--sans);
  letter-spacing: 0;
}
.plan-words {
  margin: 0;
  color: var(--text-muted);
  font-size: 18px;
}
.plan-go {
  display: inline-flex;
  align-self: start;
  align-items: center;
  height: 52px;
  margin-top: auto;
  padding: 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.plan.is-pro .plan-go {
  border-color: var(--action);
  background: var(--action);
  color: var(--on-action);
}
.pricing-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 17px;
}
.pricing-note a {
  color: var(--action);
}

/* The close: the action's indigo, the claim again. */
.block-close {
  padding-block: 128px;
  background: var(--action);
  color: #ffffff;
  text-align: center;
}
.block-close .block-in {
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
}
.block-close h2 {
  max-width: 10em;
  font-size: clamp(48px, 7.2vw, 104px);
  line-height: 0.92;
}
.block-close .claim {
  width: 640px;
  max-width: 100%;
}
.block-close .claim-go {
  background: var(--ink-fixed);
  color: #ffffff;
}
.block-close .block-aside {
  color: var(--block-on-action);
  font-size: 17px;
}

@media (max-width: 980px) {
  .block-hero .block-in,
  .block-sentence .block-in,
  .block-charge .block-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-stage {
    width: 100%;
    max-width: 560px;
    height: 700px;
    margin: 0 auto;
  }
  .hero-stage .phone {
    --phone-w: 320px;
    left: 50%;
    margin-left: -120px;
  }
  .hero-stage .sticker {
    left: 0;
    top: 430px;
  }
  .hero-stage .notice {
    left: auto;
    right: 0;
    top: 500px;
  }
  .block-devices {
    padding-bottom: 72px;
  }
  .devices {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 48px;
  }
  .device .phone,
  .device .basic {
    margin-bottom: 0;
  }
  .device-paper {
    height: auto;
    padding-bottom: 0;
  }
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .frame-top .frame-region {
    display: none;
  }
}

@media (max-width: 640px) {
  .block {
    padding-block: 72px;
  }
  .block-hero {
    padding-bottom: 56px;
  }
  .block-hero h1 {
    font-size: clamp(48px, 15.5vw, 64px);
  }
  .block-hero .block-lede {
    font-size: 18px;
  }
  .claim,
  .block-close .claim {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .claim-field,
  .claim-go {
    height: 56px;
  }
  .hero-stage {
    height: 620px;
  }
  .hero-stage .phone {
    --phone-w: 280px;
    margin-left: -130px;
    rotate: 2deg;
  }
  .hero-stage .sticker {
    top: 370px;
    font-size: 20px;
  }
  .hero-stage .notice {
    top: 412px;
    width: 232px;
    font-size: 13px;
  }
  .steps-card {
    padding: 20px;
  }
  .steps-wrote {
    font-size: 20px;
  }
  .steps li {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .step-tag {
    display: none;
  }
  .device .phone {
    --phone-w: 260px;
  }
  .device-paper {
    width: 260px;
  }
  .proof-line {
    font-size: 20px;
  }
  .plan {
    padding: 28px;
  }
  .plan-amount {
    font-size: 56px;
  }
}

/* The public pages' header and footer, shared by the site and the pages still drawn with the app's sheets. */
/* IBM Plex, app and site alike: Sans from Light for the site's display lines, Mono for codes. */
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-ebc0bad2.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-ext-06c1feaf.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-regular-9d5eaa4d.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-medium-655b69f8.woff2") format("woff2");
}

:root.is-public {
  --app-bg: light-dark(#ffffff, #131315);
  --bg: light-dark(#ffffff, #131315);
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}
:root.is-locked {
  overflow: hidden;
}
/* A jump to a section glides, in the browser's own hands, so the wheel still stops it. */
:root.is-public {
  scroll-behavior: smooth;
}
:root {
  --frame-top-height: 52px;
}
.frame-top,
.frame-foot {
  --frame-ground: var(--app-bg);
  --frame-ink: light-dark(#18181c, #f2f1ee);
  --frame-on-ink: light-dark(#ffffff, #161616);
  --frame-action: light-dark(#4b4ef0, #5a5df3);
  --frame-action-hover: light-dark(#3a3dd6, #4b4ef0);
  --frame-on-action: #ffffff;
  --frame-grey: light-dark(#52525c, #8f8e99);
  --frame-line: light-dark(#e4e4e7, #2c2c32);
  --frame-ease: cubic-bezier(0.19, 1, 0.22, 1);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  color: var(--frame-ink);
  font-family:
    "IBM Plex Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
.frame-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  max-width: 1300px;
  margin: 0 auto;
}

/* The bar: sticky on every page, as the app's shell: the word, the sections beside it, the action at the end. */
.frame-top {
  position: sticky;
  top: 0;
  z-index: 60;
  box-sizing: border-box;
  height: var(--frame-top-height);
  padding-block: 8px;
  border-bottom: 1px solid var(--frame-line);
  background: var(--frame-ground);
}
.frame-top .frame-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
}
.frame-word,
.frame-nav,
.frame-actions {
  transition:
    opacity 0.45s var(--frame-ease) 0.12s,
    transform 0.45s var(--frame-ease) 0.12s,
    visibility 0s;
}
.frame-word {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.frame-word .mark {
  width: 20px;
  height: 20px;
}
.frame-nav {
  display: flex;
  justify-self: start;
  gap: 24px;
  color: var(--frame-grey);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.frame-nav a {
  color: inherit;
  text-decoration: none;
}
.frame-nav a:hover,
.frame-nav a[aria-current="page"] {
  color: var(--frame-ink);
}
.frame-end {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 16px;
}
.frame-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.frame-login {
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.frame-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--frame-action);
  color: var(--frame-on-action);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.frame-cta:hover {
  background: var(--frame-action-hover);
}

/* Two strokes that turn into a cross. */
.frame-menu {
  position: relative;
  display: none;
  width: 36px;
  height: 36px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.frame-menu i {
  position: absolute;
  left: 9px;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s var(--frame-ease);
}
.frame-menu i:first-child {
  top: 14px;
}
.frame-menu i:last-child {
  top: 20.5px;
}
.frame-top.is-open .frame-menu i:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.frame-top.is-open .frame-menu i:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}
.frame-menu:focus-visible,
.frame-switch:focus-visible {
  outline: 2px solid var(--frame-ink);
  outline-offset: 2px;
}

/* The light/dark switch: a thumb carrying the sun slides over and turns into the moon. */
.frame-switch {
  position: relative;
  width: 36px;
  height: 22px;
  padding: 1px;
  border: 1px solid color-mix(in srgb, var(--frame-ink) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--frame-on-ink) 55%, transparent);
  color: color-mix(in srgb, var(--frame-ink) 60%, transparent);
  cursor: pointer;
}
/* The thumb stays small; the target around it is 44 by 44. */
.frame-switch::before {
  content: "";
  position: absolute;
  inset: -12px -5px;
}
.frame-switch span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--frame-on-ink);
  box-shadow: 0 0.5px 2px rgb(0 0 0 / 0.14);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.frame-switch .icon {
  width: 12px;
  height: 12px;
}
.frame-switch .is-moon,
.frame-switch[aria-checked="true"] .is-sun {
  display: none;
}
.frame-switch[aria-checked="true"] .is-moon {
  display: block;
}
.frame-switch[aria-checked="true"] span {
  transform: translateX(14px);
}

/* The menu: the whole page, its links large and right-aligned under the button, arriving one after another. */
.frame-sheet {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  padding: 72px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px));
  background: var(--frame-ground);
  color: var(--frame-ink);
}
.frame-sheet[hidden] {
  display: none;
}
.frame-sheet ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px 52px 0 0;
  list-style: none;
}
.frame-sheet a {
  display: block;
  color: inherit;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition:
    opacity 0.4s var(--frame-ease) calc(var(--i, 0) * 40ms),
    transform 0.4s var(--frame-ease) calc(var(--i, 0) * 40ms);
}
.frame-sheet a:hover {
  color: var(--frame-grey);
}
.frame-sheet a:focus-visible {
  outline: 2px solid var(--frame-ink);
  outline-offset: 4px;
  border-radius: 4px;
}
.frame-sheet .is-apart {
  margin-top: 16px;
}
@starting-style {
  .frame-sheet a {
    opacity: 0;
    transform: translateY(8px);
  }
}
.frame-top.is-open {
  background: transparent;
  backdrop-filter: none;
}
.frame-top.is-open .frame-word,
.frame-top.is-open .frame-nav,
.frame-top.is-open .frame-actions {
  opacity: 0;
  visibility: hidden;
}

@media (min-width: 981px) {
  .frame-top.is-open .frame-menu {
    display: block;
  }
}
@media (max-width: 980px) {
  .frame-nav,
  .frame-login {
    display: none;
  }
  .frame-top .frame-bar {
    grid-template-columns: 1fr auto;
  }
  .frame-menu {
    display: block;
  }
  .frame-sheet ul {
    padding-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root.is-public {
    scroll-behavior: auto;
  }
  .frame-word,
  .frame-nav,
  .frame-actions,
  .frame-sheet a {
    transform: none !important;
    transition: opacity 0.2s !important;
  }
}

/* The footer: the page's last block on the app's sunken ground, the name set edge to edge and running off the bottom. */
.frame-foot {
  --frame-ground: var(--surface-sunken);
  container-type: inline-size;
  overflow: hidden;
  padding-block: 88px 0;
  background: var(--frame-ground);
  color: var(--frame-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.frame-foot-in {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1300px;
  margin: 0 auto;
}
.frame-foot p {
  margin: 0;
}
.frame-foot a {
  color: inherit;
  text-decoration: none;
}
.frame-foot a:hover {
  color: var(--frame-action);
}
.frame-foot-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.frame-foot-about {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 22em;
}
.frame-foot-about p {
  color: var(--frame-grey);
  font-size: 15px;
  line-height: 1.5;
}
.frame-foot-word-small {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
}
.frame-foot-word-small .air-mark,
.frame-foot-word-small svg {
  width: 26px;
  height: 26px;
}
.frame-foot-where {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.frame-foot-where > span:first-child {
  color: var(--frame-grey);
  font-size: 13px;
}
.frame-foot-editions {
  display: inline-flex;
  align-self: start;
  padding: 4px;
  border-radius: 999px;
  background: var(--frame-line);
}
.frame-foot-editions form {
  display: contents;
}
.frame-foot-editions button {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--frame-ink);
  font: 500 13px/1.3 var(--sans);
  cursor: pointer;
}
.frame-foot-editions button[aria-current="true"] {
  background: var(--frame-action);
  color: var(--frame-on-action);
}
.frame-foot-list {
  display: grid;
  gap: 12px;
  align-content: start;
}
.frame-foot-list b {
  color: var(--frame-grey);
  font-size: 13px;
  font-weight: 500;
}
.frame-foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--frame-line);
  color: var(--frame-grey);
  font-size: 13px;
}
/* The name spans the footer's width exactly: "luftflow" in Plex Semibold at this tracking is 3.33em wide. */
.frame-foot-word {
  margin: 64px 0 -0.26em !important;
  color: var(--action-soft);
  font-size: calc(100cqw / 3.33);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.74;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
@media (max-width: 980px) {
  .frame-foot-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .frame-foot-about {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .frame-foot-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The edition switch: a pill naming where the visitor is, opening a short list of names, never flags. */
.frame-region {
  position: relative;
}
.frame-region summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--frame-line);
  border-radius: 999px;
  color: var(--frame-ink);
  font: 500 14px/1 var(--sans);
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.frame-region summary::-webkit-details-marker {
  display: none;
}
.frame-region summary .icon {
  width: 14px;
  height: 14px;
}
.frame-region-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  display: grid;
  gap: 2px;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(24 24 28 / 14%);
}
.frame-region-menu form {
  display: contents;
}
.frame-region-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: 500 14px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}
.frame-region-menu button:hover {
  background: var(--surface-sunken);
}
.frame-region-menu button[aria-current="true"] {
  background: var(--surface-sunken);
  color: var(--action);
}
/* The mark turning in a breeze, on the home page and over the sign-in pages. */
.air-mark {
  width: 72px;
  height: 72px;
  overflow: visible;
}
.air-mark g g {
  transform-origin: 16px 16px;
  transform-box: view-box;
}
.trail-near {
  transform: rotate(-16deg);
  opacity: 0.26;
}
.trail-far {
  transform: rotate(-32deg);
  opacity: 0.12;
}
.arms {
  animation: turn 7s ease-in-out infinite;
}
.trail-near {
  animation: trail-near 7s ease-in-out infinite;
}
.trail-far {
  animation: trail-far 7s ease-in-out infinite;
}
@keyframes turn {
  50% {
    transform: rotate(10deg);
  }
}
@keyframes trail-near {
  50% {
    transform: rotate(-4deg);
  }
}
@keyframes trail-far {
  50% {
    transform: rotate(-18deg);
  }
}