/* Tolkimogi landing page. Tokens follow apps/mobile/src/ui/theme.ts and design/DESIGN-SYSTEM.md. */
@font-face {
  font-family: Rubik;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/rubik-400.woff2) format('woff2');
}
@font-face {
  font-family: Rubik;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/rubik-500.woff2) format('woff2');
}
@font-face {
  font-family: Rubik;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/rubik-700.woff2) format('woff2');
}
@font-face {
  font-family: Rubik;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/rubik-800.woff2) format('woff2');
}

:root {
  --ink: #2a2350;
  --ink2: #5e5884;
  --line: #e6e3f0;
  --mist: #f4f2fa;
  --paper: #fff;
  --sun: #ffcf3f;
  --sun-l: #fff2c4;
  --sun-d: #d6a61c;
  --sky: #7cc8ff;
  --sky-l: #ddf1ff;
  --ok: #11734f;
  --ok-l: #ddf5ec;
  --berry: #f0507a;
  --danger: #b4232b;
  --danger-l: #fdebed;
  --night: #1b1736;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --r-xl: 24px;
  --wrap: 1120px;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    400 17px/1.55 Rubik,
    'Segoe UI',
    system-ui,
    sans-serif;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(32px, 6vw, 54px);
}
h2 {
  font-size: clamp(26px, 4vw, 38px);
}
h3 {
  font-size: 19px;
  font-weight: 700;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
p,
li,
summary {
  text-wrap: pretty;
}
p {
  margin: 0;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 18px;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-s);
}
.skip:focus {
  top: 12px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  text-decoration: none;
  margin-right: auto;
  min-height: 44px;
}
.logo img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.lang {
  position: relative;
}
.lang summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: 99px;
  font-weight: 700;
  font-size: 15px;
}
/* On the narrowest phones the code alone names the language, so the logo keeps its room. */
@media (max-width: 340px) {
  .lang .name {
    display: none;
  }
}
.lang summary::-webkit-details-marker {
  display: none;
}
.lang summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 200px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--r-m);
  box-shadow: 0 8px 24px rgba(42, 35, 80, 0.16);
}
.lang a {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-s);
  text-decoration: none;
}
.lang a:hover,
.lang a[aria-current] {
  background: var(--mist);
}
.code {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--mist);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.top .btn {
  display: none;
}
@media (min-width: 720px) {
  .top .btn {
    display: inline-flex;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: 99px;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--sun-d);
  font:
    700 18px/1 Rubik,
    'Segoe UI',
    system-ui,
    sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--sun-d);
}
.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.top .btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  box-shadow: 0 3px 0 var(--sun-d);
}

/* Hero */
.hero {
  background: linear-gradient(180deg, #4fb2ff 0%, #8fd0ff 55%, #d9f1ff 100%);
  padding: 40px 0 0;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  gap: 28px;
  align-items: center;
  padding-bottom: 44px;
}
@media (min-width: 920px) {
  .hero .wrap {
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
  }
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: #fff;
  border: 2px solid var(--ink);
  font-weight: 700;
  font-size: 14px;
}
.badge::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
}
.hero h1 {
  margin: 18px 0 14px;
}
.lead {
  font-size: 19px;
  max-width: 34em;
}
.points {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: grid;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
}
.points li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.points li::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--ok)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
/* The example conversation as it looks inside the app: the hero's proof, shown before any mascot. */
.phone {
  justify-self: center;
  width: min(100%, 400px);
  border: 3px solid var(--ink);
  border-radius: 36px;
  background: var(--ink);
  padding: 10px;
  box-shadow: 0 12px 0 rgba(42, 35, 80, 0.18);
}
.phone-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 12px;
  color: #fff;
}
.phone-top img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}
.phone-top strong {
  display: block;
  font-size: 15px;
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #bdf5dc;
}
.live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.phone .chat {
  border: 0;
  border-radius: 26px;
}
#join {
  scroll-margin-top: 80px;
}

