/* Just a Good Guy: landing, privacy, terms and 404. Tokens follow docs/internal/design.md. */
:root {
  color-scheme: light;
  --brand: #3346d3;
  --brand-strong: #2635a8;
  --brand-soft: #eceffe;
  --on-brand: #ffffff;
  --sun: #ffc53d;
  --ink: #151a2d;
  --ink-2: #4a5168;
  --ink-3: #6e7590;
  --line: #e2e5ef;
  --surface: #ffffff;
  --surface-2: #f6f7fb;
  --ok: #147a4b;
  --ok-soft: #e3f5ec;
  --warn: #9a5b00;
  --warn-soft: #fff2d6;
  --danger: #b3261e;
  --danger-soft: #fde7e6;
  --hero: #3346d3;
  --hero-ink: #ffffff;
  --hero-dim: #dfe3ff;
  --hero-deep: #2635a8;
  --slip: #ffffff;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-full: 999px;
  --sh-1: 0 1px 2px rgba(21, 26, 45, 0.06), 0 1px 1px rgba(21, 26, 45, 0.04);
  --sh-2: 0 8px 24px rgba(21, 26, 45, 0.1);
  --sh-3: 0 18px 40px rgba(16, 20, 60, 0.28);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Bricolage Grotesque', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --wrap: 1160px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --brand: #7c8bff;
    --brand-strong: #a3aeff;
    --brand-soft: #1d2350;
    --on-brand: #0e1222;
    --ink: #eceef6;
    --ink-2: #b3b8cc;
    --ink-3: #868ca3;
    --line: #2a2f45;
    --surface: #161a2b;
    --surface-2: #10131f;
    --ok: #4ade9a;
    --ok-soft: #12301f;
    --warn: #ffc46b;
    --warn-soft: #33260d;
    --danger: #ff8a80;
    --danger-soft: #3a1513;
    --hero: #1f2a8c;
    --hero-deep: #18206b;
    --hero-dim: #d2d8ff;
    --slip: #161a2b;
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 10px 30px rgba(0, 0, 0, 0.45);
    --sh-3: 0 18px 40px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --brand: #7c8bff;
  --brand-strong: #a3aeff;
  --brand-soft: #1d2350;
  --on-brand: #0e1222;
  --ink: #eceef6;
  --ink-2: #b3b8cc;
  --ink-3: #868ca3;
  --line: #2a2f45;
  --surface: #161a2b;
  --surface-2: #10131f;
  --ok: #4ade9a;
  --ok-soft: #12301f;
  --warn: #ffc46b;
  --warn-soft: #33260d;
  --danger: #ff8a80;
  --danger-soft: #3a1513;
  --hero: #1f2a8c;
  --hero-deep: #18206b;
  --hero-dim: #d2d8ff;
  --slip: #161a2b;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sh-3: 0 18px 40px rgba(0, 0, 0, 0.5);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
svg {
  flex-shrink: 0;
}
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
a {
  color: var(--brand);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--brand-strong);
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--surface);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 10px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}
.tnum {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--r-full);
  font: 700 16px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
}
.btn-primary:hover {
  background: var(--brand-strong);
  color: var(--on-brand);
}
.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-quiet:hover {
  border-color: var(--brand);
  color: var(--ink);
}
.btn-white {
  background: #ffffff;
  color: #2635a8;
  box-shadow: 0 6px 18px rgba(10, 14, 50, 0.25);
}
.btn-white:hover {
  background: #f1f3ff;
  color: #1c2790;
}
.btn-ghost-white {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-ghost-white:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.on-hero :focus-visible {
  outline-color: #ffffff;
}

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--hero) 94%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  color: #ffffff;
}
.site-head.is-plain {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.logo:hover {
  color: inherit;
}
.logo svg {
  width: 34px;
  height: 34px;
}
.site-head:not(.is-plain) .logo .mark-bg {
  fill: #ffffff;
}
.site-head:not(.is-plain) .logo .mark-bubble {
  fill: #3346d3;
}
.site-head:not(.is-plain) .logo .mark-face {
  stroke: #ffffff;
}
/* The wordmark: "JustAGoodGuy" with "Good" picked out, gold over the cobalt hero. */
.wordmark-text {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.wm-good {
  color: var(--brand);
}
.site-head:not(.is-plain) .wm-good {
  color: #ffc53d;
}
.head-nav {
  display: none;
  margin-left: auto;
  gap: 2px;
}
.head-nav a,
.menu-panel a.menu-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-full);
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.head-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}
.is-plain .head-nav a:hover {
  background: var(--surface-2);
}
.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.head-actions .btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}
.head-signin {
  display: none;
}
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--r-full);
  background: transparent;
  color: inherit;
  font: 700 15px/1 var(--font);
  cursor: pointer;
}
.is-plain .menu-btn {
  border-color: var(--line);
}
.menu-btn .i-close {
  display: none;
}
.menu-btn[aria-expanded='true'] .i-close {
  display: inline;
}
.menu-btn[aria-expanded='true'] .i-open {
  display: none;
}
.menu-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 0 16px;
}
.is-plain .menu-panel {
  border-top-color: var(--line);
}
.menu-panel[hidden] {
  display: none;
}
.menu-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.menu-panel a.menu-link {
  width: 100%;
  border-radius: var(--r);
  font-size: 17px;
}
.menu-panel a.menu-link:hover {
  background: rgba(255, 255, 255, 0.12);
}
.is-plain .menu-panel a.menu-link:hover {
  background: var(--surface-2);
}
.menu-panel .menu-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
@media (min-width: 900px) {
  .head-nav {
    display: flex;
  }
  .head-actions {
    margin-left: 8px;
  }
  .head-signin {
    display: inline-flex;
  }
  .menu-btn,
  .menu-panel {
    display: none !important;
  }
}

