/* Shared by every page: colours of the app, type, header, footer, buttons. The site is light only, like the app. */

:root {
  --site-bg: #F8FAFC;
  --site-surface: #FFFFFF;
  --site-ink: #0F172A;
  --site-muted: #566079;
  --site-line: #E2E8F0;
  --site-brand: #3B3A7B;
  --site-accent: #93A5F5;
  --site-soft: #EEF2FF;
  --site-night: #17163A;
  --site-on-night: #E8EAF6;
  --ok: #0F766E;
  --ok-soft: #E6F4F1;
  --warn: #9A5B06;
  --warn-soft: #FDF3DC;
  --stop: #A8323B;
  --stop-soft: #FBE9EA;

  /* colours of the mobile app itself, used only inside the phone replica */
  --app-amber: #D97706;
  --app-deep: #1E1B4B;
  --app-chip: #EEF0FD;
  --app-red: #EF4444;
  --app-red-line: #FECACA;
  --app-ink1: #1E293B;
  --app-ink2: #334155;
  --app-ink3: #475569;
  --app-mute2: #94A3B8;
  --app-grey: #CBD5E1;
  --app-line2: #F1F5F9;
  --app-line3: #EEF2F7;

  /* product voice and the voice of a person (requests and replies of people) */
  --f-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-voice: Georgia, "Times New Roman", "Noto Serif", serif;

  /* The page column: 70rem up to a 1440 px screen, then about 78% of the screen, and 100rem at most. */
  --wrap: clamp(70rem, 77.77vw, 100rem);
  --gutter: 1.375rem;
  --radius: 1.125rem;
}

/* Chinese, Japanese and Korean: the Latin fonts have none of these glyphs, so the system fonts of the language come
   first. The italic voice has no CJK italic, so it takes the same stack. No font file is loaded for any of them. */

:lang(ja) {
  --f-ui: "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
  --f-voice: var(--f-ui);
  /* Breaks lines between phrases, not inside a word such as ください. */
  word-break: auto-phrase;
}

:lang(ko) {
  --f-ui: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-voice: var(--f-ui);
  /* Korean words stay whole: lines break only at the spaces between them. */
  word-break: keep-all;
}

:lang(zh) {
  --f-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --f-voice: var(--f-ui);
  word-break: auto-phrase;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Sizes on the site are in rem, so above 1440 px the whole design grows with the screen: one more pixel of type
     for every 280 px, which is 125% at 2560 px, and 131.25% at most. Up to 1440 px it is the size the visitor has
     set in the browser, and the growth is counted from that size. */
  font-size: clamp(100%, calc(100% + (100vw - 1440px) / 280), 131.25%);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hdr-height, 5.25rem);
}

body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-ink);
  font-family: var(--f-ui);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--site-brand);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* The focus ring is the brand colour on light backgrounds and the light accent on dark ones: both stand out. */

:focus-visible {
  outline: 3px solid var(--site-brand);
  outline-offset: 2px;
}

.ftr :focus-visible {
  outline-color: var(--site-accent);
}

[hidden] {
  display: none !important;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: -3.75rem;
  z-index: 100;
  background: var(--site-brand);
  color: var(--site-surface);
  padding: 0.625rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 0.75rem;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  border-radius: 999px;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--site-brand);
  background: var(--site-brand);
  color: var(--site-surface);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn:hover {
  box-shadow: 0 0.25rem 0.875rem rgba(59, 58, 123, 0.22);
}

.btn.ghost {
  background: transparent;
  color: var(--site-brand);
}

.btn.ghost:hover {
  background: var(--site-soft);
  box-shadow: none;
}

.btn.big {
  font-size: 1rem;
  padding: 0.875rem 1.5rem;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--site-surface);
  border-bottom: 1px solid var(--site-line);
}

.hdr-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1.25rem;
}

/* The header can be wider than the screen: with a large browser font, or with longer button texts in some languages,
   its right-hand group moves to a second line instead of making the page scroll sideways. It stays on one line
   wherever it fits. */
.hdr-in {
  flex-wrap: wrap;
}

.logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--site-brand);
  text-decoration: none;
}

.hdr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  font-size: 0.88rem;
}

.hdr-nav a {
  color: var(--site-muted);
  text-decoration: none;
}

.hdr-nav a:hover {
  color: var(--site-brand);
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Language switcher: the summary looks like the header links, and the list is a small panel under it. The panel is
   anchored at the left edge of the switcher, which is never far enough right to leave the screen. */

.lang {
  position: relative;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--site-muted);
  padding: 0.5rem 0.625rem;
  border-radius: 999px;
  list-style: none;
  cursor: pointer;
}

.lang-toggle::-webkit-details-marker {
  display: none;
}

.lang-toggle:hover,
.lang[open] > .lang-toggle {
  color: var(--site-brand);
  background: var(--site-soft);
}

.lang-list {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  z-index: 70;
  width: min(11rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.375rem;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 0.875rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
}

.lang-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.9rem;
  color: var(--site-ink);
  text-decoration: none;
}

.lang-list a:hover {
  background: var(--site-soft);
  color: var(--site-brand);
}

.lang-list a[aria-current="true"] {
  font-weight: 700;
  color: var(--site-brand);
}

/* Flags: 3 to 2, with a thin border and rounded corners; the height of the text beside them. */

.flag {
  flex: none;
  width: 1.25em;
  height: 0.8333em;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 0.1875em;
  overflow: hidden;
  vertical-align: -0.05em;
}

/* The symbols of the flags are in the page for the <use> references and take no room. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.strip {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.4375rem var(--gutter);
  border-top: 1px solid var(--site-line);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--site-muted);
}

@media (max-width: 900px) {
  .hdr-nav {
    display: none;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 1rem;
  }

  .hdr-in {
    gap: 0.5rem;
  }

  .hdr-right {
    gap: 0.25rem;
  }

  .hdr .btn {
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }

  .strip {
    letter-spacing: 0.08em;
  }
}

/* The narrowest phones (320 px): the Russian header fits only with tighter buttons. */

@media (max-width: 350px) {
  .hdr .btn {
    padding: 0.5rem 0.5625rem;
  }

  .lang-toggle {
    padding: 0.5rem 0.375rem;
  }
}

/* Footer */

.ftr {
  margin-top: 4.5rem;
  background: var(--site-night);
  color: var(--site-on-night);
}

.ftr-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.75rem var(--gutter) 1.75rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 1.75rem;
}

.ftr .logo {
  color: var(--site-surface);
}

.ftr-brand p {
  margin-top: 0.625rem;
  font-size: 0.92rem;
  max-width: 26rem;
}

.ftr-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.ftr-col h2 {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--site-accent);
  margin-bottom: 0.25rem;
}

.ftr a {
  color: var(--site-on-night);
  text-decoration: none;
}

.ftr a:hover {
  text-decoration: underline;
}

.ftr-small,
.ftr-note {
  font-size: 0.8rem;
  color: var(--site-accent);
}

.ftr-note {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1rem var(--gutter) 1.75rem;
  border-top: 1px solid rgba(232, 234, 246, 0.14);
}

@media (max-width: 820px) {
  .ftr-in {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .ftr-in {
    grid-template-columns: 1fr;
  }
}

/* Simple page used by 404 and short notices */

.plain-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 4.5rem var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.plain-page h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.plain-page p {
  color: var(--site-muted);
}

.plain-lang {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--site-line);
}

/* A wide screen is often taller than a short page (the account, the 404 page): the footer then stands at the
   bottom edge of the screen and leaves no band of the page colour under it. */

@media (min-width: 1441px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  main {
    flex: 1 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* Home page: the first screen (slogan, buttons, phone scene, advantages), then the sections below it. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Wide screens: text and advantages on the left, the phone on the right. Narrow screens: text, phone, advantages. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "intro scene"
    "values scene";
  column-gap: 2.25rem;
  align-items: start;
  padding-top: 2.75rem;
}

.hero-intro {
  grid-area: intro;
}

.hero .scene {
  grid-area: scene;
}

.values {
  grid-area: values;
  margin-top: 1.875rem;
  scroll-margin-top: 1.25rem;
}

.hero-eyebrow,
.values-title,
.section-eyebrow,
.ai-sees h4,
.plan h4 {
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--site-muted);
}