/* Waitlist form */
.wl {
  margin-top: 22px;
  padding: 18px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--r-xl);
  display: grid;
  gap: 14px;
  max-width: 520px;
}
.wl label.field {
  display: grid;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
}
.wl input[type='email'] {
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid var(--ink2);
  border-radius: var(--r-m);
  font:
    400 17px Rubik,
    'Segoe UI',
    system-ui,
    sans-serif;
  color: var(--ink);
  background: var(--mist);
}
.wl input[type='email']:focus {
  border-color: var(--ink);
  background: #fff;
}
.wl fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.wl legend {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.seg label {
  position: relative;
}
.seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 2px solid var(--ink2);
  border-radius: var(--r-m);
  font-weight: 700;
  cursor: pointer;
}
.seg input:checked + span {
  border-color: var(--ink);
  background: var(--sun-l);
}
.seg input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
}
.check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--ink);
}
.check a {
  font-weight: 700;
}
.wl .btn {
  width: 100%;
}
.hint {
  font-size: 14px;
  color: var(--ink2);
}
.msg {
  font-weight: 700;
  font-size: 15px;
}
.msg:empty {
  display: none;
}
.msg.ok {
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--ok-l);
  color: var(--ok);
}
.msg.err {
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--danger-l);
  color: var(--danger);
}
.wl.done .field,
.wl.done fieldset,
.wl.done .check,
.wl.done .btn,
.wl.done .hint {
  display: none;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sections */
section {
  padding: 64px 0;
}
.head {
  max-width: 44em;
  margin-bottom: 32px;
}
.head p {
  margin-top: 12px;
  font-size: 18px;
  color: var(--ink2);
}
.mist {
  background: var(--mist);
}
.grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 720px) {
  .grid.two {
    grid-template-columns: 1fr 1fr;
  }
  .grid.three {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Long card texts get too narrow in three columns on tablets. */
@media (min-width: 720px) and (max-width: 979px) {
  .grid.why {
    grid-template-columns: 1fr 1fr;
  }
}
.card {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px;
}
.card p {
  margin-top: 8px;
  color: var(--ink2);
}
.tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 14px;
}
.tile svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Video */
.video {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--night);
}
.video video,
.video iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Where it helps: eight places as picture tiles */
.where-title {
  margin: 48px 0 16px;
  font-size: 22px;
}
.where {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.where li {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-l);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  min-width: 0;
}
.where img {
  width: 56px;
  height: 56px;
}
.where span {
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 359px) {
  .where li {
    font-size: 12.5px;
  }
  .where img {
    width: 48px;
    height: 48px;
  }
}
@media (min-width: 720px) {
  .where {
    grid-template-columns: repeat(8, 1fr);
  }
  .where img {
    width: 64px;
    height: 64px;
  }
}

/* How it works: numbered steps */
.steps {
  list-style: none;
  padding: 0;
}
.step {
  position: relative;
}
.num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--sun);
  border: 2px solid var(--ink);
  font-weight: 800;
  font-size: 18px;
}
.step .people {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0;
}
.step .people img {
  width: 44px;
  height: 44px;
}
.film-head {
  margin: 56px 0 24px;
}
.film-head h3 {
  font-size: 24px;
}

/* Prices */
.plan {
  display: flex;
  flex-direction: column;
}
.plan-name {
  font-weight: 700;
  color: var(--ink2);
}
.card .plan-price {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}
.plan.main {
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--sun);
}
.plan .btn {
  margin-top: 18px;
  align-self: flex-start;
}

/* Hero example: three conversations behind tabs (radio buttons, so it works without JavaScript) */
.chat-head {
  flex-wrap: wrap;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tabs label {
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink2);
  background: #fff;
}
#scene-0:checked ~ .chat-head label[for='scene-0'],
#scene-1:checked ~ .chat-head label[for='scene-1'],
#scene-2:checked ~ .chat-head label[for='scene-2'] {
  border-color: var(--ink);
  background: var(--sun-l);
  color: var(--ink);
}
.chat input:focus-visible ~ .chat-head .tabs {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 99px;
}
/* All three are stacked in one cell, so the phone keeps the height of the longest and nothing jumps. */
.scenes {
  display: grid;
}
.scene {
  grid-area: 1 / 1;
  display: grid;
  gap: 10px;
  align-content: start;
  visibility: hidden;
}
#scene-0:checked ~ .scenes .s0,
#scene-1:checked ~ .scenes .s1,
#scene-2:checked ~ .scenes .s2 {
  visibility: visible;
}
.chat {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--r-xl);
  padding: 18px;
  display: grid;
  gap: 10px;
}
.chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}
.tag {
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--sun-l);
  font-size: 13px;
  font-weight: 700;
}
.say {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--r-l);
  border: 2px solid var(--ink);
  font-size: 16px;
}
.say small {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink2);
  margin-bottom: 2px;
}
.say.them {
  background: #fff;
  border-bottom-left-radius: 4px;
}
.say.ai {
  background: var(--sky-l);
  border-bottom-left-radius: 4px;
}
.say.ai-them {
  background: var(--sky-l);
  border-style: dashed;
  border-bottom-left-radius: 4px;
}
.say.me {
  justify-self: end;
  background: var(--sun-l);
  border-bottom-right-radius: 4px;
}