/* ---------------------------------------------------------------- footer */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 32px 0 40px;
  color: var(--ink-2);
  font-size: 15px;
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-foot .logo {
  color: var(--ink);
  font-size: 17px;
}
.site-foot .logo svg {
  width: 28px;
  height: 28px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot-links a,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--r);
  color: var(--ink-2);
  text-decoration: none;
  font: 600 15px/1 var(--font);
}
.foot-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.theme-toggle {
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  padding: 0 14px;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--brand);
}
.theme-toggle .ti {
  display: none;
}
:root:not([data-theme]) .theme-toggle .ti-system,
:root[data-theme='light'] .theme-toggle .ti-light,
:root[data-theme='dark'] .theme-toggle .ti-dark {
  display: inline-flex;
}
.foot-small {
  margin: 16px 0 0;
  font-size: 14px;
}

/* ---------------------------------------------------------------- simple pages (privacy, terms, 404) */
.page {
  padding: 40px 0 72px;
}
.page .wrap {
  max-width: 820px;
}
.page h1 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(36px, 8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.page .lede {
  margin: 0 0 28px;
  font-size: 19px;
  color: var(--ink-2);
}
.draft-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 32px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--warn-soft);
  color: var(--ink);
  font-weight: 600;
}
.draft-banner svg {
  color: var(--warn);
  margin-top: 2px;
}
.draft-banner strong {
  color: var(--warn);
}
.legal h2 {
  margin: 44px 0 10px;
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.legal h3 {
  margin: 28px 0 6px;
  font-size: 19px;
}
.legal p,
.legal li {
  max-width: 44em;
}
.legal ul {
  padding-left: 1.3em;
}
.legal li {
  margin: 4px 0;
}
.legal code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.legal .todo {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 700;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin: 0 0 20px;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.table-wrap th,
.table-wrap td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
}
.table-wrap th {
  background: var(--surface-2);
  font-size: 14px;
}
.table-wrap td {
  border-top: 1px solid var(--line);
  min-width: 140px;
}
.notfound {
  padding: 56px 0 88px;
}
.notfound .big {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(64px, 18vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--brand);
}
.notfound .links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Header turns plain once the hero has scrolled away. */
.site-head {
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
  border-bottom: 1px solid transparent;
}
.is-plain .btn-white {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: none;
}
.is-plain .btn-white:hover {
  background: var(--brand-strong);
  color: var(--on-brand);
}
.is-plain .btn-ghost-white {
  color: var(--ink);
  border-color: var(--line);
}
.is-plain .btn-ghost-white:hover {
  border-color: var(--brand);
  background: transparent;
  color: var(--ink);
}
.is-plain .logo .mark-bg {
  fill: #3346d3;
}
.is-plain .logo .mark-bubble {
  fill: #ffffff;
}
.is-plain .logo .mark-face {
  stroke: #3346d3;
}
@media (max-width: 479.98px) {
  .head-start {
    display: none !important;
  }
}

/* Real spaces for screen readers and voice control, zero width on screen ("JustAGoodGuy"). */
.wm-sp {
  font-size: 0;
}

/* ================================================================ home (index.html)
   Content first: big type, the product itself as the picture, hairlines
   instead of card grids. Motion lives in landing.js (anime.js) and only
   starts once the page has the .motion class (set in the page head unless
   the visitor asked for reduced motion). */
.home {
  --sec: 72px;
  font-size: 17px;
}
@media (min-width: 900px) {
  .home {
    --sec: 112px;
  }
}
.home h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.home h3 {
  margin: 0;
}
.home .lede {
  margin: 16px 0 0;
  max-width: 34ch;
  color: var(--ink-2);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.45;
}
.btn-lg {
  min-height: 54px;
  padding: 0 26px;
  font-size: 17px;
}
.btn-quiet:focus-visible,
.btn-primary:focus-visible {
  outline-offset: 3px;
}

/* ---------- the show: one big phone, a day told on it as you scroll
   Without motion: the headline, the phone (on its lock screen), the moments
   as a list and the call to action, one after another. With motion
   (landing.js): the stage pins for 7 screens of scrolling, the phone stays
   in the middle as the main event, and the words around it change. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.show {
  --head: 64px;
  --steps: 6;
  position: relative;
  /* nothing hangs out of the section: the phone never covers the footer (clip, not hidden, so the stage still pins) */
  overflow: clip;
}
.show-stage {
  display: grid;
  justify-items: center;
  gap: 36px;
  padding: 40px 16px 72px;
  text-align: center;
}
.show-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.show-title span {
  display: block;
}
.st-b {
  color: var(--brand);
}
.show-caps {
  display: grid;
  gap: 28px;
  max-width: 30ch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cap {
  display: grid;
}
.cap-line {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.cap-sub {
  margin: 14px 0 0;
  max-width: 30ch;
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
}
.end-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.end-sub {
  margin: 16px auto 0;
  max-width: 32ch;
  color: var(--ink-2);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.45;
}
.end-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.show-chapters {
  display: none;
}
.show-phone {
  --pw: min(330px, 78vw);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Holds the 3D scene's perspective, and floats (outside the 3D part: animating
   inside it makes Chrome miss taps on the phone's screen). */
.phone-bob {
  position: relative;
  perspective: 1700px;
  perspective-origin: 50% 45%;
}
.show-tag {
  margin: 16px 0 0;
  color: var(--ink-2);
  font-size: 13px;
}
.show-snaps {
  display: none;
}

/* Motion on: everything is placed around the phone, which stays in the middle. */
.motion .show {
  --steps: 5;
  height: calc((var(--steps) + 1) * 100svh);
  /* starts under the sticky header, so the stage never jumps when it pins */
  margin-top: calc(-1 * var(--head));
}
.motion .show-stage {
  position: sticky;
  top: 0;
  display: block;
  height: 100svh;
  padding: 0;
  text-align: left;
}
.motion .show {
  --pw: var(--pw-raw);
}
.motion .show-phone {
  position: absolute;
  left: 50%;
  top: var(--phone-top);
  translate: -50% calc(var(--fin, 0) * var(--fin-y, 0px));
}
/* On whole pixels: the phone's screen lands exactly on the page's pixels, so
   its text is as sharp as the page's (half-pixel positions blur it). */
@supports (width: round(1.5px, 1px)) {
  .motion .show {
    --pw: round(down, var(--pw-raw), 2px);
  }
  .motion .show-phone {
    left: round(down, calc(50% - var(--pw) / 2), 1px);
    top: round(var(--phone-top), 1px);
    translate: 0 round(calc(var(--fin, 0) * var(--fin-y, 0px)), 1px);
  }
}
/* The float (.phone-bob): up 9px and back over 5.2s on an ease-in-out curve, stepping whole
   pixels (so the screen stays sharp), run by the graphics chip. */
@keyframes phone-bob {
  0.0% { transform: translateY(0px); }
  8.3% { transform: translateY(-1px); }
  14.4% { transform: translateY(-2px); }
  18.6% { transform: translateY(-3px); }
  22.0% { transform: translateY(-4px); }
  25.0% { transform: translateY(-5px); }
  28.0% { transform: translateY(-6px); }
  31.4% { transform: translateY(-7px); }
  35.6% { transform: translateY(-8px); }
  41.7% { transform: translateY(-9px); }
  58.3% { transform: translateY(-8px); }
  64.4% { transform: translateY(-7px); }
  68.6% { transform: translateY(-6px); }
  72.0% { transform: translateY(-5px); }
  75.0% { transform: translateY(-4px); }
  78.0% { transform: translateY(-3px); }
  81.4% { transform: translateY(-2px); }
  85.6% { transform: translateY(-1px); }
  91.7% { transform: translateY(0px); }
  100% { transform: translateY(0px); }
}
.motion .phone-bob {
  animation: phone-bob 5.2s step-end infinite;
}
/* No will-change inside the phone: extra layers under its backface-hidden
   front break tapping in Chrome (taps land on the phone, not the button). */
/* The camera: during each moment it pushes in on what's happening on the
   screen and sweeps across it (landing.js), then pulls back. At rest it's
   untouched (transform none), so the screen stays pixel-sharp. */
.phone-cam {
  position: relative;
  transform-style: preserve-3d;
}
/* Things on the phone you can tap pulse gently while they're waiting for you. */
.ps .is-hint {
  cursor: pointer;
  animation: tap-hint 1.6s var(--ease) infinite;
}
.ps .ring-no.is-hint {
  animation: none;
}
.ps .ring-no.is-hint .ic {
  animation: tap-hint-light 1.6s var(--ease) infinite;
}
.ps-toast.is-hint {
  animation-name: tap-hint-light;
}
@keyframes tap-hint {
  0% { box-shadow: 0 0 0 0 rgba(51, 70, 211, 0.6); }
  75%, 100% { box-shadow: 0 0 0 0.7em rgba(51, 70, 211, 0); }
}
@keyframes tap-hint-light {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  75%, 100% { box-shadow: 0 0 0 0.7em rgba(255, 255, 255, 0); }
}
/* Drag the phone to turn it; it springs back. Vertical swipes still scroll.
   The cursor comes from classes landing.js sets from the phone's geometry
   (the browser's own hit test isn't reliable on the tilted 3D phone). */
.motion .show-stage {
  touch-action: pan-y pinch-zoom;
}
.motion .show.over-phone {
  cursor: grab;
}
.motion .show.over-tap {
  cursor: pointer;
}
.motion .show.is-turning {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.show-hint {
  display: none;
}
.motion .show-hint {
  display: inline;
}
/* While the phone is up close, the small print and the features list step back. */
.show.is-zoomed .show-tag,
.show.is-zoomed .show-chapters {
  opacity: 0 !important;
}
.motion .show-chapters {
  transition: opacity 300ms var(--ease);
}
.motion .show-tag {
  position: absolute;
  top: calc(var(--pw) * 2.05 + 14px);
  margin: 0;
  white-space: nowrap;  transition: opacity 300ms var(--ease);
}
.motion .show-caps,
.motion .show-end {
  position: absolute;
  max-width: none;
}
.motion .show-caps {
  display: grid;
}
.motion .cap,
.motion .show-end {
  opacity: 0;
}
.motion .cap {
  grid-area: 1 / 1;
  align-self: center;
}
.motion .end-sub {
  margin-left: 0;
}
.motion .end-ctas {
  justify-content: flex-start;
}
/* Each moment is a stop: the page always comes to rest on one, never between
   two (landing.js plays the whole move from one to the next). The footer is
   the last stop. */
html.motion:has(body.home) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}
.motion .home .site-foot {
  scroll-snap-align: end;
}
.motion .show-snaps {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.show-snaps i {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-snap-align: start;
  top: calc(var(--i) * 100svh);
}
.show-snaps i:nth-child(1) { top: 0; }
.show-snaps i:nth-child(2) { --i: 1; }
.show-snaps i:nth-child(3) { --i: 2; }
.show-snaps i:nth-child(4) { --i: 3; }
.show-snaps i:nth-child(5) { --i: 4; }
.show-snaps i:nth-child(6) { --i: 5; }

@media (min-width: 900px) {
  .motion .show {
    --pw-raw: min(440px, calc((100svh - var(--head) - 56px) / 2.05));
    --phone-top: calc(var(--head) + (100svh - var(--head) - var(--pw) * 2.05) / 2 - 8px);
    --side: calc((100vw - var(--pw)) / 2 - 72px);
    --edge: max(24px, calc((100vw - 1240px) / 2));
  }
  .motion .show-phone {
    --pw: inherit;
  }
  /* The headline flanks the phone: "Every customer" | phone | "gets an answer." */
  .motion .show-title {
    position: absolute;
    inset: var(--head) 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--pw) + 112px);
    font-size: clamp(44px, 4.6vw, 84px);
  }
  .motion .show-title span {
    flex: 0 0 min(var(--side), 9ch);
  }
  .motion .st-a {
    text-align: right;
  }
  .motion .show-caps,
  .motion .show-end {
    left: var(--edge);
    width: calc(50vw - var(--pw) / 2 - 84px - var(--edge));
    top: var(--head);
    bottom: 0;
  }
  .motion .show-end {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .motion .show-chapters {
    position: absolute;
    right: var(--edge);
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    translate: 0 -50%;
    opacity: 0;
  }
  .motion .show-chapters {
    gap: 4px;
  }
  /* Each moment's name jumps to it. */
  .show-chapters button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: color 200ms var(--ease);
  }
  .show-chapters button::before {
    content: '';
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: width 260ms var(--ease), background 260ms var(--ease);
  }
  .show-chapters button:hover,
  .show-chapters button.is-on {
    color: var(--ink);
  }
  .show-chapters button:hover::before {
    width: 32px;
  }
  .show-chapters button.is-on::before {
    width: 44px;
    background: var(--brand);
  }
  .show-chapters button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}

@media (max-width: 899px) {
  .motion .show {
    --cap-h: 9.8em;
    --pw-raw: min(80vw, calc((100svh - var(--head) - var(--cap-h) - 48px) / 2.05));
    --phone-top: calc(var(--head) + var(--cap-h) + 18px);
    --fin-y: 34svh;
  }
  /* the last stop: below the words, shrunk to fit (landing.js measures --fin-y and --fin-s) */
  .motion .show-phone {
    transform-origin: 50% 0;
    scale: calc(1 - var(--fin, 0) * (1 - var(--fin-s, 1)));
  }
  .motion .show-phone {
    --pw: inherit;
  }
  .motion .show-title {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(var(--head) + 14px);
    font-size: clamp(36px, 9.6vw, 50px);
  }
  .motion .show-caps,
  .motion .show-end {
    left: 16px;
    right: 16px;
    top: calc(var(--head) + 14px);
    height: var(--cap-h);
  }
  /* The words sit on a solid band at the top: when the phone comes up close
     it slides behind the band, so it can show any part of its screen. */
  .motion .show-stage::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: calc(var(--head) + var(--cap-h) + 14px);
    background: linear-gradient(var(--surface) calc(100% - 18px), color-mix(in srgb, var(--surface) 0%, transparent));
    pointer-events: none;
  }
  .motion .show-title,
  .motion .show-caps,
  .motion .show-end {
    z-index: 3;
  }
  /* The frame's sides are only drawn while the phone is turned (fewer layers
     for a phone's graphics chip to keep at close-up sizes). */
  .motion .phone3d:not(.show-sides) :is(.p3-edge, .p3-btn) {
    visibility: hidden;
  }
  .motion .cap {
    align-self: start;
  }
  .motion .cap-line {
    font-size: clamp(27px, 7.6vw, 34px);
  }
  .motion .cap-sub {
    margin-top: 8px;
    font-size: 16px;
  }
  .motion .end-title {
    font-size: clamp(36px, 10vw, 48px);
  }
  .motion .end-sub {
    font-size: 16px;
  }
}

/* ---------- the phone, in 3D: titanium frame, side buttons, glass */
.phone-tilt,
.phone-shake {
  transform-style: preserve-3d;
}
.phone3d {
  --rad: calc(var(--pw) * 0.16);
  /* 10 frame layers this far apart: about 6% of the width thick */
  --gap: calc(var(--pw) * 0.006);
  --back: 11;
  position: relative;
  width: var(--pw);
  height: calc(var(--pw) * 2.05);
  transform-style: preserve-3d;
}
/* The frame: rings (hollow, so they cost little to draw), lighter at the
   long sides and toward the front and back edges, like brushed metal. */
.p3-edge {
  position: absolute;
  inset: 0;
  border-radius: var(--rad);
}
.p3-edge {
  border: calc(var(--pw) * 0.05) solid hsl(230 14% var(--l));
  border-left-color: hsl(230 16% calc(var(--l) + 22%));
  border-right-color: hsl(230 16% calc(var(--l) + 22%));
  transform: translateZ(calc(var(--z) * var(--gap) * -1));
}
/* The back and its camera bump are only drawn while the phone is turned round
   (landing.js adds .show-back): fewer layers for the graphics chip to keep. */
.motion .phone3d:not(.show-back) :is(.p3-back, .p3-bump) {
  visibility: hidden;
}
.p3-btn {
  position: absolute;
  width: calc(var(--pw) * 0.014);
  border-radius: 2px;
  background: linear-gradient(90deg, #6b7190, #2a2e44);
  transform: translateZ(calc(var(--back) * var(--gap) * -0.5));
}
.p3-btn-action { left: calc(var(--pw) * -0.011); top: 17%; height: 4.6%; }
.p3-btn-up { left: calc(var(--pw) * -0.011); top: 24.5%; height: 8.5%; }
.p3-btn-down { left: calc(var(--pw) * -0.011); top: 35%; height: 8.5%; }
.p3-btn-power { right: calc(var(--pw) * -0.011); top: 27%; height: 13%; }
.p3-back {
  position: absolute;
  inset: 0;
  border-radius: var(--rad);
  background: linear-gradient(150deg, #474d68 0%, #1f2233 52%, #2c3046 100%);
  box-shadow: inset 0 0 0 calc(var(--pw) * 0.006) #7d839c;
  transform: translateZ(calc(var(--back) * var(--gap) * -1)) rotateY(180deg);
  backface-visibility: hidden;
}
.p3-back-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
}
/* The camera bump, in 3D. The phone's back faces away (it's turned 180deg), so
   "top left seen from behind" is top right here, and its faces point the other
   way: sides are stacked layers like the frame, the top and the lens glass
   are turned round to face out of the back. */
.p3-bump {
  position: absolute;
  top: 3%;
  right: 6%;
  width: 40%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
}
.pb-side,
.pb-top {
  position: absolute;
  inset: 0;
  border-radius: 24%;
}
.pb-side {
  background: linear-gradient(90deg, #8b91aa, #3a3e54 18%, #23263a 50%, #3a3e54 82%, #8b91aa);
  transform: translateZ(calc((var(--back) + var(--z)) * var(--gap) * -1));
}
.pb-top {
  background: linear-gradient(150deg, #5a6080 0%, #2e3248 46%, #24273a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 0 3px rgba(0, 0, 0, 0.18);
  transform: translateZ(calc((var(--back) + 4.5) * var(--gap) * -1)) rotateY(180deg);
  backface-visibility: hidden;
}
.pb-lens {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
}
.pb-lens-1 { right: 5%; top: 5%; }
.pb-lens-2 { right: 5%; bottom: 5%; }
.pb-lens-3 { left: 5%; top: 29%; }
.pb-lens i,
.pb-lens b {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.pb-lens i {
  background: linear-gradient(90deg, #a4aac2, #4c5168 30%, #2b2f42 70%, #a4aac2);
  transform: translateZ(calc((var(--back) + var(--z)) * var(--gap) * -1));
}
.pb-lens b {
  background:
    radial-gradient(circle at 36% 32%, rgba(190, 210, 255, 0.55) 0 7%, transparent 9%),
    radial-gradient(circle at 50% 50%, #26305a 0 22%, #0b0d18 34%, #000 58%, #1c1f2c 60%, #0d0f18 72%, #474c63 74%, #2a2e40 86%, #8c92aa 100%);
  transform: translateZ(calc((var(--back) + 6.5) * var(--gap) * -1)) rotateY(180deg);
  backface-visibility: hidden;
}
.pb-flash {
  position: absolute;
  left: 13%;
  bottom: 11%;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fff6dc, #e9d8a8 60%, #b9a77a);
  transform: translateZ(calc((var(--back) + 4.7) * var(--gap) * -1)) rotateY(180deg);
  backface-visibility: hidden;
}
.p3-front {
  position: absolute;
  inset: 0;
  padding: calc(var(--pw) * 0.03);
  border-radius: var(--rad);
  background: #040508;
  box-shadow: inset 0 0 0 calc(var(--pw) * 0.007) #8a90a8, inset 0 0 0 calc(var(--pw) * 0.013) #22263a, 0 70px 120px -50px rgba(10, 12, 30, 0.55);
  backface-visibility: hidden;
}
.p3-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--rad) - var(--pw) * 0.028);
  background: #000;
  font-size: calc(var(--pw) * 0.042);
  line-height: 1.35;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
/* Whole pixels inside the phone too (see .show-phone above). */
@supports (width: round(1.5px, 1px)) {
  .phone3d {
    height: round(calc(var(--pw) * 2.05), 1px);
  }
  .p3-front {
    padding: round(calc(var(--pw) * 0.03), 1px);
  }
  .p3-screen {
    font-size: round(calc(var(--pw) * 0.042), 1px);
  }
}
.p3-island {
  position: absolute;
  top: 0.65em;
  left: 50%;
  z-index: 9;
  width: 31%;
  height: 1.85em;
  translate: -50% 0;
  border-radius: 99px;
  background: #000;
}
/* A faint reflection across the glass. */
.p3-glare {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 24%, rgba(255, 255, 255, 0) 42%);
}
/* The screen before it wakes up. */
.p3-off {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.motion .p3-off {
  opacity: 1;
}
.ps-home {
  position: absolute;
  bottom: 0.5em;
  left: 50%;
  z-index: 6;
  width: 36%;
  height: 0.3em;
  translate: -50% 0;
  border-radius: 99px;
  background: rgba(120, 124, 140, 0.75);
}
.p3-floor {
  position: absolute;
  top: calc(var(--pw) * 2.05 - 14px);
  left: 50%;
  width: calc(var(--pw) * 0.9);
  height: 30px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(17, 21, 42, 0.3), transparent);
  filter: blur(6px);
}

/* The lock screen, with the morning's notifications */
.ps.ps-lock {
  align-items: center;
  text-align: center;
  background: radial-gradient(130% 75% at 25% 5%, #6070ff 0%, #2c33a6 38%, #11143a 78%);
  color: #fff;
}
.lk-date {
  margin-top: 1.2em !important;
  font-weight: 600;
  opacity: 0.92;
}
.lk-time {
  font-family: var(--display);
  font-weight: 700;
  font-size: 5em;
  line-height: 1;
  letter-spacing: -0.03em;
}
.lk-notes {
  display: grid;
  gap: 0.5em;
  width: 100%;
  margin-top: 1.4em;
  padding: 0 0.7em;
  text-align: left;
}
.lk-note {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 0.65em;
  align-items: start;
  padding: 0.7em 0.8em;
  border-radius: 1.2em;
  background: rgba(255, 255, 255, 0.17);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 0.8em;
  line-height: 1.35;
}
.lk-note .ps-mark {
  width: 2.2em;
  height: 2.2em;
}
.lk-note b {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}
.lk-note small {
  font-weight: 500;
  opacity: 0.75;
}
.motion .lk-note {
  opacity: 0;
}
.lk-foot {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: 0 2.2em 2.4em;
}
.lk-foot span {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

/* ---------- screens inside the phone (sizes in em: they scale with the phone) */
.ps {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  color: var(--ink);
  opacity: 0;
}
.ps.is-on {
  opacity: 1;
}
.ps .ic {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ps p,
.ps ol,
.ps ul,
.ps dl {
  margin: 0;
}
.ps-status {
  display: flex;
  align-items: center;
  height: 2.9em;
  padding: 0.2em 1.7em 0 2.1em;
  font-size: 0.92em;
  flex: none;
}
.ps-sys {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-left: auto;
}
.ps-sys .ic {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 2.4;
}
.ic-f {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.ic-b {
  width: 1.75em;
  height: 0.85em;
  fill: currentColor;
}
.ps-status-light {
  color: #fff;
}
.ps-topbar {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.35em 0.9em 0.55em;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ps-mark {
  width: 1.9em;
  height: 1.9em;
  flex: none;
}
.ps-topbar b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.08em;
  letter-spacing: -0.01em;
}
.ps-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-left: auto;
  padding: 0.35em 0.75em;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-weight: 600;
  font-size: 0.82em;
}
.ps-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.9em 0.9em 0;
}
.ps-greet {
  color: var(--ink-2);
  font-size: 0.86em;
}
.ps-date {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5em;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.ps-sub {
  margin-top: 0.15em !important;
  color: var(--ink-2);
  font-size: 0.86em;
}
.ps-actions {
  display: flex;
  gap: 0.45em;
  margin: 0.75em 0 0.95em;
}
.ps-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-height: 2.7em;
  padding: 0 0.3em;
  border: 1px solid var(--line);
  border-radius: 0.65em;
  background: var(--surface);
  font-weight: 600;
  font-size: 0.78em;
  white-space: nowrap;
}
.ps-btn-primary {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}
.ps-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  margin: 0.1em 0 0.5em;
  font-size: 0.9em;
}
.ps-h u {
  color: var(--brand);
  font-size: 0.9em;
  font-weight: 600;
}
.ps-list,
.ps-convs {
  list-style: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.8em;
  background: var(--surface);
  overflow: hidden;
}
.ps-list {
  margin-bottom: 1em !important;
}
.ps-list li {
  display: grid;
  grid-template-columns: 4.9em 0.22em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 0.75em;
  color: var(--ink-2);
  font-size: 0.8em;
}
.ps-list li + li {
  border-top: 1px solid var(--line);
}
.ps-time b,
.ps-who b {
  display: block;
  color: var(--ink);
  font-size: 1.1em;
}
.ps-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ps-rail {
  align-self: stretch;
  border-radius: 9px;
  background: var(--c);
}
.ps-who {
  min-width: 0;
}
.ps-who small {
  display: block;
  color: var(--brand-strong);
  font-weight: 700;
  font-size: 0.92em;
}
.ps-list li.is-next {
  background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface));
}
.ps-call {
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border: 1px solid var(--line);
  border-radius: 0.6em;
  background: var(--surface);
  color: var(--ink);
}
.ps-newrow {
  overflow: hidden;
}
.motion .ps-newrow {
  height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  border-top-width: 0 !important;
}
.ps-week {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 0.8em;
  background: var(--surface);
}
.ps-week div {
  display: flex;
  flex-direction: column-reverse;
  padding: 0.6em 0.75em;
}
.ps-week div + div {
  border-left: 1px solid var(--line);
}
.ps-week dt {
  color: var(--ink-2);
  font-size: 0.74em;
}
.ps-week dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3em;
}
.ps-toast {
  position: absolute;
  left: 0.75em;
  right: 0.75em;
  bottom: 5.6em;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1em 0.7em;
  padding: 0.75em 0.9em;
  border-radius: 0.8em;
  background: #11152a;
  color: #f4f5fb;
  font-size: 0.8em;
  box-shadow: 0 1em 2em -0.6em rgba(0, 0, 0, 0.45);
}
.ps-toast span {
  color: rgba(244, 245, 251, 0.82);
}
.ps-toast u {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 700;
}
.motion .ps-toast {
  opacity: 0;
}
.ps-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.45em 0.3em 1.5em;
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}
.ps-tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  color: var(--ink-2);
  font-size: 0.68em;
  font-weight: 600;
}
.ps-tabs .ic {
  width: 1.7em;
  height: 1.7em;
  padding: 0.12em 0.9em;
  box-sizing: content-box;
  border-radius: 99px;
}
.ps-tabs .on {
  color: var(--brand);
}
.ps-tabs .on .ic {
  background: var(--brand-soft);
}

