/* Home credibility blocks, 30 Sep: t01 Tom and t02 signed at source (C2PA
   with Trufo). Same grid as the mockup blocks: x and widths in --ux, y and
   heights in --uy, type in --hd. */
.fp-block[data-stop="t01"] .fp-title { --lh: 64; left: calc(151 * var(--ux)); top: calc(360 * var(--uy)); }
.fp-block[data-stop="t01"] .ht-sub { left: calc(155 * var(--ux)); top: calc(590 * var(--uy)); }
.fp-block[data-stop="t01"] .fp-create { --bw: 225; left: calc(155 * var(--ux)); top: calc(700 * var(--uy)); }
.fp-block[data-stop="t01"] .ht-demo { position: absolute; left: calc(880 * var(--ux)); top: calc(230 * var(--uy)); width: calc(570 * var(--ux)); height: calc(740 * var(--uy)); }

.fp-block[data-stop="t02"] .fp-img { left: calc(801 * var(--ux)); top: 0; width: calc(799 * var(--ux)); height: calc(1200 * var(--uy)); object-position: 50% 25%; }
.fp-block[data-stop="t02"] .ht-pinbox { position: absolute; left: calc(801 * var(--ux)); top: calc(120 * var(--uy)); right: calc(40 * var(--ux)); height: 0; }
.fp-block[data-stop="t02"] .fp-title { --lh: 64; left: calc(158 * var(--ux)); top: calc(420 * var(--uy)); }
.fp-block[data-stop="t02"] .ht-sub { left: calc(162 * var(--ux)); top: calc(590 * var(--uy)); }
.fp-block[data-stop="t02"] .fp-create { --bw: 225; left: calc(162 * var(--ux)); top: calc(720 * var(--uy)); }
.fp-block[data-stop="t02"] .ht-trufo { position: absolute; left: calc(162 * var(--ux)); top: calc(826 * var(--uy)); }

.ht-sub {
  position: absolute;
  width: calc(520 * var(--ux));
  margin: 0;
  color: #3c3c3c;
  font-weight: 500;
  font-size: calc(21 * var(--hd));
  line-height: 1.38;
}

button.fp-create.ht-btn {
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

/* Tom demo: a short conversation that plays when the block shows. */
.ht-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(22 * var(--hd));
  box-sizing: border-box;
  padding: calc(48 * var(--hd)) calc(44 * var(--hd));
  border-radius: calc(24 * var(--hd));
  background: #f4f3f0;
  font-weight: 500;
  font-size: calc(19 * var(--hd));
  line-height: 1.35;
  overflow: visible;
}

.ht-demo > * {
  opacity: 0;
  transform: translateY(calc(12 * var(--hd)));
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ht-demo.is-on > * { opacity: 1; transform: none; }
.ht-demo.is-on > :nth-child(1) { transition-delay: 0.15s; }
.ht-demo.is-on > :nth-child(2) { transition-delay: 0.9s; }
.ht-demo.is-on > :nth-child(3) { transition-delay: 1.6s; }
.ht-demo.is-on > :nth-child(4) { transition-delay: 2.5s; }
.ht-demo.is-on > :nth-child(5) { transition-delay: 3.1s; }

.ht-u,
.ht-t p {
  margin: 0;
  padding: calc(16 * var(--hd)) calc(22 * var(--hd));
  border-radius: calc(22 * var(--hd));
  background: #fff;
}

.ht-u { align-self: flex-end; max-width: 80%; background: #e6e4df; }

.ht-t { display: flex; align-items: flex-start; gap: calc(14 * var(--hd)); max-width: 92%; }
.ht-t b { font-weight: 600; }

.ht-face {
  flex: none;
  width: calc(38 * var(--hd));
  height: calc(38 * var(--hd));
  margin-top: calc(6 * var(--hd));
}

.ht-face svg { display: block; width: 100%; height: 100%; }

.ht-ok,
.ht-out { margin: 0 0 0 calc(52 * var(--hd)); }

.ht-ok { display: flex; gap: calc(10 * var(--hd)); }

.ht-ok span {
  display: inline-grid;
  place-items: center;
  height: calc(40 * var(--hd));
  padding: 0 calc(18 * var(--hd));
  border: 1px solid #000;
  border-radius: 999px;
  font-size: calc(16 * var(--hd));
}

.ht-ok span.is-ink { background: #000; color: #fff; }

.ht-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--hd)); }
.ht-out img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(12 * var(--hd)); }
.ht-last { position: relative; display: block; }
.ht-last .tc-wrap { font-size: 11px; top: auto; bottom: 0.7em; right: 0.7em; }
.ht-last .tc-pin-t { display: none; }
.ht-last .tc-pin { padding: 0 0.6em; }

@media (prefers-reduced-motion: reduce) {
  .ht-demo > * { opacity: 1; transform: none; transition: none; }
}