/* Made around you */
.people {
  display: flex;
  margin-bottom: 14px;
}
.people img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--ink);
  object-fit: cover;
}
.people img + img {
  margin-left: -10px;
}

/* FAQ */
.faq details {
  border: 2px solid var(--line);
  border-radius: var(--r-l);
  background: #fff;
}
.qa {
  display: grid;
  gap: 10px;
  align-items: start;
}
@media (min-width: 920px) {
  .qa {
    grid-template-columns: 1fr 1fr;
  }
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 18px;
  font-weight: 700;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mist);
  font-size: 20px;
  font-weight: 700;
}
.faq details[open] summary::after {
  content: '−';
}
.faq details p {
  padding: 0 18px 18px;
  color: var(--ink2);
}

/* Final call */
.final {
  background: var(--ink);
  color: #fff;
}
.final .wrap {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 920px) {
  .final .wrap {
    grid-template-columns: 1fr 1fr;
  }
}
.final .wrap > div > p {
  margin-top: 12px;
  color: #d9d3f5;
  font-size: 18px;
}
.final .wl {
  margin: 0;
  color: var(--ink);
  justify-self: stretch;
}
@media (min-width: 920px) {
  .final .wl {
    justify-self: end;
    width: 100%;
  }
}

/* Footer */
.foot {
  padding: 28px 0 32px;
  font-size: 14px;
  color: var(--ink2);
  border-top: 1px solid var(--line);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
}
.foot-brand img {
  border-radius: 8px;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.foot a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.foot .fine {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink2);
}
@media (max-width: 560px) {
  .foot nav {
    flex-direction: column;
    gap: 0;
  }
}

/* Text pages: privacy, thanks, not found */
.doc {
  padding: 48px 0 64px;
}
.doc .wrap {
  max-width: 760px;
}
.doc h1 {
  font-size: clamp(28px, 5vw, 42px);
}
.doc h2 {
  font-size: 21px;
  margin: 28px 0 8px;
}
.doc p + p {
  margin-top: 10px;
}
.doc .updated {
  margin-top: 8px;
  color: var(--ink2);
}
.doc .btn {
  margin-top: 28px;
}
.center {
  text-align: center;
}
.center img {
  margin: 0 auto 20px;
}