/* A call: your phone rings, then your receptionist answers (two layers, one screen) */
.ps-phonecall {
  background: #141936;
  color: #fff;
}
.call-ringing,
.call-live {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.call-ringing {
  align-items: center;
  text-align: center;
  background: radial-gradient(120% 75% at 50% 0%, #34419c 0%, #141936 70%);
}
.call-live {
  background: radial-gradient(120% 60% at 50% 0%, #1f5f4a 0%, #141936 62%);
  opacity: 0;
  /* it lies over the ringing screen: let taps through to Decline */
  pointer-events: none;
}
html:not(.motion) .call-ringing {
  opacity: 0;
}
html:not(.motion) .call-live {
  opacity: 1;
}
.live-head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 1em 0.4em;
}
.live-head .ps-mark {
  width: 2.4em;
  height: 2.4em;
}
.live-head b {
  display: block;
  font-size: 1.1em;
}
.live-head small {
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: #9ff0c9;
  font-size: 0.76em;
  font-weight: 600;
}
.live-head small > i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #4ade9a;
  box-shadow: 0 0 0 0.25em rgba(74, 222, 154, 0.25);
}
.live-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  height: 2.6em;
  margin: 0.3em 0 0.2em;
}
.live-wave i {
  width: 0.28em;
  height: 100%;
  border-radius: 9px;
  background: #4ade9a;
  transform: scaleY(0.18);
  transform-origin: center;
  transition: transform 160ms ease;
}
.live-wave.is-talking i {
  animation: talk 0.5s ease-in-out infinite alternate;
}
.live-wave.is-caller i {
  background: #c9cfff;
}
.live-wave i:nth-child(2n) { animation-delay: 0.12s; }
.live-wave i:nth-child(3n) { animation-delay: 0.24s; }
.live-wave i:nth-child(4n) { animation-delay: 0.08s; }
@keyframes talk {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
.live-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.4em 0.9em 1.4em;
}
.lv {
  max-width: 86%;
  padding: 0.6em 0.8em;
  border-radius: 1em;
  font-size: 0.82em;
  line-height: 1.35;
}
.lv-in {
  align-self: flex-start;
  border-bottom-left-radius: 0.35em;
  background: rgba(255, 255, 255, 0.12);
}
.lv-out {
  align-self: flex-end;
  border-bottom-right-radius: 0.35em;
  background: #3346d3;
}
.lv-done {
  align-self: center;
  display: flex !important;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.3em !important;
  padding: 0.45em 0.85em;
  border-radius: 99px;
  background: #4ade9a;
  color: #0b2b1d;
  font-weight: 700;
  font-size: 0.76em;
}
.motion .ps [data-say] {
  opacity: 0;
}
.live-ctrl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.6em 0.8em 2.2em;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.66em;
}
.live-ctrl span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
}
.lc-k {
  display: grid;
  place-items: center;
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.lc-k .ic {
  width: 1.7em;
  height: 1.7em;
}
.lc-end .ic {
  width: 1.9em;
  height: 1.9em;
  padding: 0.85em;
  box-sizing: content-box;
  border-radius: 50%;
  background: #e5484d;
  color: #fff;
  transform: rotate(135deg);
}
.ring-via {
  margin-top: 2.4em !important;
  font-size: 0.82em;
  opacity: 0.75;
}
.ring-who {
  margin-top: 0.2em !important;
  font-size: 1.75em;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ring-sub {
  font-size: 0.86em;
  opacity: 0.7;
}
.ring-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.6em;
  height: 5.6em;
  margin-top: 2.4em;
}
.ring-avatar span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #5462d6;
  font-size: 2.2em;
  font-weight: 700;
}
.ring-avatar i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.motion .ring-avatar i {
  animation: ring-pulse 1.8s ease-out infinite;
}
.motion .ring-avatar i + i {
  animation-delay: 0.9s;
}
@keyframes ring-pulse {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(1.9);
    opacity: 0;
  }
}
.ring-note {
  margin-top: auto !important;
  padding: 0 1.5em;
  font-size: 0.78em;
  line-height: 1.4;
  opacity: 0.78;
}
.ring-btns {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 1.2em 1.2em 2.4em;
}
.ring-btns span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78em;
}
.ring-btns .ic {
  width: 1.9em;
  height: 1.9em;
  padding: 0.85em;
  box-sizing: content-box;
  border-radius: 50%;
}
.ring-no .ic {
  background: #e5484d;
  transform: rotate(135deg);
}
.ring-yes .ic {
  background: #30a46c;
}