.hero-title {
  margin: 0.875rem 0 1rem;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* The second half of the slogan is set in the voice of a person, like requests in the app. */

.hero-title em {
  font-family: var(--f-voice);
  font-style: italic;
  font-weight: 500;
  color: var(--site-brand);
  letter-spacing: -0.01em;
}

.hero-lead {
  margin-bottom: 0.625rem;
  max-width: 34rem;
  font-size: 1.22rem;
  line-height: 1.3;
  font-weight: 700;
}

.hero-sub {
  max-width: 34rem;
  font-size: 1.02rem;
  color: var(--site-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.375rem;
}

.hero-actions .btn,
.cta-actions .btn {
  white-space: normal;
  text-align: center;
}

.hero-note {
  margin-top: 0.75rem;
  max-width: 34rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--site-muted);
}

/* Advantages */

.values-title {
  margin-bottom: 0.75rem;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.value-card {
  position: relative;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 1rem;
  padding: 0.75rem 0.875rem;
}

.value-card h3 {
  font-size: 0.92rem;
  line-height: 1.25;
  font-weight: 700;
}

.value-card p {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--site-muted);
}

/* An advantage that the scene can prove is a button; its click area and its frame cover the whole card. */

.value-proof {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4375rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.value-proof::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  border: 1px solid transparent;
  border-radius: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.value-proof:hover::after {
  border-color: var(--site-accent);
}

.value-proof[aria-pressed="true"]::after {
  border-color: var(--site-brand);
  box-shadow: 0 0 0 1px var(--site-brand);
}

.value-proof:focus-visible {
  outline: none;
}

.value-proof:focus-visible::after {
  outline: 3px solid var(--site-brand);
  outline-offset: 2px;
}

/* Until the scene is live (no scripts, or it could not start) an advantage does not look like something to press. */

.scene:not(.live) ~ .values .value-mark {
  visibility: hidden;
}

.scene:not(.live) ~ .values .value-proof {
  cursor: default;
}

.scene:not(.live) ~ .values .value-proof:hover::after {
  border-color: transparent;
}

.value-mark {
  flex: none;
  width: 0.6875rem;
  height: 0.6875rem;
  fill: var(--site-brand);
}

.values-note,
.section-note {
  margin-top: 0.875rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--site-muted);
}

/* Sections below the first screen share one rhythm: the same gap above, a small label, a title and a lead. */

.section {
  margin-top: 6.5rem;
  /* added to the scroll padding of the page, it leaves air between the sticky header and the section */
  scroll-margin-top: 1.875rem;
}

.section-head {
  margin-bottom: 2rem;
}

.section-title {
  margin-top: 0.625rem;
  max-width: 44rem;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-lead {
  margin-top: 0.875rem;
  max-width: 42rem;
  font-size: 1.05rem;
  color: var(--site-muted);
}

/* How it works: four numbered steps, each with a piece of one example conversation. */

.how-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: how-step;
}

.how-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  counter-increment: how-step;
}

.how-step h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.14rem;
  line-height: 1.25;
}

.how-step h3::before {
  content: counter(how-step);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--site-brand);
  color: var(--site-surface);
  font-size: 0.88rem;
}

.how-step > p {
  font-size: 0.95rem;
  color: var(--site-muted);
}

.talk {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.talk-line {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 92%;
  padding: 0.6875rem 1rem 0.8125rem;
  border: 1px solid var(--site-line);
  border-radius: 1.125rem;
}

.talk-who {
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--site-muted);
}

.talk-line.by-app,
.talk-line.by-other {
  align-self: flex-start;
  border-bottom-left-radius: 0.3125rem;
}

.talk-line.by-app .talk-text {
  font-size: 0.95rem;
  line-height: 1.5;
}

.talk-line.by-person {
  align-self: flex-end;
  background: var(--site-soft);
  border-color: var(--site-soft);
  border-bottom-right-radius: 0.3125rem;
}

/* The words of people are set in the voice face, the words of the app in the face of the interface. */

.talk-line.by-person .talk-text,
.talk-line.by-other .talk-text {
  font-family: var(--f-voice);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
}

.demo-mark {
  display: inline-block;
  /* a space stands before the mark in the text, so the gap is 8px together with it */
  margin-left: 0.25rem;
  padding: 0 0.4375rem;
  border-radius: 999px;
  background: var(--site-soft);
  color: var(--site-brand);
  font-style: normal;
  letter-spacing: 0.06em;
}

.how-after {
  margin-top: 1.5rem;
  max-width: 46rem;
}

/* Comparison: a table on wide screens, one card per row on narrow ones. */

.compare-card {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.5;
}

.compare-table th,
.compare-table td {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--site-line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.compare-table thead th {
  border-top: 0;
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--site-muted);
}

.compare-table tbody th {
  width: 22%;
  font-weight: 700;
}

.compare-table td {
  width: 39%;
  color: var(--site-muted);
}

.compare-table .compare-us {
  background: var(--site-soft);
  color: var(--site-ink);
}

.compare-table thead .compare-us {
  color: var(--site-brand);
}

.compare-edge {
  display: block;
  margin-top: 0.375rem;
  color: var(--ok);
}

.compare-closing {
  margin-top: 1.5rem;
  max-width: 44rem;
  font-size: 1.14rem;
  line-height: 1.4;
  font-weight: 700;
}

/* What is not here: one card of what the app is built without, one of what has not arrived yet. */

.absence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.absence-card {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.absence-card h3 {
  margin-bottom: 1rem;
  font-size: 1.14rem;
  line-height: 1.25;
}

.absence-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.absence-list li {
  position: relative;
  padding-left: 1.875rem;
  font-size: 0.95rem;
  color: var(--site-muted);
}

.absence-list strong {
  color: var(--site-ink);
}

/* The marker says which kind of "no" it is: a struck circle for what is absent, a dashed ring for what is awaited. */

.absence-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: linear-gradient(var(--stop), var(--stop)) center / 0.5rem 2px no-repeat var(--stop-soft);
}

.absence-later .absence-list li::before {
  border: 2px dashed var(--warn);
  background: none;
}

/* Safety, and what the AI sees */

.safety-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.safety-card {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: var(--radius);
  padding: 1.375rem;
}

.safety-card h3 {
  font-size: 1.05rem;
  line-height: 1.25;
}

.safety-card p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: var(--site-muted);
}

.ai-sees {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "sent kept";
  gap: 1.625rem 2.75rem;
  margin-top: 1rem;
  padding: 1.875rem;
  background: var(--site-soft);
  border-radius: var(--radius);
  scroll-margin-top: 1.875rem;
}

.ai-sees-head {
  grid-area: head;
}

.ai-sees-sent {
  grid-area: sent;
}

.ai-sees-kept {
  grid-area: kept;
}

.ai-sees-head h3 {
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ai-sees-head p {
  margin-top: 0.5rem;
  max-width: 46rem;
}

.ai-sees h4 {
  margin-bottom: 0.75rem;
}

.ai-sees dl {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.ai-sees dt {
  font-weight: 700;
}

.ai-sees dd {
  margin-top: 0.125rem;
  font-size: 0.95rem;
  color: var(--site-muted);
}

.ai-sees-kept ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ai-sees-kept li {
  padding: 0.375rem 0.8125rem;
  background: var(--site-surface);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}

.ai-sees-kept p {
  margin-top: 0.875rem;
  font-size: 0.88rem;
  color: var(--site-muted);
}

.ai-sees-kept a,
.faq-answer a {
  font-weight: 600;
}

/* Plans: the free limits as numbers, and Premium as a dark block without a price. */

.plans-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1rem;
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 1.5rem;
  padding: 1.875rem;
}

.plan-free {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
}

.plan-premium {
  background: var(--site-night);
  color: var(--site-on-night);
}

.plan-tag {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--site-soft);
  color: var(--site-brand);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.plan-premium .plan-tag {
  background: rgba(147, 165, 245, 0.18);
  color: var(--site-accent);
}

.plan h3 {
  margin-top: 0.875rem;
  font-size: 1.8rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.plan-lead {
  margin-top: 0.5rem;
  color: var(--site-muted);
}

.plan-premium .plan-lead {
  color: var(--site-on-night);
}

.limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem 1.75rem;
  align-self: stretch;
  margin: 1.5rem 0;
}

.limit {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.limit-count {
  flex: none;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--site-brand);
}

.limit-text {
  font-size: 0.95rem;
  line-height: 1.35;
}

.limit-per {
  color: var(--site-muted);
  white-space: nowrap;
}

.limit-text small {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.8rem;
  color: var(--site-muted);
}

.plan h4 {
  margin-top: 1.5rem;
  color: var(--site-accent);
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0.75rem 0 1.5rem;
  font-size: 0.95rem;
}

.plan-list li {
  position: relative;
  padding-left: 1.125rem;
}

.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--site-accent);
}

/* The notes sit at the bottom of both cards, whichever of them is taller. */

.plan-notes {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-self: stretch;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--site-line);
  font-size: 0.85rem;
  color: var(--site-muted);
}

.plan-premium .plan-notes {
  border-top-color: rgba(232, 234, 246, 0.16);
  color: var(--site-accent);
}

/* Questions: on wide screens the head stays in view while the list scrolls. */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 1rem 3rem;
  align-items: start;
}