/* Felix's cartoon */
.film {
  max-width: 900px;
  margin: 0 auto;
  border: 3px solid var(--ink);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 0 rgba(42, 35, 80, 0.18);
}
.film-frame {
  position: relative;
}
.film .stage {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  font-family: Rubik, 'Segoe UI', system-ui, sans-serif;
}
.fl-sc,
.fl-pop {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s,
    visibility 0.35s;
}
.fl-sc.on,
.fl-pop.on {
  opacity: 1;
  visibility: visible;
}
.fl-b {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.fl-b.on {
  opacity: 1;
  transform: none;
}
/* The phone in the paw sits in front of the cat; its screen pulses while Eva speaks. */
.film .nf .hold {
  display: none;
  transform-box: view-box;
  transform-origin: 146px 142px;
}
.film .nf.hold .hold {
  display: inline;
  animation: fl-raise 0.5s ease-out;
}
.film .nf.hold .paw-rest,
.film .nf.hold .arm-up {
  display: none;
}
@keyframes fl-raise {
  from {
    transform: translate(-12px, 46px) rotate(22deg);
    opacity: 0;
  }
}
.film .nf .tr-g,
.film .nf.tr .eva-g {
  display: none;
}
.film .nf.tr .tr-g {
  display: inline;
}
.film .nf .ring {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.film .nf.eva-talk .ring {
  animation: fl-ring 1.4s ease-out infinite;
}
.film .nf.eva-talk .r2 {
  animation-delay: 0.7s;
}
@keyframes fl-ring {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.1);
  }
}
#fl-dots .dots circle {
  animation: fl-dot 1.2s infinite;
}
#fl-dots .dots circle:nth-child(2) {
  animation-delay: 0.2s;
}
#fl-dots .dots circle:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes fl-dot {
  50% {
    fill: var(--ink2);
  }
}
#fl-tick {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s;
}
#fl-tick.press {
  transform: scale(0.82);
}
#fl-done .bell {
  animation: fl-bell 0.9s ease-in-out 2;
}
@keyframes fl-bell {
  25% {
    rotate: 14deg;
  }
  75% {
    rotate: -14deg;
  }
}
/* Walks: the group slides, the legs trot, the tail wags, the free paw swings. */
.fl-walker {
  transition: transform 1s linear;
}
.fl-face {
  transform-box: fill-box;
  transform-origin: center;
}
.fl-face.flip {
  transform: scaleX(-1);
}
#fl-q {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(0.4);
  transition:
    transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1),
    opacity 0.25s,
    visibility 0.25s;
}
#fl-q.on {
  transform: scale(1);
}
.film .nf .foot,
.film .nf .fa {
  transform-box: view-box;
}
.film .nf .foot {
  transform-origin: 110px 203px;
}
.film .nf .fa,
.film .nf .pen {
  transform-origin: 80px 126px;
  transition: transform 0.4s ease;
}
.film .nf.walk .foot-l {
  animation: fl-step 0.36s ease-in-out infinite alternate;
}
.film .nf.walk .foot-r {
  animation: fl-step 0.36s ease-in-out infinite alternate-reverse;
}
@keyframes fl-step {
  from {
    transform: translate(-6px, 0);
  }
  to {
    transform: translate(6px, -7px);
  }
}
.film .nf.walk .bob {
  animation: fl-trot 0.36s ease-in-out infinite alternate;
}
@keyframes fl-trot {
  to {
    transform: translateY(-4px);
  }
}
.film .nf.walk .tail {
  animation: fl-wag 0.36s ease-in-out infinite alternate;
}
@keyframes fl-wag {
  from {
    transform: rotate(-9deg);
  }
  to {
    transform: rotate(9deg);
  }
}
.film .nf.walk .fa,
.film .nf.walk .pen {
  animation: fl-swing 0.36s ease-in-out infinite alternate;
}
@keyframes fl-swing {
  from {
    transform: rotate(-14deg);
  }
  to {
    transform: rotate(14deg);
  }
}
/* A shrug: both paws out, palms up; with the phone in one paw, only the free one. */
.film .nf .shrug {
  display: none;
}
.film .nf[data-s='puzzled'] .shrug {
  display: inline;
}
.film .nf[data-s='puzzled'] .fa,
.film .nf[data-s='puzzled'] .pen,
.film .nf[data-s='puzzled'] .paw-rest,
.film .nf[data-s='puzzled'] .arm-up,
.film .nf.hold[data-s='puzzled'] .shrug .r,
.film .nf[data-s='point'] .paw-rest {
  display: none;
}
.film .nf .shrug .l,
.film .nf .shrug .r {
  transform-box: view-box;
  animation: fl-shrug 0.35s ease-out;
}
.film .nf .shrug .l {
  transform-origin: 82px 128px;
}
.film .nf .shrug .r {
  transform-origin: 138px 128px;
}
@keyframes fl-shrug {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}
/* Closed eyes are a bold dark line, not a hairline. */
.film .nf .wink path,
.film .nf .shut path {
  stroke-width: 6;
}
.film .nf.hold[data-s='talk'] .nhead {
  transform: rotate(6deg);
}
.film .nf[data-s='puzzled'] .wave,
.film .nf[data-s='point'] .wave {
  animation: none;
}
/* Pointing the way: the arm goes out to the side. */
.film .nf[data-s='point'] .arm-up {
  display: inline;
  transform: rotate(38deg);
}
/* Holding the phone, Felix looks at its screen. */
.film .nf.hold .blink ellipse:nth-child(2) {
  transform-box: view-box;
  transition: transform 0.3s;
}
.film .nf.hold[data-s='talk'] .blink ellipse:nth-child(2),
.film .nf.hold[data-s='listen'] .blink ellipse:nth-child(2),
.film .nf.hold[data-s='puzzled'] .blink ellipse:nth-child(2) {
  transform: translate(3px, 3px);
}
/* A real wink on the end card: one eye stays open. */
.film .nf.one[data-s='happy'] .eye-l {
  display: inline;
}
.film .nf.one[data-s='happy'] .wink path:first-child {
  display: none;
}
/* Felix talks with his free paw too. */
.film .nf.hold[data-s='talk'] .fa,
.film .nf.hold[data-s='talk'] .pen {
  animation: fl-gest 0.45s ease-in-out infinite alternate;
}
@keyframes fl-gest {
  from {
    transform: rotate(-6deg);
  }
  to {
    transform: rotate(16deg);
  }
}
/* The translator panel slides up; the cuts switch without a fade. */
#fl-tr {
  transform: translateY(30px);
  transition:
    opacity 0.35s,
    visibility 0.35s,
    transform 0.4s;
}
#fl-tr.on {
  transform: none;
}
.fl-cut {
  transition: none;
}
.film:not(.playing) .stage * {
  animation-play-state: paused !important;
}
.film.still .stage *,
.film.reduce .stage * {
  animation: none !important;
  transition: none !important;
}
.film-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  border: 0;
  background: rgba(42, 35, 80, 0.28);
  color: var(--ink);
  cursor: pointer;
}
.film-play .disc {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--sun);
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--sun-d);
}
.film-play svg {
  width: 38px;
  height: 38px;
  margin-left: 5px;
  fill: var(--ink);
}
.film-play .dur {
  padding: 4px 12px;
  border-radius: 99px;
  background: #fff;
  border: 2px solid var(--ink);
  font-weight: 800;
  font-size: 15px;
}
.film-play .dur:empty {
  display: none;
}
.film.started .film-play {
  display: none;
}
.film-end {
  position: absolute;
  left: 50%;
  right: 5%;
  bottom: 12%;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.film.ended .film-end {
  display: flex;
}
.ghost {
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: #fff;
  color: var(--ink);
  font:
    700 16px/1 Rubik,
    'Segoe UI',
    system-ui,
    sans-serif;
  cursor: pointer;
}
.film-sub {
  display: grid;
  place-items: center;
  min-height: 3.2em;
  margin: 0;
  padding: 10px 18px;
  border-top: 3px solid var(--ink);
  background: var(--night);
  color: #fff;
  font-weight: 700;
  font-size: clamp(17px, 2.8vw, 22px);
  line-height: 1.35;
  text-align: center;
}
.film-sub b {
  color: var(--sun);
}
@media (max-width: 600px) {
  .film-sub {
    min-height: 3.6em;
  }
}
.film-ctl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--night);
  border-top: 1px solid #3a3366;
}
.film-ctl button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.film-ctl svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.film-ctl .i-play {
  fill: currentColor;
}
.film-ctl .i-pause,
.film.playing .film-ctl .i-play,
.film-ctl .i-off,
.film.muted .film-ctl .i-on {
  display: none;
}
.film.playing .film-ctl .i-pause,
.film.muted .film-ctl .i-off {
  display: inline;
}
.film-ctl button[hidden] {
  display: none;
}
.film-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #3a3366;
  overflow: hidden;
}
.film-bar i {
  display: block;
  height: 100%;
  background: var(--sun);
  transform: scaleX(0);
  transform-origin: left;
}
.film-note {
  max-width: 900px;
  margin: 14px auto 0;
  color: var(--ink2);
  font-size: 14px;
  text-align: center;
}
.film-text {
  max-width: 900px;
  margin: 12px auto 0;
}
.film-text summary {
  cursor: pointer;
  font-weight: 700;
  text-align: center;
}
.film-text ol {
  margin: 12px 0 0;
  padding-left: 1.4em;
  display: grid;
  gap: 6px;
}
.film-text .code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 600px) {
  .film-play .disc {
    width: 64px;
    height: 64px;
  }
  .film-play svg {
    width: 28px;
    height: 28px;
  }
  .film-end {
    position: static;
    max-width: none;
    justify-content: center;
    padding: 12px;
    background: #fff;
    border-top: 3px solid var(--ink);
  }
}

