/* ==========================================================================
   The landing page, rebuilt for people rather than underwriters.

   The old one explained the product in three numbered cards. The problem
   with that is the product's whole appeal is a FEELING - that the person on
   the other end is taking their time, thinking, getting distracted - and no
   amount of body copy conveys a pause. So the hero does not describe it. It
   runs it: a real thread, replying at the same pace the app replies, with
   the same typing indicator and the same habit of answering in two short
   bursts instead of one paragraph.

   Everything else on the page is arranged around getting someone into that
   thread. The compliance material still exists, still linked, still honest -
   but condensed to a strip near the bottom instead of being the second thing
   anyone reads.
   ========================================================================== */

/* ── hero ──────────────────────────────────────────────────────────────── */

.lead {
  position: relative;
  padding: 72px 0 88px;
  overflow: hidden;
}

.lead-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .lead-grid { grid-template-columns: 1fr; gap: 44px; }
  .lead { padding: 44px 0 64px; }
}

.lead h1 {
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  margin-bottom: 20px;
}

/* The one line that carries the whole pitch, so it gets the accent and the
   italic - Fraunces has a genuinely lovely italic and this is the only place
   on the page that earns it. */
.lead h1 em {
  font-style: italic;
  color: var(--amber);
  font-weight: 400;
}

.lead-sub {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  color: var(--ivory-2);
  max-width: 44ch;
  margin-bottom: 28px;
}

.lead-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.lead-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--ivory-3);
}

.lead-note b { color: var(--amber); font-weight: 600; }

/* ── the phone ─────────────────────────────────────────────────────────── */

.phone {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 340 / 660;
  border-radius: 42px;
  background: #04050A;
  border: 1px solid rgba(242, 245, 249, 0.13);
  box-shadow:
    0 0 0 8px #10141C,
    0 40px 90px -30px rgba(0, 0, 0, 0.95),
    0 0 120px -40px rgba(10, 132, 255, 0.42);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: rise 900ms var(--ease) both;
  animation-delay: 220ms;
}

/* A warm pool behind the glass, so the black is never flat. */
.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 40% at 50% 0%,
    rgba(10, 132, 255, 0.16) 0%, transparent 70%);
}

.phone-bar {
  position: relative;
  flex: none;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(242, 245, 249, 0.09);
  display: flex;
  align-items: center;
  gap: 11px;
}