/* The call, in your Messages */
.ps-convhead {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.9em 0.6em;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ps-convhead b {
  display: block;
}
.ps-convhead small {
  color: var(--ink-2);
  font-size: 0.8em;
}
.ps-live {
  display: flex !important;
  align-items: center;
  gap: 0.55em;
  margin: 0.8em 0.9em 0 !important;
  padding: 0.5em 0.85em;
  border-radius: 99px;
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 700;
  font-size: 0.78em;
}
.ps-wave {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  height: 1.1em;
}
.ps-wave i {
  width: 0.2em;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
}
.motion .ps-wave i {
  animation: wave 0.9s ease-in-out infinite alternate;
}
.ps-wave i:nth-child(2) { animation-delay: 0.15s; }
.ps-wave i:nth-child(3) { animation-delay: 0.3s; }
.ps-wave i:nth-child(4) { animation-delay: 0.45s; }
.ps-wave i:nth-child(5) { animation-delay: 0.6s; }
@keyframes wave {
  from {
    transform: scaleY(0.3);
  }
}
.ps-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.9em;
}
.cm {
  max-width: 85%;
  padding: 0.6em 0.8em;
  border-radius: 1em;
  font-size: 0.84em;
  line-height: 1.35;
}
.cm-in {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-bottom-left-radius: 0.35em;
  background: var(--surface);
}
.cm-out {
  align-self: flex-end;
  border-bottom-right-radius: 0.35em;
  background: var(--brand);
  color: var(--on-brand);
}
.ps-done {
  align-self: center;
  display: flex !important;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.3em !important;
  padding: 0.45em 0.85em;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ok);
  font-weight: 700;
  font-size: 0.76em;
}