.faq .section-head {
  position: sticky;
  top: 7rem;
  margin-bottom: 0;
}

.faq-list {
  border-top: 1px solid var(--site-line);
}

.faq-item {
  border-bottom: 1px solid var(--site-line);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0.125rem;
  border-radius: 0.5rem;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary h3 {
  font-size: 1.05rem;
  line-height: 1.35;
}

.faq-item summary:hover h3 {
  color: var(--site-brand);
}

/* A plus drawn with two bars; an open question keeps only the horizontal one. */

.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.3125rem;
  background:
    linear-gradient(var(--site-brand), var(--site-brand)) center / 100% 2px no-repeat,
    linear-gradient(var(--site-brand), var(--site-brand)) center / 2px 100% no-repeat;
}

.faq-item[open] summary::after {
  background: linear-gradient(var(--site-brand), var(--site-brand)) center / 100% 2px no-repeat;
}

.faq-answer {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 44rem;
  padding: 0 0.125rem 1.375rem;
  color: var(--site-muted);
}

/* The final call to action */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  padding: 3.5rem 2rem;
  background: var(--site-soft);
  border-radius: 1.75rem;
  text-align: center;
}

.cta .section-title {
  margin-top: 0;
}

.cta p {
  max-width: 36rem;
  color: var(--site-muted);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.cta .cta-note {
  font-size: 0.8rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .safety-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-steps,
  .plans-grid,
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq .section-head {
    position: static;
    margin-bottom: 0.5rem;
  }

  .ai-sees {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "sent"
      "kept";
  }
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "scene"
      "values";
    padding-top: 1.875rem;
  }

  .hero .scene {
    margin-top: 1.875rem;
  }
}

/* Narrow screens: every row of the comparison becomes a card, each cell labelled with its column. */

@media (max-width: 720px) {
  .section {
    margin-top: 4.5rem;
  }

  .section-head {
    margin-bottom: 1.5rem;
  }

  .absence {
    grid-template-columns: minmax(0, 1fr);
  }

  .compare-card {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
  }

  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .compare-table tbody tr {
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .compare-table tbody tr + tr {
    margin-top: 0.75rem;
  }

  .compare-table tbody th {
    width: auto;
    padding: 1rem 1.125rem 0.125rem;
    border-top: 0;
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .compare-table td {
    width: auto;
    padding: 0.75rem 1.125rem 0.875rem;
    border-top: 0;
  }

  .compare-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1875rem;
    font-size: 0.66rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--site-muted);
  }

  .compare-table td.compare-us::before {
    color: var(--site-brand);
  }
}

@media (max-width: 560px) {
  .safety-grid,
  .limits {
    grid-template-columns: minmax(0, 1fr);
  }

  .how-step,
  .absence-card,
  .safety-card {
    padding: 1.25rem 1.125rem;
  }

  .ai-sees,
  .plan {
    padding: 1.5rem 1.125rem;
  }

  .cta {
    padding: 2.5rem 1.125rem;
  }
}

@media (max-width: 520px) {
  .values-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Wide screens. Above 1440 px the whole page grows with the root size and the page column (see base.css), and
   the phone grows in steps (see scene.css). The rules below keep the lines of text at a readable length in the
   wider column and, where the column has the room, add columns. */

@media (min-width: 1441px) {
  .values-note,
  .plan-notes li {
    max-width: 35rem;
  }

  .how-step > p,
  .absence-list li {
    max-width: 36rem;
  }
}

/* What each AI feature sends: two columns of short lines instead of one column of long ones. */

@media (min-width: 1600px) {
  .ai-sees dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
  }
}

/* The four steps of "How it works" stand in one row once each of them still gets a comfortable column of text. */

@media (min-width: 2200px) {
  .how-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The twelve advantages in three columns bring the two halves of the first screen closer to one height. */

@media (min-width: 2400px) {
  .values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.store-qr {
  display: block;
  width: 10rem;
  height: auto;
  margin: 1.25rem auto 0;
  border-radius: 0.75rem;
}

/* The phone scene of the first screen: the controls around the phone, then the replica of the mobile app. */

.scene {
  /* the replica is built at the app's width of 360 and scaled down as a whole, so its proportions match the app */
  --phone-scale: 0.88;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  scroll-margin-top: 1.25rem;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
}

/* The controls work only with scripts: until the scene is live they keep their place and stay unseen. */

.scene-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scene:not(.live) .scene-controls,
.scene:not(.live) .scene-requests {
  visibility: hidden;
}

@media (scripting: none) {
  .scene-controls,
  .scene-requests {
    display: none;
  }
}

.scene-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.scene-chip {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid var(--site-line);
  background: var(--site-surface);
  color: var(--site-ink);
  border-radius: 999px;
  padding: 0.3125rem 0.6875rem;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.scene-chip:hover {
  border-color: var(--site-accent);
}

.scene-chip[aria-pressed="true"] {
  background: var(--site-brand);
  color: var(--site-surface);
  border-color: var(--site-brand);
}

.scene-rail {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.scene-play {
  flex: none;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  border: 1px solid var(--site-brand);
  background: var(--site-brand);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.scene-play svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: var(--site-surface);
}

/* The steps of all scenarios lie on top of each other; the tallest row sets the height, so nothing jumps on a switch. */

.scene-steps-stack {
  display: grid;
  min-width: 0;
  align-items: start;
}

.scene-steps {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
  padding-top: 0.25rem;
  visibility: hidden;
}

.scene-steps.current {
  visibility: inherit;
}

.scene-steps button {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--site-muted);
  background: transparent;
  border: 1px solid var(--site-line);
  border-radius: 999px;
  padding: 0.1875rem 0.625rem 0.1875rem 0.1875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}

.scene-steps button b {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--site-soft);
  color: var(--site-brand);
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 800;
}

.scene-steps button[aria-current="step"] {
  color: var(--site-ink);
  border-color: var(--site-brand);
}

.scene-steps button[aria-current="step"] b {
  background: var(--site-brand);
  color: var(--site-surface);
}

/* On touch screens the chips get more room for a finger. */

@media (pointer: coarse) {
  .scene-chip {
    padding: 0.5rem 0.8125rem;
  }

  .scene-steps button {
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  }
}

.scene-bar {
  height: 3px;
  background: var(--site-line);
  border-radius: 3px;
  overflow: hidden;
}

.scene-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--site-brand);
  transform-origin: left center;
  transform: scaleX(0.6);
}

/* Captions are stacked the same way as the steps. */

.scene-caption {
  display: grid;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--site-ink);
}

.scene-caption span {
  grid-area: 1 / 1;
  visibility: hidden;
}

.scene-caption span.current {
  visibility: inherit;
}

/* In the wide column of a large screen a caption keeps a readable line length. */

@media (min-width: 1441px) {
  .scene-caption {
    max-width: 38rem;
  }
}

.scene-requests {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
}

.scene-requests.idle {
  visibility: hidden;
}

.scene-note {
  font-size: 0.76rem;
  color: var(--site-muted);
}

/* ---------- The phone: a replica of the mobile app, with the sizes and colours of its components ----------
   Every class of the replica starts with "ph-", so the styles of the page cannot reach into it.
   Short words next to such a class (on, tap, busy, alt, soft and the like) are its states and variants. */

@media (max-width: 440px) {
  .scene {
    --phone-scale: 0.74;
  }
}

/* A large screen shows a larger phone. Each step also asks for a height at which the first screen still holds
   the header, the controls and the whole phone; on a wide but short screen the phone keeps its size. */

@media (min-width: 1800px) and (min-height: 1160px) {
  .scene {
    --phone-scale: 1;
  }
}

@media (min-width: 2400px) and (min-height: 1280px) {
  .scene {
    --phone-scale: 1.15;
  }
}

@media (min-width: 2800px) and (min-height: 1400px) {
  .scene {
    --phone-scale: 1.3;
  }
}

.phone-wrap {
  position: relative;
  flex: none;
  align-self: center;
  width: calc(360px * var(--phone-scale));
  height: calc(740px * var(--phone-scale));
  margin: 0.625rem;
  /* an advantage scrolls the page until the bottom of the phone is on screen, with this much air under it */
  scroll-margin-bottom: 1rem;
}

.phone {
  /* colours of the app that only the replica uses */
  --app-violet: #7C75D8;
  --app-lilac: #ECEBFF;
  --app-lilac2: #F7F6FF;
  --app-teal: #247BA0;
  --app-teal-soft: #ECF8FC;
  --app-green-bg: #ECFDF5;
  --app-green1: #064E3B;
  --app-green2: #065F46;
  --app-patch-bg: #F0FDF4;
  --app-patch-line: #BBF7D0;
  --app-patch-title: #166534;
  --app-patch-ok: #15803D;
  --app-hint-line: #C7CEF7;
  --app-fb: #65676B;
  --app-hair: #CED0D4;
  --app-hair2: #E4E6EB;
  --temp-low: #3B82F6;
  --temp-mid: #22C55E;
  --temp-high: #EAB308;
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  height: 740px;
  transform-origin: 0 0;
  transform: scale(var(--phone-scale));
  background: var(--site-bg);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 0 0 9px var(--site-ink), 0 20px 44px rgba(15, 23, 42, 0.2);
  font-family: Roboto, var(--f-ui);
  color: var(--site-ink);
  line-height: 1.3;
  text-align: left;
  font-size: 14px;
}