/* Hover and press feedback. Only on devices with a real pointer, so a tap never leaves a card stuck raised. */
.card,
.faq details,
.seg span,
.wl input[type='email'],
.lang summary,
.logo img,
.tile,
.people img,
.where img,
.tabs label,
.film-play .disc,
.film-ctl button {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.faq summary::after {
  transition: transform 0.2s ease;
}
.check input,
.check span {
  cursor: pointer;
}
.foot a,
.check a,
.doc a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}
.check a,
.doc a {
  text-decoration-color: currentColor;
}
.seg label:active span {
  transform: scale(0.98);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--sun-d);
    background: #ffd95e;
  }
  .btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--sun-d);
  }
  .card:hover,
  .motion .card.reveal.shown:hover {
    transform: translateY(-4px);
    border-color: #cfc8e8;
    box-shadow: 0 12px 28px rgba(42, 35, 80, 0.1);
  }
  .card:hover .tile {
    transform: scale(1.08) rotate(-4deg);
  }
  .card:hover .people img {
    transform: translateY(-2px);
  }
  .faq details:hover {
    border-color: #cfc8e8;
  }
  .tabs label:hover {
    border-color: var(--ink);
  }
  .where li:hover img {
    transform: scale(1.08) rotate(-4deg);
  }
  .faq summary:hover {
    color: var(--ink2);
  }
  .seg label:hover span {
    transform: translateY(-2px);
    border-color: var(--ink);
    background: var(--mist);
  }
  .seg label:hover input:checked + span {
    background: var(--sun-l);
  }
  .wl input[type='email']:hover {
    border-color: var(--ink);
  }
  .lang summary:hover {
    border-color: var(--ink2);
    background: var(--mist);
  }
  .logo:hover img {
    transform: rotate(-8deg) scale(1.06);
  }
  .foot a:hover,
  .check a:hover,
  .doc a:hover {
    text-decoration-line: underline;
    text-decoration-color: var(--sun-d);
  }
  .film-play:hover .disc {
    transform: scale(1.08);
  }
  .film-ctl button:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* Motion: the hero comes in on load, the hero chat types itself out, sections rise in as they scroll into view.
   site.js adds .motion to <html> only when the visitor has not asked for reduced motion, so without it (or without
   JavaScript) everything is simply shown. */
