/* ==========================================================================
   TengoChat home page, after site.css.

   The page knows what time it is. The headline, then a conversation set at
   display size, no phone around it: her status and her first line follow the
   visitor's own hour, and the messages arrive once, as they would. Below it,
   each thing a companion does is shown as a small, true piece of the product
   (what she remembers, a call, a video call, her day, a call at eight, what
   she sends), each in its own form, with one of TengoChat's drawn people
   perched on it. The calls are the one black band on the page, by day and at
   night. The interface is ink and paper; the colour is in the drawings, the
   faces, the icon tiles and the green and red of answering and ending a call.
   ========================================================================== */

.is-home .site-main > section + section { margin-top: var(--sec); }

/* A visual beside its words: words left, picture right (flip swaps them). */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 88px; align-items: center; }
.flip .split-copy { order: 2; }
.split > :not(.split-copy) { justify-self: end; width: 100%; }
.flip .split > :not(.split-copy) { justify-self: start; }

/* -------------------------------------------------------------------- hero */

.hero { padding-top: clamp(40px, 6.5vw, 96px); }
.hero-title { margin: 0; max-width: 13em; font-size: var(--fs-h1); font-weight: 600; line-height: 0.98; letter-spacing: -0.05em; text-wrap: balance; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 88px; align-items: start; margin-top: clamp(32px, 4.4vw, 64px); }
.hero-sub { margin: 0; max-width: 29em; color: var(--text-2); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -0.014em; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.hero-note svg { flex: none; margin-top: 3px; color: var(--text); }
.hero-more { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }
.hero-more:not(:has(> :not([hidden]))) { display: none; }
/* A drawn person beside the headline (wide screens), or beside her name above the conversation (phones). */
.hero .lp-wrap { position: relative; }
.hero-art { position: absolute; top: -6px; right: var(--gutter); width: var(--hero-art); height: auto; pointer-events: none; }
.hero { --hero-art: clamp(176px, 16.5vw, 236px); }
/* The headline never runs under the drawing, in any language. */
@media (min-width: 961px) { .hero-title { max-width: min(13em, calc(100% - var(--hero-art) - 32px)); } }
/* On phones the Install line keeps its place from the first paint (the head script marks phones that may
   install), so the conversation below never moves when the browser says yes. */
@media (max-width: 960px) { html.may-install .hero-more { display: flex; min-height: 24px; } }

/* The conversation, at display size. */
.thread { margin: 0; font-size: clamp(17px, 1.45vw, 21px); }
.th-who { display: flex; align-items: center; gap: 12px; }
.th-face { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); object-fit: cover; }
.th-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.th-id b { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.th-status { display: grid; color: var(--text-2); font-size: 14px; }
.th-status > span { grid-area: 1 / 1; }
.th-typing { opacity: 0; color: var(--text); }
.th-stamp { margin: 24px 0 14px; color: var(--text-3); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.th-log { display: flex; flex-direction: column; gap: 6px; }
.th-row { display: grid; justify-items: start; }
.th-row > * { grid-area: 1 / 1; }
.th-row .bub { max-width: 90%; transform-origin: 0 100%; }
.th-me { justify-items: end; margin-top: 12px; }
.th-me .bub { transform-origin: 100% 100%; }
.th-row.r4 { margin-top: 12px; }
.th-dots, .hello-dots { display: inline-flex; align-items: center; gap: 5px; height: calc(1.4em + 21px); padding-top: 0; padding-bottom: 0; opacity: 0; }
.th-dots i, .hello-dots i, .cb-log .typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.th-mem { display: flex; align-items: center; gap: 7px; margin: 4px 0 0 6px; color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.th-mem svg { flex: none; }
.th-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 18px; border: 1px solid var(--line-3); border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1; }
.th-note { margin: 24px 0 0; color: var(--text-3); font-size: 13px; }

/* The one orchestrated moment: typing, then her lines, your reply, her answer.
   Only with script (html[data-phase] is set by the page's first script) and
   only once the conversation is on screen; without it, everything is there. */
html[data-phase] .th-wait .th-row > .bub:not(.th-dots), html[data-phase] .th-wait .th-mem, html[data-phase] .th-wait .th-chip { opacity: 0; }
.th-go .r1 > .bub:not(.th-dots) { animation: th-in 300ms var(--ease-out) 0.75s both; }
.th-go .r2 > .bub:not(.th-dots) { animation: th-in 300ms var(--ease-out) 1.65s both; }
.th-go .th-mem { animation: th-fade 300ms var(--ease-out) 1.95s both; }
.th-go .r3 > .bub { animation: th-in 300ms var(--ease-out) 2.3s both; }
.th-go .r4 > .bub:not(.th-dots) { animation: th-in 300ms var(--ease-out) 3.1s both; }
.th-go .th-chip { animation: th-in 300ms var(--ease-out) 3.4s both; }
.th-go .r1 > .th-dots { animation: th-dots 0.6s linear 0.15s both; }
.th-go .r2 > .th-dots { animation: th-dots 0.6s linear 1.05s both; }
.th-go .r4 > .th-dots { animation: th-dots 0.6s linear 2.5s both; }
.th-dots i:nth-child(2) { --k: 1; }
.th-dots i:nth-child(3) { --k: 2; }
.th-go .r1 .th-dots i { animation: th-bob 0.4s ease-in-out calc(0.15s + var(--k, 0) * 0.1s) 1; }
.th-go .r2 .th-dots i { animation: th-bob 0.4s ease-in-out calc(1.05s + var(--k, 0) * 0.1s) 1; }
.th-go .r4 .th-dots i { animation: th-bob 0.4s ease-in-out calc(2.5s + var(--k, 0) * 0.1s) 1; }
.th-go .th-now { animation: th-now 3.3s linear both; }
.th-go .th-typing { animation: th-typing 3.3s linear both; }
@keyframes th-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes th-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes th-dots { 0% { opacity: 0; } 1%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes th-bob { 0%, 100% { transform: none; opacity: 0.45; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes th-typing { 0%, 4.4% { opacity: 0; } 4.5%, 22.7% { opacity: 1; } 22.8%, 31.7% { opacity: 0; } 31.8%, 50% { opacity: 1; } 50.1%, 75.7% { opacity: 0; } 75.8%, 93.9% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes th-now { 0%, 4.4% { opacity: 1; } 4.5%, 22.7% { opacity: 0; } 22.8%, 31.7% { opacity: 1; } 31.8%, 50% { opacity: 0; } 50.1%, 75.7% { opacity: 1; } 75.8%, 93.9% { opacity: 0; } 94%, 100% { opacity: 1; } }

/* ------------------------------------------------- their home, in 3D */

/* A short film made with the real 3D home, captions in the visitor's language over it, and the home
   itself to walk around (homedemo.js, loaded on the tap). The film keeps the home whole at any width:
   16:10 on wide screens, 4:3 (the film's own shape) on phones, where the buttons sit under it. */
.tour-head { max-width: 40em; }
.tour-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 4vw, 52px); }
.tour-video, .tour-live { grid-area: 1 / 1; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden; background: linear-gradient(#0b0e1f, #04050b); }
:root[data-theme="light"] :is(.tour-video, .tour-live) { background: linear-gradient(#d8e2f4, #f7f4ef); }
.tour-video { object-fit: cover; }
.tour-film { display: contents; }
.tour-chip, .tour-cap, .tour-acts { z-index: 1; }
.tour-chip { grid-area: 1 / 1; align-self: start; justify-self: start; display: flex; align-items: center; gap: 10px; margin: 18px; padding: 5px 16px 5px 5px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tour-chip img { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); object-fit: cover; }
.tour-chip > span { display: flex; flex-direction: column; line-height: 1.25; }
.tour-chip b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; }
.tour-chip small { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; }
.tour-cap { grid-area: 1 / 1; align-self: end; justify-self: start; max-width: min(28em, calc(100% - 330px)); margin: 0 0 22px 20px; padding: 9px 16px 10px; border-radius: 16px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: clamp(15px, 1.35vw, 18px); font-weight: 500; line-height: 1.35; letter-spacing: -0.012em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; translate: 0 8px; transition: opacity 260ms ease, translate 380ms var(--ease-out); pointer-events: none; }
.tour-cap.is-in { opacity: 1; translate: none; }
.tour-acts { grid-area: 1 / 1; align-self: end; justify-self: end; display: flex; gap: 10px; margin: 18px; }
.tour-round { display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bg) 84%, transparent); color: var(--text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; }
.tour-round > span { display: grid; }
.tour-stage:not(.is-playing) .ti-pause, .tour-stage.is-playing .ti-play { display: none; }
.tour-walk { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: background-color 140ms; }
.tour-walk:hover { background: var(--btn-hover); }
.tour-walk:disabled { cursor: progress; opacity: 0.7; }
:is(.tour-round, .tour-walk):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.tour-live { position: relative; z-index: 2; }
.tour-live[hidden] { display: none; }
.tour-stage.is-live .tour-film { display: none; }
.tour-stage.is-live .tour-video { visibility: hidden; }
/* Without script the film cannot start, so its buttons stay away. */
:root:not([data-phase]) .tour-acts { display: none; }
.tour-points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 32px 0 0; padding: 0; }
.tour-points li { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-content: start; padding: 20px 0; border-top: 1px solid var(--line); }
.tour-points li > b, .tour-points li > span:last-child { grid-column: 2; }
.tour-points b { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; }
.tour-points li > span:last-child { margin-top: 4px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.tour-points > li:nth-child(1) .cap-ic { --tile: var(--mint); }
.tour-points > li:nth-child(2) .cap-ic { --tile: var(--pink); }
.tour-points > li:nth-child(3) .cap-ic { --tile: var(--peri); }

/* ------------------------------------------------- try a conversation */

.try-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 88px; align-items: center; }
.who { display: grid; margin-top: 32px; border-top: 1px solid var(--line); }
.who-row { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.who-row img { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); object-fit: cover; }
.who-row > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who-row strong { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.who-row small { color: var(--text-2); font-size: 14px; }
.who-row::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; border: 1.5px solid var(--line-3); border-radius: 50%; transition: border-width 160ms var(--ease-out), border-color 160ms; }
.who-row[aria-selected="true"]::after { border: 6px solid var(--text); }
.who-row:hover::after { border-color: var(--text); }

.chatbox { display: flex; flex-direction: column; height: 500px; border: 1px solid var(--line-2); border-radius: 28px; overflow: hidden; background: var(--bg); }
.cb-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cb-face { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); object-fit: cover; }
.cb-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cb-who strong { font-size: 15.5px; font-weight: 600; }
.cb-who small { color: var(--text-2); font-size: 13px; }
.cb-who small.is-typing { color: var(--text); }
.cb-acts { display: flex; gap: 18px; margin-left: auto; color: var(--text-2); }
.cb-log { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 18px; overflow: hidden; font-size: 16px; }
.cb-ai { align-self: center; margin: 0 0 auto; padding: 0 12px 12px; color: var(--text-3); font-size: 12.5px; text-align: center; }
.cb-log .bub { max-width: 84%; flex: none; }
.cb-log .bub.them { align-self: flex-start; }
.cb-log .bub.me { align-self: flex-end; }
.cb-log .bub.is-in { animation: th-in 260ms var(--ease-out) both; }
.cb-log .typing { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; height: 43px; }
.cb-log .typing i { animation: th-bob 0.9s ease-in-out infinite; }
.cb-log .typing i:nth-child(2) { animation-delay: 0.12s; }
.cb-log .typing i:nth-child(3) { animation-delay: 0.24s; }
.cb-chip { display: inline-flex; flex: none; align-self: center; align-items: center; gap: 7px; margin: 6px 0; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); font-size: 13.5px; }
.cb-replies { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-end; gap: 8px; min-height: 58px; padding: 0 18px 18px; }
.cb-replies button { height: 40px; padding: 0 16px; border: 1px solid var(--text); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color 140ms, color 140ms; }
.cb-replies button:hover { background: var(--text); color: var(--bg); }
.cb-end { padding: 18px; border-top: 1px solid var(--line); }
.cb-end p { margin: 0 0 14px; color: var(--text-2); font-size: 15px; }
.cb-end-acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------- the mind */

.vela .split { align-items: start; }
.caps, .kinds { list-style: none; margin: 0; padding: 0; }
.caps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid var(--line); }
.caps li, .kinds li { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-content: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
/* Icons sit on tiles in the drawings' colours, ink on top, the same by day and at night. */
.cap-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tile, var(--gold)); color: var(--tile-ink); }
.cap-ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
:is(.caps, .kinds) > li:nth-child(6n + 1) .cap-ic, .safe-list > div:nth-child(4n + 1) .cap-ic { --tile: var(--coral); }
:is(.caps, .kinds) > li:nth-child(6n + 2) .cap-ic, .safe-list > div:nth-child(4n + 2) .cap-ic { --tile: var(--gold); }
:is(.caps, .kinds) > li:nth-child(6n + 3) .cap-ic, .safe-list > div:nth-child(4n + 3) .cap-ic { --tile: var(--mint); }
:is(.caps, .kinds) > li:nth-child(6n + 4) .cap-ic, .safe-list > div:nth-child(4n + 4) .cap-ic { --tile: var(--lilac); }
:is(.caps, .kinds) > li:nth-child(6n + 5) .cap-ic { --tile: var(--sky); }
:is(.caps, .kinds) > li:nth-child(6n + 6) .cap-ic { --tile: var(--pink); }
.caps li > b, .kinds li > b, .caps li > span:last-child, .kinds li > span:last-child { grid-column: 2; }
.caps b, .kinds b { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; }
.caps li > span:last-child, .kinds li > span:last-child { margin-top: 4px; color: var(--text-2); font-size: 15px; line-height: 1.5; }

/* ------------------------------------------- drawn people on the product */

/* Each piece of the product has one of TengoChat's drawn people perched on its
   top edge. The space they need is kept above the piece, so nothing overlaps
   the words around it at any width. */
.stage { position: relative; width: 100%; padding-top: var(--perch, 120px); }
.stage-art { position: absolute; top: 0; z-index: 2; width: var(--art-w, 160px); height: auto; pointer-events: none; }
.stage-mem { max-width: 500px; --art-w: 150px; --perch: 132px; }
.stage-mem .stage-art { right: 18px; }
.stage-call { max-width: 440px; --art-w: 220px; --perch: 150px; }
.stage-call .stage-art { right: -12px; }
.stage-video { max-width: 440px; --art-w: 168px; --perch: 176px; }
.stage-video .stage-art { right: 10px; }
.stage-life { max-width: 500px; --art-w: 190px; --perch: 172px; }
.stage-life .stage-art { left: 0; }
.stage-ring { max-width: 460px; --art-w: 220px; --perch: 160px; }
.stage-ring .stage-art { right: -8px; }

/* ----------------------------------------------------------- what she keeps */

.memory { max-width: 500px; border: 1px solid var(--line-2); border-radius: 24px; overflow: hidden; }
.memory-head { display: flex; align-items: center; gap: 10px; padding: 18px 22px; }
.memory-head img { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); object-fit: cover; }
.memory-head b { font-size: 15.5px; font-weight: 600; }
.memory ul { list-style: none; margin: 0; padding: 0; }
.memory li { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line); overflow: hidden; }
.memory li > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.memory li b { font-size: 15.5px; font-weight: 500; line-height: 1.45; }
.memory li small { color: var(--text-3); font-size: 13px; }
.memory-forget, .memory-restore { flex: none; padding: 2px 0 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 4px; cursor: pointer; transition: color 140ms, text-decoration-color 140ms; }
.memory-forget:hover, .memory-restore:hover { color: var(--text); text-decoration-color: currentColor; }
.memory-restore { padding: 0; color: var(--text); font-weight: 500; }
/* Forgotten: the line folds away (alive.js sets its height first, so it can). */
.memory li.is-gone { height: 0 !important; padding-block: 0; border-top-color: transparent; opacity: 0; }
.memory-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 12px 22px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13.5px; line-height: 1.4; }