.phone * {
  box-sizing: border-box;
}

.phone .ph-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
  flex: none;
}

.phone .ph-icon-14 {
  width: 14px;
  height: 14px;
}

.phone .ph-icon-15 {
  width: 15px;
  height: 15px;
}

.phone .ph-icon-18 {
  width: 18px;
  height: 18px;
}

.phone .ph-icon-20 {
  width: 20px;
  height: 20px;
}

.phone .ph-icon-22 {
  width: 22px;
  height: 22px;
}

.phone .ph-status-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 600;
  z-index: 300;
  color: var(--site-ink);
}

.phone .ph-battery {
  width: 22px;
  height: 11px;
  border: 1.5px solid var(--site-ink);
  border-radius: 3px;
  padding: 1px;
  display: block;
}

.phone .ph-battery i {
  display: block;
  width: 70%;
  height: 100%;
  background: var(--site-ink);
  border-radius: 1px;
}

.phone .ph-screen {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  bottom: 0;
  background: var(--site-bg);
}

/* Search tab: header */

.phone .ph-tab-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  padding: 8px 0 7px;
  /* solid behind the title and the filter chips, so the list scrolled under them does not show through */
  background: linear-gradient(var(--site-bg) 0, var(--site-bg) calc(100% - 8px), rgba(248, 250, 252, 0) 100%);
}

/* The phone is scaled, so the top edge of the header falls between pixels and a hairline of the list shows there; this strip covers it. */

.phone .ph-tab-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--site-bg);
}

.phone .ph-tab-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 17.5px;
  margin-bottom: 3.5px;
}

.phone .ph-tab-title {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.8px;
  white-space: nowrap;
}

.phone .ph-tab-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.phone .ph-mode-switch {
  width: 84px;
  height: 30px;
  border-radius: 15px;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  display: flex;
}

.phone .ph-mode-switch span {
  flex: 1;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--site-muted);
}

.phone .ph-mode-switch span.on {
  background: var(--site-brand);
  color: var(--site-surface);
}

.phone .ph-icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.phone .ph-save-status {
  padding: 0 17.5px;
  margin-bottom: 3.5px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  color: var(--app-amber);
  text-decoration: underline;
}

.phone .ph-filter-row {
  overflow: hidden;
}

.phone .ph-filter-chips {
  display: flex;
  gap: 8px;
  padding: 0 20px 8px;
  width: max-content;
  transition: transform 0.5s ease;
}

.phone .ph-filter-chip {
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--site-muted);
  white-space: nowrap;
  flex: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.phone .ph-filter-chip .ph-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.phone .ph-filter-chip.on {
  background: var(--site-accent);
  border-color: var(--site-accent);
  color: var(--app-deep);
}

.phone .ph-filter-chip.ph-temp {
  background: var(--app-chip);
  border-color: var(--site-accent);
  color: var(--site-brand);
}

.phone .ph-filter-chip.ph-reset {
  border-color: var(--app-red-line);
  color: var(--app-red);
}

.phone .ph-filter-chip.ph-reset .ph-icon {
  margin-right: 4px;
}

.phone .ph-temp-panel {
  padding: 0 20px 6px;
  background: var(--site-bg);
}

.phone .ph-temp-card {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 16px;
  padding: 8px 12px 9px;
}

.phone .ph-temp-scale {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--site-muted);
}

.phone .ph-temp-scale .ph-precise {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.phone .ph-temp-scale .ph-icon {
  width: 16px;
  height: 16px;
  color: var(--site-brand);
  margin-right: 4px;
}

.phone .ph-temp-scale .ph-value {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--site-ink);
  margin: 0 8px;
}

.phone .ph-temp-scale .ph-broad {
  flex: 1;
  text-align: right;
  min-width: 0;
}

.phone .ph-temp-track {
  position: relative;
  height: 34px;
  margin: 2px 0;
}

.phone .ph-temp-track i {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 13px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--temp-low) 0, var(--temp-mid) 40%, var(--temp-high) 100%);
}

.phone .ph-temp-track b {
  position: absolute;
  top: 7px;
  left: calc(14px + (100% - 28px) * 0.65 - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--site-ink);
}

.phone .ph-temp-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 1px;
}

.phone .ph-temp-legend div {
  display: flex;
  align-items: flex-start;
  font-size: 11.5px;
  line-height: 15px;
  color: var(--app-ink3);
  min-width: 0;
}

.phone .ph-temp-legend i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: 4px 8px 0 0;
}

.phone .ph-temp-legend span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.phone .ph-temp-legend .ph-low {
  background: var(--temp-low);
}

.phone .ph-temp-legend .ph-mid {
  background: var(--temp-mid);
}

.phone .ph-temp-legend .ph-high {
  background: var(--temp-high);
}

/* Search tab: message list */

.phone .ph-feed {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

/* The top padding is the height of the header above the list; the scripts set the measured value. */

.phone .ph-feed-in {
  position: relative;
  padding: 135px 20px 260px;
}

.phone .ph-empty-state p {
  font-size: 15px;
  line-height: 22px;
  color: var(--site-muted);
  margin: 0;
  padding-top: 4px;
}

.phone .ph-hint-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--site-brand);
}

.phone .ph-msg-user {
  position: relative;
  margin: 0 0 21px auto;
  width: fit-content;
  max-width: 85%;
  background: var(--site-brand);
  color: var(--site-surface);
  padding: 14px 38.5px 14px 17.5px;
  border-radius: 21px 1.75px 21px 21px;
  font-size: 15px;
  line-height: 24.4px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

.phone .ph-msg-user .ph-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
}

.phone .ph-msg-thinking {
  display: flex;
  align-items: center;
  width: fit-content;
  background: var(--site-line);
  padding: 10.5px 17.5px;
  border-radius: 1.75px 21px 21px 21px;
  font-size: 15px;
  font-weight: 500;
  color: var(--app-ink2);
  margin-bottom: 21px;
}

.phone .ph-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(59, 58, 123, 0.22);
  border-top-color: var(--site-brand);
  margin-right: 7px;
  animation: phspin 0.8s linear infinite;
}

@keyframes phspin {
  to {
    transform: rotate(360deg);
  }
}

.phone .ph-msg-ai {
  width: fit-content;
  max-width: 92%;
  background: var(--site-line);
  padding: 10.5px 17.5px;
  border-radius: 1.75px 21px 21px 21px;
  font-size: 15px;
  line-height: 24.4px;
  color: var(--app-ink2);
  margin-bottom: 10.5px;
}

.phone .ph-cursor {
  color: var(--site-brand);
  animation: phblink 0.96s ease-in-out infinite;
}

@keyframes phblink {
  50% {
    opacity: 0.15;
  }
}

.phone .ph-match-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phone .ph-match-card {
  background: var(--site-surface);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--app-line2);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.phone .ph-card-why {
  padding: 17.5px 17.5px 14px;
}

.phone .ph-card-reason-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.325px;
  margin-bottom: 3.5px;
}

.phone .ph-card-reason {
  font-size: 12.25px;
  line-height: 17.5px;
  color: var(--app-ink3);
}

.phone .ph-card-photos {
  display: flex;
  gap: 4px;
  padding: 4px;
  height: 240px;
}

.phone .ph-card-photo-main {
  position: relative;
  width: 66%;
  height: 232px;
  border-radius: 20px;
  background: var(--site-line);
  overflow: hidden;
}

.phone .ph-card-photos-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.phone .ph-card-photo-small {
  position: relative;
  height: 114px;
  border-radius: 20px;
  background: var(--site-line);
  overflow: hidden;
}

.phone .ph-photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

.phone .ph-demo-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  font-style: normal;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  color: var(--site-brand);
  padding: 3px 9px;
  border-radius: 999px;
}

.phone .ph-card-photo-small .ph-demo-tag {
  left: 6px;
  top: 6px;
  font-size: 9px;
  padding: 2px 7px;
}

.phone .ph-card-info {
  padding: 17.5px;
}

.phone .ph-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.phone .ph-card-identity {
  flex: 1;
  padding-right: 7px;
  min-width: 0;
}

