/* Teylo design system.
   One stylesheet for every page. Tokens first, then layout, then components.
   Rules of the house: warm-neutral stone ground, no pure black or white, no violet,
   four companion hues at matched weight, and type that a tired person reads without effort. */

:root {
  --bg: #e6e7e4;
  --card: #fbfbfa;
  --ink: #16181a;
  --soft: #63696c;
  --line: #d6d8d5;
  --bub: #eeefec;

  --tess: #9c5a86;
  --ebz: #3f6f7a;
  --jamie: #8a6a3f;
  --frankie: #7f9455;

  --tess-t: #f1eaee;
  --ebz-t: #eceff0;
  --jamie-t: #f1ede6;
  --frankie-t: #ecefe7;

  --wrap: 1120px;
  --read: 34rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font:
    400 17px/1.5 Onest,
    system-ui,
    -apple-system,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
::selection {
  background: rgba(22, 24, 26, 0.12);
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 26px 24px 0;
}

/* nav ------------------------------------------------------------------ */
nav.site {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(44px, 7vw, 84px);
}
.logo {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
  text-decoration: none;
}
nav.site .links {
  display: flex;
  gap: 22px;
  align-items: center;
}
nav.site .links a {
  color: var(--soft);
  font-size: 15.5px;
  text-decoration: none;
}
nav.site .links a:hover,
nav.site .links a[aria-current] {
  color: var(--ink);
}

/* type ----------------------------------------------------------------- */
h1 {
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 700;
}
h2 {
  font-size: clamp(23px, 2.7vw, 30px);
  letter-spacing: -0.03em;
  font-weight: 600;
}
h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.lede {
  font-size: 20px;
  line-height: 1.45;
  color: var(--soft);
  max-width: 34ch;
  margin-top: 20px;
}
/* The reading measure applies to *text*, not to everything a page puts inside its
   prose block. Clamping the container itself squeezed card grids and the
   conversation phone into a 34rem column and forced four cards to wrap 2x2 with
   two thirds of the viewport empty beside them.
   So the measure moves onto the elements that are actually read, and layout
   blocks — grids, phones, CTA rows — take the full column. */
.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3,
.prose > .meta,
.prose > blockquote {
  max-width: var(--read);
}
.prose p,
.prose li {
  color: var(--soft);
  margin-bottom: 16px;
  line-height: 1.6;
}
.prose h2 {
  margin: 44px 0 14px;
}
.prose h3 {
  margin: 30px 0 10px;
}
.prose ul {
  padding-left: 20px;
  margin-bottom: 16px;
}
.prose strong {
  color: var(--ink);
  font-weight: 500;
}
/* Links in running text — and only there.

   This was `.prose a`, which painted every button inside a prose block near-black
   on its near-black background: an unreadable blob where the primary action
   should be. The first fix was a `:not(.cta):not(.cta2)` chain, which broke again
   the moment a card introduced `.acts .t` — a deny-list has to be extended every
   time a component is added, and it fails silently and invisibly when someone
   forgets.

   So it is an allow-list of *text* containers instead. A link in a paragraph or a
   list item is body copy and takes the ink colour; anything a component draws
   keeps whatever that component gave it. */
.prose > p a,
.prose > ul a,
.prose > ol a,
.prose > blockquote a,
.prose > .meta a {
  color: var(--ink);
}
.meta {
  font-size: 14.5px;
  color: var(--soft);
}

/* page header ---------------------------------------------------------- */
.phead {
  padding-bottom: clamp(40px, 6vw, 72px);
}
.phead .lede {
  max-width: 46ch;
}

/* buttons -------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--card);
  text-decoration: none;
  padding: 16px 26px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 17px;
  transition: transform 0.16s ease;
  box-shadow: 0 8px 22px -10px rgba(22, 24, 26, 0.45);
}
.cta:hover {
  transform: translateY(-2px);
}
.cta.ghost {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}
.cta2 {
  color: var(--soft);
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.cta2:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.ctas {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
:focus-visible {
  outline: 2px solid rgba(22, 24, 26, 0.45);
  outline-offset: 2px;
}

/* cards ---------------------------------------------------------------- */
.card {
  background: var(--card);
  border-radius: 22px;
  padding: 26px 24px;
  box-shadow: 0 0 0 1px var(--line);
}
.grid {
  display: grid;
  gap: 14px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
.card h3 {
  margin-bottom: 8px;
}
.card p {
  color: var(--soft);
  font-size: 16px;
  line-height: 1.5;
}

/* faq ------------------------------------------------------------------ */
.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  padding: 20px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  color: var(--soft);
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after {
  content: '–';
}
.faq details p {
  color: var(--soft);
  padding-bottom: 20px;
  max-width: 60ch;
  line-height: 1.6;
}

/* footer --------------------------------------------------------------- */
footer.site {
  margin-top: clamp(72px, 10vw, 128px);
  overflow: hidden;
}
footer.site .fin {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
/* Five columns, because the links split five ways. It was four with eight links
   under Teylo and three under Legal — a column twice the height of its neighbours
   reads as a list someone stopped maintaining. */
.fgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
.fcol h3 {
  font-size: 15px;
  font-weight: 400;
  color: var(--soft);
  margin-bottom: 18px;
}
.fcol a {
  display: block;
  font-size: 15.5px;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 12px;
}
.fcol a:hover {
  color: var(--soft);
}
.fbase {
  margin-top: 48px;
  font-size: 14.5px;
  color: var(--soft);
}
.fbase i {
  font-style: normal;
  opacity: 0.5;
  margin: 0 10px;
}
.fmark {
  display: block;
  width: 100%;
  margin-top: 30px;
  font-size: 22vw;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.95;
  text-align: center;
  color: var(--ink);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  padding-bottom: 0.6vw;
}

@media (max-width: 720px) {
  .fgrid {
    grid-template-columns: 1fr 1fr;
  }

  nav.site .links {
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  nav.site .links a {
    font-size: 14.5px;
  }
  .lede {
    font-size: 18px;
  }
  .ctas {
    gap: 14px;
  }
  .cta {
    padding: 15px 22px;
    font-size: 16px;
  }
}
@media (max-width: 420px) {
  nav.site .links a[href='/about'],
  nav.site .links a[href='/safety'] {
    display: none;
  }
}

@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 5 -> 3 -> 2: five columns crowd well before the existing 2-up breakpoint,
     and a footer that jumps straight from five to two leaves a ragged last row. */
  .fgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}
@media (max-width: 560px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
  .fgrid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Static conversation phone ────────────────────────────────────────────────
   The hero's phone is interactive and its CSS lives inline in index.html, tied to
   the JS that swaps panes. This is the flat cousin: one thread, no list, no
   script. It exists because the conversation pages were rendering their examples
   as page-width blockquotes, which made a six-line exchange occupy a whole screen
   and read as documentation rather than as a text message.

   Fixed height with the thread scrolling inside is the point. A conversation is
   an illustration, not the content, and it should cost the same vertical space
   whether it is four lines or forty. */
.dphone {
  background: var(--card);
  border-radius: 40px;
  box-shadow:
    0 30px 70px -30px rgba(22, 24, 26, 0.32),
    0 0 0 1px var(--line);
  max-width: 360px;
  width: 100%;
  height: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dphone .dhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.dphone .dav {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 650;
  font-size: 14px;
  flex: none;
}
.dphone .dhead b {
  font-size: 15.5px;
}
.dphone .dmsgs {
  flex: 1;
  /* Without this the thread does not scroll at all.

     A flex item's `min-height` defaults to `auto`, which means "at least as tall
     as my content" — so `flex: 1` with `overflow-y: auto` grows the box to fit
     every bubble instead of scrolling it, and `.dphone`'s `overflow: hidden`
     clips the overflow. The result looks like a scrollable thread and is not one:
     `scrollHeight` equals `clientHeight`, so nothing can scroll it, by script or
     by hand. */
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* The thread starts at its beginning, not scrolled to the newest line: these
     are read top-down like a story, unlike a live chat. */
  justify-content: flex-start;
}
.dphone .dm {
  max-width: 82%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.4;
}
.dphone .dm.them {
  background: var(--bub);
  border-bottom-left-radius: 6px;
  align-self: flex-start;
}
.dphone .dm.me {
  color: #fff;
  border-bottom-right-radius: 6px;
  align-self: flex-end;
}
/* A pause in the conversation, rendered as time rather than as an empty bubble. */
.dphone .dgap {
  align-self: center;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  opacity: 0.55;
  padding: 6px 0 2px;
}

/* Two-column: the point on the left, the conversation on the right. Collapses to
   one column early, because a 360px phone beside prose stops working long before
   the usual breakpoint. */
.showcase {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 360px);
  gap: 44px;
  align-items: center;
  margin: 40px 0;
}
.showcase > .scopy > :first-child {
  margin-top: 0;
}
@media (max-width: 860px) {
  .showcase {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ── Companion card ───────────────────────────────────────────────────────────
   The landing page's `.strip .p` card, ported out of index.html's inline <style>
   so every page can use it. The generated pages were rendering plain white boxes
   while the same four companions carried their own hue on the home page, which
   made those pages read as a different product.

   Same shape, same tint, same side-by-side actions. The one difference is the
   name: on the home page it opens an in-page panel via JS, and here it is a link
   to that companion's own `/meet/<slug>` page, which is the same information at
   a real URL. */
.pcard {
  background: var(--tint, var(--card));
  border-radius: 22px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px var(--edge, var(--line));
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.pcard:hover {
  transform: translateY(-2px);
}
.pcard .av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.pcard .nm {
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 19px;
}
.pcard .nm .chev2 {
  opacity: 0.4;
}
.pcard .nm:hover .chev2 {
  opacity: 0.9;
}
.pcard i {
  display: block;
  font-style: normal;
  color: var(--soft);
  font-size: 15px;
  margin-top: 4px;
}
/* Tabular figures so four numbers in a row line up rather than shimmering. */
.pcard .n {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
/* `margin-top: auto` pins the actions to the bottom, so cards with a longer role
   line keep their buttons on one line across the row. */
.pcard .acts {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  gap: 8px;
}
.pcard .acts a {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
}
.pcard .acts .t {
  background: var(--ink);
  color: var(--card);
}
.pcard .acts .c {
  background: rgba(22, 24, 26, 0.055);
  color: var(--ink);
}

/* ── Definition list ──────────────────────────────────────────────────────────
   /what-is-teylo is a <dl> on purpose: it is the entity-anchor page, written to
   be read as much by a machine as by a person, and a definition list is the
   honest markup for "here is a term and here is what it means". It had no styling
   at all, so it rendered as an undifferentiated dump of alternating lines. */
.prose > dl {
  max-width: var(--read);
  margin: 8px 0 28px;
}
.prose > dl dt {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 26px;
}
.prose > dl dd {
  margin: 6px 0 0;
  color: var(--ink);
  line-height: 1.6;
}
/* A rule between entries, but never above the first — the heading already
   separates it, and a line there reads as a stray border. */
.prose > dl dt + dd {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.prose > dl dd:last-of-type {
  border-bottom: 0;
}

/* ── Card that is a link ──────────────────────────────────────────────────────
   The index grids (/conversations/, /compare/) are lists of links wearing card
   shapes, and they had no hover state, so nothing said they were clickable
   except the cursor. Same lift the companion card uses, for consistency. */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
a.card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px -18px rgba(22, 24, 26, 0.45),
    0 0 0 1px var(--line);
}
a.card h3 {
  color: var(--ink);
}