/* -------------------------------------------- calls: the one black band */

.band {
  color-scheme: dark;
  --bg: #000000;
  --text: #ffffff;
  --text-2: #a8a8a8;
  --text-3: #7d7d7d;
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.18);
  --line-3: rgba(255, 255, 255, 0.34);
  --surface: #141414;
  --surface-2: #1f1f1f;
  --live: #22c55e;
  --end: #ef4444;
  padding: var(--sec) 0;
  background: var(--bg);
  color: var(--text);
  border-block: 1px solid var(--line);
}
.callcard { max-width: 440px; padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); }
.cc-top { display: flex; align-items: center; gap: 16px; }
.cc-top img { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); object-fit: cover; }
.cc-top b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.cc-top small { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; }
.live-dot { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); font-style: normal; }
.cc-wave { display: flex; align-items: center; gap: 4px; height: 72px; margin: 32px 0 24px; }
.cc-wave i, .vn-wave i { flex: 1; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 3px; background: var(--text); }
.cc-say { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -0.015em; text-wrap: pretty; }
.cc-btns { display: flex; justify-content: center; gap: 18px; margin-top: 32px; }
.cc-btns span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); color: var(--text); }
.cc-btns .cc-end { background: var(--end); color: #fff; }

/* ------------------------------------------------- face to face, on video */

.vtile { position: relative; max-width: 440px; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #141414; color: #fff; }
.vtile video, .vt-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-avatar { position: absolute; left: 50%; top: 40%; width: 132px; height: 132px; border-radius: 50%; background: #262626; overflow: hidden; transform: translate(-50%, -50%); }
.vt-avatar img { width: 100%; height: 100%; }
.vt-live { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); font-size: 13px; font-weight: 500; }
.vt-live .live-dot { background: #22c55e; }
.vt-name { position: absolute; top: 22px; right: 20px; font-size: 14px; font-weight: 600; }
.vt-say { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 12px 16px; border-radius: 18px; background: rgba(0, 0, 0, 0.66); font-size: 16px; line-height: 1.45; }
.vt-self { position: absolute; right: 16px; bottom: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 76px; height: 100px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; background: #262626; color: #a8a8a8; }
.vt-self small { font-size: 11.5px; }

/* --------------------------------------------------------- her day */

/* Her day on a line from morning to night: a sun at the morning, a moon at the night, a dot for each
   moment in the colour of its hour. With motion, the sun walks down the line and each hour lights up. */
.day { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px; list-style: none; max-width: 500px; margin: 0; padding: 0 0 0 46px; }
/* Each moment is a row of the list's own columns, so the times line up and the words start together. */
.day li:not(.day-sky) { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto; grid-template-columns: subgrid; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.day li:last-child { border-bottom: 1px solid var(--line); }
.day li:not(.day-sky)::before { content: ""; position: absolute; top: 50%; left: -37px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--dot, var(--gold)); box-shadow: 0 0 0 4px var(--bg); }
.day li:nth-child(3) { --dot: var(--coral); }
.day li:nth-child(4) { --dot: var(--lilac); }
.day li:nth-child(5) { --dot: var(--peri); }
.day-sky { --edge: 17px; position: absolute; top: 0; bottom: 0; left: 0; width: 30px; }
.day:has(.day-pic) .day-sky { --edge: 35px; }
.day-sky::before { content: ""; position: absolute; top: calc(var(--edge) + 15px); bottom: calc(var(--edge) + 15px); left: 14px; width: 2px; border-radius: 2px; background: linear-gradient(var(--gold), var(--coral) 40%, var(--lilac) 72%, var(--peri)); }
.day-sun, .day-moon { position: absolute; left: 0; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 4px var(--bg); color: var(--tile-ink); }
.day-sun { top: var(--edge); background: var(--gold); }
.day-moon { bottom: var(--edge); background: var(--peri); }
.day-sun svg, .day-moon svg { width: 16px; height: 16px; }
.day time { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.day-text { color: var(--text-2); font-size: 16px; line-height: 1.45; }
.day-pic { width: 64px; height: 64px; border-radius: 14px; background: var(--surface-2); object-fit: cover; }

/* ---------------------------------------------------- call me at eight */

.ring { max-width: 460px; }
.ring-time { margin: 0 0 20px; font-size: clamp(72px, 9vw, 128px); font-weight: 500; line-height: 0.9; letter-spacing: -0.06em; white-space: nowrap; }
.ring-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 24px; background: var(--surface); }
.ring-card img { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-3); object-fit: cover; }
.ring-text { display: flex; flex-direction: column; min-width: 0; margin-right: auto; line-height: 1.3; }
.ring-text b { font-size: 16px; font-weight: 600; }
.ring-text small { color: var(--text-2); font-size: 14px; }
.ring-btn { position: relative; display: grid; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer; transition: opacity 200ms, scale 200ms var(--ease-out); }
.ring-btn:hover { scale: 1.06; }
.ring-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.ring-no { background: var(--end); }
.ring-yes { background: var(--live); }
.ring-time.is-before { color: var(--text-3); }
:is(.is-answered, .is-declined) > .ring-btn { opacity: 0.32; scale: 1; cursor: default; }
.ring-hint { margin: 16px 0 0 4px; color: var(--text-2); font-size: 14.5px; }
.ring-reply { margin: 16px 0 0; }
.ring-reply .bub { font-size: 16px; }
/* Her answer, typed first: three dots, then the words. */
.ring-reply .bub.is-typing { display: inline-flex; align-items: center; height: calc(1.4em + 21px); }
.ring-reply .bub.is-typing::after { content: ""; width: 7px; height: 7px; margin-right: 24px; border-radius: 50%; background: currentColor; box-shadow: 12px 0 currentColor, 24px 0 currentColor; opacity: 0.45; }
.ring-again { margin: 14px 0 0 4px; }

/* ------------------------------------------------------ what she sends */

.kinds { margin-top: 32px; border-top: 1px solid var(--line); }
.sent { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.sent-row { display: flex; justify-content: flex-end; }
.sent .bub { font-size: 16px; }
.sent-photo, .sent-clip { align-self: flex-start; width: min(300px, 86%); margin: 4px 0 6px; }
.sent-photo img, .clip-frame { display: block; width: 100%; height: auto; border-radius: 22px 22px 22px 6px; background: var(--surface-2); }
.sent-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.sent figcaption { margin: 8px 0 0 4px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.voicenote { display: flex; align-self: flex-start; align-items: center; gap: 12px; width: min(280px, 86%); padding: 9px 16px 9px 9px; border: 0; border-radius: 22px 22px 22px 6px; background: var(--theirs); color: var(--theirs-ink); font: inherit; }
button.voicenote { cursor: pointer; }
.vn-play { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: var(--bg); }
.vn-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; }
.vn-wave i { width: 2px; flex: 1 1 2px; opacity: 0.5; }
.voicenote.is-playing .vn-wave i { opacity: 1; }
.vn-len { color: var(--text-2); font-size: 13px; }
.clip-frame { position: relative; overflow: hidden; }
.clip-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.clip-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.62); color: #fff; transform: translate(-50%, -50%); }
.clip-len { position: absolute; right: 10px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12.5px; }

/* ----------------------------------------------------- start in a minute */

.steps-sec .lp-h2 { max-width: 12em; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 48px 0; padding: 0; }
.steps li { position: relative; padding-top: 22px; border-top: 1.5px solid var(--text); }
.step-vis { position: absolute; top: 16px; right: 0; display: flex; align-items: center; }
.step-vis img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg); }
.step-vis img + img { margin-left: -10px; }
.step-vis .bub { font-size: 15px; padding: 7px 14px 8px; }
.sv-call { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--live); color: #fff; }
.step-n { display: block; margin-bottom: 44px; font-size: 15px; font-weight: 600; }
.steps h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.15; letter-spacing: -0.03em; }
.steps p { margin: 0; max-width: 24em; color: var(--text-2); font-size: 16px; }