.phone .ph-card-name {
  font-size: 17.5px;
  line-height: 24.5px;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.phone .ph-card-top-mark {
  margin-left: 7px;
  background: var(--site-accent);
  border-radius: 999px;
  padding: 1.75px 7px;
  font-size: 9px;
  line-height: 13px;
  font-weight: 700;
  color: var(--app-deep);
  text-transform: uppercase;
  letter-spacing: 0.45px;
}

.phone .ph-card-send {
  flex: none;
  width: 38.5px;
  height: 38.5px;
  border-radius: 50%;
  background: var(--site-brand);
  color: var(--site-surface);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 6px rgba(59, 58, 123, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.phone .ph-card-send.tap,
.phone .ph-spark.tap {
  transform: scale(0.86);
  box-shadow: 0 0 0 9px rgba(147, 165, 245, 0.5);
}

.phone .ph-card-details {
  margin-top: 10.5px;
  border-top: 1px solid var(--app-line2);
  padding-top: 10.5px;
  font-size: 12.25px;
  line-height: 17.5px;
  font-weight: 500;
  color: var(--app-ink1);
}

.phone .ph-card-goal {
  display: flex;
  align-items: center;
}

.phone .ph-card-goal .ph-icon {
  color: var(--site-muted);
  margin-right: 5.25px;
}

/* composer and tab bar */

.phone .ph-composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 84px;
  padding: 52px 20px 12px;
  z-index: 20;
}

.phone .ph-new-chat {
  position: absolute;
  right: 24px;
  top: 8px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  display: grid;
  place-items: center;
  color: var(--site-brand);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}

.phone .ph-input-bar {
  min-height: 52px;
  background: var(--site-surface);
  border-radius: 24px;
  border: 1px solid var(--app-line2);
  padding: 0 6px 0 4px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

.phone .ph-input-bar .ph-emoji {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--site-muted);
}

.phone .ph-input-bar .ph-input {
  flex: 1;
  min-width: 0;
  padding: 12px 6px 12px 2px;
  font-size: 16px;
  line-height: 20px;
  color: var(--app-ink2);
  overflow-wrap: anywhere;
}

.phone .ph-placeholder {
  color: var(--app-mute2);
}

.phone .ph-send-button {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--app-grey);
  color: var(--site-muted);
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.phone .ph-send-button.on {
  background: var(--site-brand);
  color: var(--site-surface);
}

.phone .ph-send-button.tap,
.phone .ph-request-buttons .ph-send.tap,
.phone .ph-dialog-card span.tap {
  transform: scale(0.9);
}

.phone .ph-quota {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  background: var(--app-red);
  color: var(--site-surface);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.phone .ph-tab-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 72px;
  background: var(--site-surface);
  border-radius: 20px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.05);
  z-index: 40;
}

.phone .ph-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  color: var(--app-mute2);
}

.phone .ph-tab .ph-tab-icon {
  min-height: 28px;
  display: grid;
  place-items: center;
}

.phone .ph-tab .ph-icon {
  width: 22px;
  height: 22px;
}

.phone .ph-tab i {
  margin-top: 4px;
  width: 20px;
  height: 3px;
  border-radius: 999px;
}

.phone .ph-tab > span:last-child {
  margin-top: 2px;
  max-width: 100%;
  font-size: 9px;
  line-height: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone .ph-tab.on {
  color: var(--site-brand);
}

.phone .ph-tab.on .ph-icon {
  width: 24px;
  height: 24px;
}

.phone .ph-tab.on i {
  background: var(--site-accent);
}

.phone .ph-tab.on > span:last-child {
  font-weight: 700;
}

/* chat thread */

.phone .ph-thread-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 59px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 10px;
  background: var(--site-bg);
  border-bottom: 1px solid var(--app-line3);
  z-index: 30;
}

.phone .ph-thread-head .ph-back {
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0 -8px;
  display: grid;
  place-items: center;
  color: var(--site-brand);
}

.phone .ph-thread-head .ph-thread-avatar {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid rgba(59, 58, 123, 0.2);
  background: var(--site-line);
  overflow: hidden;
}

.phone .ph-thread-head .ph-thread-name {
  flex: 1;
  min-width: 0;
}

.phone .ph-thread-head .ph-thread-name b {
  display: block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone .ph-thread-head .ph-thread-name small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--app-mute2);
}

/* The photo in a chat header is too small for a mark of its own: the "Demo" mark stands next to the name. */

.phone .ph-thread-head .ph-thread-name .ph-demo-tag {
  position: static;
  display: inline-block;
  margin-left: 7px;
  vertical-align: 2px;
  background: var(--site-soft);
}

.phone .ph-thread-head .ph-thread-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.phone .ph-thread-head .ph-thread-actions > span {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.phone .ph-thread-head .ph-spark {
  color: var(--site-brand);
}

.phone .ph-thread-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 59px;
  bottom: 0;
  overflow: hidden;
}

.phone .ph-thread-messages {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 72px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
}

.phone .ph-bubble-mine {
  align-self: flex-end;
  max-width: 85%;
  background: var(--site-brand);
  color: var(--site-surface);
  padding: 12px 16px;
  border-radius: 16px 16px 4px 16px;
  font-size: 14px;
  line-height: 19px;
  margin-bottom: 12px;
}

.phone .ph-bubble-mine .ph-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.phone .ph-bubble-mine .ph-bubble-meta .ph-icon {
  color: rgba(255, 255, 255, 0.85);
}

.phone .ph-bubble-theirs {
  align-self: flex-start;
  max-width: 85%;
  background: var(--site-line);
  color: var(--app-ink2);
  padding: 12px 16px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 19px;
}

.phone .ph-bubble-time {
  font-size: 10px;
  line-height: 14px;
  color: var(--app-mute2);
  margin: 4px 0 12px;
}

.phone .ph-thread-composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  padding: 4px 16px 0;
}

.phone .ph-thread-composer .ph-input-bar,
.phone .ph-drawer-ask .ph-input-bar {
  box-shadow: none;
}

.phone .ph-dim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.24);
  opacity: 0;
  transition: opacity 0.22s;
  z-index: 99;
}

.phone .ph-dim.on {
  opacity: 1;
}

.phone .ph-drawer {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 306px;
  background: var(--site-surface);
  border-radius: 20px;
  border: 1px solid var(--site-line);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
  z-index: 100;
  transform: translateX(330px);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}

.phone .ph-drawer.on {
  transform: none;
}

.phone .ph-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--app-line2);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--site-ink);
}

.phone .ph-drawer-head .ph-icon {
  color: var(--site-brand);
}

.phone .ph-drawer-analyze {
  position: relative;
  margin: 12px 16px;
  background: var(--site-brand);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--site-surface);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.phone .ph-drawer-thread {
  flex: 1;
  min-height: 0;
  padding: 8px 16px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.phone .ph-drawer-bubble {
  max-width: 90%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}

.phone .ph-drawer-bubble.from-ai {
  align-self: flex-start;
  background: var(--app-line2);
  color: var(--app-ink2);
  border-bottom-left-radius: 4px;
}

.phone .ph-drawer-bubble.from-user {
  align-self: flex-end;
  background: var(--site-brand);
  color: var(--site-surface);
  border-bottom-right-radius: 4px;
}

.phone .ph-drawer-bubble.from-user small {
  display: block;
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2px;
}

.phone .ph-drawer-ask {
  padding: 4px 16px 8px;
}

.phone .ph-drawer-ask .ph-input-bar {
  padding: 0 4px 0 14px;
}

.phone .ph-drawer-ask .ph-input {
  font-size: 14px;
  padding-left: 0;
}

/* chat request modal and confirmation dialog */

.phone .ph-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.phone .ph-overlay.on {
  opacity: 1;
  visibility: visible;
}

.phone .ph-request-card {
  width: 100%;
  background: var(--site-surface);
  border-radius: 24px;
  padding: 20px;
}

.phone .ph-request-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.phone .ph-request-head i {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--site-soft);
  color: var(--site-brand);
  display: grid;
  place-items: center;
}