.phone-face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(150deg, #3E6C93, #1E3348);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.phone-who { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }

.phone-state {
  font-size: 11.5px;
  color: var(--ivory-3);
  margin-top: 1px;
  height: 14px;
}

.phone-thread {
  position: relative;
  flex: 1;
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: flex-end;
  overflow: hidden;
}

.b {
  max-width: 78%;
  padding: 9px 14px;
  border-radius: 19px;
  font-size: 14.5px;
  line-height: 1.38;
  letter-spacing: -0.008em;
  animation: bubbleIn 340ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
  word-wrap: break-word;
}

.b.them {
  align-self: flex-start;
  background: #1F242D;
  color: var(--ivory);
  border-bottom-left-radius: 6px;
}

.b.you {
  align-self: flex-end;
  background: var(--amber);
  color: #fff;
  border-bottom-right-radius: 6px;
  font-weight: 500;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(9px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* The typing indicator, at the app's own rhythm. This is the single most
   important pixel on the page: it is the thing that says someone is there. */
.b.dots {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 13px 15px;
}

.b.dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ivory-3);
  animation: blip 1.25s ease-in-out infinite;
}

.b.dots i:nth-child(2) { animation-delay: 0.16s; }
.b.dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes blip {
  0%, 60%, 100% { opacity: 0.32; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* A photo, suggested rather than shown. The public page stays clothed - an
   underwriter loads this, and so does anyone's colleague walking past. */
.b.pic {
  padding: 0;
  width: 156px;
  height: 200px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(60% 44% at 50% 30%, rgba(206, 226, 245, 0.42), transparent 70%),
    linear-gradient(165deg, #35566F 0%, #1B2A38 55%, #101820 100%);
}

.b.pic::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  background: rgba(6, 7, 10, 0.16);
}

.b.pic span {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 12px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.phone-input {
  flex: none;
  margin: 0 12px 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(242, 245, 249, 0.06);
  border: 1px solid rgba(242, 245, 249, 0.1);
  font-size: 13.5px;
  color: var(--ivory-3);
}

/* ── the three things that make it feel real ───────────────────────────── */

.beats {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 40px;
}

.beat h3 {
  font-size: 22px;
  margin-bottom: 7px;
  letter-spacing: -0.02em;
}

.beat p { color: var(--ivory-2); font-size: 16px; margin-bottom: 0; }

.beat-mark {
  width: 34px;
  height: 2px;
  background: var(--amber);
  margin-bottom: 16px;
  border-radius: 2px;
}

/* ── a wide, quiet quote-ish band ──────────────────────────────────────── */

.band {
  padding: 92px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(60% 100% at 50% 50%, rgba(10, 132, 255, 0.07), transparent 72%);
}

.band p {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.24;
  letter-spacing: -0.024em;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}

.band em { font-style: italic; color: var(--amber); }

/* ── build-her strip ───────────────────────────────────────────────────── */

.traits {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
  max-width: 62ch;
}

.trait {
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ivory-2);
  background: rgba(242, 245, 249, 0.03);
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

.trait:hover { border-color: rgba(10, 132, 255, 0.55); color: var(--ivory); }

/* ── pricing, friendlier ───────────────────────────────────────────────── */

.free {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--amber-soft);
  border: 1px solid rgba(10, 132, 255, 0.38);
  color: var(--amber);
  font-size: 14.5px;
  font-weight: 500;
  margin-bottom: 22px;
}

.pack-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ivory-3);
}

/* ── the honest strip, condensed ───────────────────────────────────────── */

.trust {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 30px;
}

.trust div {
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}

.trust h4 {
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 5px;
  color: var(--ivory);
}

.trust p { font-size: 14px; color: var(--ivory-3); margin: 0; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .phone, .b { animation: none !important; }
  .b.dots i { animation: none; opacity: 0.6; }
}

/* ══════════════════════════════════════════════════════════════════════════
   The cast, at the top of the page

   The single most persuasive thing this product has is that there are people
   in it. So they go first, before any copy: two rows drifting in opposite
   directions, which reads as a catalogue you are looking through rather than
   a grid you are being shown.

   Clothed head-and-shoulders portraits, deliberately. These are the app's
   own avatars, which are generated with an explicitly non-explicit prompt -
   and a public landing page is loaded by payment underwriters, ad reviewers
   and people at desks. What is behind the sign-in is a separate question.
   ══════════════════════════════════════════════════════════════════════════ */

.cast {
  position: relative;
  padding: 0 0 6px;
  /* Full-bleed out of .wrap - the rows should run off both edges so it reads
     as more people than fit on screen. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cast-row {
  display: flex;
  gap: 14px;
  width: max-content;
  margin-bottom: 14px;
  animation: drift 46s linear infinite;
}

/* The second row runs the other way and slightly slower, so the two never
   line up into an obvious repeating block. */
.cast-row.back {
  animation-duration: 58s;
  animation-direction: reverse;
}

.cast:hover .cast-row { animation-play-state: paused; }

@keyframes drift {
  from { transform: translateX(0); }
  /* Exactly half, because the row's contents are duplicated once - that is
     what makes the loop seamless rather than snapping back. */
  to   { transform: translateX(-50%); }
}

.face {
  position: relative;
  flex: none;
  width: 168px;
  height: 210px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  text-decoration: none;
  display: block;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease);
}

.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  filter: saturate(1.04);
}

.face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(4, 5, 10, 0.88) 100%);
}

.face b {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 10px;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.face b span {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 1px;
}

.face:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 132, 255, 0.6);
}

.face .go {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  background: rgba(10, 132, 255, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 220ms var(--ease);
}

.face:hover .go { opacity: 1; }

.face .go i {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
}

.cast-note {
  text-align: center;
  font-size: 13.5px;
  color: var(--ivory-3);
  margin: 14px 0 0;
}

@media (max-width: 640px) {
  .face { width: 132px; height: 168px; }
}

@media (prefers-reduced-motion: reduce) {
  .cast-row { animation: none; }
  .cast { -webkit-mask-image: none; mask-image: none; }
}