/* ------------------------------------------------------- five languages */

.hellos { list-style: none; display: flex; flex-direction: column; gap: 14px; max-width: 480px; margin: 0; padding: 0; }
.hellos li { display: grid; justify-items: start; gap: 5px; }
.hellos li.me { justify-items: end; }
.hellos li > .bub { grid-area: 1 / 1; }
.hellos .bub { font-size: clamp(17px, 1.4vw, 19px); }
.hellos small { padding: 0 6px; color: var(--text-3); font-size: 12.5px; }

/* --------------------------------------------------------------- honest */

.safe .split { align-items: start; }
.safe .lp-link { display: inline-block; margin-top: 24px; }
.safe-list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 0; }
.safe-list > div { padding-top: 20px; border-top: 1px solid var(--line-2); }
.safe-list dt { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.safe-list dt .cap-ic { padding: 0; }
.safe-list dd { margin: 10px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }

/* ------------------------------------------------------------- pricing */

.price-head { max-width: 40em; }
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.lp-plan { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line-2); border-radius: 24px; }
.lp-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-plan h3 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.lp-plan .pick { padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.lp-plan-tag { margin: 6px 0 0; color: var(--text-2); font-size: 15px; }
.lp-plan-price { display: flex; align-items: baseline; gap: 8px; margin: 28px 0 0; }
.lp-plan-price b { font-size: clamp(44px, 4vw, 56px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.lp-plan-price span { color: var(--text-2); font-size: 15px; }
.lp-plan ul { flex: 1; display: grid; align-content: start; gap: 10px; margin: 24px 0 28px; padding: 22px 0 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); list-style: none; font-size: 15px; }
.lp-plan li { display: flex; align-items: flex-start; gap: 10px; }
.lp-plan li svg { flex: none; margin-top: 4px; }
.lp-plan li.is-off { opacity: 0.5; }
.lp-plan .lp-btn { width: 100%; }

/* ---------------------------------------------- discover: the guides */

.lp-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.lp-guides a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 0 26px; border-top: 1px solid var(--line-2); color: var(--text); text-decoration: none; }
.lp-guides strong { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 140ms; }
.lp-guides a:hover strong, .lp-guides a:focus-visible strong { text-decoration-color: currentColor; }
.lp-guides span { color: var(--text-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .lp-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-guides { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- the end */

.final { padding-bottom: var(--sec); }
.final-art { display: block; width: min(440px, 78%); height: auto; margin: 0 0 clamp(24px, 3vw, 40px) -8px; }
.final-title { margin: 0; max-width: 12em; font-size: clamp(44px, 6.4vw, 92px); font-weight: 600; line-height: 1; letter-spacing: -0.048em; text-wrap: balance; }
.final .lp-lead { margin-top: 20px; }

/* Phones: "Start free" in reach once the first screen has gone, until the end. */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); transform: translateY(110%); transition: transform 220ms var(--ease-out); }
.sticky-cta.is-on { transform: none; }
.sticky-cta > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sticky-cta b { font-size: 15px; font-weight: 600; }
.sticky-cta small { color: var(--text-2); font-size: 13px; }

/* ------------------------------------------------------------- smaller */

@media (max-width: 960px) {
  .hero-grid, .try-in, .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-art { position: static; display: block; width: 116px; margin: 20px 0 -84px auto; }
  .stage-mem { --art-w: 120px; --perch: 104px; }
  .stage-call { --art-w: 170px; --perch: 116px; }
  .stage-video { --art-w: 132px; --perch: 138px; }
  .stage-life { --art-w: 150px; --perch: 136px; }
  .stage-ring { --art-w: 170px; --perch: 124px; }
  .stage-call .stage-art, .stage-ring .stage-art { right: 0; }
  .flip .split-copy { order: 0; }
  .split > :not(.split-copy), .flip .split > :not(.split-copy) { justify-self: start; }
  .hero-grid { gap: 56px; }
  .thread { max-width: 560px; }
  .chatbox { max-width: 560px; }
  .caps { column-gap: 32px; }
  .lp-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .step-n { margin-bottom: 16px; }
}
@media (max-width: 700px) {
  .sticky-cta { display: flex; }
  .is-home .lp-foot { padding-bottom: 104px; }
  .caps, .safe-list { grid-template-columns: minmax(0, 1fr); }
  .safe-list { gap: 28px; }
  .chatbox { height: 480px; border-radius: 24px; }
  .ring-time { font-size: clamp(64px, 18vw, 96px); }
  .cc-btns span { width: 52px; height: 52px; }
  .callcard { padding: 22px; }
  .tour-video, .tour-live { aspect-ratio: 4 / 3; border-radius: 22px; }
  .tour-stage.is-live .tour-live { aspect-ratio: 4 / 5; }
  .tour-chip { margin: 12px; }
  .tour-cap { max-width: calc(100% - 24px); margin: 0 0 12px 12px; font-size: 15px; }
  .tour-acts { grid-area: 2 / 1; justify-self: stretch; margin: 12px 0 0; }
  .tour-walk { flex: 1; }
  .tour-round { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tour-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .hero-ctas .lp-btn { flex: 1 1 100%; }
  .thread { font-size: 17px; }
  .th-log .bub { max-width: 94%; }
}
@media (prefers-reduced-motion: reduce) {
  .thread *, .cb-log * { animation: none !important; }
  .sticky-cta, .memory li, .tour-cap, .hero-sky, .band-sky { transition: none; }
}

/* ==========================================================================
   Alive: particles, motion and things to play with (alive.js).

   One rule for all of it: nothing moves for people who ask their system for
   less motion, and nothing waits for an entrance unless html.alive is set
   (the page's first lines set it, and take it away again if alive.js never
   arrives), so without motion or without script every piece is simply there.
   Loops run only while their piece is on screen (.is-on).
   ========================================================================== */

/* The sky behind the headline: coloured shapes by day, stars at night. */
.hero { position: relative; isolation: isolate; }
/* At most a screen tall: the sky is about the first look, and fewer pixels keep phones cool. */
.hero-sky { position: absolute; inset: 0 0 auto; z-index: -1; width: 100%; height: 100%; height: min(100%, 100vh); height: min(100%, 100lvh); pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.band { position: relative; isolation: isolate; }
.band-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
:is(.hero-sky, .band-sky).is-ready { opacity: 1; }
.burst-layer { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }
/* The drawn people land and lean from their feet. */
.hero-art, .stage-art, .final-art { transform-origin: 50% 100%; }

/* Above the first screen, from the first paint: the drawn person beside the headline hops onto its
   place once, then floats while in view. The rest of the motion is in alive.css, which the page loads
   without making anyone wait for it. */
@media (prefers-reduced-motion: no-preference) {
  html.alive .hero-art { animation: perch-in 1.1s linear 0.35s backwards, bob 7s ease-in-out 1.45s infinite; animation-play-state: running, paused; }
  html.alive .hero.is-on .hero-art { animation-play-state: running, running; }
}
@keyframes perch-in {
  0% { opacity: 0; translate: 0 -56px; scale: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  42% { opacity: 1; translate: 0 0; scale: 1.06 0.9; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  64% { translate: 0 -12px; scale: 0.98 1.03; animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
  80% { translate: 0 0; scale: 1.025 0.97; animation-timing-function: ease-out; }
  100% { translate: 0 0; scale: 1; }
}