.phone .ph-request-head b {
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.phone .ph-request-sub {
  font-size: 13px;
  line-height: 18px;
  color: var(--site-muted);
  text-align: center;
  margin-bottom: 12px;
}

.phone .ph-request-input {
  min-height: 72px;
  border: 1px solid var(--site-line);
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 12px;
  color: var(--site-ink);
  overflow-wrap: anywhere;
}

.phone .ph-request-buttons {
  display: flex;
  gap: 12px;
}

.phone .ph-request-buttons span {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: 16px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  transition: opacity 0.15s, transform 0.15s;
}

.phone .ph-request-buttons .ph-cancel {
  background: var(--site-soft);
  color: var(--site-brand);
}

.phone .ph-request-buttons .ph-send {
  background: var(--site-brand);
  color: var(--site-surface);
}

.phone .ph-request-buttons .ph-send.disabled {
  opacity: 0.5;
}

.phone .ph-dialog-card {
  width: 100%;
  background: var(--site-surface);
  border-radius: 24px;
  padding: 24px 24px 20px;
  text-align: center;
}

.phone .ph-dialog-card b {
  display: block;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.phone .ph-dialog-card p {
  font-size: 15px;
  line-height: 24px;
  color: var(--site-muted);
  margin: 0 0 20px;
}

.phone .ph-dialog-card span {
  display: block;
  background: var(--site-brand);
  color: var(--site-surface);
  border-radius: 16px;
  padding: 14px 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  transition: transform 0.15s;
}

/* More scenarios: AI Picks, the profile assistant, tests, the "How to search?" card, a public profile */

.phone .ph-icon-16 {
  width: 16px;
  height: 16px;
}

.phone .ph-icon-17 {
  width: 17px;
  height: 17px;
}

.phone .ph-tab .ph-icon.filled {
  display: none;
}

.phone .ph-tab.on .ph-icon.filled {
  display: block;
}

.phone .ph-tab.on .ph-icon.outline {
  display: none;
}

.phone .ph-screen.over {
  z-index: 120;
}

.phone .ph-match-card {
  transition: box-shadow 0.2s;
}

.phone .ph-match-card.tap {
  box-shadow: 0 0 0 5px rgba(147, 165, 245, 0.6);
}

.phone .ph-hint-link {
  transition: transform 0.15s;
}

.phone .ph-hint-link.tap {
  transform: scale(0.93);
}

/* follow-up question about a person the AI has already shown */

.phone .ph-follow-up-hint {
  margin: 10.5px 0 0 7px;
  font-size: 13px;
  line-height: 21px;
  color: var(--app-mute2);
}

.phone .ph-msg-user.follow-up {
  margin-top: 21px;
}

.phone .ph-msg-ai.follow-up {
  position: relative;
  padding-right: 42px;
  margin-bottom: 21px;
}

.phone .ph-msg-ai .ph-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--site-muted);
  display: grid;
  place-items: center;
}

/* AI Picks tab */

.phone .ph-round-button {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  display: grid;
  place-items: center;
  color: var(--site-brand);
}

.phone .ph-tab-actions.busy .ph-round-button {
  color: var(--app-mute2);
}

.phone .ph-eraser {
  display: block;
  position: relative;
  width: 15.6px;
  height: 9.2px;
  border-radius: 3px;
  background: currentColor;
  transform: rotate(-28deg);
  overflow: hidden;
}

.phone .ph-eraser:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 28%;
  background: rgba(255, 255, 255, 0.38);
}

.phone .ph-quota.small {
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 3px;
  font-size: 10px;
  line-height: 16px;
}

.phone .ph-picks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 21px;
  text-align: center;
}

.phone .ph-picks-unknown {
  display: flex;
  gap: 10px;
  margin-bottom: 17.5px;
}

.phone .ph-picks-unknown i {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  border: 1.5px dashed var(--site-accent);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 20px;
  font-weight: 700;
  color: var(--site-accent);
}

.phone .ph-picks-empty b {
  font-size: 17.5px;
  line-height: 24.5px;
  font-weight: 700;
  padding: 0 7px;
  margin-bottom: 7px;
}

.phone .ph-picks-empty p {
  font-size: 15px;
  line-height: 24.4px;
  color: var(--site-muted);
  margin: 0 0 21px;
  padding: 0 7px;
}

.phone .ph-picks-find {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-brand);
  color: var(--site-surface);
  border-radius: 14px;
  padding: 14px 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  transition: transform 0.15s, box-shadow 0.2s;
}

.phone .ph-picks-find span {
  margin-left: 5.25px;
}

.phone .ph-picks-find.tap {
  transform: scale(0.97);
  box-shadow: 0 0 0 7px rgba(147, 165, 245, 0.5);
}

.phone .ph-picks-empty small,
.phone .ph-more-footer small {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  line-height: 14px;
  color: var(--site-muted);
  text-align: center;
}

.phone .ph-picks-summary {
  display: flex;
  align-items: flex-start;
  gap: 10.5px;
  background: var(--site-surface);
  border: 1px solid var(--app-line2);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 17.5px;
  font-size: 15px;
  line-height: 24.4px;
  color: var(--app-ink2);
}

.phone .ph-picks-summary > i {
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--site-soft);
  color: var(--site-brand);
  display: grid;
  place-items: center;
}

.phone .ph-picks-summary .ph-spinner {
  margin: 0;
}

.phone .ph-more-footer {
  padding-top: 17.5px;
}

.phone .ph-more-footer p {
  font-size: 13px;
  line-height: 21.1px;
  color: var(--site-muted);
  text-align: center;
  margin: 0 0 10.5px;
}

.phone .ph-more-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--site-surface);
  border: 1px solid var(--site-brand);
  border-radius: 14px;
  padding: 14px 0;
  color: var(--site-brand);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}

.phone .ph-more-button span {
  margin-left: 5.25px;
}

/* own profile (view mode) and the public profile */

.phone .ph-profile-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-top: 3.5px;
}

.phone .ph-profile-actions > span {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--site-brand);
  transition: transform 0.2s, box-shadow 0.2s;
}

.phone .ph-profile-actions .ph-ink,
.phone .ph-user-head .ph-ink {
  color: var(--site-ink);
}

.phone .ph-profile-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding-top: 56px;
  overflow: hidden;
}

.phone .ph-profile-avatar {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.phone .ph-profile-avatar > span {
  display: block;
  position: relative;
  width: 186px;
  height: 186px;
  border-radius: 50%;
  background: var(--site-bg);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
}

.phone .ph-profile-avatar .ph-photo {
  left: 3px;
  top: 3px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--site-line);
}

.phone .ph-profile-avatar .ph-demo-tag {
  left: 50%;
  top: auto;
  bottom: 6px;
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}

.phone .ph-profile-identity {
  padding: 18px 16px 0;
}

.phone .ph-profile-identity b {
  display: block;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}

.phone .ph-profile-identity small {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--site-muted);
  margin-top: 2px;
}

.phone .ph-profile-tabs {
  display: flex;
  margin: 6px 17.5px 8px;
  border-bottom: 1px solid var(--app-hair);
  overflow: hidden;
}

.phone .ph-profile-tabs > span {
  flex: none;
  min-width: 76px;
  min-height: 72px;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-bottom: 3px solid transparent;
  color: var(--app-fb);
}

.phone .ph-profile-tabs > span.on {
  border-bottom-color: var(--site-brand);
  color: var(--site-brand);
}

.phone .ph-profile-tabs em {
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
  min-height: 32px;
  text-align: center;
  white-space: pre-line;
}

.phone .ph-profile-tabs > span.on em {
  font-weight: 600;
}

.phone .ph-profile-tabs > span.two-line {
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
}

.phone .ph-profile-tabs > span.two-line em {
  line-height: 15px;
}

.phone .ph-profile-feed {
  padding: 0 17.5px;
}

.phone .ph-profile-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
}

.phone .ph-profile-section.spaced {
  padding-top: 20px;
}

.phone .ph-profile-section .ph-icon,
.phone .ph-profile-field small .ph-icon {
  color: var(--site-brand);
}

.phone .ph-profile-field {
  padding: 8.75px 0;
  border-bottom: 1px solid var(--app-line2);
}

.phone .ph-profile-field small {
  display: flex;
  align-items: center;
  gap: 5.25px;
  font-size: 13px;
  line-height: 17px;
  color: var(--site-muted);
  margin-bottom: 1.75px;
}

.phone .ph-profile-field p {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--site-ink);
}

.phone .ph-user-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 72px;
  display: flex;
  align-items: center;
  padding: 20px 16px 12px;
  background: var(--site-bg);
  border-bottom: 1px solid var(--app-line3);
}

.phone .ph-user-head .ph-back {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--site-brand);
}

.phone .ph-user-head b {
  flex: 1;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.phone .ph-user-head .ph-ink {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.phone .ph-user-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  bottom: 0;
  overflow: hidden;
}

.phone .ph-user-in {
  position: relative;
  padding-bottom: 48px;
}

.phone .ph-user-in .ph-profile-tabs {
  margin-left: 16px;
  margin-right: 16px;
}

.phone .ph-user-in .ph-profile-feed {
  padding: 0 16px 16px;
}

.phone .ph-user-in .ph-profile-field {
  padding: 10px 0;
  border-bottom-color: var(--app-hair2);
}

.phone .ph-user-in .ph-profile-field small {
  color: var(--app-fb);
  gap: 6px;
  margin-bottom: 2px;
}

.phone .ph-user-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 20px 24px;
  background: var(--site-brand);
  color: var(--site-surface);
  border-radius: 16px;
  padding: 16px 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(59, 58, 123, 0.25);
}