.motion .hero .wrap > div:first-child > * {
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.motion .hero .wrap > div:first-child > :nth-child(2) {
  animation-delay: 0.08s;
}
.motion .hero .wrap > div:first-child > :nth-child(3) {
  animation-delay: 0.16s;
}
.motion .hero .wrap > div:first-child > :nth-child(4) {
  animation-delay: 0.24s;
}
.motion .hero .wrap > div:first-child > :nth-child(5) {
  animation-delay: 0.32s;
}
.motion .hero .phone {
  animation:
    rise 0.7s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both,
    float 4s 1s ease-in-out;
}
.motion #scene-0:checked ~ .scenes .s0 .say,
.motion #scene-1:checked ~ .scenes .s1 .say,
.motion #scene-2:checked ~ .scenes .s2 .say {
  animation-name: pop;
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1);
  animation-fill-mode: both;
}
.motion .hero .say:nth-of-type(1) {
  animation-delay: 0.7s;
}
.motion .hero .say:nth-of-type(2) {
  animation-delay: 1.3s;
}
.motion .hero .say:nth-of-type(3) {
  animation-delay: 1.9s;
}
.motion .hero .say:nth-of-type(4) {
  animation-delay: 2.5s;
}
.motion .hero .say:nth-of-type(5) {
  animation-delay: 3.1s;
}
.motion .hero .say:nth-of-type(6) {
  animation-delay: 3.7s;
}
.motion .live::before {
  animation: beat 1.6s ease-in-out 3;
}
.motion .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--delay, 0s);
}
.motion .reveal.shown {
  opacity: 1;
  transform: none;
}
/* Once the rise has finished (site.js adds .settled), cards go back to their quick hover transition. */
.motion .card.reveal.settled {
  transition:
    opacity 0.6s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
/* Decorative motion ends within five seconds (WCAG 2.2.2). If the visitor turns reduced motion on later, or the
   page loaded with .motion before that, nothing moves and every revealed block is shown. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .motion .reveal,
  .btn:hover,
  .btn:active,
  .card:hover,
  .motion .card.reveal.shown:hover,
  .card:hover .tile,
  .card:hover .people img,
  .logo:hover img,
  .seg label:hover span,
  .film-play:hover .disc {
    opacity: 1;
    transform: none;
  }
}
.film-ctl button:focus-visible {
  outline-color: #fff;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
}
@keyframes float {
  50% {
    transform: translateY(-8px);
  }
}
@keyframes beat {
  50% {
    box-shadow: 0 0 0 6px rgba(17, 115, 79, 0.35);
  }
}