/* The recap text, in the phone's own Messages */
.ps-sms {
  background: var(--surface);
}
.sms-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0 0.7em;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.sms-av {
  display: grid;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  overflow: hidden;
}
.sms-av .ps-mark {
  width: 100%;
  height: 100%;
}
.sms-head b {
  font-size: 0.82em;
  font-weight: 600;
}
.sms-body {
  flex: 1;
  padding: 0.8em;
}
.sms-time {
  color: var(--ink-3);
  font-size: 0.7em;
  text-align: center;
}
.sms-msg + .sms-time {
  margin-top: 1.1em !important;
}
.sms-msg {
  max-width: 90%;
  margin-top: 0.5em !important;
  padding: 0.7em 0.9em;
  border-radius: 1.1em;
  border-bottom-left-radius: 0.35em;
  background: #e9e9eb;
  color: #111;
  font-size: 0.82em;
  line-height: 1.42;
  white-space: pre-line;
}
.sms-msg u {
  color: #0a6cdc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .sms-msg {
    background: #2b2b30;
    color: #f2f2f5;
  }
  :root:not([data-theme='light']) .sms-msg u {
    color: #4ea1ff;
  }
}
:root[data-theme='dark'] .sms-msg {
  background: #2b2b30;
  color: #f2f2f5;
}
:root[data-theme='dark'] .sms-msg u {
  color: #4ea1ff;
}
.sms-compose {
  margin: 0 0.8em 2.2em;
  padding: 0.55em 0.95em;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink-3);
  font-size: 0.78em;
}