/* profile assistant drawer: analysis bubble and the "suggested changes" card */

.phone .ph-dim.on-profile {
  top: 48px;
}

.phone .ph-drawer.on-profile {
  top: 58px;
}

.phone .ph-drawer-analyze {
  transition: transform 0.15s, opacity 0.2s;
}

.phone .ph-drawer-analyze.busy {
  opacity: 0.6;
}

.phone .ph-drawer-analyze.tap {
  transform: scale(0.96);
}

.phone .ph-spinner.light {
  width: 16px;
  height: 16px;
  margin: 0;
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: var(--site-surface);
}

.phone .ph-drawer-thread-in {
  flex: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease;
}

.phone .ph-drawer-bubble.analysis {
  align-self: flex-start;
  background: var(--site-soft);
  color: var(--app-ink2);
  border-bottom-left-radius: 4px;
  white-space: pre-line;
}

.phone .ph-patch {
  align-self: flex-start;
  max-width: 90%;
  background: var(--app-patch-bg);
  border: 1px solid var(--app-patch-line);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.phone .ph-patch b {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: var(--app-patch-title);
  margin-bottom: 8px;
}

.phone .ph-patch ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.phone .ph-patch li {
  font-size: 13px;
  line-height: 19px;
  color: var(--app-ink2);
  margin-bottom: 4px;
}

.phone .ph-patch-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.phone .ph-patch-buttons > span {
  flex: 1;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  padding: 10px 4px;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  transition: transform 0.15s;
}

.phone .ph-patch-buttons .ph-apply {
  background: var(--site-brand);
  color: var(--site-surface);
  font-weight: 700;
}

.phone .ph-patch-buttons .ph-apply em {
  font-style: normal;
}

.phone .ph-patch-buttons .ph-decline {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  color: var(--site-muted);
  font-weight: 600;
}

.phone .ph-patch-buttons .ph-apply.tap {
  transform: scale(0.93);
}

.phone .ph-patch-done {
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--app-patch-ok);
}

.phone .ph-dialog-card.plain {
  border-radius: 21px;
  padding: 21px 21px 17.5px;
}

.phone .ph-dialog-card.plain p {
  line-height: 21px;
  margin-bottom: 17.5px;
}

.phone .ph-dialog-card.plain span {
  border-radius: 14px;
  padding: 12.25px 0;
  font-size: 12.25px;
  line-height: 17.5px;
}

/* AI HUB: the two tests */

.phone .ph-hub-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  padding: 8px 17.5px 14px;
  background: var(--site-bg);
}

.phone .ph-hub-back {
  flex: none;
  width: 35px;
  height: 35px;
  margin: 3px 10.5px 0 0;
  border-radius: 14px;
  background: var(--site-surface);
  border: 1px solid var(--app-line2);
  display: grid;
  place-items: center;
  color: var(--app-ink2);
}

.phone .ph-hub-title {
  flex: 1;
  min-width: 0;
  padding-right: 10.5px;
}

.phone .ph-hub-title b {
  display: block;
  font-size: 32px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -0.8px;
  white-space: nowrap;
}

.phone .ph-hub-title small {
  display: block;
  margin-top: 1.75px;
  font-size: 12.25px;
  line-height: 17.5px;
  color: var(--site-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone .ph-hub-tile {
  flex: none;
  width: 38.5px;
  height: 38.5px;
  border-radius: 14px;
  background: var(--app-lilac);
  color: var(--site-brand);
  display: grid;
  place-items: center;
}

.phone .ph-hub-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 89px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.phone .ph-test-card {
  --acc: var(--site-brand);
  --soft: var(--site-soft);
  background: var(--site-surface);
  border: 1px solid var(--app-line2);
  border-radius: 26px;
  padding: 17.5px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.phone .ph-test-card.alt {
  --acc: var(--app-teal);
  --soft: var(--app-teal-soft);
}

.phone .ph-test-card.tap {
  transform: scale(0.975);
  box-shadow: 0 0 0 6px rgba(147, 165, 245, 0.55);
}

.phone .ph-test-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.phone .ph-test-icon {
  flex: none;
  width: 49px;
  height: 49px;
  border-radius: 14px;
  background: var(--soft);
  color: var(--acc);
  display: grid;
  place-items: center;
}

.phone .ph-test-icon .ph-icon {
  width: 28px;
  height: 28px;
}

.phone .ph-test-top > div {
  flex: 1;
  min-width: 0;
}

.phone .ph-test-badge {
  display: inline-block;
  font-style: normal;
  background: var(--soft);
  color: var(--acc);
  border-radius: 999px;
  padding: 3.5px 8.75px;
  margin-bottom: 7px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
}

.phone .ph-test-top b {
  display: block;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
}

.phone .ph-test-top p {
  margin: 5.25px 0 0;
  font-size: 12.25px;
  line-height: 17.5px;
  color: var(--site-muted);
}

.phone .ph-test-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 17px;
  margin-top: 17.5px;
  padding-top: 14px;
  border-top: 1px solid var(--app-line2);
  box-sizing: content-box;
}

.phone .ph-test-meta {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 600;
  color: var(--app-mute2);
}

.phone .ph-test-meta span {
  margin-left: 5.25px;
}

.phone .ph-test-go {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 700;
  color: var(--acc);
}

.phone .ph-test-go span {
  margin-right: 3.5px;
}

.phone .ph-test-foot .ph-spinner {
  width: 15px;
  height: 15px;
  margin: 0;
  border-width: 2px;
}

.phone .ph-test-safety {
  display: flex;
  align-items: flex-start;
  margin-top: 3.5px;
  background: var(--site-soft);
  border-radius: 14px;
  padding: 14px;
  color: var(--site-brand);
  font-size: 10.5px;
  line-height: 17.5px;
  font-weight: 600;
}

.phone .ph-test-safety span {
  flex: 1;
  margin-left: 10.5px;
}

/* a test: questions in chat format */

.phone .ph-hub-test {
  position: absolute;
  left: 0;
  right: 0;
  top: 81px;
  bottom: 0;
}

.phone .ph-test-progress {
  padding: 7px 17.5px 10.5px;
}

.phone .ph-test-progress div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 600;
  color: var(--site-muted);
}

.phone .ph-test-progress b {
  font-weight: 700;
  color: var(--site-brand);
}

.phone .ph-test-progress > i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--site-line);
  overflow: hidden;
}

.phone .ph-test-progress em {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--app-violet);
  width: 0;
  transition: width 0.4s ease;
}

.phone .ph-test-chat {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 0;
  overflow: hidden;
}

.phone .ph-test-chat-in {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 20px 0;
  transition: transform 0.45s ease;
}

.phone .ph-test-question {
  align-self: flex-start;
  max-width: 92%;
  background: var(--site-line);
  color: var(--app-ink2);
  padding: 14px 17.5px;
  border-radius: 1.75px 21px 21px 21px;
  font-size: 15px;
  line-height: 23px;
  margin-bottom: 17.5px;
}

.phone .ph-test-answer {
  align-self: flex-end;
  max-width: 86%;
  background: var(--site-brand);
  color: var(--site-surface);
  padding: 14px 17.5px;
  border-radius: 21px 1.75px 21px 21px;
  font-size: 15px;
  line-height: 21px;
  margin-bottom: 17.5px;
}

.phone .ph-test-thinking {
  align-self: flex-start;
  display: flex;
  align-items: center;
  background: var(--site-line);
  padding: 10.5px 17.5px;
  border-radius: 1.75px 21px 21px 21px;
  font-size: 12.25px;
  line-height: 17.5px;
  font-weight: 500;
  color: var(--app-ink3);
  margin-bottom: 17.5px;
}

.phone .ph-test-thinking .ph-spinner {
  width: 15px;
  height: 15px;
  border-width: 2px;
}

.phone .ph-test-options {
  background: var(--site-surface);
  border: 1px solid var(--app-line2);
  border-radius: 24px;
  padding: 14px;
  margin-bottom: 17.5px;
}

.phone .ph-test-options small {
  display: block;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 600;
  color: var(--site-muted);
  margin-bottom: 10.5px;
}

.phone .ph-test-option {
  display: flex;
  align-items: center;
  border: 1px solid var(--site-line);
  border-radius: 14px;
  padding: 10.5px 14px;
  margin-bottom: 8px;
  font-size: 12.25px;
  line-height: 17.5px;
  color: var(--app-ink2);
  background: var(--site-surface);
  transition: background 0.15s, border-color 0.15s;
}

.phone .ph-test-option i {
  flex: none;
  position: relative;
  width: 17.5px;
  height: 17.5px;
  border-radius: 50%;
  border: 2px solid var(--app-grey);
  margin-right: 10.5px;
}