/* Phone: frames t01 and t02 in the mobile list. */
@media (max-width: 800px) {
  .ht-mob { padding-top: calc(140 * var(--m)); }
  .ht-mob > .fp-mob-copy { margin: 0 0 0 calc(30 * var(--m)); }
  .fp-mob .fp-create.fp-mob-btn.ht-btn { width: auto; padding: 0 calc(20 * var(--m)); margin-left: calc(30 * var(--m)); }
  .ht-mob .fp-mob-hint { max-width: calc(300 * var(--m)); }

  .ht-mob .ht-demo {
    align-self: stretch;
    margin: calc(32 * var(--m)) calc(20 * var(--m)) 0;
    padding: calc(22 * var(--m)) calc(16 * var(--m));
    gap: calc(12 * var(--m));
    border-radius: calc(18 * var(--m));
    font-size: calc(13.5 * var(--m));
  }

  .ht-mob .ht-u,
  .ht-mob .ht-t p { padding: calc(11 * var(--m)) calc(14 * var(--m)); border-radius: calc(16 * var(--m)); }
  .ht-mob .ht-t { gap: calc(8 * var(--m)); }
  .ht-mob .ht-face { width: calc(26 * var(--m)); height: calc(26 * var(--m)); margin-top: calc(4 * var(--m)); }
  .ht-mob .ht-ok,
  .ht-mob .ht-out { margin-left: calc(34 * var(--m)); }
  .ht-mob .ht-ok { gap: calc(6 * var(--m)); }
  .ht-mob .ht-ok span { height: calc(30 * var(--m)); padding: 0 calc(12 * var(--m)); font-size: calc(12 * var(--m)); }
  .ht-mob .ht-out { gap: calc(6 * var(--m)); }
  .ht-mob .ht-out img { border-radius: calc(8 * var(--m)); }
  .ht-mob .ht-last .tc-wrap { font-size: 9.5px; }

  .ht-signed-m { position: relative; align-self: stretch; margin-top: calc(32 * var(--m)); }
  .ht-signed-m .fp-mob-img { display: block; width: 100%; height: auto; object-fit: cover; object-position: 50% 18%; }
}

.ht-trufo {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  color: #8a8a8a;
  font-weight: 500;
  font-size: max(calc(15 * var(--hd)), 12px);
}

.ht-trufo img { height: 1.1em; width: auto; opacity: 0.85; filter: grayscale(1) brightness(0.72); }

@media (max-width: 800px) {
  .ht-mob .ht-trufo { margin: calc(18 * var(--m)) 0 0 calc(30 * var(--m)); font-size: calc(12.5 * var(--m)); }
}

/* "How it works" (t02): modal on desktop, sheet from the bottom on the phone.
   White, 1px #d5d5d5 lines, no shadow. */
.ht-how[hidden] { display: none; }
.ht-how { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.ht-how-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.ht-how-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(calc(1100 * var(--hd)), calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  background: var(--paper);
  border: 1px solid #d5d5d5;
  border-radius: calc(16 * var(--hd));
  letter-spacing: -0.05em;
}
.ht-how-x { position: absolute; top: calc(18 * var(--hd)); right: calc(18 * var(--hd)); z-index: 2; width: 32px; height: 32px; padding: 8px; border: 0; border-radius: 999px; background: var(--paper); color: #000; cursor: pointer; }
.ht-how-x svg { display: block; width: 100%; height: 100%; }
.ht-how-media { position: relative; min-height: calc(560 * var(--hd)); background: #e9e9e9; }
.ht-how-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.ht-how-media .tc-wrap { position: absolute; top: calc(18 * var(--hd)); left: calc(18 * var(--hd)); }
.ht-how-copy { padding: calc(56 * var(--hd)) calc(48 * var(--hd)) calc(40 * var(--hd)); }
.ht-how-k { margin: 0; color: #8a8a8a; font-size: max(calc(15 * var(--hd)), 12px); }
.ht-how-t { margin: calc(14 * var(--hd)) 0 0; font-weight: 500; font-size: calc(40 * var(--hd)); line-height: 1.04; }
.ht-how-x2 { margin: calc(18 * var(--hd)) 0 0; color: #3c3c3c; font-size: max(calc(17 * var(--hd)), 13px); line-height: 1.38; }
.ht-how-list { margin: calc(20 * var(--hd)) 0 0; padding: 0; list-style: none; }
.ht-how-list li { padding: calc(9 * var(--hd)) 0; border-top: 1px solid #d5d5d5; font-size: max(calc(15 * var(--hd)), 12px); }
.ht-how-act { margin: calc(24 * var(--hd)) 0 0; }
.ht-how-btn { display: inline-flex; align-items: center; height: max(calc(44 * var(--hd)), 36px); padding: 0 calc(20 * var(--hd)); border: 1px solid #000; color: #000; text-decoration: none; font-size: max(calc(15 * var(--hd)), 12px); }
.ht-how-trufo { position: static; margin: calc(18 * var(--hd)) 0 0; }

@media (max-width: 800px) {
  .ht-how { align-items: flex-end; }
  .ht-how-card {
    grid-template-columns: 1fr;
    width: 100%;
    max-height: 92dvh;
    border-radius: calc(18 * var(--m)) calc(18 * var(--m)) 0 0;
    border-bottom: 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
    overscroll-behavior: contain;
  }
  .ht-how.is-in .ht-how-card { transform: none; }
  .ht-how-x { top: calc(12 * var(--m)); right: calc(12 * var(--m)); }
  .ht-how-media { min-height: 0; height: calc(300 * var(--m)); }
  .ht-how-copy { padding: calc(24 * var(--m)) calc(24 * var(--m)) calc(32 * var(--m) + env(safe-area-inset-bottom)); }
  .ht-how-k { font-size: calc(13 * var(--m)); }
  .ht-how-t { margin-top: calc(10 * var(--m)); font-size: calc(28 * var(--m)); }
  .ht-how-x2 { margin-top: calc(12 * var(--m)); font-size: calc(15 * var(--m)); }
  .ht-how-list { margin-top: calc(14 * var(--m)); }
  .ht-how-list li { padding: calc(9 * var(--m)) 0; font-size: calc(14 * var(--m)); }
  .ht-how-act { margin-top: calc(18 * var(--m)); }
  .ht-how-btn { height: calc(44 * var(--m)); padding: 0 calc(18 * var(--m)); font-size: calc(15 * var(--m)); }
}
@media (prefers-reduced-motion: reduce) { .ht-how-card { transition: none; } }
.ht-how-x:focus:not(:focus-visible) { outline: none; }