/* The notification that drops in when the recap arrives */
.sms-banner {
  position: absolute;
  /* below the camera cutout, never sliding under it */
  top: 3.7em;
  left: 0.6em;
  right: 0.6em;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6em;
  padding: 0.7em 0.8em;
  border-radius: 1.1em;
  background: var(--surface);
  box-shadow: 0 0.8em 2em -0.6em rgba(0, 0, 0, 0.35);
  font-size: 0.78em;
  line-height: 1.35;
}
.sms-banner .ps-mark {
  width: 2.2em;
  height: 2.2em;
}
.sms-banner b {
  display: block;
}
.sms-banner small {
  color: var(--ink-3);
}
.motion .sms-banner,
.motion [data-sms] {
  opacity: 0;
}
html:not(.motion) .sms-banner {
  display: none;
}

/* Messages: every conversation */
.ps-tabline {
  display: flex;
  gap: 1.1em;
  margin: 0.55em 0 0.7em !important;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.78em;
  white-space: nowrap;
  overflow: hidden;
}
.ps-tabline span {
  padding-bottom: 0.55em;
}
.ps-tabline .on {
  color: var(--brand);
  box-shadow: inset 0 -2px var(--brand);
}
.ps-tabline em {
  padding: 0 0.45em;
  border-radius: 99px;
  background: var(--line);
  font-style: normal;
}
.ps-chips {
  display: flex;
  gap: 0.4em;
  margin-bottom: 0.8em;
  white-space: nowrap;
  overflow: hidden;
}
.ps-chips span {
  padding: 0.35em 0.8em;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  font-weight: 600;
  font-size: 0.76em;
}
.ps-chips .on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}
.ps-convs li {
  display: grid;
  grid-template-columns: 1.4em minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6em;
  padding: 0.7em 0.8em;
  color: var(--ink-2);
  font-size: 0.8em;
}
.ps-convs li + li {
  border-top: 1px solid var(--line);
}
.ps-convs .ic {
  margin-top: 0.1em;
  color: var(--ink-3);
}
.ps-convs span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ps-convs b {
  display: block;
  color: var(--ink);
  font-size: 1.08em;
}
.ps-convs small {
  color: var(--ink-3);
  font-size: 0.86em;
}
.ps-convs li.is-unread small {
  color: var(--brand);
  font-weight: 700;
}
.ps-convs li.is-unread b::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.4em;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: 0.1em;
}
.motion .ps [data-row] {
  opacity: 0;
}