.phone .ph-test-option.on {
  background: var(--site-soft);
  border-color: var(--app-violet);
  font-weight: 600;
}

.phone .ph-test-option.on i {
  border-color: var(--site-brand);
}

.phone .ph-test-option.on i:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8.75px;
  height: 8.75px;
  margin: -4.375px 0 0 -4.375px;
  border-radius: 50%;
  background: var(--site-brand);
}

.phone .ph-test-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-top: 10.5px;
}

.phone .ph-test-input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border-radius: 14px;
  background: var(--site-bg);
  border: 1px solid var(--site-line);
  padding: 10.5px 14px;
  font-size: 14px;
  line-height: 20px;
  color: var(--app-mute2);
  display: flex;
  align-items: center;
}

.phone .ph-test-send {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--site-line);
  color: var(--app-mute2);
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.phone .ph-test-send.on {
  background: var(--site-brand);
  color: var(--site-surface);
}

.phone .ph-test-send.tap {
  transform: scale(0.88);
}

/* the result: scores by formula, portrait written by AI */

.phone .ph-result-card {
  background: var(--site-surface);
  border: 1px solid var(--app-line2);
  border-radius: 26px;
  padding: 17.5px;
  margin-bottom: 17.5px;
}

.phone .ph-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10.5px;
}

.phone .ph-result-head > div {
  flex: 1;
  min-width: 0;
}

.phone .ph-result-head small {
  display: block;
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--app-mute2);
}

.phone .ph-result-head b {
  display: block;
  margin-top: 3.5px;
  font-size: 17.5px;
  line-height: 24.5px;
  font-weight: 800;
}

.phone .ph-result-head > i {
  flex: none;
  width: 38.5px;
  height: 38.5px;
  border-radius: 14px;
  background: var(--site-soft);
  color: var(--site-brand);
  display: grid;
  place-items: center;
}

.phone .ph-traits {
  margin-top: 17.5px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phone .ph-trait div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5.25px;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 600;
  color: var(--app-ink3);
}

.phone .ph-trait div b {
  font-weight: 700;
  color: var(--site-brand);
}

.phone .ph-trait > i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--app-line2);
  overflow: hidden;
}

.phone .ph-trait em {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--app-violet);
}

.phone .ph-result-summary {
  margin: 17.5px 0 0;
  font-size: 12.25px;
  line-height: 21px;
  color: var(--app-ink3);
}

.phone .ph-result-strengths {
  margin-top: 17.5px;
  background: var(--app-green-bg);
  border-radius: 14px;
  padding: 14px;
}

.phone .ph-result-strengths > b,
.phone .ph-result-relations > b,
.phone .ph-result-growth > b {
  display: block;
  font-size: 12.25px;
  line-height: 17.5px;
  font-weight: 700;
  margin-bottom: 7px;
}

.phone .ph-result-strengths > b {
  color: var(--app-green1);
}

.phone .ph-result-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.phone .ph-result-card li {
  font-size: 12.25px;
  line-height: 17.5px;
  margin-bottom: 3.5px;
}

.phone .ph-result-strengths li {
  color: var(--app-green2);
}

.phone .ph-result-relations {
  margin-top: 14px;
  background: var(--app-lilac2);
  border-radius: 14px;
  padding: 14px;
}

.phone .ph-result-relations > b {
  color: var(--site-brand);
}

.phone .ph-result-relations p {
  margin: 0;
  font-size: 12.25px;
  line-height: 17.5px;
  color: var(--app-ink3);
}

.phone .ph-result-growth {
  margin-top: 14px;
}

.phone .ph-result-growth li {
  color: var(--app-ink3);
}

.phone .ph-result-disclaimer {
  margin: 17.5px 0 0;
  font-size: 11px;
  line-height: 14px;
  color: var(--app-mute2);
}

.phone .ph-result-retake {
  display: block;
  margin-top: 17.5px;
  border: 1px solid rgba(59, 58, 123, 0.2);
  border-radius: 14px;
  padding: 12.25px 0;
  text-align: center;
  font-size: 12.25px;
  line-height: 17.5px;
  font-weight: 700;
  color: var(--site-brand);
}

/* "How to search?" card */

.phone .ph-overlay.soft {
  background: rgba(15, 23, 42, 0.45);
}

.phone .ph-hint-card {
  width: 100%;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  background: var(--site-soft);
  border: 1px solid var(--app-hint-line);
  border-radius: 20px;
  padding: 18px;
  overflow: hidden;
}

.phone .ph-hint-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.phone .ph-hint-head b {
  flex: 1;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--site-brand);
}

.phone .ph-hint-head .ph-icon {
  color: var(--site-muted);
}

.phone .ph-hint-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.phone .ph-hint-text > b {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--site-ink);
}

.phone .ph-hint-text > b.spaced {
  margin-top: 22px;
}

.phone .ph-hint-text > p {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--app-ink3);
}

.phone .ph-hint-actions {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--site-brand);
}

.phone .ph-hint-actions span {
  transition: transform 0.15s;
}

.phone .ph-hint-actions span.tap {
  transform: scale(0.88);
}

/* temperature: the Show more footer, the end-of-list card, the next batch and the slider modal */

.phone .ph-msg-ai.solo {
  position: relative;
  padding-right: 42px;
}

.phone .ph-msg-ai.solo:not([hidden]) + .ph-msg-ai {
  margin-top: 21px;
}

.phone .ph-msg-thinking.spaced {
  margin-top: 21px;
}

.phone .ph-msg-ai.more-intro {
  margin-top: 21px;
}

.phone .search-more {
  margin: 21px 0;
  padding-top: 0;
}

.phone .ph-list-end {
  margin: 21px 0;
  background: var(--site-surface);
  border: 1px solid var(--app-line2);
  border-radius: 14px;
  padding: 14px;
}

.phone .ph-list-end p {
  margin: 0 0 10.5px;
  font-size: 12.25px;
  line-height: 19.9px;
  color: var(--app-ink2);
  text-align: center;
}

.phone .ph-list-end small {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  line-height: 14px;
  color: var(--site-muted);
  text-align: center;
}

.phone .ph-more-button {
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}

.phone .ph-more-button.tap {
  transform: scale(0.97);
  box-shadow: 0 0 0 6px rgba(147, 165, 245, 0.5);
}

.phone .ph-more-button.busy {
  opacity: 0.6;
}

.phone .ph-more-button .ph-spinner {
  width: 18px;
  height: 18px;
  margin: 0;
}

.phone .ph-filter-chip.ph-temp.tap {
  box-shadow: 0 0 0 6px rgba(147, 165, 245, 0.5);
}

.phone .ph-overlay.tight {
  padding: 0 21px;
}

.phone .ph-temp-modal {
  width: 100%;
  background: var(--site-surface);
  border-radius: 21px;
  padding: 21px;
}

.phone .ph-temp-modal-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--site-soft);
  color: var(--site-brand);
  margin: 0 auto 14px;
}

.phone .ph-temp-modal-icon .ph-icon {
  width: 26px;
  height: 26px;
}

.phone .ph-temp-modal > b {
  display: block;
  text-align: center;
  font-size: 15.75px;
  line-height: 24.5px;
  font-weight: 700;
  margin-bottom: 7px;
}

.phone .ph-temp-modal > p {
  margin: 0 0 17.5px;
  text-align: center;
  font-size: 12.25px;
  line-height: 19.9px;
  color: var(--site-muted);
}

.phone .ph-temp-modal .ph-temp-scale {
  margin-bottom: 3.5px;
}

.phone .ph-temp-modal .ph-temp-track {
  height: 44px;
  margin: 4px 0;
}

.phone .ph-temp-modal .ph-temp-track i {
  top: 18px;
}

.phone .ph-temp-modal .ph-temp-track b {
  top: 12px;
}

.phone .ph-temp-modal .ph-temp-legend {
  margin: 3.5px 0;
}

.phone .ph-temp-modal .ph-temp-scale {
  justify-content: space-between;
}

.phone .ph-temp-modal .ph-temp-scale .ph-precise,
.phone .ph-temp-modal .ph-temp-scale .ph-broad {
  flex: none;
}

.phone .ph-temp-modal .ph-temp-legend span {
  white-space: normal;
}

.phone .ph-temp-done {
  display: block;
  margin-top: 17.5px;
  background: var(--site-brand);
  color: var(--site-surface);
  border-radius: 14px;
  padding: 12.25px 0;
  text-align: center;
  font-size: 12.25px;
  line-height: 17.5px;
  font-weight: 700;
  transition: transform 0.15s;
}

.phone .ph-temp-done.tap {
  transform: scale(0.94);
}

/* Visitors who asked for reduced motion get still frames: spinners, cursors and slides do not move. */

@media (prefers-reduced-motion: reduce) {
  .phone * {
    animation: none !important;
    transition: none !important;
  }
}