/* Your website's chat on the customer's phone (the real widget, full screen) */
.ps-widget .ps-status,
.wg-hd {
  background: var(--brand);
  color: var(--on-brand);
}
.wg-hd {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.3em 1em 0.8em 1.2em;
}
.wg-hd > span {
  flex: 1;
}
.wg-hd b {
  display: block;
  font-size: 1.05em;
}
.wg-hd small {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.78em;
  font-weight: 500;
}
.wg-hd small i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: currentColor;
}
.wg-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25em;
  padding: 0.35em 0.45em;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.wg-tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  padding: 0.45em 0;
  border-radius: 0.6em;
  color: var(--ink-2);
  font-size: 0.72em;
  font-weight: 600;
}
.wg-tabs .on {
  background: var(--brand-soft);
  color: var(--ink);
}
.wg-tabs .on .ic {
  color: var(--brand);
}
.wg-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  padding: 0.9em;
}
.wm {
  max-width: 86%;
  padding: 0.6em 0.85em;
  border-radius: 1.1em;
  font-size: 0.84em;
  line-height: 1.35;
}
.wm-a {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-bottom-left-radius: 0.45em;
  background: var(--surface);
}
.wm-u {
  align-self: flex-end;
  border-bottom-right-radius: 0.45em;
  background: var(--brand);
  color: var(--on-brand);
}
.wg-times.wm-a {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4em;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.wg-times span {
  display: grid;
  place-items: center;
  min-height: 2.6em;
  border: 1px solid var(--line);
  border-radius: 0.5em;
  background: var(--surface);
  font-weight: 600;
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}
.wg-times span[data-time] {
  --pick: 0;
  background: color-mix(in srgb, var(--brand) calc(var(--pick) * 100%), var(--surface));
  border-color: color-mix(in srgb, var(--brand) calc(var(--pick) * 100%), var(--line));
  color: color-mix(in srgb, var(--on-brand) calc(var(--pick) * 100%), var(--ink));
}
html:not(.motion) .wg-times span[data-pick] {
  --pick: 1;
}
.ps-widget.can-pick [data-time] {
  cursor: pointer;
}
.ps-widget.can-pick [data-time]:hover {
  border-color: var(--brand);
}
.wg-cp {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.7em 2em;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.wg-input {
  flex: 1;
  min-width: 0;
  padding: 0.6em 1em;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  font-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
}
.wg-input.is-typing {
  border-color: var(--brand);
}
.wg-input.is-typing [data-typed]::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: 1px;
  background: var(--brand);
  vertical-align: -0.2em;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.wg-ph {
  color: var(--ink-3);
}
.wm.wg-dots {
  display: flex;
  gap: 0.3em;
  padding: 0.75em 0.9em;
}
.wg-dots i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--ink-3);
  animation: dot-bounce 0.9s ease-in-out infinite;
}
.wg-dots i:nth-child(2) { animation-delay: 0.15s; }
.wg-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-0.3em);
    opacity: 1;
  }
}
.wm.wg-booked {
  display: flex;
  gap: 0.45em;
  align-items: flex-start;
}
.wg-booked .ic {
  margin-top: 0.1em;
  color: var(--ok);
}
.wg-times span[data-time] {
  position: relative;
  overflow: hidden;
}
.tap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3em;
  height: 3em;
  margin: -1.5em 0 0 -1.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}
.motion .ps [data-chat]:not(.is-shown),
.motion .ps [data-chat-dots]:not(.is-shown) {
  display: none;
}
html:not(.motion) .wg-dots,
html:not(.motion) .wg-ph {
  display: none !important;
}
.wg-cp b {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
}

/* ---------- pricing */
.pricing {
  padding: var(--sec) 0;
}
.pricing-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .pricing-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
}
.pricing-cta {
  margin: 28px 0 0;
}
.pricing-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.pricing-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.pricing-list b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 19px;
}

/* ---------- questions */
.faq-sec {
  padding: var(--sec) 0;
  border-top: 1px solid var(--line);
}
.faq-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 960px) {
  .faq-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
  }
}
.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px 0;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--brand);
}
.pm {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.pm::before,
.pm::after {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms var(--ease);
}
.pm::after {
  transform: rotate(90deg);
}
details[open] .pm::after {
  transform: rotate(0deg);
}
.answer {
  padding: 0 0 20px;
  color: var(--ink-2);
  max-width: 60ch;
}
.answer p {
  margin: 0;
}